:root { --bg:#f6f7f9; --ink:#17202a; --muted:#6b7280; --line:#e5e7eb; --brand:#0b5fff; --ok:#15803d; --warn:#b45309; --danger:#b91c1c; }
* { box-sizing:border-box } body { margin:0; font:17px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--bg) }
nav.top { display:flex; gap:4px; align-items:center; padding:8px 12px; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap }
nav.top a { padding:10px 14px; border-radius:8px; text-decoration:none; color:var(--ink); font-weight:600 } nav.top a.on { background:#e8efff; color:var(--brand) }
nav.top .brand { color:var(--brand); font-size:20px } nav.top .right { margin-left:auto }
main { padding:16px; max-width:1400px; margin:0 auto } h1 { margin:8px 0 12px } h2 { margin:0 0 8px; font-size:20px }
.narrow { max-width:520px; margin:40px auto } .center { text-align:center } .muted { color:var(--muted) } .hidden { display:none !important }
.stack { display:flex; flex-direction:column; gap:12px } .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px } @media (max-width:900px) { .two-col { grid-template-columns:1fr } }
input, textarea, button { font:inherit } input[type=text], input[type=password], input:not([type]), textarea { padding:12px; border:1px solid var(--line); border-radius:10px; width:100%; background:#fff }
button, a.primary { padding:12px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; min-height:48px; text-decoration:none; display:inline-block; color:var(--ink) }
button.primary, a.primary { background:var(--brand); color:#fff; border-color:var(--brand); font-weight:700 } .big { font-size:22px; padding:16px 28px }
button.warn { color:var(--warn) } button.danger { color:var(--danger); border-color:#fecaca } button.quiet { color:var(--muted) } button:disabled { opacity:.5; cursor:default }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; margin:8px 0 } .card.open { border-left:6px solid var(--warn) } .card.closed { opacity:.7 }
.flash { padding:12px 14px; border-radius:10px; margin:8px 0; background:#ecfdf5; color:var(--ok) } .flash.error { background:#fef2f2; color:var(--danger) }
table { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden } th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top } th { background:#f1f3f6; font-size:14px; color:var(--muted) }
td.actions form { display:flex; flex-wrap:wrap; gap:6px } td.actions button { min-height:40px; padding:8px 10px; font-size:14px }
.badge { display:inline-block; padding:4px 10px; border-radius:999px; background:#e5e7eb; font-size:14px; font-weight:600 }
.badge.checked_in, .badge.kickoff, .badge.halftime { background:#dbeafe; color:#1d4ed8 } .badge.fulltime { background:#ede9fe; color:#6d28d9 } .badge.lead { background:#fef3c7; color:#92400e }
.reader { width:100%; max-width:480px; min-height:280px; background:#111; border-radius:14px; overflow:hidden } .label { font-weight:600 }
.danger-zone { margin-top:24px; padding:12px; border:1px dashed #fecaca; border-radius:12px } .eyebrow { text-transform:uppercase; letter-spacing:.08em; color:var(--brand); font-weight:700 } .lead { font-size:20px }
.chat { list-style:none; padding:0; margin:8px 0 } .chat li { padding:8px 12px; border-radius:12px; margin:4px 0; max-width:80% } .chat li.in { background:#e8efff } .chat li.out { background:#f1f3f6; margin-left:auto }
/* big screen */
body.screen { background:#0b1220; color:#f8fafc } body.screen nav.top { background:#0f172a; border-color:#1e293b } body.screen nav.top a { color:#cbd5e1 }
.screen-head { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:16px } .brand-big { font-size:30px; font-weight:800 }
.counters { display:flex; gap:28px } .counters div { text-align:center } .counters b { display:block; font-size:44px; line-height:1 } .counters span { color:#94a3b8; font-size:14px; text-transform:uppercase; letter-spacing:.06em }
.banner { background:#f59e0b; color:#111; padding:12px 16px; border-radius:12px; font-weight:700; margin-bottom:12px; font-size:20px }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px }
.gcard { background:#111a2e; border:1px solid #1e293b; border-radius:16px; padding:16px } .gcard h3 { margin:0 0 6px; font-size:24px } .gcard .stage { color:#93c5fd; font-weight:700; margin-bottom:8px }
.gcard dl { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; margin:0; font-size:16px } .gcard dt { color:#94a3b8 } .gcard dd { margin:0 }
.gcard.lead { border-color:#f59e0b } .gcard .flags { margin-top:8px; font-size:18px }
body:not(.screen) .gcard { background:#fff; border-color:var(--line); color:var(--ink) } body:not(.screen) .gcard .stage { color:var(--brand) } body:not(.screen) .gcard dt { color:var(--muted) }