:root { --fg:#1d2430; --muted:#5b6575; --line:#d9dee6; --bg:#f6f7f9; --card:#fff; --acc:#1f5fbf;
  --bad:#b42318; --badbg:#fdecea; --warn:#8a5a00; --warnbg:#fff4d6; --ok:#17663a; --okbg:#e5f4ea; --unk:#4b5563; --unkbg:#eceff3; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--acc); text-decoration:none; } a:hover { text-decoration:underline; }
header { background:#14213d; color:#fff; padding:8px 12px; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
header .brand { font-weight:700; letter-spacing:.3px; margin-right:8px; }
header nav { display:flex; flex-wrap:wrap; gap:4px 12px; flex:1; }
header nav a { color:#dbe4ff; font-size:14px; }
header nav a.on { color:#fff; font-weight:600; border-bottom:2px solid #fff; }
header form { margin:0; } header .who { font-size:13px; color:#c8d0e0; }
header button { background:none; border:1px solid #6b7ba6; color:#fff; border-radius:4px; padding:2px 8px; cursor:pointer; }
main { padding:14px; max-width:1400px; margin:0 auto; }
h1 { font-size:22px; margin:4px 0 12px; } h2 { font-size:18px; margin:18px 0 8px; } h3 { font-size:16px; margin:12px 0 6px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }
.tbl { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; background:#fff; font-size:14px; }
th, td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
th { background:#eef1f6; font-weight:600; white-space:nowrap; position:sticky; top:0; }
tr.archived td { color:#9aa3b2; text-decoration:line-through; }
.muted { color:var(--muted); font-size:13px; } .small { font-size:12px; }
.badge { display:inline-block; padding:1px 7px; border-radius:10px; font-size:12px; font-weight:600; white-space:nowrap; }
.b-ok { background:var(--okbg); color:var(--ok); } .b-bad { background:var(--badbg); color:var(--bad); }
.b-warn { background:var(--warnbg); color:var(--warn); } .b-unk { background:var(--unkbg); color:var(--unk); }
.flash { background:#e8f0fe; border:1px solid #b6ccf5; padding:8px 12px; border-radius:6px; margin-bottom:12px; }
.alert { background:var(--badbg); border:1px solid #f3b8b2; color:var(--bad); padding:8px 12px; border-radius:6px; margin-bottom:12px; }
.warnbox { background:var(--warnbg); border:1px solid #f0d58a; padding:8px 12px; border-radius:6px; margin-bottom:12px; }
form.inline { display:inline; }
label { display:block; font-size:13px; color:var(--muted); margin-top:8px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=email], select, textarea {
  width:100%; max-width:640px; padding:7px 8px; border:1px solid #b9c1ce; border-radius:5px; font:inherit; background:#fff; }
textarea { min-height:80px; }
textarea.body { min-height:260px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; }
button, .btn { display:inline-block; background:var(--acc); color:#fff; border:0; border-radius:5px; padding:7px 14px; font:inherit; cursor:pointer; margin-top:8px; }
button.secondary, .btn.secondary { background:#e6eaf1; color:var(--fg); }
button.danger { background:var(--bad); }
button:disabled { background:#aab3c2; cursor:not-allowed; }
pre.mail { white-space:pre-wrap; word-break:break-word; background:#fbfbfc; border:1px solid var(--line); padding:10px; border-radius:6px; font-size:13px; max-height:70vh; overflow:auto; }
.kv { display:grid; grid-template-columns:minmax(140px,240px) 1fr; gap:4px 12px; } .kv div:nth-child(odd) { color:var(--muted); }
.stat { font-size:26px; font-weight:700; } .unknown { color:var(--unk); font-style:italic; }
@media (max-width:640px) { main { padding:8px; } .kv { grid-template-columns:1fr; } .kv div:nth-child(odd) { margin-top:6px; } th { position:static; } }