:root{
  --bg:#0b0e14; --panel:#141923; --panel2:#1b2230; --line:#222b3a;
  --txt:#dbe3f0; --muted:#7b8798; --accent:#4ea1ff; --green:#2ecc71; --red:#ff5364;
  --amber:#f5a623;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.4 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
h2,h3{margin:0 0 10px}
h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.muted{color:var(--muted)} .hidden{display:none!important}
.pos{color:var(--green)} .neg{color:var(--red)}

/* top bar */
.topbar{display:flex;align-items:center;gap:18px;padding:10px 18px;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:700;letter-spacing:.12em}
.brand-sub{color:var(--accent);font-size:11px}
.acct-pick select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  padding:6px 10px;border-radius:6px}
.top-stats{display:flex;gap:22px;margin-left:auto}
.top-stats .stat{text-align:right}
.top-stats .stat span{font-weight:600;font-size:15px}
.top-actions{display:flex;gap:8px}
.dot{font-size:11px}.dot.ok{color:var(--green)}.dot.bad{color:var(--red)}

/* buttons */
.btn{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  padding:7px 12px;border-radius:6px;cursor:pointer;font-size:12px}
.btn:hover{border-color:var(--accent)}
.btn-warn{border-color:var(--amber)} .btn-kill{background:#3a1620;border-color:var(--red);color:var(--red);font-weight:700}
.btn-kill.active{background:var(--red);color:#fff}
.link{background:none;border:none;color:var(--accent);cursor:pointer;font-size:12px}
.btn-sm{padding:3px 8px;font-size:11px}

/* grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;padding:16px;max-width:1500px;margin:0 auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
.span-4{grid-column:span 4}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
@media(max-width:1000px){.span-4,.span-8{grid-column:span 12}}

.big{font-size:30px;font-weight:700;margin:4px 0 12px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.row3 span{font-weight:600}
.gauge{margin:8px 0}
.bar{height:8px;background:var(--panel2);border-radius:5px;overflow:hidden;margin-top:4px}
.bar-fill{height:100%;width:0;background:var(--green);transition:width .4s,background .4s}
.session{margin-top:10px;font-size:12px;color:var(--muted)}

/* bot grid */
.bot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.bot{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px}
.bot.disabled{opacity:.5}
.bot-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bot-name{font-weight:700;text-transform:capitalize}
.toggle{width:34px;height:18px;border-radius:10px;background:#3a4254;position:relative;cursor:pointer;border:none}
.toggle.on{background:var(--green)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s}
.toggle.on::after{left:18px}
.bot-metrics{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:12px}
.bot-metrics b{font-weight:600}
.cooldowns{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px}
.cd{font-size:10px;background:#3a2a1a;color:var(--amber);border:1px solid #5a3a1a;
  border-radius:4px;padding:1px 5px}
.cd.clear{background:#16291c;color:var(--green);border-color:#1f3d28}
.edge{font-size:10px;padding:1px 6px;border-radius:4px;background:var(--panel);
  border:1px solid var(--line);margin-left:auto;margin-right:6px}
.edge.pass{color:var(--green);border-color:#1f3d28}
.edge.fail{color:var(--red);border-color:#3d1f24}
.edge.na{color:var(--muted)}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--muted);font-weight:500;font-size:11px;
  text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:7px 8px;border-bottom:1px solid #1a2230}
.tag{font-size:10px;padding:1px 6px;border-radius:4px;background:var(--panel2)}
.tag.buy{color:var(--green)}.tag.sell{color:var(--red)}

.alerts{max-height:160px;overflow:auto;font-size:12px}
.alerts .al{padding:4px 0;border-bottom:1px solid #1a2230}

/* gate */
.gate{position:fixed;inset:0;background:rgba(6,9,14,.96);display:flex;align-items:center;justify-content:center;z-index:100}
.gate-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:30px;width:340px;text-align:center}
.gate-box input{width:100%;padding:10px;margin:14px 0;background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:6px}
.gate-box button{width:100%;padding:10px;background:var(--accent);border:none;color:#04101f;font-weight:700;border-radius:6px;cursor:pointer}
.gate-err{color:var(--red);font-size:12px;margin-top:10px;min-height:16px}

/* manual trade */
.manual{display:flex;flex-direction:column;gap:8px}
.manual input{padding:8px;background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:6px}
.mrow{display:flex;gap:8px}
.side-btn{flex:1;padding:9px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);
  border-radius:6px;cursor:pointer;font-weight:700}
.side-buy.active{background:#16291c;border-color:var(--green);color:var(--green)}
.side-sell.active{background:#2a1620;border-color:var(--red);color:var(--red)}
.btn-open{background:var(--accent);border:none;color:#04101f;font-weight:700;padding:9px;border-radius:6px;cursor:pointer}

/* trade stats */
.trade-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ts{font-size:12px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 10px}
.ts.pos{border-color:#1f3d28}.ts.neg{border-color:#3d1f24}

.badge{font-size:10px;background:var(--red);color:#fff;padding:1px 6px;border-radius:4px}
.foot{padding:10px 18px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}