:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  --surface: #16101e;
  --edge: #39274b;
  --text: #faf5ff;
  --muted: #c5b6d0;
  --accent: #ddadff;
  --accent-bg: #4b1870;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(ellipse at 78% 10%, #35134b 0%, transparent 42rem), #0b0711;
}
button, input, select, textarea { font: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid #e3baff; outline-offset: 4px; }
h1, h2, h3, p { margin-block: 0; }
.top, main { width: min(100% - 40px, 1050px); margin-inline: auto; }
.top, .board-head, .dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.top { min-height: 74px; border-bottom: 1px solid var(--edge); }
.top nav, .categories, .form-actions, .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 760; }
.hero { padding-block: clamp(44px, 10vw, 108px) 36px; }
.hero h1 { font-size: clamp(2.25rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -0.06em; }
.hero h1 span { color: var(--accent); }
.hero p { margin-top: 18px; color: var(--muted); line-height: 1.65; max-width: 42rem; }
.discussions { padding: 24px; border: 1px solid var(--edge); border-radius: 18px; background: var(--surface); margin-bottom: 48px; }
.board-head { margin-bottom: 20px; }
.board-head h2 { font-size: 1.32rem; }
.button, .quiet, .chip, .topic-button {
  border: 1px solid var(--edge);
  border-radius: 9px;
  padding: 9px 13px;
  background: #21172c;
  color: var(--text);
  cursor: pointer;
}
.primary, .chip[aria-pressed=true] { background: var(--accent-bg); border-color: #9c63c8; }
.quiet { background: none; }
button:hover { border-color: var(--accent); }
button:disabled { cursor: progress; opacity: 0.65; }
.chip { font-size: 0.84rem; }
.notice { margin: 14px 0; color: var(--accent); }
.topics { margin-top: 18px; }
.topic-button { display: grid; gap: 7px; text-align: left; width: 100%; padding: 14px; margin: 8px 0; }
.topic-button strong { overflow-wrap: anywhere; }
.meta, .muted { color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.badge { border-radius: 99px; padding: 1px 8px; background: #35194b; color: #ebc9ff; }
.badge[data-role=Admin], .badge[data-role=Moderator] { background: #4e214b; color: #ffceef; }
.badge[data-role=Developer] { background: #252759; color: #d8d9ff; }
.badge[data-role=Veteran] { background: #433019; color: #ffe0a7; }
.empty { padding: 26px 0 12px; color: var(--muted); }
#more-topics { margin-top: 12px; }
dialog {
  width: min(100% - 32px, 720px);
  max-height: calc(100dvh - 32px);
  padding: 22px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  color: var(--text);
  background: #15101e;
}
dialog::backdrop { background: #050307bd; }
.dialog-head { margin-bottom: 16px; }
.dialog-head h2 { overflow-wrap: anywhere; }
form, label { display: grid; gap: 9px; }
form { gap: 14px; }
label { color: var(--muted); }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--edge);
  background: #100b16;
  color: var(--text);
}
textarea { min-height: 120px; resize: vertical; }
.form-error { color: #ffb9cc; }
.post, .review, .admin-block { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--edge); }
.post-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.topic-reply { margin-top: 18px; }
.admin-block h3 { margin-top: 5px; }
.admin-block + .admin-block { margin-top: 10px; }
@media (max-width: 520px) {
  .top, main { width: calc(100% - 28px); }
  .top { gap: 8px; }
  .top .quiet, .top .button { padding-inline: 8px; }
  .hero { padding-bottom: 26px; }
  .discussions, dialog { padding: 16px; }
}