@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap");
:root {
  --bg0:#04060b; --bg1:#080c15; --bg2:#0c1220; --bg3:#111a2c;
  --line:rgba(150,180,220,.08); --line2:rgba(150,180,220,.16);
  --cyan:#5cf2ff; --cyan2:#1c9bba; --amber:#ffb84d; --amber2:#bf8320; --violet:#9d7bff; --violet2:#6a55d9; --green2:#27a05e; --orange2:#d9662a;
  --up:#4fd3ee; --down:#ff8a5b; --warn:#ffb84d; --text:#dbe6f5; --muted:#7c8ba3; --dim:#46536b;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --glow:0 0 12px rgba(92,242,255,.35), 0 0 32px rgba(92,242,255,.12);
}
* { box-sizing:border-box } html,body { height:100% }
body { margin:0; color:var(--text); font:13px/1.45 var(--sans); background:var(--bg0); overflow-x:hidden; -webkit-font-smoothing:antialiased }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(1200px 600px at 12% -10%, rgba(28,155,186,.16), transparent 60%), radial-gradient(900px 500px at 95% 110%, rgba(106,85,217,.12), transparent 60%),
  repeating-linear-gradient(0deg, rgba(120,160,220,.035) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(120,160,220,.035) 0 1px, transparent 1px 48px); }
body::after { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.09) 3px 4px); mix-blend-mode:multiply }
.sweep { position:fixed; left:0; right:0; height:120px; top:-120px; z-index:0; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(92,242,255,.045), transparent); animation:sweep 14s linear infinite }
@keyframes sweep { to { transform:translateY(calc(100vh + 240px)) } }
a { color:var(--up); text-decoration:none } a:hover { text-decoration:underline }
.mono { font-family:var(--mono) } .muted { color:var(--muted) } .dim { color:var(--dim) } .up { color:var(--up) } .down { color:var(--down) } .warn { color:var(--warn) }
.micro { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.app { position:relative; z-index:1; display:grid; grid-template-columns:72px 1fr; grid-template-rows:52px 1fr; min-height:100vh }
.topbar { grid-column:1/3; display:flex; align-items:center; gap:22px; padding:0 18px; flex-wrap:wrap; min-height:52px; border-bottom:1px solid var(--line2); background:linear-gradient(180deg, rgba(12,18,32,.92), rgba(8,12,21,.85)); backdrop-filter:blur(10px); position:sticky; top:0; z-index:10 }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:600; letter-spacing:.22em; font-size:13px; color:var(--cyan); text-shadow:var(--glow) }
.brand .mark { width:10px; height:10px; border:1px solid var(--cyan); transform:rotate(45deg); box-shadow:var(--glow) }
.readouts { display:flex; gap:22px; flex-wrap:wrap } .readout { display:flex; flex-direction:column; line-height:1.15 } .readout .k { font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--dim); text-transform:uppercase } .readout .v { font-family:var(--mono); font-size:12.5px; color:var(--text) }
.topbar .right { margin-left:auto; display:flex; align-items:center; gap:16px }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--dim); box-shadow:none; vertical-align:middle; margin-right:6px }
.dot.open,.dot.ok { background:var(--cyan); box-shadow:0 0 8px var(--cyan) } .dot.error,.dot.closed,.dot.stale { background:var(--down); box-shadow:0 0 8px var(--down) } .dot.connecting { background:var(--warn) }
.pulse { animation:pulse 1.6s ease-in-out infinite } @keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }
.rail { border-right:1px solid var(--line2); background:linear-gradient(180deg, rgba(10,15,26,.9), rgba(6,9,16,.9)); display:flex; flex-direction:column; align-items:stretch; padding:10px 0; position:sticky; top:52px; height:calc(100vh - 52px) }
.rail button { position:relative; background:transparent; border:0; color:var(--dim); padding:12px 4px; cursor:pointer; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:4px }
.rail button .code { font-size:14px; font-weight:500; letter-spacing:.06em } .rail button:hover { color:var(--muted) }
.rail button.active { color:var(--cyan); text-shadow:var(--glow) } .rail button.active::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; background:var(--cyan); box-shadow:var(--glow) }
.rail .kbd { position:absolute; right:6px; top:6px; font-size:8px; color:var(--dim) }
main { padding:16px 18px 60px; min-width:0 } section { display:none } section.active { display:block; animation:fade .25s ease-out } @keyframes fade { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }
.grid { display:grid; gap:12px } .kpis { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) } .cols2 { grid-template-columns:1fr 1fr } .cols3 { grid-template-columns:1fr 1fr 1fr } .main-side { grid-template-columns:minmax(0,2fr) minmax(280px,1fr) } .mt { margin-top:12px }
@media (max-width:1000px) {
  .cols2,.cols3,.main-side { grid-template-columns:1fr } .app { grid-template-columns:1fr; grid-template-rows:auto auto 1fr }
  .topbar { grid-column:1; height:auto; padding:8px 12px; gap:12px } .readouts { gap:14px } .topbar .right .micro:first-child { display:none }
  .rail { position:sticky; top:0; height:auto; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line2); padding:0 } .rail button { flex:1 0 auto; padding:8px 12px; flex-direction:row; gap:8px } .rail button.active::before { left:8px; right:8px; top:auto; bottom:0; width:auto; height:2px } .rail .kbd { display:none }
  main { padding:12px 12px 56px } .tape { left:0 }
}
.hud { position:relative; background:linear-gradient(180deg, rgba(14,20,34,.86), rgba(8,12,21,.9)); border:1px solid var(--line); padding:12px 14px; min-width:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25) }
.hud::before,.hud::after { content:""; position:absolute; width:10px; height:10px; pointer-events:none; opacity:.7 }
.hud::before { left:-1px; top:-1px; border-left:1px solid var(--cyan); border-top:1px solid var(--cyan) } .hud::after { right:-1px; bottom:-1px; border-right:1px solid var(--cyan); border-bottom:1px solid var(--cyan) }
.hud > header { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px } .hud > header h3 { margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500 } .hud > header .meta { font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:.08em }
.kpi { overflow:hidden } .kpi .v { font-family:var(--mono); font-size:24px; font-weight:500; letter-spacing:-.01em; margin-top:2px; transition:color .3s } .kpi .s { font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-top:2px } .kpi svg { position:absolute; right:0; bottom:0; width:45%; height:44px; opacity:.55 }
.flash-up { animation:flashUp .9s ease-out } .flash-down { animation:flashDown .9s ease-out } @keyframes flashUp { 0% { color:var(--up); text-shadow:0 0 14px rgba(79,211,238,.8) } } @keyframes flashDown { 0% { color:var(--down); text-shadow:0 0 14px rgba(255,138,91,.8) } }
.chart { position:relative; height:300px } .chart.tall { height:360px } .chart.short { height:220px } canvas { width:100% !important; height:100% !important }
table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11.5px } th,td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:top }
th { position:sticky; top:0; background:rgba(10,15,26,.95); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:500 } td.num,th.num { text-align:right; font-variant-numeric:tabular-nums } tbody tr:hover td { background:rgba(92,242,255,.05) } tbody tr:hover td:first-child { box-shadow:inset 2px 0 0 var(--cyan) }
.scroll { overflow:auto; max-height:540px } .empty { color:var(--dim); font-family:var(--mono); font-size:11px; padding:10px 0; letter-spacing:.08em }
.tag { display:inline-block; padding:1px 7px; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line2); color:var(--muted); background:rgba(0,0,0,.25) }
.tag.open,.tag.entered,.tag.go,.tag.buy { color:var(--up); border-color:rgba(79,211,238,.45) } .tag.qualified,.tag.warn { color:var(--warn); border-color:rgba(255,184,77,.45) } .tag.watching { color:var(--violet); border-color:rgba(157,123,255,.45) } .tag.rejected,.tag.no_go,.tag.sell,.tag.bad { color:var(--down); border-color:rgba(255,138,91,.45) } .tag.expired,.tag.closed { color:var(--dim) }
.bar { height:6px; background:rgba(255,255,255,.05); position:relative; overflow:hidden } .bar > i { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, var(--cyan2), var(--cyan)); box-shadow:0 0 10px rgba(92,242,255,.5) } .bar.warn > i { background:linear-gradient(90deg, var(--amber2), var(--amber)) } .bar.down > i { background:linear-gradient(90deg, var(--orange2), var(--down)) }
.stat { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed var(--line); font-family:var(--mono); font-size:11.5px } .stat .k { color:var(--muted); letter-spacing:.08em; text-transform:uppercase; font-size:10px }
.feeds .feed { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--line); font-family:var(--mono); font-size:11.5px }
.tape { position:fixed; left:72px; right:0; bottom:0; height:30px; z-index:9; overflow:hidden; border-top:1px solid var(--line2); background:linear-gradient(180deg, rgba(8,12,21,.9), rgba(4,6,11,.95)); font-family:var(--mono); font-size:11px; display:flex; align-items:center }
@media (max-width:1000px) { .tape { left:0 } } .tape .track { display:inline-flex; gap:34px; white-space:nowrap; animation:tape 60s linear infinite; padding-left:100% } @keyframes tape { to { transform:translateX(-100%) } } .tape .track span { color:var(--muted) } .tape .track b { color:var(--text); font-weight:500 }
pre { white-space:pre-wrap; margin:0; font-family:var(--mono); font-size:11.5px; line-height:1.45; color:#b9c6da } .journal ul { padding:0; margin:0; list-style:none } .journal li { padding:7px 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11.5px; display:grid; grid-template-columns:110px 130px 1fr; gap:10px } .journal li .t { color:var(--dim) }
.hero { display:flex; align-items:baseline; gap:14px } .hero .big { font-family:var(--mono); font-size:34px; font-weight:500; letter-spacing:-.02em } .hero .sub { font-family:var(--mono); font-size:11px; color:var(--muted) }
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; position:relative; z-index:1 }
.login-card { width:340px; padding:26px 26px 22px } .login-card h1 { margin:0; font-family:var(--mono); letter-spacing:.3em; font-size:16px; color:var(--cyan); text-shadow:var(--glow) } .login-card p { margin:4px 0 18px }
.login-card label { display:block; margin:12px 0 } .login-card input { width:100%; margin-top:6px; padding:10px; background:rgba(0,0,0,.35); border:1px solid var(--line2); color:var(--text); font:13px var(--mono); outline:none } .login-card input:focus { border-color:var(--cyan); box-shadow:var(--glow) }
.login-card button { width:100%; margin-top:14px; padding:11px; background:transparent; border:1px solid var(--cyan); color:var(--cyan); font:12px var(--mono); letter-spacing:.2em; text-transform:uppercase; cursor:pointer; transition:.2s } .login-card button:hover { background:rgba(92,242,255,.12); box-shadow:var(--glow) }
.err { color:var(--down); font-family:var(--mono); font-size:11px; margin-top:10px }
::-webkit-scrollbar { width:8px; height:8px } ::-webkit-scrollbar-thumb { background:rgba(150,180,220,.15) } ::-webkit-scrollbar-track { background:transparent }