:root{ color-scheme:light; --bg:#f7f6f3; --surface:#fff; --surface-2:#f1efe9; --ink:#0c0d0e; --ink-2:#515962; --ink-muted:#858b92;
  --border:rgba(12,13,14,.10); --accent:#c8a03e; --accent-soft:#f3ead3; --critical:#d03b3b; --good:#0ca30c; }
@media (prefers-color-scheme:dark){ :root{ color-scheme:dark; --bg:#0c0d0e; --surface:#17181a; --surface-2:#212326; --ink:#fff; --ink-2:#c3c7cc;
  --ink-muted:#8b9097; --border:rgba(255,255,255,.10); --accent-soft:#2f2816; --critical:#e66767; } }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font:14px "Avenir Next","Avenir",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; padding:0 16px 32px; }
.wrap{ max-width:1100px; margin:0 auto; }
h1{ font-size:24px; margin:22px 0 12px; } h2{ font-size:16px; margin:0 0 10px; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin-bottom:16px; }
.card.narrow{ max-width:380px; margin:12vh auto 0; display:grid; gap:12px; }
.card.narrow h1{ margin:0; }
.sub{ color:var(--ink-2); margin:0; }
label{ display:grid; gap:4px; font-size:12px; font-weight:600; color:var(--ink-2); }
input,select{ font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); }
.btn{ appearance:none; display:inline-block; border:1px solid var(--border); background:var(--surface); color:var(--ink); padding:7px 12px; border-radius:8px; font:inherit; font-weight:600; cursor:pointer; list-style:none; }
.btn::-webkit-details-marker{ display:none; }
.btn:hover{ background:var(--surface-2); }
.btn.primary{ background:var(--accent); color:#0c0d0e; border-color:transparent; border-radius:33px; padding-inline:18px; }
.btn.danger{ color:var(--critical); }
.err{ color:var(--critical); font-weight:600; margin:0 0 12px; } .ok{ color:var(--good); font-weight:600; margin:0 0 12px; }
table{ width:100%; border-collapse:collapse; } th,td{ text-align:left; padding:8px; border-bottom:1px solid var(--border); vertical-align:middle; }
th{ font-size:11px; text-transform:uppercase; color:var(--ink-muted); }
tr.off td{ opacity:.55; }
.table-scroll{ overflow-x:auto; }
form.inline{ display:inline-flex; gap:6px; align-items:center; margin:2px 4px 2px 0; }
.acts{ white-space:nowrap; } details{ display:inline-block; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:12px; }
.pill{ background:var(--accent-soft); border-radius:999px; padding:1px 8px; font-size:11px; font-weight:700; }
.topline{ display:flex; justify-content:space-between; gap:12px; padding-top:16px; font-size:13px; flex-wrap:wrap; }
.topline a{ color:var(--ink-2); }
.roles{ margin:0; padding-left:18px; line-height:1.7; }
textarea{ font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); width:100%; }
.mailbody{ white-space:pre-wrap; word-break:break-word; font:inherit; font-size:14px; line-height:1.55; background:var(--surface-2); border-radius:8px; padding:12px 14px; margin-top:12px; }
.maillist tr.unread td{ font-weight:700; }
tr.cur td{ background:var(--accent-soft); }
.tabs{ margin-bottom:10px; } .tabs .btn{ margin:0 4px 6px 0; }