/* ============================================================
   F45 CRM — unified stylesheet (v2 merge)
   Token architecture ported from the ads app (43-token system):
   spacing --s1..6 · motion --dur/--ease-ios · elevation --raised/--float
   .5px borders · accent #33c27a dark / #12a150 light · both themes.
   ============================================================ */

/* ===== tokens ===== */
[data-theme="dark"]{
  /* F45 scheduler palette (assets/css/f45-tokens.css) — steel blue on blue-black */
  --bg:#101920; --surface:#16222b; --surface-2:#1a2831; --raised:#1e2d38; --hover:#1a2831;
  --border:#2a3a45; --border-2:#344754; --divider:#243440;
  --text:#eef5f8; --muted:#a5b5bf; --faint:#77879a;
  --accent:#4d97b6; --accent-ink:#ffffff; --accent-soft:#1e3a47;
  --danger:#fca5a5; --danger-soft:#331a1e; --warn:#f59e0b; --warn-soft:#2f2410;
  --info:#8fb3c6; --info-soft:#1a2833; --violet:#a894e6; --violet-soft:#221d33;
  --teal:#3fb8ad; --pink:#d4708a; --purple:#a78be0;
  --ok:#86efac; --ok-soft:#17311f;
  --scrim:rgba(0,0,0,.55); --raised-hi:inset 0 1px 0 rgba(255,255,255,.045);
  --float:0 8px 24px rgba(0,0,0,.45);
  --sk:linear-gradient(90deg,#142029 25%,#1c2b36 50%,#142029 75%);
}
[data-theme="light"]{
  /* F45 scheduler palette — deep teal on cool white */
  --bg:#f6f9fb; --surface:#ffffff; --surface-2:#f7fafc; --raised:#ffffff; --hover:#f7fafc;
  --border:#d7e0e5; --border-2:#c3cfd6; --divider:#e4ebef;
  --text:#17222c; --muted:#66737f; --faint:#93a1ad;
  --accent:#1f5d74; --accent-ink:#ffffff; --accent-soft:#e2edf1;
  --danger:#dc2626; --danger-soft:#fdeaea; --warn:#b57611; --warn-soft:#fbf2df;
  --info:#596674; --info-soft:#f2f6fa; --violet:#7658c8; --violet-soft:#efeafb;
  --teal:#1c8f85; --pink:#bd4d6b; --purple:#7658c8;
  --ok:#2f7a4b; --ok-soft:#eef7f0;
  --scrim:rgba(23,34,44,.4); --raised-hi:none;
  --float:0 8px 24px rgba(23,34,44,.14);
  --sk:linear-gradient(90deg,#eef3f6 25%,#e2eaef 50%,#eef3f6 75%);
}
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:18px;--r-pill:999px;
  --ease:cubic-bezier(.4,0,.2,1);--ease-ios:cubic-bezier(.32,.72,0,1);--dur:.18s;--dur-fast:.13s;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;}

/* ===== reset / base ===== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font:15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em;overflow-x:hidden;overscroll-behavior-y:contain;
  transition:background .25s,color .25s}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit}
svg{display:block}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ic-sm{width:15px;height:15px}.ic-xs{width:13px;height:13px;stroke-width:2}
.num{font-variant-numeric:tabular-nums}
.mut{color:var(--muted)}.cap{font-size:12.5px;color:var(--faint)}
.good{color:var(--accent)}.warncol{color:var(--warn)}.badcol{color:var(--danger)}
.row{display:flex;align-items:center;gap:10px}
.spacer{flex:1}

/* ===== shell ===== */
#app{min-height:100%}
#login{display:none;position:fixed;inset:0;z-index:50;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
#login .logo{width:56px;height:56px;border-radius:15px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px}
#login input{padding:13px 14px;border:.5px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:16px;width:min(280px,80vw);text-align:center;outline:none}
#login input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

aside#sidebar{position:fixed;left:0;top:0;bottom:0;width:238px;border-right:.5px solid var(--border);background:var(--surface);display:flex;flex-direction:column;padding:16px 12px;gap:3px;z-index:20}
.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px}
.sb-brand .logo{width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:800}
.sb-brand b{font-size:16px;letter-spacing:-.01em}
.sb-scope{margin:2px 4px 12px}
.navbtn{display:flex;align-items:center;gap:11px;padding:9px 11px;border:none;background:none;color:var(--muted);border-radius:var(--r-sm);font-size:14.5px;font-weight:500;width:100%;text-align:left;transition:background var(--dur-fast),color var(--dur-fast)}
.navbtn:hover{background:var(--hover);color:var(--text)}
.navbtn.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.navbtn .badge{margin-left:auto;background:var(--danger);color:#fff;font-size:11px;font-weight:700;border-radius:9px;min-width:19px;height:19px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.sb-foot{margin-top:auto;padding:10px 8px 2px;border-top:.5px solid var(--divider);font-size:12.5px;color:var(--faint)}
.sb-foot .who{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--muted)}
.sb-settings{display:flex;align-items:center;gap:9px;width:100%;padding:9px 8px;border:none;background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:500;border-radius:var(--r-sm);cursor:pointer;margin-bottom:4px;text-align:left}
.sb-settings:hover{background:var(--surface-2);color:var(--text)}
.sb-settings.on{background:var(--accent-soft);color:var(--accent)}

header#mobilebar{display:none}
main{margin-left:238px;padding:22px 26px 90px;max-width:1340px}
.pagehead{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.pagehead h1{font-size:23px;letter-spacing:-.02em;margin:0;font-weight:700}
.pagehead .tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ===== controls ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:.5px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--r-sm);padding:8px 13px;font-size:13.5px;font-weight:600;transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast)}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn-primary:hover{filter:brightness(1.05)}
.btn-danger{background:var(--danger);color:#fff;border-color:transparent}
.btn-sm{padding:6px 10px;font-size:12.5px}
.btn-ghost{background:none}
.btn-block{width:100%}
.iconbtn{width:36px;height:36px;border-radius:var(--r-sm);border:.5px solid var(--border);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;transition:var(--dur-fast)}
.iconbtn:hover{color:var(--text);border-color:var(--muted)}
.iconbtn:active{transform:scale(.94)}
.seg{display:inline-flex;background:var(--surface-2);border:.5px solid var(--border);border-radius:var(--r-pill);padding:3px;gap:2px}
.seg button{border:none;background:none;color:var(--muted);font-size:13px;font-weight:600;padding:6px 13px;border-radius:var(--r-pill);white-space:nowrap;transition:var(--dur-fast)}
.seg button.on{background:var(--surface);color:var(--text)}
[data-theme="light"] .seg button.on{box-shadow:0 1px 2px rgba(20,30,50,.08)}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-sm);padding:8px 11px;color:var(--muted);min-width:200px}
.search input{border:none;background:none;color:var(--text);font-size:14px;outline:none;width:100%}
.search input::placeholder{color:var(--faint)}
select.sel{border:.5px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--r-sm);padding:8px 11px;font-size:13.5px;font-weight:500}

/* ===== chips + pills + avatar ===== */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;letter-spacing:.01em;padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap}
.chip.rot{background:var(--danger-soft);color:var(--danger)}
.chip.human{background:var(--danger-soft);color:var(--danger)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.ok{background:var(--accent-soft);color:var(--accent)}
.chip.info{background:var(--info-soft);color:var(--info)}
.chip.p{background:var(--surface-2);color:var(--muted)}
.chip.attn{background:var(--warn-soft);color:var(--warn)}
.chip.learn{background:var(--surface-2);color:var(--muted)}
.tag{font-size:11px;background:var(--surface-2);color:var(--muted);border:.5px solid var(--border);padding:1px 7px;border-radius:var(--r-pill)}
.pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.pills.scrollx{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.pills.scrollx::-webkit-scrollbar{display:none}
.pill{border:.5px solid var(--border);background:var(--surface);color:var(--muted);border-radius:var(--r-pill);padding:6px 12px;font-size:13px;font-weight:600;display:inline-flex;gap:6px;align-items:center;flex:none;transition:var(--dur-fast)}
.pill.on{background:var(--text);color:var(--bg);border-color:transparent}
.pill.smart{border-style:dashed}
.pill .ct{font-size:11.5px;opacity:.7}
.avatar{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex:0 0 auto}
.av-28{width:28px;height:28px;font-size:11px;border-radius:8px}.av-44{width:44px;height:44px;font-size:16px;border-radius:12px}

/* stage color system — --sc is DERIVED per crm_stage row in JS (never hardcoded) */
.sdot{width:7px;height:7px;border-radius:50%;background:var(--sc,var(--muted));flex:none}
.spill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--sc,var(--muted))}

/* ===== KPI (donor: sparkline + delta) ===== */
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md);padding:14px 15px}
.kpi .l{font-size:12px;color:var(--muted)}
.kpi .vr{display:flex;align-items:baseline;gap:8px;margin-top:5px}
.kpi .v{font-size:26px;line-height:1.1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:2px}
.kpi .s{font-size:12px;color:var(--faint);margin-top:4px}
.kpi .sparkw{margin-top:8px;height:24px}
.spark{display:block;color:var(--info)}

/* ===== cards / lists / tables ===== */
.card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md);padding:16px}
.card.clickable{cursor:pointer;transition:border-color .12s var(--ease),background .12s var(--ease)}
.card.clickable:hover{border-color:var(--muted);background:var(--surface-2)}
.listcard{background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.lrow{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:.5px solid var(--divider);cursor:pointer;transition:background var(--dur-fast)}
.lrow:last-child{border-bottom:none}
.lrow:hover{background:var(--hover)}
.lrow .body{min-width:0;flex:1}
.lrow .nm{font-weight:600;font-size:14.5px}
.lrow .sub{font-size:12.5px;color:var(--muted);margin-top:1px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.lrow .rc{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.tw{overflow-x:auto;border:.5px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:600px}
th,td{text-align:left;padding:11px 14px;border-bottom:.5px solid var(--divider)}
thead th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:650;background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--hover)}
.compbar{height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden;min-width:70px}
.compbar>i{display:block;height:100%;border-radius:4px}
.sec{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:650;margin:22px 0 9px;display:flex;align-items:center;gap:6px}

/* ===== funnel bars ===== */
.fnl-row{margin-bottom:11px}
.fnl-h{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:5px}
.fnl-bar{height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.fnl-bar>i{display:block;height:100%;border-radius:5px;background:var(--accent);transition:width .4s var(--ease)}

/* ===== charts (ported: chartWrap crosshair tooltips) ===== */
.chart-legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.chart-legend .lg{display:flex;align-items:center;gap:5px}
.chart-legend .lg::before{content:"";width:10px;height:2.5px;border-radius:2px;background:var(--c)}
.chart-x{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);margin-top:4px}
.chartwrap{position:relative;touch-action:pan-y;margin-top:6px}
.ch-cross{position:absolute;top:0;bottom:0;width:1px;background:var(--muted);opacity:0;pointer-events:none;transform:translateX(-.5px);transition:opacity .1s}
.ch-dot{position:absolute;width:9px;height:9px;border-radius:50%;border:2px solid var(--surface);opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .1s}
.ch-dot.spend{background:var(--accent)}.ch-dot.leads{background:var(--info)}
.ch-tip{position:absolute;top:4px;pointer-events:none;background:var(--surface);border:.5px solid var(--border);border-radius:8px;box-shadow:0 8px 24px -8px rgba(0,0,0,.4);padding:7px 9px;font-size:12px;line-height:1.5;white-space:nowrap;opacity:0;transform:translateX(-50%);transition:opacity .1s;z-index:3}
.chartwrap.on .ch-cross,.chartwrap.on .ch-dot,.chartwrap.on .ch-tip{opacity:1}
.chartwrap.on .ch-cross{opacity:.45}
.ch-tip .tip-d{font-weight:600;margin-bottom:2px}
.ch-tip .tip-r{display:flex;align-items:center;gap:6px;color:var(--muted)}
.ch-tip .tip-r b{color:var(--text);margin-left:14px;font-variant-numeric:tabular-nums}
.ch-tip .sw{width:8px;height:8px;border-radius:2px;display:inline-block;flex:0 0 auto}

/* ===== pipeline board ===== */
.board{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.col{flex:0 0 288px;background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md);display:flex;flex-direction:column;max-height:calc(100vh - 230px)}
.col.drop{outline:2px solid var(--accent);outline-offset:-2px}
.colhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px 10px;border-bottom:.5px solid var(--divider);position:sticky;top:0;background:var(--surface);border-radius:var(--r-md) var(--r-md) 0 0;z-index:1}
.colhead .nm{font-weight:650;font-size:14px;color:var(--sc,var(--text))}
.colhead .n{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;background:var(--surface-2);border-radius:var(--r-pill);padding:1px 8px;font-weight:600}
.colhead .val{font-size:11.5px;color:var(--faint)}
.colhead .prob{width:100%;height:3px;background:var(--surface-2);border-radius:2px;overflow:hidden;margin-top:2px}
.colhead .prob>i{display:block;height:100%;background:var(--sc,var(--accent));opacity:.55}
.colbody{padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;min-height:60px}
.kcard{border:.5px solid var(--border);border-top:2.5px solid var(--sc,var(--border));background:var(--surface-2);border-radius:10px;padding:11px 12px;cursor:pointer;transition:border-color .12s var(--ease);touch-action:pan-y}
.kcard:hover{border-color:var(--muted);border-top-color:var(--sc,var(--muted))}
.kcard.rotting{border-left:3px solid var(--danger)}
.kcard .ktop{display:flex;align-items:center;gap:8px}
.kcard .knm{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard .kmeta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.kcard .kval{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.kcard.dragging{opacity:.35}
.dragghost{position:fixed;z-index:60;pointer-events:none;width:262px;opacity:.96;box-shadow:var(--float);transform:rotate(-2deg);background:var(--raised)}

/* ===== data table (.ltable — ported column system) ===== */
.ltable{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md);min-width:0}
.ltable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:600;padding:12px 14px;border-bottom:.5px solid var(--border);background:var(--surface);z-index:2}
.ltable th.sortable{cursor:pointer;user-select:none}.ltable th.sortable:hover{color:var(--muted)}
.ltable th .sar{display:inline-block;width:10px;color:var(--accent)}
.ltable td{padding:13px 14px;border-bottom:.5px solid var(--divider);font-size:14px;vertical-align:middle;background:none}
.ltable tbody tr:last-child td{border-bottom:none}
.ltable tbody tr{cursor:pointer;transition:background var(--dur-fast)}
.ltable tbody tr:hover td{background:var(--hover)}
.ltable tbody tr.sel td{background:var(--accent-soft)}
.ltable .tname{display:flex;align-items:center;gap:10px;font-weight:600}
.ltable td.chk,.ltable th.chk{width:38px;padding-right:0}
.ltable td.chk input{width:16px;height:16px;accent-color:var(--accent);opacity:0;transition:var(--dur-fast);cursor:pointer;vertical-align:middle}
.ltable tbody tr:hover td.chk input,.ltable tbody tr.sel td.chk input,.ltable th.chk input{opacity:1}
.ltable td.acts{width:1%;white-space:nowrap;text-align:right;opacity:0;transition:var(--dur-fast)}
.ltable tbody tr:hover td.acts{opacity:1}
.ltable td.acts a{display:inline-flex;padding:6px;color:var(--muted);border-radius:6px;cursor:pointer}
.ltable td.acts a:hover{background:var(--surface-2);color:var(--text)}
.ltable[data-density="compact"] td{padding:7px 14px}
.ltable[data-density="compact"] th{padding:8px 14px}
.ltable[data-density="compact"] .av-28{width:24px;height:24px;font-size:10px}
.ltwrap{overflow-x:auto}
.bulkbar{display:flex;align-items:center;gap:12px;background:var(--text);color:var(--bg);border-radius:var(--r-sm);padding:8px 8px 8px 16px;margin-bottom:12px;font-size:13.5px;font-weight:600}
.bulkbar .ba{display:flex;gap:4px;margin-left:auto;align-items:center}
.bulkbar .ba button,.bulkbar .ba select{background:none;border:.5px solid color-mix(in srgb,var(--bg) 40%,transparent);color:inherit;font-size:13px;font-weight:600;padding:7px 9px;border-radius:6px}
.bulkbar .ba button{border:none}
.bulkbar .ba button:hover{background:color-mix(in srgb,var(--bg) 22%,transparent)}
.tabletools{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tabletools .tt-left{flex:1;min-width:0}
.tabletools .tt-left .pills{margin:0}
.tblgear{flex:0 0 auto}

/* column menu popover */
#colmenu{position:fixed;inset:0;z-index:70;display:none}
#colmenu.on{display:block}
.colmenupanel{position:absolute;width:min(280px,calc(100vw - 32px));background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md);box-shadow:var(--float);animation:palin .14s var(--ease);padding:8px;max-height:min(70vh,460px);overflow-y:auto}
.cmhead{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 8px}
.cmhead .t{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.cmhead .a{display:flex;gap:8px}
.cmhead .a button{background:none;border:none;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;padding:2px}
.cmdense{margin:2px 8px 8px}
.cmrow{display:flex;align-items:center;gap:9px;padding:8px;border-radius:var(--r-sm);cursor:pointer;user-select:none}
.cmrow:hover{background:var(--surface-2)}
.cmrow.pinned{cursor:default;opacity:.75}
.cmrow .grip{color:var(--faint);display:flex;cursor:grab;touch-action:none}
.cmrow.pinned .grip{visibility:hidden}
.cmrow input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}
.cmrow .lb{font-size:13.5px;flex:1}
.cmrow.dragging{opacity:.4}
.cmrow.dragover{box-shadow:inset 0 2px 0 var(--accent)}

/* ===== saved views bar ===== */
.viewbar{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px;padding-bottom:2px}
.viewbar::-webkit-scrollbar{display:none}
.vchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-size:13.5px;font-weight:500;padding:6px 4px;cursor:pointer;white-space:nowrap}
.vchip:hover{color:var(--text)}
.vchip.on{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
.vchip .vdot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.vchip.vadd{color:var(--faint);font-size:16px;padding:6px 8px}
.viewbar .vsep{width:.5px;height:16px;background:var(--border);flex:0 0 auto;margin:0 2px}
.viewbar .vact{flex:0 0 auto;background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;padding:6px 4px;white-space:nowrap}
.strow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.strow .fld{flex:1;margin:0}
.stdel{flex:0 0 auto;color:var(--muted);cursor:pointer;display:flex;padding:8px;border-radius:8px}
.stdel:hover{background:var(--surface-2);color:var(--danger)}

/* ===== drawer + scrim ===== */
#scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--dur);z-index:40}
#scrim.on{opacity:1;pointer-events:auto}
#drawer{position:fixed;top:0;right:0;bottom:0;width:min(800px,96vw);background:var(--raised);border-left:.5px solid var(--border);box-shadow:var(--raised-hi),var(--float);transform:translateX(100%);transition:transform .28s var(--ease-ios);z-index:50;display:flex;flex-direction:column}
#drawer.open{transform:none}
.dhead{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:.5px solid var(--divider)}
.dhead .who{min-width:0;flex:1}
.dhead .nm{font-size:18px;font-weight:700;letter-spacing:-.01em}
.dhead .sub{font-size:13px;color:var(--muted);margin-top:2px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.dbody{overflow-y:auto;padding:18px 20px 40px;flex:1;-webkit-overflow-scrolling:touch}
.dcols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:720px){.dcols{grid-template-columns:1fr}}
.ssec{margin-bottom:20px}
.ssec .h{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:650;margin-bottom:10px}
.fld{display:block;margin-bottom:11px}
.fld span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;padding:9px 11px;border:.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font:inherit;font-size:14px;outline:none;transition:var(--dur-fast)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fld textarea{resize:vertical;min-height:52px}
.quick{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.qbtn{display:inline-flex;align-items:center;gap:6px;border:.5px solid var(--border);background:var(--surface-2);border-radius:var(--r-sm);padding:8px 12px;font-size:13px;font-weight:600;color:var(--text);text-decoration:none;cursor:pointer}
.qbtn:hover{border-color:var(--muted)}
.stagestep{display:flex;flex-wrap:wrap;gap:6px}
.stagebtn{border:.5px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:var(--r-pill);padding:6px 12px;font-size:12.5px;font-weight:600;transition:var(--dur-fast)}
.stagebtn.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.oppcard{border:.5px solid var(--border);border-radius:10px;padding:12px 13px;margin-bottom:10px;cursor:pointer;background:var(--surface-2)}
.oppcard:hover{border-color:var(--muted)}
.tl{position:relative;margin-top:4px}
.tli{display:flex;gap:11px;padding:8px 0}
.tli .node{width:26px;height:26px;border-radius:50%;background:var(--surface-2);border:.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:0 0 auto}
.tli .tt{font-size:13.5px}.tli .tm{margin-left:auto;font-size:11.5px;color:var(--faint);white-space:nowrap}
.bubble{background:var(--surface-2);border:.5px solid var(--border);border-radius:10px;padding:8px 11px;font-size:13px;max-width:80%}
.bubble.user{background:var(--accent-soft);border-color:transparent;margin-left:auto}
.tabsf{display:inline-flex;gap:4px;margin-bottom:10px}
.tabsf button{border:none;background:none;color:var(--muted);font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:var(--r-pill)}
.tabsf button.on{background:var(--surface-2);color:var(--text)}

/* ===== modal ===== */
#modal{position:fixed;inset:0;background:var(--scrim);display:none;align-items:flex-start;justify-content:center;padding:9vh 16px;z-index:60;backdrop-filter:blur(3px)}
#modal.on{display:flex}
.mbox{width:min(520px,100%);background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md);max-height:82vh;display:flex;flex-direction:column;box-shadow:var(--float);animation:palin .14s var(--ease)}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:.5px solid var(--divider);font-weight:700}
.mbody{overflow-y:auto;padding:18px}
.mfoot{display:flex;justify-content:flex-end;gap:9px;padding:14px 18px;border-top:.5px solid var(--divider)}
.mfoot:empty{display:none}
.morelist button{display:flex;align-items:center;gap:11px;width:100%;border:none;background:none;color:var(--text);font-size:14.5px;font-weight:500;padding:12px 10px;border-radius:var(--r-sm);text-align:left}
.morelist button:hover{background:var(--surface-2)}
.morelist .ic{color:var(--muted)}

/* ===== states ===== */
.empty{text-align:center;padding:46px 20px;color:var(--faint)}
.empty .eic{width:52px;height:52px;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--muted)}
.empty .et{font-weight:600;color:var(--text);font-size:15px}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);background:var(--text);color:var(--bg);padding:11px 16px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:14px;opacity:0;pointer-events:none;transition:.22s var(--ease);z-index:80;box-shadow:var(--float)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#toast button{background:none;border:none;color:var(--accent);font-weight:700;font-size:13.5px}
.skel{background:var(--sk);background-size:200% 100%;animation:sk 1.3s infinite;border-radius:var(--r-md);height:78px;margin-bottom:12px}
@keyframes sk{to{background-position:-200% 0}}
.banner{border-radius:var(--r-md);padding:14px 16px;margin-bottom:12px;display:flex;gap:11px;align-items:flex-start}
.banner.ok{background:var(--accent-soft);color:var(--accent)}
.banner.warn{background:var(--warn-soft);color:var(--warn)}
.banner .bd{font-weight:600;font-size:14px}

/* ===== inbox ===== */
.inboxwrap{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
#ib-pane{display:none}
@media(min-width:1200px){
  .inboxwrap{grid-template-columns:minmax(330px,410px) 1fr}
  #ib-pane{display:flex;flex-direction:column;justify-content:center;background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md);height:calc(100vh - 240px);min-height:440px;overflow:hidden;position:sticky;top:16px}
}
.convrow.sel{background:var(--accent-soft)}
.convrow .sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thhead{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:.5px solid var(--divider);flex:0 0 auto}
.thactions{display:flex;gap:7px;margin-left:auto;align-items:center}
.thbody{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;min-height:120px}
.tmsg{max-width:82%;margin-bottom:10px;align-self:flex-start}
.tmsg.out{align-self:flex-end;text-align:right}
.tmsg .bub{display:inline-block;text-align:left;background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;padding:8px 11px;font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.tmsg.out .bub{background:var(--accent-soft);border-color:transparent}
.tmsg .meta{font-size:11px;color:var(--faint);margin-top:3px}
.tmsg.failed .bub{border-color:var(--danger);background:var(--danger-soft);cursor:pointer}
.sysline{display:flex;align-items:center;justify-content:center;gap:5px;text-align:center;font-size:11.5px;color:var(--faint);margin:6px 0}
.handoff{flex:0 0 auto;margin:12px 14px 0;padding:11px 13px;border-radius:10px;background:var(--warn-soft);border:.5px solid var(--warn);font-size:13px}
.composer{flex:0 0 auto;border-top:.5px solid var(--divider);padding:10px 12px;display:flex;gap:8px;align-items:flex-end;position:relative;background:var(--surface)}
.composer textarea{flex:1;resize:none;border:.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;font-size:14px;padding:9px 11px;min-height:40px;max-height:120px;outline:none}
.composer textarea:focus{border-color:var(--accent)}
.snipbox{position:absolute;bottom:calc(100% + 4px);left:12px;right:12px;background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md);box-shadow:var(--float);overflow:hidden;z-index:8;display:none}
.sniprow{padding:8px 12px;cursor:pointer;border-bottom:.5px solid var(--divider)}
.sniprow:last-child{border-bottom:none}
.sniprow:hover{background:var(--surface-2)}
.sniprow b{font-size:12.5px;display:block}
.sniprow span{font-size:12px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snoozewrap{position:relative}
.snoozemenu{position:absolute;top:calc(100% + 5px);right:0;background:var(--surface);border:.5px solid var(--border);border-radius:10px;box-shadow:var(--float);z-index:9;display:none;min-width:150px;overflow:hidden}
.snoozemenu button{display:block;width:100%;text-align:left;border:none;background:none;color:var(--text);padding:9px 13px;font-size:13px;white-space:nowrap}
.snoozemenu button:hover{background:var(--surface-2)}
.alarmcard{padding:0;overflow:hidden;border-color:var(--danger);margin-bottom:16px}
.alarmcard .ahead{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:.5px solid var(--divider);font-weight:650;color:var(--danger);font-size:14px}

/* refresh spinner */
@keyframes rot360{to{transform:rotate(360deg)}}
.iconbtn.spin .ic{animation:rot360 .9s linear infinite}

/* ===== command palette ===== */
kbd{font-family:inherit;font-size:11px;line-height:1;color:var(--muted);background:var(--surface-2);border:.5px solid var(--border);border-radius:5px;padding:3px 5px}
#palette{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(3px);display:none;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
#palette.on{display:flex}
.palbox{width:min(600px,100%);background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md);box-shadow:var(--float);overflow:hidden;animation:palin .14s var(--ease)}
@keyframes palin{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.palhead{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:.5px solid var(--divider)}
.palhead input{flex:1;border:none;background:none;color:var(--text);font-size:15.5px;outline:none;padding:0;font-family:inherit}
#palresults{max-height:min(52vh,420px);overflow-y:auto;padding:6px}
.palsec{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);padding:10px 10px 5px}
.palitem{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer}
.palitem .palic{color:var(--muted);flex:0 0 auto;display:flex}
.palitem .pallabel{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palitem .palsub{margin-left:auto;font-size:12px;color:var(--faint);white-space:nowrap;padding-left:10px}
.palitem.on{background:var(--surface-2)}
.palitem.on .palic{color:var(--accent)}
.palempty{padding:26px;text-align:center;color:var(--faint);font-size:13.5px}

/* ===== snooze-to-date popover (fupop) ===== */
#fupop{position:fixed;inset:0;z-index:70;display:none}
#fupop.on{display:block}
.fuppanel{position:fixed;width:min(232px,calc(100vw - 32px));padding:10px;background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md);box-shadow:var(--float)}
.fuprow{display:flex;gap:6px;margin-bottom:8px}
.fuprow button{flex:1;font-size:12.5px;font-weight:600;padding:8px 4px;border-radius:7px;border:.5px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer}
.fuprow button:hover{border-color:var(--muted)}
.fupdate{width:100%;padding:8px;border:.5px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);font:inherit;font-size:13px}

/* ===== notification bell ===== */
.bellwrap{position:relative;display:inline-flex}
.belldot{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);pointer-events:none}
#notif{position:fixed;inset:0;z-index:70;display:none}
#notif.on{display:block}
.notifpanel{position:absolute;top:64px;right:16px;width:min(380px,calc(100vw - 32px));max-height:min(70vh,540px);overflow-y:auto;background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md);box-shadow:var(--float);animation:palin .14s var(--ease)}
.notifhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:.5px solid var(--border);font-weight:650;font-size:14.5px}
.notifsec{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);padding:12px 16px 5px}
.notifitem{display:flex;align-items:center;gap:11px;padding:9px 16px;cursor:pointer}
.notifitem:hover{background:var(--surface-2)}
.notifitem .ni-ic{width:30px;height:30px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--muted)}
.notifitem .ni-b{min-width:0}
.notifitem .ni-t{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notifitem .ni-s{font-size:12px;color:var(--faint)}
.notifempty{padding:30px 16px;text-align:center;color:var(--faint);font-size:13.5px}

/* ===== next-step presets ===== */
.nsbtn{display:flex;width:100%;align-items:center;gap:9px;border:.5px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:var(--r-sm);padding:10px 12px;font-size:13.5px;font-weight:600;margin-bottom:8px;text-align:left}
.nsbtn:hover{border-color:var(--muted)}

/* ===== ads screen ===== */
.adsgrid{display:grid;grid-template-columns:1fr;gap:12px}
.ad-paused{opacity:.62}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 3px}
.stat .l{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.03em}
.stat .v{font-size:17px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.adrec{display:flex;gap:9px;align-items:flex-start;background:var(--warn-soft);border:.5px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:var(--r-sm);padding:11px 12px;font-size:13.5px;line-height:1.45}
.adrec .ic{color:var(--warn);flex:0 0 auto;margin-top:1px}
.rec-actions{display:flex;gap:8px;margin-top:11px}
@media(min-width:1024px){.adsgrid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}}

/* ===== insights ===== */
.inscard{margin-bottom:14px}
.instable{min-width:0}
.instable th:first-child,.instable td:first-child{font-weight:600}
.inskpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.inskpi{background:var(--surface-2);border:.5px solid var(--border);border-radius:var(--r-sm);padding:11px 12px}
.inskpi .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.inskpi .v{font-size:20px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media(max-width:759px){
  .instable{display:block;min-width:0}
  .instable thead{display:none}
  .instable tbody,.instable tr,.instable td{display:block;width:100%}
  .instable tr{border-bottom:.5px solid var(--border);padding:9px 14px}
  .instable tr:last-child{border-bottom:none}
  .instable td{border:none;padding:2px 0;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
  .instable td::before{content:attr(data-l);color:var(--muted);font-size:12px;flex:0 0 auto}
  .instable td:first-child::before{display:none}
  .instable td:first-child{font-size:14.5px;padding-bottom:4px}
}

/* ===== dashboard grids ===== */
.dashgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.dashgrid{grid-template-columns:1fr}}

/* ===== FAB ===== */
#fab{display:none;position:fixed;right:16px;bottom:calc(74px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;border:none;background:var(--accent);color:var(--accent-ink);align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.35);z-index:35}
#fab .ic{width:24px;height:24px}
#fab.off{display:none!important}

/* ===== mobile (<1024) ===== */
@media(max-width:1023px){
  aside#sidebar{display:none}
  main{margin-left:0;padding:14px 15px 92px}
  header#mobilebar{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 15px 12px;position:sticky;top:0;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(20px) saturate(180%);z-index:20;border-bottom:.5px solid var(--border)}
  header#mobilebar .logo{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:800}
  header#mobilebar b{font-size:15px}
  nav#tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(20px) saturate(180%);border-top:.5px solid var(--border);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
  nav#tabs button{flex:1;border:none;background:none;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;font-size:10.5px;font-weight:600;position:relative}
  nav#tabs button.on{color:var(--accent)}
  nav#tabs .badge{position:absolute;top:5px;margin-left:16px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;border-radius:8px;min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;padding:0 3px}
  .pagehead h1{font-size:20px}
  .dcols{grid-template-columns:1fr}
  .dflip>div:last-child{order:-1}
  input,select,textarea{font-size:16px!important} /* ≥16px kills iOS focus-zoom */
  .pagehead{position:sticky;top:var(--mbh,55px);z-index:15;background:var(--bg);margin:0 -15px 14px;padding:8px 15px;transition:padding .15s var(--ease)}
  .pagehead h1{transition:font-size .15s var(--ease)}
  body.scrolled .pagehead{padding:5px 15px;box-shadow:0 1px 0 var(--divider)}
  body.scrolled .pagehead h1{font-size:16.5px}
  /* touch board: one stage at a time + chip switcher */
  .stagechips{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .stagechips::-webkit-scrollbar{display:none}
  .stagechip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:.5px solid var(--border);background:var(--surface);color:var(--muted);border-radius:var(--r-pill);padding:8px 14px;font-size:13px;font-weight:600}
  .stagechip .ct{font-size:11.5px;opacity:.75;font-variant-numeric:tabular-nums}
  .stagechip.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}
  .board.mob{display:block;overflow:visible;padding-bottom:0}
  .board.mob .col{max-height:none;flex-basis:auto}
  .board.mob .colbody{overflow-y:visible}
  .board.mob .colhead{position:static}
  #fab{display:flex}
  .desk-only{display:none!important}
  .notifpanel{top:calc(var(--mbh,55px) + 8px)}
}
@media(min-width:1024px){nav#tabs{display:none}#fab{display:none}}

/* comfortable touch targets */
@media(pointer:coarse){
  .btn-sm,.stagebtn,.qbtn,.stagechip{min-height:44px}
  .iconbtn{width:44px;height:44px}
  .taskacts{gap:16px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== round-2: work mode ===== */
#workmode{position:fixed;inset:0;z-index:85;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px;padding-top:calc(24px + env(safe-area-inset-top))}
.workcard{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;width:min(560px,100%)}
.wname{font-size:28px;font-weight:750;letter-spacing:-.02em}
.wsubj{font-size:16px;color:var(--muted)}
.wacts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.wacts .btn{min-height:52px;padding:12px 20px;font-size:15px;text-decoration:none}

/* ===== round-2: capacity heatmap ===== */
.heatgrid{display:grid;grid-template-columns:36px repeat(17,minmax(11px,1fr));gap:2px}
.hm-cell{height:16px;border-radius:3px;background:var(--surface-2)}
.hm-h{background:none;font-size:9.5px;color:var(--faint);display:flex;align-items:center;justify-content:center;white-space:nowrap}
.hm-empty{opacity:.4}

/* ===== round-2: inline code ===== */
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--surface-2);border:.5px solid var(--border);border-radius:5px;padding:1px 5px;color:var(--text)}

/* ===== tier-1: goal pacing ===== */
.pacewrap{position:relative;overflow:visible}
.pacemark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--text);opacity:.55;border-radius:1px;transform:translateX(-1px)}

/* ===== tier-1: duplicates ===== */
.dupegrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ===== tier-1: greet list checklist card ===== */
.greetcard{box-shadow:inset 3px 0 0 var(--accent)}
.gdot{width:14px;height:14px;border:1.5px solid var(--border-2);border-radius:4px;flex:none}

/* ===== round-4: content ROI rows ===== */
.crow{padding:12px 2px;border-bottom:.5px solid var(--divider)}
.crow:last-child{border-bottom:none}
.crow.hot{box-shadow:inset 3px 0 0 var(--accent);padding-left:12px;background:color-mix(in srgb,var(--accent) 4%,transparent)}
.crgrid{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:9px;align-items:stretch}
.crg .l{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.crg b{font-size:15px;font-weight:600}
.crsep{width:.5px;background:var(--border-2);align-self:stretch;margin:0 2px}

/* ===== round-4: searchable picker list (event register) ===== */
.pickerlist{border:.5px solid var(--border);border-radius:var(--r-sm);margin-top:6px;max-height:210px;overflow-y:auto;background:var(--surface)}

/* ===== round-4: danger button in morelist ===== */
.morelist button .ic{flex:0 0 auto}

/* ===== round-5: loyalty tier chips ===== */
.chip.gold{background:color-mix(in srgb,#d4a017 16%,transparent);color:#c99a12}
.chip.silver{background:color-mix(in srgb,#9aa4b2 18%,transparent);color:#8d97a5}
.chip.bronze{background:color-mix(in srgb,#b0703c 16%,transparent);color:#bd7a43}
[data-theme="light"] .chip.gold{color:#8a6a0c}
[data-theme="light"] .chip.silver{color:#5f6a78}
[data-theme="light"] .chip.bronze{color:#8a5327}

/* ===== round-5: points mini-form + AI summary ===== */
.ptin{padding:8px 10px;border:.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font:inherit;font-size:14px;outline:none}
.ptin:focus{border-color:var(--accent)}
.aisum{background:var(--surface-2);border:.5px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:12px}

/* ===== round-5: kiosk mode (front-desk greeting board) ===== */
body.kiosk{padding:0}
#kiosk{min-height:100vh;background:var(--bg);padding:22px 26px calc(22px + env(safe-area-inset-bottom))}
.kh{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.kh h1{margin:0;font-size:26px;letter-spacing:-.02em}
.klogo{width:46px;height:46px;border-radius:13px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;flex:none}
.kclock{margin-left:auto;font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.kcol{background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-lg);padding:16px}
.kcol h2{margin:0;font-size:21px;letter-spacing:-.01em}
.khour{font-size:14px;color:var(--muted);margin:2px 0 12px}
.kcard2{background:var(--surface-2);border:.5px solid var(--border);border-radius:var(--r-md);padding:14px;margin-bottom:10px}
.kcard2:last-child{margin-bottom:0}
.kcard2.first{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.knm2{font-size:22px;font-weight:700;letter-spacing:-.01em}
.kmeta2{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center}
.kmeta2 .chip{font-size:13px;padding:3px 10px}
.kmeta2 .tag{font-size:13px}
.kfirst{color:var(--accent);font-weight:650;font-size:15px;margin-top:8px}

/* ---------- language toggle (EN | 中文) ---------- */
.seg.langseg{padding:2px}
.seg.langseg button{font-size:12px;padding:4px 10px;line-height:1.4}
.sb-lang:empty{display:none}
#login-lang{margin-top:6px}
/* one-tap toggle showing the TARGET language — glyph, not icon, so it needs its own
   type treatment; sized to match .iconbtn exactly so the header reads as one row */
.langbtn{font-weight:700;font-size:14px;line-height:1;letter-spacing:.01em}
[data-lang="zh"] .langbtn{font-size:12.5px}   /* "EN" is wider than 中 */
[data-lang="zh"] .navbtn span,[data-lang="zh"] #tabs button span{letter-spacing:.02em}
@media (max-width:1023px){
  header#mobilebar #mb-scope{max-width:112px;min-width:0}
  header#mobilebar .langbtn{width:38px;height:38px;flex:none}
}
@media (max-width:430px){ header#mobilebar b{display:none} }
/* 320px: the tightest real device. Shed the wordmark and tighten the gap rather
   than let the bar wrap or push the theme button off the edge. */
@media (max-width:360px){
  header#mobilebar{gap:7px;padding-left:11px;padding-right:11px}
  header#mobilebar #mb-scope{max-width:82px}
  header#mobilebar .iconbtn{width:36px;height:36px}
  header#mobilebar .langbtn{width:32px;height:36px}
}

/* ---------- ⓘ hints on metric labels ---------- */
.hint{margin-left:4px;opacity:.5;cursor:help;font-size:11px;font-weight:500}
.hint:hover{opacity:.9}

/* ---------- pipeline filter chips (source · Glofox lead state) ---------- */
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.fgrp{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fgl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.fchip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r-pill);border:.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap;transition:var(--dur-fast)}
.fchip:hover{color:var(--text);border-color:var(--muted)}
.fchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.fchip .ct{font-variant-numeric:tabular-nums;opacity:.65;font-weight:700}
.fchip.on .ct{opacity:.8}
.fclear{background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:650;padding:4px 2px}

/* ---------- call-outcome bar ----------
   Sits above the mobile tab bar, never over it. Non-modal on purpose: no scrim, no
   focus trap, nothing behind it is blocked — it is an offer, not a question. */
.callbar{position:fixed;left:50%;transform:translateX(-50%) translateY(24px);bottom:calc(62px + env(safe-area-inset-bottom) + 14px);
  z-index:78;display:flex;flex-direction:column;gap:9px;padding:12px 14px;width:min(560px,calc(100vw - 24px));
  background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-md,14px);box-shadow:var(--float);
  opacity:0;transition:.22s var(--ease)}
.callbar.on{opacity:1;transform:translateX(-50%) translateY(0)}
.callbar .cb-h{display:flex;align-items:center;gap:8px}
.callbar .cb-t{flex:1;min-width:0;font-size:12.5px;color:var(--muted);font-weight:600}
.callbar .cb-r{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.callbar .cb-c{padding:7px 12px;border-radius:var(--r-pill);border:.5px solid var(--border);background:var(--surface-2);
  color:var(--text);font-size:13px;font-weight:600;white-space:nowrap;transition:var(--dur-fast)}
.callbar .cb-c:hover{border-color:var(--accent);color:var(--accent)}
.callbar .cb-c:active{transform:scale(.96)}
.callbar .cb-x{background:none;border:none;color:var(--faint);font-size:14px;padding:4px 6px;line-height:1;flex:none}
.callbar .cb-x:hover{color:var(--text)}
@media (min-width:1024px){ .callbar{bottom:22px} }

/* ============================================================
   v2 overhaul: bands, command-centre home, triage today,
   filterable people, class rosters, explainer cards
   ============================================================ */

/* --- activity bands: one vocabulary, one colour each. 'fading' is amber
   (an opportunity worth calling), deliberately never red (an error). --- */
.chip.band-core{background:var(--accent-soft);color:var(--accent)}
.chip.band-regular{background:var(--info-soft);color:var(--info)}
.chip.band-occasional{background:var(--surface-2);color:var(--muted)}
.chip.band-fading{background:var(--warn-soft);color:var(--warn)}
.chip.band-dormant,.chip.band-never,.chip.band-unknown{background:var(--surface-2);color:var(--faint)}

/* --- home: numbers you can tap through to the list behind them --- */
.kpi.clickable{cursor:pointer;position:relative;transition:border-color .12s var(--ease),background .12s var(--ease)}
.kpi.clickable:hover{border-color:var(--muted);background:var(--surface-2)}
.kpi .kgo{position:absolute;top:12px;right:12px;color:var(--faint);display:flex}
.kpi.clickable:hover .kgo{color:var(--accent)}
/* --- home: "Do now" rows --- */
.prirow .pridx{flex:0 0 22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.listcard.hero{border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}

/* --- today: collapsed group headers --- */
.grouphead{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--surface);
  border:.5px solid var(--border);border-radius:var(--r-md);padding:11px 14px;margin-bottom:8px;
  font-size:13.5px;color:var(--text);transition:border-color var(--dur-fast)}
.grouphead:hover{border-color:var(--muted)}
.grouphead .ct{font-variant-numeric:tabular-nums;font-weight:700;color:var(--muted)}
.grouphead .cap{margin-left:auto;text-align:right;min-width:0}
.grouphead .gcaret{display:flex;color:var(--faint);transition:transform var(--dur-fast) var(--ease)}
.grouphead.on .gcaret{transform:rotate(90deg)}
.grouphead.stale{border-style:dashed}

/* --- people: bulk bar (the filter is the selection), saved views, last-seen --- */
.bulkbar.people{flex-wrap:wrap;gap:8px;padding:10px 12px}
.bulkbar.people .bulkn{font-variant-numeric:tabular-nums;font-size:15px}
.bulkbar.people .cap{color:color-mix(in srgb,var(--bg) 70%,transparent);font-weight:500}
.bulkbar.people .btn{background:color-mix(in srgb,var(--bg) 14%,transparent);
  border-color:color-mix(in srgb,var(--bg) 34%,transparent);color:var(--bg)}
.bulkbar.people .btn:hover{background:color-mix(in srgb,var(--bg) 24%,transparent)}
.lrow .seen{color:var(--faint)}
.viewbar .vx{margin-left:5px;color:var(--faint);font-size:14px;line-height:1}
.viewbar .vx:hover{color:var(--danger)}

/* --- classes: today's real rosters --- */
.classcard{margin-bottom:12px}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px;margin-top:12px}
.rp{background:var(--surface-2);border:.5px solid var(--border);border-radius:var(--r-sm);
  padding:9px 11px;cursor:pointer;transition:border-color var(--dur-fast);min-width:0}
.rp:hover{border-color:var(--muted)}
.rp.first{border-color:var(--accent)}
.rp .rpn{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp .rpm{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}

/* --- explainer cards (Ads "what is this screen", Insights ⓘ lines) --- */
.card.explain{border-style:dashed}
.explain .exic{color:var(--accent);display:flex;padding-top:2px;flex:0 0 auto}
.exlist{margin:6px 0 0;padding-left:17px;font-size:13px;color:var(--muted);line-height:1.6}
.exlist li{margin-bottom:2px}
.inshelp{font-size:12.5px;color:var(--muted);margin-bottom:12px;line-height:1.5}

@media(max-width:640px){
  .roster{grid-template-columns:1fr 1fr}
  .grouphead .cap{display:none} /* the count carries it; the sentence wraps badly */
}