:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#6b7385; --card:#fff; --line:#e3e6ec; --accent:#2a6df4;
  --ok:#1a8a4a; --warn:#b26a00; --bad:#c62b3a; --live:#1a8a4a; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12151b; --fg:#e6e9f0; --muted:#8c94a7; --card:#1a1f28; --line:#2a303c; --accent:#6a9bff;
    --ok:#4cc38a; --warn:#e0a03c; --bad:#ff7a85; --live:#4cc38a; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.top { display:flex; align-items:center; gap:18px; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; }
.brand { font-weight:700; color:var(--fg); } .top nav { display:flex; gap:4px; }
.top nav a { padding:6px 12px; border-radius:6px; color:var(--fg); } .top nav a.on { background:var(--bg); font-weight:600; }
.grow { flex:1; } .who { color:var(--muted); } .top form { margin:0; }
button.link { background:none; border:0; color:var(--accent); cursor:pointer; font:inherit; padding:0; }
main { max-width:1280px; margin:0 auto; padding:20px; }
h1 { font-size:22px; margin:6px 0 16px; } h2 { font-size:16px; margin:26px 0 8px; color:var(--muted); font-weight:600; }
.muted, small { color:var(--muted); } small { display:block; font-size:12px; }
.cards { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 18px; min-width:190px; display:flex; gap:12px; align-items:center; }
.card b { font-size:30px; line-height:1; } .card span { color:var(--muted); } .card small { margin-top:2px; }
.card.hot { border-color:var(--live); } .card.hot b { color:var(--live); } .card.warn { border-color:var(--warn); } .card.warn b { color:var(--warn); }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th, td { padding:9px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:var(--bg); white-space:nowrap; }
tr:last-child td { border-bottom:0; } td.num { white-space:nowrap; }
.badge { display:inline-block; padding:1px 9px; border-radius:99px; font-size:12px; font-weight:600; background:var(--bg); border:1px solid var(--line); }
.a-ready,.r-done,.s-done { color:var(--ok); border-color:var(--ok); }
.a-error,.r-error,.s-error { color:var(--bad); border-color:var(--bad); }
.a-registered,.r-processing,.s-running { color:var(--accent); border-color:var(--accent); }
.s-stale,.s-interrupted { color:var(--warn); border-color:var(--warn); }
.live { color:var(--live); font-weight:600; } .stale { color:var(--warn); } .idle { color:var(--muted); }
.dot { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:var(--live); animation:pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity:.25; } }
.errtext { color:var(--bad); font-size:13px; max-width:340px; word-break:break-word; }
.err { background:color-mix(in srgb,var(--bad) 12%,transparent); color:var(--bad); padding:8px 12px; border-radius:8px; }
.kv { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; }
.kv div { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; }
.kv span { display:block; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } .kv b { font-weight:500; word-break:break-word; }
.filters { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .filters a { padding:3px 11px; border-radius:99px; border:1px solid var(--line); background:var(--card); color:var(--fg); }
.filters a.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.login { max-width:360px; margin:12vh auto; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:26px; }
.login label { display:block; margin:12px 0; color:var(--muted); font-size:13px; }
.login input { display:block; width:100%; margin-top:4px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font:inherit; }
.login button { width:100%; margin-top:8px; padding:10px; border:0; border-radius:8px; background:var(--accent); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.foot { text-align:center; color:var(--muted); font-size:12px; padding:20px; }
code { background:var(--card); padding:1px 6px; border-radius:4px; border:1px solid var(--line); }

h1 small { display:inline; font-size:14px; font-weight:400; margin-left:6px; }

/* керування, питання, журнал */
.notice { padding:9px 14px; border-radius:8px; margin:0 0 14px; font-weight:500; }
.notice.ok { background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok); }
.notice.err { background:color-mix(in srgb,var(--bad) 12%,transparent); color:var(--bad); }
.banner { background:color-mix(in srgb,var(--warn) 14%,transparent); color:var(--warn); padding:9px 14px; border-radius:8px; margin:0 0 14px; }
.btn { display:inline-block; padding:7px 14px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); font:inherit; cursor:pointer; text-decoration:none; }
.btn:hover { text-decoration:none; border-color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.danger { color:var(--bad); border-color:var(--bad); } .btn.sm { padding:2px 10px; font-size:13px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 16px; } .actions form, form.inline { display:inline-flex; gap:8px; align-items:center; margin:0; }
form.new { margin:0 0 16px; flex-wrap:wrap; }
input[name=email], form.inline input[name=answer] { padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); font:inherit; min-width:260px; }
.prompt { background:var(--card); border:2px solid var(--accent); border-radius:12px; padding:6px 18px 16px; margin:0 0 18px; }
.prompt h2 { color:var(--fg); font-size:17px; }
.opts { list-style:none; padding:0; margin:0 0 12px; display:grid; gap:6px; }
.opt { width:100%; text-align:left; padding:9px 13px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font:inherit; cursor:pointer; }
.opt:hover { border-color:var(--accent); }
.ask, .card.ask b { color:var(--accent); font-weight:600; } .card.ask { border-color:var(--accent); }
.queued { color:var(--muted); }
tr.slow td { background:color-mix(in srgb,var(--warn) 9%,transparent); }
table.log td { padding:5px 10px; font-size:13px; } table.log tr.ev-warn td { color:var(--warn); } table.log tr.ev-error td { color:var(--bad); }
table.log tr.ev-summary td { font-weight:500; } table.log tr.ev-step_start td { border-top:2px solid var(--line); }
.s-queued { color:var(--muted); } .s-stopped { color:var(--warn); border-color:var(--warn); }

/* Пошти з Discord-бота */
.m-new { color:var(--muted); } .m-waiting { color:var(--accent); border-color:var(--accent); }
.m-expired { color:var(--muted); } .m-failed { color:var(--warn); border-color:var(--warn); font-weight:600; } .m-done { color:var(--ok); border-color:var(--ok); font-weight:600; } .m-code_sent { color:var(--ok); border-color:var(--ok); } .m-cancelled { color:var(--bad); border-color:var(--bad); }
table.kv { width:auto; min-width:420px; } table.kv th { text-align:left; width:140px; color:var(--muted); font-weight:500; }
.letter { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:10px; }
.letter-head { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; }
.letter-body { margin:8px 0 0; white-space:pre-wrap; word-break:break-word; font:13px/1.45 ui-monospace,monospace; max-height:260px; overflow:auto; }

/* Журнал бота */
tr.ev-bad td { color:var(--warn); }