/* live.botbit.cc — Ultra-light + Robots + Polish */
:root{--bg:#0A0A0A;--cb:#0D1117;--up:#00FF88;--dn:#FF4444;--t1:#f1f5f9;--t3:#94a3b8;--t5:#64748b;--b:1px solid rgba(0,255,136,.1);--fm:'JetBrains Mono',monospace;--fd:'Space Grotesk',sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fd);background:var(--bg);color:var(--t3);overflow:hidden;height:100vh;height:100dvh;display:flex;flex-direction:column}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:2px}::-webkit-scrollbar-thumb{background:rgba(0,255,136,.2);border-radius:9px}

/* ═══ Header ═══ */
#hd{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:rgba(255,255,255,.02);border-bottom:var(--b);flex-shrink:0;z-index:9}
.hd-l,.hd-c,.hd-r{display:flex;align-items:center;gap:8px}
.logo{display:flex;align-items:center;gap:5px;font-size:.92rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.logo svg{filter:drop-shadow(0 0 4px rgba(0,255,136,.5))}
.logo b{color:var(--up)}
.live{display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:rgba(255,51,51,.1);border:1px solid rgba(255,51,51,.3);font-size:.55rem;font-weight:700;color:#F33;font-family:var(--fm);letter-spacing:.08em}
.ld{width:6px;height:6px;background:#F33;border-radius:50%;animation:pd 2s ease-in-out infinite;box-shadow:0 0 5px #F33}

/* WebSocket status */
.ws-status{font-size:.5rem;transition:color .3s}
.ws-status.ok{color:var(--up)}
.ws-status.err{color:var(--dn);animation:pd 1s ease-in-out infinite}

.hs{display:flex;flex-direction:column;align-items:center;gap:1px}
.hl{font-size:.5rem;color:var(--t5);text-transform:uppercase;letter-spacing:.04em}
.hv{font-size:.78rem;font-weight:700;font-family:var(--fm);color:#fff;font-variant-numeric:tabular-nums}
.hv.pos{color:var(--up)}.hv.neg{color:var(--dn)}
.sep{width:1px;height:20px;background:rgba(0,255,136,.08)}
#snd{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer;font-size:.75rem}
#snd:hover{background:rgba(0,255,136,.08)}
.data-link{font-size:.85rem;opacity:.6;transition:opacity .2s}.data-link:hover{opacity:1}
.cta{display:none;padding:5px 12px;background:var(--up);color:var(--bg);font-size:.68rem;font-weight:700;border-radius:6px;box-shadow:0 0 10px rgba(0,255,136,.3)}

/* ═══ Mobile Stats Bar ═══ */
#mob-bar{display:none;height:28px;align-items:center;justify-content:center;gap:12px;padding:0 8px;background:rgba(0,0,0,.4);border-bottom:var(--b);flex-shrink:0;font-family:var(--fm);font-size:.58rem}
.mb-item{display:flex;align-items:center;gap:3px}
.mb-label{color:var(--t5);font-size:.48rem;text-transform:uppercase}
.mb-val{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.mb-val.pos{color:var(--up)}.mb-val.neg{color:var(--dn)}

/* ═══ Grid ═══ */
#grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:1px;background:rgba(0,255,136,.06);min-height:0}
.cell{background:var(--cb);display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative;transition:opacity .3s,transform .3s}
.cell.fb{animation:fg .35s ease-out}.cell.fl{animation:fr .35s ease-out}
.bot-counter{font-family:var(--fm);font-size:.52rem;color:var(--t5);padding:2px 6px;border-radius:4px;background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.1)}

/* Cell header with robot name */
.ch{display:flex;align-items:center;gap:5px;padding:2px 8px;background:rgba(0,0,0,.35);flex-shrink:0;font-family:var(--fm);font-size:.62rem;border-bottom:1px solid rgba(255,255,255,.03)}
.cb{color:var(--up);font-size:.58rem;opacity:.8;white-space:nowrap}
.cp{font-weight:700;color:#fff;white-space:nowrap}
.cv{margin-left:auto;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}
.cc{padding:0 4px;border-radius:2px;font-size:.55rem;white-space:nowrap}
.cc.pos{color:var(--up);background:rgba(0,255,136,.08)}
.cc.neg{color:var(--dn);background:rgba(255,68,68,.08)}

/* Chart */
.cx{flex:1;min-height:0}
.cx a[href*="tradingview.com"],.cx [class*="logo"]{display:none!important}

/* Mini Log */
.cl{height:46px;overflow:hidden;padding:2px 6px;font-family:var(--fm);font-size:.56rem;line-height:1.45;background:rgba(0,0,0,.25);border-top:1px solid rgba(255,255,255,.03);display:flex;flex-direction:column;gap:1px;flex-shrink:0}
.cl .le{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:li .25s ease-out}
.cl .le .t{color:var(--t5)}
.cl .le .pw{color:var(--up);font-weight:500}
.cl .le .pl{color:var(--dn);font-weight:500}
.cl .le .buy{color:var(--up)}
.cl .le .sell{color:var(--dn)}
.cl .le .sig{color:#00D4FF;opacity:.7}
.cl .le .bot{color:var(--up);opacity:.6;font-size:.5rem}

/* Footer */
#ft{height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:rgba(0,0,0,.5);border-top:var(--b);font-family:var(--fm);font-size:.55rem;color:var(--t5);flex-shrink:0}
.vd{width:4px;height:4px;background:var(--up);border-radius:50%;display:inline-block;animation:pd 2s ease-in-out infinite}

/* ═══ Whale Ticker ═══ */
#wt-wrap{height:28px;overflow:hidden;background:rgba(0,0,0,.55);border-bottom:1px solid rgba(0,255,136,.08);flex-shrink:0;display:none}
#wt-wrap.active{display:flex;align-items:center}
#wt-track{display:flex;align-items:center;height:100%;white-space:nowrap;font-family:var(--fm);font-size:.6rem}
#wt-track:hover .wt-item{animation-play-state:paused}
.wt-item{display:inline-flex;align-items:center;gap:6px;padding:0 24px 0 10px;height:100%;white-space:nowrap;animation:wtSlide 22s linear infinite}
.wt-item:hover{animation-play-state:paused}
.wt-sym{font-weight:700}
.wt-item.wt-buy .wt-sym{color:var(--up)}
.wt-item.wt-sell .wt-sym{color:var(--dn)}
.wt-amt{color:#fff;font-weight:600}
@keyframes wtSlide{0%{transform:translateX(100vw)}100%{transform:translateX(-100%)}}

/* ═══ Race Board Modal ═══ */
.rb-overlay{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding-top:10vh}
.rb-overlay.open{display:flex}
.rb-panel{background:var(--cb);border:1px solid rgba(0,255,136,.15);border-radius:12px;width:min(420px,96vw);max-height:82vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.8)}
.rb-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(0,255,136,.08);font-family:var(--fm);font-size:.7rem;font-weight:700;color:var(--t1);flex-shrink:0}
.rb-cls{background:none;border:none;color:var(--t5);cursor:pointer;font-size:.85rem;padding:2px 6px;border-radius:4px}
.rb-cls:hover{color:var(--t1);background:rgba(255,255,255,.05)}
.rb-body{flex:1;overflow-y:auto;padding:6px 0}
.rb-row{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:8px;padding:6px 16px;font-family:var(--fm);font-size:.6rem;border-bottom:1px solid rgba(255,255,255,.02);transition:background .15s}
.rb-row:hover{background:rgba(0,255,136,.03)}
.rb-rank{color:var(--t5);font-weight:600;text-align:center}
.rb-rank.gold{color:#FFD700}.rb-rank.silver{color:#C0C0C0}.rb-rank.bronze{color:#CD7F32}
.rb-name{color:var(--t1);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-bar-wrap{flex:1;height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;min-width:40px}
.rb-bar-fill{height:100%;border-radius:2px;transition:width .5s ease}
.rb-pnl{color:#fff;font-weight:700;white-space:nowrap;text-align:right}
.rb-pnl.pos{color:var(--up)}.rb-pnl.neg{color:var(--dn)}
.rb-row.top1{background:rgba(255,215,0,.04)}.rb-row.top1 .rb-name{color:#FFD700}

/* ═══ Fleet Exposure Donut ═══ */
#fleet-wrap{display:flex;align-items:center;gap:8px}
#fleet-canvas{vertical-align:middle;border-radius:50%}
#fleet-labels{display:flex;flex-direction:column;gap:3px}
.fl-row{display:flex;align-items:center;gap:5px;font-family:var(--fm);font-size:.5rem}
.fl-long{color:var(--up);font-weight:700;width:28px}
.fl-short{color:var(--dn);font-weight:700;width:28px}
.fl-bar{flex:1;height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;min-width:28px}
.fl-fill{height:100%;background:var(--up);border-radius:2px;transition:width .6s ease}
.fl-fill-short{background:var(--dn)}
.fl-pct{color:var(--t3);font-weight:600;text-align:right;width:22px}

/* ═══ P&L Curve ═══ */
#pnl-curve-wrap{display:none;align-items:center;gap:5px}
#pnl-curve-label{font-size:.58rem;font-family:var(--fm);font-weight:700;white-space:nowrap}
#pnl-canvas{vertical-align:middle;border-radius:3px;background:rgba(0,0,0,.3)}

/* ═══ Bot New High Glow ═══ */
@keyframes nhGlow{0%{box-shadow:0 0 0 0 rgba(255,215,0,.7),inset 0 0 0 0 rgba(255,215,0,.2)}30%{box-shadow:0 0 0 12px rgba(255,215,0,.3),inset 0 0 20px rgba(255,215,0,.15)}60%{box-shadow:0 0 0 20px rgba(255,215,0,.1),inset 0 0 30px rgba(255,215,0,.1)}100%{box-shadow:none}}
@keyframes nhBadge{0%{transform:scale(0) rotate(-10deg);opacity:0}60%{transform:scale(1.2) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.cell.newhigh{animation:nhGlow 2s ease-out;border-color:rgba(255,215,0,.4) !important;z-index:10;position:relative}
.cell.newhigh::after{content:'🏆 HIGH';position:absolute;top:3px;right:3px;font-size:.42rem;font-weight:700;font-family:var(--fm);color:#FFD700;background:rgba(0,0,0,.85);padding:1px 5px;border-radius:3px;animation:nhBadge .3s ease-out;pointer-events:none;z-index:11}

/* ═══ Regime Pulse ═══ */
#regime-pulse{display:none;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;font-family:var(--fm);font-size:.5rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;flex-shrink:0;transition:background .5s,color .5s}
#regime-pulse.rt-trending{color:var(--up);background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.25);animation:rpGlow 2.5s ease-in-out infinite}
#regime-pulse.rt-euphoria{color:#FFD700;background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.25);animation:rpGlow 1.5s ease-in-out infinite}
#regime-pulse.rt-rally{color:var(--up);background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.2);animation:rpGlow 3s ease-in-out infinite}
#regime-pulse.rt-volatile{color:#FF8C00;background:rgba(255,140,0,.1);border:1px solid rgba(255,140,0,.25);animation:rpGlow 1s ease-in-out infinite}
#regime-pulse.rt-ranging{color:var(--t3);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
#regime-pulse.rt-dump{color:var(--dn);background:rgba(255,68,68,.1);border:1px solid rgba(255,68,68,.2);animation:rpGlow 1.5s ease-in-out infinite}
#regime-pulse.rt-crash{color:#FF2222;background:rgba(255,34,34,.12);border:1px solid rgba(255,34,34,.3);animation:rpGlow .8s ease-in-out infinite}
#regime-pulse.rt-recovery{color:#00D4FF;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);animation:rpGlow 3s ease-in-out infinite}
@keyframes rpGlow{0%,100%{box-shadow:0 0 4px currentColor}50%{box-shadow:0 0 12px currentColor,0 0 20px currentColor}
}

/* Nav button */
.nav-btn{background:none;border:none;color:var(--t3);cursor:pointer;font-size:.85rem;padding:4px 6px;border-radius:5px;transition:all .2s;flex-shrink:0}
.nav-btn:hover{color:var(--t1);background:rgba(255,255,255,.06)}

/* ═══ Responsive extras ═══ */
@media(min-width:640px){
  #regime-pulse{display:flex}
  #pnl-curve-wrap{display:flex}
  #fleet-wrap{display:flex}
  .nav-btn{display:flex}
}
@media(max-width:639px){
  #rb-toggle{display:flex}
  .nav-btn{display:none}
  #rb-panel{max-height:75vh}
}

/* ═══ Animations ═══ */
@keyframes pd{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fg{0%{box-shadow:inset 0 0 25px rgba(0,255,136,.12)}100%{box-shadow:none}}
@keyframes fr{0%{box-shadow:inset 0 0 25px rgba(255,68,68,.1)}100%{box-shadow:none}}
@keyframes li{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ═══ Responsive: Tablet ═══ */
@media(min-width:768px){.cta{display:inline-flex}}
@media(max-width:1023px){
  #grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
  .hv{font-size:.7rem}.hl{font-size:.45rem}
  .cb{font-size:.52rem}
}

/* ═══ Responsive: Mobile ═══ */
@media(max-width:639px){
  #hd{height:36px;padding:0 8px}
  .hd-c{display:none}
  #mob-bar{display:flex}
  #grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
  .ch{padding:1px 5px;font-size:.52rem;gap:3px}
  .cp{font-size:.52rem}
  .cb{font-size:.48rem}
  .cv{font-size:.52rem}
  .cc{font-size:.45rem;padding:0 2px}
  .cl{height:36px;font-size:.48rem}
  #ft{height:20px;font-size:.48rem;padding:0 6px}
  .logo span{font-size:.8rem}
  .live{padding:1px 6px;font-size:.48rem}
  .ld{width:5px;height:5px}
}

/* ═══ Very small ═══ */
@media(max-width:380px){
  .logo span{display:none}
  .cb{display:none}
  .mb-item:nth-child(4){display:none}
  #ft span:nth-child(2){display:none}
}

/* ═══ Safe area ═══ */
@supports(padding:env(safe-area-inset-top)){
  #hd{padding-top:env(safe-area-inset-top)}
  #ft{padding-bottom:env(safe-area-inset-bottom)}
}