:root{
  --bg:#020803; --panel:#06120a; --panel2:#0a1a10; --card:#081509;
  --line:#123f22; --line-hi:#1f7a3d;
  --grn:#3dff72; --grn-dim:#2bd15a; --grn-soft:#9dffb8;
  --txt:#b8d9c1; --txt-dim:#5f8a6d; --txt-mute:#3d5c48;
  --warn:#ffd23d; --bad:#ff5d5d;
  --glow:0 0 8px rgba(61,255,114,.45), 0 0 24px rgba(61,255,114,.12);
  --font-d:'Share Tech Mono',monospace; --font-b:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--font-b);font-size:13px;
  background-image:linear-gradient(rgba(61,255,114,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(61,255,114,.025) 1px,transparent 1px);
  background-size:34px 34px;}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);opacity:.5}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
h1,h2,h3,.disp{font-family:var(--font-d);letter-spacing:.08em}
a{color:var(--grn)}
button{font-family:var(--font-b);cursor:pointer}
input,select,textarea{font-family:var(--font-b);background:#03110a;border:1px solid var(--line);color:var(--grn-soft);padding:8px 10px;font-size:13px;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--grn-dim);box-shadow:0 0 0 1px rgba(61,255,114,.25)}
:focus-visible{outline:2px solid var(--grn);outline-offset:2px}

/* ===== LOGIN GATE ===== */
#gate{position:fixed;inset:0;background:var(--bg);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.gate-box{width:100%;max-width:460px;border:1px solid var(--line-hi);background:var(--panel);padding:34px 30px;position:relative;box-shadow:var(--glow)}
.gate-box::before,.gate-box::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--grn)}
.gate-box::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.gate-box::after{bottom:-2px;right:-2px;border-left:none;border-top:none}
.gate-box h1{color:var(--grn);font-size:26px;text-shadow:var(--glow);margin-bottom:4px}
.gate-box .sub{color:var(--txt-dim);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:24px}
.gate-box label{display:block;font-size:10px;letter-spacing:.18em;color:var(--txt-dim);text-transform:uppercase;margin:14px 0 5px}
.gate-box .hint{font-size:11px;color:var(--txt-mute);margin-top:14px;line-height:1.6}
.gate-err{color:var(--bad);font-size:12px;margin-top:12px;min-height:16px}
.btn{background:linear-gradient(180deg,#0d2f18,#07200f);border:1px solid var(--line-hi);color:var(--grn);
  padding:10px 18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:box-shadow .15s,background .15s}
.btn:hover{box-shadow:var(--glow);background:#0f3a1d}
.btn.full{width:100%;margin-top:22px}
.btn.sm{padding:5px 12px;font-size:10px}
.btn.ghost{background:transparent;border-color:var(--line)}

/* ===== LAYOUT ===== */
#app{display:none;grid-template-columns:210px 1fr 300px;gap:14px;padding:14px;max-width:1720px;margin:0 auto;min-height:100vh}
#app.on{display:grid}
.col-l,.col-r{display:flex;flex-direction:column;gap:14px}
.col-m{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(max-width:1250px){#app{grid-template-columns:200px 1fr}.col-r{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}.col-r>section{flex:1 1 280px}}
@media(max-width:800px){#app{grid-template-columns:1fr}.col-l{flex-direction:row;flex-wrap:wrap}.col-l>section{flex:1 1 260px}}

section.panel{border:1px solid var(--line);background:var(--panel)}
.p-head{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid var(--line);background:var(--panel2)}
.p-head h2{font-size:11px;color:var(--grn-soft);letter-spacing:.2em;text-transform:uppercase}
.p-head .lnk{font-size:10px;letter-spacing:.12em;color:var(--txt-dim);text-transform:uppercase;background:none;border:none}
.p-head .lnk:hover{color:var(--grn)}
.p-body{padding:13px}

/* ===== BRAND / SIDEBAR ===== */
.brand{padding:20px 14px;text-align:center;border:1px solid var(--line);background:var(--panel)}
.brand .crest{font-size:34px;line-height:1;filter:drop-shadow(0 0 10px rgba(61,255,114,.5))}
.brand h1{color:var(--grn);font-size:22px;text-shadow:var(--glow);margin-top:8px}
.brand .motto{font-size:10px;color:var(--grn-dim);letter-spacing:.14em;margin-top:6px}
.brand .tag{font-size:9px;color:var(--txt-mute);letter-spacing:.26em;margin-top:8px;text-transform:uppercase}
nav .p-body{padding:6px}
.nav-it{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;border-left:2px solid transparent;
  color:var(--txt-dim);padding:9px 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:left;transition:.12s}
.nav-it .k{font-size:9px;color:var(--txt-mute);width:18px}
.nav-it:hover{color:var(--grn-soft);background:rgba(61,255,114,.05)}
.nav-it.act{color:var(--grn);border-left-color:var(--grn);background:linear-gradient(90deg,rgba(61,255,114,.12),transparent)}
.nav-it.act .k{color:var(--grn-dim)}

/* ===== TOP BAR ===== */
.topbar{border:1px solid var(--line-hi);background:var(--panel);display:flex;align-items:stretch;position:relative;overflow:hidden}
.topbar::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 62% 50%,rgba(61,255,114,.09) 0 2px,transparent 2px);background-size:9px 9px;opacity:.5;pointer-events:none}
.tb-id{padding:16px 22px;display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.tb-id .crest{font-size:30px;filter:drop-shadow(0 0 8px rgba(61,255,114,.5))}
.tb-id h1{font-size:24px;color:#fff;white-space:nowrap}
.tb-id h1 span{color:var(--grn);text-shadow:var(--glow)}
.tb-id .sub{font-size:9px;color:var(--txt-dim);letter-spacing:.3em;text-transform:uppercase}
.tb-use{align-self:center;font-family:var(--font-d);color:var(--grn);font-size:13px;letter-spacing:.14em;white-space:nowrap;padding:0 18px}
.radar{align-self:center;width:74px;height:74px;border-radius:50%;border:1px solid var(--line-hi);position:relative;flex:none;margin:0 10px;
  background:radial-gradient(circle,transparent 30%,rgba(61,255,114,.06) 31%,transparent 32%,transparent 60%,rgba(61,255,114,.06) 61%,transparent 62%)}
.radar::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(61,255,114,.55),transparent 70deg);animation:sweep 3.4s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.tb-conn{align-self:center;border:1px solid var(--line-hi);padding:10px 14px;margin:0 10px;font-size:10px;letter-spacing:.14em;color:var(--txt-dim);text-transform:uppercase;white-space:nowrap}
.tb-conn b{color:var(--grn);display:flex;align-items:center;gap:7px;margin-top:3px;font-size:12px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--grn);box-shadow:var(--glow);animation:blink 1.6s infinite}
.dot.red{background:var(--bad);box-shadow:0 0 8px rgba(255,93,93,.6)}
@keyframes blink{50%{opacity:.35}}
.tb-clock{border-left:1px solid var(--line);padding:12px 18px;display:grid;gap:5px;align-content:center}
.tb-clock .row{display:flex;justify-content:space-between;gap:14px;font-size:11px;color:var(--txt-dim);letter-spacing:.1em}
.tb-clock .row b{font-family:var(--font-d);color:var(--grn-soft);font-size:14px;border-bottom:1px solid var(--line);min-width:110px;text-align:right}
@media(max-width:1000px){.tb-use,.radar{display:none}}
@media(max-width:640px){.tb-clock{display:none}}

/* ===== PLAYER CARD ===== */
.pcard{border:1px solid var(--line-hi);background:linear-gradient(120deg,#0a1a10,#050f08 55%);padding:20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden}
.pcard::after{content:"◤";position:absolute;right:12px;bottom:4px;color:var(--line);font-size:22px}
.avatar{width:86px;height:86px;border:1px solid var(--line-hi);background:radial-gradient(circle,#0f2f18,#041006);display:flex;align-items:center;justify-content:center;font-size:42px;flex:none;box-shadow:inset 0 0 20px rgba(61,255,114,.15)}
.pmeta .lbl{font-size:9px;color:var(--txt-dim);letter-spacing:.24em;text-transform:uppercase}
.pmeta .name{font-family:var(--font-d);font-size:26px;color:#fff;margin:2px 0 8px}
.pmeta .pid{font-family:var(--font-d);font-size:16px;color:var(--grn)}
.bars{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap}
.bar{border:1px solid var(--line);background:var(--card);padding:10px 14px;min-width:170px}
.bar .bl{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.16em;color:var(--txt-dim);text-transform:uppercase}
.bar .bl b{color:var(--grn-soft);font-size:13px;font-family:var(--font-d)}
.bar .track{height:6px;background:#03170b;border:1px solid var(--line);margin-top:8px}
.bar .fill{height:100%;background:linear-gradient(90deg,var(--grn-dim),var(--grn));box-shadow:var(--glow);transition:width .6s}
.bar.nv .fill{background:linear-gradient(90deg,#c9a227,var(--warn));box-shadow:0 0 8px rgba(255,210,61,.4)}

/* ===== STAT GRID ===== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.stat{border:1px solid var(--line);background:var(--card);padding:16px 14px;text-align:center;transition:border-color .15s}
.stat:hover{border-color:var(--line-hi)}
.stat .sl{font-size:9px;letter-spacing:.22em;color:var(--txt-dim);text-transform:uppercase}
.stat .sv{font-family:var(--font-d);font-size:22px;color:var(--grn-soft);margin-top:8px;text-shadow:0 0 12px rgba(61,255,114,.25)}
.stat .ss{font-size:10px;color:var(--txt-mute);margin-top:5px}

/* quick actions */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.qa{border:1px solid var(--line);background:var(--card);padding:14px;text-align:left;color:var(--txt);position:relative;transition:.15s}
.qa:hover{border-color:var(--grn-dim);box-shadow:0 0 14px rgba(61,255,114,.12)}
.qa h3{font-size:11px;color:var(--grn);letter-spacing:.14em;text-transform:uppercase}
.qa p{font-size:11px;color:var(--txt-dim);margin-top:7px;line-height:1.5}
.qa::after{content:"›";position:absolute;right:12px;bottom:8px;color:var(--grn);font-size:16px}

/* ===== TABLES ===== */
table{width:100%;border-collapse:collapse;font-size:12px}
th{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-dim);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel2);cursor:pointer;white-space:nowrap}
th:hover{color:var(--grn)}
td{padding:8px 10px;border-bottom:1px solid rgba(18,63,34,.5)}
tr:hover td{background:rgba(61,255,114,.04)}
.st{font-size:10px;padding:2px 8px;border:1px solid var(--line);letter-spacing:.08em;white-space:nowrap}
.st.ok{color:var(--grn);border-color:var(--line-hi)}
.st.hosp{color:var(--bad);border-color:#5c1f1f}
.st.trav{color:#6db7ff;border-color:#1f3a5c}
.st.jail{color:var(--warn);border-color:#5c4c1f}
.st.off{color:var(--txt-mute)}
.st.idle{color:var(--warn);border-color:#5c4c1f}

/* ===== SIDE WIDGETS ===== */
.online-count{font-family:var(--font-d);font-size:32px;color:var(--grn);text-shadow:var(--glow)}
.online-sub{font-size:10px;color:var(--txt-dim);letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
.mem{border:1px solid var(--line);background:var(--card);padding:9px 11px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.mem .mn{font-size:12px;color:var(--txt);word-break:break-all}
.mem .mn span{color:var(--txt-mute)}
.mem .ma{font-size:10px;color:var(--txt-mute);margin-top:3px}
.pill{font-size:9px;letter-spacing:.14em;padding:3px 9px;border:1px solid var(--line-hi);color:var(--grn);background:rgba(61,255,114,.08);flex:none}
.alert-row{font-size:12px;line-height:1.7;color:var(--txt)}
.alert-row b{color:var(--grn)}
.alert-row .warn{color:var(--warn)}
.alert-row .crit{color:var(--bad)}
.kv{display:flex;justify-content:space-between;font-size:11px;padding:6px 0;border-bottom:1px dashed rgba(18,63,34,.6)}
.kv:last-child{border:none}
.kv b{color:var(--grn-soft);font-family:var(--font-d)}
.kv span{color:var(--txt-dim);letter-spacing:.1em;text-transform:uppercase;font-size:10px}

/* war timer */
.war-big{font-family:var(--font-d);font-size:26px;color:var(--grn);text-shadow:var(--glow);text-align:center;line-height:1.25;padding:10px 0}
.war-big.active{color:var(--bad);text-shadow:0 0 12px rgba(255,93,93,.5)}
.war-sub{text-align:center;font-size:9px;letter-spacing:.24em;color:var(--txt-dim);text-transform:uppercase}
.war-clock{text-align:center;font-family:var(--font-d);font-size:15px;color:var(--grn-soft);margin-top:6px}

/* chain widget */
.chain-num{font-family:var(--font-d);font-size:40px;color:var(--grn);text-shadow:var(--glow);text-align:center}
.chain-num.hot{color:var(--warn);text-shadow:0 0 14px rgba(255,210,61,.5)}

/* pages */
.page{display:none}
.page.act{display:flex;flex-direction:column;gap:14px}
.note{font-size:12px;color:var(--txt-dim);line-height:1.7}
.err-inline{color:var(--txt-mute);font-size:12px;line-height:1.6}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
.spin{color:var(--txt-mute);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.spin::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.form-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.form-row .fld{flex:1;min-width:180px}
.form-row label{display:block;font-size:9px;letter-spacing:.18em;color:var(--txt-dim);text-transform:uppercase;margin-bottom:5px}
.target-card{border:1px solid var(--line);background:var(--card);padding:14px;margin-top:12px}
.target-card h3{color:var(--grn);font-size:15px}
.footer-note{text-align:center;font-size:10px;color:var(--txt-mute);letter-spacing:.14em;padding:6px 0 14px}
.ticker{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border:1px solid var(--line);background:var(--panel);padding:11px 16px;font-size:10px;letter-spacing:.18em;color:var(--txt-dim);text-transform:uppercase}
.ticker span::before{content:"> ";color:var(--grn)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tab{background:var(--card);border:1px solid var(--line);color:var(--txt-dim);padding:8px 14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:.12s}
.tab:hover{color:var(--grn-soft);border-color:var(--line-hi)}
.tab.act{background:var(--grn);color:#04120a;border-color:var(--grn);font-weight:700;box-shadow:var(--glow)}
.strike{border:1px solid #5c1f1f;background:rgba(255,93,93,.05);padding:10px 12px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.strike b{color:var(--bad)}
.strike .cd{font-family:var(--font-d);color:var(--warn)}
.score-track{height:10px;background:#03170b;border:1px solid var(--line);margin-top:10px;position:relative}
.score-track .us{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--grn-dim),var(--grn));box-shadow:var(--glow)}
.sec-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grn-soft);border-bottom:1px solid var(--line);padding-bottom:7px;margin:18px 0 10px;font-family:var(--font-d)}