/* Crown Leads UI. Layout concept: navy sidebar on the right (RTL), working canvas on the left, one magenta action per screen.
   Brand: magenta D9007E (actions, max ~15% of the frame), navy 0E1A2D (sidebar, dark ground), cyan 3DB5F5 (info), black 231F20 (body text).
   Fonts: Urbanist for Latin and numbers, Heebo as a stand-in for FbCoherentiSansEnHeb (Hebrew). */
:root{
  --bg:#F3F5F9; --surface:#FFFFFF; --surface-2:#EBEEF4; --line:#DADFE9; --line-2:#C9D0DE;
  --fg:#231F20; --fg-2:#454E62; --fg-3:#667086;
  --navy:#0E1A2D; --side:#0E1A2D; --side-2:#1A2A45; --side-fg:#E3E9F4; --side-dim:#93A0B9;
  --magenta:#D9007E; --on-magenta:#FFFFFF; --magenta-hover:#BF006F; --accent-text:#C4006F; --accent-soft:rgba(217,0,126,.09);
  --cyan:#3DB5F5; --link:#0A6DAA; --cyan-soft:rgba(61,181,245,.16);
  --good:#1E9E6A; --good-ink:#12714B; --warn:#E0A100; --warn-ink:#845C00; --bad:#D6264A; --bad-ink:#B01B3C;
  --c1:#3DB5F5; --c2:#D9007E; --c3:#6E84A8; --c4:#FF66B3; --c5:#A9B3C6; --c6:#D6DCE8;
  --shadow:0 1px 2px rgba(14,26,45,.06),0 4px 14px rgba(14,26,45,.05);
  --focus:#0A6DAA;
  --ink-new:#0A6DAA; --ink-meeting:#B8006B; --ink-progress:#3E5478; --ink-won:#12714B; --ink-no:#845C00; --ink-off:#667086;
  --f-ui:"Urbanist","Heebo","Assistant",system-ui,-apple-system,"Segoe UI",sans-serif;
  --p-new:#3DB5F5; --p-new-t:#0E1A2D;
  --p-meeting:#D9007E; --p-meeting-t:#FFFFFF;
  --p-progress:#F5A524; --p-progress-t:#231F20;
  --p-contract:#3E5C92; --p-contract-t:#FFFFFF;
  --p-won:#138A5C; --p-won-t:#FFFFFF;
  --p-no:#D2344F; --p-no-t:#FFFFFF;
  --p-irr:#667086; --p-irr-t:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1A2D; --surface:#14233B; --surface-2:#1B2C48; --line:#263A5C; --line-2:#33496F;
    --fg:#EDF1F8; --fg-2:#B7C2D6; --fg-3:#8D9BB4;
    --side:#08111F; --side-2:#142239; --side-fg:#E3E9F4; --side-dim:#8D9BB4;
    --magenta-hover:#EA1A92; --accent-text:#FF66B3; --accent-soft:rgba(255,102,179,.12);
    --link:#58C2F8; --cyan-soft:rgba(61,181,245,.18);
    --good-ink:#5FD3A0; --warn-ink:#F2C35C; --bad-ink:#FF8FA6;
    --c3:#8FA3C4; --c5:#5C6F92; --c6:#33496F;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.25);
    --focus:#58C2F8;
    --ink-new:#6CC8FA; --ink-meeting:#FF66B3; --ink-progress:#A9BAD6; --ink-won:#5FD3A0; --ink-no:#F2C35C; --ink-off:#8D9BB4;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1A2D; --surface:#14233B; --surface-2:#1B2C48; --line:#263A5C; --line-2:#33496F;
  --fg:#EDF1F8; --fg-2:#B7C2D6; --fg-3:#8D9BB4;
  --side:#08111F; --side-2:#142239; --side-fg:#E3E9F4; --side-dim:#8D9BB4;
  --magenta-hover:#EA1A92; --accent-text:#FF66B3; --accent-soft:rgba(255,102,179,.12);
  --link:#58C2F8; --cyan-soft:rgba(61,181,245,.18);
  --good-ink:#5FD3A0; --warn-ink:#F2C35C; --bad-ink:#FF8FA6;
  --c3:#8FA3C4; --c5:#5C6F92; --c6:#33496F;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.25);
  --focus:#58C2F8;
  --ink-new:#6CC8FA; --ink-meeting:#FF66B3; --ink-progress:#A9BAD6; --ink-won:#5FD3A0; --ink-no:#F2C35C; --ink-off:#8D9BB4;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.num,bdi.num{font-family:var(--f-ui);font-variant-numeric:tabular-nums}
.ic{flex:none;display:block}
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100%}
/* sidebar */
.side{background:var(--side);color:var(--side-fg);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:20px 0 16px;padding-right:max(16px,env(safe-area-inset-right,0px));padding-left:16px;z-index:40}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px 22px}
.brand img.wm{height:24px;width:auto;display:block}
.brand .btag{font:600 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--side-dim);border:1px solid var(--side-2);border-radius:4px;padding:4px 6px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:var(--side-fg);text-decoration:none;font-weight:500;cursor:pointer;border:0;background:none;text-align:right;width:100%}
.nav a:hover{background:var(--side-2)}
.nav a[aria-current="page"]{background:var(--side-2);color:#fff;box-shadow:inset -3px 0 0 var(--magenta)}
.nav a .cnt{margin-inline-start:auto;font:600 11px var(--f-ui);background:var(--magenta);color:#fff;border-radius:99px;padding:1px 7px}
.side-foot{margin-top:auto;font-size:12px;color:var(--side-dim);line-height:1.6;padding:12px 6px 0;border-top:1px solid var(--side-2)}
.side-foot b{color:var(--side-fg);font-weight:600}
.scrim{display:none}
/* top bar */
.col{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;background:var(--bg);display:flex;align-items:center;gap:10px;padding:12px 24px;border-bottom:1px solid var(--line)}
.top .search{position:relative;flex:1;max-width:420px}
.top .search input{width:100%;height:38px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:0 38px 0 12px}
.top .search .ic{position:absolute;right:11px;top:10px;color:var(--fg-3)}
.top .sp{flex:1}
.ib{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--fg-2)}
.ib:hover{border-color:var(--line-2);color:var(--fg)}
.ib.menu{display:none}
.av{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 13px var(--f-ui)}
:root[data-theme="dark"] .av{background:var(--magenta)}
.page{padding:24px 24px 56px;display:flex;flex-direction:column;gap:20px;max-width:1280px;width:100%}
.ph{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ph h1{margin:0;font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.ph h1 em{font-style:normal;color:var(--accent-text)}
.ph .sub{color:var(--fg-3);font-size:13px;margin-top:4px}
.ph .acts{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
/* controls */
select,input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],input[type=search],textarea{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:0 10px;height:36px;min-width:0;max-width:100%}
textarea{height:auto;padding:8px 10px;resize:vertical;line-height:1.5}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--fg-2);cursor:not-allowed}
input.err,select.err{border-color:var(--bad)}
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font-weight:600;white-space:nowrap;text-decoration:none;color:var(--fg)}
.btn:hover{border-color:var(--fg-3)}
.btn.pri{background:var(--magenta);border-color:var(--magenta);color:var(--on-magenta)}
.btn.pri:hover{background:var(--magenta-hover);border-color:var(--magenta-hover)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--link)}
.btn.sm{height:30px;padding:0 10px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.wa{border-color:color-mix(in srgb,var(--good) 55%,var(--line));color:var(--good-ink)}
/* surfaces */
.pnl{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.pnl>.hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.pnl>.hd h2{margin:0;font-size:15px;font-weight:700}
.pnl>.hd .hint{color:var(--fg-3);font-size:12px}
.pnl>.hd .r{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.pnl>.bd{padding:16px 18px}
.strip{display:flex;flex-wrap:wrap;gap:6px 36px;align-items:baseline}
.strip .it{display:flex;align-items:baseline;gap:8px}
.strip .v{font:700 30px/1 var(--f-ui)}
.strip .l{color:var(--fg-3);font-size:13px}
.strip .v.bad{color:var(--bad-ink)}
.grid-2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px}
.grid-2b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px}
/* chips */
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:26px;min-width:92px;padding:0 12px;border-radius:6px;font-size:12.5px;font-weight:700;white-space:nowrap;background:var(--c5);color:var(--fg)}
.chip.s-new{background:var(--p-new);color:var(--p-new-t)}
.chip.s-meeting{background:var(--p-meeting);color:var(--p-meeting-t)}
.chip.s-progress{background:var(--p-progress);color:var(--p-progress-t)}
.chip.s-contract{background:var(--p-contract);color:var(--p-contract-t)}
.chip.s-won{background:var(--p-won);color:var(--p-won-t)}
.chip.s-noanswer{background:var(--p-no);color:var(--p-no-t)}
.chip.s-irrelevant{background:var(--p-irr);color:var(--p-irr-t)}
.chip.s-expensive{background:transparent;color:var(--fg-2);border:1px dashed var(--line-2)}
.sla{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.sla.bad{color:var(--bad-ink)} .sla.warn{color:var(--warn-ink)} .sla.ok{color:var(--fg-3);font-weight:500}
.tag{font-size:12px;border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--fg-2);background:var(--surface-2)}
/* leads table */
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{border:0;background:none;padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--fg-2);font-weight:600;display:inline-flex;gap:8px;align-items:center}
.tab:hover{background:var(--surface-2)}
.tab[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:inset 0 -2px 0 var(--magenta),var(--shadow)}
.tab .n{font:600 12px var(--f-ui);color:var(--fg-3)}
.fbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse}
table.t th{position:sticky;top:0;text-align:right;font-size:12px;color:var(--fg-3);font-weight:600;padding:10px 12px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
table.t th button{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
table.t td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr.row{cursor:pointer}
table.t tr.row:hover td{background:color-mix(in srgb,var(--cyan) 7%,var(--surface))}
table.t tr.row td{background:color-mix(in srgb,var(--st,transparent) 6%,var(--surface))}
table.t tr.row:hover td{background:color-mix(in srgb,var(--st,var(--cyan)) 14%,var(--surface))}
table.t tr.row td:first-child{box-shadow:inset -4px 0 0 var(--st,transparent)}
.grp td{padding:0!important;border-bottom:1px solid var(--line)}
.grp .gh{display:flex;align-items:center;gap:10px;padding:10px 14px;background:color-mix(in srgb,var(--gc) 16%,var(--surface));box-shadow:inset -4px 0 0 var(--gc);cursor:pointer;font-weight:700}
.grp .gh:hover{background:color-mix(in srgb,var(--gc) 24%,var(--surface))}
.grp .gh .caret{display:grid;transition:transform .15s;color:var(--fg-2)}
.grp.closed .gh .caret{transform:rotate(90deg)}
.grp .gh .gn{font:700 12px var(--f-ui);background:var(--surface);border:1px solid var(--line-2);color:var(--fg-2);border-radius:99px;padding:1px 9px}
.grp .gh .sum{margin-inline-start:auto;color:var(--fg-2);font-weight:500;font-size:12px}
.sw{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-2);cursor:pointer}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:14px}
.tile{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);background:var(--surface);border-radius:12px;box-shadow:var(--shadow);cursor:pointer;text-align:right;width:100%;color:var(--fg)}
.tile:hover{border-color:var(--line-2)}
.tile .ci{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--tc);color:var(--tt)}
.tile .tv{font:700 28px/1 var(--f-ui)}
.tile .tlb{font-size:12.5px;color:var(--fg-3);margin-top:5px;line-height:1.3}
.mini{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.avs{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font:700 11px var(--f-ui);background:var(--ac);color:var(--at);flex:none}
.avs.none{background:transparent;border:1.5px dashed var(--line-2);color:var(--fg-3)}
.who2{display:inline-flex;align-items:center;gap:8px}
.sdot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:8px;background:var(--sc)}
.nav a .ic{color:var(--nc,currentColor)}
table.t td.nm b{font-weight:600;display:block}
table.t td.nm span{color:var(--fg-3);font-size:12px}
.bulk{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 18px;background:var(--accent-soft);border-bottom:1px solid var(--line)}
.empty{padding:36px 18px;text-align:center;color:var(--fg-3)}
/* notifications and previews */
/* kanban board */
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:0 12px;height:34px;display:inline-flex;gap:7px;align-items:center;cursor:pointer;color:var(--fg-2);font-weight:600}
.seg button+button{border-inline-start:1px solid var(--line-2)}
.seg button:hover{background:var(--surface-2)}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--fg);box-shadow:inset 0 -2px 0 var(--magenta)}
.board{display:flex;gap:12px;padding:14px 18px 10px;align-items:flex-start;min-width:min-content}
.kcol{flex:0 0 274px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;max-height:min(68vh,700px);transition:box-shadow .12s,border-color .12s}
.kcol.over{border-color:var(--gc);box-shadow:0 0 0 2px var(--gc)}
.kh{display:flex;align-items:center;gap:8px;padding:11px 12px 9px;font-weight:700;border-radius:11px 11px 0 0;background:color-mix(in srgb,var(--gc) 18%,var(--surface));box-shadow:inset 0 3px 0 var(--gc)}
.kh .gn{font:700 12px var(--f-ui);background:var(--surface);border:1px solid var(--line-2);color:var(--fg-2);border-radius:99px;padding:1px 9px}
.kh .sum{margin-inline-start:auto;font-size:12px;color:var(--fg-2);font-weight:500}
.kb{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:86px}
.kc{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:grab;box-shadow:inset -4px 0 0 var(--st),var(--shadow);display:flex;flex-direction:column;gap:7px}
.kc:hover{border-color:var(--line-2)}
.kc:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.kc.ro{cursor:pointer}
.kc.drag{opacity:.4}
.kc .kt b{display:block;font-weight:600}
.kc .kt span{color:var(--fg-3);font-size:12px}
.kc .km{display:flex;gap:2px;align-items:center;font-size:12.5px;color:var(--fg-2)}
.kc .km .amt{margin-inline-start:auto;font-weight:600;color:var(--fg)}
.kc .kf{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:12px}
.kc .kf .sla{display:inline-flex;align-items:center;gap:4px}
.kc .mvw{display:none}
.kc .mvw select{width:100%;height:30px;font-size:13px}
@media (hover:none){.kc .mvw{display:block}.kc{cursor:pointer}}
.kempty{border:1.5px dashed var(--line-2);border-radius:10px;padding:18px 8px;text-align:center;color:var(--fg-3);font-size:12.5px}
/* lead card */
.lc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.fg .w{grid-column:1/-1}
.fld label{display:block;font-size:12px;color:var(--fg-3);margin-bottom:4px;font-weight:500}
.fld label i{color:var(--bad-ink);font-style:normal}
.fld input,.fld select,.fld textarea{width:100%}
.fld .msg{font-size:12px;margin-top:3px;color:var(--bad-ink)}
.mny{display:flex;align-items:center;gap:6px}
.mny span{color:var(--fg-3);font-weight:600}
.sticky-save{position:sticky;bottom:0;display:flex;gap:8px;align-items:center;padding:12px 18px;background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 12px 12px}
.sticky-save .dirty{color:var(--warn-ink);font-size:12px;font-weight:600}
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.tl li{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.tl li:last-child{border:0}
.tl .dot{width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--fg-2)}
.tl .dot.na{color:var(--warn-ink);background:color-mix(in srgb,var(--warn) 16%,var(--surface))}
.tl .m{font-size:12px;color:var(--fg-3)}
.cform{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cform input{flex:1;min-width:140px}
details.dt{border-top:1px solid var(--line)}
details.dt>summary{cursor:pointer;padding:12px 18px;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
details.dt>summary::-webkit-details-marker{display:none}
details.dt>summary::after{content:"+";margin-inline-start:auto;color:var(--fg-3);font-weight:400}
details.dt[open]>summary::after{content:"-"}
details.dt .bd{padding:0 18px 14px}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;font-size:13px}
.kv dt{color:var(--fg-3)} .kv dd{margin:0}
/* dashboard */
.attn{list-style:none;margin:0;padding:0}
.attn li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.attn li:last-child{border:0}
.attn .who{min-width:0;flex:1}
.attn .who b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attn .who span{font-size:12px;color:var(--fg-3)}
.fun{display:flex;flex-direction:column;gap:10px}
.fun .st{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center}
.fun .lab{font-size:13px;color:var(--fg-2)}
.fun .bar{height:34px;border-radius:6px;position:relative;background:var(--surface-2)}
.fun .bar>i{position:absolute;inset:0 0 0 auto;border-radius:6px;display:flex;align-items:center;padding:0 12px;min-width:48px;font:700 15px var(--f-ui);color:#06121f}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}
.legend .n{margin-inline-start:auto;font-weight:600}
.legend .p{color:var(--fg-3);width:42px;text-align:left}
svg text{fill:var(--fg-3);font:11px var(--f-ui)}
svg .gl{stroke:var(--line)}
/* connections + settings */
pre.code{direction:ltr;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;overflow:auto;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;margin:0;color:var(--fg)}
.copyrow{display:flex;gap:8px;align-items:center}
.copyrow code{direction:ltr;flex:1;min-width:0;overflow:auto;white-space:nowrap;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:13px ui-monospace,Menlo,monospace}
.res{border-radius:8px;padding:12px 14px;border:1px solid var(--line);background:var(--surface-2);font-size:13px}
.res.ok{border-color:color-mix(in srgb,var(--good) 50%,var(--line))} .res.bad{border-color:color-mix(in srgb,var(--bad) 50%,var(--line))} .res.dup{border-color:color-mix(in srgb,var(--cyan) 60%,var(--line))}
.mx td,.mx th{text-align:center} .mx td:first-child,.mx th:first-child{text-align:right}
.yes{color:var(--good-ink);font-weight:700;display:inline-flex;align-items:center;gap:4px} .no{color:var(--fg-3)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:99px;padding:4px 6px 4px 12px;background:var(--surface-2)}
.pill button{all:unset;cursor:pointer;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--fg-3)}
.pill button:hover{background:var(--line);color:var(--fg)}
.pill small{color:var(--fg-3)}
.addrow{display:flex;gap:8px;margin-top:12px}
.addrow input{flex:1;max-width:280px}
.chk{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.chk:last-child{border:0}
.chk .st{margin-inline-start:auto;font-size:12px;color:var(--fg-3);white-space:nowrap}
.note{font-size:12px;color:var(--fg-3)}
/* overlays */
#modal .ov{position:fixed;inset:0;background:rgba(6,12,22,.55);display:grid;place-items:center;z-index:80;padding:16px}
#modal .md{background:var(--surface);border:1px solid var(--line);border-radius:14px;max-width:640px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
#modal .md .hd{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px}
#modal .md .bd{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
#modal .md .ft{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-start}
#toast{position:fixed;inset-inline:0;bottom:max(20px,env(safe-area-inset-bottom,0px));display:flex;justify-content:center;pointer-events:none;z-index:90}
#toast .t{background:var(--navy);color:#fff;border-radius:10px;padding:10px 16px;box-shadow:var(--shadow);font-weight:500;max-width:min(92vw,520px);border:1px solid var(--side-2)}
@media (max-width:1040px){.grid-2,.grid-2b,.lc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:880px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:260px;transform:translateX(100%);transition:transform .2s ease}
  .side.open{transform:none}
  .scrim.on{display:block;position:fixed;inset:0;background:rgba(6,12,22,.5);z-index:35}
  .ib.menu{display:grid}
  .top{padding:12px max(16px,env(safe-area-inset-left,0px)) 12px max(16px,env(safe-area-inset-right,0px));flex-wrap:wrap}
  .page{padding:20px max(16px,env(safe-area-inset-left,0px)) 56px max(16px,env(safe-area-inset-right,0px))}
  .top .search{order:5;flex-basis:100%;max-width:none}
  .strip .v{font-size:26px}
}
@media (max-width:720px){
  .hide-s{display:none}
  .fg{grid-template-columns:minmax(0,1fr)}
  table.t td,table.t th{padding:10px 8px}
  .fun .st{grid-template-columns:1fr}
  .kv{grid-template-columns:100px 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- additions for the live app ---------- */
[hidden]{display:none!important}
.page.wide{max-width:none}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
.acard{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.abrand{background:var(--navy);padding:18px 24px;display:flex;align-items:center;gap:10px}
.abrand img.wm{height:24px;width:auto;display:block}
.abrand .btag{font:600 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--side-dim);border:1px solid var(--side-2);border-radius:4px;padding:4px 6px}
.abody{padding:24px;display:flex;flex-direction:column;gap:16px}
.abody h1{margin:0;font-size:22px;line-height:1.25;font-weight:700}
.abody p{margin:0;color:var(--fg-2);font-size:14px}
.abody .fld input{height:42px}
.abody .btn.pri{height:42px;justify-content:center;font-size:15px}
.steps{display:flex;gap:8px;font-size:12px;color:var(--fg-3);font-weight:600}
.steps span{padding:3px 10px;border-radius:99px;border:1px solid var(--line)}
.steps span.on{color:var(--fg);border-color:var(--magenta);background:var(--accent-soft)}
.qrrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.qrbox{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;width:176px;height:176px;flex:none}
.qrbox svg{display:block;width:100%;height:100%}
.secret{direction:ltr;text-align:left;font:600 15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;word-break:break-all;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.errbox{border:1px solid color-mix(in srgb,var(--bad) 55%,var(--line));background:color-mix(in srgb,var(--bad) 8%,var(--surface));color:var(--bad-ink);border-radius:8px;padding:10px 12px;font-size:13px}
.infobox{border:1px solid color-mix(in srgb,var(--cyan) 55%,var(--line));background:var(--cyan-soft);border-radius:8px;padding:10px 12px;font-size:13px}
.warnbox{border:1px solid color-mix(in srgb,var(--warn) 60%,var(--line));background:color-mix(in srgb,var(--warn) 12%,var(--surface));border-radius:8px;padding:10px 12px;font-size:13px}
.loading{padding:48px 18px;text-align:center;color:var(--fg-3)}
.nm-link{color:inherit;text-decoration:none;font-weight:600;display:block}
.nm-link:hover{text-decoration:underline}
.btn.danger{color:var(--bad-ink);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn.danger:hover{border-color:var(--bad)}
.pager{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.pager .sp{flex:1}
.hubtag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:6px;padding:3px 9px;font-size:12.5px;background:var(--surface-2);color:var(--fg-2)}
.hubtag.ok{color:var(--good-ink);border-color:color-mix(in srgb,var(--good) 50%,var(--line))}
.hubtag.bad{color:var(--bad-ink);border-color:color-mix(in srgb,var(--bad) 50%,var(--line))}
.fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:99px;padding:3px 6px 3px 10px;background:var(--surface-2);font-size:12.5px}
.fchip button{all:unset;cursor:pointer;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--fg-3)}
.fchip button:hover{background:var(--line);color:var(--fg)}
.sbars{display:flex;flex-direction:column;gap:9px}
.sbars .r{display:grid;grid-template-columns:118px 1fr 40px;gap:10px;align-items:center;font-size:13px}
.sbars .r .b{height:12px;border-radius:4px;background:var(--surface-2);position:relative;overflow:hidden}
.sbars .r .b i{position:absolute;inset:0 0 0 auto;border-radius:4px}
.sbars .r .n{font-weight:700;text-align:left}
.stsel{height:36px;font-weight:600}
.acts-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.who-line{display:flex;flex-direction:column}
.kv dd{overflow-wrap:anywhere}
.kv .ltr{direction:ltr;text-align:right}
.code-sm{direction:ltr;text-align:left;display:block;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.cell-clip{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#toast .t.bad{background:#7A1329;border-color:#B01B3C}
.ro-note{font-size:12.5px}
.tl .m bdi{unicode-bidi:isolate}
.sw input{margin:0}
.fld .hint{font-size:12px;color:var(--fg-3);margin-top:3px}
.dsel{height:30px;font-size:13px;max-width:160px}
.rowdim td{opacity:.6}
@media (max-width:720px){
  .sbars .r{grid-template-columns:96px 1fr 34px}
  .cell-clip{max-width:180px}
  .abody{padding:20px 16px}
  .acard{border-radius:12px}
}