/* ═══════════════════════════════════════════════════
   POLYSPEED TERMINAL v4 — TradingView + BTC 5-min
   ═══════════════════════════════════════════════════ */

:root{
  --black:#000;
  --bg:#050505;
  --bg1:#0a0a0a;
  --bg2:#0f0f0f;
  --bg3:#141414;
  --brd:#1a1a1a;
  --brd2:#222;
  --green:#00ff41;
  --green2:#00cc33;
  --green3:#009926;
  --gdim:rgba(0,255,65,0.06);
  --gglow:rgba(0,255,65,0.15);
  --red:#ff0040;
  --red2:#cc0033;
  --rdim:rgba(255,0,64,0.06);
  --amber:#ffaa00;
  --adim:rgba(255,170,0,0.08);
  --cyan:#00e5ff;
  --t0:#b0b0b0;
  --t1:#666;
  --t2:#333;
  --mono:'IBM Plex Mono',monospace;
  --disp:'Azeret Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{
  background:var(--black);
  color:var(--t0);
  font-family:var(--mono);
  font-size:12px;
  height:100%;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--green);color:var(--black)}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--brd2)}

/* CRT Scanlines */
body::after{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px);
  pointer-events:none;z-index:9999;
}

body::before{
  content:'';position:fixed;inset:0;opacity:0.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9998;
}

/* ── Layout ──────────────────────────────────────── */
.app{display:flex;flex-direction:column;height:100vh}

/* ── Top Bar ─────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;height:30px;
  background:var(--bg);border-bottom:1px solid var(--brd);
  padding:0 10px;gap:10px;flex-shrink:0;
}
.logo{
  font-family:var(--disp);font-weight:900;font-size:10px;
  letter-spacing:3px;color:var(--green);
  text-shadow:0 0 20px rgba(0,255,65,0.3);
}
.topbar-div{width:1px;height:14px;background:var(--brd)}
.tb{font-size:9px;color:var(--t1);display:flex;align-items:center;gap:4px}
.tb .val{color:var(--t0)}
.tb .val.green{color:var(--green)}
.spacer{flex:1}

.dot{width:5px;height:5px;border-radius:50%;background:var(--t2)}
.dot.live{background:var(--green);box-shadow:0 0 6px var(--green);animation:blink 2s infinite}
.dot.dead{background:var(--red)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.4}}

.topbtn{
  background:none;border:1px solid var(--brd);color:var(--t1);
  font-family:var(--mono);font-size:8px;padding:2px 7px;
  cursor:pointer;text-transform:uppercase;letter-spacing:1px;
}
.topbtn:hover{border-color:var(--green);color:var(--green)}

/* ── Main Grid ───────────────────────────────────── */
.main{
  flex:1;display:grid;
  grid-template-columns:200px 1fr 170px;
  min-height:0;
}

/* ── Panel Header ────────────────────────────────── */
.ph{
  padding:5px 8px;font-size:8px;font-weight:600;
  text-transform:uppercase;letter-spacing:2px;color:var(--t2);
  border-bottom:1px solid var(--brd);background:var(--bg1);
}

/* ── Left: Markets ───────────────────────────────── */
.panel-left{
  background:var(--bg);border-right:1px solid var(--brd);
  display:flex;flex-direction:column;overflow:hidden;
}
.market-list{flex:1;overflow-y:auto;padding:2px}

.mkt{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:6px 8px;
  background:none;border:none;border-left:2px solid transparent;
  text-align:left;color:var(--t0);font-family:var(--mono);
  font-size:10px;cursor:pointer;line-height:1.35;
  gap:6px;
}
.mkt:hover{background:var(--bg2);border-left-color:var(--t2)}
.mkt.active{background:var(--gdim);border-left-color:var(--green);color:var(--green)}

.mkt-time-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Market status badges */
.mkt-badge{
  font-size:7px;font-weight:700;letter-spacing:1px;
  padding:1px 4px;border-radius:2px;white-space:nowrap;
  text-transform:uppercase;flex-shrink:0;
}
.mkt-badge.live{
  color:var(--green);background:rgba(0,255,65,0.1);
  border:1px solid rgba(0,255,65,0.3);
  animation:blink 2s infinite;
}
.mkt-badge.ended{
  color:var(--t2);background:rgba(255,255,255,0.03);
  border:1px solid var(--brd);
}
.mkt-badge.upcoming{
  color:var(--amber);background:rgba(255,170,0,0.06);
  border:1px solid rgba(255,170,0,0.2);
}

/* Market row status coloring */
.mkt.mkt-live{border-left-color:var(--green3)}
.mkt.mkt-live .mkt-time-label{color:var(--green)}
.mkt.mkt-ended{opacity:0.4}
.mkt.mkt-ended:hover{opacity:0.7}

/* Market status tag in price strip */
.mkt-status-tag{
  font-size:8px;font-weight:700;letter-spacing:1px;
  padding:2px 6px;border-radius:2px;
  text-transform:uppercase;
}
.mkt-status-tag.live{color:var(--green);background:rgba(0,255,65,0.1);border:1px solid rgba(0,255,65,0.3)}
.mkt-status-tag.ended{color:var(--t2);background:rgba(255,255,255,0.03);border:1px solid var(--brd)}
.mkt-status-tag.upcoming{color:var(--amber);background:rgba(255,170,0,0.06);border:1px solid rgba(255,170,0,0.2)}

.mkt-foot{
  padding:5px 7px;border-top:1px solid var(--brd);
  display:flex;gap:4px;
}
.mkt-in{
  flex:1;min-width:0;padding:4px 6px;
  background:var(--bg2);border:1px solid var(--brd);
  color:var(--t0);font-family:var(--mono);font-size:9px;outline:none;
}
.mkt-in:focus{border-color:var(--green3)}
.mkt-in::placeholder{color:var(--t2)}
.mkt-go{
  padding:4px 8px;background:var(--bg3);border:1px solid var(--brd);
  color:var(--t0);font-family:var(--mono);font-size:9px;cursor:pointer;
}
.mkt-go:hover{border-color:var(--green3);color:var(--green)}

/* ── Center ──────────────────────────────────────── */
.center{display:flex;flex-direction:column;min-height:0;background:var(--black)}

/* Price Strip */
.price-strip{
  display:flex;align-items:center;padding:8px 12px;gap:12px;
  border-bottom:1px solid var(--brd);background:var(--bg);flex-shrink:0;
}
.mkt-label{font-size:10px;color:var(--t1);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.price-main{
  font-family:var(--disp);font-size:36px;font-weight:900;
  color:#fff;letter-spacing:-2px;line-height:1;
  transition:color 0.15s;min-width:110px;
}
.price-main.up{color:var(--green)}
.price-main.down{color:var(--red)}

.price-badge{font-size:9px;padding:2px 5px;font-weight:600}
.price-badge.pos{background:var(--gdim);color:var(--green)}
.price-badge.neg{background:var(--rdim);color:var(--red)}

.price-details{display:flex;gap:14px;font-size:10px}
.lbl{color:var(--t2);margin-right:3px}
.bid-v{color:var(--green)}
.ask-v{color:var(--red)}
.spr-v{color:var(--t1)}
.lat-tag{font-size:9px;color:var(--t2);padding:2px 6px;border:1px solid var(--brd)}

/* Chart — TradingView container */
.chart-wrap{flex:1;position:relative;min-height:0;overflow:hidden}

/* Trade Strip */
.trade-strip{
  display:flex;align-items:center;padding:7px 12px;gap:6px;
  border-top:1px solid var(--brd);background:var(--bg);flex-shrink:0;
}
.size-grp{display:flex;gap:2px}

.sz{
  padding:5px 9px;background:var(--bg2);border:1px solid var(--brd);
  color:var(--t1);font-family:var(--mono);font-size:10px;
  cursor:pointer;font-weight:500;
}
.sz:hover{border-color:var(--t2);color:var(--t0)}
.sz.on{border-color:var(--green3);background:var(--gdim);color:var(--green)}

.sz-custom{
  width:50px;padding:5px;background:var(--bg2);border:1px solid var(--brd);
  color:#fff;font-family:var(--mono);font-size:10px;text-align:center;outline:none;
}
.sz-custom:focus{border-color:var(--green3)}
.sz-lbl{font-size:9px;color:var(--t2)}

.trade-btns{display:flex;gap:5px;margin-left:auto}

.tbtn{
  padding:8px 28px;border:none;font-family:var(--disp);
  font-size:12px;font-weight:800;cursor:pointer;
  letter-spacing:1px;text-transform:uppercase;
  transition:all 0.08s;position:relative;
}
.tbtn:active{transform:scale(0.97)}

.tbtn-yes{background:var(--green);color:var(--black)}
.tbtn-yes:hover{background:var(--green2);box-shadow:0 0 20px rgba(0,255,65,0.2)}
.tbtn-no{background:var(--red);color:#fff}
.tbtn-no:hover{background:var(--red2);box-shadow:0 0 20px rgba(255,0,64,0.2)}

.tbtn.busy{opacity:0.4;pointer-events:none}

/* Bottom Bar */
.bottombar{
  display:flex;align-items:center;padding:3px 12px;gap:14px;
  border-top:1px solid var(--brd);background:var(--bg);
  font-size:10px;flex-shrink:0;height:22px;
}
.bb{display:flex;gap:3px;align-items:center}
.bbl{color:var(--t2)}
.bbv{color:var(--t0)}
.bbv.green{color:var(--green)}
.bbv.dim{color:var(--t2)}

/* ── Right: Book + Tape ──────────────────────────── */
.panel-right{
  background:var(--bg);border-left:1px solid var(--brd);
  display:flex;flex-direction:column;overflow:hidden;
}

.ob-sec{flex:1.5;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ob-hdr{
  display:flex;justify-content:space-between;padding:2px 7px;
  font-size:8px;color:var(--t2);text-transform:uppercase;letter-spacing:1px;
  border-bottom:1px solid var(--brd);
}
.ob-asks,.ob-bids{flex:1;overflow:hidden;display:flex;flex-direction:column}
.ob-asks{justify-content:flex-end}
.ob-mid{
  padding:3px 7px;text-align:center;font-size:11px;font-weight:700;
  color:#fff;background:var(--bg2);
  border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);flex-shrink:0;
}

.ob-row{
  display:flex;justify-content:space-between;padding:1px 7px;
  font-size:10px;position:relative;line-height:1.65;
}
.ob-row::after{
  content:'';position:absolute;top:0;bottom:0;right:0;
  width:var(--w,0%);opacity:0.08;
}
.ob-row.ask .ob-price{color:var(--red)}
.ob-row.ask::after{background:var(--red)}
.ob-row.bid .ob-price{color:var(--green)}
.ob-row.bid::after{background:var(--green)}
.ob-size{color:var(--t1)}

.tr-sec{flex:1;display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--brd)}
.tr-list{flex:1;overflow-y:auto}

.tr-row{display:flex;justify-content:space-between;padding:1px 7px;font-size:10px;line-height:1.65}
.tr-row.buy .tr-price{color:var(--green)}
.tr-row.sell .tr-price{color:var(--red)}
.tr-size{color:var(--t1)}
.tr-time{color:var(--t2);font-size:9px}

/* ── Onboarding Overlay ──────────────────────────── */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.94);
  backdrop-filter:blur(8px);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.overlay.hidden{display:none}

.ocard{width:100%;max-width:380px;background:var(--bg1);border:1px solid var(--brd2)}
.ocard-head{padding:20px 22px 14px;border-bottom:1px solid var(--brd)}
.ologo{
  font-family:var(--disp);font-weight:900;font-size:16px;
  letter-spacing:4px;color:var(--green);
  text-shadow:0 0 30px rgba(0,255,65,0.3);margin-bottom:8px;
}
.odesc{font-size:11px;color:var(--t1);line-height:1.5}
.ocard-body{padding:18px 22px}
.osec{font-size:8px;text-transform:uppercase;letter-spacing:2px;color:var(--t2);margin-bottom:8px}

.obtn-mm{
  width:100%;padding:11px;background:var(--bg2);
  border:1px solid var(--brd2);color:var(--amber);
  font-family:var(--mono);font-size:12px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
}
.obtn-mm:hover{border-color:var(--amber);background:var(--adim)}

.odiv{
  display:flex;align-items:center;gap:10px;margin:16px 0;
  font-size:8px;color:var(--t2);letter-spacing:2px;text-transform:uppercase;
}
.odiv::before,.odiv::after{content:'';flex:1;height:1px;background:var(--brd)}

.oig{margin-bottom:10px}
.oil{font-size:10px;color:var(--t1);margin-bottom:4px;display:block}
.oin{
  width:100%;padding:8px 9px;background:var(--bg2);
  border:1px solid var(--brd);color:#fff;
  font-family:var(--mono);font-size:11px;outline:none;
}
.oin:focus{border-color:var(--green3)}
.oin::placeholder{color:var(--t2)}
.osel{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23666'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
}

.obtn-go{
  width:100%;padding:11px;background:var(--green);border:none;
  color:var(--black);font-family:var(--disp);font-size:11px;
  font-weight:800;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;margin-top:6px;
}
.obtn-go:hover{background:var(--green2)}

.oreconnect{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:14px;padding:10px;background:var(--bg2);border:1px solid var(--brd);
  font-size:11px;color:var(--t1);
}
.obtn-rc{
  background:none;border:1px solid var(--green3);color:var(--green);
  padding:4px 12px;font-family:var(--mono);font-size:10px;cursor:pointer;
}
.obtn-rc:hover{background:var(--gdim)}

.onote{
  font-size:9px;color:var(--t2);line-height:1.6;margin-top:14px;
  padding:8px;border-left:2px solid var(--green3);background:var(--gdim);
}

/* ── Toasts ──────────────────────────────────────── */
.toasts{position:fixed;top:34px;right:8px;z-index:600;display:flex;flex-direction:column;gap:3px}
.toast{
  padding:5px 10px;background:var(--bg1);border:1px solid var(--brd);
  font-size:10px;opacity:0;transform:translateX(16px);
  transition:all 0.2s;max-width:260px;font-family:var(--mono);
}
.toast.show{opacity:1;transform:none}
.toast-ok{border-left:2px solid var(--green);color:var(--green)}
.toast-err{border-left:2px solid var(--red);color:var(--red)}
.toast-warn{border-left:2px solid var(--amber);color:var(--amber)}
.toast-info{border-left:2px solid var(--cyan);color:var(--cyan)}

/* ── Mobile ──────────────────────────────────────── */
@media(max-width:768px){
  .main{grid-template-columns:1fr}
  .panel-left,.panel-right{display:none}
  .panel-left.mob-open,.panel-right.mob-open{display:flex;position:fixed;z-index:200;background:var(--bg)}
  .panel-left.mob-open{inset:30px 35% 0 0;border-right:1px solid var(--brd)}
  .panel-right.mob-open{inset:30px 0 0 35%;border-left:1px solid var(--brd)}
  .price-main{font-size:28px}
  .trade-strip{flex-wrap:wrap}
  .trade-btns{width:100%;margin-left:0}
  .tbtn{flex:1;padding:12px 0}
  .price-details{flex-wrap:wrap;gap:8px}
}
@media(min-width:769px){.mob-only{display:none !important}}