:root { --bg:#f5f6f8; --fg:#1b1f24; --muted:#5b6571; --card:#fff; --line:#d9dde3; --accent:#1f6feb; --danger:#c62828; --ok:#1b7f3b; --warn:#9a6700; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14171b; --fg:#e8eaed; --muted:#9aa4af; --card:#1d2227; --line:#313a43; --accent:#5aa2ff; --danger:#ff6b6b; --ok:#4cc26b; --warn:#e3b341; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color:var(--accent); }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.top nav { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.brand { font-weight:700; text-decoration:none; color:var(--fg); letter-spacing:.04em; }
main { max-width:1000px; margin:0 auto; padding:16px; }
h1 { font-size:1.5rem; margin:.4em 0; } h2 { font-size:1.15rem; } h3 { font-size:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin:14px 0; }
.narrow { max-width:460px; margin-left:auto; margin-right:auto; }
.muted { color:var(--muted); } .error { color:var(--danger); font-weight:600; } .ok { color:var(--ok); font-weight:600; } .warn { color:var(--warn); font-weight:600; }
label { display:block; margin:10px 0; font-weight:600; }
input, select, button, .button { font:inherit; }
input, select { width:100%; margin-top:4px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); }
button, .button { display:inline-block; padding:10px 16px; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; }
button.link { background:none; color:var(--accent); padding:0; }
button.danger { background:var(--danger); }
form.inline { display:inline; margin:0; } form.inline input { width:auto; }
form.row { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; } form.row input { flex:1 1 180px; width:auto; margin:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.tile { display:flex; flex-direction:column; justify-content:center; min-height:84px; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--fg); font-size:1.15rem; font-weight:600; }
.tile small { font-weight:400; color:var(--muted); }
.crumbs, .tabs { color:var(--muted); } .tabs { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
table { border-collapse:collapse; width:100%; } th, td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:top; word-break:break-word; }
.scroll { overflow-x:auto; } .actions form { margin:4px 6px 4px 0; }
.qr svg { width:200px; height:200px; background:#fff; padding:6px; border-radius:8px; }
.codes { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.codes code, code { background:var(--bg); padding:2px 6px; border-radius:6px; }
.pager { display:flex; gap:12px; align-items:center; }
@media (max-width: 520px) { main { padding:12px; } .top { padding:8px 12px; } }