:root{
  --bg:#0f1117; --panel:#171a23; --panel2:#1e2230; --line:#2a2f3f;
  --fg:#e6e8ef; --dim:#8b93a7; --accent:#7c6cff; --accent2:#4ad2c8;
  --ok:#3ecf8e; --warn:#f5a524; --err:#f2545b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
header{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:14px;background:var(--panel)}
header h1{margin:0;font-size:17px;font-weight:600;letter-spacing:.3px}
.tag{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--panel2);
  color:var(--dim);border:1px solid var(--line)}
.wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px;max-width:1500px;margin:0 auto}
@media(max-width:900px){.wrap{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.card h2{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--dim);
  text-transform:uppercase;letter-spacing:.8px}
button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:8px 14px;
  font-size:13px;cursor:pointer;font-family:inherit}
button:hover{filter:brightness(1.12)} button:disabled{opacity:.4;cursor:not-allowed}
button.ghost{background:var(--panel2);color:var(--fg);border:1px solid var(--line)}
button.danger{background:transparent;color:var(--err);border:1px solid var(--err);padding:4px 9px;font-size:12px}
input,select{background:var(--panel2);border:1px solid var(--line);color:var(--fg);
  border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit}
input:focus,select:focus{outline:1px solid var(--accent)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dim);display:inline-block}
.dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.item{background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;margin-bottom:8px}
.item .hd{display:flex;justify-content:space-between;align-items:center;gap:10px}
.muted{color:var(--dim);font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
#events{max-height:320px;overflow-y:auto}
.ev{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:7px;
  margin-bottom:5px;background:var(--panel2);border-left:3px solid var(--line)}
.ev.hit{border-left-color:var(--ok)} .ev.miss{border-left-color:var(--line);opacity:.62}
.bar{height:5px;background:var(--panel2);border-radius:3px;overflow:hidden;margin-top:7px}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
#stage{height:170px;border-radius:10px;background:radial-gradient(circle at 50% 60%,#1b1f2e,#0f1117);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  border:1px solid var(--line)}
#stage .txt{font-size:30px;font-weight:700;opacity:0;transform:scale(.6)}
#stage .txt.go{animation:pop 1.5s ease-out}
@keyframes pop{0%{opacity:0;transform:scale(.5) rotate(-8deg)}
  25%{opacity:1;transform:scale(1.12) rotate(2deg)}
  60%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.25)}}
canvas{width:100%;height:110px;display:block;background:var(--panel2);border-radius:8px}
.enroll{border:1px dashed var(--accent);background:rgba(124,108,255,.07)}
.pill{font-size:11px;padding:2px 7px;border-radius:5px;background:var(--panel);border:1px solid var(--line);color:var(--dim)}