:root { --bg:#fff; --fg:#14213d; --accent:#0b6e99; --muted:#5c677d; --card:#f1f5f9; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#10151c; --fg:#e8eef4; --accent:#4cb4e0; --muted:#9aa7b5; --card:#1a222d; }
}
* { box-sizing: border-box; }
body { margin:0; font:18px/1.45 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
.bar { display:flex; justify-content:space-between; align-items:center; padding:.75rem 1rem; background:var(--card); }
.bar nav { display:flex; gap:1rem; align-items:center; }
.brand { font-weight:700; text-decoration:none; color:var(--fg); }
a { color:var(--accent); }
main { padding:1rem; max-width:48rem; margin:auto; }
.btn, button { display:inline-block; padding:.8rem 1.2rem; border:0; border-radius:.5rem;
  background:var(--accent); color:#fff; font-size:1rem; text-decoration:none; cursor:pointer; }
.bar button { background:none; color:var(--accent); padding:.2rem; }
.cards { list-style:none; padding:0; }
.cards li { background:var(--card); padding:.8rem 1rem; border-radius:.5rem; margin:.5rem 0; }
.cards small { display:block; color:var(--muted); }
.login input { width:100%; padding:.7rem; font-size:1rem; }