/* Orbit design system — warm, calm, light. Phone-first: every rule below the
   760px breakpoint is a first-class layout, not an afterthought. */
:root {
  --bg:#f4f4f6; --soft:#f7f7f9; --card:#fff; --surface:#fff; --line:#e7e7ec;
  --text:#1d1d24; --muted:#6b6b78; --faint:#9a9aa6;
  --accent:#e0573a;
  --primary:#232323; --primary-ink:#fff;
  --sent:#7f95ee; --replies:#f0ae3b; --good:#1f9d6b; --warn:#d9822b; --bad:#c9453a;
  --r-card:12px; --r-btn:8px; --r-search:999px;
  --shadow:0 1px 2px rgba(20,20,40,.05), 0 6px 18px rgba(20,20,40,.04);
  --h1-size:30px; --h1-weight:600; --h1-track:-.02em;
  --serif:'Newsreader'; --em-weight:700; --xadj:.56;
  --tabbar-h:64px;
}
body { --accent-soft:color-mix(in srgb, var(--accent) 13%, var(--surface)); }   /* on body so it follows the user's accent AND the theme */
body[data-tone="warm"] {
  --bg:#f7f5f1; --soft:#faf8f5; --line:#ece7df;
  --text:#232323; --muted:#76716a; --faint:#a39d94;
  --sent:#9db4dc; --replies:var(--accent);
  --shadow:0 1px 2px rgba(60,40,20,.04), 0 8px 24px rgba(60,40,20,.04);
  --h1-size:clamp(34px, 4.2vw, 52px); --h1-weight:330; --h1-track:-.04em;
}
/* user customisation — declared after the tone so it wins */
body[data-btn="dark"]   { --primary:#232323; }
body[data-btn="accent"] { --primary:var(--accent); }
body[data-corners="sharp"] { --r-card:8px;  --r-btn:6px;   --r-search:10px; }
body[data-corners="soft"]  { --r-card:14px; --r-btn:10px;  --r-search:14px; }
body[data-corners="round"] { --r-card:20px; --r-btn:999px; --r-search:999px; }
body[data-weight="regular"] { --em-weight:400; }
body[data-weight="medium"]  { --em-weight:550; }
body[data-weight="bold"]    { --em-weight:700; }
body[data-size="s"] { --xadj:.50; }
body[data-size="m"] { --xadj:.56; }
body[data-size="l"] { --xadj:.62; }
body.fixedw { --em-weight:400 !important; }

/* ── dark theme: warm charcoal, not black. "auto" follows the device. ── */
body[data-theme="dark"] { --bg:#211f1d; --soft:#292624; --card:#2d2a28; --surface:#2d2a28; --line:#3d3935;
  --text:#f0ece6; --muted:#aaa39a; --faint:#7e776e; --sent:#7f97c4; --good:#3fbf8c; --warn:#e8a04a; --bad:#e2675b;
  --primary:#f0ece6; --primary-ink:#211f1d; --shadow:0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.22); color-scheme:dark; }
body[data-theme="dark"][data-btn="accent"] { --primary:var(--accent); --primary-ink:#fff; }
@media (prefers-color-scheme:dark) {
  body[data-theme="auto"] { --bg:#211f1d; --soft:#292624; --card:#2d2a28; --surface:#2d2a28; --line:#3d3935;
  --text:#f0ece6; --muted:#aaa39a; --faint:#7e776e; --sent:#7f97c4; --good:#3fbf8c; --warn:#e8a04a; --bad:#e2675b;
  --primary:#f0ece6; --primary-ink:#211f1d; --shadow:0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.22); color-scheme:dark; }
  body[data-theme="auto"][data-btn="accent"] { --primary:var(--accent); --primary-ink:#fff; }
}

* { box-sizing:border-box; margin:0; }
html { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; }
body { font:15px/1.45 Inter,system-ui,sans-serif; color:var(--text); background:var(--bg); min-height:100vh; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
[hidden] { display:none !important; }
svg.i { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ── brand ── */
.brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px; letter-spacing:-.015em; }
.brand svg.mark { width:26px; height:26px; color:var(--text); }

/* ── desktop navigation ── */
.topnav { display:none; background:var(--surface); border-bottom:1px solid var(--line); height:64px; position:relative; z-index:20; }
.topnav .in { max-width:1180px; margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; gap:34px; }
.topnav nav { display:flex; gap:26px; flex:1; height:100%; }
.topnav nav > a, .topnav .dd > button { display:flex; align-items:center; height:100%; padding:0; font-size:15px; background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; }
.topnav nav a.on, .topnav .dd.on > button { border-bottom-color:var(--accent); font-weight:500; }
.topnav .chev { font-size:10px; color:var(--faint); margin-left:4px; }
.dd { position:relative; height:100%; }
.dd .menu { display:none; position:absolute; top:calc(100% - 6px); left:-14px; min-width:210px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px rgba(40,30,20,.12); padding:6px; }
.dd:hover .menu, .dd:focus-within .menu { display:block; }
.dd .menu a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; font-size:14.5px; color:var(--text); }
.dd .menu a:hover { background:var(--soft); }
.dd .menu a.on { color:var(--accent); background:var(--accent-soft); font-weight:500; }
.tools { display:flex; align-items:center; gap:16px; }
.tools a.on { color:var(--accent); }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--text); color:var(--surface); display:grid; place-items:center; font-size:13px; font-weight:600; flex:none; }

.sidenav { display:none; position:fixed; inset:0 auto 0 0; width:236px; background:var(--surface); border-right:1px solid var(--line); padding:20px 14px; flex-direction:column; overflow-y:auto; z-index:20; }
.sidenav .brand { padding:4px 10px 18px; }
.sidenav .grp { padding:16px 12px 6px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.sidenav a.item { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; color:var(--muted); font-size:14.5px; }
.sidenav a.item.on { background:var(--accent-soft); color:var(--accent); font-weight:500; }
.sidenav a.item:hover:not(.on) { background:var(--soft); color:var(--text); }
.sidenav .grow { flex:1; min-height:12px; }
.sidenav .me { display:flex; align-items:center; gap:10px; padding:10px; border-top:1px solid var(--line); margin-top:10px; font-size:14px; }
body[data-nav="top"]  .topnav  { display:block; }
body[data-nav="side"] .sidenav { display:flex; }

/* ── phone chrome: slim header + bottom tab bar + "More" sheet ── */
.mobilebar, .tabbar, .sheet-wrap { display:none; }

/* ── page frame ── */
main { max-width:1180px; margin:0 auto; padding:34px 24px 80px; }
body[data-nav="side"] main { max-width:1100px; margin-left:calc(236px + (100vw - 236px - 1100px) / 2); }
@media (max-width:1400px) { body[data-nav="side"] main { margin-left:236px; } }

.head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
h1 { font-size:var(--h1-size); font-weight:var(--h1-weight); letter-spacing:var(--h1-track); line-height:1.05; }
h1.page { font-size:28px; font-weight:500; letter-spacing:-.02em; }
h1 em { font-style:normal; }
body[data-greet="color"] h1 em { color:var(--accent); font-weight:var(--em-weight); }
body[data-greet="serif"] h1 em { font-family:var(--serif),Georgia,serif; font-style:italic; font-weight:var(--em-weight); color:var(--accent); letter-spacing:-.012em; font-size-adjust:var(--xadj); line-height:.8; padding-left:.04em; }
@supports not (font-size-adjust:.5) { body[data-greet="serif"] h1 em { font-size:1.15em; } }
.sub { color:var(--muted); margin-top:8px; }
.actions { display:flex; gap:12px; }
.btn { white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:var(--r-btn); font-size:15px; font-weight:500; border:1.5px solid var(--text); background:var(--surface); color:var(--text); cursor:pointer; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }   /* placeholder actions never look live */
.btn.primary { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.btn.small { font-size:14px; padding:9px 16px; border-width:1px; border-color:var(--line); }

.grid { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:20px; align-items:start; }
.col { display:grid; gap:20px; min-width:0; }
.search { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border-radius:var(--r-search); padding:17px 24px; box-shadow:var(--shadow); color:var(--faint); }
.search span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search kbd { font:12px Inter; color:var(--faint); border:1px solid var(--line); border-radius:6px; padding:2px 7px; flex:none; }

.card { background:var(--card); border-radius:var(--r-card); box-shadow:var(--shadow); overflow:hidden; }
.card .body { padding:24px 26px; }
.card h2 { font-size:19px; font-weight:500; letter-spacing:-.01em; }
.card .foot { background:var(--soft); border-top:1px solid var(--line); padding:14px 26px; display:flex; justify-content:flex-end; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.seg { display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; font-size:13.5px; }
.seg span { padding:6px 14px; color:var(--muted); }
.seg span.on { background:var(--accent-soft); color:var(--accent); font-weight:500; }

.chart { width:100%; height:auto; display:block; }
.totals { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; padding:6px 0 4px; }
.totals b { display:block; font-size:26px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.totals span { color:var(--muted); font-size:14px; }
.totals i { display:block; width:34px; height:3px; border-radius:3px; margin:8px auto 0; }

.rows { display:grid; }
.row { display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line); min-width:0; }
.row:first-child { border-top:0; }
.row .ic { color:var(--muted); }
.row .lbl { flex:1; min-width:0; }
.row .lbl > span, .row .lbl { overflow-wrap:anywhere; }
.row .lbl small { display:block; color:var(--faint); font-size:13px; margin-top:1px; }
.row .val { font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap; }
.row .val.link { color:var(--accent); }
.row .when { color:var(--faint); font-weight:400; font-variant-numeric:tabular-nums; }
.dot { width:8px; height:8px; border-radius:50%; flex:none; }
.tag { font-size:12.5px; color:var(--accent); background:var(--accent-soft); padding:2px 9px; border-radius:999px; font-weight:500; white-space:nowrap; }
.tag.quiet { color:var(--muted); background:var(--soft); border:1px solid var(--line); font-weight:400; }
.num { font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; min-width:34px; text-align:right; white-space:nowrap; }
.num small { font-size:12px; font-weight:400; color:var(--faint); margin-left:3px; letter-spacing:.04em; text-transform:uppercase; }

/* ── settings ── */
.set-grid { display:grid; grid-template-columns:210px minmax(0,1fr); gap:34px; align-items:start; }
.subnav { display:grid; gap:2px; position:sticky; top:20px; }
.subnav a { padding:9px 14px; border-radius:var(--r-btn); color:var(--muted); font-size:14.5px; }
.subnav a.on { background:var(--accent-soft); color:var(--accent); font-weight:500; }
.subnav a:hover:not(.on) { background:var(--soft); color:var(--text); }
.field { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:18px 0; border-top:1px solid var(--line); }
.field:first-of-type { border-top:0; padding-top:4px; }
.field .t { font-weight:500; }
.field .d { color:var(--faint); font-size:13px; margin-top:2px; max-width:340px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.chip { border:1px solid var(--line); background:var(--surface); color:var(--text); padding:7px 14px; border-radius:var(--r-btn); cursor:pointer; font-size:14px; }
.chip.on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:500; }
.swatches { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.swatch { width:28px; height:28px; border-radius:50%; border:0; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch.on { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.swatches input[type=color] { width:32px; height:32px; padding:0; border:0; background:none; cursor:pointer; }
.fonts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:6px 0 4px; }
.ftile { text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:var(--r-card); padding:14px 16px; cursor:pointer; }
.ftile.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.ftile .smp { font-size:25px; font-weight:330; letter-spacing:-.035em; line-height:1.15; white-space:nowrap; overflow:hidden; }
.ftile .smp em { font-family:var(--f),Georgia,serif; font-style:italic; font-weight:var(--em-weight); color:var(--accent); font-size-adjust:var(--xadj); letter-spacing:-.012em; padding-left:.04em; }
.ftile.fx .smp em { font-weight:400; }
.ftile .nm { color:var(--muted); font-size:12.5px; margin-top:6px; }
.preview { background:var(--bg); border-radius:calc(var(--r-card) - 4px); padding:26px 28px; border:1px solid var(--line); }
.preview .row2 { display:flex; gap:10px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.empty { display:grid; place-items:center; text-align:center; gap:12px; padding:64px 20px; color:var(--muted); }
.empty h2 { color:var(--text); }

/* hover only where a real pointer exists (never sticky on touch) */
@media (hover:hover) {
  .mitem:hover:not(.on) { background:var(--soft); }
  .chip:hover, .ftile:hover { border-color:#cfc8bd; }
  .sidenav a.item:hover:not(.on) { background:var(--soft); }
}

/* ── inbox ── */
:root { --t-hot:#d6452f; --t-warm:#e39a2d; --t-cold:#7f95b8; --t-notlead:#a39d94; }
.inbox-head { margin-bottom:18px; }
.inbox { display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr); gap:20px; align-items:start; }
.inbox-list { position:sticky; top:16px; max-height:calc(100vh - 32px); display:flex; flex-direction:column; }
.isearch { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); color:var(--faint); }
.isearch input { flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; color:var(--text); }
.ifilters { display:flex; gap:6px; padding:12px 14px; overflow-x:auto; border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch; }
.ifilters { scrollbar-width:none; }
.ifilters::-webkit-scrollbar { display:none; }
.ifilters a { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:6px 12px; border-radius:999px; font-size:13.5px; color:var(--muted); border:1px solid var(--line); background:var(--surface); }
.ifilters a b { font-weight:500; font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums; }
.ifilters a.on { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.ifilters a.on b { color:var(--accent); }
.mlist { overflow-y:auto; }
.mitem { display:flex; gap:12px; padding:14px 16px; border-top:1px solid var(--line); border-left:3px solid transparent; transition:background .15s, border-color .15s; }
.mitem[hidden] { display:none; }

.mitem.on { background:var(--soft); border-left-color:var(--accent); }
.mav { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none; font-weight:600; font-size:14px; color:#fff; background:var(--t-notlead); }
.mav.big { width:46px; height:46px; font-size:18px; }
.mav.t-hot { background:var(--t-hot); } .mav.t-warm { background:var(--t-warm); } .mav.t-cold { background:var(--t-cold); } .mav.t-notlead { background:var(--t-notlead); }
.mbody { min-width:0; display:grid; gap:2px; flex:1; }
.mtop { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.mname { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mitem.unread .mname { font-weight:700; }
.mitem.unread .mname::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:7px; vertical-align:1px; }
.mwhen { color:var(--faint); font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.mco { color:var(--muted); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msnip { color:var(--faint); font-size:13.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.temp-chip { display:inline-flex; align-items:center; gap:6px; margin-top:6px; width:fit-content; font-size:12.5px; font-weight:500; padding:2px 10px 2px 8px; border-radius:999px; background:var(--soft); border:1px solid var(--line); color:var(--text); white-space:nowrap; }
.tdot { width:8px; height:8px; border-radius:50%; background:var(--t-notlead); }
.t-hot .tdot, .temp-chip.t-hot .tdot { background:var(--t-hot); } .temp-chip.t-warm .tdot { background:var(--t-warm); }
.temp-chip.t-cold .tdot { background:var(--t-cold); } .temp-chip.t-notlead .tdot { background:var(--t-notlead); }
.empty { padding:26px 18px; color:var(--faint); text-align:center; }

.inbox-detail { display:grid; gap:16px; min-width:0; align-content:start; transition:opacity .15s; }
.inbox-detail.loading { opacity:.5; pointer-events:none; }
.inbox-detail.enter > .card, .inbox-detail.enter > .iback, .inbox-detail.enter > .samplenote { animation:irise .24s cubic-bezier(.2,.7,.2,1) both; }
.inbox-detail.enter > .card:nth-of-type(2) { animation-delay:.04s; } .inbox-detail.enter > .card:nth-of-type(3) { animation-delay:.08s; }
@keyframes irise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes islide { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }
.mlist { overscroll-behavior:contain; margin-top:-1px; }   /* first row's top border sits on the filter bar's bottom border */
.iback { display:none; align-items:center; gap:4px; color:var(--muted); font-weight:500; min-height:44px; }
.iback svg.i { transform:rotate(180deg); }
.dhead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dwho { flex:1; min-width:0; }
.dwho h2 { font-size:20px; }
.dwho p { color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.dmeta { color:var(--muted); font-size:14px; margin-top:14px; }
.dmeta b { font-weight:500; color:var(--text); }
.why { margin-top:18px; padding:16px 18px; background:var(--soft); border:1px solid var(--line); border-radius:var(--r-card); display:grid; gap:12px; }
.why-h { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:500; display:flex; gap:10px; align-items:center; }
.why ul { list-style:none; padding:0; display:grid; gap:6px; }
.why li { display:flex; gap:10px; align-items:baseline; }
.why li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; transform:translateY(-2px); }
.found { display:grid; gap:6px; margin:0; }
.found dd { margin:0; display:flex; gap:12px; align-items:baseline; overflow-wrap:anywhere; }
.found dd span { color:var(--muted); min-width:110px; flex:none; font-size:14px; }
.markas { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--muted); font-size:14px; }
.sec-h { font-size:17px; font-weight:500; margin-bottom:12px; }
.thread { display:grid; gap:12px; }
.bubble { max-width:88%; padding:12px 14px; border-radius:14px; background:var(--soft); border:1px solid var(--line); }
.bubble.you { justify-self:end; background:var(--accent-soft); border-color:transparent; }
.bubble p { white-space:pre-wrap; overflow-wrap:anywhere; }
.bmeta { font-size:12.5px; color:var(--faint); margin-bottom:4px; }
.hint { color:var(--faint); font-size:13.5px; }
.samplenote { text-align:center; }
.draft { width:100%; margin-top:12px; padding:14px; border:1px solid var(--line); border-radius:var(--r-card); font:inherit; line-height:1.5; resize:vertical; background:var(--surface); color:var(--text); }
.dactions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.dactions .btn[disabled] { opacity:.45; cursor:not-allowed; }
.notice { padding:14px 16px; background:var(--soft); border:1px solid var(--line); border-radius:var(--r-card); color:var(--muted); }

@media (min-width:761px) { .ifilters { flex-wrap:wrap; overflow-x:visible; } }
@media (max-width:1000px) {
  .inbox { grid-template-columns:minmax(0,1fr); }
  .inbox-list { position:static; max-height:none; }
  .inbox[data-mode="list"] .inbox-detail { display:none; }
  .inbox[data-mode="detail"] .inbox-list { display:none; }
  body:has(.inbox[data-mode="detail"]) .inbox-head { display:none; }
  .iback { display:inline-flex; }
  .inbox[data-mode="detail"] .inbox-detail { animation:islide .26s cubic-bezier(.2,.7,.2,1) both; }
  .mitem.on { background:none; border-left-color:transparent; }   /* no pre-selected row on single-pane layouts */
}
@media (max-width:760px) {
  .mitem { padding:14px 14px; min-height:44px; }
  .bubble { max-width:94%; }
  .dactions .btn { flex:1 1 100%; }
  .found dd { flex-direction:column; gap:0; }
  .why { padding:14px; }
}

/* ── campaigns ── */
.tabs { display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.tabs a { padding:10px 16px; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; min-height:44px; display:flex; align-items:center; }
.tabs a.on { color:var(--text); border-bottom-color:var(--accent); font-weight:500; }
.status { display:inline-block; font-size:12.5px; font-weight:500; padding:2px 10px; border-radius:999px; background:var(--soft); border:1px solid var(--line); color:var(--muted); }
.status.s-running { color:var(--good); background:color-mix(in srgb, var(--good) 10%, var(--surface)); border-color:transparent; }
.status.s-paused { color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color:transparent; }
.clist { overflow:hidden; }
.chead, .crow { display:grid; grid-template-columns:minmax(0,2.2fr) repeat(4,minmax(0,.8fr)); gap:16px; align-items:center; padding:16px 24px; }
.chead { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); background:var(--soft); border-bottom:1px solid var(--line); padding-top:12px; padding-bottom:12px; }
.chead span:not(:first-child), .cstat { text-align:right; }
.crow { border-top:1px solid var(--line); }
.chead + .crow { border-top:0; }
.cname { display:grid; gap:2px; min-width:0; }
.cname b { font-weight:500; font-size:16px; }
.cname small { color:var(--faint); font-size:13.5px; }
.cflags { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.cstat span { display:none; }
.cstat b { font-weight:500; font-variant-numeric:tabular-nums; }
.tgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.tsubj { font-size:14px; margin:10px 0 0; }
.tsubj span { color:var(--faint); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-right:8px; }
.tbody { margin-top:12px; padding:14px; background:var(--soft); border:1px solid var(--line); border-radius:var(--r-card); font:14px/1.55 Inter,system-ui,sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); }
.kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.kpi { padding:16px 18px; }
.kpi span { color:var(--muted); font-size:13.5px; display:block; }
.kpi b { font-size:26px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.steps { list-style:none; padding:0; display:grid; gap:18px; }
.steps li { display:flex; gap:14px; }
.steps small { display:block; color:var(--faint); font-size:13.5px; }
.sn { width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:600; font-size:13px; flex:none; }
.abgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.abv { padding:14px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--soft); display:grid; gap:6px; align-content:start; min-width:0; }
.abv.lead { border-color:var(--accent); background:var(--accent-soft); }
.abh { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.abrate { font-size:28px; font-weight:500; letter-spacing:-.02em; margin-top:6px; }
.abv small { color:var(--muted); font-size:13px; }
.bar { height:6px; border-radius:6px; background:var(--line); overflow:hidden; }
.bar i { display:block; height:100%; background:var(--accent); border-radius:6px; }
.iback.shown { display:inline-flex; }
.formcard { max-width:620px; }
.cform { display:grid; gap:18px; }
.cform label { display:grid; gap:6px; font-weight:500; font-size:14px; }
.cform input[type=text], .cform input[type=number], .cform select { padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-btn); font:inherit; background:var(--surface); color:var(--text); width:100%; }
.cform .check { display:flex; gap:12px; align-items:flex-start; font-weight:400; }
.cform .check input { width:20px; height:20px; margin-top:2px; accent-color:var(--accent); }
.cform .check small { display:block; color:var(--faint); font-size:13.5px; }
.cform .btn[disabled] { opacity:.45; cursor:not-allowed; }
@media (max-width:1000px) {
  .kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .split, .tgrid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
  .chead { display:none; }
  .crow { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 8px; padding:16px 18px; }
  .cname { grid-column:1 / -1; }
  .cstat { text-align:left; display:grid; gap:1px; }
  .cstat span { display:block; font-size:12px; color:var(--faint); }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi b { font-size:22px; }
  .abgrid { grid-template-columns:1fr; }
}

/* ── leads ── */
.lbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-bottom:16px; }
.lbar .tabs { margin-bottom:0; border-bottom:0; }
.srcs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.srcs::-webkit-scrollbar { display:none; }
.srcs a { white-space:nowrap; padding:6px 12px; border-radius:999px; font-size:13.5px; color:var(--muted); border:1px solid var(--line); background:var(--surface); }
.srcs a.on { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.stagetabs { display:none; }
.board { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; align-items:start; }
.stage { background:color-mix(in srgb, var(--line) 38%, transparent); border-radius:var(--r-card); padding:12px; display:grid; gap:10px; min-width:0; }
.stage header { display:flex; align-items:baseline; gap:8px; padding:2px 4px 4px; flex-wrap:wrap; }
.stage h2 { font-size:14.5px; font-weight:600; }
.stage .cnt { color:var(--faint); font-size:13px; }
.stage .sum { margin-left:auto; color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.stage .empty { padding:14px 6px; font-size:13.5px; }
.lcard { background:var(--card); border-radius:calc(var(--r-card) - 2px); box-shadow:var(--shadow); padding:14px; display:grid; gap:6px; min-width:0; }
.ltop { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.ltop b { font-weight:600; overflow-wrap:anywhere; }
.ltop .temp-chip { margin-top:0; }
.lco { color:var(--muted); font-size:13.5px; overflow-wrap:anywhere; }
.lmeta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:2px; }
.lval { font-weight:500; font-variant-numeric:tabular-nums; font-size:14px; }
.lage { color:var(--faint); font-size:12.5px; margin-left:auto; }
.lact { margin-top:6px; }
.lact .btn { width:100%; }
.lnext { color:var(--muted); font-size:13.5px; }
.qrow { display:flex; align-items:center; gap:14px; padding:16px 22px; border-top:1px solid var(--line); flex-wrap:wrap; }
.qrow:first-child { border-top:0; }
.qwho { flex:1; min-width:180px; display:grid; gap:1px; }
.qwho small { color:var(--muted); font-size:13.5px; }
.qwho .qwhen { color:var(--accent); }
.qrow .temp-chip { margin-top:0; }
.qact { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width:1180px) { .board { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1000px) { .board { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
  .stagetabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-bottom:12px; -webkit-overflow-scrolling:touch; }
  .stagetabs::-webkit-scrollbar { display:none; }
  .stagetabs button { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:9px 14px; min-height:44px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:14px; cursor:pointer; }
  .stagetabs button b { font-size:12px; color:var(--faint); font-weight:500; }
  .stagetabs button.on { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
  .stagetabs button.on b { color:var(--accent); }
  .board { grid-template-columns:minmax(0,1fr); }
  .board[data-stage] .stage:not([data-stage]) { display:none; }
  .board[data-stage="replied"] .stage:not(.st-replied), .board[data-stage="call"] .stage:not(.st-call), .board[data-stage="proposal"] .stage:not(.st-proposal),
  .board[data-stage="won"] .stage:not(.st-won), .board[data-stage="lost"] .stage:not(.st-lost) { display:none; }
  .stage { background:none; padding:0; }
  .stage header { padding:0 2px 2px; }
  .lact .btn { min-height:44px; }
  .qrow { padding:16px 18px; }
  .qact { width:100%; }
  .qact .btn { flex:1; }
}

/* ── finance ── */
.kpis.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kpi small { display:block; color:var(--faint); font-size:13px; margin-top:2px; }
.kpi b.bad { color:var(--bad); }
.bars { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; align-items:end; height:190px; padding-top:6px; }
.bcol { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; min-width:0; }
.bcol i { display:block; width:100%; max-width:64px; background:color-mix(in srgb, var(--sent) 55%, var(--surface)); border-radius:8px 8px 4px 4px; min-height:4px; }
.bcol.cur i { background:var(--accent); }
.bval { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.blab { font-size:12.5px; color:var(--faint); }
.fbar { border-bottom:1px solid var(--line); }
.ihead, .irow { display:grid; grid-template-columns:90px minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 110px; gap:16px; align-items:center; padding:15px 24px; }
.ihead { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); background:var(--soft); border-bottom:1px solid var(--line); padding-top:11px; padding-bottom:11px; }
.irow { border-top:1px solid var(--line); }
.ihead + .irow { border-top:0; }
.irow[hidden] { display:none; }
.ino { color:var(--faint); font-variant-numeric:tabular-nums; }
.icust { font-weight:500; overflow-wrap:anywhere; }
.idue { color:var(--muted); font-size:14px; }
.iamt { font-weight:500; font-variant-numeric:tabular-nums; text-align:right; }
.ihead span:nth-child(4) { text-align:right; }
.istat { text-align:right; }
.status.s-unpaid { color:var(--accent); background:var(--accent-soft); border-color:transparent; }
.status.s-overdue { color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, var(--surface)); border-color:transparent; }
.status.s-paid { color:var(--good); background:color-mix(in srgb, var(--good) 10%, var(--surface)); border-color:transparent; }
@media (max-width:1000px) { .kpis.three { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) {
  .kpis.three { grid-template-columns:minmax(0,1fr); }
  .bars { gap:8px; height:170px; }
  .bval { display:none; }
  .ihead { display:none; }
  .irow { grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:15px 18px; }
  .ino { grid-row:2; font-size:13px; }
  .icust { grid-column:1; }
  .iamt { grid-column:2; grid-row:1; }
  .idue { grid-column:1; grid-row:2; font-size:13px; }
  .ino { display:none; }
  .istat { grid-column:2; grid-row:2; }
}

/* ── settings sections ── */
.inp { padding:11px 14px; border:1px solid var(--line); border-radius:var(--r-btn); font:inherit; background:var(--surface); color:var(--text); min-width:240px; }
textarea.inp { width:100%; min-width:0; resize:vertical; line-height:1.5; }
.field.stack { flex-direction:column; align-items:stretch; gap:10px; }
.saved { font-size:12.5px; font-weight:500; color:var(--good); margin-left:8px; }
.nhead, .nrow { display:grid; grid-template-columns:minmax(0,1fr) 84px 84px; gap:12px; align-items:center; }
.nhead { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding-bottom:8px; text-align:center; }
.nrow { padding:16px 0; border-top:1px solid var(--line); }
.nrow .t { font-weight:500; } .nrow .d { color:var(--faint); font-size:13px; margin-top:2px; }
.switch { display:flex; justify-content:center; cursor:pointer; position:relative; min-height:44px; align-items:center; }
.switch input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch i { width:42px; height:24px; border-radius:999px; background:var(--line); position:relative; transition:background .18s; flex:none; }
.switch i::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .18s; }
.switch input:checked + i { background:var(--accent); }
.switch input:checked + i::after { transform:translateX(18px); }
.switch input:focus-visible + i { outline:2px solid var(--accent); outline-offset:2px; }
.lbl-ch { display:none; }
.boxes { display:grid; gap:14px; margin-top:14px; }
.box { border:1px solid var(--line); border-radius:var(--r-card); padding:16px 18px; display:grid; gap:8px; background:var(--soft); }
.boxtop { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.boxid { display:grid; gap:1px; min-width:0; } .boxid b { font-weight:500; overflow-wrap:anywhere; } .boxid small { color:var(--muted); font-size:13.5px; }
.checks { display:flex; gap:8px; flex-wrap:wrap; }
.ck { font-size:12.5px; font-weight:500; padding:2px 9px; border-radius:999px; }
.ck.ok { color:var(--good); background:color-mix(in srgb, var(--good) 10%, var(--surface)); }
.ck.bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.warnline { color:var(--bad); font-size:13.5px; }
@media (max-width:760px) {
  .field { flex-wrap:wrap; }
  .inp { width:100%; min-width:0; }
  .nhead { display:none; }
  .nrow { grid-template-columns:1fr 1fr; }
  .nrow > div:first-child { grid-column:1 / -1; }
  .switch { justify-content:flex-start; gap:10px; }
  .lbl-ch { display:inline; font-size:14px; color:var(--muted); }
}

/* ── projects + calendar ── */
.pfilters { margin-bottom:16px; padding:0; border:0; }
.pgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.pcard { display:block; }
.pcard[hidden] { display:none; }
.pcard .body { display:grid; gap:14px; }
.ptop { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.ptop b { font-weight:500; font-size:16.5px; display:block; overflow-wrap:anywhere; }
.ptop small { color:var(--muted); font-size:13.5px; }
.pmeta { display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--muted); font-size:13.5px; }
.pmeta .pval { margin-left:auto; color:var(--text); font-weight:500; font-variant-numeric:tabular-nums; }
.status.s-p-active { color:var(--accent); background:var(--accent-soft); border-color:transparent; }
.status.s-p-review { color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color:transparent; }
.status.s-p-done { color:var(--good); background:color-mix(in srgb, var(--good) 10%, var(--surface)); border-color:transparent; }
.mile { list-style:none; padding:0; display:grid; gap:2px; }
.mile li { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); min-height:44px; }
.mile li:first-child { border-top:0; }
.mk { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--soft); border:1px solid var(--line); color:var(--faint); font-size:12.5px; flex:none; }
.mile li.done { color:var(--muted); } .mile li.done .mk { background:var(--good); border-color:var(--good); color:#fff; }
.agenda { display:grid; gap:22px; max-width:760px; }
.aday h2 { font-size:14px; font-weight:600; color:var(--muted); margin-bottom:8px; letter-spacing:.01em; }
.aday.today h2 { color:var(--accent); }
.aev { display:grid; grid-template-columns:78px 36px minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 18px; border-top:1px solid var(--line); }
.aev:first-child { border-top:0; }
.atime { color:var(--muted); font-size:13.5px; font-variant-numeric:tabular-nums; }
.aic { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--soft); color:var(--muted); }
.ty-call .aic { background:var(--accent-soft); color:var(--accent); }
.ty-followup .aic { background:color-mix(in srgb, var(--warn) 14%, var(--surface)); color:var(--warn); }
.ty-invoice .aic { background:color-mix(in srgb, var(--sent) 25%, var(--surface)); color:color-mix(in srgb, var(--sent) 60%, var(--text)); }
.abody { display:grid; gap:1px; min-width:0; } .abody b { font-weight:500; overflow-wrap:anywhere; } .abody small { color:var(--faint); font-size:13.5px; }
@media (max-width:1000px) { .pgrid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px) {
  .aev { grid-template-columns:36px minmax(0,1fr); padding:14px 16px; }
  .atime { grid-column:2; grid-row:1; font-size:12.5px; }
  .aic { grid-row:1 / span 2; }
  .abody { grid-column:2; }
  .aev .tag { display:none; }
}

/* ── more pages ── */
.kpis.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.hbars { display:grid; gap:12px; }
.hbar { display:grid; grid-template-columns:minmax(80px,130px) minmax(0,1fr) 62px; gap:12px; align-items:center; font-size:14.5px; }
.hbar .hl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hbar b { text-align:right; font-weight:500; font-variant-numeric:tabular-nums; }
.bars.wk { grid-template-columns:repeat(5,minmax(0,1fr)); height:170px; }
.clist2 .crow2 { display:grid; grid-template-columns:36px minmax(0,1.4fr) minmax(0,1.6fr) auto; gap:14px; align-items:center; padding:14px 22px; border-top:1px solid var(--line); }
.crow2[hidden] { display:none; }
.cwho, .cmail { display:grid; gap:1px; min-width:0; } .cwho b { font-weight:500; } .cwho small, .cmail small { color:var(--muted); font-size:13.5px; }
.cmail { font-size:14px; overflow-wrap:anywhere; }
.tadd { display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.tadd input[type=text] { flex:1 1 220px; }
.tlist { list-style:none; padding:0; display:grid; }
.trow { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); min-height:52px; }
.trow.new { animation:irise .24s cubic-bezier(.2,.7,.2,1) both; }
.tcheck { width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); color:transparent; cursor:pointer; flex:none; display:grid; place-items:center; font-size:14px; padding:0; }
.trow.done .tcheck { background:var(--good); border-color:var(--good); color:#fff; }
.ttitle { flex:1; min-width:0; overflow-wrap:anywhere; }
.trow.done .ttitle { color:var(--faint); text-decoration:line-through; }
.tdel { width:36px; height:36px; border:0; background:none; color:var(--faint); font-size:22px; cursor:pointer; border-radius:8px; }
.tdone { margin-top:14px; } .tdone summary { cursor:pointer; color:var(--muted); min-height:44px; display:flex; align-items:center; gap:8px; } .tdone summary b { font-weight:500; color:var(--faint); }
.arow { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 0; border-top:1px solid var(--line); }
.arow:first-child { border-top:0; padding-top:4px; }
.aflow { display:grid; gap:4px; min-width:0; }
.aw { display:inline-block; min-width:44px; margin-right:8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:500; }
.arow .switch { flex:none; min-width:52px; }
.arow .switch input:disabled + i { opacity:.55; }
.cmds { display:flex; flex-wrap:wrap; gap:8px; }
.cmds span { padding:8px 14px; border-radius:999px; background:var(--soft); border:1px solid var(--line); font-size:14px; }
.rgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.rstats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 12px; }
.rstats span { display:block; color:var(--muted); font-size:13px; } .rstats b { font-weight:500; font-size:19px; font-variant-numeric:tabular-nums; }
@media (max-width:1000px) { .kpis.four { grid-template-columns:repeat(2,minmax(0,1fr)); } .rgrid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px) {
  .clist2 .crow2 { grid-template-columns:36px minmax(0,1fr) auto; padding:14px 18px; }
  .cmail { grid-column:2 / -1; }
  .hbar { grid-template-columns:90px minmax(0,1fr) 54px; }
  .tadd .btn { flex:1 1 100%; }
  .tadd input[type=date] { flex:1 1 100%; }
  .rstats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* discord setup */
.guide { margin:12px 0 4px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--soft); padding:4px 16px; }
.guide summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:500; }
.guide ol { padding-left:20px; margin:0 0 12px; display:grid; gap:8px; color:var(--muted); font-size:14.5px; }
.dfold { margin-top:12px; } .dfold > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--accent); font-weight:500; }
.dform { display:grid; gap:14px; margin-top:16px; }
.dform label { display:grid; gap:6px; font-weight:500; font-size:14px; }
.dform .inp { width:100%; min-width:0; }
.status.s-late { color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, var(--surface)); border-color:transparent; }

/* sign-in pages */
.authpage main.authwrap { min-height:100vh; display:grid; align-content:center; justify-items:center; gap:22px; padding:32px 16px; max-width:none; margin:0; }
.authbrand { font-size:20px; }
.authcard { width:100%; max-width:440px; }
.authcard .body { padding:32px 30px; }
.authh { font-size:26px; font-weight:500; letter-spacing:-.02em; margin-bottom:8px; }
.authlead { color:var(--muted); margin-bottom:20px; }
.authform { display:grid; gap:16px; }
.authform label { display:grid; gap:6px; font-weight:500; font-size:14px; }
.authform label small { color:var(--faint); font-weight:400; }
.authform .inp { width:100%; min-width:0; }
.authform .btn { width:100%; min-height:48px; margin-top:4px; }
.inp.code { font-size:22px; letter-spacing:.18em; text-align:center; font-variant-numeric:tabular-nums; }
.notice.bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, var(--surface)); border-color:transparent; margin-bottom:16px; }
.authfoot { max-width:440px; text-align:center; }
.qr { display:grid; place-items:center; margin:4px 0 14px; }
.qr svg { width:200px; height:200px; border-radius:12px; }
.manualkey { margin-bottom:18px; } .manualkey summary { cursor:pointer; color:var(--accent); min-height:44px; display:flex; align-items:center; }
.manualkey code { display:block; padding:12px 14px; background:var(--soft); border:1px solid var(--line); border-radius:var(--r-btn); font-size:15px; letter-spacing:.08em; word-break:break-all; }
.codes { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 20px; }
.codes li { padding:10px 12px; background:var(--soft); border:1px solid var(--line); border-radius:var(--r-btn); font-family:ui-monospace,Menlo,monospace; font-size:15px; text-align:center; }
.devrow { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
.devrow:first-child { border-top:0; } .devrow .lbl { flex:1; min-width:160px; } .devrow small { display:block; color:var(--faint); font-size:13px; }

/* first-run wizard */
.wzsteps { list-style:none; padding:0; margin:0 0 26px; display:flex; justify-content:space-between; gap:4px; }
.wzsteps li { flex:1; display:grid; justify-items:center; gap:6px; font-size:12px; color:var(--faint); text-align:center; position:relative; }
.wzsteps li::before { content:""; position:absolute; top:13px; left:-50%; right:50%; height:2px; background:var(--line); z-index:0; }
.wzsteps li:first-child::before { display:none; }
.wzsteps li.done::before, .wzsteps li.on::before { background:var(--accent); }
.wzsteps i { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:13px; font-weight:600; background:var(--card); border:2px solid var(--line); z-index:1; color:var(--faint); }
.wzsteps li.on i { border-color:var(--accent); color:var(--accent); }
.wzsteps li.done i { background:var(--accent); border-color:var(--accent); color:#fff; }
.wzsteps li.on span { color:var(--text); font-weight:500; }
.langrow { display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.langrow .chip { cursor:pointer; }
.lookgroup { display:grid; gap:10px; } .lookgroup .lbl { font-weight:500; font-size:14px; }
.swatchrow { display:flex; gap:12px; flex-wrap:wrap; }
.sw { position:relative; cursor:pointer; } .sw input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.sw i { display:block; width:40px; height:40px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.sw input:checked + i { box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
.themerow .chip { cursor:pointer; position:relative; } .themerow input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.themerow .chip:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:500; }
.lookprev { padding:18px 20px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-card); }
.lookprev h2 { font-size:28px; font-weight:330; letter-spacing:-.03em; } .lookprev em { font-family:var(--serif),Georgia,serif; font-style:italic; font-weight:var(--em-weight); color:var(--accent); font-size-adjust:var(--xadj); }
.gasteps { list-style:none; padding:0; margin:0 0 20px; display:grid; gap:18px; }
.gasteps li { display:flex; gap:14px; align-items:flex-start; }
.gasteps li > b { width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:13px; flex:none; margin-top:1px; }
.gasteps li > div { flex:1; min-width:0; }
.applinks { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.phonelink { display:none; margin:6px 0; color:var(--accent); font-weight:500; }
@media (pointer:coarse) { .phonelink { display:inline-block; } }
.ldwrap { text-align:center; display:grid; gap:18px; justify-items:center; padding:12px 0; }
.ldmark { width:56px; height:56px; color:var(--text); }
.ldwrap.animating .ldmark { animation:orbitspin 1.8s linear infinite; }
.ldwrap.done .ldmark { animation:none; }
@keyframes orbitspin { to { transform:rotate(360deg); } }
.ldbar { width:100%; height:6px; border-radius:6px; background:var(--line); overflow:hidden; }
.ldbar i { display:block; height:100%; width:100%; background:var(--accent); border-radius:6px; transition:width .5s ease; }
.ldwrap.animating .ldbar i { width:0; }
.ldlist { list-style:none; padding:0; display:grid; gap:12px; text-align:left; width:100%; }
.ldlist li { display:flex; gap:12px; align-items:center; color:var(--muted); }
.ldlist li::before { content:""; width:20px; height:20px; border-radius:50%; border:2px solid var(--line); flex:none; background:var(--surface); transition:all .25s; }
.ldlist li.ok, .ldwrap:not(.animating) .ldlist li { color:var(--text); }
.ldlist li.ok::before, .ldwrap:not(.animating) .ldlist li::before { background:var(--accent); border-color:var(--accent); box-shadow:inset 0 0 0 4px var(--accent); }
.ldend { display:grid; gap:14px; justify-items:center; }
.ldwrap.animating .ldend { opacity:0; transform:translateY(8px); pointer-events:none; }
.ldwrap.animating.done .ldend { opacity:1; transform:none; pointer-events:auto; transition:all .4s ease; }
.ldwelcome { font-size:26px; font-weight:330; letter-spacing:-.03em; }

/* follow-up reminders */
.due { font-size:12.5px; font-weight:500; padding:2px 9px; border-radius:999px; background:var(--soft); border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.due.now { color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color:transparent; }
.due.late { color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, var(--surface)); border-color:transparent; }
.followups { margin-bottom:18px; }
.followups .hint { margin-bottom:6px; }
.row.fu .mav { width:32px; height:32px; font-size:13px; }
details.more > summary { list-style:none; cursor:pointer; color:var(--accent); font-weight:500; padding:12px 0 4px; min-height:44px; display:flex; align-items:center; border-top:1px solid var(--line); }
details.more > summary::-webkit-details-marker { display:none; }
details.more[open] > summary { display:none; }
a.row:hover .lbl { color:var(--accent); }
.row.fu { flex-wrap:wrap; }
.row.fu .lbl { flex:1 1 150px; }
@media (max-width:760px) { .row.fu .btn { flex:1 1 100%; } .row.fu .due { margin-left:46px; } }

/* ── tablet ── */
@media (max-width:1000px) {
  .grid { grid-template-columns:minmax(0,1fr); }
  .grid > .col { display:contents; }                  /* lets the most actionable card rise to the top on phones */
  .grid .search { order:-3; } .grid .fucard { order:-2; }
  .grid { gap:20px; }
  .set-grid { grid-template-columns:1fr; gap:20px; }
  .subnav { position:static; display:flex; overflow-x:auto; gap:6px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .subnav { scrollbar-width:none; }
  .subnav::-webkit-scrollbar { display:none; }
  .subnav a { white-space:nowrap; background:var(--surface); border:1px solid var(--line); }
  .subnav a.on { border-color:var(--accent); }
  .topnav .in { gap:22px; }
  .topnav nav { gap:18px; }
}

/* ── phone ── */
@media (max-width:760px) {
  body[data-nav="top"] .topnav, body[data-nav="side"] .sidenav { display:none; }
  body[data-nav="side"] main { margin-left:0; max-width:none; }
  :root { --h1-size:clamp(30px, 9vw, 40px); }
  body[data-tone="warm"] { --h1-size:clamp(30px, 9vw, 40px); }

  .mobilebar { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30; height:54px; padding:0 16px; padding-top:env(safe-area-inset-top); background:color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); box-sizing:content-box; }
  .mobilebar .r { display:flex; align-items:center; gap:6px; }
  .mobilebar .iconbtn { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; }

  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; height:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:color-mix(in srgb, var(--surface) 96%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--line); }
  .tabbar a, .tabbar button { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; background:none; border:0; color:var(--faint); font-size:11px; cursor:pointer; }
  .tabbar svg.i { width:22px; height:22px; }
  .tabbar .on { color:var(--accent); font-weight:500; }

  .sheet-wrap { display:block; }
  .sheet-wrap[hidden] { display:none !important; }
  .sheet-bg { position:fixed; inset:0; background:rgba(20,15,10,.38); z-index:50; }
  .sheet { position:fixed; left:0; right:0; bottom:0; z-index:60; max-height:82vh; overflow-y:auto; background:var(--surface); border-radius:22px 22px 0 0; padding:10px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(20,15,10,.18); }
  .sheet .grab { width:40px; height:4px; border-radius:4px; background:var(--line); margin:4px auto 14px; }
  .sheet .grp { padding:14px 6px 6px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
  .sheet a { display:flex; align-items:center; gap:14px; padding:13px 8px; border-radius:12px; font-size:16px; min-height:48px; }
  .sheet a.on { background:var(--accent-soft); color:var(--accent); font-weight:500; }

  main { padding:20px 16px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); }
  .head { flex-direction:column; align-items:stretch; gap:16px; margin-bottom:18px; }
  .actions { width:100%; }
  .actions .btn { flex:1; }
  .btn { min-height:46px; padding:12px 16px; }
  .search { padding:15px 18px; }
  .search kbd { display:none; }
  .card .body { padding:18px 18px; }
  .card .foot { padding:12px 18px; }
  .card .foot .btn { width:100%; }
  .row { padding:14px 0; }
  .totals b { font-size:22px; }
  .card-head { flex-wrap:wrap; }

  .field { flex-direction:column; align-items:flex-start; gap:12px; }
  .chips, .swatches { justify-content:flex-start; }
  .chip { padding:10px 16px; min-height:44px; }
  .swatch { width:36px; height:36px; }
  .swatches input[type=color] { width:40px; height:40px; }
  .fonts { grid-template-columns:1fr; }
  .preview { padding:20px 18px; }
  input, select, textarea { font-size:16px; }   /* stops iOS zooming in on focus */
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }