:root { --bg:#fafaf7; --fg:#111; --muted:#666; --card:#fff; --line:#e4e2dc; --accent:#111; --accent-fg:#fff; --bar:#c9a227; --danger:#b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg:#121212; --fg:#f2f2f2; --muted:#a0a0a0; --card:#1d1d1d; --line:#333; --accent:#f2f2f2; --accent-fg:#111; --bar:#d8b13a; --danger:#ff8a80; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 16px 16px 64px; }
.top { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:1; }
.brand { font-weight:800; font-size:20px; text-decoration:none; color:var(--fg); letter-spacing:-0.02em; }
.brand span { font-weight:400; }
nav a { margin-left:14px; color:var(--fg); text-decoration:none; font-size:15px; }
h1 { font-size:30px; line-height:1.15; letter-spacing:-0.02em; margin:18px 0 10px; }
h2 { font-size:21px; margin:28px 0 10px; }
.hero p { font-size:18px; }
.facts { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; }
.facts div { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.facts b { display:block; font-size:18px; } .facts span { color:var(--muted); font-size:14px; }
.btn { display:inline-block; border:1px solid var(--fg); background:transparent; color:var(--fg); border-radius:999px; padding:12px 20px; font-size:17px; text-decoration:none; margin:6px 6px 6px 0; cursor:pointer; font-family:inherit; }
.btn.primary { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.btn.big { display:block; width:100%; text-align:center; padding:18px; font-size:20px; font-weight:700; }
.btn.danger { border-color:var(--danger); color:var(--danger); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.standings { list-style:none; padding:0; margin:0; }
.standings li { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; }
.row-head { display:flex; justify-content:space-between; gap:12px; font-weight:700; }
.standings p { margin:4px 0 8px; color:var(--muted); font-size:15px; }
.bar { height:8px; border-radius:4px; background:var(--line); overflow:hidden; }
.bar i { display:block; height:100%; background:var(--bar); }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px; }
label { display:block; font-size:15px; color:var(--muted); margin-bottom:10px; }
input, textarea, select { display:block; width:100%; font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px; margin-top:4px; }
textarea { resize:vertical; }
.inline { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.inline label { flex:1; min-width:110px; }
label.check { display:flex; gap:8px; align-items:center; color:var(--fg); }
label.check input { width:auto; margin:0; }
.small { font-size:14px; color:var(--muted); }
.notice { background:var(--card); border-left:4px solid var(--bar); padding:10px 14px; border-radius:8px; margin:12px 0; }
.error { border-left-color:var(--danger); }
img.preview { width:100%; border-radius:14px; display:block; }
pre.message { white-space:pre-wrap; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; }