:root{
  --bg:#0A0F0A; --raise:#0E140E; --line:#123012;
  --phos:#7CFC7C; --phos-bright:#39FF14; --amber:#FFB000; --danger:#FF3B30;
  --mono:"JetBrains Mono","Cascadia Code","DejaVu Sans Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--phos); font-family:var(--mono); font-size:14px;
  text-shadow:0 0 4px rgba(124,252,124,.35); letter-spacing:.02em;
}
body::before{ /* scanlines */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px);
  mix-blend-mode:multiply;
}
body::after{ /* vignette gloss */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9997;
  background:radial-gradient(ellipse at 50% 40%,rgba(124,252,124,.04),transparent 60%),
             radial-gradient(ellipse at 50% 120%,transparent,rgba(0,0,0,.55));
}
body.crt-off::before,body.crt-off::after{display:none}
@media (prefers-reduced-motion:reduce){.beam{display:none!important}}

a{color:var(--phos-bright)}
h1,h2,h3{font-weight:600;margin:.2em 0}
.bright{color:var(--phos-bright)}
.amber{color:var(--amber)} .danger{color:var(--danger)}
.dim{color:#4a7a4a;text-shadow:none}

/* login */
.login-wrap{min-height:100%;display:grid;place-items:center;padding:24px}
.login{position:relative;width:min(440px,92vw);border:1px solid var(--line);background:var(--raise);
  padding:34px 30px;box-shadow:0 0 40px rgba(57,255,20,.06),inset 0 0 60px rgba(0,0,0,.5);overflow:hidden}
.login .beam{position:absolute;left:0;right:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(124,252,124,.06),transparent);animation:vhold 7s linear infinite}
@keyframes vhold{0%{top:-120px}100%{top:100%}}
.wordmark{font-size:30px;font-weight:700;color:var(--phos-bright);text-shadow:0 0 10px rgba(57,255,20,.6)}
.cursor{display:inline-block;width:.62em;height:1.05em;background:var(--phos-bright);
  vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(1) infinite;box-shadow:0 0 8px var(--phos-bright)}
@keyframes blink{50%{opacity:0}}
.tag{color:var(--dim);letter-spacing:.18em;font-size:11px;margin:6px 0 22px}
input,button,select{font-family:var(--mono);font-size:14px}
input,select{width:100%;background:#050805;border:1px solid var(--line);color:var(--phos);
  padding:11px 12px;outline:none;text-shadow:0 0 4px rgba(124,252,124,.4)}
input:focus,select:focus{border-color:var(--phos-bright);box-shadow:0 0 0 1px rgba(57,255,20,.3)}
label{display:block;color:var(--dim);font-size:11px;letter-spacing:.14em;margin:14px 0 5px}
.btn{cursor:pointer;background:#07120a;border:1px solid var(--phos);color:var(--phos-bright);
  padding:10px 16px;letter-spacing:.1em;transition:.12s}
.btn:hover{background:var(--phos);color:#04140a;box-shadow:0 0 14px rgba(57,255,20,.5)}
.btn.danger{border-color:var(--danger);color:var(--danger)} .btn.danger:hover{background:var(--danger);color:#150404}
.btn.small{padding:6px 11px;font-size:12px}
.err{color:var(--danger);margin-top:12px;font-size:12px}

/* app shell */
.topbar{display:flex;align-items:center;gap:18px;padding:12px 20px;border-bottom:1px solid var(--line);
  background:var(--raise);position:sticky;top:0;z-index:10}
.topbar .wordmark{font-size:20px}
.spacer{flex:1}
.pill{border:1px solid var(--line);padding:4px 10px;font-size:12px;color:var(--dim)}
.pill.on{color:var(--phos-bright);border-color:var(--phos)}
.wrap{max-width:1200px;margin:0 auto;padding:22px 20px 60px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--line);background:var(--raise);padding:16px 18px;position:relative}
.card h3{font-size:15px}
.statrow{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.stat{flex:1;min-width:96px;border:1px solid var(--line);padding:8px 10px;background:#060b06}
.stat .k{color:var(--dim);font-size:10px;letter-spacing:.12em}
.stat .v{font-size:20px;color:var(--phos-bright);text-shadow:0 0 8px rgba(57,255,20,.5)}
.state{display:inline-block;padding:2px 9px;border:1px solid var(--phos);font-size:12px}
.state.running{color:var(--phos-bright);border-color:var(--phos-bright)}
.state.offline{color:var(--dim);border-color:var(--line)}
.state.starting,.state.stopping{color:var(--amber);border-color:var(--amber)}
.state.asleep{color:var(--dim);border-color:var(--line)}
.state.parked{color:var(--amber);border-color:var(--line)}
.controls{display:flex;gap:8px;margin:12px 0}
.console{height:230px;overflow:auto;background:#040704;border:1px solid var(--line);padding:8px 10px;
  font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.console .l{color:#bfe9bf;text-shadow:none}
.cmd{display:flex;gap:8px;margin-top:8px}
.cmd input{flex:1}
.section-title{color:var(--dim);letter-spacing:.16em;font-size:11px;margin:26px 0 10px;border-bottom:1px solid var(--line);padding-bottom:6px}
.warn{border-left:3px solid var(--amber);padding:8px 12px;margin:8px 0;background:#0d0b04;font-size:12.5px}
.warn.strong{border-color:var(--danger);background:#120606}
.warn.info{border-color:var(--dim)}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.row>*{flex:1;min-width:120px}
/* keep-alive toggle: a compact strip, not a .row — the checkbox must stay checkbox-sized */
.keepalive{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;
  border:1px solid var(--line);padding:8px 11px;margin:0 0 12px;background:#050805}
.keepalive input{flex:0 0 auto;width:15px;height:15px;margin:0;accent-color:var(--phos)}
.keepalive .kl-t{flex:1}
.sim{position:fixed;top:0;right:0;background:var(--amber);color:#150e00;font-size:10px;letter-spacing:.1em;
  padding:3px 30px;transform:rotate(45deg) translate(28px,-6px);transform-origin:top right;z-index:9999;font-weight:700}

/* ---- management UI ---- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:6px 0 16px;flex-wrap:wrap}
.tab{padding:8px 16px;cursor:pointer;color:var(--dim);border:1px solid transparent;border-bottom:none;letter-spacing:.08em;font-size:12px}
.tab.active{color:var(--phos-bright);border-color:var(--line);background:var(--raise);box-shadow:0 1px 0 var(--raise)}
.tab:hover{color:var(--phos)}
.crumb{margin:6px 0 10px;color:var(--dim);font-size:12px;word-break:break-all}
.crumb a{cursor:pointer;color:var(--phos)}
.flist{border:1px solid var(--line);background:#060b06}
.frow{display:grid;grid-template-columns:1fr 90px 150px 120px;gap:10px;padding:7px 12px;border-bottom:1px solid #0c1a0c;align-items:center;font-size:13px}
.frow:last-child{border-bottom:none}
.frow.head{color:var(--dim);font-size:11px;letter-spacing:.1em;background:#081008}
.frow .nm{cursor:pointer;color:var(--phos)} .frow .nm.dir{color:var(--phos-bright)}
.frow .nm:hover{text-decoration:underline}
.frow .act{display:flex;gap:6px;justify-content:flex-end}
.iconbtn{cursor:pointer;color:var(--dim);border:1px solid var(--line);padding:2px 7px;font-size:11px}
.iconbtn:hover{color:var(--phos-bright);border-color:var(--phos)}
.iconbtn.danger:hover{color:var(--danger);border-color:var(--danger)}
.adminwrap{overflow-x:auto;border:1px solid var(--line);background:var(--raise)}
.admintbl{border-collapse:collapse;font-size:12px;white-space:nowrap;min-width:100%}
.admintbl th{position:sticky;top:0;background:#081008;color:var(--dim);text-align:left;font-size:10px;
  letter-spacing:.08em;padding:8px 10px;border-bottom:1px solid var(--line);z-index:1}
.admintbl td{padding:7px 10px;border-bottom:1px solid rgba(124,252,124,.06);vertical-align:top}
.admintbl tr:hover td{background:rgba(57,255,20,.04)}
.meter{position:relative;height:20px;background:#050805;border:1px solid var(--line);margin:6px 0 2px;overflow:hidden}
.meter-fill{position:absolute;top:0;left:0;height:100%;transition:width .4s ease}
.meter-hw{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--amber);opacity:.85}
.meter-lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;
  color:#eafeea;text-shadow:0 0 3px #000,0 0 3px #000;letter-spacing:.04em}
.flag{display:inline-block;font-size:10px;padding:1px 6px;border:1px solid var(--line);border-radius:2px;margin:1px 0}
.flag.amber{color:var(--amber);border-color:var(--amber)} .flag.red{color:var(--danger);border-color:var(--danger)}
.flag.info{color:var(--dim)} .flag.dim{color:var(--dim)}
.setrow{padding:12px 0;border-bottom:1px solid var(--line)}
.setrow:first-child{padding-top:0} .setrow:last-of-type{border-bottom:none}
.setrow label{margin-top:0}
.startupcmd{white-space:pre-wrap;word-break:break-all;background:#040704;border:1px solid var(--line);
  padding:10px 12px;font-size:12px;line-height:1.5;color:var(--phos);margin:0;text-shadow:none}
.editor{margin-top:12px;border:1px solid var(--phos);background:#040704}
.editor .bar{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);background:#07120a}
.editor textarea{width:100%;height:420px;background:#040704;color:var(--phos);border:none;outline:none;
  font-family:var(--mono);font-size:13px;line-height:1.5;padding:10px 12px;resize:vertical;text-shadow:none}
.toolbar{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap;align-items:center}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--dim);font-size:11px;letter-spacing:.1em;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px 10px;border-bottom:1px solid #0c1a0c}
.back{cursor:pointer;color:var(--phos);margin-bottom:10px;display:inline-block}
.kv{display:flex;gap:10px;margin:6px 0} .kv .k{color:var(--dim);width:120px}
.card.clickable{cursor:pointer} .card.clickable:hover{border-color:var(--phos)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#07120a;border:1px solid var(--phos);
  color:var(--phos-bright);padding:10px 18px;z-index:9999;box-shadow:0 0 18px rgba(57,255,20,.3)}

/* live performance graph */
.perf{border:1px solid var(--phos);background:linear-gradient(180deg,#07120a,#040704);padding:10px 12px 4px;margin:6px 0 14px;
  box-shadow:0 0 22px rgba(57,255,20,.06),inset 0 0 40px rgba(0,0,0,.4)}
.perf-hd{display:flex;align-items:baseline;gap:12px}
.perf-t{color:var(--phos-bright);letter-spacing:.14em;font-size:12px;text-shadow:0 0 8px rgba(57,255,20,.5)}
.perf-sub{font-size:11px}
.perf-now{font-size:26px;color:var(--phos-bright);text-shadow:0 0 10px rgba(57,255,20,.6)}
.perf canvas{display:block;width:100%;height:120px}

/* ---- mobile layout (m.necronet / small screens) ---- */
@media (max-width:640px){
  .wrap{padding:14px 12px 54px}
  .topbar{gap:9px;padding:10px 12px}
  .topbar .wordmark{font-size:17px}
  .pill{font-size:11px;padding:3px 8px}
  .row{flex-direction:column;align-items:stretch}
  .row>*{min-width:0;width:100%}
  .stat{min-width:0;flex:1 1 40%}
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tab{white-space:nowrap;padding:9px 13px}
  .frow{grid-template-columns:1fr auto;gap:8px}
  .frow>div:nth-child(2),.frow>div:nth-child(3),.frow.head>div:nth-child(2),.frow.head>div:nth-child(3){display:none}
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
  .console{height:200px} .editor textarea{height:300px}
  .btn,.btn.small{padding:11px 15px} .iconbtn{padding:7px 11px}
  .cmd input{font-size:16px}   /* >=16px stops iOS zoom-on-focus */
  input,select{font-size:16px}
  .perf canvas{height:100px} .perf-sub{display:none}
  h2{font-size:19px}
  .kv{flex-wrap:wrap;align-items:center}
  .kv .bright{word-break:break-all;font-size:16px!important}
  .kv .k{width:auto;min-width:70px}
}

/* per-thread CPU panels: one row per physical core, the core on the left and its SMT sibling on
   the right, so a single-threaded game visibly fills one graph and leaves the other quiet */
.corerow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.corepanel.empty{border-left-color:transparent}
.corepanel{margin:5px 0;padding:3px 8px;border-left:2px solid var(--line);border-radius:3px;min-width:0}
.corepanel.tick{border-left-color:var(--phos-bright);background:rgba(57,255,20,.06)}
.corelbl{color:var(--dim);letter-spacing:.1em;font-size:11px;text-transform:uppercase;margin-bottom:2px}
.corepanel.tick .corelbl{color:var(--phos-bright)}
.tickbadge{margin-left:8px;color:var(--phos-bright);font-weight:bold;text-shadow:0 0 6px rgba(57,255,20,.6)}
.corenote{font-size:11px;margin-top:8px;line-height:1.45;opacity:.85}
canvas.lcore,canvas.hcore{display:block;width:100%;height:64px}
.perf canvas.lcore{height:64px}
/* side by side is only legible while each graph has room; on a phone stack them and drop the
   filler cell that holds the right-hand column open */
@media (max-width:640px){.corerow{grid-template-columns:1fr;gap:0}.corepanel.empty{display:none}}