:root { --bg:#0e1116; --panel:#171c24; --line:#2a3240; --text:#e6e9ef; --muted:#9aa4b5; --accent:#4aa3ff; --warn:#e0a030; --bad:#e05a5a; --ok:#4cc38a; }
@media (prefers-color-scheme: light) { :root { --bg:#f4f6fa; --panel:#fff; --line:#d9dee8; --text:#1a2030; --muted:#5b6578; --accent:#1d6fd1; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--accent); }
.top { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--text); text-decoration:none; letter-spacing:.04em; }
.top nav { display:flex; flex-wrap:wrap; gap:6px 16px; flex:1; }
.who { display:flex; align-items:center; gap:10px; margin:0; color:var(--muted); }
main { max-width:1200px; margin:0 auto; padding:16px; }
h1 { margin:8px 0 16px; font-size:1.6rem; }
h2 { margin:0 0 8px; font-size:1.15rem; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin:0 0 16px; }
.hero { max-width:520px; margin:48px auto; text-align:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; margin-bottom:16px; }
.tile { text-decoration:none; color:var(--text); display:block; margin:0; }
.tile:hover { border-color:var(--accent); }
.button, button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:8px 14px; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
.who button { background:transparent; color:var(--accent); border:1px solid var(--line); padding:4px 10px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
input, select { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; min-width:0; }
input[type=search] { flex:1 1 220px; }
.clear { align-self:center; }
.count { color:var(--muted); margin:4px 0 8px; }
.scroll { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
table { border-collapse:collapse; width:100%; background:var(--panel); }
th, td { padding:8px 10px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--line); }
th { position:sticky; top:0; background:var(--panel); color:var(--muted); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; }
tbody tr:hover { background:rgba(74,163,255,.07); }
.pill { display:inline-block; padding:1px 10px; border-radius:99px; border:1px solid var(--line); font-size:.85rem; color:var(--muted); margin-right:6px; }
.pill.officer { color:var(--accent); border-color:var(--accent); }
.pill.warn { color:var(--warn); border-color:var(--warn); }
.status { font-size:.9rem; }
.status.active { color:var(--ok); } .status.loa { color:var(--warn); } .status.wia { color:var(--bad); }
dl { display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; margin:12px 0 0; }
dt { color:var(--muted); } dd { margin:0; }
@media (max-width:600px) { .who { width:100%; justify-content:space-between; } }
input.cell { width:100%; min-width:5em; background:transparent; border:1px solid transparent; border-radius:4px; padding:2px 4px; }
input.cell:hover { border-color:var(--line); }
input.cell:focus { border-color:var(--accent); background:var(--bg); outline:none; }
input.cell.saving { border-color:var(--warn); }
input.cell.saved { border-color:var(--ok); }
input.cell.failed { border-color:var(--bad); }
.note { color:var(--muted); margin:4px 0 8px; min-height:1.5em; }
.note.bad { color:var(--bad); }
button.strike { padding:0 8px; border-radius:6px; }
button.strike:disabled { opacity:.4; cursor:default; }
.strikes { white-space:nowrap; }
form.action label { display:block; margin:0 0 8px; color:var(--muted); font-size:.9rem; }
form.action input, form.action select { display:block; width:100%; margin-top:2px; color:var(--text); }
.confirm { border-color:var(--warn); }
button.plain, .button.plain { background:transparent; color:var(--accent); border:1px solid var(--line); }
td.result { white-space:normal; min-width:16em; max-width:40em; }
.req.pending, .req.running { color:var(--warn); } .req.done { color:var(--ok); } .req.failed { color:var(--bad); } .req.cancelled { color:var(--muted); }
table.audit td { vertical-align:top; }
td.wrap { white-space:normal; max-width:20em; overflow-wrap:anywhere; }
details pre { white-space:pre-wrap; overflow-wrap:anywhere; max-width:36em; margin:4px 0; font-size:.8rem; color:var(--muted); }
.pill.actor-web { color:var(--accent); border-color:var(--accent); } .pill.actor-discord { color:var(--ok); border-color:var(--ok); }