:root { --bg:#f8f1e7; --fg:#2e2118; --muted:#74604f; --line:#e2d3c0; --card:#fffaf3; --accent:#8a4f2b; --on-accent:#fff; --bad:#b3261e; --ok:#2f7a3a; --shadow:0 1px 2px rgba(60,35,15,.08), 0 6px 18px rgba(60,35,15,.06); }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1d1713; --fg:#f2e8dc; --muted:#b8a590; --line:#3a2f27; --card:#27201a; --accent:#e0a56f; --on-accent:#2a1a0e; --bad:#ff8f86; --ok:#7fd68a; --shadow:none; }
}
* { 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; }
main { max-width: 960px; margin: 0 auto; padding: 16px; }
header.top { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card); }
header.top nav { display:flex; gap:16px; flex-wrap:wrap; }
a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 8px 0 16px; font-family: Georgia, 'Times New Roman', serif; letter-spacing:.01em; }
h2 { font-size: 1.1rem; margin: 24px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:16px; box-shadow:var(--shadow); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.95rem; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; }
label { display:block; margin:10px 0 4px; font-weight:600; }
input[type=text], input[type=email], input[type=password], input[type=number], select {
  width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); font:inherit; }
input[type=checkbox] { width:20px; height:20px; vertical-align:middle; }
button, .btn { display:inline-block; padding:12px 20px; border:0; border-radius:12px; background:var(--accent); color:var(--on-accent); font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
button.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.err { color:var(--bad); font-weight:600; margin:8px 0; }
.ok { color:var(--ok); font-weight:600; margin:8px 0; }
.muted { color:var(--muted); }
.row { display:flex; gap:8px; align-items:center; }
.row input { flex:1; min-width:0; }
.badge { padding:2px 8px; border-radius:99px; font-size:.8rem; border:1px solid var(--line); }
.badge.off { color:var(--bad); border-color:var(--bad); }
code { word-break: break-all; }
.center { text-align:center; }
footer { margin:2rem 0 1rem; font-size:.85rem; }
.btn.secondary-link { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:16px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; text-align:center; box-shadow:var(--shadow); }
.stat b { display:block; font-size:1.8rem; }
.qr { max-width:360px; margin:16px auto; }
.qr svg { width:100%; height:auto; display:block; }
@media print { header.top, .noprint { display:none; } body { background:#fff; color:#000; } }
.big { font-size:1.3rem; text-align:center; margin:12px 0; }
.dots { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:16px 0; }
.dot { width:44px; height:44px; border-radius:50%; border:3px solid var(--accent); background:transparent; }
.dot.on { background:var(--accent); box-shadow:inset 0 0 0 4px var(--card); }