: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; }
.pay-badge { display:inline-block; padding:.15rem .6rem; border-radius:1rem; font-size:.8rem; font-weight:600; }
.pay-badge.paid { background:#1f7a3a; color:#fff; }
.pay-badge.partial { background:#b86e00; color:#fff; }
.pay-badge.unpaid { background:#b3261e; color:#fff; }
.brand img { height:28px; vertical-align:middle; margin-right:.4rem; }
.card { background:var(--card); padding:1rem; border-radius:.5rem; margin:.8rem 0; }
.card h3 { margin:.2rem 0 .5rem; }
.muted { color:var(--muted); }
dl.info { display:grid; grid-template-columns:auto 1fr; gap:.2rem 1rem; margin:0; }
dl.info dt { color:var(--muted); }
dl.info dd { margin:0; }
.msg { padding:.7rem 1rem; border-radius:.5rem; background:var(--card); border-left:4px solid var(--accent); margin:.5rem 0; }
.form-row { margin:.8rem 0; }
.form-row label { display:block; font-weight:600; }
.form-row input, .form-row select, .form-row textarea { width:100%; padding:.6rem; font-size:1rem; }
.errorlist { color:#b3261e; list-style:none; padding:0; margin:.2rem 0; }
.helptext { color:var(--muted); font-size:.85rem; }
.actions { display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0; }
.btn.secondary { background:var(--card); color:var(--fg); border:1px solid var(--muted); }