/* CHTR-3687 — the moderator page. A phone in one hand at an event: big targets, one column. */
:root {
  --bg: #f5f3fb; --fg: #1c1630; --muted: #5d5873; --line: rgba(28, 22, 48, .16);
  --card: #ffffff; --accent: #5b3fd1; --accent-fg: #ffffff; --danger: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1630; --fg: #f1eefb; --muted: #b3acd0; --line: rgba(241, 238, 251, .18);
    --card: #262040; --accent: #9b85ff; --accent-fg: #160f2e; --danger: #ffb4ab;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1630; --fg: #f1eefb; --muted: #b3acd0; --line: rgba(241, 238, 251, .18);
  --card: #262040; --accent: #9b85ff; --accent-fg: #160f2e; --danger: #ffb4ab;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
#app { max-width: 640px; margin: 0 auto; padding: 0 16px 32px; }
.bar { padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.brand { margin: 0; font-weight: 700; }
.role { font-weight: 400; color: var(--muted); }
h1 { font-size: 1.3rem; margin: 8px 0 16px; }
h2 { font-size: 1rem; margin: 24px 0 8px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type="text"] { width: 100%; padding: 12px; font-size: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--fg); }
button { min-height: 44px; padding: 8px 16px; font-size: 1rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
.help, .status, .none { color: var(--muted); }
.msg { color: var(--danger); }
.who { color: var(--muted); }
.list { display: flex; flex-direction: column; gap: 8px; }
.item { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.item-name { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); }
.item-reason { display: block; font-size: .8rem; font-weight: 700; color: var(--danger); }
.item-text { margin: 4px 0; overflow-wrap: anywhere; }
.item-original { margin: 4px 0; font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }
.item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }