:root { --bg:#fff; --fg:#1d2026; --muted:#6a7079; --card:#f4f5f7; --line:#dfe2e7; --accent:#2a5bd7; --err:#b3261e; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#191b20; --fg:#e8eaee; --muted:#9aa1ab; --card:#23262d; --line:#343841; --accent:#7ba2ff; --err:#ff8a80; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
header { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
header h1 { font-size:18px; margin:0; flex:1; }
main { max-width:860px; margin:0 auto; padding:16px; }
.muted { color:var(--muted); }
.small { font-size:14px; }
.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.card h2 { font-size:16px; margin:0 0 4px; }
.card.off { opacity:.55; }
.tag { display:inline-block; font-size:12px; padding:1px 8px; border-radius:99px; border:1px solid var(--line); color:var(--muted); }
.btn { font:inherit; padding:8px 14px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.login-page { display:grid; place-items:center; min-height:100vh; }
.login { width:min(360px,calc(100vw - 32px)); display:grid; gap:12px; }
.login h1 { margin:0; font-size:22px; }
.field { display:grid; gap:4px; }
.label { font-size:14px; color:var(--muted); }
input { font:inherit; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--fg); }
.error { color:var(--err); margin:0; }
.logo{vertical-align:-4px;margin-right:4px}