:root{
  --bg-deep:#0B0E11;--glass:rgba(11,14,17,0.88);
  --glass-border:rgba(100,140,255,0.25);
  --neon-blue:#4f8fff;--neon-purple:#a855f7;--neon-green:#02C076;
  --neon-red:#CF304A;--neon-yellow:#F0B90B;--neon-cyan:#00B8D9;
  --neon-emerald:#00E676;
  --text-primary:#EAECEF;--text-muted:#9CA3AF;--text-dim:#6B7280;
  --radius:16px;
  --font-mono:'JetBrains Mono',monospace;--font-sans:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-deep);color:var(--text-primary);font-family:var(--font-sans);min-height:100vh;overflow-x:hidden}

/* BG */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(79,143,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(79,143,255,0.03) 1px,transparent 1px);background-size:60px 60px}
.bg-orb{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0;animation:orbF 20s ease-in-out infinite}
.o1{width:500px;height:500px;background:rgba(79,143,255,0.08);top:-10%;left:-5%}
.o2{width:400px;height:400px;background:rgba(168,85,247,0.06);bottom:-5%;right:-5%;animation-delay:-7s}
.o3{width:300px;height:300px;background:rgba(0,255,170,0.04);top:40%;left:50%;animation-delay:-14s}
@keyframes orbF{0%,100%{transform:translate(0,0)}33%{transform:translate(30px,-40px)}66%{transform:translate(-20px,30px)}}

.wrap{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:16px}

/* LOGIN */
.login-wrap{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}
.login-card{background:var(--glass);backdrop-filter:blur(24px);border:1px solid var(--glass-border);border-radius:24px;padding:48px 36px;width:400px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,0.5)}
.login-card .logo{font-family:var(--font-mono);font-size:32px;font-weight:700;letter-spacing:4px;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-green));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.login-card .sub{font-size:10px;color:var(--text-muted);letter-spacing:5px;text-transform:uppercase;margin:4px 0 36px}
.login-card input{width:100%;padding:14px 18px;background:rgba(15,23,42,0.8);border:1px solid rgba(100,140,255,0.15);border-radius:12px;color:var(--text-primary);font-family:var(--font-mono);font-size:14px;margin-bottom:16px;outline:none;transition:border .25s}
.login-card input:focus{border-color:var(--neon-blue);box-shadow:0 0 24px rgba(79,143,255,0.2)}
.login-card button{width:100%;padding:14px;background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));border:none;border-radius:12px;color:#fff;font-family:var(--font-sans);font-size:14px;font-weight:600;cursor:pointer;letter-spacing:1px;transition:transform .2s}
.login-card button:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(79,143,255,0.35)}
.login-err{color:var(--neon-red);font-size:12px;margin-top:12px;min-height:16px}

/* HEADER */
#app{display:none}
.header{display:flex;align-items:center;justify-content:space-between;padding:8px 0 18px;flex-wrap:wrap;gap:8px}
.header-left{display:flex;align-items:center;gap:14px}
.brand{font-family:var(--font-mono);font-size:20px;font-weight:700;letter-spacing:2px;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-green));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;font-family:var(--font-mono);border:1px solid}
.badge-paper{background:rgba(240,185,11,0.1);border-color:rgba(240,185,11,0.3);color:var(--neon-yellow)}
.badge-live{background:rgba(207,48,74,0.25);border-color:rgba(207,48,74,0.5);color:#ff1744;animation:livePulse 1s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.6}}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot-on{background:var(--neon-green);box-shadow:0 0 8px var(--neon-green)}
.dot-off{background:var(--neon-red);box-shadow:0 0 8px var(--neon-red)}
.header-right{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}

/* CARDS */
.card{background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:20px;transition:border-color .3s}
.card:hover{border-color:rgba(100,140,255,0.4)}
.card-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card-title .icon{font-size:14px}

/* KPI ROW */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.kpi{text-align:center;padding:16px 12px}
.kpi .label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.kpi .value{font-family:var(--font-mono);font-size:22px;font-weight:700}
.kpi .sub{font-size:10px;color:var(--text-dim);margin-top:4px;font-family:var(--font-mono)}

/* STRATEGY PANELS */
.strat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
@media(max-width:900px){.strat-grid{grid-template-columns:1fr}}
.strat .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.strat .head .name{font-size:13px;font-weight:600;letter-spacing:1px}
.strat .status{font-size:10px;font-family:var(--font-mono);font-weight:700;letter-spacing:1px;padding:2px 8px;border-radius:6px}
.status-live{background:rgba(0,230,118,0.15);color:var(--neon-emerald)}
.status-paper{background:rgba(240,185,11,0.12);color:var(--neon-yellow)}
.status-off{background:rgba(100,100,100,0.15);color:var(--text-dim)}
.strat .row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;font-family:var(--font-mono)}
.strat .row .lbl{color:var(--text-muted)}
.strat .row .val{color:var(--text-primary);font-weight:500}

/* POSITIONS TABLE */
.pos-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12px}
.pos-table th{text-align:left;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);padding:8px 6px;border-bottom:1px solid rgba(100,140,255,0.1)}
.pos-table td{padding:8px 6px;border-bottom:1px solid rgba(100,140,255,0.05)}
.green{color:var(--neon-emerald)}.red{color:var(--neon-red)}.yellow{color:var(--neon-yellow)}.cyan{color:var(--neon-cyan)}.purple{color:var(--neon-purple)}.muted{color:var(--text-muted)}

/* HEALTH BAR */
.health-bar{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px;font-family:var(--font-mono);font-size:11px}
.health-item{display:flex;align-items:center;gap:6px}
.health-item .lbl{color:var(--text-muted)}
.health-item .val{font-weight:600}

/* ACTIVITY LOG */
.log{font-family:var(--font-mono);font-size:13px;line-height:1.8;min-height:40px}

/* BOTTOM ROW */
.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
@media(max-width:700px){.bottom-grid{grid-template-columns:1fr}}

/* FOOTER */
.footer{text-align:center;font-size:10px;color:var(--text-dim);padding:20px 0;letter-spacing:1px;font-family:var(--font-mono)}

/* NAV TABS */
.nav{display:flex;gap:4px;margin-bottom:16px}
.nav-btn{padding:8px 18px;border-radius:10px;border:1px solid rgba(100,140,255,0.1);background:transparent;color:var(--text-muted);font-family:var(--font-mono);font-size:11px;font-weight:600;cursor:pointer;letter-spacing:1px;transition:all .2s}
.nav-btn:hover{border-color:rgba(100,140,255,0.3);color:var(--text-primary)}
.nav-btn.active{background:linear-gradient(135deg,rgba(79,143,255,0.15),rgba(168,85,247,0.1));border-color:rgba(79,143,255,0.4);color:var(--neon-blue)}
.page{display:none}.page.active{display:block}

/* CONFIG PAGE */
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.cfg-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(100,140,255,0.06);font-size:13px}
.cfg-item .lbl{color:var(--text-muted)}
.cfg-item .val{font-family:var(--font-mono);font-weight:600}
.btn{padding:10px 20px;border-radius:10px;border:none;font-family:var(--font-mono);font-size:12px;font-weight:600;cursor:pointer;letter-spacing:1px;transition:all .2s}
.btn-danger{background:rgba(207,48,74,0.2);color:var(--neon-red);border:1px solid rgba(207,48,74,0.3)}
.btn-danger:hover{background:rgba(207,48,74,0.35)}
.btn-primary{background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));color:#fff}
.btn-primary:hover{transform:translateY(-1px)}

/* FUNDING BAR */
.funding-bar{height:4px;border-radius:2px;background:rgba(100,140,255,0.08);overflow:hidden;margin-top:4px}
.funding-bar .fill{height:100%;border-radius:2px;transition:width .5s}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(100,140,255,0.2);border-radius:3px}