/* HOUSE — one skin for desk, provider app, work phone and Studio.
   Background: the live app's repeating hex pattern (oneapp/index.html #gateScreen)
   on #060309 with two faint glows. Never the website honeycomb photo or film.
   Glass buttons: flat translucent fill, 1px light border, no gradient fills,
   neon only on hover. Accent colours buttons and highlights only. */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap");

:root{
  --bg:#060309; --ink:#f3edfb; --dim:#a99cc6; --line:rgba(255,255,255,.14);
  --glass:rgba(22,14,34,.55); --glass2:rgba(255,255,255,.045);
  --brand:#a074e8; --acc:#ff5fd0; --accInk:#12101a;
  --good:#3ee6a4; --warn:#ffc15a; --bad:#ff3d6e; --cool:#5fd4ff;
  --r:22px; --font:"Futura","Jost","Century Gothic",system-ui,sans-serif;
  color-scheme:dark;
}
html.day{color-scheme:light}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.55;
  background-color:var(--bg);background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%}
.hide{display:none!important}
::selection{background:var(--acc);color:var(--accInk)}

/* ── glass surfaces ── */
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.card+.card{margin-top:14px}
.card.hot{border-color:color-mix(in srgb,var(--bad) 65%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--bad) 35%,transparent),0 0 34px color-mix(in srgb,var(--bad) 28%,transparent)}
.card.acc{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}

/* ── type ── */
.k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:500}
h1,h2,h3{font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:2.1rem;line-height:1.1}
h2{font-size:1.45rem;line-height:1.2}
h3{font-size:1.1rem}
.big{font-size:2.6rem;font-weight:600;letter-spacing:-.02em;line-height:1}
.dim{color:var(--dim)}
.small{font-size:.85rem}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.85rem}
.lbl{font-size:1.05rem;font-weight:600;letter-spacing:.02em}

/* ── buttons: glass, neon on hover only ── */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;
  border-radius:999px;border:1px solid var(--line);background:var(--glass2);color:var(--ink);cursor:pointer;
  font-weight:600;font-size:.95rem;letter-spacing:.04em;text-decoration:none;white-space:nowrap;
  transition:box-shadow .18s,border-color .18s,color .18s}
.b:hover,.b:focus-visible{outline:none;border-color:var(--acc);color:var(--ink);
  box-shadow:0 0 0 1px var(--acc),0 0 18px color-mix(in srgb,var(--acc) 70%,transparent),0 0 42px color-mix(in srgb,var(--acc) 35%,transparent)}
.b.pri{background:color-mix(in srgb,var(--acc) 16%,transparent);border-color:color-mix(in srgb,var(--acc) 60%,transparent)}
.b.bad{border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad)}
.b.bad:hover{box-shadow:0 0 0 1px var(--bad),0 0 22px color-mix(in srgb,var(--bad) 70%,transparent)}
.b.sm{min-height:34px;padding:6px 13px;font-size:.82rem}
.b.xl{min-height:64px;padding:14px 26px;font-size:1.2rem;border-radius:22px}
.b[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none!important;border-color:var(--line)!important}
.b.on{background:color-mix(in srgb,var(--acc) 22%,transparent);border-color:var(--acc)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.sp{justify-content:space-between}
.grow{flex:1;min-width:0}
.stack>*+*{margin-top:10px}

/* ── chips / tags ── */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--glass2);font-size:.8rem;letter-spacing:.06em;cursor:pointer;user-select:none}
.chip:hover{border-color:var(--acc)}
.chip.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,transparent)}
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;border:1px solid;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;font-weight:600}
.t-on{color:var(--good);border-color:color-mix(in srgb,var(--good) 50%,transparent)}
.t-bk{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.t-free{color:var(--cool);border-color:color-mix(in srgb,var(--cool) 50%,transparent)}
.t-off{color:var(--dim);border-color:var(--line)}
.t-bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.t-warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent)}
.t-stub{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent);border-style:dashed}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.dot.on{background:var(--good);box-shadow:0 0 10px var(--good)}
.dot.bk{background:var(--acc);box-shadow:0 0 10px var(--acc)}
.dot.free{background:var(--cool);box-shadow:0 0 10px var(--cool)}
.dot.off{background:#666}
.dot.bad{background:var(--bad);box-shadow:0 0 12px var(--bad)}

/* ── switch ── */
.sw{display:inline-block;vertical-align:middle;width:52px;height:30px;border-radius:999px;background:var(--glass2);border:1px solid var(--line);position:relative;
  flex:none;cursor:pointer;transition:.18s}
.sw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--dim);transition:.18s}
.sw.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 22%,transparent)}
.sw.on i{left:25px;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.sw.lock{opacity:.45;cursor:not-allowed}

/* ── folds (every setting behind a collapsed row) ── */
details.fold{border:1px solid var(--line);border-radius:18px;background:var(--glass2);margin-bottom:10px}
details.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 18px;min-height:56px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary b{font-size:1.02rem;font-weight:600}
details.fold>summary .val{margin-left:auto;color:var(--dim);font-size:.85rem;text-align:right}
details.fold>summary:after{content:"›";font-size:1.4rem;color:var(--dim);transition:.2s;margin-left:6px}
details.fold[open]>summary:after{transform:rotate(90deg)}
details.fold>.in{padding:4px 18px 18px}
details.fold:hover{border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}

/* ── ⓘ — explanations live here, never in a box ── */
.i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--line);font-size:.72rem;color:var(--dim);cursor:help;position:relative;flex:none;font-style:normal}
.i:hover,.i:focus,.i.open{color:var(--ink);border-color:var(--acc);outline:none}
.i:hover:after,.i:focus:after,.i.open:after{content:attr(data-tip);position:absolute;z-index:90;left:50%;top:26px;transform:translateX(-50%);
  width:max-content;max-width:280px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);
  color:var(--ink);font-size:.8rem;line-height:1.45;letter-spacing:0;text-transform:none;font-weight:400;white-space:normal;
  box-shadow:0 14px 40px rgba(0,0,0,.45)}

/* ── fields ── */
.f{display:block;margin:10px 0}
.f>span{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.in,.sel,textarea.in{width:100%;min-height:46px;padding:11px 14px;border-radius:14px;border:1px solid var(--line);
  background:var(--glass2);color:var(--ink);font-size:1rem}
textarea.in{min-height:96px;resize:vertical;line-height:1.5}
.in:focus,.sel:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 20%,transparent)}
.sel option{background:var(--bg);color:var(--ink)}
[contenteditable]{outline:none;border-radius:8px}
[contenteditable]:hover{box-shadow:0 0 0 1px var(--line)}
[contenteditable]:focus{box-shadow:0 0 0 1px var(--acc)}
.line{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.r{margin-left:auto;text-align:right}
.demo{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--warn);border:1px dashed color-mix(in srgb,var(--warn) 60%,transparent);
  padding:3px 9px;border-radius:999px;white-space:nowrap}

/* ── toast / modal ── */
#toasts{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:min(380px,92vw)}
.toast{background:var(--bg);border:1px solid var(--acc);border-radius:16px;padding:12px 16px;box-shadow:0 0 24px color-mix(in srgb,var(--acc) 40%,transparent);
  animation:tin .25s ease}
.toast.bad{border-color:var(--bad);box-shadow:0 0 24px color-mix(in srgb,var(--bad) 45%,transparent)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
.modal{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal>.card{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--bg)}

/* ── PIN lock ── */
.lock{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:16px;background-color:var(--bg)}
.lock .box{width:min(400px,100%);text-align:center}
.lock .mark{width:150px;height:150px;border-radius:50%;margin:0 auto 18px;display:block}
.pinrow{display:flex;justify-content:center;gap:14px;margin:18px 0}
.pinrow i{width:16px;height:16px;border-radius:50%;border:1px solid var(--dim)}
.pinrow i.f{background:var(--acc);border-color:var(--acc);box-shadow:0 0 12px var(--acc)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:300px;margin:0 auto}
.pad .b{min-height:64px;font-size:1.4rem;border-radius:20px}

/* ── brand slots ── */
.mark{border-radius:50%}
.wm{height:auto;display:block}

/* ── phone frame (work phone on desktop) ── */
.iphone{width:390px;max-width:100%;border-radius:54px;padding:12px;background:#000;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.04) inset}
.iphone .scr{border-radius:44px;overflow:hidden;height:800px;max-height:calc(100vh - 60px);display:flex;flex-direction:column;
  background-color:var(--bg);position:relative}
.iphone .island{width:118px;height:34px;border-radius:20px;background:#000;position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5}
.iphone .sbar{display:flex;justify-content:space-between;padding:16px 30px 6px;font-size:.8rem;font-weight:600}
@media (max-width:600px){
  .iphone{width:100%;border-radius:0;padding:0;border:0;box-shadow:none;background:transparent}
  .iphone .scr{border-radius:0;height:100vh;max-height:none}
  .iphone .island{display:none}
}

/* ── responsive helpers ── */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ════════ app shell: side nav on desktop, bottom tabs on phone ════════ */
.shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.nav{position:sticky;top:0;height:100vh;overflow:auto;padding:22px 16px;border-right:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;flex-direction:column;gap:4px}
.nav .wm{width:190px;margin:0 auto 6px}
.nav .who{text-align:center;margin-bottom:14px}
.nav a,.nav button.nv{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:16px;border:1px solid transparent;
  background:none;text-align:left;text-decoration:none;font-size:1rem;font-weight:500;letter-spacing:.02em;cursor:pointer;color:var(--ink)}
.nav a:hover,.nav button.nv:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.nav a.on,.nav button.nv.on{border-color:var(--line);background:var(--glass2);box-shadow:inset 3px 0 0 var(--acc)}
.nav .cnt{margin-left:auto;min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;font-size:.75rem;font-weight:700;
  background:var(--bad);color:#fff;box-shadow:0 0 14px color-mix(in srgb,var(--bad) 70%,transparent)}
.nav .foot{margin-top:auto;padding-top:14px}
.main{padding:26px clamp(16px,3vw,40px) 90px;min-width:0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.head h1{font-size:clamp(1.6rem,3vw,2.3rem)}
.tabs{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .nav{display:none}
  .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:4px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));overflow-x:auto;
    background:color-mix(in srgb,var(--bg) 82%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .tabs button{flex:1 0 auto;min-width:74px;min-height:52px;border-radius:14px;border:1px solid transparent;background:none;font-size:.78rem;font-weight:600;letter-spacing:.04em;position:relative;cursor:pointer}
  .tabs button.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
  .tabs button .cnt{position:absolute;top:2px;right:6px;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:.65rem;display:grid;place-items:center;padding:0 4px}
  .mtop{display:flex!important}
  .main{padding:16px 16px 110px}
}
.mtop{display:none;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:sticky;top:0;z-index:40}
.mtop .wm{height:34px;width:auto}

/* ════════ roster tiles ════════ */
.tile{position:relative;border-radius:20px;border:1px solid var(--line);background:var(--glass);overflow:hidden;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.tile:hover{border-color:var(--acc);box-shadow:0 0 22px color-mix(in srgb,var(--acc) 30%,transparent)}
.tile .ph{height:150px;width:100%;display:block}
.tile .tb{padding:12px 14px}
.tile.bk{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.tile.free{border-color:color-mix(in srgb,var(--cool) 50%,transparent)}
.stat{padding:16px 18px}
.stat .big{margin-top:6px}

/* ════════ onboarding lanes ════════ */
.lanes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.lane{border:1px solid var(--line);border-radius:18px;padding:10px;background:var(--glass2);min-height:140px}
.lane>.k{display:block;margin:4px 4px 10px}
.lane .girl{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;border:1px solid var(--line);background:var(--glass);cursor:pointer;margin-bottom:8px}
.lane .girl:hover{border-color:var(--acc)}
.lane .girl .av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none}
@media (max-width:1100px){.lanes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.lanes{grid-template-columns:1fr}}
.steps{display:flex;gap:6px;flex-wrap:wrap}
.steps span{padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.steps span.done{color:var(--good);border-color:color-mix(in srgb,var(--good) 50%,transparent)}
.steps span.now{color:var(--acc);border-color:var(--acc);box-shadow:0 0 12px color-mix(in srgb,var(--acc) 40%,transparent)}
.phs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.phs .p{border-radius:14px;overflow:hidden;border:1px solid var(--line);position:relative}
.phs .p .im{height:150px;width:100%;display:block}
.phs .p .cap{padding:8px;font-size:.75rem}
.phs .p.fail{border-color:var(--bad)}
.phs .p.pass{border-color:color-mix(in srgb,var(--good) 55%,transparent)}

/* ════════ SMS: thread list + bubbles ════════ */
.threads{display:flex;flex-direction:column}
.th{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.th:hover{background:var(--glass2)}
.th.sel{background:color-mix(in srgb,var(--acc) 10%,transparent)}
.th.need{background:color-mix(in srgb,var(--bad) 12%,transparent);box-shadow:inset 4px 0 0 var(--bad)}
.th .av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;border:1px solid var(--line);background:var(--glass2)}
.th .nm{font-weight:600}
.th .pv{color:var(--dim);font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th .un{min-width:22px;height:22px;border-radius:11px;background:var(--acc);color:var(--accInk);font-size:.72rem;font-weight:700;display:grid;place-items:center;padding:0 6px}
.bubs{display:flex;flex-direction:column;gap:8px;padding:14px;overflow:auto;flex:1}
.bub{max-width:78%;padding:10px 14px;border-radius:20px;font-size:.95rem;line-height:1.4;word-wrap:break-word}
.bub.client{align-self:flex-start;background:var(--glass2);border:1px solid var(--line);border-bottom-left-radius:6px}
.bub.bot{align-self:flex-end;background:color-mix(in srgb,var(--brand) 26%,transparent);border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);border-bottom-right-radius:6px}
.bub.staff{align-self:flex-end;background:color-mix(in srgb,var(--acc) 24%,transparent);border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);border-bottom-right-radius:6px}
.bub.sys{align-self:center;font-size:.78rem;color:var(--warn);border:1px dashed color-mix(in srgb,var(--warn) 55%,transparent);border-radius:12px;max-width:92%}
.bub .by{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
.composer{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.composer .in{border-radius:22px}
.inbox{display:grid;grid-template-columns:380px minmax(0,1fr);min-height:620px;overflow:hidden;padding:0}
.inbox .left{border-right:1px solid var(--line);overflow:auto;max-height:78vh}
.inbox .right{display:flex;flex-direction:column;max-height:78vh}
@media (max-width:900px){.inbox{grid-template-columns:1fr}.inbox .left{max-height:none}.inbox.open .left{display:none}.inbox:not(.open) .right{display:none}}
.banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;border:1px solid var(--bad);color:var(--ink);
  background:color-mix(in srgb,var(--bad) 16%,transparent);box-shadow:0 0 26px color-mix(in srgb,var(--bad) 30%,transparent);margin-bottom:14px}
.banner.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent);box-shadow:none}

/* ════════ site editor ════════ */
.ed{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px}
@media (max-width:900px){.ed{grid-template-columns:1fr}}
.palette .pb{display:flex;align-items:center;gap:10px;padding:12px;border:1px dashed var(--line);border-radius:14px;margin-bottom:8px;cursor:grab;background:var(--glass2)}
.palette .pb:hover{border-color:var(--acc)}
.canvas{min-height:420px;border-radius:22px;padding:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,transparent)}
.blk{position:relative;border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:10px;background:var(--glass);cursor:grab}
.blk.drag{opacity:.4}
.blk.over{box-shadow:0 -3px 0 var(--acc)}
.blk .ctl{position:absolute;top:8px;right:8px;display:flex;gap:4px}
.blk .kind{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.dropend{height:60px;border:1px dashed var(--line);border-radius:16px;display:grid;place-items:center;color:var(--dim);font-size:.85rem}
.dropend.over{border-color:var(--acc);color:var(--ink)}

/* ════════ vault ════════ */
.vault{border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.lic{width:160px;height:100px;border-radius:12px;border:1px solid var(--line);object-fit:cover}
.masked{letter-spacing:.2em;color:var(--dim)}

/* ════════ help button (hold) ════════ */
.help{position:relative;width:100%;min-height:78px;border-radius:24px;border:1px solid var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent);
  color:var(--ink);font-size:1.25rem;font-weight:700;letter-spacing:.06em;cursor:pointer;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.help:hover{box-shadow:0 0 0 1px var(--bad),0 0 30px color-mix(in srgb,var(--bad) 60%,transparent)}
.help i{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb,var(--bad) 45%,transparent);transition:width .1s linear}
.help span{position:relative}

/* ════════ door cards (index) ════════ */
.door{display:block;text-decoration:none;padding:22px;border-radius:24px;border:1px solid var(--line);background:var(--glass);transition:.18s;min-height:150px}
.door:hover{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 0 30px color-mix(in srgb,var(--acc) 45%,transparent)}
.door h2{margin:8px 0 4px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;background:var(--glass2);flex-wrap:wrap}
.seg button{border:1px solid transparent;background:none;border-radius:999px;padding:10px 18px;font-weight:600;cursor:pointer;min-height:44px}
.seg button.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,transparent)}
.seg button:hover{border-color:var(--acc)}
table.t{width:100%;border-collapse:collapse}
table.t th{text-align:left;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.scrollx{overflow-x:auto}
.mback{display:none}@media (max-width:900px){.mback{display:inline-flex}}
.lane .girl .av>*{width:100%;height:100%;display:block}
.tile .tag{white-space:normal;text-align:left}.line>.lbl{flex:1;min-width:0}
.line>.r:has(.sw){flex-shrink:0}
.grid4 .tag,.grid3 .tag,.card .tag{white-space:normal}