:root {
  --bg: #0b1020;
  --panel: #151b2f;
  --panel-2: #1d2540;
  --text: #f5f7ff;
  --muted: #98a2c3;
  --accent: #7c5cff;
  --accent-2: #2ed3b7;
  --danger: #ff5d73;
  --warning: #ffcc66;
  --border: rgba(255,255,255,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.30);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, Arial, sans-serif; background: radial-gradient(circle at top, #1a2140 0%, var(--bg) 42%); color: var(--text); }
body { padding: 24px; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.container { max-width: 1400px; margin: 0 auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.brand { font-size:28px; font-weight:800; letter-spacing:-.03em; }
.status { padding:8px 12px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.04); }
.status.online { color:#b8ffe8; border-color:rgba(46,211,183,.4); background:rgba(46,211,183,.08); }
.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns: 1.2fr .8fr; }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.card { background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:24px; padding:22px; box-shadow:var(--shadow); }
.card h2,.card h3 { margin:0 0 16px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-size:13px; color:var(--muted); }
input, select { width:100%; border:1px solid var(--border); background:#0e1427; color:var(--text); border-radius:14px; padding:13px 14px; outline:none; }
input:focus,select:focus { border-color:rgba(124,92,255,.7); box-shadow:0 0 0 3px rgba(124,92,255,.15); }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.btn { border:0; border-radius:14px; padding:13px 18px; cursor:pointer; font-weight:700; background:var(--panel-2); color:var(--text); }
.btn.primary { background:linear-gradient(135deg,var(--accent),#9d7cff); }
.btn.success { background:linear-gradient(135deg,var(--accent-2),#54e0c7); color:#07120f; }
.btn.danger { background:linear-gradient(135deg,var(--danger),#ff8a9a); color:#25060b; }
.btn.warning { background:linear-gradient(135deg,var(--warning),#ffe29b); color:#211600; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.hero { text-align:center; padding:34px 24px; }
.player-name { font-size:clamp(34px,6vw,76px); font-weight:900; letter-spacing:-.05em; margin:0; }
.player-meta { color:var(--muted); font-size:18px; margin-top:8px; }
.price { font-size:clamp(72px,14vw,180px); font-weight:900; line-height:.9; margin:26px 0 6px; }
.bidder { font-size:clamp(22px,4vw,42px); font-weight:800; color:#cfc7ff; }
.timer { font-size:42px; font-weight:900; margin-top:20px; color:var(--warning); }
.team-list { display:grid; gap:10px; }
.team-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:14px; background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:16px; }
.team-name { font-weight:800; }
.muted { color:var(--muted); }
.history { display:grid; gap:10px; max-height:420px; overflow:auto; }
.history-row { display:flex; justify-content:space-between; gap:16px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.03); }
.login-box { max-width:520px; margin:8vh auto 0; }
.buzzer-wrap { max-width:680px; margin:0 auto; text-align:center; }
.buzzer { width:min(72vw,360px); aspect-ratio:1; border-radius:50%; border:10px solid rgba(255,255,255,.08); background:radial-gradient(circle at 35% 30%, #a995ff, var(--accent)); color:white; font-size:80px; font-weight:900; cursor:pointer; box-shadow:0 30px 80px rgba(124,92,255,.35), inset 0 8px 20px rgba(255,255,255,.25); transition:transform .08s ease; }
.buzzer:active { transform:scale(.96); }
.feedback { min-height:28px; margin-top:14px; font-weight:700; }
.feedback.ok { color:#8ef7d8; }
.feedback.error { color:#ff9baa; }
.hidden { display:none !important; }
@media (max-width:900px) {
  body { padding:14px; }
  .grid-2,.grid-3,.form-grid { grid-template-columns:1fr; }
  .topbar { align-items:flex-start; flex-direction:column; }
}