:root{
  --bg:#0b0f1a; --panel:#0f1626; --panel2:#0c1220; --text:#e7ecf7; --muted:#9aa8c5;
  --border:rgba(255,255,255,.08); --accent:#22c55e; --blue:#60a5fa; --yellow:#facc15;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,Inter,Roboto}
.hidden{display:none!important}.tiny{font-size:12px}.center{justify-content:center}

.header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 18px;background:linear-gradient(180deg,rgba(11,15,26,.9),rgba(11,15,26,.6));border-bottom:1px solid var(--border)}
.brand{font-weight:700}
.conn{display:flex;gap:8px;align-items:center;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%}
.dot--ok{background:#22c55e}.dot--warn{background:#f59e0b}.dot--off{background:#ef4444}

.wrap{max-width:1000px;margin:18px auto;padding:0 16px;display:grid;gap:16px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:14px;padding:14px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
input{background:#0b1322;border:1px solid var(--border);border-radius:10px;padding:10px;color:var(--text);outline:none}
input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.row{display:flex;gap:10px;align-items:center;margin-top:10px}
.btn{background:#122038;border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer}
.btn--accent{background:linear-gradient(180deg,#22c55e,#16a34a);color:#07140a;border-color:rgba(34,197,94,.6)}
.btn--ghost{background:transparent}
.muted{color:var(--muted)}

.hud{display:flex;gap:16px;align-items:center;margin-bottom:10px}
.arena{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),
  repeating-linear-gradient(0deg,rgba(96,165,250,.08) 0 1px,transparent 1px 20px),
  repeating-linear-gradient(90deg,rgba(250,204,21,.08) 0 1px,transparent 1px 20px),#0a1220}
canvas{display:block;width:100%;height:auto}

.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.ovcard{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:14px;padding:16px;min-width:240px;text-align:center}