:root { --bg:#f7f7f8; --card:#fff; --text:#18181b; --muted:#71717a; --line:#e4e4e7; --accent:#18181b; --accent-text:#fff; --danger:#b91c1c; --danger-bg:#fee2e2; --warn-bg:#fef3c7; --warn:#92400e; }
@media (prefers-color-scheme: dark) { :root { --bg:#111113; --card:#1c1c1f; --text:#f4f4f5; --muted:#a1a1aa; --line:#2e2e33; --accent:#f4f4f5; --accent-text:#18181b; --danger:#fca5a5; --danger-bg:#450a0a; --warn-bg:#451a03; --warn:#fcd34d; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
main { max-width:1180px; margin:0 auto; padding:24px 16px 48px; }
h1 { font-size:24px; margin:0; } h2 { font-size:17px; margin:0 0 4px; }
.muted { color:var(--muted); font-size:13px; margin:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin-top:16px; }
.narrow { max-width:400px; margin:8vh auto 0; }
label { display:block; font-size:13px; margin-top:12px; }
input,select { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--text); font:inherit; margin-top:4px; }
button { padding:9px 14px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--text); font:inherit; cursor:pointer; }
button.primary { background:var(--accent); color:var(--accent-text); border-color:var(--accent); width:100%; margin-top:16px; }
button:disabled { opacity:.6; cursor:default; }
.error { background:var(--danger-bg); color:var(--danger); padding:8px 10px; border-radius:7px; margin-top:12px; font-size:14px; }
.notice { background:var(--warn-bg); color:var(--warn); padding:8px 10px; border-radius:7px; margin-top:14px; font-size:14px; font-weight:600; }
.top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.tabs { display:flex; gap:6px; margin-top:16px; }
.tabs button.on { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.filters { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:14px; }
.filters label { margin:0; } .filters input,.filters select { width:auto; }
.scroll { overflow-x:auto; margin-top:10px; }
table { width:100%; border-collapse:collapse; font-size:14px; white-space:nowrap; }
th,td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:right; }
th { font-size:12px; color:var(--muted); font-weight:600; }
th:first-child,td:first-child { text-align:left; }
tr.total td { font-weight:700; border-bottom:0; }
.qr { display:block; margin:12px auto; background:#fff; padding:6px; border-radius:6px; }
code { word-break:break-all; font-size:13px; }
button.link { background:none; border:0; color:var(--muted); font-size:13px; text-decoration:underline; width:100%; margin-top:10px; padding:4px; }