/* 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}

/* iMessage-style threads (desk, work phone, her app): incoming left, outgoing right, time under */
.bub.provider{align-self:flex-start;background:var(--glass2);border:1px solid var(--line);border-bottom-left-radius:6px}
.bubs.imsg .bub.in{align-self:flex-start}
.bubs.imsg .bub.out{align-self:flex-end}
.bub .when{display:block;font-size:.66rem;color:var(--dim);margin-top:4px;text-align:right}
.bub.in .when{text-align:left}
.bring{margin-top:8px;padding:8px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);background:color-mix(in srgb,var(--acc) 12%,transparent);font-weight:600}
.th .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th .grow{min-width:0}
.th .pv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){
  .main{padding-left:12px;padding-right:12px}
  .head{align-items:flex-start}
  .head h1{font-size:1.6rem}
  .inbox{min-height:0}
  .inbox .right{max-height:none;min-height:70vh}
  .bub{max-width:86%}
  .composer{gap:8px}
  .composer .in{min-width:0;flex:1}
  .line{flex-wrap:wrap}
  .line>.r{margin-left:auto}
  .seg{display:flex;flex-wrap:wrap}
}
.groups{display:flex;gap:8px;overflow-x:auto;margin:0 0 14px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.groups button{flex:0 0 auto;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--glass);font-weight:700;cursor:pointer;white-space:nowrap}
.groups button.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,transparent)}
.bk-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;margin:0 0 10px;background:var(--glass);min-width:0}
.bk-r1,.bk-r2,.bk-r3{display:flex;align-items:center;gap:8px;min-width:0}
.bk-r1{justify-content:space-between}
.bk-r2 .bk-girl{font-weight:700;flex:0 0 auto}
.bk-r2 .bk-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bk-actions{display:flex;gap:8px;flex-wrap:wrap}
.bk-actions .b,.bk-actions select{flex:1}
.travel-result{margin:8px 0;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--glass2)}
@media (max-width:900px){
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabs button{flex:0 0 auto;min-width:max-content;white-space:nowrap;padding:0 12px}
}
@media (max-width:600px){
  .bk-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
  .bk-actions .b,.bk-actions select,.bk-actions button{width:100%;min-width:0}
}

/* DESIGN PACK designer-a */
/* Agency file in full (tokens + shared components). Parlour tokens only: component block is byte-identical and already targets both skins. desk-responsive last. Companion has no .shell/.nav/.tabs so the 1280 side menu does not apply to her app. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,560;9..144,650&family=Nunito+Sans:wght@400;600;700;800&family=Outfit:wght@400;500;600;700&display=swap");

/* Noctua Agency — cool neon cyan and violet on a lit ground.
   Paste this whole file at the end of css/house.css.
   Put data-skin="agency" on the html element. */

html[data-skin="agency"]{
  --eh-brand:"Noctua Agency";
  --eh-accent:#2ee6ff;
  --eh-accent-2:#b794f6;
  --eh-ground:#2a4a86;
  --eh-ground-2:#3a62b0;
  --eh-ground-3:#243e78;
  --eh-glow:#2ee6ff;
  --eh-edge:#7af6ff;
  --eh-radius:0px;
  --eh-font:"Outfit",system-ui,sans-serif;
  --eh-display:"Outfit",system-ui,sans-serif;
  --eh-ink:#f4feff;
  --eh-dim:#d4eef8;
  --eh-on-accent:#042028;
  --eh-card:rgba(8,22,48,.72);
  --eh-scrim:rgba(8,22,48,.88);
  --eh-line:rgba(180,245,255,.55);
  --eh-good:#8dffa8;
  --eh-warn:#ffe1a3;
  --eh-bad:#ff9bb6;
  --eh-plate:linear-gradient(180deg, transparent, rgba(6,16,32,.55) 42%, rgba(6,16,32,.94));
  --eh-hover:linear-gradient(180deg, rgba(6,16,32,.2) 8%, rgba(6,16,32,.72) 46%, rgba(6,16,32,.96));
  --bg:#2a4a86; --ink:#f4feff; --dim:#d4eef8; --line:rgba(180,245,255,.55);
  --acc:#2ee6ff; --brand:#b794f6; --r:0px;
  --font:"Outfit",system-ui,sans-serif;
  --good:#8dffa8; --warn:#ffe1a3; --bad:#ff9bb6; --cool:#2ee6ff;
  --glass:rgba(8,22,48,.72); --glass2:rgba(8,22,48,.5); --accInk:#042028;
  --neon:#2ee6ff; --neon-2:#b794f6; --site-edge:#7af6ff;
  --site-display:"Outfit",system-ui,sans-serif;
}

/* COMPONENTS — identical in both skins. Paint comes only from custom properties. */

html[data-skin="agency"],
html[data-skin="parlour"]{
  --eh-s1:4px; --eh-s2:8px; --eh-s3:12px; --eh-s4:16px; --eh-s5:24px; --eh-s6:32px; --eh-s7:48px;
  --eh-tap:44px; --eh-text:16px;
  --eh-t-display:clamp(2rem,6vw,4rem);
  --eh-t-h1:2rem; --eh-t-h2:1.5rem; --eh-t-h3:1.25rem; --eh-t-body:1rem;
  color-scheme:dark;
  font-size:var(--eh-text);
}
html[data-skin="agency"] *,
html[data-skin="parlour"] *{box-sizing:border-box}
html[data-skin="agency"] body,
html[data-skin="parlour"] body{
  margin:0; min-height:100vh; max-width:100%;
  color:var(--eh-ink);
  font-family:var(--eh-font);
  font-size:var(--eh-text);
  line-height:1.45;
  background-color:var(--eh-ground);
  background-image:
    radial-gradient(880px 520px at 6% -10%, color-mix(in srgb, var(--eh-accent) 42%, transparent), transparent 60%),
    radial-gradient(760px 480px at 100% 0%, color-mix(in srgb, var(--eh-accent-2) 40%, transparent), transparent 56%),
    linear-gradient(168deg, var(--eh-ground-2) 0%, var(--eh-ground) 52%, var(--eh-ground-3) 100%);
  background-attachment:fixed;
  outline:2px solid var(--eh-edge);
  outline-offset:-12px;
  box-shadow:inset 0 0 0 1px var(--eh-accent-2), inset 0 0 56px color-mix(in srgb, var(--eh-glow) 38%, transparent);
}
html[data-skin="agency"] button,
html[data-skin="agency"] input,
html[data-skin="agency"] select,
html[data-skin="agency"] textarea,
html[data-skin="parlour"] button,
html[data-skin="parlour"] input,
html[data-skin="parlour"] select,
html[data-skin="parlour"] textarea{font:inherit; color:inherit}
html[data-skin="agency"] a,
html[data-skin="parlour"] a{color:inherit}
html[data-skin="agency"] img,
html[data-skin="parlour"] img{max-width:100%}
html[data-skin="agency"] h1,
html[data-skin="agency"] h2,
html[data-skin="agency"] h3,
html[data-skin="parlour"] h1,
html[data-skin="parlour"] h2,
html[data-skin="parlour"] h3,
html[data-skin="agency"] .house-name,
html[data-skin="parlour"] .house-name,
html[data-skin="agency"] .card-name,
html[data-skin="parlour"] .card-name,
html[data-skin="agency"] .card-hover-name,
html[data-skin="parlour"] .card-hover-name{
  font-family:var(--eh-display); font-weight:650; letter-spacing:-.02em; margin:0; line-height:1.1;
}
html[data-skin="agency"] h1,
html[data-skin="parlour"] h1{font-size:var(--eh-t-h1)}
html[data-skin="agency"] h2,
html[data-skin="parlour"] h2{font-size:var(--eh-t-h2)}
html[data-skin="agency"] h3,
html[data-skin="parlour"] h3{font-size:var(--eh-t-h3)}
html[data-skin="agency"] .hero h1,
html[data-skin="parlour"] .hero h1{font-size:var(--eh-t-display); line-height:1.02}

.skin-agency,.skin-parlour{display:none}
html[data-skin="agency"] .skin-agency{display:contents}
html[data-skin="parlour"] .skin-parlour{display:contents}

.k{font-size:var(--eh-text); letter-spacing:.08em; text-transform:uppercase; color:var(--eh-dim); font-weight:650}
.dim{color:var(--eh-dim)}
.big{font-size:2rem; font-weight:650; letter-spacing:-.02em; line-height:1; color:var(--eh-ink)}
.row{display:flex; align-items:center; gap:var(--eh-s2); flex-wrap:wrap; max-width:100%}
.row.sp{justify-content:space-between}
.grow{flex:1; min-width:0}
.stack>*+*{margin-top:var(--eh-s3)}

/* buttons — secondary .b, primary .b.pri, ghost .b.eh-ghost, danger .b.bad */
.b{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--eh-s2);
  min-height:var(--eh-tap); padding:10px 16px; width:auto;
  border-radius:var(--eh-radius); border:1.5px solid var(--eh-edge);
  background:transparent; color:var(--eh-ink); cursor:pointer;
  font-weight:650; font-size:var(--eh-text); line-height:1.1; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.b.pri{background:var(--eh-accent); color:var(--eh-on-accent); border-color:var(--eh-accent)}
.b.eh-ghost{border-color:transparent; background:transparent}
.b.bad{border-color:var(--eh-bad); color:var(--eh-ink); background:transparent}
.b.sm{min-height:var(--eh-tap); padding:8px 12px; font-size:var(--eh-text)}
.b.on{border-color:var(--eh-edge); box-shadow:0 0 0 1px var(--eh-accent-2), 0 0 16px color-mix(in srgb, var(--eh-glow) 55%, transparent)}
.b:hover:not([disabled]){
  border-color:var(--eh-edge);
  box-shadow:0 0 0 1px var(--eh-accent-2), 0 0 18px color-mix(in srgb, var(--eh-glow) 60%, transparent);
}
.b.pri:hover:not([disabled]){color:var(--eh-on-accent); border-color:var(--eh-accent)}
.b.bad:hover:not([disabled]){box-shadow:0 0 0 1px var(--eh-bad), 0 0 16px color-mix(in srgb, var(--eh-bad) 55%, transparent)}
.b:active:not([disabled]){transform:translateY(1px)}
.b:focus-visible{outline:2px solid var(--eh-glow); outline-offset:3px}
.b[disabled],.b:disabled{opacity:.45; cursor:not-allowed; box-shadow:none; transform:none}

/* sharp card, drawn glowing edge */
.card,.eh-card{
  background:var(--eh-card);
  border:2px solid var(--eh-edge);
  border-radius:var(--eh-radius);
  box-shadow:0 0 0 1px var(--eh-accent-2), 0 0 18px color-mix(in srgb, var(--eh-glow) 42%, transparent);
  padding:var(--eh-s4);
  min-width:0; max-width:100%;
  color:var(--eh-ink);
}
.card+.card{margin-top:var(--eh-s3)}

/* profile card — 3/4 photo, name on the photo, hover and focus reveal */
.eh-roster{display:grid; grid-template-columns:1fr; gap:var(--eh-s4); min-width:0}
.gcard.on .card-hover,.gcard:active .card-hover{opacity:1}
.gcard.on .card-plate,.gcard:active .card-plate{opacity:0}
.gcard{
  position:relative; display:block; width:100%; min-width:0;
  border-radius:var(--eh-radius); overflow:hidden;
  border:2px solid var(--eh-edge); background:var(--eh-card); color:inherit;
  text-decoration:none; text-align:left; cursor:pointer;
  box-shadow:0 0 0 1px var(--eh-accent-2), 0 0 18px color-mix(in srgb, var(--eh-glow) 48%, transparent);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.gcard:hover,.gcard:focus,.gcard:focus-visible{
  transform:translateY(-6px);
  border-color:var(--eh-accent);
  box-shadow:0 14px 28px color-mix(in srgb, var(--eh-ground-3) 70%, transparent), 0 0 0 1px var(--eh-accent-2), 0 0 28px color-mix(in srgb, var(--eh-glow) 70%, transparent);
  outline:2px solid var(--eh-glow); outline-offset:3px;
}
.card-media{position:relative; display:block; width:100%; aspect-ratio:3/4; overflow:hidden; background:var(--eh-ground-3)}
.card-media>.card-photo{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center 18%; display:block;
}
.card-plate{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:28px 12px 12px;
  background:var(--eh-plate);
}
.card-name,.card-hover-name{font-size:1.5rem; line-height:1.05; color:var(--eh-ink)}
.card-where,.card-hover-line{
  color:var(--eh-ink); font-size:var(--eh-text); margin-top:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-hover{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px 14px;
  background:var(--eh-hover);
  opacity:0;
}
.gcard:hover .card-hover,.gcard:focus .card-hover,.gcard:focus-visible .card-hover{opacity:1}
.gcard:hover .card-plate,.gcard:focus .card-plate,.gcard:focus-visible .card-plate{opacity:0}
.card-hover-detail{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px;
  margin:10px 0 0; font-size:var(--eh-text); line-height:1.3;
}
.card-hover-detail dt{color:var(--eh-dim); font-weight:650; margin:0}
.card-hover-detail dd{margin:0; text-align:right; color:var(--eh-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* status pills — colour lives on the edge, words stay ink */
.tag{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:28px; padding:4px 10px;
  border-radius:var(--eh-radius); border:1.5px solid var(--eh-line);
  background:transparent; color:var(--eh-ink);
  font-size:var(--eh-text); font-weight:650; letter-spacing:.01em;
  white-space:nowrap; line-height:1.1;
}
.t-on{border-color:var(--eh-good); box-shadow:0 0 10px color-mix(in srgb, var(--eh-good) 45%, transparent)}
.t-bk{border-color:var(--eh-accent); box-shadow:0 0 10px color-mix(in srgb, var(--eh-glow) 45%, transparent)}
.t-free{border-color:var(--eh-accent-2); box-shadow:0 0 10px color-mix(in srgb, var(--eh-accent-2) 40%, transparent)}
.t-off{border-color:var(--eh-line); color:var(--eh-dim)}
.t-bad{border-color:var(--eh-bad); box-shadow:0 0 10px color-mix(in srgb, var(--eh-bad) 45%, transparent)}
.t-warn{border-color:var(--eh-warn); box-shadow:0 0 10px color-mix(in srgb, var(--eh-warn) 40%, transparent)}

/* input */
.f{display:block; margin:10px 0; min-width:0}
.f>span{display:block; font-size:var(--eh-text); color:var(--eh-dim); margin-bottom:6px; font-weight:650}
.in,.sel,textarea.in{
  width:100%; min-height:var(--eh-tap); padding:10px 12px;
  border-radius:var(--eh-radius); border:1.5px solid var(--eh-edge);
  background:var(--eh-card); color:var(--eh-ink); font-size:var(--eh-text);
}
textarea.in{min-height:96px; resize:vertical; line-height:1.45}
.in:focus,.sel:focus,.in:focus-visible,.sel:focus-visible{
  outline:2px solid var(--eh-glow); outline-offset:2px; border-color:var(--eh-accent);
}
.in[disabled],.sel[disabled]{opacity:.45}
.sel option{background:var(--eh-ground-3); color:var(--eh-ink)}

/* top-button menu row — existing .groups */
.groups{
  display:flex; flex-wrap:wrap; gap:var(--eh-s2);
  margin:0 0 var(--eh-s4); max-width:100%; min-width:0;
}
.groups button{
  flex:1 1 auto; min-height:var(--eh-tap); min-width:0;
  padding:8px 12px; border-radius:var(--eh-radius);
  border:1.5px solid var(--eh-line); background:transparent; color:var(--eh-ink);
  font-size:var(--eh-text); font-weight:650; cursor:pointer; white-space:nowrap;
}
.groups button.on{
  border-color:var(--eh-edge);
  box-shadow:0 0 0 1px var(--eh-accent-2), 0 0 14px color-mix(in srgb, var(--eh-glow) 50%, transparent);
}
.groups button:hover{border-color:var(--eh-edge)}
.groups button:focus-visible{outline:2px solid var(--eh-glow); outline-offset:3px}

/* desk booking card — look. Layout breakpoints live in desk-responsive.css */
.bk-card{
  background:var(--eh-card);
  border:2px solid var(--eh-edge);
  border-radius:var(--eh-radius);
  box-shadow:0 0 0 1px var(--eh-accent-2), 0 0 16px color-mix(in srgb, var(--eh-glow) 36%, transparent);
  padding:12px;
  margin:0 0 12px;
  min-width:0; max-width:100%;
  display:flex; flex-direction:column; gap:8px;
}
.bk-r1{display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0}
.bk-when{font-size:var(--eh-text); font-weight:650; white-space:nowrap}
.bk-r2{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; min-width:0; max-width:100%}
.bk-girl{font-weight:700; white-space:nowrap; flex:0 0 auto; font-size:var(--eh-text)}
.bk-meta{
  flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--eh-dim); font-size:var(--eh-text);
}
.bk-r3{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; font-size:var(--eh-text)}
.bk-r2>.small,.bk-r2>.bk-permits{flex:1 0 100%; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bk-actions{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-width:0}
.bk-actions .b{width:100%; padding-left:4px; padding-right:4px; white-space:nowrap}
.eh-bk-head{display:none}

/* bottom nav — phone tabs, her app, work phone */
.tabs,.gtabs,.ptabs{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; gap:2px; width:100%; max-width:100%;
  box-sizing:border-box; overflow-x:auto; overscroll-behavior-x:contain;
  padding:6px 6px calc(8px + env(safe-area-inset-bottom));
  background:var(--eh-scrim);
  border-top:1.5px solid var(--eh-edge);
  box-shadow:0 0 16px color-mix(in srgb, var(--eh-glow) 32%, transparent);
}
.tabs button,.gtabs button,.ptabs button{
  flex:1 1 0; min-width:0; min-height:var(--eh-tap);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:4px 2px; border-radius:var(--eh-radius); border:1px solid transparent;
  background:transparent; color:var(--eh-ink); cursor:pointer;
  font-size:var(--eh-text); font-weight:650; line-height:1.05; letter-spacing:-.02em;
}
.tabs button .tl,.gtabs button .tl,.ptabs button .tl{white-space:nowrap}
.tabs button .eh-ico,.gtabs button .eh-ico,.ptabs button .eh-ico{display:flex; width:18px; height:18px}
.tabs button svg,.gtabs button svg,.ptabs button svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.75}
.tabs button.on,.gtabs button.on,.ptabs button.on{
  border-color:var(--eh-edge);
  box-shadow:0 0 12px color-mix(in srgb, var(--eh-glow) 45%, transparent);
}
.tabs button:focus-visible,.gtabs button:focus-visible,.ptabs button:focus-visible{
  outline:2px solid var(--eh-glow); outline-offset:2px;
}
.tabs button:last-child,.gtabs button:last-child,.ptabs button:last-child{scroll-margin-inline-end:8px}

/* shell */
.shell{display:block; min-width:0; max-width:100%}
.nav{display:none}
.main{padding:16px 16px calc(112px + env(safe-area-inset-bottom)); min-width:0; max-width:100%}
.mtop{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; position:sticky; top:0; z-index:30;
  background:var(--eh-scrim); border-bottom:1.5px solid var(--eh-edge);
}
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 16px; min-width:0}
.nav-g{font-size:var(--eh-text); color:var(--eh-dim); font-weight:650; letter-spacing:.06em; text-transform:uppercase; padding:14px 12px 4px}
.nav a,.nav button.nv{
  display:flex; align-items:center; gap:10px; width:100%; min-height:var(--eh-tap);
  padding:10px 12px; border-radius:var(--eh-radius); border:1px solid transparent;
  background:none; text-align:left; text-decoration:none; color:var(--eh-ink);
  font-size:var(--eh-text); font-weight:650; cursor:pointer;
}
.nav a.on,.nav button.nv.on{
  border-color:var(--eh-edge);
  box-shadow:inset 3px 0 0 var(--eh-accent);
}
.nav a:hover,.nav button.nv:hover{border-color:var(--eh-edge)}
.nav a:focus-visible,.nav button.nv:focus-visible{outline:2px solid var(--eh-glow); outline-offset:2px}

/* site */
.snav{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px;
  padding:10px 16px; max-width:100%;
  background:var(--eh-scrim); border-bottom:1.5px solid var(--eh-edge);
  box-shadow:0 0 16px color-mix(in srgb, var(--eh-glow) 28%, transparent);
}
.snav a{min-height:var(--eh-tap); display:inline-flex; align-items:center; text-decoration:none; font-size:var(--eh-text); font-weight:650}
.snav a.pg{padding:0 8px; border-radius:var(--eh-radius); border:1px solid transparent}
.snav a.pg.on,.snav a.pg:hover{border-color:var(--eh-edge)}
.snav a:focus-visible{outline:2px solid var(--eh-glow); outline-offset:3px}
.house-name{font-size:1.25rem}
.swrap{max-width:1180px; margin:0 auto; padding:24px 16px 48px; min-width:0}
.hero{padding:28px 0 8px}
.hero .sub{color:var(--eh-dim); font-size:1.125rem; margin:12px 0 20px; max-width:36rem}
.sec{margin:0 0 28px; min-width:0}
.line{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--eh-line); min-width:0}
.line>b{margin-left:auto; white-space:nowrap}
.line>span:last-child{min-width:0}
.line:last-child{border-bottom:0}
.lbl{font-size:var(--eh-text); font-weight:650; min-width:0}
.profile-top{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:16px; align-items:start}
.gallery{min-width:0}
.own-extras{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px}
.own-extras li{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--eh-line); min-width:0}
.own-extra-name{font-weight:650}
.own-extra-line{text-align:right; white-space:nowrap}

/* threads and bubbles */
.inbox{display:flex; flex-direction:column; min-width:0; max-width:100%; min-height:0}
.inbox .left,.inbox .right{min-width:0; max-width:100%}
.threads{display:flex; flex-direction:column; min-width:0}
.th{
  display:flex; gap:10px; align-items:center; min-height:var(--eh-tap);
  padding:10px 12px; border-bottom:1px solid var(--eh-line); min-width:0; max-width:100%;
}
.th:hover{background:color-mix(in srgb, var(--eh-ink) 6%, transparent)}
.th.sel{box-shadow:inset 3px 0 0 var(--eh-accent)}
.th.need{box-shadow:inset 3px 0 0 var(--eh-bad)}
.th .av{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  border:1.5px solid var(--eh-edge); border-radius:var(--eh-radius); font-weight:700;
}
.th .nm{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.th .pv{color:var(--eh-dim); font-size:var(--eh-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.th .grow{min-width:0}
.bubs{display:flex; flex-direction:column; gap:8px; padding:12px; min-width:0}
.bub{
  max-width:min(78%, 520px); padding:10px 12px; border-radius:var(--eh-radius);
  font-size:var(--eh-text); line-height:1.4; overflow-wrap:break-word;
  border:1.5px solid var(--eh-line); background:var(--eh-card); color:var(--eh-ink);
}
.bub.in,.bub.client,.bub.provider{align-self:flex-start}
.bub.out,.bub.staff,.bub.bot{align-self:flex-end; border-color:var(--eh-edge)}
.bub .by{display:block; font-size:var(--eh-text); color:var(--eh-dim); margin-bottom:2px}
.bub .when{display:block; font-size:var(--eh-text); color:var(--eh-dim); margin-top:4px}
.composer{display:flex; gap:8px; padding:10px; border-top:1px solid var(--eh-line); min-width:0}
.composer .in{flex:1; min-width:0}
.banner{
  display:flex; align-items:center; gap:8px; padding:10px 12px; margin:8px 12px 0;
  border:1.5px solid var(--eh-bad); border-radius:var(--eh-radius); color:var(--eh-ink);
  box-shadow:0 0 14px color-mix(in srgb, var(--eh-bad) 35%, transparent);
}
.bring{
  margin-top:8px; padding:10px 12px; border-radius:var(--eh-radius);
  border:1.5px solid var(--eh-edge); font-weight:650; font-size:var(--eh-text);
  box-shadow:0 0 12px color-mix(in srgb, var(--eh-glow) 30%, transparent);
}

/* discreet tiles and PIN pad */
.lock{min-height:100vh; display:grid; place-items:center; padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
.lock .box{width:min(400px,100%); text-align:center; min-width:0}
.lock .mark{width:72px; height:72px; object-fit:cover; border-radius:var(--eh-radius); border:1.5px solid var(--eh-edge); margin:0 auto 12px; display:block}
.pinrow{display:flex; justify-content:center; gap:14px; margin:16px 0}
.pinrow i{width:14px; height:14px; border-radius:var(--eh-radius); border:1.5px solid var(--eh-edge); display:block}
.pinrow i.f{background:var(--eh-accent); border-color:var(--eh-accent); box-shadow:0 0 10px var(--eh-glow)}
.pad{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-width:320px; margin:0 auto}
.pad .b{min-height:56px; font-size:1.35rem; width:100%}
.eh-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:18px}
.eh-tile{
  min-height:88px; padding:8px; border-radius:var(--eh-radius);
  border:1.5px solid var(--eh-line); background:transparent; color:var(--eh-ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-size:var(--eh-text); font-weight:650; cursor:pointer;
}
.eh-tile img{width:48px; height:48px; object-fit:cover; border-radius:var(--eh-radius); max-width:none}
.eh-tile.on{border-color:var(--eh-edge); box-shadow:0 0 0 1px var(--eh-accent-2), 0 0 14px color-mix(in srgb, var(--eh-glow) 50%, transparent)}
.eh-tile:hover{border-color:var(--eh-edge)}
.eh-tile:focus-visible{outline:2px solid var(--eh-glow); outline-offset:3px}

/* money + bits used by the desk comps */
.grid2{display:grid; grid-template-columns:1fr; gap:12px}
.grid4{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.stat .big{margin-top:6px}
.seg{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; max-width:100%}
.seg button{
  min-height:var(--eh-tap); padding:8px 14px; border-radius:var(--eh-radius);
  border:1.5px solid var(--eh-line); background:transparent; color:var(--eh-ink);
  font-size:var(--eh-text); font-weight:650; cursor:pointer; white-space:nowrap;
}
.seg button.on{border-color:var(--eh-edge); box-shadow:0 0 12px color-mix(in srgb, var(--eh-glow) 45%, transparent)}
.seg button:focus-visible{outline:2px solid var(--eh-glow); outline-offset:3px}
.eh-paylist{display:grid; gap:8px; margin-top:14px}
.eh-pay{
  display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline;
  padding:12px; border:1.5px solid var(--eh-edge); border-radius:var(--eh-radius);
  background:var(--eh-card); min-width:0;
}
.eh-pay b{font-size:var(--eh-text)}
.eh-money-wrap{display:none}
.eh-money-table{display:none; width:100%; border-collapse:collapse}
table.t{width:100%; border-collapse:collapse}
table.t th,table.t td{
  text-align:left; padding:10px 8px; border-bottom:1px solid var(--eh-line);
  font-size:var(--eh-text); white-space:nowrap; vertical-align:middle;
}
table.t th{color:var(--eh-dim); font-weight:650}
.gapp{max-width:560px; margin:0 auto; padding:16px 16px calc(120px + env(safe-area-inset-bottom)); min-width:0}
.gtop{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.gtabs{left:max(0px, calc(50% - 280px)); right:auto; width:min(560px, 100%); transform:none}
.shift{padding:12px 0; border-bottom:1px solid var(--eh-line); min-width:0}
.shift b{font-size:var(--eh-text)}
.who-line{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--eh-dim)}

html[data-skin="agency"] :focus-visible,
html[data-skin="parlour"] :focus-visible{outline:2px solid var(--eh-glow); outline-offset:3px}

@media (max-width:800px){
  .profile-top{grid-template-columns:1fr}
  .gallery .card-media{max-width:320px}
}
@media (min-width:1280px){
  .eh-roster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .swrap{padding:40px 32px 64px}
  .profile-top{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
  .gallery .card-media{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  html[data-skin="agency"] *,
  html[data-skin="parlour"] *,
  html[data-skin="agency"] *::before,
  html[data-skin="parlour"] *::before,
  html[data-skin="agency"] *::after,
  html[data-skin="parlour"] *::after{
    animation:none !important; transition:none !important;
  }
  .gcard:hover,.gcard:focus,.gcard:focus-visible,.b:active{transform:none}
}

html[data-skin="parlour"]{
  --eh-brand:"Maison Vesper";
  --eh-accent:#ff5d8a;
  --eh-accent-2:#ffb15a;
  --eh-ground:#7a3834;
  --eh-ground-2:#9a4838;
  --eh-ground-3:#6e3438;
  --eh-glow:#ff5d8a;
  --eh-edge:#ffc2a8;
  --eh-radius:4px;
  --eh-font:"Nunito Sans",system-ui,sans-serif;
  --eh-display:"Fraunces",Georgia,serif;
  --eh-ink:#fff7f4;
  --eh-dim:#ffe4d6;
  --eh-on-accent:#1a0c08;
  --eh-card:rgba(42,14,12,.72);
  --eh-scrim:rgba(42,14,12,.88);
  --eh-line:rgba(255,196,170,.62);
  --eh-good:#b6ffc9;
  --eh-warn:#ffe1a3;
  --eh-bad:#ffb3c4;
  --eh-plate:linear-gradient(180deg, transparent, rgba(32,10,8,.55) 42%, rgba(32,10,8,.94));
  --eh-hover:linear-gradient(180deg, rgba(32,10,8,.18) 8%, rgba(32,10,8,.7) 46%, rgba(32,10,8,.96));
  --bg:#7a3834; --ink:#fff7f4; --dim:#ffe4d6; --line:rgba(255,196,170,.62);
  --acc:#ff5d8a; --brand:#ffb15a; --r:4px;
  --font:"Nunito Sans",system-ui,sans-serif;
  --good:#b6ffc9; --warn:#ffe1a3; --bad:#ffb3c4; --cool:#ffb15a;
  --glass:rgba(42,14,12,.72); --glass2:rgba(42,14,12,.5); --accInk:#1a0c08;
  --neon:#ff5d8a; --neon-2:#ffb15a; --site-edge:#ffc2a8;
  --site-display:"Fraunces",Georgia,serif;
}

/* Desk layout. Paste after the skin file.
   Under 600px: stacked booking cards and a bottom nav that fits.
   At 1280: side menu and a dense bookings table. Tokens only. */

@media (max-width:599px){
  html,body{max-width:100%}
  .shell,.main,.mtop,.groups,.bk-card,.inbox,.composer,.tabs,.head{
    max-width:100%; min-width:0;
  }
  .main{padding:12px 12px calc(108px + env(safe-area-inset-bottom))}
  .bk-card{
    display:flex; flex-direction:column; gap:8px;
    width:100%; max-width:100%;
  }
  .bk-r1{display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0}
  .bk-when{white-space:nowrap}
  .bk-r2{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; min-width:0; max-width:100%}
  .bk-girl{white-space:nowrap; flex:0 0 auto; font-weight:700}
  .bk-meta,.bk-r3,.who-line{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    min-width:0; word-break:normal; overflow-wrap:normal;
  }
  .bk-meta{flex:1 1 auto}
  .bk-actions{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%;
  }
  .bk-actions .b{width:100%; min-height:44px; white-space:nowrap; padding-left:4px; padding-right:4px}
  .tabs{
    display:flex; position:fixed; left:0; right:0; bottom:0;
    width:100%; max-width:100%; box-sizing:border-box;
    overflow-x:auto; overscroll-behavior-x:contain;
    padding:6px 4px calc(8px + env(safe-area-inset-bottom));
    gap:2px;
  }
  .tabs button{
    flex:1 1 0; min-width:0; min-height:44px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .tabs button .tl{white-space:nowrap; word-break:normal; overflow-wrap:normal}
  .tabs button:last-child{scroll-margin-inline-end:8px}
  .composer{
    position:sticky; bottom:calc(76px + env(safe-area-inset-bottom));
    background:var(--eh-scrim); z-index:6;
  }
  .nav{display:none}
  .inbox{display:flex; flex-direction:column}
  .eh-bk-head{display:none}
  .eh-money-table{display:none}
  .eh-paylist{display:grid}
}

@media (min-width:1280px){
  .shell{display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh}
  .shell>*{min-width:0}
  .nav{
    display:flex; flex-direction:column; gap:2px;
    position:sticky; top:0; height:100vh; overflow:auto;
    padding:22px 12px;
    border-right:1.5px solid var(--eh-edge);
    background:var(--eh-scrim);
  }
  .mtop{display:none}
  .tabs{display:none}
  .main{padding:28px 32px 48px}
  .groups{flex-wrap:nowrap}
  .eh-books{
    border:2px solid var(--eh-edge);
    border-radius:var(--eh-radius);
    background:var(--eh-card);
    box-shadow:0 0 0 1px var(--eh-accent-2), 0 0 18px color-mix(in srgb, var(--eh-glow) 36%, transparent);
    overflow:hidden;
  }
  .eh-bk-head,.eh-books .bk-card{
    display:grid;
    grid-template-columns:156px minmax(0,2fr) minmax(196px,.85fr) minmax(236px,.95fr);
    gap:8px 12px; align-items:start;
  }
  .eh-books .bk-r3,.eh-books .bk-r3 span{
    white-space:normal; overflow:visible; text-overflow:unset;
    overflow-wrap:anywhere; word-break:break-word; min-width:0;
  }
  .eh-books .bk-r1{flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; min-width:0}
  .eh-books .bk-r1 .tag{max-width:100%}
  .eh-bk-head{
    padding:10px 12px;
    color:var(--eh-dim); font-size:16px; font-weight:650;
    border-bottom:1px solid var(--eh-line);
  }
  .eh-books .bk-card{
    margin:0; border:0; border-radius:0; box-shadow:none; background:transparent;
    border-bottom:1px solid var(--eh-line); padding:8px 12px;
  }
  .eh-books .bk-card:last-child{border-bottom:0}
  .bk-actions{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  .inbox{
    display:grid; grid-template-columns:360px minmax(0,1fr); min-height:520px;
    border:2px solid var(--eh-edge); border-radius:var(--eh-radius);
    background:var(--eh-card);
    box-shadow:0 0 0 1px var(--eh-accent-2), 0 0 18px color-mix(in srgb, var(--eh-glow) 36%, transparent);
  }
  .inbox .left{border-right:1px solid var(--eh-line); overflow:auto}
  .inbox .right{display:flex; flex-direction:column; min-height:0}
  .inbox .composer{margin-top:auto}
  .grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .eh-paylist{display:none}
  .eh-money-wrap{display:block}
  .eh-money-table{display:table; width:100%}
  .scrollx{overflow-x:auto; max-width:100%}
}

/* Floor after the pack: old house.css rules still beat the skin on radius and type size. */
.b.xl,.chip,.pad .b,details.fold,.tile,.lane,.lane .girl,.seg,.seg button,.help,.bub,.composer .in,
.pb,.blk,.canvas,.door,.banner,.palette .pb,.dropend,.toast,.phs .p,.nav a,.nav button.nv,.sw{
  border-radius:var(--eh-radius, 4px);
}
.chip,.small,.mono,details.fold>summary .val,.blk .kind,.steps span,.iphone .sbar,.dropend,.cnt{
  font-size:var(--eh-text, 16px);
}
.dot,.lane .girl .av,.th .av,.cnt{border-radius:var(--eh-radius, 4px)}
button.chip{min-height:var(--eh-tap, 44px)}
.tabs button,.gtabs button,.ptabs button{padding-left:1px; padding-right:1px}
.tabs button .tl,.gtabs button .tl,.ptabs button .tl{letter-spacing:-.05em; max-width:100%}