:root { --bg:#f6f7f9; --fg:#1b1f24; --card:#fff; --line:#d8dce1; --accent:#2457d6; --muted:#5d6672;
  --err:#b3261e; --errbg:#fdecea; --ok:#1e6b34; --okbg:#e6f4ea; --warn:#8a5a00; --warnbg:#fff4d6; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14171b; --fg:#e8eaed; --card:#1d2126; --line:#323840; --accent:#7ba3ff; --muted:#9aa3ae;
    --err:#ff8a80; --errbg:#3a1f1d; --ok:#7fd49a; --okbg:#1c3324; --warn:#ffcc66; --warnbg:#3a2f15; }
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); }
main { max-width:860px; margin:0 auto; padding:16px; }
.top { display:flex; gap:16px; align-items:center; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:700; text-decoration:none; color:var(--fg); margin-right:auto; }
.counter { font-size:.95rem; display:flex; align-items:center; gap:8px; }
.bar { display:inline-block; width:80px; height:8px; background:var(--line); border-radius:4px; overflow:hidden; }
.bar span { display:block; height:100%; background:var(--ok); }
.tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.tabs a { padding:6px 12px; border:1px solid var(--line); border-radius:16px; text-decoration:none; color:var(--fg); background:var(--card); }
.tabs a.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.tabs .n { opacity:.7; font-size:.85em; margin-left:4px; }
.items { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.item, .card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.card { margin-bottom:14px; }
.title { font-weight:600; font-size:1.05rem; }
.meta { color:var(--muted); font-size:.9rem; }
.flags { margin-top:4px; display:flex; flex-wrap:wrap; gap:6px; }
.flag { background:var(--warnbg); color:var(--warn); border-radius:4px; padding:1px 8px; font-size:.85rem; }
.errtext { color:var(--err); }
.summary { margin:.6rem 0; }
.empty { color:var(--muted); }
label { display:block; font-weight:600; margin:8px 0 4px; }
textarea, input[type=password] { width:100%; padding:8px; font:inherit; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:6px; }
textarea { resize:vertical; }
.row { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
button, .btn { font:inherit; padding:7px 14px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; text-decoration:none; display:inline-block; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.danger { color:var(--err); border-color:var(--err); }
button.link { border:0; background:none; color:var(--accent); padding:0; }
.flash { padding:8px 12px; border-radius:6px; margin-bottom:12px; }
.flash.ok { background:var(--okbg); color:var(--ok); }
.flash.err { background:var(--errbg); color:var(--err); }
.banner.err { background:var(--errbg); color:var(--err); padding:10px 16px; border-bottom:2px solid var(--err); }
.banner .detail { font-size:.85rem; margin-top:2px; }
.login { max-width:340px; margin:60px auto; }
@media (max-width:520px) { .top { padding:8px 12px; } main { padding:12px; } }