:root {
  color-scheme: dark;
  --bg: #0b0f12;
  --panel: #13191e;
  --panel-2: #192128;
  --text: #f4f7f8;
  --muted: #9aa8b1;
  --line: #27323a;
  --accent: #27d17f;
  --accent-2: #16a862;
  --danger: #ff6b6b;
  --radius: 18px;
}
* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
.topbar {
  min-height: 72px; padding: 12px max(18px, env(safe-area-inset-left));
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line); background:#0e1317;
}
.brand { display:flex; align-items:center; gap:12px; }
.brand strong { display:block; font-size:18px; }
.brand small { display:block; color:var(--muted); margin-top:2px; }
.dart-icon { width:42px; height:42px; display:grid; place-items:center; background:var(--panel-2); border-radius:14px; font-size:24px; }
.shell { width:min(1100px, calc(100% - 28px)); margin:0 auto; padding:28px 0 64px; }
.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:24px 0 30px; }
.hero h1 { font-size:clamp(30px, 6vw, 58px); line-height:1.02; margin:7px 0 14px; letter-spacing:-0.045em; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:12px; }
.muted { color:var(--muted); }
.hero-stat { min-width:120px; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); text-align:center; }
.hero-stat strong { display:block; font-size:34px; }
.hero-stat span { color:var(--muted); font-size:13px; }
.grid.two { display:grid; grid-template-columns:1fr 1.35fr; gap:16px; margin-bottom:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.card h2 { margin:0 0 16px; font-size:20px; }
label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:13px; font-weight:700; }
input, select {
  min-height:46px; width:100%; border:1px solid #35434d; border-radius:12px; background:#0d1216;
  color:var(--text); padding:10px 12px; outline:none;
}
input:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(39,209,127,.12); }
.primary, .ghost {
  min-height:46px; border-radius:12px; padding:10px 16px; font-weight:800; cursor:pointer;
}
.primary { border:0; background:var(--accent); color:#052414; }
.primary:hover { background:var(--accent-2); color:#fff; }
.ghost { border:1px solid var(--line); background:transparent; color:var(--text); }
.inline-form { display:flex; align-items:end; gap:10px; }
.grow { flex:1; }
.match-form { display:grid; gap:12px; }
.versus { display:grid; grid-template-columns:1fr 84px 18px 84px 1fr; gap:8px; align-items:end; }
.versus > span { align-self:center; text-align:center; font-size:22px; font-weight:900; }
.section-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:12px; }
.section-head h2 { margin:4px 0 0; }
.pill { background:var(--panel-2); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:7px 10px; font-size:12px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:680px; }
th, td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
th:nth-child(2), td:nth-child(2) { text-align:left; }
th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.empty { text-align:center !important; color:var(--muted); padding:28px; }
.results { display:grid; gap:8px; }
.result-row { display:grid; grid-template-columns:110px 1fr 70px 1fr; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.result-row time { color:var(--muted); font-size:13px; }
.result-row strong { text-align:center; font-size:18px; }
.result-row span:last-child { text-align:right; }
.messages { display:grid; gap:8px; margin-bottom:14px; }
.message { padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--panel); }
.message.success { border-color:rgba(39,209,127,.45); }
.message.error { border-color:rgba(255,107,107,.55); color:#ffd1d1; }
.login-card { width:min(460px, 100%); margin:60px auto; background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:28px; }
.login-card h1 { margin:8px 0; font-size:36px; }
.stack { display:grid; gap:14px; margin-top:22px; }
@media (max-width: 760px) {
  .shell { width:min(100% - 20px, 1100px); padding-top:18px; }
  .hero { align-items:flex-start; flex-direction:column; }
  .hero-stat { display:none; }
  .grid.two { grid-template-columns:1fr; }
  .versus { grid-template-columns:1fr 72px; }
  .versus > span { display:none; }
  .result-row { grid-template-columns:76px 1fr 52px 1fr; font-size:13px; }
  .inline-form { flex-direction:column; align-items:stretch; }
  .primary { width:100%; }
}