:root{
  --bg:#f6f7fb;--surface:#ffffff;--surface-2:#f0f2f7;--surface-3:#e4e7ef;
  --border:#e3e6ee;--border-strong:#c9ceda;
  --text:#323338;--text-2:#5c5f6b;--text-3:#8b8f9c;
  --accent:#0073ea;--accent-2:#0060b9;--accent-ink:#ffffff;--accent-soft:#e6f1fd;
  --shadow:0 1px 2px rgba(50,51,56,.04),0 4px 14px -8px rgba(50,51,56,.16);
  --shadow-lg:0 24px 60px -24px rgba(50,51,56,.4);
  --ring:0 0 0 3px rgba(0,115,234,.3);
  --scrim:rgba(50,51,56,.32);
  --c-failed:#f4a52a;--c-uw:#a25ddc;--c-lapsed:#e2445c;--c-nt:#ff642e;--c-wd:#0086c0;--c-dc:#df2f7a;--c-cx:#6f7d93;--c-old:#8a6243;
  --c-contacted:#579bfc;--c-promise:#784bd1;--c-fix:#00a9c6;--c-saved:#00a660;--c-lost:#8a8f99;--c-inforce:#00a660;
  --good:#00a660;--warn:#f4a52a;--crit:#e2445c;
  --radius:10px;--radius-sm:8px;--fs:14px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#181b34;--surface:#222647;--surface-2:#2b305a;--surface-3:#383d6b;
  --border:#2f3461;--border-strong:#4a5088;
  --text:#e6e8f2;--text-2:#b3b7cc;--text-3:#8488a6;
  --accent:#6aa9ff;--accent-2:#8dbcff;--accent-ink:#0f1430;--accent-soft:rgba(106,169,255,.16);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px -10px rgba(0,0,0,.6);
  --shadow-lg:0 28px 70px -28px rgba(0,0,0,.8);
  --ring:0 0 0 3px rgba(106,169,255,.45);
  --scrim:rgba(0,0,0,.55);
  --c-failed:#f5ae3d;--c-uw:#b47ae6;--c-lapsed:#ef5a70;--c-nt:#ff7a4d;--c-wd:#2d9fd6;--c-dc:#ee4f93;--c-cx:#8795ab;--c-old:#a97d5c;
  --c-contacted:#6daaff;--c-promise:#9470e0;--c-fix:#22b9d4;--c-saved:#1fbf78;--c-lost:#9ca1ad;--c-inforce:#1fbf78;
  --good:#1fbf78;--warn:#f5ae3d;--crit:#ef5a70;
  color-scheme:dark;
}
:root[data-size="large"]{--fs:15.5px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:var(--fs)/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;margin:0;text-wrap:balance}
h4{margin:0}
a{color:var(--accent)}
:focus-visible{outline:none;box-shadow:var(--ring)}
svg{width:18px;height:18px;flex:none}
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100%}
/* sidebar */
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:14px 12px calc(14px + env(safe-area-inset-bottom,0px));background:var(--surface);border-right:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 12px}
.logo{width:34px;height:34px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff;font:800 14px "Plus Jakarta Sans";flex:none}
.brand .txt{min-width:0}
.brand .txt b{display:block;font:700 15px/1.2 "Plus Jakarta Sans";text-wrap:balance}
.brand .txt small{color:var(--text-3);font-size:11.5px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font-weight:500;text-align:left}
.nav button:hover{background:var(--surface-2);color:var(--text)}
.nav button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav .n{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--text-3);background:var(--surface-2);padding:1px 7px;border-radius:999px;font-variant-numeric:tabular-nums}
.nav button.on .n{background:var(--surface);color:var(--accent)}
.side .grow{flex:1}
.user{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:var(--surface-2);cursor:pointer;position:relative}
.ava{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.user .txt{min-width:0}
.user b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user small{color:var(--text-3);font-size:11.5px}
/* top bar */
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 24px;background:var(--surface);border-bottom:1px solid var(--border)}
.top .sp{flex:1}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-3);cursor:text;min-width:0}
.search span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
kbd{font:11px/1 Inter;padding:3px 6px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text-3)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:12.5px;color:var(--text-2);white-space:nowrap;max-width:100%}
.pill b{color:var(--text);font-weight:600}
.pill .lock{color:var(--warn)}
.pill.sync i{width:8px;height:8px;border-radius:50%;background:var(--good)}
button.pill.sync{border-color:transparent;background:transparent;color:var(--text-3)}
button.pill.sync:hover{background:var(--surface-2);border-color:transparent}
button.pill{cursor:pointer}
button.pill:hover{border-color:var(--border-strong)}
select.sel{padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);max-width:100%}
.ib{width:34px;height:34px;display:grid;place-items:center;border:1px solid transparent;background:transparent;border-radius:8px;color:var(--text-2);flex:none}
.ib:hover{background:var(--surface-2);color:var(--text)}
.ib.bd{border-color:transparent;background:var(--surface-2)}
.ib svg{width:17px;height:17px}
.ib.sm{width:28px;height:28px;border-radius:7px}
.ib.sm svg{width:15px;height:15px}
/* content */
.content{padding:18px 24px 48px;display:flex;flex-direction:column;gap:14px;min-width:0}
.hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.hero h1,.bh h1{font-size:22px;font-weight:700;letter-spacing:-.01em}
.hero .sub,.bh .sub{color:var(--text-2);margin-top:3px;font-size:13px}
.hero .sub b,.bh .sub b{color:var(--text)}
.note{font-size:12.5px;color:var(--text-3)}
/* board header: one panel = title row, the numbers of the day as tiles, then the sort row */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.bh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:16px 18px 14px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tabs{display:flex;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.tabs button{border:0;background:transparent;padding:7px 14px;border-radius:7px;font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:6px}
.tabs button .n{font-size:11.5px;color:var(--text-3);background:var(--surface-3);padding:1px 6px;border-radius:999px;font-variant-numeric:tabular-nums}
.tabs button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.tabs button.on .n{background:var(--accent-soft);color:var(--accent)}
/* the numbers of the day: tiles in a strip with hairline dividers; the ones with a filter behind them are buttons */
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:1px;background:var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sc{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 18px 13px;border:0;background:var(--surface);color:var(--text-2);text-align:left;min-width:0;max-width:100%}
.sc .l{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sc .l::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--text-3));flex:none}
.sc .l svg{width:12px;height:12px;color:var(--text-3);flex:none}
.sc b{font:700 24px/1.1 "Plus Jakarta Sans",Inter,sans-serif;font-variant-numeric:tabular-nums;color:var(--text);letter-spacing:-.01em}
.sc small{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
button.sc{cursor:pointer;transition:background .12s}
button.sc:hover{background:var(--accent-soft)}
button.sc.on{background:var(--accent-soft);box-shadow:inset 0 -3px 0 var(--accent)}
button.sc.on b,button.sc.on .l{color:var(--accent)}
.sc.quiet b{color:var(--text-2)}
/* bar: sort + hint */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 18px}
.sortl{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-3)}
.bar .sp{flex:1}
.toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.toggle.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.toggle svg{width:13px;height:13px}
/* board: groups */
.board{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin}
.col{flex:0 0 300px;scroll-snap-align:start;display:flex;flex-direction:column;min-width:0;background:var(--surface-2);border:1px solid var(--border);border-radius:12px}
.col>header{display:flex;align-items:center;gap:8px;padding:11px 12px 10px;border-bottom:1px solid var(--border);border-radius:12px 12px 0 0;background:var(--surface);box-shadow:inset 0 3px 0 var(--c);cursor:default;user-select:none}
.col>header .dot{display:none}
.col h3{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col .cnt{font-size:12px;color:var(--text-3);font-weight:600;font-variant-numeric:tabular-nums}
.col .amt{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.col .amt b{font-size:12.5px;font-weight:700;color:var(--text)}
.col .amt small{font-size:11px;color:var(--text-3)}
.col .chev{display:none;color:var(--text-3)}
.col .chev svg{width:16px;height:16px;transition:transform .15s}
.col .list{display:flex;flex-direction:column;gap:8px;min-height:140px;padding:8px;border-radius:0 0 12px 12px;transition:background .15s,outline-color .15s;outline:2px dashed transparent;outline-offset:-4px}
.col .list.over{background:var(--accent-soft);outline-color:var(--accent)}
.col .list.no{outline-color:var(--crit);background:color-mix(in srgb,var(--crit) 8%,transparent)}
.empty{padding:18px 12px;text-align:center;color:var(--text-3);font-size:12.5px;border:1px dashed var(--border-strong);border-radius:10px}
.more{border:0;background:transparent;color:var(--accent);font-weight:600;font-size:12.5px;padding:6px}
/* cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px 8px 14px;box-shadow:var(--shadow);position:relative;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s;min-width:0}
.card::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--c)}
.card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.card:focus-visible{box-shadow:var(--ring)}
.card.dragging{opacity:.45}
.card.flash{animation:flash 1.2s ease}
@keyframes flash{0%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:var(--shadow)}}
.card .r1{display:flex;align-items:baseline;gap:8px}
.card h4{font-size:14.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .amt{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.card .amt b{font-weight:700}
.card .amt small{font-weight:500;color:var(--text-3);font-size:11px}
.card .r2{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px;min-width:0}
.card .who{font-size:12px;color:var(--text-3);margin-left:auto;white-space:nowrap}
/* the status cell: a solid block of the column's colour, like a Monday status */
.st{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:6px;background:var(--c,var(--text-3));color:#fff;font-size:12px;font-weight:600;line-height:1.3;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st.warn{--c:var(--warn);color:#2b1d00}
.st.crit{--c:var(--crit)}
.st.good,.st.saved,.st.in_force{--c:var(--good)}
.st.fix{--c:var(--c-fix)}
.st.uw{--c:var(--c-uw)}
.st.nt{--c:var(--c-nt)}
.st.wd{--c:var(--c-wd)}
.st.dc{--c:var(--c-dc)}
.st.cx{--c:var(--c-cx)}
.st.old{--c:var(--c-old)}
.st.lapsed{--c:var(--c-lapsed)}
.st.failed{--c:var(--c-failed);color:#2b1d00}
.st.lost{--c:var(--c-lost)}
.st.contacted{--c:var(--c-contacted)}
.st.promise{--c:var(--c-promise)}
.st.none{--c:var(--surface-3);color:var(--text-2)}
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-2);white-space:nowrap}
.tag.crit{background:color-mix(in srgb,var(--crit) 14%,transparent);color:color-mix(in srgb,var(--crit) 80%,var(--text))}
.tag.good{background:color-mix(in srgb,var(--good) 14%,transparent);color:color-mix(in srgb,var(--good) 70%,var(--text))}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--text-2);white-space:nowrap}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--text-3));flex:none}
.card footer{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--text-3);min-height:28px}
.card footer .touch{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card footer .touch.due{color:var(--accent);font-weight:600}
.card footer .touch.cold{color:var(--crit);font-weight:600}
.acts{display:flex;gap:2px;opacity:0;transition:opacity .12s}
.card:hover .acts,.card:focus-within .acts{opacity:1}
@media (hover:none){.acts{opacity:1}}
.acts .ib{color:var(--text-2)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);font-weight:600;white-space:nowrap;text-decoration:none;color:var(--text)}
a.ib,a.tpl{text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-2)}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:7px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-2)}
.btn svg{width:16px;height:16px}
.btnrow{display:flex;flex-wrap:wrap;gap:8px}
/* drawer */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:19;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(500px,100vw);background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:20;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .22s ease;padding-top:env(safe-area-inset-top,0px)}
.drawer.open{transform:none}
.dh{display:flex;align-items:flex-start;gap:10px;padding:16px 20px 12px;border-bottom:1px solid var(--border)}
.dh .t{flex:1;min-width:0}
.dh h2{font-size:19px;font-weight:700}
.dh .sub{color:var(--text-2);font-size:13px;margin-top:3px}
.dh .big{display:flex;flex-direction:column;align-items:flex-end;font:700 20px/1.1 "Plus Jakarta Sans";font-variant-numeric:tabular-nums;white-space:nowrap}
.dh .big small{font:500 12px Inter;color:var(--text-3)}
.db{flex:1;overflow-y:auto;padding:16px 20px 32px;display:flex;flex-direction:column;gap:18px}
.sec h3{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.why{display:flex;gap:10px;padding:12px;border-radius:10px;background:color-mix(in srgb,var(--c) 10%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.why .ic{width:28px;height:28px;border-radius:8px;background:var(--c);color:#fff;display:grid;place-items:center;flex:none}
.why .ic svg{width:15px;height:15px}
.why b{display:block}
.why p{margin:2px 0 0;font-size:13px;color:var(--text-2)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.kv div{min-width:0}
.kv dt{font-size:11.5px;color:var(--text-3);font-weight:600}
.kv dd{margin:1px 0 0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv dd.mono{font-variant-numeric:tabular-nums}
.stages{display:flex;flex-wrap:wrap;gap:6px}
.stages button{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--text-2)}
.stages button i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.stages button.on{border-color:var(--text);color:var(--text);background:var(--surface-2)}
.stages button:disabled{opacity:.55;cursor:not-allowed}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.quick button{padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:12px;color:var(--text-2)}
.quick button:hover{border-color:var(--accent);color:var(--accent)}
input[type=date],input[type=time],input[type=number],textarea,.inp{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}
textarea{width:100%;min-height:72px;resize:vertical}
.tpls{display:flex;flex-direction:column;gap:8px}
.tpl{display:block;text-decoration:none;color:inherit;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);font-size:13px;line-height:1.4}
.tpl .h{display:flex;justify-content:space-between;font-weight:600;font-size:12px;color:var(--text-3);margin-bottom:4px}
.tpl .h span:last-child{color:var(--accent)}
.tpl:hover{border-color:var(--accent)}
.tl{display:flex;flex-direction:column;gap:0;position:relative;padding-left:18px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--surface-3)}
.tl div{position:relative;padding:4px 0 10px;font-size:13px}
.tl div::before{content:"";position:absolute;left:-17px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--text-3);box-shadow:0 0 0 3px var(--surface)}
.tl div.t::before{background:var(--accent)}
.tl time{display:block;font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
/* underwriting requirements */
.reqs{display:flex;flex-direction:column;gap:8px}
.req{padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);font-size:13px}
.req .rh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px}
.req .rh b{text-transform:capitalize}
.req .ok{color:var(--good);font-weight:600;font-size:12px}
.req .open{color:var(--crit);font-weight:600;font-size:12px}
.req .rn{margin-top:5px;color:var(--text-2);font-size:12.5px;line-height:1.4;display:flex;gap:8px}
.req .rn time{color:var(--text-3);font-variant-numeric:tabular-nums;flex:none;min-width:44px}
.req .rn span{white-space:pre-line;min-width:0}
/* table */
.tablewrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.tablewrap .scroll{overflow-x:auto}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.filters .inp{min-width:200px;flex:1;max-width:360px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:10px 12px;cursor:pointer;white-space:nowrap;background:var(--surface-2);user-select:none}
th.on{color:var(--accent)}
td{padding:9px 12px;border-top:1px solid var(--border);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
td small.mo{color:var(--text-3);font-size:11.5px}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--surface-2)}
.n{text-align:right;font-variant-numeric:tabular-nums}
.lockline{display:flex;gap:10px;align-items:center;padding:10px 14px;background:color-mix(in srgb,var(--warn) 10%,transparent);font-size:12.5px;color:var(--text-2);border-bottom:1px solid var(--border)}
.lockline svg{color:var(--warn)}
.pager{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:12.5px;color:var(--text-3);border-top:1px solid var(--border)}
/* milestones */
.mgroup h3{font-size:13px;font-weight:700;margin:6px 0 8px;color:var(--text-2)}
.mlist{display:flex;flex-direction:column;gap:8px}
.mi{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)}
.mi .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);flex:none}
.mi .ic svg{width:17px;height:17px}
.mi .t{flex:1;min-width:0}
.mi b{display:block;font-size:14px}
.mi small{color:var(--text-2);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi.done{opacity:.5}
.mi input{width:18px;height:18px;accent-color:var(--accent)}
/* leaders */
.lanes{display:flex;flex-direction:column;gap:14px}
.lane{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 14px}
.lane>header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:10px}
.lane h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.lane .stat{font-size:12.5px;color:var(--text-2)}
.lane .stat b{color:var(--text);font-variant-numeric:tabular-nums}
.lane .stat.bad b{color:var(--crit)}
.lane .cards{display:flex;gap:10px;overflow-x:auto;padding:2px}
.lane .cards .card{flex:0 0 250px}
.lb{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.lb .box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.lb h3{font-size:13.5px;margin-bottom:8px}
.lb table td{padding:7px 4px;border-top:1px solid var(--border)}
.lb table{font-size:13px}
.lb .rank{color:var(--text-3);width:22px}
/* palette */
.pal{position:fixed;inset:0;z-index:30;display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 0;background:var(--scrim)}
.pal.on{display:flex}
.palbox{width:min(640px,100%);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.palbox input{width:100%;padding:16px 18px;border:0;border-bottom:1px solid var(--border);background:transparent;font-size:16px;outline:none}
.palres{max-height:50vh;overflow-y:auto;padding:6px}
.palres button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;text-align:left}
.palres button.on,.palres button:hover{background:var(--accent-soft)}
.palres .what{color:var(--text-3);font-size:12px;margin-left:auto;white-space:nowrap}
.palres .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-2);flex:none}
.palres .ic svg{width:14px;height:14px}
/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 14px;border-radius:10px;font-size:13px;box-shadow:var(--shadow-lg);z-index:40;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px)}
.toast button{border:0;background:transparent;color:#8dbcff;font-weight:700}
.toast[hidden]{display:none}
/* bottom nav (phone) */
.bottom{display:none;position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--surface);border-top:1px solid var(--border);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));justify-content:space-around}
.bottom button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--text-3);padding:4px 8px;border-radius:8px}
.bottom button.on{color:var(--accent)}
.bottom svg{width:20px;height:20px}
.mobile-only{display:none}
@media (max-width:1100px){
  .app{grid-template-columns:72px minmax(0,1fr)}
  .side .label,.side .n,.side .txt,.side .sect{display:none}
  .nav button{justify-content:center;padding:10px}
  .user{justify-content:center;padding:6px}
}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .bottom{display:flex}
  .mobile-only{display:block}
  .top{padding:10px 16px;gap:8px}
  .top .pill.sync,.top .pill.scope,.top #size{display:none}
  .search{flex:0 0 auto;padding:9px 10px}
  .search span,.search kbd{display:none}
  .top .sel{flex:1;min-width:0}
  .content{padding:14px 16px 96px;gap:12px}
  .hero h1,.bh h1{font-size:20px}
  .bar .hint{display:none}
  /* groups stack, each one folds */
  .board{flex-direction:column;overflow:visible;gap:6px;padding-bottom:0}
  .col{flex:0 0 auto}
  .col>header{cursor:pointer}
  .col.closed>header{border-bottom:0;border-radius:12px}
  .sum{grid-template-columns:1fr 1fr}
  .sum .sc:last-child:nth-child(odd){grid-column:1/-1}
  .bh{padding:14px 14px 12px}
  .bar{padding:8px 14px}
  .col .chev{display:grid}
  .col .list{min-height:0;padding:8px}
  .col.closed .list{display:none}
  .col.closed .chev svg{transform:rotate(-90deg)}
  .drawer{width:100vw;border-left:0}
  .kv{grid-template-columns:1fr 1fr}
  .tabs button{padding:6px 10px;font-size:13px}
  .lane .cards .card{flex-basis:230px}
  .m-hide{display:none}
  .filters .inp{min-width:0;max-width:none;flex-basis:100%}
  .filters .sel{flex:1 1 40%;min-width:0}
  .filters .note{flex-basis:100%}
  td,th{padding:8px 8px}
  td:first-child{max-width:38vw}
  td .st{font-size:11.5px;padding:2px 7px;min-height:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}
/* login */
.login{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:50;padding:16px}
.login form{width:min(380px,100%);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:24px;display:flex;flex-direction:column;gap:12px}
.login .brand{padding:0 0 6px}
.login label{font-size:12.5px;font-weight:600;color:var(--text-2);display:flex;flex-direction:column;gap:4px}
.login .inp{width:100%}
.login .err{color:var(--crit);font-size:13px;min-height:18px}
/* loading & errors */
.loading{padding:40px;text-align:center;color:var(--text-3)}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.errbox{padding:14px;border:1px solid color-mix(in srgb,var(--crit) 40%,transparent);background:color-mix(in srgb,var(--crit) 8%,transparent);border-radius:10px;color:var(--text)}
button:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
/* admin */
.adm{display:flex;flex-direction:column;gap:18px}
.adm .box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);overflow-x:auto}
.adm h3{font-size:14px;margin-bottom:10px}
.adm table{width:100%;font-size:13px;border-collapse:collapse}
.adm td,.adm th{padding:7px 6px;border-top:1px solid var(--border);white-space:nowrap;text-align:left}
.adm th{font-size:11.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;background:transparent;cursor:default}
.adm .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.adm .row .inp,.adm .row .sel{min-width:160px}
.adm textarea{min-height:56px;width:100%}
.pw{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);padding:4px 8px;border-radius:8px;user-select:all}
.menu{position:absolute;right:12px;bottom:70px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px;z-index:9;min-width:200px}
.menu button{border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:8px}
.menu button:hover{background:var(--surface-2)}