:root{
  --bg:#050806; --panel:#0A1410; --panel2:#0D1A15; --border:#173226; --border-soft:#0F231A;
  --green:#39FF88; --green-dim:#1B9C55; --blue:#4BE0FF; --blue-dim:#1E8FB0;
  --amber:#FFC24B; --red:#FF5C5C;
  --text:#D8FFE9; --text-dim:#6E9C82; --text-faint:#3C5C4C;
  --mono:'IBM Plex Mono',monospace; --display:'Space Mono',monospace; --sans:'Inter',sans-serif;
  --edge:clamp(16px,3vw,40px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%; overflow:hidden;}
body{background:var(--bg); color:var(--text); font-family:var(--sans);}
canvas#rain{position:absolute; inset:0; z-index:0; opacity:.05; width:100%; height:100%; pointer-events:none; display:block;}
.scanlines{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(57,255,136,.02) 3px, rgba(0,0,0,0) 4px);
}
.vignette{position:absolute; inset:0; z-index:1; pointer-events:none; box-shadow:inset 0 0 220px rgba(0,0,0,.75);}
::-webkit-scrollbar{width:8px; height:8px;} ::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px;} ::-webkit-scrollbar-track{background:transparent;}
::selection{background:var(--green); color:#031008;}

.shell{position:relative; z-index:2; display:flex; flex-direction:column; height:100vh; height:100dvh;}

.header-wrap{position:relative; z-index:2; flex-shrink:0; background:linear-gradient(180deg, #0D1F17, #0A1913 92%); border-bottom:1px solid var(--border); box-shadow:0 2px 24px rgba(0,0,0,.4);}
.topline{display:flex; align-items:center; justify-content:space-between; padding:14px var(--edge) 12px; gap:18px;}
.logo{font-family:var(--display); font-weight:700; letter-spacing:1px; font-size:19px; white-space:nowrap;}
.logo span{color:var(--green);}
.nav-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.mode-badge{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.06em; padding:4px 10px; border-radius:2px; border:1px solid var(--blue-dim); color:var(--blue); white-space:nowrap;}
.nav-cta{font-family:var(--mono); font-size:12px; padding:9px 18px; border:1px solid var(--green-dim); color:var(--green); border-radius:2px; text-decoration:none; transition:.2s; white-space:nowrap; background:none; cursor:pointer;}
.nav-cta:hover{background:var(--green); color:#031008; box-shadow:0 0 22px rgba(57,255,136,.4);}
.nav-cta.ghost{border-color:var(--border); color:var(--text-dim);}
.nav-cta.ghost:hover{background:none; border-color:var(--text-dim); color:var(--text); box-shadow:none;}

.tabline{display:flex; align-items:center; padding:0 0 0 var(--edge); border-top:1px solid rgba(57,255,136,.08); background:rgba(0,0,0,.18);}
.navlinks{display:flex; gap:6px; font-family:var(--mono); font-size:11.5px; color:var(--text-dim); padding:6px var(--edge) 6px 0; width:100%;}
.navlinks button{all:unset; cursor:pointer; color:inherit; padding:8px 12px; border-radius:3px; white-space:nowrap; transition:.15s; flex:1; text-align:center;}
.navlinks button:hover{color:var(--text); background:var(--panel2);}
.navlinks button.active{color:var(--green); background:rgba(57,255,136,.1); box-shadow:inset 0 0 0 1px var(--green-dim);}

.content{flex:1; overflow:hidden; position:relative;}
.page{display:none; height:100%; overflow-y:auto; overflow-x:hidden;}
.page.active{display:block;}

.boot{font-family:var(--mono); font-size:11.5px; color:var(--green-dim); padding:14px var(--edge) 0; max-width:640px; line-height:1.9; min-height:24px;}
.boot .cursor{display:inline-block; width:7px; height:13px; background:var(--green); margin-left:2px; animation:blink 1s steps(1) infinite; vertical-align:middle;}
@keyframes blink{50%{opacity:0;}}

.hero{padding:40px var(--edge) 70px; text-align:center; position:relative;}
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:3px; color:var(--blue); text-transform:uppercase; margin-bottom:22px;}
.headline{font-family:var(--display); font-size:clamp(32px,6vw,68px); font-weight:700; line-height:1.05; letter-spacing:-1px; margin-bottom:22px;}
.headline .glitch{position:relative; display:inline-block; color:var(--green);}
.sub{font-family:var(--sans); font-size:15.5px; color:var(--text-dim); max-width:560px; margin:0 auto 34px; line-height:1.65;}
.cta-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:50px;}
.btn{font-family:var(--mono); font-size:13px; padding:14px 28px; border-radius:2px; text-decoration:none; font-weight:600; transition:.2s; letter-spacing:.4px; border:none; cursor:pointer;}
.btn-primary{background:var(--green); color:#031008;}
.btn-primary:hover{box-shadow:0 0 30px rgba(57,255,136,.55); transform:translateY(-2px);}
.btn-outline{border:1px solid var(--border); color:var(--text); background:none;}
.btn-outline:hover{border-color:var(--blue); color:var(--blue);}

.reel-stage{display:flex; justify-content:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.reel{width:56px; height:74px; background:var(--panel); border:1px solid var(--border); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:34px; font-weight:700; color:var(--green); overflow:hidden; position:relative;}
.reel::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.5), transparent 30%, transparent 70%, rgba(0,0,0,.5));}
.reel-label{font-family:var(--mono); font-size:10px; color:var(--text-faint); text-align:center; margin-top:8px; letter-spacing:2px;}
.reel.small{width:44px; height:56px; font-size:22px;}

.ticker-strip{border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); padding:14px 0; overflow:hidden; white-space:nowrap; background:var(--panel);}
.ticker-track{display:inline-flex; gap:50px; animation:ticker 28s linear infinite; font-family:var(--mono); font-size:12.5px;}
.ticker-track span{color:var(--text-dim);}
.ticker-track .up{color:var(--green);}
.ticker-track .down{color:var(--blue);}
@keyframes ticker{from{transform:translateX(0);} to{transform:translateX(-50%);}}

section{padding:60px var(--edge);}
.section-head{text-align:center; margin-bottom:40px;}
.section-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--blue); text-transform:uppercase; margin-bottom:14px;}
.section-title{font-family:var(--display); font-size:clamp(22px,3vw,34px); font-weight:700;}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); max-width:1100px; margin:0 auto;}
.grid.cols2{grid-template-columns:repeat(2,1fr);}
.grid.cols4{grid-template-columns:repeat(4,1fr);}
.feat{background:var(--panel); padding:26px 24px; opacity:1;}
.feat .num{font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-bottom:12px;}
.feat h3{font-family:var(--display); font-size:16px; margin-bottom:8px; color:var(--green);}
.feat p{font-size:12.5px; color:var(--text-dim); line-height:1.7;}
.feat .big{font-family:var(--display); font-size:26px; font-weight:700; color:var(--text);}
.feat .big.blue{color:var(--blue);} .feat .big.green{color:var(--green);} .feat .big.red{color:var(--red);}
@media(max-width:820px){.grid, .grid.cols2, .grid.cols4{grid-template-columns:1fr;}}

.console{max-width:960px; margin:0 auto; background:var(--panel); border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.console-bar{display:flex; align-items:center; gap:8px; padding:12px 18px; background:var(--panel2); border-bottom:1px solid var(--border-soft); font-family:var(--mono); font-size:11px; color:var(--text-faint);}
.console-bar .btn-mini{margin-left:auto; all:unset; cursor:pointer; font-family:var(--mono); font-size:10.5px; padding:5px 12px; border:1px solid var(--green-dim); color:var(--green); border-radius:2px;}
.dot{width:9px; height:9px; border-radius:50%; background:var(--border);}
.console-body{padding:22px 26px; font-family:var(--mono); font-size:12px; line-height:2; color:var(--text-dim); min-height:80px;}
.console-body .ok{color:var(--green);}
.console-body .warn{color:var(--blue);}
.console-body .trace-line{opacity:0; animation:tracein .25s forwards;}
@keyframes tracein{to{opacity:1;}}

.stats-band{display:flex; justify-content:center; gap:60px; flex-wrap:wrap; padding:50px 5%; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);}
.stat{text-align:center;}
.stat .n{font-family:var(--display); font-size:32px; color:var(--green); font-weight:700;}
.stat .l{font-family:var(--mono); font-size:10.5px; color:var(--text-faint); letter-spacing:1.5px; margin-top:6px;}

.disclaimer{max-width:760px; margin:40px auto 0; text-align:center; font-family:var(--mono); font-size:10.5px; color:var(--text-faint); line-height:1.8; padding:0 var(--edge);}
footer{text-align:center; padding:36px var(--edge) 50px; font-family:var(--mono); font-size:11px; color:var(--text-faint);}

/* bot tiles */
.bot-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); max-width:1100px; margin:0 auto;}
.bot-tile{background:var(--panel); padding:28px 10px; text-align:center; cursor:pointer; transition:.15s;}
.bot-tile:hover{background:var(--panel2);}
.bot-tile .ic{font-size:26px; margin-bottom:10px;}
.bot-tile .t{font-family:var(--mono); font-size:11.5px; color:var(--text-dim);}
@media(max-width:820px){.bot-tiles{grid-template-columns:repeat(2,1fr);}}

/* digit heatmap using .reel visual language */
.window-tabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; justify-content:center;}
.window-tabs button{all:unset; cursor:pointer; font-family:var(--mono); font-size:10.5px; padding:6px 12px; border:1px solid var(--border); border-radius:2px; color:var(--text-dim);}
.window-tabs button.active{border-color:var(--green); color:var(--green);}
.heatmap{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.hcell{width:64px; text-align:center;}
.hcell .reel{border-color:var(--border-soft);}
.hcell.hot .reel{border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset;}
.hcell.cold .reel{border-color:var(--blue-dim); opacity:.75;}
.hcell .p{font-family:var(--mono); font-size:9.5px; color:var(--text-faint); margin-top:5px;}

.matrix{display:grid; grid-template-columns:repeat(11,1fr); gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); font-family:var(--mono); font-size:9.5px; max-width:900px; margin:0 auto;}
.matrix div{background:var(--panel); text-align:center; padding:6px 2px;}
.matrix .hd{background:var(--panel2); color:var(--text-faint);}

table.plain{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11.5px; max-width:900px; margin:0 auto;}
table.plain th{text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); color:var(--text-faint); font-size:10px; letter-spacing:.05em; text-transform:uppercase; font-weight:500;}
table.plain td{padding:9px 12px; border-bottom:1px solid var(--border-soft);}
table.plain tr:hover td{background:var(--panel2);}

.predict-hero{display:flex; align-items:center; justify-content:center; gap:36px; flex-wrap:wrap; padding:20px 5%;}
.predict-digit{width:140px; height:140px; border-radius:50%; border:2px solid var(--green); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:64px; font-weight:700; color:var(--green); box-shadow:0 0 34px rgba(57,255,136,.18);}
.meta{text-align:left;}
.meta div{font-family:var(--mono); font-size:11.5px; color:var(--text-dim); margin:8px 0;}
.meta b{color:var(--text); font-size:14.5px;}

.countdown-wrap{display:flex; flex-direction:column; align-items:center; gap:16px;}
.countdown{width:150px; height:150px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:46px; font-weight:700; position:relative;}
.countdown svg{position:absolute; inset:-2px; transform:rotate(-90deg);}
.countdown circle{fill:none; stroke-width:3; stroke:var(--green); stroke-linecap:round; stroke-dasharray:460; transition:stroke-dashoffset 1s linear;}
.signal-result{font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; padding:9px 20px; border-radius:2px; font-weight:700;}
.signal-result.wait{background:rgba(255,194,75,.1); color:var(--amber); border:1px solid var(--amber);}
.signal-result.trade{background:rgba(57,255,136,.1); color:var(--green); border:1px solid var(--green);}
.signal-result.cancel{background:rgba(255,92,92,.1); color:var(--red); border:1px solid var(--red);}
.gate-list{max-width:420px; margin:0 auto; display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:11px;}
.gate-list div{display:flex; justify-content:space-between; padding:7px 12px; background:var(--panel2); border-radius:3px;}

.chart-box{max-width:1100px; margin:0 auto 20px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:18px;}
.chart-box .lab{font-family:var(--mono); font-size:10.5px; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px;}
.chart-el{width:100%; height:260px;}

.subtab-row{display:flex; gap:6px; justify-content:center; margin-bottom:30px; flex-wrap:wrap;}
.subtab-row button{all:unset; cursor:pointer; font-family:var(--mono); font-size:11px; padding:8px 18px; border:1px solid var(--border); border-radius:20px; color:var(--text-dim);}
.subtab-row button.active{background:var(--green); color:#031008; border-color:var(--green); font-weight:700;}
.subpage{display:none;} .subpage.active{display:block;}

input[type=range]{width:100%; accent-color:var(--green);}
.toggle-row{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--border-soft); font-family:var(--mono); font-size:12px;}
.toggle{width:36px; height:19px; background:var(--panel2); border:1px solid var(--border); border-radius:20px; position:relative; cursor:pointer;}
.toggle::after{content:''; position:absolute; width:13px; height:13px; background:var(--text-faint); border-radius:50%; top:2px; left:2px; transition:.2s;}
.toggle.on{background:rgba(57,255,136,.15); border-color:var(--green);} .toggle.on::after{left:18px; background:var(--green);}

select{background:var(--panel2); border:1px solid var(--border); color:var(--text); font-family:var(--mono); font-size:11.5px; padding:7px 10px; border-radius:3px;}
.kbd{display:inline-block; font-family:var(--mono); font-size:10.5px; background:var(--panel2); border:1px solid var(--border); border-radius:3px; padding:2px 7px; margin-left:6px; color:var(--text-dim);}

.rhythm-grid{display:flex; gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); flex-wrap:wrap; max-width:1100px; margin:0 auto;}
.rhythm-card{background:var(--panel); padding:20px; text-align:center; flex:1; min-width:140px;}
.rhythm-card .m{font-family:var(--mono); font-size:9.5px; color:var(--text-faint); margin-bottom:8px;}
.rhythm-card .cyc{font-family:var(--display); font-size:22px; color:var(--green); font-weight:700;}
.rhythm-card .sub{font-family:var(--mono); font-size:9px; color:var(--text-faint); margin-top:6px;}

.shortcuts-panel{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:100;}
.shortcuts-panel.open{display:flex;}
.shortcuts-box{background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:26px 30px; max-width:400px; width:90%;}
.shortcuts-box h3{font-family:var(--display); font-size:15px; margin-bottom:16px; color:var(--green);}
.shortcuts-box .row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border-soft); font-family:var(--mono); font-size:11.5px; color:var(--text-dim);}

.export-btn{all:unset; cursor:pointer; font-family:var(--mono); font-size:10px; padding:6px 12px; border:1px solid var(--border); border-radius:2px; color:var(--text-dim);}
.export-btn:hover{border-color:var(--blue); color:var(--blue);}

@media(max-width:900px){
  .navlinks{overflow-x:auto; width:auto;}
  .navlinks button{flex:0 0 auto;}
}
@media(max-width:480px){
  .topline{padding:12px 4%; gap:8px;}
  .logo{font-size:15px;}
  .nav-right{gap:6px;}
  .mode-badge{display:none;}
  .nav-cta{padding:8px 12px; font-size:11px;}
}

@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

/* ===================== Dashboard hero grid — mobile fix ===================== */
/* Fixes text overflowing the viewport on narrow screens instead of
   wrapping — CSS Grid's 1.3fr/1fr columns refuse to shrink below their
   content's natural width without minmax(0,...), which is set inline in
   dashboard.js. This media query additionally collapses to one column
   entirely below 640px, since two narrow columns still cramp on a phone
   even with the overflow bug fixed. */
@media(max-width:640px){
  .dash-hero-grid{ grid-template-columns:1fr !important; }
}