:root { --fg:#1d1d1f; --mute:#6b6b6b; --line:#d9d9d9; --bg:#fff; --bg2:#f5f5f5; --acc:#1f5fa8; --bad:#b3261e; --ok:#1e7a3a; }
@media (prefers-color-scheme: dark) { :root { --fg:#e6e6e6; --mute:#9a9a9a; --line:#3a3a3a; --bg:#161616; --bg2:#202020; --acc:#6ea8ff; --bad:#ff8a80; --ok:#7bd88f; } }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; padding:10px 20px; border-bottom:1px solid var(--line); background:var(--bg2); }
header .brand { font-weight:600; }
header .ver { color:var(--mute); font-size:12px; }
nav { display:flex; flex-wrap:wrap; gap:2px 14px; flex:1; }
nav a { color:var(--fg); text-decoration:none; padding:2px 0; }
nav a.on { border-bottom:2px solid var(--acc); }
header form { margin:0; }
main { padding:18px 20px 40px; width:100%; }
h1 { font-size:18px; font-weight:600; margin:0 0 14px; }
h2 { font-size:15px; font-weight:600; margin:22px 0 8px; }
a { color:var(--acc); }
table { width:100%; border-collapse:collapse; margin:6px 0 14px; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-weight:600; background:var(--bg2); white-space:nowrap; }
td.mono, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:12.5px; word-break:break-all; }
td.act { white-space:nowrap; }
td.act form { display:inline; }
.ok { color:var(--ok); } .bad { color:var(--bad); } .mute { color:var(--mute); }
input[type=text], input[type=password], input[type=number], select, textarea { font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:6px 8px; width:100%; }
textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:12.5px; }
button { font:inherit; padding:5px 12px; border:1px solid var(--line); border-radius:4px; background:var(--bg2); color:var(--fg); cursor:pointer; }
button.pri { background:var(--acc); border-color:var(--acc); color:#fff; }
button.danger { color:var(--bad); }
button.link { border:0; background:none; color:var(--acc); padding:0 4px; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:10px 14px; align-items:end; }
.grid label { display:block; font-size:12px; color:var(--mute); }
.grid .wide { grid-column: 1 / -1; }
.stats { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin-bottom:16px; }
.stat { border:1px solid var(--line); border-radius:6px; padding:10px 12px; }
.stat b { display:block; font-size:22px; font-weight:600; }
.box { border:1px solid var(--line); border-radius:6px; padding:14px 16px; margin:10px 0; }
.auth { max-width:none; display:flex; justify-content:center; padding-top:6vh; }
.auth .box { width:100%; max-width:440px; }
.auth label { display:block; margin:10px 0 4px; font-size:12px; color:var(--mute); }
.err { color:var(--bad); margin:8px 0; }
.qr svg { width:220px; height:220px; }
pre { white-space:pre-wrap; word-break:break-all; background:var(--bg2); padding:10px; border-radius:4px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.filters input, .filters select { width:auto; min-width:180px; }