/* ════════════════════════════════════════════════════════════════
   SHIPPING AiOS  ·  design system
   Tokens ported verbatim from the live client command center so this
   demo and the real product read as one system. Daylight is the
   default, noir is the toggle, exactly as the command center ships.
   ════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=JetBrains+Mono:wght@400;500;600;700&family=Caveat:wght@400..700&display=swap");

:root, :root[data-theme="noir"]{
  color-scheme:dark;
  --bg-0:#0B0D11; --bg-1:#0F1217; --paper:#171A21;
  --text:#E9ECF1; --text-muted:#9BA3B0; --text-faint:#828A96;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.18);
  --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.06);
  --surface-hi:#20242C;
  --accent:#6AA0F0; --accent-2:#93B8F2; --accent-deep:#2E6BD3;
  --accent-warm:#93B8F2; --accent-soft:rgba(106,160,240,.12);
  --green:#3ECF8E; --green-soft:rgba(62,207,142,.1);
  --amber:#E8B04B; --amber-soft:rgba(232,176,75,.12);
  --red:#F2606A; --red-soft:rgba(242,96,106,.12);
  --card-grad:linear-gradient(168deg,#1C202A 0%,#161A22 100%);
  --card-edge:rgba(255,255,255,.06);
  --plate:rgba(255,255,255,.025);
  --side-bg:#0C0E12;
  --shadow-soft:0 12px 30px -18px rgba(0,0,0,.6);
  --shadow-lg:0 30px 66px -28px rgba(0,0,0,.7);
  --fill:linear-gradient(158deg,#1E4A96 0%,#133875 52%,#0B2450 100%);
  --fill-glow:0 34px 76px -34px rgba(19,56,117,.7);
  --fill-ink:#FFFFFF; --fill-muted:rgba(226,240,255,.78); --fill-line:rgba(255,255,255,.18);
  --fill-label:#CFDFFF; --fill-btn-ink:#12318C; --fill-hi:rgba(198,222,255,.34); --bubble:#2E6BD3;
  --grad:linear-gradient(100deg,#5E92E8,#8FB3EE);
  --ease:cubic-bezier(.16,1,.3,1);
  --radius:20px; --radius-sm:14px;
}
/* ── CRIMSON, the third theme (DP order 2026-08-01, base #C92332) ──
   A dark theme like noir, but warm. Two problems solved here:
   (1) #C92332 measures only 3.4:1 on near-black, under the 4.5:1
       readability standard, so text and icons use a lifted #E85D6A
       (5.5:1) and the exact #C92332 carries the filled card instead.
   (2) A red ACCENT collides with the red OVERDUE signal, and in this
       design glow is information, not decoration. So in this theme
       pressure moves to orange. Four signals stay distinguishable:
       crimson brand, orange overdue, gold money, green good. */
:root[data-theme="crimson"]{
  color-scheme:dark;
  --bg-0:#0C0809; --bg-1:#100B0D; --paper:#191113;
  --text:#F4ECED; --text-muted:#BCA9AC; --text-faint:#9A8A8D;
  --border:rgba(255,236,238,.09); --border-strong:rgba(255,236,238,.2);
  --surface:rgba(255,236,238,.04); --surface-2:rgba(255,236,238,.07);
  --surface-hi:#241A1C;
  --accent:#E85D6A; --accent-2:#F08A93; --accent-deep:#C92332;
  --accent-warm:#F2C94C; --accent-soft:rgba(232,93,106,.14);
  --green:#3ECF8E; --green-soft:rgba(62,207,142,.1);
  --amber:#F2C94C; --amber-soft:rgba(242,201,76,.13);
  --red:#FF8C42; --red-soft:rgba(255,140,66,.14);
  --card-grad:linear-gradient(168deg,#221719 0%,#1A1214 100%);
  --card-edge:rgba(255,236,238,.07);
  --plate:rgba(255,236,238,.028);
  --side-bg:#0D0809;
  --shadow-soft:0 12px 30px -18px rgba(0,0,0,.66);
  --shadow-lg:0 30px 66px -28px rgba(0,0,0,.75);
  --fill:linear-gradient(158deg,#D8323F 0%,#C92332 52%,#7A0F1B 100%);
  --fill-glow:0 34px 76px -34px rgba(201,35,50,.62);
  --fill-ink:#FFFFFF; --fill-muted:rgba(255,229,232,.8); --fill-line:rgba(255,255,255,.2);
  --fill-label:#FFD3D7; --fill-btn-ink:#8E1420; --fill-hi:rgba(255,214,218,.34); --bubble:#C92332;
  --grad:linear-gradient(100deg,#E85D6A,#F08A93);
}

:root[data-theme="daylight"]{
  color-scheme:light;
  --bg-0:#EEF3FC; --bg-1:#F6F9FF; --paper:#FFFFFF;
  --text:#0E1A33; --text-muted:#48566E; --text-faint:#667691;
  --border:rgba(19,56,117,.15); --border-strong:rgba(19,56,117,.32);
  --surface:rgba(15,23,42,.03); --surface-2:rgba(15,23,42,.055);
  --surface-hi:#FFFFFF;
  --accent:#133875; --accent-2:#2E5FA3; --accent-deep:#0C244E;
  --accent-warm:#B98A1B; --accent-soft:rgba(19,56,117,.09);
  --green:#12A150; --green-soft:rgba(18,161,80,.1);
  --amber:#D98A00; --amber-soft:rgba(217,138,0,.12);
  --red:#E5484D; --red-soft:rgba(229,72,77,.1);
  --card-grad:linear-gradient(168deg,#FFFFFF 0%,#F7FAFF 100%);
  --card-edge:rgba(19,56,117,.2);
  --plate:rgba(19,56,117,.05);
  --side-bg:rgba(246,249,255,.85);
  --shadow-soft:0 12px 32px -18px rgba(23,52,120,.26);
  --shadow-lg:0 30px 66px -24px rgba(23,52,120,.34);
  --fill:linear-gradient(158deg,#2B5AA8 0%,#133875 46%,#0C244E 100%);
  --fill-glow:0 30px 66px -30px rgba(19,56,117,.55);
  --fill-ink:#FFFFFF; --fill-muted:rgba(232,240,255,.78); --fill-line:rgba(255,255,255,.2);
  --fill-label:#CFDFFF; --fill-btn-ink:#12318C; --fill-hi:rgba(198,222,255,.34); --bubble:#133875;
  --grad:linear-gradient(100deg,#133875,#2E5FA3);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  background:var(--bg-0); color:var(--text);
  font-size:16.4px; line-height:1.6; letter-spacing:-.004em;
  font-feature-settings:'tnum';
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  display:flex; min-height:100vh; transition:background .3s,color .3s; overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff}
button{font:inherit;color:inherit}
a{color:inherit}

/* ── ambient field ── */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 78% -8%,rgba(56,120,248,.07),transparent 62%),
    radial-gradient(ellipse 60% 50% at 10% 10%,rgba(232,193,90,.025),transparent 58%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));}
:root[data-theme="daylight"] .ambient{background:
  radial-gradient(ellipse 80% 60% at 78% -8%,rgba(56,189,248,.2),transparent 60%),
  radial-gradient(ellipse 70% 60% at 12% 8%,rgba(37,99,235,.14),transparent 58%),
  linear-gradient(180deg,var(--bg-1),var(--bg-0));}
.ambient .grid{position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--border-strong) 1px,transparent 1px);
  background-size:34px 34px;opacity:.3;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 78%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 78%);}

/* ════════ SIDEBAR ════════ */
.side{position:fixed;top:0;left:0;bottom:0;width:250px;z-index:30;
  background:var(--side-bg);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:20px 14px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 20px}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--grad);flex:none;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;
  font-family:'JetBrains Mono',monospace;box-shadow:0 8px 20px -10px var(--accent)}
.brand-n{font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.brand-s{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint);margin-top:2px}
.nav-g{margin-bottom:16px}
.nav-t{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);padding:0 10px 7px;font-weight:600}
.nav-i{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;
  cursor:pointer;color:var(--text-muted);font-size:14.6px;font-weight:550;
  transition:background .2s var(--ease),color .2s var(--ease);border:0;background:none;
  width:100%;text-align:left;margin-bottom:1px}
.nav-i:hover{background:var(--surface-2);color:var(--text)}
.nav-i.on{background:var(--accent-soft);color:var(--accent);font-weight:650}
.nav-i .ic{width:17px;height:17px;flex:none;opacity:.9}
.nav-i .pipx{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  font-weight:700;padding:2px 7px;border-radius:999px;background:var(--red-soft);color:var(--red)}
.side-foot{margin-top:auto;padding:14px 10px 4px;border-top:1px solid var(--border)}

/* ════════ MAIN ════════ */
.main{flex:1;margin-left:250px;position:relative;z-index:1;min-width:0;
  display:flex;flex-direction:column;min-height:100vh}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  padding:15px clamp(18px,2.6vw,34px);border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg-0) 82%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.top-t{font-size:19px;font-weight:680;letter-spacing:-.025em}
.top-s{font-size:12.6px;color:var(--text-faint);margin-top:1px}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.screen{padding:clamp(20px,2.8vw,34px);max-width:1400px;width:100%;margin:0 auto;flex:1}

.demo-chip{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:5px 10px;border-radius:999px;color:var(--amber);background:var(--amber-soft);
  border:1px solid color-mix(in srgb,var(--amber) 30%,transparent)}
.demo-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

.pick{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:11px;
  border:1px solid var(--border);background:var(--paper);color:var(--text);cursor:pointer;
  font-size:13.4px;font-weight:600;transition:border-color .2s var(--ease)}
.pick:hover{border-color:var(--border-strong)}
.pick select{border:0;background:none;font:inherit;color:inherit;cursor:pointer;outline:none}
.tt{display:inline-flex;align-items:center;gap:7px;cursor:pointer;padding:8px 13px;
  border-radius:11px;border:1px solid var(--border);background:var(--paper);
  color:var(--text-muted);font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;transition:all .22s var(--ease)}
.tt:hover{color:var(--text);border-color:var(--border-strong)}
/* the swatch shows the theme you are looking at now, the label names the next one */
.tt .sw{width:11px;height:11px;border-radius:50%;background:var(--grad);flex:none;
  box-shadow:0 0 0 2px var(--surface-2)}

/* ════════ CARDS ════════ */
.card{background:var(--card-grad);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 24px;box-shadow:0 0 0 6px var(--plate),var(--shadow-soft);
  position:relative;overflow:hidden;
  transition:border-color .26s var(--ease),box-shadow .4s var(--ease)}
.card::before{content:"";position:absolute;top:0;left:22px;right:22px;height:1px;
  background:linear-gradient(90deg,transparent,var(--card-edge),transparent);pointer-events:none}
.card:hover{border-color:var(--border-strong);box-shadow:0 0 0 6px var(--plate),var(--shadow-lg)}
.card-deep{background:var(--fill);border-color:transparent;color:var(--fill-ink);
  box-shadow:0 0 0 6px var(--plate),var(--fill-glow)}
.card-deep::before{content:"";position:absolute;inset:0;left:0;right:0;height:auto;
  background:radial-gradient(ellipse 70% 60% at 12% -10%,var(--fill-hi),transparent 62%),
             radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:auto,22px 22px;opacity:.9}
.card-deep>*{position:relative;z-index:1}
.card-deep:hover{border-color:transparent;box-shadow:0 0 0 6px var(--plate),var(--fill-glow)}
.card-deep .c-sub,.card-deep .k-sub,.card-deep .muted{color:var(--fill-muted)}
.card-deep .c-title{color:var(--fill-ink)}
/* anything that can land inside the filled card has to survive the blue.
   The faint grey token is unreadable on navy, so labels lift to a pale blue. */
.card-deep .k-label,.card-deep .nav-t,.card-deep .faint{color:var(--fill-label)}
.card-deep .k-val{color:var(--fill-ink)}
.card-deep .sig{border-color:var(--fill-line)}
.card-deep .sig-t{color:var(--fill-ink)}
.card-deep .sig-d{color:var(--fill-muted)}
.card-deep .hand{color:var(--fill-label)}
.card-deep .tag.off{color:var(--fill-label);background:rgba(255,255,255,.16)}
.card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.c-title{font-size:19px;font-weight:660;letter-spacing:-.025em}
.c-sub{font-size:13px;color:var(--text-faint);line-height:1.5;margin-top:2px}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.hand{font-family:'Caveat',cursive;font-size:23px;color:var(--accent);letter-spacing:0}

/* ════════ KPI ════════ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.kpi{background:var(--card-grad);border:1px solid var(--border);border-radius:var(--radius);
  padding:19px 20px 17px;box-shadow:0 0 0 6px var(--plate),var(--shadow-soft);
  position:relative;overflow:hidden;
  transition:transform .26s var(--ease),box-shadow .4s var(--ease),border-color .26s var(--ease)}
.kpi::before{content:"";position:absolute;top:0;left:20px;right:20px;height:1px;
  background:linear-gradient(90deg,transparent,var(--card-edge),transparent);pointer-events:none}
.kpi:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:0 0 0 6px var(--plate),var(--shadow-lg)}
.kpi.press-red{border-color:color-mix(in srgb,var(--red) 34%,var(--border));
  box-shadow:0 0 0 6px rgba(242,85,92,.06),0 26px 60px -34px rgba(242,85,92,.7),var(--shadow-soft)}
.kpi.press-gold{border-color:color-mix(in srgb,var(--accent-warm) 30%,var(--border));
  box-shadow:0 0 0 6px rgba(232,193,90,.05),0 26px 60px -34px rgba(232,193,90,.45),var(--shadow-soft)}
.k-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;color:var(--text-faint)}
.k-val{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:33px;font-weight:700;letter-spacing:-.02em;margin:9px 0 3px;line-height:1.1}
.k-val .cur{font-size:15px;font-weight:700;color:var(--text-faint);margin-right:3px}
.k-val.red{color:var(--red)}.k-val.gold{color:var(--accent-warm)}
.k-val.green{color:var(--green)}.k-val.amber{color:var(--amber)}
.k-sub{font-size:12.8px;color:var(--text-faint);line-height:1.45}
.kpi-fill{background:var(--fill);border-color:transparent;color:var(--fill-ink);
  box-shadow:0 0 0 6px var(--plate),var(--fill-glow)}
.kpi-fill::before{content:"";position:absolute;inset:0;left:0;right:0;height:auto;
  background:radial-gradient(ellipse 70% 60% at 12% -10%,var(--fill-hi),transparent 62%),
             radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:auto,22px 22px}
.kpi-fill>*{position:relative;z-index:1}
.kpi-fill .k-label{color:var(--fill-label)}
.kpi-fill .k-val{color:var(--fill-ink)}
.kpi-fill .k-sub{color:var(--fill-muted)}

/* ════════ GRID ════════ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g-main{display:grid;grid-template-columns:1.45fr .95fr;gap:18px}
.stack{display:flex;flex-direction:column;gap:18px}
.mb{margin-bottom:18px}

/* ════════ SIGNAL ROWS ════════ */
.sig{display:flex;align-items:flex-start;gap:11px;padding:11px 2px;border-bottom:1px solid var(--border)}
.sig:last-child{border-bottom:0}
.dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none;
  background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.dot.red{background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.dot.amber{background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.dot.green{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.sig-t{font-weight:620;font-size:14.8px;line-height:1.4}
.sig-d{font-size:13px;color:var(--text-faint);line-height:1.5;margin-top:1px}
.sig-r{margin-left:auto;text-align:right;flex:none;padding-left:12px}

/* ════════ TAGS ════════ */
.tag{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:4px 9px;border-radius:999px;white-space:nowrap}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.tag.ok{color:var(--green);background:var(--green-soft)}
.tag.warn{color:var(--amber);background:var(--amber-soft)}
.tag.bad{color:var(--red);background:var(--red-soft)}
.tag.info{color:var(--accent);background:var(--accent-soft)}
.tag.off{color:var(--text-faint);background:var(--surface-2)}
.tag.plain::before{display:none}

/* ════════ TABLE ════════ */
.tw{overflow-x:auto;margin:0 -6px;padding:0 6px}
table{width:100%;border-collapse:collapse;font-size:14.6px;min-width:640px}
th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);
  padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--border);font-weight:500;line-height:1.5;vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .18s var(--ease)}
tbody tr:hover{background:var(--surface)}
td.num{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;
  text-align:right;font-weight:700;white-space:nowrap}
.vessel{font-weight:660}
.vsub{font-size:12.4px;color:var(--text-faint);margin-top:2px}

/* ════════ PHASE PIPELINE ════════ */
.pipe{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.ph{text-align:center;padding:12px 6px;border-radius:13px;border:1px solid var(--border);
  background:var(--paper);transition:all .24s var(--ease)}
.ph .n{font-size:25px;font-weight:700;color:var(--accent);font-family:'JetBrains Mono',monospace;line-height:1.1}
.ph .n.zero{color:var(--text-faint)}
.ph .nm{font-size:11.4px;color:var(--text-muted);margin-top:3px;line-height:1.3}
.card-deep .ph{border-color:var(--fill-line);background:rgba(255,255,255,.1)}
.card-deep .ph .n{color:var(--fill-ink)}
.card-deep .ph .n.zero{color:rgba(255,255,255,.42)}
.card-deep .ph .nm{color:var(--fill-muted)}

/* ════════ GATE (approvals / checklists) ════════ */
.gate{display:flex;gap:7px;flex-wrap:wrap}
.gi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;
  border:1px solid var(--border);background:var(--surface);color:var(--text-faint);
  cursor:default;transition:all .24s var(--ease)}
.gi.done{background:var(--green-soft);color:var(--green);border-color:color-mix(in srgb,var(--green) 34%,transparent)}
.gi.miss{background:var(--red-soft);color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.gi.na{opacity:.45}
.gate-lg .gi{width:auto;padding:0 13px;height:36px;gap:7px}

/* ════════ BARS ════════ */
.bar{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:7px}
.bar span{display:block;height:100%;border-radius:999px;background:var(--grad);
  transition:width .7s var(--ease)}
.bar.red span{background:linear-gradient(100deg,var(--red),#F79AA0)}
.bar.amber span{background:linear-gradient(100deg,var(--amber),#F2CE86)}
.bar.green span{background:linear-gradient(100deg,var(--green),#8FE3BC)}

/* ════════ BUTTONS ════════ */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-size:13.6px;font-weight:620;cursor:pointer;transition:all .22s var(--ease)}
.btn:hover{border-color:var(--border-strong);background:var(--surface-2)}
.btn-primary{background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 12px 28px -14px var(--accent)}
.btn-primary:hover{filter:brightness(1.07);border-color:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-sm{padding:6px 11px;font-size:12.6px;border-radius:9px}
.card-deep .btn{border-color:var(--fill-line);background:rgba(255,255,255,.13);color:var(--fill-ink)}
.card-deep .btn:hover{background:rgba(255,255,255,.22)}
.card-deep .btn-primary{background:#fff;color:var(--fill-btn-ink);border-color:transparent}

/* ════════ CHAT / MIND ════════ */
.ask{display:flex;gap:10px;margin-bottom:16px}
.ask input{flex:1;padding:13px 16px;border-radius:13px;border:1px solid var(--border);
  background:var(--paper);color:var(--text);font:inherit;font-size:15px;outline:none;
  transition:border-color .2s var(--ease)}
.ask input:focus{border-color:var(--accent)}
.ans{border-left:2px solid var(--accent);padding:2px 0 2px 16px;margin-top:4px}
.ans p{margin-bottom:10px;line-height:1.65}
.ans p:last-child{margin-bottom:0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);font-size:12.8px;cursor:pointer;color:var(--text-muted);
  transition:all .2s var(--ease)}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* ════════ TELEGRAM MOCK ════════ */
.tg{border-radius:16px;border:1px solid var(--border);background:var(--paper);overflow:hidden}
.tg-h{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--border);
  background:var(--surface)}
.tg-av{width:28px;height:28px;border-radius:50%;background:var(--grad);flex:none;
  display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
.tg-b{padding:14px;display:flex;flex-direction:column;gap:9px;max-height:340px;overflow-y:auto}
.msg{max-width:82%;padding:9px 13px;border-radius:14px;font-size:13.8px;line-height:1.5}
.msg.in{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:5px}
.msg.out{align-self:flex-end;background:var(--bubble);color:#fff;border-bottom-right-radius:5px}

.msg .t{font-family:'JetBrains Mono',monospace;font-size:9.5px;opacity:.6;margin-top:4px;display:block}

/* ════════ EMPTY ════════ */
.empty{color:var(--text-faint);font-size:15px;text-align:center;padding:30px 20px}

/* ════════ RESPONSIVE ════════ */
.burger{display:none}
@media(max-width:1180px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .g-main{grid-template-columns:1fr}
  .pipe{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:900px){
  .side{transform:translateX(-100%);transition:transform .3s var(--ease);width:250px}
  .side.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.4)}
  .main{margin-left:0}
  .burger{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;
    border:1px solid var(--border);background:var(--paper);cursor:pointer;flex:none}
  .g2,.g3{grid-template-columns:1fr}
}
@media(max-width:620px){
  .kpis{grid-template-columns:1fr}
  .pipe{grid-template-columns:repeat(2,1fr)}
  .top-r .tt span{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── crimson ambient field: the same masked grid, warm instead of blue ── */
:root[data-theme="crimson"] .ambient{background:
  radial-gradient(ellipse 80% 60% at 78% -8%,rgba(232,93,106,.09),transparent 62%),
  radial-gradient(ellipse 60% 50% at 10% 10%,rgba(242,201,76,.03),transparent 58%),
  linear-gradient(180deg,var(--bg-1),var(--bg-0));}