:root { --ink:#1b2430; --muted:#667085; --line:#d8dee8; --bg:#f4f6fa; --brand:#1f3864; --ok:#e6f4ea; --warn:#fff4d6; --err:#fde8e8; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg); }
.top { display:flex; align-items:center; gap:24px; padding:10px 24px; background:var(--brand); color:#fff; flex-wrap:wrap; }
.brand { font-weight:700; font-size:17px; }
.top nav { display:flex; gap:16px; flex:1; margin-left:24px; }
.top nav a { margin-right:16px; }
.signout .who { margin-right:12px; }
.top a { color:#dbe5ff; text-decoration:none; }
.top a:hover { color:#fff; text-decoration:underline; }
.signout { display:flex; gap:10px; align-items:center; margin:0; }
.who { color:#cfd8ee; font-size:13px; }
main { max-width:1200px; margin:24px auto; padding:0 24px; }
h1 { font-size:22px; margin:0 0 8px; } h2 { font-size:17px; margin:0 0 10px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin:16px 0; overflow-x:auto; }
.card.narrow { max-width:460px; margin:48px auto; }
.card.warn { background:var(--warn); }
.muted { color:var(--muted); font-size:13px; }
label { display:block; margin:10px 0; font-size:13px; color:var(--muted); }
label.check { display:flex; gap:8px; align-items:center; color:var(--ink); font-size:14px; }
input:not([type=checkbox]), select { display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid #bcc5d3; border-radius:6px; font:inherit; color:var(--ink); background:#fff; }
.row { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.row label { flex:1 1 200px; margin:0; }
button, .btn { display:inline-block; padding:9px 16px; border:0; border-radius:6px; background:var(--brand); color:#fff; font:inherit; cursor:pointer; text-decoration:none; }
button.secondary, .btn.secondary { background:#e8ecf4; color:var(--ink); }
button.link { background:none; color:#dbe5ff; padding:0; text-decoration:underline; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:#eef1f7; font-weight:600; white-space:nowrap; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr.sel td { background:#eaf1ff; }
table.kv th { width:34%; background:none; color:var(--muted); font-weight:500; }
.flash { padding:10px 14px; border-radius:8px; margin:12px 0; background:var(--ok); }
.flash.error { background:var(--err); } .flash.warn { background:var(--warn); }
form.inline { display:inline-flex; gap:6px; margin:0 4px 4px 0; }
form.inline select, form.inline input { width:auto; margin:0; padding:5px 8px; }
td.actions { white-space:nowrap; }
.qr { max-width:240px; margin:12px auto; } .qr svg { width:100%; height:auto; }
code { background:#eef1f7; padding:2px 6px; border-radius:4px; word-break:break-all; }