/* ═══════════════════════════════════════════════════════════════════ SSC TERMINAL — shared chrome for all dashboard pages Mirrors dashboard.html style: gold-on-black, scanline, ticker, cards ═══════════════════════════════════════════════════════════════════ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#06060a;--bg2:#0c0c12;--bg3:#12121c;--bg4:#1a1a28; --border:#1e1e30;--border-h:#2e2e48; --gold:#c9a84c;--gold-bright:#e4c868;--gold-dim:rgba(201,168,76,0.2); --gold-glow:0 0 25px rgba(201,168,76,0.12),0 0 60px rgba(201,168,76,0.05); --green:#34d399;--green-dim:rgba(52,211,153,0.15); --red:#f87171;--red-dim:rgba(248,113,113,0.15); --blue:#60a5fa;--yellow:#fbbf24;--purple:#a78bfa;--cyan:#22d3ee; --text:#e8e4dc;--text-dim:#7a7890;--text-mid:#a09eb0; --font:'Manrope',system-ui,sans-serif;--mono:'Fira Code','Courier New',monospace; /* ═ Canonical type scale — shared by dashboard and brain so every small-text selector lands on one of these tokens. Nothing below --fs-meta (10.2px) is used anywhere; the biggest hero values use --fs-hero. ═ */ --fs-meta:.68rem; /* 10.2px dim meta, footnotes, helper text */ --fs-label:.72rem; /* 10.8px labels, table headers, buttons */ --fs-body:.8rem; /* 12px row content, stream items, body copy */ --fs-title:.85rem; /* 12.75px section/panel titles, ticker items */ --fs-num-sm:1.1rem; /* 16.5px small metric values, pill counts */ --fs-num:1.45rem; /* 21.75px standard metric value */ --fs-num-lg:1.7rem; /* 25.5px hero metric value (card-val, counter-val) */ --fs-hero:2rem; /* 30px biggest headline (brain state) */ } html{font-size:15px;scroll-behavior:smooth} body{background:var(--bg);color:var(--text);font-family:var(--font);font-weight:300; line-height:1.65;overflow-x:hidden;min-height:100vh;-webkit-font-smoothing:antialiased} /* ═══ ANIMATED BG ═══ */ body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none; background: linear-gradient(rgba(201,168,76,0.03) 1px,transparent 1px), linear-gradient(90deg,rgba(201,168,76,0.03) 1px,transparent 1px); background-size:80px 80px;animation:gridDrift 60s linear infinite} @keyframes gridDrift{to{background-position:80px 80px}} /* Per-page grid opt-out — pages set to hide the gridDrift layer */ body[data-no-grid]::before{display:none !important} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(ellipse at 20% 0%,rgba(201,168,76,0.06),transparent 55%), radial-gradient(ellipse at 80% 100%,rgba(201,168,76,0.03),transparent 50%)} /* Fade-in animation used by header/cards (moved from dashboard.html inline) */ .fi{animation:fu .6s ease-out both} @keyframes fu{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ═══ MATRIX RAIN (falling gold chars) ═══ */ #matrixRain{position:fixed;inset:0;z-index:0;opacity:0.11;pointer-events:none} /* ═══ SCANLINE ═══ */ .scan{position:fixed;top:0;left:0;right:0;height:1px;z-index:9998;pointer-events:none; background:linear-gradient(90deg,transparent 10%,rgba(201,168,76,0.25) 50%,transparent 90%); animation:scanMove 8s linear infinite} @keyframes scanMove{0%{top:-1px}100%{top:100vh}} /* ═══ LAYOUT ═══ */ .app{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 5% 40px} html.wide .app{max-width:none;padding:0 10px 8px;overflow-x:hidden} html.wide,html.wide body{overflow-x:hidden !important;max-width:100vw} /* Wide-mode header compression — match dashboard exactly */ html.wide .hd{padding:4px 0;margin-bottom:4px} html.wide .hd .logo{font-size:1rem} html.wide .hd .logo-sub{font-size:.6rem} html.wide .hd .hd-logo-img{height:28px} html.wide .hd .digiclock{font-size:.78rem} html.wide .hd .nav a{padding:4px 10px;font-size:.7rem} html.wide .hd .sfx-btn{padding:4px 10px;font-size:.62rem} html.wide .tk-wrap{padding:3px 0;margin-bottom:10px} html.wide .tk-i{font-size:.75rem} /* ═══ HEADER — canonical (matches dashboard) ═══ */ .hd{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:12px 0; border-bottom:1px solid var(--border);margin-bottom:14px;flex-wrap:wrap;gap:12px} .hd-left{display:flex;align-items:center;gap:8px} .hd-logo-img{height:36px} .logo{font-size:1.25rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold); text-shadow:0 0 30px rgba(201,168,76,0.2);line-height:1.05} .logo-sub{font-size:.8rem;color:var(--text-dim);letter-spacing:.12em;font-weight:300} .logo-sub .ver{margin-left:8px;padding:1px 6px;font-family:var(--mono);font-size:.68rem; letter-spacing:.02em;text-transform:none;color:var(--text-dim);text-decoration:none; border:1px solid var(--border);border-radius:3px;opacity:.7;transition:all .25s} .logo-sub .ver:hover{color:var(--gold);border-color:var(--gold-dim);opacity:1} .hd-center{display:flex;align-items:center;gap:16px;margin:0 auto} .hd-right{display:flex;align-items:center;gap:8px} /* Clock is hidden by default and only shown in wide/desktop mode — matches dashboard */ .digiclock{display:none;font-family:var(--font);font-size:1.4rem;font-weight:300;letter-spacing:.12em; color:var(--gold);text-shadow:0 0 20px rgba(201,168,76,0.15)} html.wide .digiclock{display:block} .status-tags{display:flex;gap:10px} .st{font-size:.65rem;color:var(--text-dim);display:flex;align-items:center;gap:4px;letter-spacing:.06em; text-transform:uppercase} .st-dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim);transition:background .2s} .st-dot.on{background:var(--green);box-shadow:0 0 6px var(--green)} .st-dot.off{background:var(--red);box-shadow:0 0 4px var(--red)} .live-tag{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;letter-spacing:0.15em;color:var(--red);text-transform:uppercase} .live-dot{width:8px;height:8px;background:var(--red);border-radius:50%;animation:livePulse 1.4s ease-in-out infinite;box-shadow:0 0 8px rgba(248,113,113,0.5)} @keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.6)}} /* ═══ HEADER — mobile ═══ */ @media(max-width:720px){ .hd{padding:10px 0;gap:8px} .hd-left{order:1;flex:1 1 auto;min-width:0} .hd-right{order:2;gap:6px;flex-wrap:wrap;justify-content:flex-end} .hd-center{order:3;width:100%;justify-content:center;margin:0;gap:10px;flex-wrap:wrap} .hd .logo{font-size:1.05rem} .hd .logo-sub{font-size:.58rem} .hd .hd-logo-img{height:28px} .hd .sfx-btn{padding:5px 9px;font-size:.6rem;letter-spacing:.04em} .hd .nav a{padding:6px 10px;font-size:.64rem;letter-spacing:.08em} .hd .live-tag{font-size:.58rem} .hd .st{font-size:.56rem} html.wide .hd .digiclock{font-size:.85rem} } /* ═══ NAV ═══ */ .nav{display:flex;gap:0;flex-wrap:wrap;align-items:center} .nav a,.nav .dis{display:inline-flex;align-items:center;line-height:1; font-size:.78rem;padding:8px 18px;border:1px solid transparent; letter-spacing:0.12em;text-transform:uppercase;font-weight:400} .nav a{color:var(--text-mid);text-decoration:none;transition:all .25s} .nav a:hover,.nav a.act{color:var(--gold);border-color:rgba(201,168,76,0.35)} .nav .dis{color:var(--text-dim);opacity:.4;cursor:not-allowed;user-select:none;pointer-events:none} /* ═══ SOUND TOGGLE — matches dashboard original (no uppercase, bigger hit target) ═══ */ .sfx-btn{cursor:pointer;font-size:.75rem;color:var(--text-dim);display:inline-flex;align-items:center; gap:5px;padding:8px 14px;border:1px solid var(--border);background:transparent;font-family:var(--font); transition:all .25s;letter-spacing:0.06em} .sfx-btn:hover{border-color:var(--gold-dim);color:var(--gold)} .sfx-btn.on{color:var(--green);border-color:var(--green-dim)} /* ═══ TICKER ═══ */ .tk-wrap{overflow:hidden;border-bottom:1px solid var(--border);padding:8px 0;margin-bottom:14px; background:linear-gradient(90deg,var(--bg),var(--bg2),var(--bg))} .tk{display:flex;gap:56px;white-space:nowrap;animation:tkScroll 40s linear infinite;width:max-content} .tk:hover{animation-play-state:paused} @keyframes tkScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .tk-i{font-size:.88rem;color:var(--text-dim);display:flex;align-items:center;gap:8px;font-weight:300} .tk-i .s{color:var(--gold);font-weight:600} .tk-i .up{color:var(--green)} .tk-i .dn{color:var(--red)} /* ═══ METRIC CARDS (5-col grid base) ═══ */ .cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px} @media(max-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}} @media(max-width:700px){.cards{grid-template-columns:repeat(2,1fr)}} .card{background:var(--bg2);border:1px solid var(--border);padding:22px 24px;position:relative; overflow:hidden;transition:all .3s} .card:hover{border-color:var(--border-h);box-shadow:inset 0 0 40px rgba(201,168,76,0.02)} .card.hero{border-color:rgba(201,168,76,0.25);background:linear-gradient(160deg,var(--bg2),#0f0e18)} .card.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent)} .card-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:0.18em;color:var(--text-dim); font-weight:500;margin-bottom:10px} .card-val{font-size:1.7rem;font-weight:700;font-family:var(--mono);letter-spacing:-0.5px;line-height:1.2} .card-val.up{color:var(--green);text-shadow:0 0 20px rgba(52,211,153,0.15)} .card-val.dn{color:var(--red);text-shadow:0 0 20px rgba(248,113,113,0.15)} .card-val.neu{color:var(--text)} .card-val.gld{color:var(--gold);text-shadow:var(--gold-glow)} .card-sub{font-size:.75rem;color:var(--text-dim);margin-top:6px;font-weight:300} /* ═══ SECTIONS ═══ */ .sec{margin-bottom:18px} .sec-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 0; border-bottom:1px solid var(--border);margin-bottom:10px;gap:10px;flex-wrap:wrap} .sec-t{font-size:.82rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold)} .sec-t .ct{color:var(--gold);margin-left:10px;font-family:var(--mono)} .badge{font-size:.62rem;padding:5px 14px;letter-spacing:0.15em;font-weight:500;text-transform:uppercase; border:1px solid var(--green-dim);color:var(--green);border-radius:2px} .badge.live{animation:bPulse 2.5s infinite} .badge.gold{color:var(--gold);border-color:var(--gold-dim)} .badge.red{color:var(--red);border-color:var(--red-dim)} @keyframes bPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 12px var(--green-dim)}} /* ═══ TABLES ═══ */ .tw{overflow-x:auto;overflow-y:auto;border:1px solid var(--border);background:var(--bg2)} .tw table{width:100%;border-collapse:collapse} .tw th,.tw td{padding:8px 10px;overflow:hidden;text-overflow:ellipsis} .tw th{background:var(--bg3);color:var(--text-dim);font-weight:500;text-transform:uppercase; letter-spacing:0.1em;font-size:.64rem;text-align:left;border-bottom:1px solid var(--border)} .tw td{border-bottom:1px solid rgba(30,30,48,0.6);font-weight:300;font-size:.8rem;font-family:var(--mono)} .tw tr:hover td{background:rgba(201,168,76,0.02)} .tw::-webkit-scrollbar{width:4px;height:4px} .tw::-webkit-scrollbar-track{background:var(--bg)} .tw::-webkit-scrollbar-thumb{background:var(--border-h);border-radius:2px} .pos{color:var(--green);font-weight:600} .neg{color:var(--red);font-weight:600} /* ═══ GRID HELPERS ═══ */ .grid{display:grid;gap:12px} .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr 1fr 1fr} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-5{grid-template-columns:repeat(5,1fr)} @media(max-width:1100px){.grid-3,.grid-4,.grid-5{grid-template-columns:1fr 1fr}} @media(max-width:700px){.grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}} /* ═══ GLOBAL SCROLLBAR ═══ */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--border-h);border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:var(--gold-dim)} /* ═══ POPUP SLOT (fixed bottom-right, single-slot) ═══ */ .popup-slot{position:fixed;right:24px;bottom:24px;z-index:9999;width:360px;max-width:calc(100vw - 48px); pointer-events:none} .popup-slot .popup{background:linear-gradient(135deg,rgba(12,12,18,0.97),rgba(26,26,40,0.97)); border:1px solid var(--gold-dim);border-left:3px solid var(--gold); padding:14px 18px;box-shadow:0 8px 40px rgba(0,0,0,0.6),0 0 30px rgba(201,168,76,0.15); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transform:translateX(calc(100% + 60px));opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s; pointer-events:auto;position:relative;overflow:hidden} .popup-slot .popup.show{transform:translateX(0);opacity:1} .popup-slot .popup.success{border-left-color:var(--green);box-shadow:0 8px 40px rgba(0,0,0,0.6),0 0 30px rgba(52,211,153,0.2)} .popup-slot .popup.alert{border-left-color:var(--red);box-shadow:0 8px 40px rgba(0,0,0,0.6),0 0 30px rgba(248,113,113,0.2)} .popup-slot .popup.info{border-left-color:var(--blue);box-shadow:0 8px 40px rgba(0,0,0,0.6),0 0 30px rgba(96,165,250,0.2)} .popup-slot .popup::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:popupSweep 1.4s ease-out} @keyframes popupSweep{to{left:100%}} .popup-head{display:flex;align-items:center;gap:8px;font-size:.6rem;letter-spacing:.15em; text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:4px} .popup-head .dot{width:6px;height:6px;border-radius:50%;background:var(--gold); box-shadow:0 0 8px var(--gold);animation:popupDot 1.2s ease-in-out infinite} @keyframes popupDot{0%,100%{opacity:1}50%{opacity:.4}} .popup.success .popup-head{color:var(--green)}.popup.success .popup-head .dot{background:var(--green);box-shadow:0 0 8px var(--green)} .popup.alert .popup-head{color:var(--red)}.popup.alert .popup-head .dot{background:var(--red);box-shadow:0 0 8px var(--red)} .popup.info .popup-head{color:var(--blue)}.popup.info .popup-head .dot{background:var(--blue);box-shadow:0 0 8px var(--blue)} .popup-title{font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:2px;font-family:var(--font)} .popup-body{font-size:.72rem;color:var(--text-mid);font-family:var(--mono);line-height:1.5} .popup-time{font-size:.58rem;color:var(--text-dim);font-family:var(--mono);margin-top:6px;text-align:right} /* ═══ UTILS ═══ */ .mono{font-family:var(--mono)} .up{color:var(--green)} .dn{color:var(--red)} .gld{color:var(--gold)} .dim{color:var(--text-dim)} .mid{color:var(--text-mid)}