/* Zero — cinematic command deck. Dark glass HUD over live deep space. Performance-first:
   heavy blurs live on cached compositor layers (transform-only animation); per-frame paint
   is limited to tiny areas (1px edge-light rings, the canvases). No backdrop-filter on cards. */

/* animatable angle for the light that runs around card edges (Chrome/Edge; degrades to static) */
@property --edge{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --bg:#04070c; --bg2:#070d14;
  --surface:rgba(255,255,255,.04); --surface2:rgba(255,255,255,.075);
  --border:rgba(var(--ice),.14); --border2:rgba(var(--ice),.24);
  --text:#eaf4ee; --muted:#8aa898; --faint:#5e7469;
  /* hero accent (themeable) + warm complement; --accent stays per-card */
  --ice:104,220,160; --ice-deep:34,126,82;
  --gold:224,186,100; --accent:104,220,160;
  --glass:rgba(7,11,18,.88);
  --aura1:40,150,112; --aura1b:28,96,140; --aura2:98,70,190; --aura2b:150,42,116;
  --orb-idle:96,172,130; --orb-live:104,222,154; --orb-think:118,210,200; --orb-speak:128,230,154;
}
/* ── themes: pick in Settings; persisted in localStorage ── */
body[data-theme="sunset"]{--ice:255,124,106;--ice-deep:196,64,58;--gold:255,204,124;--muted:#b39a8c;--faint:#82695c;
  --glass:rgba(26,13,15,.9);
  --aura1:255,110,70;--aura1b:220,60,110;--aura2:150,70,190;--aura2b:255,150,90;
  --orb-idle:220,116,96;--orb-live:255,136,112;--orb-think:255,176,120;--orb-speak:255,150,116}
body[data-theme="synth"]{--ice:255,84,164;--ice-deep:176,28,118;--gold:96,225,255;--muted:#b58ca6;--faint:#7d5f74;
  --glass:rgba(26,8,26,.9);
  --aura1:255,60,150;--aura1b:120,40,220;--aura2:60,200,255;--aura2b:210,60,255;
  --orb-idle:214,86,160;--orb-live:255,96,176;--orb-think:150,180,255;--orb-speak:255,120,190}
body[data-theme="winter"]{--ice:152,208,255;--ice-deep:72,124,196;--gold:255,198,122;--muted:#93a9c4;--faint:#64778f;
  --glass:rgba(10,16,28,.9);
  --aura1:90,160,230;--aura1b:60,110,190;--aura2:170,140,255;--aura2b:110,190,235;
  --orb-idle:122,168,218;--orb-live:152,208,255;--orb-think:182,226,255;--orb-speak:162,214,255}
body[data-theme="hallow"]{--ice:255,142,52;--ice-deep:192,84,22;--gold:176,124,255;--muted:#b0987e;--faint:#7d6a54;
  --glass:rgba(22,10,28,.92);
  --aura1:255,120,30;--aura1b:150,60,200;--aura2:122,60,200;--aura2b:255,100,40;
  --orb-idle:216,122,62;--orb-live:255,150,62;--orb-think:192,132,255;--orb-speak:255,162,82}
body[data-theme="pro"]{--ice:178,198,216;--ice-deep:84,104,124;--gold:120,200,255;--muted:#8a97a4;--faint:#5c6772;
  --glass:rgba(10,13,18,.96);
  --aura1:60,80,105;--aura1b:40,55,75;--aura2:70,90,115;--aura2b:50,65,88;
  --orb-idle:150,166,182;--orb-live:190,210,228;--orb-think:150,195,232;--orb-speak:200,220,240}
body[data-theme="arc"]{--ice:92,198,255;--ice-deep:30,100,170;--gold:255,200,112;--muted:#8ba3bd;--faint:#5d7186;
  --aura1:36,130,210;--aura1b:30,90,170;--aura2:120,90,220;--aura2b:40,150,200;
  --orb-idle:78,150,210;--orb-live:96,200,255;--orb-think:110,220,235;--orb-speak:120,212,255}
body[data-theme="plasma"]{--ice:172,140,255;--ice-deep:96,62,180;--gold:255,170,220;--muted:#a093c0;--faint:#6d6486;
  --aura1:120,70,220;--aura1b:80,40,170;--aura2:200,60,160;--aura2b:90,60,220;
  --orb-idle:140,115,215;--orb-live:176,146,255;--orb-think:200,150,255;--orb-speak:186,156,255}
body[data-theme="ember"]{--ice:255,152,92;--ice-deep:180,76,30;--gold:255,214,124;--muted:#b09a8a;--faint:#7a685c;
  --aura1:220,110,40;--aura1b:180,50,60;--aura2:140,60,190;--aura2b:220,90,60;
  --orb-idle:210,130,80;--orb-live:255,158,96;--orb-think:255,190,110;--orb-speak:255,170,105}
body[data-theme="frost"]{--ice:186,214,255;--ice-deep:96,128,196;--gold:210,232,255;--muted:#93a7c4;--faint:#64748f;
  --aura1:90,140,220;--aura1b:60,100,180;--aura2:140,170,255;--aura2b:80,130,210;
  --orb-idle:150,176,220;--orb-live:190,216,255;--orb-think:170,220,250;--orb-speak:200,222,255}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);overflow-x:hidden;
  font-family:"Segoe UI Variable Display","Segoe UI",-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:.01em}
/* ── live deep-space background: starfield canvas + drifting planets + aurora washes ── */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:#030509}
#space{position:absolute;inset:0;width:100%;height:100%;display:block}
.aura{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(72px);
  mix-blend-mode:screen;will-change:transform}
.aura.a1{left:-20vmax;top:-24vmax;opacity:.5;
  background:radial-gradient(circle at 50% 50%,rgba(var(--aura1),.30),rgba(var(--aura1b),.10) 55%,transparent 72%);
  animation:aura1 90s ease-in-out infinite alternate}
.aura.a2{right:-22vmax;bottom:-26vmax;opacity:.42;
  background:radial-gradient(circle at 50% 50%,rgba(var(--aura2),.28),rgba(var(--aura2b),.10) 55%,transparent 72%);
  animation:aura2 110s ease-in-out infinite alternate}
@keyframes aura1{to{transform:translate(9vmax,7vmax) rotate(35deg) scale(1.08)}}
@keyframes aura2{to{transform:translate(-8vmax,-6vmax) rotate(-28deg) scale(1.05)}}
.lnk{cursor:pointer}
.muted{color:var(--muted);font-size:12px;line-height:1.5}
/* subtle film-grain scanlines over everything — cinematic texture, zero interaction cost */
.grain{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.65) 0 1px,transparent 1px 3px)}
/* boot splash — one quick "systems online" flicker on load, never blocks input */
#boot{position:fixed;inset:0;z-index:30;display:grid;place-items:center;align-content:center;gap:9px;
  background:#04070c;pointer-events:none;animation:bootOut .6s ease 1.25s forwards}
.boot-z{font-size:34px;font-weight:800;letter-spacing:.5em;text-indent:.5em;color:rgb(var(--ice));
  text-shadow:0 0 30px rgba(var(--ice),.8);animation:bootFlicker 1.2s steps(12) both}
.boot-sub{font-size:10px;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--muted);
  animation:bootFlicker 1.2s steps(8) both}
@keyframes bootFlicker{0%{opacity:0}8%{opacity:.9}12%{opacity:.2}22%{opacity:1}30%{opacity:.4}45%{opacity:1}60%{opacity:.7}100%{opacity:1}}
@keyframes bootOut{to{opacity:0;visibility:hidden}}

/* ── top bar ── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;
  padding:15px 22px;background:linear-gradient(180deg,rgba(4,6,12,.78),rgba(4,6,12,.28) 70%,transparent);
  backdrop-filter:blur(8px) saturate(1.2)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--ice),.34) 30%,rgba(150,190,255,.3) 55%,rgba(190,140,255,.24) 75%,transparent)}
.brand{font-weight:750;font-size:14.5px;letter-spacing:.36em;display:flex;align-items:baseline;gap:12px}
.zname{background:linear-gradient(90deg,rgb(var(--ice)),#5fd6ec,#a78bfa,#f0a878,rgb(var(--gold)),rgb(var(--ice)));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;animation:flow 9s linear infinite;
  filter:drop-shadow(0 0 14px rgba(var(--ice),.35))}
@keyframes flow{to{background-position:300% 0}}
.brand-sub{font-weight:400;font-size:10px;letter-spacing:.24em;color:var(--faint);text-transform:uppercase}
.top-right{display:flex;align-items:center;gap:12px}
.tclock{font-size:12.5px;font-weight:600;letter-spacing:.12em;color:rgba(var(--ice),.95);
  font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(var(--ice),.45);margin-right:2px}
/* live stats ticker — rotating readout dead-centre in the topbar */
.ticker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:36vw;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
  font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  opacity:.95;transition:opacity .45s ease;pointer-events:none}
.ticker.fade{opacity:0}
.ticker b{color:rgb(var(--ice));font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em;
  text-shadow:0 0 10px rgba(var(--ice),.4)}
.ticker .up{color:#3ad28c}.ticker .dn{color:#f0768a}
@media(max-width:1100px){.ticker{display:none}}
.health{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);letter-spacing:.02em;
  padding:6px 12px;border-radius:99px;border:1px solid var(--border);background:rgba(6,10,17,.55)}
.dot{width:7px;height:7px;border-radius:50%}
.dot.good{background:#5fe8b2;box-shadow:0 0 10px #5fe8b2,0 0 22px rgba(95,232,178,.5);animation:pulse 2.6s ease-in-out infinite}
.dot.bad{background:#f0768a;box-shadow:0 0 10px #f0768a}
.icon-btn{background:var(--surface);border:1px solid var(--border);color:#c4cee0;border-radius:11px;
  width:33px;height:33px;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,box-shadow .25s,transform .15s}
.icon-btn:hover{background:var(--surface2);border-color:var(--border2);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 14px rgba(var(--ice),.18)}
.icon-btn.on{background:rgba(255,107,107,.14);border-color:#ff6b6b;color:#ff9d9d}
/* top-right dropdown menu — collapses the icon row into one clean list with full names */
.menuwrap{position:relative}
.topmenu{position:absolute;top:calc(100% + 9px);right:0;z-index:60;min-width:224px;padding:7px;
  background:var(--glass);border:1px solid var(--border2);border-radius:15px;
  box-shadow:0 26px 64px -20px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px) saturate(1.15);display:flex;flex-direction:column;gap:1px;
  animation:tmIn .16s cubic-bezier(.2,.8,.2,1)}
.topmenu.hidden{display:none}
@keyframes tmIn{from{opacity:0;transform:translateY(-7px) scale(.98)}to{opacity:1;transform:none}}
.tm-h{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  padding:9px 11px 4px}
.tm-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:10px;
  background:none;border:0;color:var(--text);font-size:13.5px;font-weight:500;cursor:pointer;
  text-decoration:none;text-align:left;letter-spacing:.01em;width:100%;transition:background .12s,color .12s}
.tm-item:hover{background:rgba(var(--accent),.14);color:#fff}
.tm-item>span:first-child{font-size:15px;width:20px;text-align:center;flex:0 0 20px}
.tm-item>span#muteBtn.on{color:#ff9d9d}
#orb[data-state="muted"]{filter:grayscale(.6) brightness(.5);opacity:.6;transition:filter .3s,opacity .3s}

/* ── stage ── */
/* single-screen layout: widgets spread in two rails AROUND the centre orb — no page scroll */
.stage{height:100vh;overflow:hidden;display:grid;gap:16px;padding:74px 20px 18px;
  grid-template-columns:minmax(228px,1fr) minmax(430px,1.62fr) minmax(228px,1fr)}
.rail{display:flex;flex-direction:column;gap:14px;min-height:0}
.rail>.panel{flex:1 1 0;min-height:150px}
.rail>.slot{flex:2.1 1 0;display:flex;flex-direction:column;gap:14px;min-height:0}
.rail>.slot>.mod{flex:1 1 0;min-height:0;overflow:hidden}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0;text-align:center}
.center>.slot{width:100%;max-width:640px;margin-top:2px}

/* ── the glass-sphere orb ── */
#orb{position:relative;flex:none;margin-top:34px;width:clamp(150px,19vmin,212px);height:clamp(150px,19vmin,212px);--lvl:0;
  animation:breathe 7s ease-in-out infinite}  /* margin-top so the halo/aurora isn't clipped by the fixed topbar */
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.012)}}
/* colourful slowly-rotating aurora glowing around the orb */
#orb::before{content:"";position:absolute;inset:-26%;border-radius:50%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg, rgba(150,190,255,0), rgba(120,235,180,.4), rgba(95,214,236,.34),
    rgba(167,139,250,.36), rgba(120,220,205,.3), rgba(240,168,120,.22), rgba(150,190,255,0));
  filter:blur(16px);opacity:.55;animation:spin 18s linear infinite}
/* counter-rotating instrument ring — the HUD frame around the sphere */
#orb::after{content:"";position:absolute;inset:-12.5%;border-radius:50%;pointer-events:none;
  border:1px dashed rgba(var(--ice),.30);opacity:.75;
  box-shadow:0 0 24px -6px rgba(var(--ice),.25),inset 0 0 24px -10px rgba(var(--ice),.2);
  animation:spinRev 46s linear infinite}
@keyframes spinRev{to{transform:rotate(-360deg)}}
#orb>*{position:absolute;inset:0;border-radius:50%}
.orb-shadow{inset:auto 14% -13% 14%;height:20%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent 72%);filter:blur(11px)}
.orb-halo{inset:-36%;filter:blur(10px);opacity:.5;transition:opacity .5s ease;
  background:radial-gradient(closest-side,rgba(var(--ice),.24),rgba(var(--ice),.05) 56%,transparent 72%)}
.orb-body{
  background:
    radial-gradient(125% 125% at 33% 25%,
      rgba(244,252,250,.6), rgba(var(--ice),.24) 28%, rgba(var(--ice-deep),.3) 60%, rgba(4,12,14,.62) 100%);
  box-shadow:
    inset 0 9px 28px rgba(255,255,255,.22),
    inset 0 -24px 46px rgba(4,14,16,.72),
    inset 0 0 0 1px rgba(var(--ice),.14),
    0 24px 60px rgba(0,0,0,.55),
    0 0 42px -8px rgba(var(--ice),.3);
  backdrop-filter:blur(1.5px)}
.orb-core{inset:25%;filter:blur(3px);
  background:radial-gradient(closest-side,rgba(235,250,246,.97),rgba(var(--ice),.55) 46%,rgba(var(--ice-deep),0) 73%);
  transform:scale(calc(.78 + var(--lvl)*.5));opacity:calc(.42 + var(--lvl)*.55);
  transition:transform .12s linear,opacity .12s linear;will-change:transform,opacity}
.orb-gloss{
  background:
    radial-gradient(40% 27% at 33% 23%, rgba(255,255,255,.92), rgba(255,255,255,0) 70%),
    radial-gradient(22% 13% at 67% 78%, rgba(var(--ice),.3), transparent 70%);
  mix-blend-mode:screen}
.orb-ring{inset:5%;border:1px solid rgba(var(--ice),.15);opacity:0;transition:opacity .4s}

#orb[data-state="idle"]{--ice:var(--orb-idle)}
#orb[data-state="listening"],#orb[data-state="hearing"]{--ice:var(--orb-live)}
#orb[data-state="thinking"]{--ice:var(--orb-think)}
#orb[data-state="speaking"]{--ice:var(--orb-speak)}
#orb[data-state="listening"] .orb-halo,#orb[data-state="hearing"] .orb-halo{opacity:.85}
#orb[data-state="thinking"] .orb-halo{opacity:.72}
#orb[data-state="speaking"] .orb-halo{opacity:.95;animation:halo 1.7s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.66}50%{opacity:1}}
#orb[data-state="thinking"] .orb-ring{opacity:1;border-top-color:rgba(150,236,204,.65);animation:spin 2.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── assistant state text ── */
.state{font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--muted);font-weight:500}
.said{font-size:clamp(17px,1.7vw,22px);font-weight:300;color:#eef3fb;max-width:360px;text-align:center;min-height:24px}
.reply{font-size:clamp(14px,1.5vw,17px);color:rgb(var(--ice));max-width:340px;text-align:center;line-height:1.5;opacity:.96}
.state,.said,.reply{text-shadow:0 1px 16px rgba(4,3,12,.7)}

/* ── holo response HUD — Iron-Man-style analysis panel that boots up near the orb ── */
.hud{--hc:var(--ice);position:relative;width:min(450px,88vw);text-align:left;
  opacity:0;transform:translateY(12px) scale(.96);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.9,.2,1)}
.hud:empty{display:none}
.hud.in{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.hud.in .hud-frame{animation:hudBoot .55s ease-out}
@keyframes hudBoot{0%{clip-path:inset(46% 0 46% 0);filter:brightness(2.2) saturate(1.3)}
  55%{clip-path:inset(0 0 0 0)}72%{filter:brightness(1.5)}100%{filter:brightness(1)}}
.hud-frame{position:relative;padding:13px 16px 14px;border-radius:14px;overflow:hidden;cursor:pointer;
  background:linear-gradient(180deg,rgba(var(--hc),.14),rgba(var(--hc),.035)),rgba(5,9,17,.8);
  border:1px solid rgba(var(--hc),.42);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 52px rgba(0,0,0,.5),0 0 36px rgba(var(--hc),.22),inset 0 0 30px rgba(var(--hc),.05)}
.hud-frame::before{content:"";position:absolute;inset:5px;pointer-events:none;background-repeat:no-repeat;background:
  linear-gradient(rgba(var(--hc),.9),rgba(var(--hc),.9)) left top/14px 1.5px no-repeat,
  linear-gradient(rgba(var(--hc),.9),rgba(var(--hc),.9)) left top/1.5px 14px no-repeat,
  linear-gradient(rgba(var(--hc),.9),rgba(var(--hc),.9)) right top/14px 1.5px no-repeat,
  linear-gradient(rgba(var(--hc),.9),rgba(var(--hc),.9)) right top/1.5px 14px no-repeat,
  linear-gradient(rgba(var(--hc),.9),rgba(var(--hc),.9)) left bottom/14px 1.5px no-repeat,
  linear-gradient(rgba(var(--hc),.9),rgba(var(--hc),.9)) left bottom/1.5px 14px no-repeat,
  linear-gradient(rgba(var(--hc),.9),rgba(var(--hc),.9)) right bottom/14px 1.5px no-repeat,
  linear-gradient(rgba(var(--hc),.9),rgba(var(--hc),.9)) right bottom/1.5px 14px no-repeat}
.hud-scan{position:absolute;left:0;right:0;top:0;height:46px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(var(--hc),.12),transparent);
  transform:translateY(-46px);animation:hudScan 3.4s linear infinite}
@keyframes hudScan{to{transform:translateY(430px)}}
.hud-head{position:relative;display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;
  font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(var(--hc),.95)}
.hud-head i{font-style:normal;color:rgba(var(--hc),.6);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.hud-main{position:relative;display:flex;align-items:center;gap:15px}
.hud-ring{position:relative;width:76px;height:76px;flex:none}
.hud-ring svg{position:absolute;inset:0;width:100%;height:100%}
.hud-ring circle{fill:none;stroke:rgba(var(--hc),.85);stroke-width:2;stroke-linecap:round}
.hud-r1{animation:spin 10s linear infinite}
.hud-r2{animation:spinRev 6s linear infinite}
.hud-r2 circle{stroke:rgba(var(--hc),.4);stroke-width:1.5}
.hud-core{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-size:26px;filter:drop-shadow(0 0 10px rgba(var(--hc),.6))}
.hud-val{font-size:17px;font-weight:750;color:rgb(var(--hc));font-variant-numeric:tabular-nums;line-height:1;
  text-shadow:0 0 14px rgba(var(--hc),.6);max-width:60px;overflow:hidden;text-overflow:ellipsis}
.hud-body{min-width:0;flex:1}
.hud-title{font-size:15.5px;font-weight:650;color:#eef6ff;line-height:1.25;margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-big{font-size:25px;font-weight:300;color:#eef6ff;line-height:1.15}
.hud-line{font-size:12px;line-height:1.45;color:rgba(var(--hc),.95);min-height:17px;
  font-family:"Cascadia Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.hud-line::after{content:"▍";animation:pulse 1s steps(2) infinite;opacity:.7}
.hud-line.done::after{content:""}
.hud-chips{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.hud-chip{padding:5px 10px 6px;border-radius:8px;border:1px solid rgba(var(--hc),.34);
  background:rgba(var(--hc),.08);min-width:56px}
.hud-chip b{display:block;font-size:14px;font-weight:700;color:rgb(var(--hc));font-variant-numeric:tabular-nums;line-height:1.15}
.hud-chip span{display:block;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:1px;
  max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══ shared HUD card treatment — market panels + command modules ══
   deep glass body, hairline gradient frame, and a thin light that endlessly RUNS around
   the edge (painted area = a 1px masked ring, so per-frame cost stays tiny). */
.panel,.mod{position:relative;border-radius:19px;border:1px solid rgba(var(--accent),.17);
  background:
    radial-gradient(140% 90% at 50% -20%,rgba(var(--accent),.13),rgba(var(--accent),.015) 55%),
    linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 30%),
    var(--glass);
  box-shadow:0 16px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s,box-shadow .3s,transform .25s}
.panel::after,.mod::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;z-index:2;
  background:conic-gradient(from var(--edge),
    rgba(var(--accent),.10), rgba(var(--accent),.06) 30%,
    rgba(var(--accent),.95) 47%, rgba(255,255,255,.85) 50%, rgba(var(--accent),.95) 53%,
    rgba(var(--accent),.06) 70%, rgba(var(--accent),.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:edgerun 9s linear infinite;opacity:.85}
@keyframes edgerun{to{--edge:360deg}}
.panel:hover,.mod:hover{border-color:rgba(var(--accent),.4);
  transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-1px);
  box-shadow:0 20px 48px rgba(0,0,0,.44),0 0 30px -8px rgba(var(--accent),.35),inset 0 1px 0 rgba(255,255,255,.07)}

/* ── live market panels (BTC + XAUUSD candlesticks) ── */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(1320px,96vw);margin:5vh auto 0}
.panel{--accent:120,214,164;display:flex;flex-direction:column;min-height:300px;padding:16px 18px 14px}
.panel-head{display:flex;align-items:baseline;gap:12px}
.panel-sym{font-weight:800;font-size:16px;letter-spacing:.06em;color:rgb(var(--accent));
  text-shadow:0 0 16px rgba(var(--accent),.5)}
.panel-sym i{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--faint);margin-left:3px}
.panel-price{font-weight:280;font-size:24px;color:#f2f6fd;font-variant-numeric:tabular-nums}
.panel-chg{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.panel-chg.up{color:#3ad28c;text-shadow:0 0 12px rgba(58,210,140,.45)}
.panel-chg.dn{color:#f0768a;text-shadow:0 0 12px rgba(240,118,138,.45)}
.panel-live{margin-left:auto;width:8px;height:8px;border-radius:50%;align-self:center;
  background:rgb(var(--accent));box-shadow:0 0 10px rgb(var(--accent)),0 0 22px rgba(var(--accent),.55);
  animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
.panel-cv{flex:1;width:100%;display:block;min-height:0;margin-top:8px}

/* ── command-center modules — permanent equal panels, accent-coloured ── */
.center>.slot>.mod{flex:0 0 auto}   /* the centre 'Today' card sizes to its content */
.mod{display:flex;flex-direction:column;overflow:hidden}
.mod-head{display:flex;align-items:center;gap:11px;padding:16px 17px 11px;
  color:var(--text);font-size:15px;font-weight:600}
.mod-ic{color:rgb(var(--accent));font-size:17px;width:22px;height:22px;line-height:22px;text-align:center;
  border-radius:7px;background:rgba(var(--accent),.12);
  box-shadow:0 0 14px -2px rgba(var(--accent),.5),inset 0 0 0 1px rgba(var(--accent),.22);
  text-shadow:0 0 8px rgba(var(--accent),.8)}
.mod-title{font-weight:650;letter-spacing:.02em}
.mod-sum{margin-left:auto;color:rgb(var(--accent));font-size:12px;font-weight:600;display:flex;align-items:center;gap:5px;opacity:.95}
.mod-sum.bad{color:#f0768a}
.mod-body{flex:1;padding:2px 17px 17px;overflow:hidden;min-height:0}
.mod-body::-webkit-scrollbar{width:5px}.mod-body::-webkit-scrollbar-thumb{background:rgba(var(--accent),.3);border-radius:3px}

.rgraph{width:100%;height:92px;display:block;margin:-2px 0 5px;overflow:visible}
.rgraph line{stroke:rgba(var(--accent),.34);stroke-width:.8;filter:drop-shadow(0 0 4px rgba(var(--accent),.45))}
.rgraph circle{fill:rgba(8,16,30,.9);stroke:rgb(var(--accent));stroke-width:1.3;filter:drop-shadow(0 0 7px rgba(var(--accent),.65))}
.rgraph circle.hub{fill:rgb(var(--accent));stroke:#fff}
.rgraph text{font-size:5.4px;fill:#dce7f7;text-anchor:middle;paint-order:stroke;stroke:rgba(0,0,0,.75);stroke-width:2px}
.rcards{display:grid;gap:7px}
.rcard{border:1px solid rgba(var(--accent),.2);background:rgba(var(--accent),.055);border-radius:10px;padding:7px 9px}
.rcard b{display:block;font-size:11px;color:rgb(var(--accent));margin-bottom:1px}
.rcard span{display:block;font-size:9.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcard p{margin-top:4px;color:#dbe6f2;font-size:10.5px;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.sd{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.sd.on{background:#5fe8b2;box-shadow:0 0 8px #5fe8b2,0 0 16px rgba(95,232,178,.5)}
.sd.off{background:#f0768a;box-shadow:0 0 8px #f0768a}

/* system rows */
.srow{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#d3dbe9;padding:5px 7px;margin:0 -7px;border-radius:8px;
  transition:background .2s}
.srow:hover{background:rgba(var(--accent),.06)}
.srow .r{margin-left:auto;color:var(--faint);font-size:11px}
.sdiv{height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent),.25),transparent);margin:8px 0}
.sw{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#d3dbe9;cursor:pointer;padding:2px 0}
.sw input{accent-color:rgb(var(--accent));width:15px;height:15px}
.mbtn{margin-top:10px;width:100%;background:linear-gradient(180deg,rgba(var(--accent),.2),rgba(var(--accent),.1));
  color:#eef6f1;border:1px solid rgba(var(--accent),.3);
  border-radius:9px;padding:8px;font-size:12.5px;cursor:pointer;transition:background .2s,box-shadow .25s,border-color .2s}
.mbtn:hover{background:linear-gradient(180deg,rgba(var(--accent),.3),rgba(var(--accent),.16));
  border-color:rgba(var(--accent),.5);box-shadow:0 0 18px -4px rgba(var(--accent),.45)}

/* tasks */
.tlist{display:flex;flex-direction:column;gap:2px}
.titem{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#d3dbe9;padding:3px 0;
  transition:opacity .2s}
.titem label{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer}
.titem input{accent-color:rgb(var(--accent));width:14px;height:14px;flex:none}
.titem.done span{color:var(--faint);text-decoration:line-through}
.tdel{margin-left:auto;color:var(--faint);font-size:15px;background:none;border:0;cursor:pointer;line-height:1}
.tdel:hover{color:#f0768a;text-shadow:0 0 10px rgba(240,118,138,.7)}
.tadd{display:flex;gap:6px;margin-top:9px}
.tadd .field{flex:1;margin:0}
.tadd .mbtn{margin:0;width:auto;padding:8px 12px}

/* calendar */
.calbig{font-size:38px;font-weight:200;line-height:1;color:#f2f6fd;display:flex;align-items:baseline;gap:9px}
.calbig span{font-size:13px;color:var(--muted);font-weight:400}
.cltime{color:rgb(var(--accent));font-size:13px;margin-top:5px;letter-spacing:.04em;
  text-shadow:0 0 12px rgba(var(--accent),.5)}
.wkstrip{display:flex;justify-content:space-between;gap:3px;margin-top:13px}
.wd{flex:1;text-align:center;padding:6px 0;border-radius:9px;font-size:11px;color:var(--muted)}
.wd b{display:block;font-size:13px;color:#cdd6e6;font-weight:500;margin-top:2px}
.wd.today{background:linear-gradient(180deg,rgba(var(--gold),.24),rgba(var(--gold),.1));
  box-shadow:0 0 16px -4px rgba(var(--gold),.55),inset 0 0 0 1px rgba(var(--gold),.35)}
.wd.today b,.wd.today span{color:rgb(var(--gold))}

/* weather + 7-day forecast — compact so the whole week shows without scrolling */
.wxnow{display:flex;align-items:center;gap:10px;margin-top:0}
.wxic{font-size:24px;line-height:1;filter:drop-shadow(0 0 12px rgba(var(--accent),.45))}
.wxtemp{font-size:24px;font-weight:200;line-height:1;color:#f2f6fd}
.wxweek{margin-top:6px;display:flex;flex-direction:column;gap:1px}
.wxday{display:grid;grid-template-columns:36px 16px 26px 1fr 26px;align-items:center;gap:6px;font-size:11px;line-height:1.15;color:#cdd6e6}
.wxd{color:var(--muted)}.wxdi{text-align:center;font-size:13px}
.wxlo{color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.wxhi{color:#eef3fb;text-align:right;font-variant-numeric:tabular-nums}
.wxbarw{position:relative;height:5px;border-radius:3px;background:rgba(255,255,255,.07)}
.wxbar{position:absolute;top:0;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#5fd0e6,#68ce96,#d4b060,#f0a878);
  box-shadow:0 0 8px rgba(104,206,150,.4)}

/* news — featured top story + live list */
.nlive{display:inline-block;width:6px;height:6px;border-radius:50%;background:rgb(var(--accent));
  box-shadow:0 0 7px rgb(var(--accent));margin-right:5px;vertical-align:middle;animation:pulse 1.8s ease-in-out infinite}
.nfeat{display:block;text-decoration:none;padding:9px 11px;margin-bottom:8px;border-radius:11px;
  background:linear-gradient(180deg,rgba(var(--accent),.17),rgba(var(--accent),.045));border:1px solid rgba(var(--accent),.3);
  transition:border-color .2s,box-shadow .25s}
.nfeat:hover{border-color:rgba(var(--accent),.55);box-shadow:0 0 20px -6px rgba(var(--accent),.5)}
.nfeat-tag{display:block;font-size:9.5px;letter-spacing:.1em;font-weight:700;color:rgb(var(--accent));margin-bottom:4px}
.nfeat-t{display:block;font-size:13px;line-height:1.3;color:#eef3fb;font-weight:500}
.nfeat:hover .nfeat-t{color:rgb(var(--accent))}
.nitem{display:grid;grid-template-columns:16px 1fr auto;align-items:baseline;gap:8px;font-size:12px;
  color:#cdd6e6;text-decoration:none;padding:6px 0;line-height:1.35;border-bottom:1px solid var(--border);
  transition:transform .18s ease}
.nitem:hover{transform:translateX(3px)}
.nitem:last-child{border-bottom:0}
.nnum{color:rgb(var(--accent));font-weight:700;font-size:11px;opacity:.7}
.ntext{min-width:0}.nitem:hover .ntext{color:rgb(var(--accent))}
.ntime{color:var(--faint);font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* trading — positions + performance */
.tpos{color:#3ad28c}.tneg{color:#f0768a}
/* the Trading card is the hero of the left rail — bigger + floated to the top */
.rail>.slot>.mod.trade-big{order:-1;flex:2.5 1 0}
.trade-big .mod-title{font-size:16px}
.trlive{width:7px;height:7px;border-radius:50%;background:#3ad28c;display:inline-block;
  animation:trpulse 1.6s ease-out infinite}
@keyframes trpulse{0%{box-shadow:0 0 0 0 rgba(58,210,140,.55)}70%{box-shadow:0 0 0 7px rgba(58,210,140,0)}100%{box-shadow:0 0 0 0 rgba(58,210,140,0)}}
.trhero{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;
  padding:14px 15px;margin:3px 0 11px;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(var(--accent),.14),rgba(var(--accent),.02));
  border:1px solid rgba(var(--accent),.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 24px -10px rgba(var(--accent),.4)}
.trhero::after{content:"";position:absolute;top:0;bottom:0;width:46%;left:-60%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.06) 45%,rgba(var(--accent),.10) 50%,rgba(255,255,255,.06) 55%,transparent);
  animation:sheen 6.5s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-60%}90%,100%{left:130%}}
.trheq,.trhpl{display:flex;flex-direction:column;gap:3px;min-width:0}
.trhpl{text-align:right}
.trbig{font-size:clamp(19px,1.9vw,27px);font-weight:750;color:#f4f8fe;letter-spacing:-.5px;line-height:1.02;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.trhpl.tpos .trbig{color:#46e09a;text-shadow:0 0 18px rgba(70,224,154,.45)}
.trhpl.tneg .trbig{color:#f0768a;text-shadow:0 0 18px rgba(240,118,138,.4)}
.trbig i{font-style:normal;font-size:15px;opacity:.85}
.trlbl{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.trchips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.trchip{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,.035);border:1px solid var(--border);transition:border-color .2s,background .2s}
.trchip:hover{border-color:rgba(var(--accent),.35);background:rgba(var(--accent),.07)}
.trk{font-size:9.5px;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.trv{font-size:15px;font-weight:650;color:#eef3fb;font-variant-numeric:tabular-nums}
.trhead{display:flex;align-items:center;justify-content:space-between;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:11px 0 3px}
.trupd{letter-spacing:.02em;text-transform:none;color:var(--muted);font-size:10px}
.trlist{display:flex;flex-direction:column}
.trrow{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:9px;
  font-size:13px;color:#d3dbe9;padding:8px 0;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.trrow:last-child{border-bottom:0}
.trsym{font-weight:650;color:#eef3fb}
.trside{font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:5px}
.trside.long,.trside.buy{color:#3ad28c;background:rgba(58,210,140,.14);box-shadow:inset 0 0 0 1px rgba(58,210,140,.25)}
.trside.short,.trside.sell{color:#f0768a;background:rgba(240,118,138,.14);box-shadow:inset 0 0 0 1px rgba(240,118,138,.25)}
.trpx{color:var(--muted);font-size:11px;text-align:right}
.trpnl{font-weight:700;text-align:right;white-space:nowrap}

/* Workshop — working/resting summary + tappable live activity log */
.mod-sum .wsbusy{display:inline-flex;align-items:center;gap:5px;color:#6ed69a;font-weight:700}
.mod-sum .wsbusy-dot{width:7px;height:7px;border-radius:50%;background:#46e09a;animation:trpulse 1.6s ease-out infinite}
.mod-sum .wsrest{color:var(--muted);font-weight:600}
.mod-sum .wscount{color:rgb(var(--accent));font-weight:700;opacity:.9}
.mod-sum .wscount + span{padding-left:8px;margin-left:2px;border-left:1px solid var(--border)}
.mod-sum .wstap{margin-left:6px;color:rgb(var(--accent));opacity:.65;font-size:9px}
.wslog{position:absolute;inset:0;background:rgba(7,10,17,.86);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);display:flex;flex-direction:column;padding:12px 13px;gap:8px;z-index:5}
.wslog[hidden]{display:none}
.wshead{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--accent));font-weight:700}
.wsx{cursor:pointer;font-size:9.5px;font-weight:700;letter-spacing:.05em;color:#cfd9ea;padding:4px 10px;border-radius:7px;
  border:1px solid var(--border);background:rgba(255,255,255,.06);text-transform:uppercase}
.wsx:hover{color:#fff;background:rgba(240,118,138,.22);border-color:rgba(240,118,138,.5)}
.wslist{flex:1 1 0;display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.wslist::-webkit-scrollbar{width:7px}
.wslist::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px}
.wslist::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
.wsrow{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--border)}
.wsrow{transition:background .25s ease,border-color .25s ease}
.wsrow.on{background:rgba(var(--c,110,214,158),.11);border-color:rgba(var(--c,110,214,158),.34);box-shadow:0 0 0 1px rgba(var(--c,110,214,158),.10),0 6px 18px -10px rgba(var(--c,110,214,158),.5)}
.wsdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 9px rgba(var(--c,150,200,240),.95)}
.wsrow.on .wsdot{animation:trpulse 1.7s ease-out infinite}
.wsmid{flex:1;min-width:0}
.wstop{display:flex;align-items:center;gap:7px}
.wstop b{color:#eef3fb;font-size:12.5px}
.wstier{font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:rgba(var(--c,150,160,180),.92);padding:1px 5px;border-radius:5px;background:rgba(var(--c,255,255,255),.10)}
.wsdoing{font-size:11px;color:#c7d3e3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.wsrow.on .wsdoing{color:#eaf1fb;font-weight:600}
.wsraw{font-size:9px;color:var(--faint);font-family:"Cascadia Mono",ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;opacity:.85}
.wsr{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.wsbadge{font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:6px}
.wsbadge.on{color:#0c160f;background:rgb(var(--c,70,224,154));box-shadow:0 0 10px rgba(var(--c,70,224,154),.6)}
.wsbadge.off{color:var(--muted);background:rgba(255,255,255,.06)}
.wssince{font-size:9px;color:var(--faint)}

/* cost & health cockpit */
.cost-hd{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;margin:2px 0 6px}
.cost-hd b{font-size:15px;font-weight:750;font-variant-numeric:tabular-nums}
.cost-ok{color:#46e09a}.cost-warn{color:#ffc55a}.cost-crit{color:#f0768a}
.cost-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.cost-fill{display:block;height:100%;border-radius:5px;transition:width .5s ease}
.cost-fill.ok{background:linear-gradient(90deg,#3ad28c,#46e09a)}
.cost-fill.warn{background:linear-gradient(90deg,#e6b34a,#ffc55a)}
.cost-fill.crit{background:linear-gradient(90deg,#d85668,#f0768a)}
.cost-split{display:flex;gap:11px;flex-wrap:wrap;margin:9px 0 2px;font-size:11px;font-variant-numeric:tabular-nums}
.cost-split span{color:var(--muted)}
.cost-split .cost-c{color:#f0a878}.cost-split .cost-l{color:#6ed69a}.cost-split .cost-n{color:#a78bfa}
.cost-split .cost-t{margin-left:auto;color:var(--faint)}
.cost-err{margin-top:9px;font-size:10.5px;color:#ffb0ba;background:rgba(240,118,138,.1);
  border:1px solid rgba(240,118,138,.28);border-radius:8px;padding:6px 9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* weather city selector */
.wxsel{display:flex;gap:5px;margin:0 0 9px}
.wxpill{flex:1;padding:5px 4px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.03);
  color:var(--muted);font-size:10.5px;font-weight:600;cursor:pointer;transition:all .15s}
.wxpill:hover{color:#eef3fb;border-color:rgba(var(--accent),.4)}
.wxpill.on{color:rgb(var(--accent));background:rgba(var(--accent),.13);border-color:rgba(var(--accent),.5);
  box-shadow:0 0 12px -3px rgba(var(--accent),.5)}

/* ===== Galaxy map page ===== */
.gx-body{margin:0;height:100vh;overflow:hidden;background:#04040b}
#gx{position:fixed;inset:0;display:block;width:100vw;height:100vh;cursor:grab}
.gx-top{position:fixed;top:0;left:0;right:0;height:54px;display:flex;align-items:center;gap:16px;padding:0 18px;z-index:10;
  background:linear-gradient(180deg,rgba(4,4,12,.75),rgba(4,4,12,0));pointer-events:none}
.gx-top>*{pointer-events:auto}
.gx-back{color:#d6c4ff;text-decoration:none;font-weight:600;font-size:13px;padding:7px 13px;border-radius:10px;
  border:1px solid rgba(190,150,255,.32);background:rgba(190,150,255,.1);transition:all .15s}
.gx-back:hover{background:rgba(190,150,255,.22)}
.gx-title{font-weight:700;letter-spacing:.18em;font-size:12px;color:#dca0ff;text-transform:uppercase;
  text-shadow:0 0 14px rgba(210,90,255,.6)}
.gx-stat{margin-left:auto;font-size:11px;color:rgba(190,200,225,.7);font-variant-numeric:tabular-nums}
.gx-hint{position:fixed;bottom:18px;left:0;right:0;text-align:center;font-size:11px;color:rgba(190,200,235,.45);z-index:10;pointer-events:none;letter-spacing:.02em}
.gx-panel{position:fixed;top:66px;right:16px;width:300px;max-height:calc(100vh - 92px);overflow:auto;z-index:11;
  background:rgba(9,9,20,.93);border:1px solid rgba(160,130,255,.3);border-radius:16px;padding:15px 16px;
  box-shadow:0 18px 54px rgba(0,0,0,.55),0 0 40px rgba(140,80,255,.12);backdrop-filter:blur(4px)}
.gx-panel.hidden{display:none}
.gxp-head{display:flex;align-items:center;gap:9px}
.gxp-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 12px currentColor}
.gxp-name{font-weight:700;font-size:16px;color:#f1f4fb}
.gxp-x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;padding:0 2px}
.gxp-x:hover{color:#fff}
.gxp-status{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:3px 9px;border-radius:7px;display:inline-block;margin:7px 0 9px}
.gxp-status.online{color:#0c160f;background:#46e09a}
.gxp-status.busy{color:#1a1206;background:#ffc55a}
.gxp-status.offline{color:#fff;background:#f0768a}
.gxp-detail{font-size:12px;color:#c6d2e3;line-height:1.5;margin-bottom:10px}
.gxp-acts{display:flex;flex-direction:column;gap:7px}
.gxp-btn{padding:9px 12px;border-radius:10px;border:1px solid rgba(160,130,255,.32);background:rgba(160,130,255,.11);
  color:#e9e2ff;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;transition:all .14s}
.gxp-btn:hover{background:rgba(160,130,255,.24);border-color:rgba(160,130,255,.5)}
.gxp-btn:disabled{opacity:.5;cursor:wait}
.gxp-out{margin-top:11px;font-family:"Cascadia Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:#a6bad4;
  white-space:pre-wrap;background:rgba(0,0,0,.4);border-radius:9px;padding:9px;max-height:210px;overflow:auto;border:1px solid rgba(255,255,255,.05)}
.galaxy-link{font-size:15px;color:#cf9bff !important}
.galaxy-link:hover{color:#e3c4ff !important;text-shadow:0 0 12px rgba(207,155,255,.7)}

/* ── settings modal ── */
.field{width:100%;background:rgba(7,11,19,.88);border:1px solid var(--border2);border-radius:10px;
  padding:10px 12px;color:var(--text);font-size:13.5px;outline:none;transition:border-color .2s,box-shadow .25s}
.field:focus{border-color:rgb(var(--accent));box-shadow:0 0 0 3px rgba(var(--accent),.14)}
.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(2,4,9,.66);backdrop-filter:blur(8px)}
.modal.hidden{display:none}
.card{background:linear-gradient(180deg,rgba(var(--ice),.07),rgba(var(--ice),.015)),rgba(10,14,24,.94);
  border:1px solid var(--border2);border-radius:18px;padding:22px;width:340px;max-width:90vw;
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 40px -12px rgba(var(--ice),.25)}
.card h3{font-weight:550;margin-bottom:13px;font-size:14px;letter-spacing:.06em;color:#dce6f4;text-transform:uppercase}
.card .field{margin-bottom:10px}
.theme-row{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:14px}
.tsw{width:31px;height:31px;border-radius:50%;cursor:pointer;padding:0;flex:none;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(var(--sw),1) 45%,rgba(var(--sw),.55));
  border:2px solid rgba(var(--sw),.4);box-shadow:0 0 12px -2px rgba(var(--sw),.6);
  transition:transform .15s,box-shadow .2s,border-color .2s}
.tsw:hover{transform:scale(1.12);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(var(--sw),1) 45%,rgba(var(--sw),.55))}
.tsw.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.3),0 0 18px rgba(var(--sw),.9)}
.bgp{flex:1;padding:8px 6px;border-radius:9px;border:1px solid var(--border);background:rgba(255,255,255,.04);
  color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.bgp:hover{color:#eef3fb;border-color:rgba(var(--ice),.4);background:rgba(255,255,255,.04)}
.bgp.on{color:rgb(var(--ice));background:rgba(var(--ice),.13);border-color:rgba(var(--ice),.5);
  box-shadow:0 0 14px -4px rgba(var(--ice),.55)}
.row{display:flex;gap:10px}
button{background:linear-gradient(180deg,rgba(var(--ice),.22),rgba(var(--ice),.12));color:#e3eeff;
  border:1px solid rgba(var(--ice),.3);border-radius:10px;
  padding:9px 15px;font-size:13.5px;cursor:pointer;transition:background .2s,box-shadow .25s}
button:hover{background:linear-gradient(180deg,rgba(var(--ice),.32),rgba(var(--ice),.18));
  box-shadow:0 0 18px -4px rgba(var(--ice),.45)}
button.ghost{background:var(--surface);border-color:var(--border2);color:#c4cee0}

/* ═══ PRO MODE — mission-control design system (the "Pro" backdrop applies this) ═══
   One steel accent across the whole UI; colour is reserved for DATA (green up, red down).
   Hairline borders, sharper corners, uppercase micro-labels, monospace numerals, no glow noise. */
body[data-mode="pro"] .aura{opacity:.1}
body[data-mode="pro"] .grain{display:none}
/* PRO — solid institutional terminal: opaque steel panels, crisp depth, one signal accent */
body[data-mode="pro"]{--gold:96,206,255}   /* signal cyan */
body[data-mode="pro"] .mod,body[data-mode="pro"] .panel{--accent:150,182,214 !important;
  border-radius:8px;border:1px solid rgba(150,182,215,.16);
  background:
    linear-gradient(180deg,rgba(150,182,215,.05),rgba(150,182,215,0) 26%),
    linear-gradient(180deg,#111721,#0b0f16);
  box-shadow:0 16px 40px -14px rgba(0,0,0,.72),inset 0 1px 0 rgba(190,214,240,.07)}
/* clean inner hairline frame + a top signal edge, instead of the cheap corner ticks */
body[data-mode="pro"] .mod::after,body[data-mode="pro"] .panel::after{animation:none;opacity:1;
  inset:0;padding:0;-webkit-mask:none;mask:none;border-radius:inherit;background:none;
  box-shadow:inset 0 0 0 1px rgba(150,182,215,.08)}
body[data-mode="pro"] .mod::before,body[data-mode="pro"] .panel::before{content:"";position:absolute;
  left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;border-radius:8px 8px 0 0;
  background:linear-gradient(90deg,transparent 6%,rgba(96,206,255,.75) 50%,transparent 94%);
  box-shadow:0 0 12px -1px rgba(96,206,255,.5)}
body[data-mode="pro"] .mod:hover::before,body[data-mode="pro"] .panel:hover::before{
  background:linear-gradient(90deg,transparent 3%,rgba(120,216,255,.95) 50%,transparent 97%);
  box-shadow:0 0 16px 0 rgba(96,206,255,.7)}
/* hairline rule under each header with a single electric-cyan signal segment */
body[data-mode="pro"] .mod-head{position:relative;border-bottom:1px solid rgba(190,210,230,.08);margin-bottom:5px}
body[data-mode="pro"] .mod-head::after{content:"";position:absolute;left:17px;bottom:-1px;width:26px;height:1px;
  background:rgb(var(--gold));box-shadow:0 0 8px rgba(var(--gold),.6)}
body[data-mode="pro"] .mod:hover,body[data-mode="pro"] .panel:hover{border-color:rgba(190,215,235,.3);
  box-shadow:0 14px 36px rgba(0,0,0,.5)}
body[data-mode="pro"] .mod-head{padding:14px 16px 10px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
body[data-mode="pro"] .mod-ic{background:none;box-shadow:none;border:1px solid rgba(190,210,230,.2);border-radius:4px;
  font-size:12px;width:20px;height:20px;line-height:19px;text-shadow:none}
body[data-mode="pro"] .mod-sum{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
body[data-mode="pro"] .panel-price,body[data-mode="pro"] .trbig,body[data-mode="pro"] .trv,
body[data-mode="pro"] .calbig,body[data-mode="pro"] .wxtemp,body[data-mode="pro"] .hud-val,
body[data-mode="pro"] .tclock,body[data-mode="pro"] .ticker b{
  font-family:"Cascadia Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500}
body[data-mode="pro"] .panel-sym,body[data-mode="pro"] .panel-chg.up,body[data-mode="pro"] .panel-chg.dn{text-shadow:none}
body[data-mode="pro"] .sd,body[data-mode="pro"] .dot,body[data-mode="pro"] .wsdot,
body[data-mode="pro"] .panel-live,body[data-mode="pro"] .nlive,body[data-mode="pro"] .trlive,
body[data-mode="pro"] .mod-sum .wsbusy-dot{border-radius:2px}
body[data-mode="pro"] #orb::before{opacity:.28}
/* instrument bezel: a fine graduated tick ring, rotating imperceptibly */
body[data-mode="pro"] #orb::after{opacity:.55;border:none;inset:-9%;
  background:repeating-conic-gradient(rgba(var(--ice),.55) 0deg .7deg,transparent .7deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent 91.5%,#000 92.5%);
  mask:radial-gradient(closest-side,transparent 91.5%,#000 92.5%);
  box-shadow:none;animation:spinRev 150s linear infinite}
body[data-mode="pro"] .zname{background-image:linear-gradient(90deg,#e8f0f6,#9fb8cc,#dfe9f2,#e8f0f6);filter:none}
body[data-mode="pro"] .trhero{background:rgba(255,255,255,.02);border:1px solid rgba(190,210,230,.12);box-shadow:none}
body[data-mode="pro"] .trhero::after{display:none}
body[data-mode="pro"] .wd.today{background:rgba(var(--gold),.12);box-shadow:inset 0 0 0 1px rgba(var(--gold),.38)}
body[data-mode="pro"] .health,body[data-mode="pro"] .icon-btn,body[data-mode="pro"] .mbtn,
body[data-mode="pro"] button,body[data-mode="pro"] .field{border-radius:6px}
body[data-mode="pro"] .stage,body[data-mode="pro"] .rail,body[data-mode="pro"] .rail>.slot{gap:12px}

/* calm mode — respect the user's OS setting; the dashboard stays fully functional, just still */
@media (prefers-reduced-motion: reduce){
  .zname,.aura,.panel::after,.mod::after,#orb,#orb::before,#orb::after,.trhero::after,
  .dot.good,.panel-live,.nlive,.trlive,.mod-sum .wsbusy-dot,
  .hud.in .hud-frame,.hud-scan,.hud-r1,.hud-r2,.hud-line::after,.boot-z,.boot-sub,
  .orb-halo,.orb-ring,.wsrow.on .wsdot{animation:none !important}
  #boot{display:none}
}

/* narrow screens: stack into one column (scroll allowed only here; the wide desktop fits) */
@media(max-width:980px){
  .stage{height:auto;min-height:100vh;overflow:visible;grid-template-columns:1fr;padding:64px 16px 24px}
  .rail{min-height:0}
  .rail>.panel{flex:0 0 auto;min-height:240px}
  .rail>.slot{flex:0 0 auto}
  .rail>.slot>.mod{flex:0 0 auto}
  .brand-sub{display:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   COMMAND DECK v2 — full dashboard relayout (2026-07). The old .stage/.rail
   markup is gone: a left CONSOLE (orb + real conversation) and a right BOARD
   (12-col grid where every module gets real space; Trading is the hero).
   Component styles (.mod/.panel/orb/hud/themes) above are reused untouched.
   ════════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════════
   ORB HERO v3 — Zero is the star. A big centred orb, live state, the last
   exchange, and a quiet input; a couple of restrained widgets on slim side rails.
   Cinematic, minimal, lots of negative space. Reuses .mod/.panel/orb/hud/themes.
   ════════════════════════════════════════════════════════════════════════════ */
.stage{height:100vh;height:100dvh;display:grid;align-items:stretch;gap:clamp(14px,2.4vw,26px);
  padding:clamp(70px,8vh,82px) clamp(16px,2.4vw,30px) clamp(16px,2.4vh,26px);
  grid-template-columns:minmax(200px,290px) minmax(0,1fr) minmax(200px,290px)}

/* slim side rails — widgets vertically centred beside the orb; rails fill the row, content is centred */
.rail{display:flex;flex-direction:column;justify-content:center;gap:16px;min-height:0;overflow:hidden}
.rail>.slot{display:flex;flex-direction:column;gap:16px;min-height:0;justify-content:center}
.rail .mod{flex:0 1 auto;min-height:118px;max-height:40vh;display:flex;flex-direction:column}
.rail .mod .mod-body{flex:1;overflow:hidden;scrollbar-width:none}
.rail .mod .mod-body::-webkit-scrollbar{display:none}
.rail .panel{flex:0 0 auto;height:160px;display:flex;flex-direction:column;overflow:hidden}
.rail .panel .panel-cv{flex:1;min-height:0;width:100%}

/* the hero column */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  text-align:center;min-height:0;min-width:0}
.stage #orb{width:clamp(140px,min(30vmin,30vh),340px);height:clamp(140px,min(30vmin,30vh),340px);margin:0;flex:none}
.stage .state{font-size:clamp(14px,1.4vw,17px);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:rgba(var(--accent),.9);text-shadow:0 0 18px rgba(var(--accent),.5)}
.stage .said{font-size:clamp(16px,1.7vw,21px);font-weight:300;color:#e9eef7;max-width:min(680px,80%);
  min-height:0;opacity:.92}
.stage .reply{font-size:clamp(17px,1.9vw,23px);font-weight:350;line-height:1.5;color:#f3f7fd;
  max-width:min(720px,84%);text-shadow:0 1px 20px rgba(var(--accent),.22);opacity:.98;
  animation:replyIn .4s ease-out}
.stage .reply:empty{display:none}
@keyframes replyIn{from{opacity:0;transform:translateY(8px)}to{opacity:.98;transform:none}}
.stage .hud{width:min(460px,84%);margin-top:6px}

/* the quiet input — a pill, unobtrusive until focused */
.chatbar{display:flex;gap:8px;width:min(560px,80%);margin-top:8px}
.chatin{flex:1;min-width:0;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  border-radius:999px;color:#eef3fb;padding:12px 18px;font-size:14px;font-family:inherit;outline:none;
  text-align:center;transition:border-color .2s,box-shadow .2s,background .2s}
.chatin::placeholder{color:#7e8aa0;letter-spacing:.02em}
.chatin:focus{border-color:rgba(var(--accent),.6);background:rgba(255,255,255,.06);text-align:left;
  box-shadow:0 0 0 3px rgba(var(--accent),.12),0 8px 26px rgba(0,0,0,.35)}
.chatsend{flex:none;width:46px;border-radius:999px;border:1px solid rgba(var(--accent),.42);cursor:pointer;
  background:rgba(var(--accent),.16);color:rgb(var(--accent));font-size:15px;transition:background .2s,transform .15s}
.chatsend:hover{background:rgba(var(--accent),.32);transform:scale(1.05)}

/* Workshop scene — docks as a cinematic strip along the bottom when enabled */
.stagefloor{grid-column:1/-1;align-self:end;text-align:left}
.stagefloor[hidden]{display:none}
body.has-stage .stage{padding-bottom:0;grid-template-rows:1fr auto}
body.has-stage .rail,body.has-stage .hero{grid-row:1}
.stagefloor{grid-row:2;height:clamp(230px,34vh,420px);width:100%;padding:0;border:0;background:none}
.stagefloor>.slot{width:100%;height:100%;display:flex;flex-direction:column;margin:0;max-width:none}
.stagefloor>.slot>*{flex:1;min-height:0}

/* ════════════════════════════════════════════════════════════════════════════
   BENTO v4 — the AI is the biggest TILE in a full grid, not a hero in a void.
   Fixes "empty but cramped": negative space lives INSIDE tiles (roomy padding),
   gaps between them are tight + uniform, depth comes from luminance + 1px
   hairlines (no drop shadows), and the ORB is the only animated glow on screen.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --gap:18px; --pad:20px; --r-lg:20px; --r-sm:15px;
  --font-mono:ui-monospace,"Cascadia Mono","JetBrains Mono",Consolas,monospace;
  --tile:rgba(255,255,255,.042); --tile-hi:rgba(255,255,255,.066);
  --hair:rgba(255,255,255,.075); --hair-hi:rgba(255,255,255,.15);
}
/* full-bleed bento grid under the fixed topbar */
.stage{height:100dvh;display:grid;align-items:stretch;gap:var(--gap);
  padding:calc(58px + var(--gap)) var(--gap) var(--gap);
  grid-template-columns:minmax(226px,1fr) minmax(0,2.2fr) minmax(226px,1fr)}

/* CLEAN premium tile: luminance surface + hairline + top sheen. No drop shadow, no edge animation. */
.panel,.mod{background:var(--tile);border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 0 var(--hair-hi);transition:background .2s,border-color .2s}
.panel::after,.mod::after{display:none!important}   /* kill the running edge-light — orb is the only animation */
.panel:hover,.mod:hover{transform:none;background:var(--tile-hi);border-color:var(--hair-hi);
  box-shadow:inset 0 1px 0 0 var(--hair-hi)}

/* side rails = vertical stacks of equal tiles that FILL the column height (no slivers, no void) */
.rail{display:flex;flex-direction:column;gap:var(--gap);justify-content:stretch;min-height:0;overflow:hidden}
.rail>.slot{display:flex;flex-direction:column;gap:var(--gap);min-height:0;height:100%;justify-content:stretch}
.rail .mod,.rail .panel{flex:1 1 0;min-height:96px}
.rail .mod .mod-body{flex:1;overflow:hidden;scrollbar-width:none;min-height:0}
/* Trading P&L = the clear #2 focal point: it gets more of the rail */
.rail>.slot>.mod.trade-big{flex:1.7 1 0;order:-1}

/* the ORB tile — dominant central tile; the orb glows inside a calm surface */
.hero{background:var(--tile);border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 0 var(--hair-hi);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:clamp(18px,3vh,34px);min-height:0}
.stage #orb{width:clamp(150px,min(32vmin,34vh),320px);height:clamp(150px,min(32vmin,34vh),320px);margin:0;flex:none}

/* tiny uppercase mono tile labels — "designed instrument", not "webpage" */
.mod-head{padding:16px 18px 10px}
.mod-title,.panel-sym{font-family:var(--font-mono)!important;font-size:11px!important;font-weight:600!important;
  letter-spacing:.14em!important;text-transform:uppercase;color:var(--muted)!important;text-shadow:none!important}
.mod-ic{box-shadow:inset 0 0 0 1px rgba(var(--accent),.22)}   /* calm icon — no outer glow */
/* every metric/number in tabular mono so it reads engineered */
.panel-price,.panel-chg,.jnpl,.clk-time,.trbig,.dgbig{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* glass belongs only on the chat bar (Raycast) — not the data tiles */
.chatbar{width:min(560px,88%)}
.chatin{background:rgba(255,255,255,.05);backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);border-color:var(--hair-hi)}

/* Workshop strip becomes a clean full-width tile at the bottom */
body.has-stage .stagefloor{border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 0 var(--hair-hi);overflow:hidden;background:var(--tile)}
/* the workshop card must FILL the strip — beats the legacy .center>.slot>.mod{flex:0 0 auto} that
   collapsed it to just the header (stagefloor still carries the .center class). */
body.has-stage .stagefloor>.slot>.mod{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.has-stage .stagefloor .mod-body{flex:1 1 auto;min-height:0}

/* When there are spare widgets, the workshop CENTERS (col 2) with a widget column on EACH end.
   Full-width if there are no spare tiles. */
.stageside{display:none}
body.has-bottom .stagefloor{grid-column:2}
body.has-bottom .stageleft{grid-column:1;grid-row:2}
body.has-bottom .stageright{grid-column:3;grid-row:2}
body.has-bottom .stageside{display:flex;flex-direction:column;gap:var(--gap);min-height:0;overflow:hidden}
body.has-bottom .stageside>.slot{display:flex;flex-direction:column;gap:var(--gap);height:100%;min-height:0}
body.has-bottom .stageside .mod,body.has-bottom .stageside .panel{flex:1 1 0;min-height:0}

/* ── short viewports: keep everything on one screen (shrink orb/gaps before anything clips) ── */
@media(min-width:1081px) and (max-height:820px){
  .stage{gap:16px;padding-top:66px}
  .stage .said{font-size:15px}
  .stage .reply{font-size:16px}
  .stage .hud{margin-top:2px}
  .chatbar{margin-top:4px}
}
@media(min-width:1081px) and (max-height:660px){
  .stage{gap:12px;padding-top:60px;padding-bottom:12px}
  .stagefloor{height:clamp(180px,26vh,260px)}
  .rail .mod{min-height:96px;max-height:32vh}
}
/* genuinely tiny windows: stop clipping — let it scroll rather than hide the orb */
@media(min-width:1081px) and (max-height:520px){
  .stage{height:auto;min-height:100dvh;overflow-y:auto}
}

/* Customize button */
.dash-edit{position:fixed;right:18px;bottom:16px;z-index:7;width:auto;padding:8px 15px;border-radius:999px;
  font-size:12.5px;font-weight:650;letter-spacing:.02em;cursor:pointer;color:rgb(var(--accent));
  border:1px solid rgba(var(--accent),.4);background:rgba(10,14,22,.82);backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.4);transition:background .2s,transform .15s}
.dash-edit:hover{background:rgba(var(--accent),.18);transform:translateY(-1px)}

/* ── new widget internals ── */
.dgbig{font-size:15px;font-weight:650;margin:2px 0 9px}
.dgbig.ok{color:#7fe0b0}.dgbig.bad{color:#ff9a86}
.srow .r.bad{color:#ff9a86}
.jnpl{font-size:clamp(24px,3vw,34px);font-weight:750;letter-spacing:-.01em;line-height:1.05}
.jnrow{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:#c3cddc;padding:5px 0;border-top:1px solid rgba(255,255,255,.05)}
.jnrow b{font-size:13px}
.jnsyms{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.jnsyms span{font-size:11px;font-weight:600;color:rgb(var(--accent));background:rgba(var(--accent),.13);
  border:1px solid rgba(var(--accent),.25);border-radius:6px;padding:2px 7px}
.clk-time{font-size:clamp(34px,4.4vw,52px);font-weight:250;letter-spacing:.01em;line-height:1;color:#eef3fb;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.clk-time i{font-size:.42em;font-weight:500;color:rgb(var(--accent));opacity:.9}
.clk-date{margin-top:10px;color:#aeb9cb;font-size:13px}
.tpos{color:#7fe0b0}.tneg{color:#ff9a86}

/* ── customize modal ── */
.wg-hint{color:#9aa6b8;font-size:12.5px;margin:-2px 0 12px}
.wg-hint b{color:rgb(var(--accent))}
.wg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.wg-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);transition:border-color .18s,background .18s;text-align:center}
.wg-item input{display:none}
.wg-item.on{border-color:rgba(var(--accent),.55);background:rgba(var(--accent),.12)}
.wg-item.wg-dim{opacity:.4;cursor:not-allowed}
.wg-ic{width:30px;height:30px;line-height:30px;text-align:center;border-radius:9px;font-size:16px;color:rgb(var(--accent));
  background:rgba(var(--accent),.14);box-shadow:inset 0 0 0 1px rgba(var(--accent),.22)}
.wg-nm{font-size:12px;font-weight:600;color:#dbe3ef}

/* ── responsive: bento collapses to a clean single-column stack, orb-first ── */
@media(max-width:1080px){
  .stage{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:min-content;
    height:auto;min-height:100dvh;overflow-y:auto;gap:14px;padding:72px 16px 24px}
  .hero{order:-1;min-height:42vh;padding:24px}
  .stage #orb{width:clamp(150px,40vw,240px);height:clamp(150px,40vw,240px)}
  .rail{display:grid;grid-template-columns:1fr 1fr;gap:14px;overflow:visible;min-height:0}
  .rail>.slot{display:contents}
  .rail .mod,.rail .panel{flex:none;min-height:170px}
  body.has-stage .stagefloor{order:99;height:280px}
  body.has-bottom .stagefloor,body.has-bottom .stageside{grid-column:1/-1;grid-row:auto}
  body.has-bottom .stageleft{order:97}
  body.has-bottom .stageside{order:100;flex-direction:row;flex-wrap:wrap}
  body.has-bottom .stageside .mod{flex:1 1 260px;min-height:150px}
}
@media(max-width:600px){
  .stage{padding:66px 12px 22px;gap:12px}
  .rail{grid-template-columns:1fr}      /* one tile per row on phones */
  .dash-edit{bottom:10px;right:10px}
}

/* ── specialized agents (text / email) ── */
.agent-card{width:min(440px,92vw)}
.ag-hint{color:#9aa6b8;font-size:12.5px;margin:-2px 0 12px;line-height:1.4}
.ag-msgwrap{position:relative}
.ag-msg{width:100%;resize:vertical;min-height:66px;line-height:1.5;padding-right:46px}
.ag-mic{position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(var(--accent),.4);background:rgba(var(--accent),.14);color:rgb(var(--accent));
  font-size:14px;line-height:1;transition:background .18s,transform .12s}
.ag-mic:hover{background:rgba(var(--accent),.28)}
.ag-mic.rec{background:#ff5b6a;border-color:#ff5b6a;color:#fff;animation:agpulse 1s ease-in-out infinite}
@keyframes agpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,91,106,.5)}50%{box-shadow:0 0 0 7px rgba(255,91,106,0)}}
.ag-status{min-height:17px;margin:9px 0 4px;font-size:12.5px;color:rgb(var(--accent));font-weight:600}
.ag-status.ok{color:#7fe0b0}.ag-status.bad{color:#ff9a86}
.ag-select{width:100%;margin-bottom:10px;cursor:pointer}
.ag-result{white-space:pre-wrap;word-break:break-word;max-height:min(46vh,340px);overflow:auto;margin:10px 0 2px;
  padding:11px 13px;background:rgba(7,11,19,.9);border:1px solid var(--border2);border-radius:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;color:#d6deea}
.ag-hint a{color:rgb(var(--accent));text-decoration:none;font-weight:600}.ag-hint a:hover{text-decoration:underline}

/* ============ Chat tab (Claude Code–style agentic chat) v54 ============ */
#chatView{position:fixed;inset:0;z-index:60;background:linear-gradient(180deg,var(--bg),var(--bg2));display:flex;justify-content:center}
#chatView.hidden{display:none}
.chat-shell{width:min(880px,100%);height:100%;display:flex;flex-direction:column;padding:0 14px}
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 4px 10px;border-bottom:1px solid var(--border)}
.chat-title{font-weight:700;font-size:16px;color:var(--text);margin-right:auto;letter-spacing:.2px}
.chat-model{background:rgba(var(--ice),.08);color:var(--text);border:1px solid var(--border2);border-radius:9px;padding:6px 8px;font-size:12.5px;max-width:190px}
.chat-btn{background:rgba(var(--ice),.06);color:var(--text);border:1px solid var(--border2);border-radius:9px;padding:6px 11px;font-size:12.5px;cursor:pointer}
.chat-btn:hover{background:rgba(var(--ice),.16)}
.chat-thread{flex:1;overflow-y:auto;padding:18px 4px;display:flex;flex-direction:column;gap:14px}
.cmsg{display:flex;flex-direction:column;max-width:100%}
.cmsg.cme{align-items:flex-end}
.cmsg.cma{align-items:flex-start}
.cbub{border-radius:14px;padding:11px 14px;font-size:14.5px;line-height:1.5;max-width:86%;word-wrap:break-word;white-space:normal}
.cme .cbub{background:rgba(var(--ice),.20);color:var(--text);border-bottom-right-radius:5px}
.cma .cbub{background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);border-bottom-left-radius:5px}
.cbub.cerr{background:rgba(220,80,80,.16);border-color:rgba(220,80,80,.4)}
.cbub .cf{background:#0a1017;border:1px solid var(--border);border-radius:9px;padding:9px 11px;overflow-x:auto;margin:6px 0;font-size:12.5px}
.cbub code{background:rgba(var(--ice),.12);padding:1px 5px;border-radius:5px;font-size:12.5px}
.cbub .cf code{background:none;padding:0}
.cbub .mh{font-weight:700;margin:5px 0 2px}
.cbub .mli{margin:2px 0}
.cbub a{color:rgb(var(--ice));text-decoration:none;border-bottom:1px solid rgba(var(--ice),.4)}
/* tool cards */
.csteps{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;max-width:86%}
.ctool{background:rgba(var(--ice),.05);border:1px solid var(--border);border-left:3px solid rgba(var(--ice),.5);border-radius:9px;padding:7px 11px;font-size:12.5px;color:var(--muted)}
.ctool b{color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ctool .cargs{color:var(--faint);margin-left:7px;font-family:ui-monospace,monospace;font-size:11.5px}
.ctool .cres{margin-top:5px;color:var(--muted);font-family:ui-monospace,monospace;font-size:11.5px;white-space:pre-wrap;word-break:break-word;max-height:120px;overflow-y:auto}
.ctool .cres:empty{display:none}
.ctool.done{border-left-color:rgb(var(--ice))}
.ctool .cok{color:rgb(var(--ice));font-weight:700;margin-right:6px}
.cspin{display:inline-block;width:9px;height:9px;margin-right:6px;border:2px solid rgba(var(--ice),.3);border-top-color:rgb(var(--ice));border-radius:50%;animation:cspin .7s linear infinite;vertical-align:-1px}
@keyframes cspin{to{transform:rotate(360deg)}}
/* thinking dots */
.cbub.cthinking{display:inline-flex;gap:5px;align-items:center;padding:14px}
.cdot{width:7px;height:7px;border-radius:50%;background:rgba(var(--ice),.6);animation:cbounce 1.2s infinite ease-in-out}
.cdot:nth-child(2){animation-delay:.18s}.cdot:nth-child(3){animation-delay:.36s}
@keyframes cbounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
/* composer */
.chat-composer{display:flex;gap:9px;align-items:flex-end;padding:12px 4px 16px;border-top:1px solid var(--border)}
#chatMsg{flex:1;resize:none;background:rgba(var(--ice),.06);color:var(--text);border:1px solid var(--border2);border-radius:12px;padding:11px 13px;font-size:14.5px;line-height:1.45;font-family:inherit;max-height:160px;outline:none}
#chatMsg:focus{border-color:rgba(var(--ice),.5)}
.chat-send{background:rgb(var(--ice));color:#04140b;border:0;border-radius:11px;padding:11px 18px;font-weight:700;font-size:13.5px;cursor:pointer}
.chat-send:disabled{opacity:.5;cursor:default}
@media(max-width:560px){.cbub,.csteps{max-width:94%}.chat-model{max-width:120px}}