:root { --bg:#f8fafc; --fg:#0f172a; --muted:#64748b; --card:#fff; --line:#e2e8f0; --accent:#0f766e; --warn:#b45309; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1220; --fg:#e2e8f0; --muted:#94a3b8; --card:#111a2e; --line:#1e293b; --accent:#2dd4bf; --warn:#fbbf24; } }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.4 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; justify-content:space-between; align-items:baseline; padding:14px 16px 6px; }
h1 { font-size:20px; margin:0; }
#updated { color:var(--muted); font-size:12px; }
nav { display:flex; gap:6px; padding:6px 16px; position:sticky; top:0; background:var(--bg); }
nav button { flex:1; padding:10px 0; border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:10px; font-size:14px; }
nav button.active { background:var(--accent); color:#fff; border-color:var(--accent); }
main, #login, footer { padding:8px 16px 24px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:8px 0; }
.row { display:flex; justify-content:space-between; gap:8px; }
.muted { color:var(--muted); font-size:13px; }
.tag { font-size:12px; padding:1px 8px; border-radius:99px; border:1px solid var(--line); white-space:nowrap; }
.late { color:var(--warn); }
.error { color:#dc2626; }
input { width:100%; padding:12px; font-size:16px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); margin:6px 0; }
button { cursor:pointer; }
#save, #logout { padding:10px 14px; border-radius:10px; border:0; background:var(--accent); color:#fff; font-size:15px; }
#logout { background:transparent; color:var(--muted); border:1px solid var(--line); }
h2 { font-size:15px; color:var(--muted); margin:16px 0 4px; }