:root{
  --bg:#05010f; --bg2:#0a0320; --grid:#1a0b3d;
  --neon:#00f0ff; --neon2:#ff00e5; --neon3:#ffe600; --neon4:#00ff9d;
  --danger:#ff2d55; --ok:#00ff9d; --dim:#6b5ba8; --text:#e8e0ff;
  --font:'Press Start 2P',ui-monospace,'Cascadia Mono',Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:11px; line-height:1.7;
  overflow-x:hidden;
}
/* ---------- animated background ---------- */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#bg .grid{
  position:absolute;inset:-50% 0 0 0;height:150%;
  background-image:
    linear-gradient(rgba(0,240,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,0,229,.10) 1px,transparent 1px);
  background-size:44px 44px;
  transform:perspective(340px) rotateX(62deg);
  transform-origin:50% 100%;
  animation:scroll 5.5s linear infinite;
}
@keyframes scroll{from{background-position:0 0}to{background-position:0 44px}}
#bg .sun{
  position:absolute;left:50%;top:16%;width:340px;height:340px;
  margin-left:-170px;border-radius:50%;
  background:radial-gradient(circle at 50% 60%,#ff008033,#ff00e511 60%,transparent 70%);
  filter:blur(6px);animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}
#bg .scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px);
  animation:flick 5s steps(60) infinite;
}
@keyframes flick{0%,97%{opacity:.5}98%{opacity:.75}100%{opacity:.5}}
.wrap{position:relative;z-index:1;padding:14px;max-width:1900px;margin:0 auto}

/* ---------- neon primitives ---------- */
.neon{text-shadow:0 0 4px currentColor,0 0 12px currentColor,0 0 26px currentColor}
.panel{
  border:2px solid var(--neon);border-radius:6px;background:rgba(10,3,32,.82);
  box-shadow:0 0 12px #00f0ff55,inset 0 0 22px #00f0ff14;
  padding:12px;position:relative;overflow:hidden;
}
.panel::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  animation:sweep 3.4s linear infinite;
}
@keyframes sweep{to{left:100%}}
.panel.magenta{border-color:var(--neon2);box-shadow:0 0 12px #ff00e555,inset 0 0 22px #ff00e514}
.panel.magenta::before{background:linear-gradient(90deg,transparent,var(--neon2),transparent)}
.panel.gold{border-color:var(--neon3);box-shadow:0 0 12px #ffe60055,inset 0 0 22px #ffe60014}
.panel.gold::before{background:linear-gradient(90deg,transparent,var(--neon3),transparent)}
.panel.green{border-color:var(--neon4);box-shadow:0 0 12px #00ff9d55,inset 0 0 22px #00ff9d14}
.panel.green::before{background:linear-gradient(90deg,transparent,var(--neon4),transparent)}
h2{font-size:11px;letter-spacing:2px;margin-bottom:10px;color:var(--neon)}
h2.m{color:var(--neon2)} h2.g{color:var(--neon3)} h2.n{color:var(--neon4)}

/* ---------- header ---------- */
header{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.logo{font-size:26px;letter-spacing:5px;color:var(--neon2);animation:glow 2.4s ease-in-out infinite}
@keyframes glow{
  0%,100%{text-shadow:0 0 6px #ff00e5,0 0 18px #ff00e5,0 0 40px #ff00e5}
  50%{text-shadow:0 0 3px #ff00e5,0 0 10px #ff00e5,0 0 20px #ff00e5}
}
.logo .three{color:var(--neon)}
.badge{
  padding:7px 14px;border-radius:4px;border:2px solid;font-size:11px;letter-spacing:2px;
  animation:bpulse 1.6s ease-in-out infinite;
}
.badge.paper{border-color:var(--neon4);color:var(--neon4)}
.badge.live{border-color:var(--danger);color:var(--danger);animation:alarm .55s steps(2) infinite}
@keyframes bpulse{0%,100%{box-shadow:0 0 8px currentColor}50%{box-shadow:0 0 22px currentColor}}
@keyframes alarm{0%,100%{box-shadow:0 0 10px var(--danger);opacity:1}50%{box-shadow:0 0 34px var(--danger);opacity:.72}}
.spacer{flex:1}

/* ---------- stat tiles ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin-bottom:12px}
.stat{border:2px solid var(--dim);border-radius:6px;background:rgba(10,3,32,.8);padding:10px;position:relative}
.stat .k{font-size:8px;color:var(--dim);letter-spacing:1px}
.stat .v{font-size:19px;margin-top:7px;letter-spacing:1px}
.stat .sub{font-size:7px;color:var(--dim);margin-top:4px;letter-spacing:.5px;opacity:.8}
.live-tag{font-size:6px;color:var(--neon4);border:1px solid var(--neon4);border-radius:3px;padding:0 3px;margin-left:4px;vertical-align:middle;letter-spacing:1px}
.stat.up .v{color:var(--neon4)} .stat.down .v{color:var(--danger)}
.stat.cy .v{color:var(--neon)} .stat.mg .v{color:var(--neon2)} .stat.gd .v{color:var(--neon3)}
.stat:hover{transform:translateY(-2px);transition:.16s}

/* ---------- layout ---------- */
.cols{display:grid;grid-template-columns:1fr 372px;gap:12px}
@media(max-width:1200px){.cols{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:12px}
#chart{height:520px;width:100%}
.chartbar{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
select,input{
  background:#0a0320;border:2px solid var(--neon);color:var(--text);
  font-family:var(--font);font-size:10px;padding:7px;border-radius:4px;outline:none;
}
select:focus,input:focus{box-shadow:0 0 12px var(--neon)}
button{
  background:transparent;border:2px solid var(--neon);color:var(--neon);
  font-family:var(--font);font-size:10px;padding:8px 13px;border-radius:4px;
  cursor:pointer;letter-spacing:1px;transition:.14s;position:relative;overflow:hidden;
}
button:hover{background:var(--neon);color:#05010f;box-shadow:0 0 18px var(--neon)}
button:active{transform:scale(.96)}
button.danger{border-color:var(--danger);color:var(--danger)}
button.danger:hover{background:var(--danger);color:#fff;box-shadow:0 0 18px var(--danger)}
button.go{border-color:var(--neon4);color:var(--neon4)}
button.go:hover{background:var(--neon4);color:#05010f;box-shadow:0 0 18px var(--neon4)}
button:disabled{opacity:.35;cursor:not-allowed}
label{display:block;font-size:8px;color:var(--dim);margin:9px 0 4px;letter-spacing:1px}
input{width:100%}

/* ---------- tables / feed ---------- */
table{width:100%;border-collapse:collapse;font-size:9px}
th{color:var(--dim);text-align:left;padding:5px 4px;border-bottom:1px solid var(--grid);font-size:8px}
td{padding:5px 4px;border-bottom:1px solid rgba(26,11,61,.55)}
tr:hover td{background:rgba(0,240,255,.07)}
.pos{color:var(--neon4)} .neg{color:var(--danger)}
#feed{height:196px;overflow-y:auto;font-size:9px}
#feed div{padding:3px 0;border-bottom:1px solid rgba(26,11,61,.4);animation:slide .28s ease}
@keyframes slide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.t{color:var(--dim)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#0a0320}
::-webkit-scrollbar-thumb{background:var(--neon);border-radius:4px}

/* ---------- bots ---------- */
.bot{border:2px solid var(--neon4);border-radius:5px;padding:9px;margin-bottom:8px;background:rgba(0,255,157,.05)}
.bot .row{display:flex;justify-content:space-between;align-items:center}
.bot .name{color:var(--neon4);letter-spacing:1px}
.bar{height:5px;background:var(--grid);border-radius:3px;margin-top:7px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--neon4),var(--neon));
  box-shadow:0 0 10px var(--neon4);transition:width .5s ease}

/* ---------- the switch ---------- */
.switch{display:flex;align-items:center;gap:12px;margin-top:10px}
.led{width:15px;height:15px;border-radius:50%;background:var(--neon4);
  box-shadow:0 0 14px var(--neon4);animation:bpulse 1.7s infinite}
.led.live{background:var(--danger);box-shadow:0 0 18px var(--danger);animation:alarm .55s steps(2) infinite}
.warn{color:var(--neon3);font-size:8px;line-height:1.9;margin-top:9px}
.tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.tab{padding:6px 11px;border:2px solid var(--dim);border-radius:4px;cursor:pointer;font-size:9px;color:var(--dim)}
.tab.on{border-color:var(--neon2);color:var(--neon2);box-shadow:0 0 12px #ff00e544}
.hide{display:none}
.mini{font-size:8px;color:var(--dim);letter-spacing:.5px}

/* ---------------------------------------------------- the trade log */
table.tl{width:100%;border-collapse:collapse;font-size:11px}
table.tl th{
  text-align:left;color:var(--dim,#7a6a9e);font-weight:400;font-size:9px;
  letter-spacing:1px;padding:4px 6px 4px 0;border-bottom:1px solid #2d1b5e;
}
table.tl td{padding:4px 6px 4px 0;border-bottom:1px solid rgba(45,27,94,.4)}
table.tl tr:hover td{background:rgba(255,43,214,.05)}
table.tl .pos{color:#39ff8b}
table.tl .neg{color:#ff3b6b}
#btnClearLog{
  background:transparent;border:1px solid #ff3b6b;color:#ff3b6b;
  border-radius:6px;padding:2px 10px;font-size:9px;letter-spacing:1px;
  font-family:inherit;
}
#btnClearLog:hover{background:rgba(255,59,107,.15)}