:root {
  --bg:#04060c; --panel:rgba(9,14,26,.82); --line:rgba(0,229,255,.16);
  --cyan:#00e5ff; --magenta:#ff2ec4; --violet:#7b5cff; --teal:#2dd4bf; --amber:#ffb454; --pink:#f472b6;
  --fg:#d6e4ff; --dim:#7488ad; --green:#37d39b; --red:#ff5c7a;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body {
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -5%, rgba(0,229,255,.06), transparent 60%),
    var(--bg);
  color:var(--fg); overflow-x:hidden;
}
.grain { position:fixed; inset:0; z-index:1; pointer-events:none; mix-blend-mode:overlay;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 3px); }

/* ---------------- HUD header ---------------- */
.hud { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:14px 22px; border-bottom:1px solid var(--line); background:rgba(4,6,12,.7); backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.logo { font-size:26px; color:var(--cyan); filter:drop-shadow(0 0 10px rgba(0,229,255,.9)); animation:spin 9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.title { font-weight:800; letter-spacing:3px; font-size:19px; }
.title .accent { color:var(--cyan); }
.sub { font-size:10.5px; letter-spacing:1.5px; color:var(--dim); text-transform:uppercase; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hud-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ambient-link { font-size:11px; letter-spacing:2px; color:var(--violet); text-decoration:none; text-transform:uppercase;
  border:1px solid rgba(123,92,255,.4); padding:5px 12px; border-radius:999px; }
.ambient-link:hover { text-shadow:0 0 8px rgba(123,92,255,.9); box-shadow:0 0 12px rgba(123,92,255,.3); }
.pill { padding:5px 12px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  border:1px solid var(--line); color:var(--dim); }
.pill.running { color:var(--green); border-color:rgba(55,211,155,.5); text-shadow:0 0 8px rgba(55,211,155,.7); animation:pulse 2s infinite; }
.pill.passive,.pill.paused,.pill.focus { color:var(--violet); border-color:rgba(123,92,255,.5); }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(55,211,155,.3);} 50%{box-shadow:0 0 0 9px rgba(55,211,155,0);} }
.clock { font-family:ui-monospace,Menlo,monospace; font-size:13px; color:var(--cyan); letter-spacing:2px; }

/* ---------------- mission banner ---------------- */
.mission { position:relative; z-index:5; display:flex; align-items:center; gap:10px; margin:10px 20px 0;
  padding:9px 14px; border:1px solid rgba(0,229,255,.2); border-radius:12px; background:rgba(9,14,26,.7);
  font-size:12px; color:#cfe0ff; letter-spacing:.3px; backdrop-filter:blur(6px); }
.mission-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:blink 1.4s infinite; flex-shrink:0; }

/* ---------------- BRAIN hero ---------------- */
.hero { position:relative; z-index:5; height:62vh; min-height:420px; margin:0 auto; }
#brain { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:manipulation; }
.hero-top { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:6; text-align:center; pointer-events:none; }
.hero-hint { font-size:10.5px; letter-spacing:1.5px; color:var(--dim); text-transform:uppercase;
  background:rgba(4,6,12,.5); padding:5px 12px; border-radius:999px; border:1px solid var(--line); }
.controls { position:absolute; left:16px; bottom:14px; z-index:6; display:flex; align-items:center; gap:12px;
  font-family:ui-monospace,Menlo,monospace; }
.controls button { width:36px; height:36px; border-radius:50%; border:1px solid rgba(0,229,255,.4);
  background:rgba(5,8,15,.7); color:var(--cyan); cursor:pointer; font-size:12px; }
.controls button:hover { box-shadow:0 0 12px rgba(0,229,255,.4); }
.controls .flow { display:flex; flex-direction:column; align-items:center; gap:1px; }
.controls .flow label { font-size:8px; letter-spacing:1px; color:var(--dim); text-transform:uppercase; }
.controls input[type=range] { width:84px; accent-color:var(--cyan); }
.ribbon { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:5;
  width:min(680px,74vw); text-align:center; font-family:ui-monospace,Menlo,Consolas,monospace; cursor:pointer; }
.ribbon:hover .txt { color:#fff; }
.ribbon .meta { font-size:9.5px; color:var(--dim); letter-spacing:2px; text-transform:uppercase; margin-bottom:3px; }
.ribbon .who { font-weight:800; letter-spacing:.5px; font-size:12px; }
.ribbon .txt { color:#c3d2f0; font-size:12.5px; margin-top:3px; line-height:1.45; word-break:break-word;
  text-shadow:0 0 12px rgba(0,0,0,.85); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------------- dashboard grid ---------------- */
main { position:relative; z-index:5; display:grid; grid-template-columns:1fr 340px; gap:14px; padding:16px 20px 10px;
  max-width:1400px; margin:0 auto; align-items:start; }
.col-side { display:grid; gap:14px; }

.panel { border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:14px; backdrop-filter:blur(8px); }
.panel-h { font-size:11px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; margin-bottom:10px; }

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.stat { padding:12px 8px; border-radius:10px; background:rgba(5,8,15,.6); border:1px solid rgba(0,229,255,.08); text-align:center; }
.stat b { display:block; font-size:23px; font-weight:800; color:var(--cyan); text-shadow:0 0 10px rgba(0,229,255,.5); }
.stat span { font-size:10px; letter-spacing:1px; color:var(--dim); text-transform:uppercase; }
.stat b.bump { animation:bump .4s ease; }
@keyframes bump { 0%{ text-shadow:0 0 30px rgba(0,229,255,.9); transform:scale(1.15);} 100%{ text-shadow:0 0 10px rgba(0,229,255,.5); transform:scale(1);} }

/* chat */
.chatpanel { display:flex; flex-direction:column; height:calc(62vh + 30px); min-height:460px; }
.chat { overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px; flex:1; }
.msg { display:flex; gap:9px; padding:9px 11px; border-radius:14px; background:rgba(9,14,26,.8); border:1px solid rgba(0,229,255,.10); animation:fadein .4s ease both; }
.msg .ava { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0; object-fit:cover; box-shadow:0 0 0 2px rgba(0,229,255,.15); }
.msg .body { flex:1; min-width:0; }
.msg .meta { display:flex; align-items:baseline; gap:7px; line-height:1.25; }
.msg .who { font-weight:800; letter-spacing:.5px; font-size:12.5px; }
.msg .role { font-size:9.5px; letter-spacing:1px; color:var(--dim); text-transform:uppercase; }
.msg .t { color:var(--dim); font-size:10px; white-space:nowrap; margin-left:auto; }
.msg .txt { color:#e6eefc; margin-top:3px; line-height:1.5; word-break:break-word; font-size:12.5px; text-align:left; }
.msg.agent { border-left:3px solid rgba(0,229,255,.25); border-top-left-radius:4px; }
.msg.system { text-align:center; background:rgba(123,92,255,.10); border:1px solid rgba(123,92,255,.22); padding:7px 12px; }
.msg .sys-line { color:#b8a6ff; font-size:11.5px; line-height:1.45; }

/* compute fleet */
.fleetpanel .flhead { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--dim); margin-bottom:6px; }
.fleetpanel .flpct { color:var(--green); font-weight:800; }
.flbar { height:8px; border-radius:99px; background:rgba(5,8,15,.7); border:1px solid rgba(55,211,155,.25); overflow:hidden; margin-bottom:10px; }
.flbar i { display:block; height:100%; background:linear-gradient(90deg,var(--green),var(--cyan)); box-shadow:0 0 10px var(--green); transition:width .6s; }
.flnode { display:flex; align-items:center; gap:8px; font-size:12px; padding:4px 0; border-top:1px solid rgba(0,229,255,.06); }
.flnode b { color:var(--fg); }
.fldot { width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow:0 0 6px currentColor; }
.flgpu { color:var(--dim); }
.flstate { margin-left:auto; color:var(--cyan); font-size:11px; }

/* ledger */
.ledger-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.lg { padding:10px 6px; border-radius:9px; background:rgba(5,8,15,.55); border:1px solid rgba(0,229,255,.08); text-align:center; }
.lg b { display:block; font-size:17px; font-weight:800; color:var(--teal); text-shadow:0 0 10px rgba(45,212,191,.5); }
.lg span { font-size:9.5px; letter-spacing:1px; color:var(--dim); text-transform:uppercase; }

/* featured */
.featured { display:flex; align-items:center; gap:12px; }
.ft-score { font-size:30px; font-weight:800; text-shadow:0 0 12px currentColor; min-width:42px; text-align:center; }
.ft-body { min-width:0; }
.ft-name { font-weight:800; font-size:15px; color:var(--fg); }
.ft-meta { font-size:11px; color:var(--dim); margin-top:2px; }
.ft-link { display:inline-block; margin-top:5px; font-size:11px; font-weight:700; color:var(--cyan); text-decoration:none; }
.ft-link:hover { text-decoration:underline; }
.ft-empty { font-size:12px; color:var(--dim); }

/* building */
.building { display:flex; flex-direction:column; gap:8px; }
.build { padding:10px; border-radius:9px; background:rgba(5,8,15,.6); border:1px solid rgba(0,229,255,.1); }
.build .nm { font-weight:800; color:var(--cyan); }
.build .plink { color:var(--green); text-decoration:none; font-size:12px; margin-left:4px; }
.build .plink:hover { text-decoration:underline; }
.build .meta { font-size:10.5px; color:var(--dim); margin-top:2px; }
.build .bar { height:5px; border-radius:99px; background:rgba(5,8,15,.7); border:1px solid rgba(0,229,255,.2); overflow:hidden; margin-top:7px; }
.build .bar i { display:block; height:100%; width:50%; background:linear-gradient(90deg,var(--cyan),var(--violet)); box-shadow:0 0 10px var(--cyan); animation:load 2s ease infinite; }
@keyframes load { 0%,100%{width:30%;} 50%{width:80%;} }

/* events */
.eventspanel { max-height:300px; display:flex; flex-direction:column; }
.events { overflow-y:auto; display:flex; flex-direction:column; gap:5px; }
.ev { display:flex; align-items:baseline; gap:7px; font-size:11px; color:#9fb2d8; padding:3px 0; border-bottom:1px solid rgba(0,229,255,.05); }
.ev i { width:6px; height:6px; border-radius:50%; flex-shrink:0; align-self:center; }
.ev span { line-height:1.35; }

/* capabilities */
.cappanel { max-height:280px; display:flex; flex-direction:column; }
.caps { overflow-y:auto; display:flex; flex-direction:column; gap:5px; }
.cap { display:flex; flex-direction:column; padding:6px 8px; border-radius:8px; background:rgba(5,8,15,.45); border:1px solid rgba(0,229,255,.07); }
.cap b { font-size:11.5px; color:var(--cyan); letter-spacing:.3px; }
.cap span { font-size:10.5px; color:var(--dim); line-height:1.35; margin-top:1px; }

/* info card (shared with brain) */
.info { position:fixed; z-index:20; min-width:240px; max-width:340px; padding:14px 16px; border-radius:14px;
  background:rgba(6,10,20,.96); border:1px solid rgba(0,229,255,.3); box-shadow:0 8px 40px rgba(0,0,0,.6);
  font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--fg); backdrop-filter:blur(8px); }
.info .i-name { font-weight:800; font-size:15px; letter-spacing:.5px; }
.info .i-avatar { width:46px; height:46px; border-radius:50%; float:left; margin:0 10px 8px 0; box-shadow:0 0 0 2px rgba(0,229,255,.2); }
.info .i-role { font-size:10px; letter-spacing:1px; color:var(--dim); text-transform:uppercase; margin-top:2px; }
.info .i-station { font-size:10px; color:var(--violet); margin-top:2px; }
.info .i-body { font-size:11.5px; color:#c3d2f0; line-height:1.5; margin-top:8px; word-break:break-word; }
.info .i-line { margin-top:5px; padding-top:5px; border-top:1px solid rgba(0,229,255,.1); font-size:11px; color:#9fb2d8; }
.info .i-close { float:right; cursor:pointer; color:var(--dim); }
.info .i-close:hover { color:var(--red); }

footer { position:relative; z-index:5; display:flex; justify-content:space-between; gap:10px; padding:11px 22px;
  color:var(--dim); font-size:11px; border-top:1px solid var(--line); background:rgba(4,6,12,.5); }
@keyframes fadein { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
@keyframes blink { 0%,100%{ opacity:1;} 50%{ opacity:.35;} }
::-webkit-scrollbar { width:8px; } ::-webkit-scrollbar-thumb { background:rgba(0,229,255,.2); border-radius:8px; }

/* ---------------- tablet ---------------- */
@media(max-width:1000px){
  main { grid-template-columns:1fr; }
  .chatpanel { height:auto; max-height:70vh; min-height:0; order:1; }
  .col-side { order:2; }
}

/* ---------------- mobile ---------------- */
@media(max-width:640px){
  .hud { padding:12px 14px; }
  .title { font-size:16px; letter-spacing:2px; }
  .sub { font-size:9px; letter-spacing:1px; white-space:normal; }
  .clock { display:none; }
  .hero { height:56vh; min-height:360px; }
  main { padding:12px 12px 8px; gap:12px; }
  .stats { grid-template-columns:repeat(2,1fr); }
  /* no inner scroll traps on phones — let panels grow, page scrolls once */
  .chatpanel { max-height:none; }
  .chat { max-height:70vh; }
  .eventspanel, .cappanel { max-height:none; }
  .events { max-height:44vh; }
  .caps { max-height:44vh; }
  footer { flex-direction:column; gap:4px; font-size:10px; padding:10px 14px; }
  .ribbon { width:86vw; }
  .controls input[type=range] { width:64px; }
}