:root {
  --bg: #000000;
  --bg-soft: #050505;
  --card: #0d0d0d;
  --panel: #121212;
  --border: rgba(201, 168, 76, 0.22);
  --border-soft: rgba(232, 230, 225, 0.08);
  --fg: var(--tg-theme-text-color, #e8e6e1);
  --fg-dim: var(--tg-theme-hint-color, #a8a39a);
  --accent: var(--tg-theme-button-color, #c9a84c);
  --accent-deep: #8a7333;
  --on-accent: var(--tg-theme-button-text-color, #050505);
  --gold: #c9a84c;
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #ef4444;
  --teal: #14b8a6;
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace;
}
html, body {
  background: linear-gradient(180deg, var(--bg) 0%, #090806 100%) !important;
  color: var(--fg) !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
}
body { max-width: 760px; margin: 0 auto; }
h1 {
  color: var(--fg) !important;
  font-family: var(--font-heading) !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
}
h1 .sigil { color: var(--gold) !important; }
h2, .card h2 { color: var(--gold) !important; font-family: var(--font-body) !important; letter-spacing: 0.08em !important; }
.meta, .dim, .small, .qa-desc { color: var(--fg-dim) !important; }
.card, .qa-card, .empty {
  background: color-mix(in srgb, var(--card) 92%, var(--accent) 8%) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.22) !important;
}
.qa-grid { gap: 10px !important; }
.qa-card { min-height: 92px; display: flex !important; flex-direction: column; justify-content: center; align-items: center; }
.qa-card.qa-selected, .qa-card:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 2px; }
button { border-radius: 8px !important; font-family: var(--font-body) !important; letter-spacing: 0 !important; }
.btn-approve, .btn-revise { background: var(--gold) !important; color: #050505 !important; }
.btn-secondary { background: rgba(232,230,225,0.07) !important; color: var(--fg) !important; border: 1px solid var(--border-soft) !important; }
.btn-deny { background: rgba(239,68,68,0.72) !important; }
textarea, input.txt, select.txt, .txt {
  background: rgba(0,0,0,0.38) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--fg) !important;
  font-family: var(--font-body) !important;
}
.pill { border: 1px solid var(--border-soft) !important; background: rgba(232,230,225,0.06) !important; }
.pill.ok { color: var(--green) !important; background: rgba(34,197,94,0.12) !important; }
.pill.warn { color: var(--amber) !important; background: rgba(245,158,11,0.12) !important; }
.pill.block { color: var(--red) !important; background: rgba(239,68,68,0.12) !important; }
.backlink { color: var(--gold) !important; font-family: var(--font-body) !important; font-style: normal !important; }
.control-card { display: grid; gap: 12px; }
.control-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.control-title { font-weight: 700; color: var(--fg); font-size: 15px; }
.control-copy { color: var(--fg-dim); font-size: 12px; line-height: 1.45; margin-top: 2px; }
.switch {
  width: 52px; height: 30px; padding: 3px; flex: 0 0 auto;
  border-radius: 999px !important;
  border: 1px solid var(--border-soft) !important;
  background: rgba(232,230,225,0.08) !important;
  position: relative;
}
.switch::after { content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; border-radius: 50%; background: var(--fg-dim); transition: transform .16s ease, background .16s ease; }
.switch[aria-pressed="true"] { background: rgba(201,168,76,0.24) !important; border-color: rgba(201,168,76,0.5) !important; }
.switch[aria-pressed="true"]::after { transform: translateX(22px); background: var(--gold); }
.switch-status { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); }
.prompt-state { margin-top: 10px; color: var(--fg-dim); font-size: 12px; }
pre { font-family: var(--font-mono) !important; }
@media (max-width: 520px) {
  body { padding: 14px !important; }
  .qa-grid { grid-template-columns: 1fr 1fr !important; }
  h1 { font-size: 30px !important; }
}