:root { --fg:#1b1b1b; --bg:#fafaf7; --muted:#555; --accent:#0b5cad; --danger:#a4161a; --line:#cfcfc8; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#f1f1ec; --bg:#16181a; --muted:#b5b5ad; --accent:#7ab7ff; --danger:#ff8a8a; --line:#44484c; }
}
* { box-sizing: border-box; }
body { margin:0; font:1rem/1.5 system-ui,sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid var(--line); }
nav, .search { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
nav form { margin:0; }
main { max-width:40rem; margin:0 auto; padding:1rem; }
a { color:var(--accent); }
.brand { font-weight:700; text-decoration:none; color:var(--fg); }
label { display:block; margin-top:.75rem; font-weight:600; }
input, textarea, select { width:100%; padding:.6rem; font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--muted); border-radius:6px; }
.search input { width:12rem; }
button, .button { margin-top:.75rem; padding:.6rem 1rem; font:inherit; color:#fff; background:var(--accent); border:0; border-radius:6px; cursor:pointer; text-decoration:none; display:inline-block; }
@media (prefers-color-scheme: dark) { button, .button { color:#000; } }
button.link { background:none; color:var(--accent); text-decoration:underline; margin:0; padding:.25rem; }
button.danger { background:var(--danger); color:#fff; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.skip, .sr { position:absolute; left:-999px; }
.skip:focus { left:.5rem; top:.5rem; background:var(--bg); padding:.5rem; z-index:1; }
.sr { width:1px; height:1px; overflow:hidden; }
.cards { list-style:none; padding:0; }
.cards li { padding:.75rem; border:1px solid var(--line); border-radius:6px; margin-bottom:.5rem; display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.meta, .hint, .crumbs { color:var(--muted); font-size:.9rem; }
.flash { padding:.6rem .8rem; border-radius:6px; border:1px solid var(--line); }
.flash.error { border-color:var(--danger); color:var(--danger); }
.preview { max-width:100%; height:auto; border-radius:6px; border:1px solid var(--line); }
fieldset { border:1px solid var(--line); border-radius:6px; margin:.75rem 0; }
.card { padding:.75rem; border:1px solid var(--line); border-radius:6px; margin-bottom:.75rem; }
input.check { width:auto; }