:root { --bg:#f7f4ee; --surface:#fff; --ink:#16202e; --soft:#44505f; --muted:#66707d; --line:#e6dfd2; --accent:#8a6f4d; --btn:#16202e; --btn-ink:#f7f4ee; --err:#b42318; --ok:#1a7f4b; --focus:#1d4ed8; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1722; --surface:#17212f; --ink:#f1ede4; --soft:#c3cbd6; --muted:#98a3b1; --line:#2a3648; --accent:#d1b48a; --btn:#f1ede4; --btn-ink:#0f1722; --err:#ff8a80; --ok:#56d39a; --focus:#8fb0ff; } }
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
main { max-width:760px; margin:0 auto; padding:8px 16px 48px; }
h1 { font:600 26px/1.2 Georgia,"Times New Roman",serif; margin:20px 0 8px; }
h2 { font:600 19px/1.3 Georgia,serif; margin:0 0 10px; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }
.top { max-width:760px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.brand { font:600 18px Georgia,serif; text-decoration:none; }
.top nav { display:flex; gap:16px; font-size:14px; }
.top nav a { color:var(--soft); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; }
.top nav a:hover { color:var(--ink); border-bottom-color:var(--accent); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; margin:14px 0; }
.card.narrow { max-width:460px; margin:40px auto; }
.muted { color:var(--muted); } .small { font-size:13px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px; font:600 14px system-ui,sans-serif; color:var(--ink); background:transparent; border:1px solid var(--ink); border-radius:10px; cursor:pointer; text-decoration:none; }
.btn.primary { background:var(--btn); color:var(--btn-ink); border-color:var(--btn); }
.btn.small { min-height:36px; padding:6px 12px; font-size:13px; }
.btn:disabled { opacity:.6; cursor:progress; }
.status { min-height:1.4em; margin:12px 0 0; font-size:14px; color:var(--soft); } .status.err { color:var(--err); } .status.ok { color:var(--ok); }
.tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:16px; }
.tile { display:flex; flex-direction:column; gap:4px; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:14px; text-decoration:none; }
.tile span { color:var(--muted); font-size:13px; }
.list { list-style:none; margin:0 0 14px; padding:0; }
.list li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.list li:last-child { border-bottom:0; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.form { display:grid; gap:12px; }
.form label { display:grid; gap:6px; font-weight:600; font-size:14px; }
input, select { font:400 16px system-ui,sans-serif; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); width:100%; }
.linkbox { margin-top:14px; display:grid; gap:8px; }
@media (max-width:520px) { .tiles { grid-template-columns:1fr; } .btn { width:100%; } .actions .btn, .list .btn { width:auto; } }