:root { color-scheme: dark; --bg:#0f1419; --card:#1b232c; --line:#30363d; --text:#e6edf3; --muted:#8b949e; --ok:#3fb950; --warn:#d29922; --accent:#2f81f7; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.4 system-ui, sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; }
h1 { font-size:18px; margin:0; }
h2 { font-size:15px; color:var(--muted); margin:20px 0 8px; }
main { padding:0 16px 32px; max-width:900px; margin:0 auto; }
.muted { color:var(--muted); font-size:14px; }
button { font:inherit; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 12px; cursor:pointer; }
button.link { background:none; border:none; color:var(--muted); }
.tabs { display:flex; gap:8px; padding:0 16px 12px; max-width:900px; margin:0 auto; }
.tab { flex:1; }
.tab.on, .periods button.on { background:var(--accent); border-color:var(--accent); }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.tile { background:var(--card); border-radius:12px; padding:12px; display:flex; flex-direction:column; }
.tile .label { color:var(--muted); font-size:13px; }
.tile .value { font-size:24px; font-weight:700; }
.tile .note { font-size:13px; color:var(--muted); }
.tile.warn { border:1px solid var(--warn); }
.tile.warn .note { color:var(--warn); }
.periods { display:flex; gap:6px; margin:16px 0 8px; }
.periods button { flex:1; padding:6px 0; }
.chart { background:var(--card); border-radius:12px; padding:10px 12px; margin-bottom:10px; }
.chart h3 { font-size:13px; font-weight:600; color:var(--muted); margin:0 0 6px; }
.chart svg { width:100%; height:80px; display:block; }
.chart polyline { fill:none; stroke:var(--accent); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.list { list-style:none; margin:0; padding:0; }
.list li { background:var(--card); border-radius:10px; padding:8px 12px; margin-bottom:6px; display:flex; justify-content:space-between; gap:8px; }
.list .sub { color:var(--muted); font-size:13px; }
.badge-open { color:var(--warn); font-size:13px; white-space:nowrap; }
.badge-down { color:#f85149; font-size:13px; white-space:nowrap; font-weight:600; }
.badge-local { color:var(--ok); font-size:13px; white-space:nowrap; }
details { margin-top:12px; }
summary { color:var(--muted); cursor:pointer; margin-bottom:8px; }
.login { max-width:340px; margin:20vh auto 0; padding:0 16px; }
.login form { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.login label { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:14px; }
.login input { font:inherit; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px; }
.login button { background:var(--accent); border-color:var(--accent); padding:10px; }
@media (min-width:700px) { .tiles { grid-template-columns:repeat(4,1fr); } }
.error { color:#f85149; margin:12px 0 0; }