/* CrawlTroll design system: tokens, shell and components */
:root {
  /* Warm, editorial palette in the style of the Claude Console */
  --bg:#FAF9F5; --surface:#FFFFFF; --surface-2:#F4F3EE; --surface-3:#EAE8E0;
  --border:#E8E6DC; --border-strong:#DAD7CC;
  --text:#141413; --muted:#6F6D66; --subtle:#9C9A92;
  --primary:#141413; --primary-hover:#2B2A27; --primary-soft:#EEECE5; --on-primary:#FAF9F5;
  --accent:#C96442; --accent-soft:#F5E4DC; --link:#2A5DB0;
  --success:#2E7D32; --warning:#B7791F; --danger:#C0392B; --info:#2A5DB0; --live:#D9572B; --moss:#5E8C6A; --rage:#C96442;
  --sh-sm:none; --sh-md:0 1px 2px rgba(20,20,19,.04); --sh-lg:0 12px 32px -8px rgba(20,20,19,.16);
  --ease:cubic-bezier(.2,.8,.2,1);
  --serif:"Source Serif 4", Georgia, serif;
}
:root[data-theme="dark"] {
  --bg:#262624; --surface:#30302E; --surface-2:#2B2B29; --surface-3:#3A3936;
  --border:#3D3C38; --border-strong:#4A4944;
  --text:#F5F4EE; --muted:#A6A39A; --subtle:#7C7A73;
  --primary:#F5F4EE; --primary-hover:#FFFFFF; --primary-soft:#3A3936; --on-primary:#1F1E1D;
  --accent:#D97757; --accent-soft:#4A3329; --link:#8AB4F8;
  --success:#7BC47F; --warning:#E2B04A; --danger:#F07167; --info:#8AB4F8; --live:#E8794F; --moss:#8DB59A; --rage:#D97757;
  --sh-sm:none; --sh-md:none; --sh-lg:0 12px 32px -8px rgba(0,0,0,.5);
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--text); font:13px/20px Inter,system-ui,sans-serif; font-feature-settings:"cv11","ss01"; -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; }
svg.lucide { width:16px; height:16px; stroke-width:1.75; flex:none; }
.mono { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; }
.num { font-variant-numeric:tabular-nums; }

.shell { display:grid; grid-template-columns:232px 1fr; height:100vh; }
/* sidebar */
.side { background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:12px 10px; gap:4px; min-height:0; }
.brand { display:flex; align-items:center; gap:10px; padding:4px 8px 14px; }
.brand b { font:800 17px/1 var(--serif); letter-spacing:-.02em; }
.brand b span { color:var(--primary); }
.site { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--border); border-radius:8px; margin-bottom:10px; cursor:pointer; background:var(--surface); }
.site .fav { width:20px; height:20px; border-radius:5px; background:linear-gradient(135deg,#C9A24A,#8a6a22); color:#fff; font:700 10px/20px Inter; text-align:center; }
.site small { color:var(--muted); display:block; font-size:11px; line-height:14px; }
.nav { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:6px; color:var(--muted); cursor:pointer; font-weight:500; transition:background .12s var(--ease),color .12s; }
.nav svg.lucide { width:18px; height:18px; }
.nav:hover { background:var(--surface-2); color:var(--text); }
.nav.active { background:var(--primary-soft); color:var(--primary); }
.nav .cnt { margin-left:auto; font-size:11px; font-weight:600; }
.sep { height:1px; background:var(--border); margin:8px 4px; }
.side .bottom { margin-top:auto; }
.me { display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; }
.avatar { width:28px; height:28px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:grid; place-items:center; font-weight:600; font-size:12px; }

/* pills */
.pill { display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
.pill.live { background:color-mix(in srgb,var(--live) 12%,transparent); color:var(--live); }
.pill.ok { background:color-mix(in srgb,var(--success) 12%,transparent); color:var(--success); }
.pill.idle { background:var(--surface-2); color:var(--muted); }
.pill.err { background:color-mix(in srgb,var(--danger) 12%,transparent); color:var(--danger); }
.pill.rage { background:color-mix(in srgb,var(--rage) 12%,transparent); color:var(--rage); }
.pill.new { background:var(--primary-soft); color:var(--primary); }
.dot { width:6px; height:6px; border-radius:50%; background:currentColor; position:relative; }
.dot.pulse::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 currentColor; animation:pulse 1.6s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 currentColor;opacity:.7} 100%{box-shadow:0 0 0 7px currentColor;opacity:0} }

/* main */
.main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.top { height:56px; display:flex; align-items:center; gap:12px; padding:0 20px; border-bottom:1px solid var(--border); background:var(--surface); }
.top h1 { font:700 18px/1 var(--serif); margin:0; letter-spacing:-.01em; }
.seg { display:inline-flex; background:var(--surface-2); border-radius:8px; padding:2px; }
.seg button { border:0; background:none; padding:4px 10px; border-radius:6px; color:var(--muted); font-weight:500; cursor:pointer; }
.seg button.on { background:var(--surface); color:var(--text); box-shadow:var(--sh-sm); }
.btn { height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 12px; border-radius:6px; border:1px solid var(--border-strong); background:var(--surface); font-weight:500; cursor:pointer; transition:background .12s; }
.btn:hover { background:var(--surface-2); }
.btn.primary { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.btn.primary:hover { background:var(--primary-hover); }
.btn.ghost { border-color:transparent; background:none; }
.btn.ghost:hover { background:var(--surface-3); }
.btn.icon { width:32px; padding:0; justify-content:center; }
.kbd { font:500 11px Inter; color:var(--muted); border:1px solid var(--border); border-radius:4px; padding:0 5px; background:var(--surface-2); }
.spacer { flex:1; }

.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 20px 0; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; box-shadow:var(--sh-sm); display:flex; align-items:flex-end; justify-content:space-between; }
.kpi label { color:var(--muted); font-size:12px; display:flex; align-items:center; gap:6px; }
.kpi .v { font:700 26px/32px var(--serif); letter-spacing:-.01em; margin-top:2px; white-space:nowrap; }
.delta { display:inline-block; line-height:16px; font-size:11px; font-weight:600; padding:1px 6px; border-radius:999px; margin-left:6px; vertical-align:middle; }
.delta.up { color:var(--success); background:color-mix(in srgb,var(--success) 12%,transparent); }
.delta.down { color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent); }

.work { flex:1; display:grid; grid-template-columns:360px 1fr 340px; gap:12px; padding:12px 20px 20px; min-height:0; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.card-h { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); }
.card-h h3 { margin:0; font-size:14px; font-weight:600; }
.chips { display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.chip { height:24px; padding:0 9px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:12px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.chip.on { border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }

/* visitor list */
.vlist { overflow:auto; flex:1; }
.v { display:grid; grid-template-columns:auto 1fr auto; gap:2px 10px; padding:11px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; position:relative; }
.v:hover { background:var(--surface-2); }
.v.sel { background:var(--primary-soft); box-shadow:inset 2px 0 0 var(--primary); }
.v.fresh { animation:fresh 1.2s var(--ease); }
@keyframes fresh { from { background:var(--primary-soft); transform:translateY(-4px); opacity:.4 } }
.v .ava { grid-row:1/3; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:12px; color:#fff; position:relative; }
.v .ava .on { position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; background:var(--success); border:2px solid var(--surface); }
.v .name { font-weight:600; display:flex; align-items:center; gap:6px; min-width:0; }
.v .path { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v .r { text-align:right; color:var(--muted); font-size:12px; }
.v .meta { grid-column:2/4; display:flex; gap:6px; align-items:center; color:var(--subtle); font-size:12px; margin-top:4px; flex-wrap:wrap; }
.score { display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:11px; color:var(--primary); }
.bar { width:34px; height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden; }
.bar i { display:block; height:100%; background:var(--primary); border-radius:2px; }

/* player */
.player { display:flex; flex-direction:column; min-width:0; }
.toolbar { display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.toolbar .who { min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.toolbar .btn { flex:none; }
@media (max-width:1500px) { .toolbar .lbl { display:none; } .toolbar .btn:not(.primary) { width:32px; padding:0; justify-content:center; } }
.stage { flex:1; background:var(--surface-2); background-image:radial-gradient(var(--border) 1px,transparent 1px); background-size:16px 16px; display:grid; place-items:center; padding:20px; min-height:0; position:relative; overflow:hidden; }
.frame { width:100%; max-width:640px; border-radius:16px; overflow:hidden; box-shadow:var(--sh-lg); border:1px solid var(--border); background:#fff; position:relative; }
.chrome { height:32px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; padding:0 10px; }
.chrome .d { width:9px; height:9px; border-radius:50%; background:var(--border-strong); }
.chrome .url { margin-left:8px; flex:1; height:20px; border-radius:6px; background:var(--surface-2); color:var(--muted); font-size:11px; display:flex; align-items:center; gap:5px; padding:0 8px; }
/* fake 18.fund donate page */
.site-page { height:360px; position:relative; color:#1a2b4a; font-family:var(--serif),sans-serif; background:linear-gradient(180deg,#e8d7b5 0%,#cdb68a 55%,#9c8457 100%); overflow:hidden; }
.site-page .wall { position:absolute; inset:0; background-image:linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px); background-size:46px 22px; opacity:.8; }
.site-page .nav18 { position:relative; display:flex; align-items:center; gap:14px; padding:10px 16px; background:rgba(255,255,255,.92); font:600 10px Inter; color:#1a2b4a; }
.site-page .nav18 b { font:800 14px var(--serif); color:#b48a2c; margin-right:auto; }
.site-page .nav18 .cta { background:#c9a24a; color:#fff; padding:5px 10px; border-radius:999px; }
.site-page h2 { position:relative; text-align:center; color:#fff; margin:16px 0 10px; font-size:19px; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.donate { position:relative; width:250px; margin:0 auto; background:#fff; border-radius:12px; padding:12px; box-shadow:0 12px 30px rgba(0,0,0,.25); font:500 10px Inter; }
.donate .amts { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:8px 0; }
.donate .amts span { border:1px solid #ddd; border-radius:6px; text-align:center; padding:5px 0; font-weight:600; }
.donate .amts .sel { background:#1a2b4a; color:#fff; border-color:#1a2b4a; }
.donate .field { border:1px solid #ddd; border-radius:6px; padding:6px 8px; margin-top:6px; color:#1a2b4a; display:flex; justify-content:space-between; }
.donate .field.focus { border-color:#6246EA; box-shadow:0 0 0 2px rgba(98,70,234,.2); }
.donate .pay { margin-top:8px; background:#635bff; color:#fff; border-radius:6px; text-align:center; padding:7px; font-weight:600; }
.caret { display:inline-block; width:1px; height:11px; background:#1a2b4a; vertical-align:middle; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0 } }
.cursor { position:absolute; width:18px; height:18px; z-index:5; transition:left .9s var(--ease), top .9s var(--ease); pointer-events:none; }
.agent { position:absolute; z-index:6; display:flex; align-items:flex-start; gap:2px; transition:left .7s var(--ease), top .7s var(--ease); pointer-events:none; }
.agent .tag { background:var(--primary); color:#fff; font:600 10px Inter; padding:2px 6px; border-radius:4px 10px 10px 10px; margin-top:12px; }
.ripple { position:absolute; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; border:2px solid var(--primary); animation:rip .7s ease-out forwards; z-index:4; pointer-events:none; }
@keyframes rip { from { transform:scale(.3); opacity:1 } to { transform:scale(1.6); opacity:0 } }
.livebar { position:absolute; top:12px; left:12px; display:flex; gap:6px; }
.timeline { padding:10px 14px 12px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.track { flex:1; height:6px; border-radius:3px; background:var(--surface-3); position:relative; }
.track .fill { position:absolute; inset:0 4% 0 0; background:var(--primary); border-radius:3px; opacity:.35; }
.track .m { position:absolute; top:-3px; width:4px; height:12px; border-radius:2px; }
.track .head { position:absolute; right:4%; top:-4px; width:14px; height:14px; border-radius:50%; background:var(--live); border:3px solid var(--surface); box-shadow:var(--sh-md); }

/* right panel */
.tabs { display:flex; gap:16px; padding:0 14px; border-bottom:1px solid var(--border); }
.tab { padding:11px 0 9px; color:var(--muted); font-weight:500; border-bottom:2px solid transparent; cursor:pointer; display:flex; gap:6px; align-items:center; }
.tab.on { color:var(--text); border-color:var(--primary); }
.tab .b { font-size:10px; background:var(--danger); color:#fff; border-radius:999px; padding:0 5px; line-height:15px; }
.pane { flex:1; overflow:auto; padding:12px 14px; display:none; }
.pane.on { display:block; }
.kv { display:grid; grid-template-columns:96px 1fr; gap:6px 10px; font-size:12px; }
.kv span { color:var(--muted); }
.kv b { font-weight:500; }
.journey { margin-top:14px; border-left:2px solid var(--border); padding-left:12px; display:flex; flex-direction:column; gap:10px; }
.journey div { position:relative; font-size:12px; }
.journey div::before { content:""; position:absolute; left:-17px; top:5px; width:8px; height:8px; border-radius:50%; background:var(--surface); border:2px solid var(--primary); }
.journey div.now::before { background:var(--primary); }
.journey small { color:var(--subtle); display:block; }
.ev { display:grid; grid-template-columns:52px 18px 1fr; gap:8px; padding:6px 0; font-size:12px; align-items:start; border-bottom:1px dashed var(--border); }
.ev time { color:var(--subtle); }
.alert-card { border:1px solid color-mix(in srgb,var(--danger) 30%,transparent); background:color-mix(in srgb,var(--danger) 6%,transparent); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.alert-card b { color:var(--danger); display:flex; gap:6px; align-items:center; }
.msgs { display:flex; flex-direction:column; gap:8px; }
.msg { max-width:85%; padding:8px 11px; border-radius:12px; font-size:12px; line-height:17px; }
.msg.them { background:var(--surface-2); align-self:flex-start; border-bottom-left-radius:4px; }
.msg.me { background:var(--primary); color:var(--on-primary); align-self:flex-end; border-bottom-right-radius:4px; }
.sys { text-align:center; color:var(--subtle); font-size:11px; }
.composer { border-top:1px solid var(--border); padding:10px; display:flex; flex-direction:column; gap:8px; }
.quick { display:flex; gap:6px; flex-wrap:wrap; }
.composer .in { display:flex; gap:6px; }
.composer input { flex:1; height:34px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--text); padding:0 10px; font:inherit; outline:none; }
.composer input:focus { box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 35%,transparent); border-color:var(--primary); }

/* toast */
.toast { position:fixed; right:20px; bottom:20px; width:330px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--sh-lg); padding:12px 14px 12px 16px; display:flex; gap:10px; transform:translateY(20px); opacity:0; transition:all .25s var(--ease); z-index:20; }
.toast::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:4px; border-radius:0 3px 3px 0; background:var(--warning); }
.toast.show { transform:none; opacity:1; }
.toast b { display:block; }
.toast p { margin:2px 0 8px; color:var(--muted); font-size:12px; }

/* ⌘K */
.cmdk-bg { position:fixed; inset:0; background:rgba(12,12,19,.35); backdrop-filter:blur(2px); display:none; z-index:30; }
.cmdk-bg.on { display:block; }
.cmdk { position:absolute; left:50%; top:18vh; transform:translateX(-50%); width:min(600px,92vw); background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--sh-lg); overflow:hidden; }
.cmdk input { width:100%; height:52px; border:0; border-bottom:1px solid var(--border); background:none; color:var(--text); font:15px Inter; padding:0 18px; outline:none; }
.cmdk .it { display:flex; align-items:center; gap:10px; padding:10px 18px; color:var(--muted); }
.cmdk .it.on { background:var(--primary-soft); color:var(--text); }
.cmdk .grp { padding:10px 18px 4px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--subtle); font-weight:500; }

@media (max-width:1280px) { .work { grid-template-columns:300px 1fr 300px; } .kpis { grid-template-columns:repeat(2,1fr); } }
@media (max-width:980px) { .shell { grid-template-columns:1fr; } .side { display:none; } .work { grid-template-columns:1fr; } .stage { min-height:420px; } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* row quick actions + pop-up composer */
.v .qa { position:absolute; right:12px; top:50%; transform:translateY(-50%); display:flex; gap:4px; opacity:0; transition:opacity .12s; }
.v:hover .qa, .v.composing .qa { opacity:1; }
.v:hover .r, .v.composing .r { visibility:hidden; }
.qa button { height:28px; border-radius:6px; border:1px solid var(--border-strong); background:var(--surface); display:inline-flex; align-items:center; gap:5px; padding:0 9px; cursor:pointer; font-weight:500; font-size:12px; box-shadow:var(--sh-sm); }
.qa button.pri { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.composer-pop { position:fixed; width:380px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--sh-lg); z-index:25; display:none; overflow:hidden; }
.composer-pop.on { display:flex; flex-direction:column; max-height:calc(100vh - 24px); animation:pop .18s var(--ease); }
@keyframes pop { from { opacity:0; transform:translateX(-6px) } }
.composer-pop header { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); }
.composer-pop .body { overflow:auto; min-height:0; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.composer-pop label.l { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:var(--subtle); }
.composer-pop .seg { width:100%; } .composer-pop .seg button { flex:1; display:inline-flex; gap:5px; align-items:center; justify-content:center; }
.field-in { width:100%; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--text); padding:8px 10px; font:inherit; outline:none; }
.field-in:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent); }
textarea.field-in { min-height:70px; resize:vertical; }
.ai-sug { border:1px dashed color-mix(in srgb,var(--primary) 50%,transparent); background:var(--primary-soft); border-radius:10px; padding:9px 11px; font-size:12px; cursor:pointer; }
.ai-sug b { color:var(--primary); display:flex; gap:5px; align-items:center; margin-bottom:2px; }
.btnchips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.btnchips .chip { cursor:default; }
.composer-pop footer { display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--border); background:var(--surface-2); }
.preview-mini { border:1px solid var(--border); border-radius:10px; padding:10px; background:var(--bg); position:relative; height:92px; overflow:hidden; }
.preview-mini .pv { position:absolute; background:#fff; color:#16151F; border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,.18); font-size:10px; padding:6px 8px; border-top:3px solid var(--primary); transition:all .2s var(--ease); }
.preview-mini .pv.bubble { right:8px; bottom:8px; width:150px; }
.preview-mini .pv.modal { left:50%; top:50%; transform:translate(-50%,-50%); width:170px; }
.preview-mini .pv.banner { left:0; right:0; top:0; border-radius:0; border-top:0; border-bottom:3px solid var(--primary); }


/* ---------- Console style layer ---------- */
html,body { font:14px/21px Inter,system-ui,sans-serif; }
.side { background:var(--bg); border-right:1px solid var(--border); padding:14px 10px; }
.brand { padding:2px 8px 14px; }
.brand b { font:500 20px/1 var(--serif); letter-spacing:-.01em; color:var(--text); }
.brand b span { color:inherit; }
.site { background:var(--surface); border-color:var(--border-strong); border-radius:8px; }
.nav { font-size:14px; font-weight:500; color:var(--text); padding:8px 10px; border-radius:8px; }
.nav svg.lucide { color:var(--muted); width:17px; height:17px; }
.nav:hover { background:var(--surface-2); }
.nav.active { background:var(--surface-3); color:var(--text); font-weight:600; }
.nav.active svg.lucide { color:var(--text); }
.nav .cnt { color:var(--muted); font-weight:500; }
.top { background:var(--bg); border-bottom:0; height:72px; padding:0 28px; }
.top h1 { font:400 26px/1.2 var(--serif); letter-spacing:-.01em; }
.btn { border-radius:8px; border-color:var(--border-strong); background:var(--surface); font-size:14px; height:34px; }
.btn:hover { background:var(--surface-2); }
.btn.primary { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.btn.primary:hover { background:var(--primary-hover); }
.kbd { border-radius:4px; background:var(--surface); }
.pill { border-radius:6px; height:22px; font-weight:500; font-size:12px; }
.pill.live { background:var(--accent-soft); color:var(--live); }
.pill.ok { background:#E6F0E4; color:var(--success); }
.pill.idle { background:var(--surface-2); color:var(--muted); }
.pill.err { background:#F6E3E0; color:var(--danger); }
.pill.rage { background:var(--accent-soft); color:var(--rage); }
.pill.new { background:#DFE9FB; color:#2457C5; }
:root[data-theme="dark"] .pill.ok { background:#2F3F30; } :root[data-theme="dark"] .pill.err { background:#4A2D2A; } :root[data-theme="dark"] .pill.new { background:#26364F; color:#8AB4F8; }
.chip { border-radius:6px; border-color:var(--border-strong); color:var(--text); background:var(--surface); font-size:13px; height:28px; }
.chip.on { background:var(--surface-3); border-color:var(--border-strong); color:var(--text); }
.card, .kpi { border-radius:12px; border-color:var(--border); box-shadow:none; background:var(--surface); }
.card-h h3, .col-h h3 { font-weight:600; font-size:15px; }
.kpi { padding:18px 18px 16px; }
.kpi label { color:var(--text); font-size:14px; }
.kpi label svg.lucide { color:var(--muted); }
.kpi .v { font:600 30px/38px Inter,system-ui,sans-serif; letter-spacing:-.02em; }
.delta { border-radius:6px; }
.delta.up { background:#E6F0E4; }
.kpis { padding:4px 28px 0; gap:14px; }
.work { padding:14px 28px 24px; gap:14px; }
.v.sel { background:var(--surface-2); box-shadow:inset 3px 0 0 var(--accent); }
.score { color:var(--text); } .bar i { background:var(--accent); }
.tab.on { border-color:var(--text); }
.tabs .tab .b { background:var(--danger); }
.seg { background:var(--surface-2); border:1px solid var(--border); }
.seg button.on { background:var(--surface); box-shadow:0 1px 2px rgba(20,20,19,.08); }
.stage { background:var(--surface-2); background-image:none; }
.frame { border-radius:12px; box-shadow:0 8px 24px -10px rgba(20,20,19,.25); }
.msg.me { background:var(--text); color:var(--bg); }
.toast { border-radius:12px; }
.toast::before { background:var(--accent); }
.avatar { background:var(--surface-3); color:var(--text); }
.ai-sug { background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.ai-sug b { color:var(--accent); }
.kind.ai { background:var(--accent-soft); color:var(--accent); }
.kind.auto { background:#DFE9FB; color:#2457C5; }
.switch.on { background:var(--success); }
.node.sel { border-color:var(--text); box-shadow:0 0 0 3px rgba(20,20,19,.08); }
.node.t-ai { border-color:color-mix(in srgb,var(--accent) 50%,var(--border)); background:linear-gradient(180deg,var(--accent-soft),var(--surface) 65%); }
#edges path.hot { stroke:var(--accent); }
.port.out:hover, .port.armed { border-color:var(--accent); background:var(--accent); }
.canvas-wrap { background:var(--bg); background-image:radial-gradient(var(--border-strong) 1px,transparent 1px); }
a { color:var(--link); }
.link { color:var(--link); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.composer-pop { border-radius:12px; }