:root {
  --bg: #0f1117; --panel: #181b24; --panel2: #20242f; --border: #2c3140;
  --text: #f1f3f7; --muted: #9aa3b5; --accent: #ff4d6d; --accent2: #ffb347;
  --ok: #3ddc84; --ko: #ff5c5c; --focus: #6ea8ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
a { color: var(--focus); }
button, input { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 10px; padding: 10px 16px; background: var(--panel2); color: var(--text); }
button:hover { filter: brightness(1.15); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input[type=text], input[type=number], input[type=url] { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
.btn-primary { background: var(--accent); color: #fff; font-weight: 700; }
.btn-ok { background: var(--ok); color: #082; color: #0b2a18; font-weight: 700; }
.btn-ko { background: var(--ko); color: #fff; font-weight: 700; }
.btn-warn { background: var(--accent2); color: #2b1a00; font-weight: 700; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 18px; }
.muted { color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
h1, h2, h3 { margin: 0 0 10px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--panel2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.score-list { list-style: none; margin: 0; padding: 0; }
.score-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.score-list li:last-child { border-bottom: 0; }
.score-list .pseudo { flex: 1; font-weight: 600; }
.score-list .pts { font-variant-numeric: tabular-nums; font-weight: 700; }
.error { color: var(--ko); min-height: 1.4em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
