:root { color-scheme: light dark; --bg:#f5f5f7; --card:#fff; --text:#121317; --muted:#6b6e76; --line:#e4e4e8; --accent:#1565d8; --green:#198754; --amber:#ad7500; --red:#c83232; }
@media (prefers-color-scheme: dark) { :root { --bg:#101114; --card:#1b1c20; --text:#f1f1f4; --muted:#a3a4ad; --line:#303137; --accent:#70a7ff; --green:#54cf91; --amber:#f2ba4a; --red:#ff7777; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.42 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif; }
.shell { width:min(100%, 560px); margin:0 auto; padding:max(24px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom)); }
.topbar,.hero-row,.section-heading,.channel { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.topbar { min-height:72px; margin-bottom:16px; } h1,h2,p { margin:0; } h1 { font-size:32px; letter-spacing:-.04em; } h2 { font-size:21px; letter-spacing:-.025em; }
.eyebrow { color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.1em; } .muted,.detail { color:var(--muted); font-size:14px; }
.dot { width:11px; height:11px; border-radius:100%; background:var(--muted); } .dot.online { background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 16%,transparent); } .dot.stale { background:var(--amber); }
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:0 2px 10px rgb(0 0 0 / .025); }
.hero { margin-bottom:27px; } .hero h2 { margin-top:5px; font-size:29px; } .detail { margin-top:15px; } .hero .muted { margin-top:3px; }
.section-heading { margin:24px 2px 10px; } .section-heading h2 { font-size:17px; }
.channels { display:grid; gap:8px; } .channel { min-height:58px; padding:13px 15px; background:var(--card); border:1px solid var(--line); border-radius:15px; } .channel.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.channel-title { font-weight:650; font-size:14px; } .channel-meta { color:var(--muted); font-size:12px; margin-top:1px; } .badge { border-radius:999px; font-size:11px; font-weight:750; padding:4px 8px; color:var(--muted); background:color-mix(in srgb,var(--muted) 15%,transparent); } .badge.up { color:var(--green); background:color-mix(in srgb,var(--green) 15%,transparent); } .badge.down { color:var(--red); background:color-mix(in srgb,var(--red) 15%,transparent); } .badge.active { color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,transparent); }
.routes { display:grid; gap:10px; } .route { display:flex; justify-content:space-between; gap:8px; font-size:14px; } .route span:last-child { color:var(--muted); text-align:right; }
.events { padding:0; overflow:hidden; } .event { padding:14px 17px; border-bottom:1px solid var(--line); } .event:last-child { border:0; } .event-title { font-size:14px; font-weight:600; } .event-time { color:var(--muted); font-size:12px; margin-top:3px; }
.login-card { margin-top:28px; } .login-card h2 { margin:6px 0 17px; } form { display:grid; gap:13px; } label { display:grid; gap:6px; font-size:13px; color:var(--muted); font-weight:600; } input { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px; color:var(--text); background:transparent; font:inherit; } button { border:0; border-radius:12px; background:var(--accent); color:#fff; min-height:44px; font:650 15px inherit; padding:0 15px; transition:transform .18s ease,opacity .18s ease; } button:active { transform:scale(.98); } button.quiet { background:transparent; color:var(--accent); min-height:auto; padding:5px 0; } .notice { min-height:20px; color:var(--red); font-size:13px; text-align:center; margin:16px 4px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }