/* =========================================================================
   Aptonic Forums — bespoke theme inspired by aptonic.com
   Dark cinematic chrome (nav + hero + footer) wrapping a light reading
   surface. Built fresh on a modern reset, no Oxygen heritage.
   ========================================================================= */

/* ---------- Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend, form { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
hr, .hr { display: none; }

/* ---------- Tokens ------------------------------------------------------ */
:root {
  --p-50: #f0f2fd; --p-100: #e4e8fb; --p-200: #cfd5f6; --p-300: #b1b8f0;
  --p-400: #9193e8; --p-500: #7c77dd; --p-600: #7366d2; --p-700: #5b4cb6;
  --p-800: #4a4093; --p-900: #403976; --p-950: #262244;

  --bg-dark: #08091a; --bg-page: #f6f5fb; --bg-card: #fff;
  --bg-soft: #faf9fd; --bg-stripe: #fbfaff;

  --ink-900: #0f1024; --ink-700: #2b2c47; --ink-600: #4a4b66;
  --ink-500: #6c6d85; --ink-400: #8d8ea5; --ink-300: #b6b7ca;
  --ink-200: #dcdde8; --ink-100: #eceaf3;

  --line: rgba(15, 16, 36, 0.07);
  --line-strong: rgba(15, 16, 36, 0.12);
  --line-dark: rgba(255, 255, 255, 0.08);

  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --shadow-card: 0 1px 2px rgba(15,16,36,.04), 0 4px 16px rgba(91,76,182,.06);
  --shadow-btn: 0 6px 20px rgba(91,76,182,.25);
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px;
}

/* ---------- Base -------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.55;
  color: var(--ink-700);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--p-700); transition: color .15s ease; }
a:hover { color: var(--p-800); }
strong { font-weight: 600; color: var(--ink-900); }
::selection { background: var(--p-200); color: var(--ink-900); }
.hidden { display: none; }

/* ---------- Layout shell ----------------------------------------------- */
#brd-wrap {
  max-width: 1080px;
  margin: 0 auto 56px;
  padding: 0;
  position: relative;
  background: #fff;
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(91, 76, 182, 0.04);
  overflow: hidden;
}

#brd-access { position: absolute; left: -9999px; }
#brd-access a:focus { position: fixed; top: 12px; left: 12px; background: var(--ink-900); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }

/* ---------- Header chrome (light, matches aptonic.com light nav) ------- */
/* Single visual bar: #brd-head is the white surface with the brand on the
   left; #brd-navlinks is absolutely positioned to the top-right of the
   wrap and matches the header height so both vertically center. */
#brd-head {
  margin: 0;
  padding: 0 28px;
  background: #eee7ff;
  border-bottom: none;
  height: 72px;
  display: flex; align-items: center;
  position: relative; z-index: 1;
}
#brd-title { display: inline-flex; }
#brd-title a {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 20px; letter-spacing: -0.025em;
  color: var(--ink-900);
}
#brd-title a::before {
  content: ""; width: 46px; height: 46px; flex: 0 0 46px;
  background: url('/img/dropzone.png') center/contain no-repeat;
  filter: drop-shadow(0 3px 8px rgba(91, 76, 182, .28));
}

/* Second bar — tab-style nav beneath the brand header */
#brd-navlinks {
  position: static;
  background: #f5f3fb;
  border-top: 1px solid rgba(91, 76, 182, 0.06);
  border-bottom: 1px solid rgba(91, 76, 182, 0.06);
  padding: 0 22px;
  margin: 0;
}
#brd-navlinks ul {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: -1px; /* tabs overlap the parent border */
}
#brd-navlinks li { display: flex; }
#brd-navlinks a {
  display: inline-flex; align-items: center;
  height: 46px;
  padding: 3px 18px 0; /* nudge glyphs down to bar's optical center */
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ink-600);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
#brd-navlinks a:hover { color: var(--ink-900); background: rgba(255, 255, 255, 0.5); }
#brd-navlinks li.isactive a {
  color: var(--ink-900);
  font-weight: 700;
  background: #fff;
  border-bottom-color: #fff; /* white pill bleeds into the content card below */
}
#brd-navlinks #navuserlist { display: none; }

/* Sub-header strip (welcome + visit-links) — hidden entirely */
#brd-visit { display: none; }

/* ---------- Main reading surface --------------------------------------- */
#brd-main {
  background: var(--bg-card);
  margin: 0;
  padding: 36px 28px 32px;
  border-bottom: 1px solid var(--line);
}
.main-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink-900);
}
.main-title small {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  color: var(--ink-400);
  margin-left: 6px; letter-spacing: 0;
}
.main-title a, .main-title .permalink { color: var(--ink-900); }
.main-title a:hover, .main-title .permalink:hover { color: var(--p-700); }

/* Index page already says "Dropzone Forums" in the header — don't repeat it */
#brd-index .main-title { display: none; }
#brd-index #brd-main { padding-top: 8px; }
#brd-index .main-head:first-of-type { margin-top: 16px; }

/* ---------- Crumbs ----------------------------------------------------- */
.crumbs { margin: 13px 0 24px; }
#brd-crumbs-end { margin: 28px 0 0; }
.crumbs p { font-size: 13px; color: var(--ink-400); display: flex; flex-wrap: wrap; gap: 6px; }
.crumb { display: inline-flex; align-items: center; gap: 6px; }
.crumb span { color: var(--ink-300); }
.crumb a { color: var(--p-700); font-weight: 500; }
.crumbfirst a { color: var(--ink-500); }
.crumbfirst a:hover { color: var(--ink-900); }
.crumblast { color: var(--ink-700); font-weight: 500; }

/* ---------- Pagination + posting bar ----------------------------------- */
.main-pagepost {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px;
  margin: 14px 0;
  padding: 6px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.paging { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: 12px; line-height: 1; }
.paging .pages { color: var(--ink-500); margin-right: 4px; font-weight: 500; }
.paging a, .paging strong, .paging span:not(.pages) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 5px; font-size: 12px; font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.paging strong { background: var(--p-700); color: #fff; font-weight: 600; }
.paging a { background: #fff; color: var(--ink-700); border: 1px solid var(--line-strong); }
.paging a:hover { border-color: var(--p-400); color: var(--p-800); background: var(--p-50); }
.paging span:not(.pages) { color: var(--ink-400); }
.posting { font-size: 12px; color: var(--ink-500); line-height: 1; }
.posting a { color: var(--p-700); font-weight: 600; }

/* ---------- Section heads ---------------------------------------------- */
.main-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--line);
}
#brd-viewtopic .main-head { border-bottom: none; padding-bottom: 4px; }
.main-head h2, .main-head .hn {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--ink-900); letter-spacing: -0.01em;
}
.main-head .item-info { color: var(--ink-500); font-weight: 500; font-size: 14px; }
.main-head .options a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--p-50); color: var(--p-700);
  border-radius: 999px;
  font-weight: 500; font-size: 12px;
}
.main-head .options a:hover { background: var(--p-100); }
.main-head .options .feed { display: none; }
:root {
  --ic-chat: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M4.804 21.644A6.707 6.707 0 0 0 6 21.75a6.721 6.721 0 0 0 3.583-1.029c.774.182 1.584.279 2.417.279 5.322 0 9.75-3.97 9.75-9 0-5.03-4.428-9-9.75-9s-9.75 3.97-9.75 9c0 2.409 1.025 4.587 2.674 6.192.232.226.277.428.254.543a3.73 3.73 0 0 1-.814 1.686.75.75 0 0 0 .44 1.223zM8.25 10.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25zM10.875 12a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25z" clip-rule="evenodd"/></svg>');
  --ic-pin:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M6.32 1.827a49.255 49.255 0 0 1 11.36 0c1.497.174 2.57 1.46 2.57 2.93V19.5a.75.75 0 0 1-1.085.67L12 16.812l-7.165 3.358A.75.75 0 0 1 3.75 19.5V4.757c0-1.47 1.073-2.756 2.57-2.93z" clip-rule="evenodd"/></svg>');
  --ic-back: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M15.97 2.47a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.22-3.22H7.5a.75.75 0 0 1 0-1.5h11.69l-3.22-3.22a.75.75 0 0 1 0-1.06zm-7.94 9a.75.75 0 0 1 0 1.06l-3.22 3.22H16.5a.75.75 0 0 1 0 1.5H4.81l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 0z" clip-rule="evenodd"/></svg>');
  --chev:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="none" stroke="%236c6d85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1 1l5 5 5-5"/></svg>');
}

/* On form-only pages the duplicate section h2 is hidden */
#brd-login .main-head .hn,
#brd-register .main-head .hn,
#brd-search .main-head .hn,
#brd-profile .main-head .hn,
#brd-message .main-head .hn { display: none; }
#brd-login .main-head, #brd-register .main-head,
#brd-search .main-head, #brd-profile .main-head, #brd-message .main-head {
  border-bottom: none; padding-bottom: 0; margin-top: 16px;
  justify-content: flex-end;
}
#brd-login .main-head:not(:has(.options)),
#brd-register .main-head:not(:has(.options)),
#brd-profile .main-head:not(:has(.options)),
#brd-message .main-head:not(:has(.options)) { display: none; }

.main-subhead { display: none; }
.main-foot { margin-top: 8px; padding: 16px 4px 4px; font-size: 13px; color: var(--ink-500); }
.main-foot .hn { font-size: 13px; font-weight: 500; color: var(--ink-500); }
/* Topic-level moderator menu (Move/Delete/Close/Stick/Moderate topic) */
.main-foot .options {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px;
  margin: 0 0 10px;
}
.main-foot .options span { display: inline-flex; align-items: center; }
.main-foot .options span + span::before {
  content: ""; width: 4px; height: 4px;
  background: var(--ink-300); border-radius: 50%;
  margin-right: 18px;
}
.main-foot .options a.mod-option {
  color: var(--p-700); font-weight: 500; font-size: 13px;
}
.main-foot .options a.mod-option:hover { color: var(--p-800); }
.main-foot h2.hn { margin-top: 4px; }

/* ---------- Forum / topic list rows ------------------------------------ */
.main-content { margin: 0 0 4px; }
.main-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  position: relative;
  transition: background .15s ease;
}
.main-item.main-first-item { border-top: none; }
.main-item:hover { background: var(--bg-stripe); cursor: pointer; }
/* Make the entire row a click target by overlaying the title link */
.item-subject h3 a::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
}
/* Nested links (lastpost date, starter cite) stay independently clickable */
.main-item .item-info a,
.main-item .item-starter cite,
.main-item > .icon { position: relative; z-index: 2; }

/* topic status icons (normal / sticky / moved) — refined Heroicons */
.main-item > .icon {
  width: 22px; height: 22px;
  color: var(--p-600);
  display: inline-block;
  position: relative;
}
.main-item > .icon::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: var(--ic-chat) center/contain no-repeat;
          mask: var(--ic-chat) center/contain no-repeat;
}
.main-item > .icon.sticky { color: #d97706; }
.main-item > .icon.sticky::before {
  -webkit-mask: var(--ic-pin) center/contain no-repeat;
          mask: var(--ic-pin) center/contain no-repeat;
}
.main-item > .icon.moved { color: var(--ink-400); }
.main-item > .icon.moved::before {
  -webkit-mask: var(--ic-back) center/contain no-repeat;
          mask: var(--ic-back) center/contain no-repeat;
}

.item-subject { min-width: 0; }
.item-subject h3 {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600; line-height: 1.3;
  color: var(--ink-900); letter-spacing: -0.005em;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  word-break: break-word;
}
.item-subject h3 a { color: var(--ink-900); }
.item-subject h3 a:hover { color: var(--p-700); }
.item-num { display: none; }
.item-status { font-size: 0; } /* hide the trailing ":" text node */
.item-status em {
  font-style: normal;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--p-50); color: var(--p-700);
}
.item-status .sticky { background: #fff1d6; color: #b56b00; }
.item-status .moved { background: var(--ink-100); color: var(--ink-500); }
.item-subject p { margin-top: 2px; font-size: 13px; color: var(--ink-500); }
.item-starter cite { font-style: normal; font-weight: 500; color: var(--ink-700); }

.item-info {
  display: flex; align-items: center; gap: 0;
  font-size: 13px; color: var(--ink-500);
}
.item-info li {
  display: flex; flex-direction: column;
  width: 64px;
  text-align: center;
}
.item-info li.info-views { margin-left: 24px; }
.item-info li.info-lastpost {
  width: 130px;
  text-align: right;
  margin-left: 4px;
}
.item-info strong { color: var(--ink-900); font-weight: 600; font-size: 14px; }
.item-info .label { color: var(--ink-400); font-size: 12px; }
.item-info li.info-lastpost strong { font-size: 13px; font-weight: 500; }
.item-info li.info-lastpost strong a { color: var(--ink-900); }
.item-info li.info-lastpost cite { font-style: normal; color: var(--ink-500); font-size: 12px; }

/* ---------- Forum index stats (hidden — keep page focused on forums) -- */
#brd-stats, #brd-online { display: none; }

/* ---------- Posts (viewtopic) ----------------------------------------- */
/* posts are joined into a single card with horizontal dividers between them */
.main-topic {
  display: flex; flex-direction: column;
  margin-top: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.post {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  /* lay out author (left) + posthead + post-entry (right) in a single grid
     so the posthead bar starts AFTER the author column, not above it */
  display: grid;
  grid-template-columns: 168px 1fr;
  grid-template-rows: auto 1fr; /* posthead = natural height; body absorbs any extra */
}
.post + .post { border-top: 1px solid var(--line); }

.posthead {
  grid-column: 2; /* sits in the right column only, beside the author */
  padding: 8px 18px 7px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  min-height: 36px;
}
.posthead h3 {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500; line-height: 1.4;
  color: var(--ink-500);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
.post-num { display: none; }
.post-byline { display: none; } /* username already shown in author column */
.post-link a { color: var(--ink-400); }
.post-link a:hover { color: var(--p-700); }
.post-edit { color: var(--ink-400); font-size: 12px; font-style: italic; }

/* Per-post toolbar — Email / Report / Delete / Edit / Quote, inline with date */
.posthead .post-options {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 16px;
  justify-content: flex-end;
  font-size: 12px;
  margin-left: auto;
}
.posthead .post-contacts,
.posthead .post-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 14px;
  margin: 0;
}
.posthead .post-options > p + p { position: relative; }
.posthead .post-options > p + p::before {
  content: ""; width: 1px; height: 10px;
  background: var(--line-strong);
  margin-right: 14px;
}
.posthead .post-contacts > span,
.posthead .post-actions > span {
  display: inline-flex; align-items: center;
}
.posthead .post-contacts > span + span::before,
.posthead .post-actions > span + span::before {
  content: ""; width: 3px; height: 3px;
  background: var(--ink-300); border-radius: 50%;
  margin-right: 14px;
}
.posthead .post-contacts a,
.posthead .post-actions a {
  color: var(--ink-500); font-weight: 500;
  letter-spacing: 0.005em;
  padding: 2px 0;
  transition: color .15s ease;
}
.posthead .post-contacts a:hover,
.posthead .post-actions a:hover { color: var(--p-700); }
.posthead .post-contacts a > span,
.posthead .post-actions a > span { display: none; }

/* Search result subtitle ("Re: Topic Title (N replies, posted in Forum)") */
.post-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  line-height: 1.35;
  color: var(--ink-900);
  margin-top: 8px;
}
.post-title a.permalink { color: var(--p-700); }
.post-title a.permalink:hover { color: var(--p-800); }
.post-title small {
  display: inline;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-500);
  margin-left: 6px;
  letter-spacing: 0;
}
.post-title small a { color: var(--ink-700); }
.post-title small a:hover { color: var(--p-700); }

/* Search result footer + per-post admin action bar */
.postfoot {
  grid-column: 1 / -1;          /* span both author + body columns */
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: 8px 16px;
  font-size: 13px;
}
.post-options {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 22px;
  justify-content: flex-end;     /* right-align like a toolbar */
}
.post-contacts, .post-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 18px;
  margin: 0;
}
.post-options > p + p { position: relative; }
.post-options > p + p::before {
  content: ""; width: 1px; height: 12px;
  background: var(--line-strong);
  margin-right: 22px;
}
.post-contacts > span, .post-actions > span {
  display: inline-flex; align-items: center;
}
.post-contacts > span + span::before,
.post-actions > span + span::before {
  content: ""; width: 4px; height: 4px;
  background: var(--ink-300); border-radius: 50%;
  margin-right: 18px;
}
.post-contacts a, .post-actions a {
  color: var(--p-700); font-weight: 500;
}
.post-contacts a:hover, .post-actions a:hover { color: var(--p-800); }
/* PunBB appends a redundant "<span> Post N</span>" / "&nbsp;name" suffix on
   each action link — the verb is enough context within a post card. */
.post-contacts a > span, .post-actions a > span { display: none; }
/* …except for the search-results "Go to forum/topic/post" links, where the
   suffix carries the only meaningful info. */
.post.resultpost .post-actions a > span { display: inline; color: var(--ink-500); font-weight: 400; }
.post.resultpost .post-actions a[title*="this post"] > span { display: none; }

.postbody { display: contents; }
/* Search-result posts have no author column — fall back to a simple block layout */
.post.resultpost { display: block; }
.post.resultpost .postbody { display: block; }
.post.resultpost .posthead,
.post.resultpost .post-entry,
.post.resultpost .postfoot { grid-column: auto; grid-row: auto; }
/* Search results are independent cards with gaps between them */
#brd-searchposts .main-topic {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  gap: 24px;
}
#brd-searchposts .post.resultpost {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
#brd-searchposts .post.resultpost + .post.resultpost { border-top: 1px solid var(--line); }
.post-author {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding: 14px 12px;
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  text-align: center;
}
.post-entry { grid-column: 2; }
.author-ident { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.useravatar img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(91, 76, 182, .15);
  margin-bottom: 4px;
}
.username {
  font-family: var(--font-display);
  font-weight: 700; font-size: 14px;
  color: var(--ink-900); letter-spacing: -0.01em;
}
.username a { color: var(--ink-900); }
.username a:hover { color: var(--p-700); }
.usertitle span {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--p-50); color: var(--p-700);
}
.userstatus { display: none; }
.author-info { display: none; } /* hide Registered + Posts count */

.post-entry { grid-column: 2; padding: 16px 22px; min-width: 0; }
.entry-title { display: none; } /* redundant — already in posthead */
.entry-content {
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: -0.002em;
  color: var(--ink-700);
  word-break: break-word;
  font-feature-settings: "kern", "liga", "calt", "ss01";
}
.entry-content p { margin: 0 0 10px; }
.entry-content p:last-child { margin-bottom: 0; }
.entry-content strong { color: var(--ink-900); font-weight: 600; }
.entry-content em { color: var(--ink-700); }
.entry-content a {
  color: var(--p-700);
  text-decoration: underline;
  text-decoration-color: var(--p-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease, color .15s ease;
}
.entry-content a:hover { color: var(--p-800); text-decoration-color: var(--p-600); }
.entry-content code:not(.codebox code) {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  background: var(--p-50);
  border: 1px solid var(--p-100);
  border-radius: 5px;
  color: var(--p-800);
}

.entry-content img { display: inline-block; vertical-align: middle; }
.postimg img {
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  margin: 8px 0;
}
span.postimg { display: inline-block; max-width: 100%; }

.codebox {
  margin: 14px 0;
  background: #0d0e22;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #1c1e3a;
}
.codebox pre {
  padding: 16px 18px; overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1.6;
  color: #d8d9f5;
}

.entry-content blockquote, .quotebox {
  margin: 14px 0;
  padding: 14px 18px;
  background: var(--bg-soft);
  border-left: 3px solid var(--p-400);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-600); font-size: 14px;
}
.quotebox cite { display: block; font-style: normal; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; font-size: 13px; }

.postsignature {
  margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px dashed var(--line);
  font-size: 13px; color: var(--ink-400); font-style: italic;
}

.post-links {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: 10px 22px; font-size: 13px;
}
.post-links ul { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.post-links a { color: var(--p-700); font-weight: 500; }

/* ---------- Forms (.main-frm, .frm-form) ------------------------------ */
.main-frm {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-top: 16px;
}
.content-head {
  margin: 26px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.content-head:first-child { margin-top: 0; }
.content-head p, .content-head h3, .content-head h2 {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0;
}
.content-head h2 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.content-head h3 strong { color: var(--ink-700); }
.content-head a { color: var(--p-700); font-weight: 600; }

.req-warn, .ct-box.error-box, .ct-box.info-box {
  padding: 12px 16px;
  background: var(--p-50); border: 1px solid var(--p-200);
  border-radius: var(--radius);
  color: var(--p-800); font-size: 13px;
  margin: 0 0 20px;
}
/* Hide the "All fields with bold label..." notice on the login page */
#brd-login #req-msg { display: none; }

.frm-form { display: flex; flex-direction: column; gap: 4px; }
fieldset.frm-group { display: flex; flex-direction: column; gap: 18px; padding: 0; }
.frm-group + .frm-group { margin-top: 32px; }
.group-legend {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: var(--ink-900); margin-bottom: 14px;
}
/* On admin pages the fieldset legend is usually a near-duplicate of the
   .content-head h2 above it. Hide it visually but keep it accessible. */
[id^="brd-admin"] .group-legend,
[id^="brd-profile"] .group-legend,
[id^="brd-profile"] fieldset.mf-set > legend {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.sf-set { display: flex; flex-direction: column; margin-top: 18px; }
.sf-set:first-child { margin-top: 0; }
.sf-box { display: flex; flex-direction: column; gap: 6px; }
/* PunBB renders a <br> between label and input — collapse it inside flex */
.sf-box > br, .frm-form br { display: none; }
.sf-box label, .mf-item label {
  font-size: 13px; font-weight: 500; color: var(--ink-700);
}
.sf-box.required > label > span:first-child { font-weight: 600; color: var(--ink-900); }
.sf-box label small,
.txt-box label small,
.frm-form label small {
  display: block; margin-top: 2px;
  font-weight: 400; color: var(--ink-500); font-size: 12px;
}
/* Textarea boxes (admin email mailing list etc.) — use same column layout as sf-box */
.txt-box {
  display: flex; flex-direction: column; gap: 6px;
}
.txt-box label {
  font-size: 13px; font-weight: 500; color: var(--ink-700);
}
.txt-box label > span:first-child {
  font-weight: 600; color: var(--ink-900);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="search"], input[type="number"],
textarea, select {
  width: 100%; max-width: 420px;
  padding: 9px 12px;
  font-size: 14px; color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 160px; max-width: 100%; resize: vertical; font-family: var(--font-body); line-height: 1.55; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--p-500);
  box-shadow: 0 0 0 3px rgba(124, 119, 221, .18);
}
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: var(--chev);
  background-repeat: no-repeat; background-position: right 12px center;
}

.sf-box.checkbox, .mf-item {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
}
/* The input is wrapped in a <span class="fld-input">; the span inherits body
   line-height (1.55) and inflates the row past the 16px checkbox. Make it
   inline-flex so it shrinks to the input itself. */
.sf-box.checkbox > .fld-input,
.mf-item > .fld-input { display: inline-flex; line-height: 1; }
.sf-box.checkbox label, .mf-item label { line-height: 1.2; }
/* Labels that include a wrapped description (bold name + body text) need
   roomier leading so the second line is readable. */
.sf-box.checkbox:has(label > span:first-child) label,
.mf-item:has(label > span:first-child) label { line-height: 1.5; }
/* Bold the name span (first <span> child); descriptive text after it stays normal */
.sf-box.checkbox label > span:first-child,
.mf-item label > span:first-child {
  display: block;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 1px;
}
/* When the label has a bold name + wrapped description, anchor the input to
   the name row rather than centering against the full block. */
.sf-box.checkbox:has(label > span:first-child),
.mf-item:has(label > span:first-child) {
  align-items: flex-start;
}
.sf-box.checkbox:has(label > span:first-child) input[type="checkbox"],
.sf-box.checkbox:has(label > span:first-child) input[type="radio"],
.mf-item:has(label > span:first-child) input[type="checkbox"],
.mf-item:has(label > span:first-child) input[type="radio"] { margin-top: 3px; }
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--p-700); cursor: pointer;
}

fieldset.mf-set {
  margin-top: 18px;
  padding: 12px 16px 11px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
fieldset.mf-set legend {
  padding: 0; font-size: 13px; font-weight: 600;
  color: var(--ink-700); margin-bottom: 10px;
}
.mf-box { display: flex; flex-wrap: wrap; gap: 18px; }
/* Multi-field rows like the admin Forums editor — each field stacks label+value */
.mf-field {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.mf-field .aslabel,
.mf-field label > span:first-child {
  font-size: 13px; font-weight: 600; color: var(--ink-900);
}
.mf-field .fld-input { display: block; }
.mf-field > br { display: none; }

.frm-buttons {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; gap: 10px;
}
.submit input[type="submit"], button[type="submit"], input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 22px;
  font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--p-600), var(--p-800));
  border: none; border-radius: 10px;
  box-shadow: var(--shadow-btn); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.submit input[type="submit"]:hover, button[type="submit"]:hover, input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(91, 76, 182, .35);
  filter: brightness(1.05);
}
.submit:not(.primary) input[type="submit"] {
  background: #fff; color: var(--ink-700);
  border: 1px solid var(--line-strong); box-shadow: none;
}

/* ---------- Tables (userlist) ----------------------------------------- */
.ct-group table {
  width: 100%; border-collapse: collapse;
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.ct-group caption { display: none; }
.ct-group thead th {
  font-family: var(--font-display);
  text-align: left;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-500);
  padding: 14px 18px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.ct-group tbody td {
  padding: 12px 18px;
  font-size: 14px; color: var(--ink-700);
  border-bottom: 1px solid var(--line);
}
.ct-group tbody tr:last-child td { border-bottom: none; }
.ct-group tbody tr.even td { background: #fdfcff; }
.ct-group tbody tr:hover td, .ct-group tbody tr.even:hover td { background: var(--bg-stripe); }
.ct-group td.tc0 a { color: var(--ink-900); font-weight: 600; }
.ct-group td.tc0 a:hover { color: var(--p-700); }
.ct-group td.tc2, .ct-group td.tc3 { font-variant-numeric: tabular-nums; color: var(--ink-500); }
.ct-group td.tc3 { font-size: 13px; }

/* ---------- Profile (data display) ------------------------------------ */
/* Flat single-card layout — the outer .main-frm IS the card; .ct-set
   sections are just spacing inside it, not nested boxes. */
[id^="brd-profile"] .main-frm { padding: 28px 32px; }

/* Meta line above forms ("You may use: BBCode Smilies") — make it a small
   muted helper that sits comfortably above the form, separated by spacing. */
[id^="brd-profile"] .main-frm .content-options.options {
  margin: 0 0 22px;
  font-size: 13px; color: var(--ink-500);
}
[id^="brd-profile"] .main-frm .content-options.options a { color: var(--p-700); font-weight: 500; }

/* Profile admin: flatten the moderator-assignment box and align nested
   subgroup labels (Announcements:, Support:) with their checklists. */
[id^="brd-profile"] fieldset.mf-set {
  margin-top: 0; padding: 0;
  background: transparent; border: none; border-radius: 0;
}
[id^="brd-profile"] .mf-box { display: block; }
[id^="brd-profile"] .checklist { display: flex; flex-direction: column; gap: 22px; }
[id^="brd-profile"] .checklist > fieldset { border: none; padding: 0; min-width: 0; }
[id^="brd-profile"] .checklist > fieldset > legend {
  padding: 0; margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-500);
}
[id^="brd-profile"] .checklist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  font-size: 14px; color: var(--ink-800);
}
[id^="brd-profile"] .checklist-item + .checklist-item { border-top: 1px solid var(--line); }
[id^="brd-profile"] .checklist-item label { cursor: pointer; }
/* Hide the inline "You will be redirected..." text and the empty
   .frm-buttons divider that wraps it — the real submit button is in
   the .mf-set above. */
[id^="brd-profile"] .frm-buttons:not(:has(input)) { display: none; }
/* The button-set sibling needs its own top margin since .frm-buttons is hidden */
[id^="brd-profile"] .mf-set.button-set { margin-top: 18px; }
.profile.ct-group {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 1fr);
  gap: 8px 56px;
}
.ct-set { background: transparent; border: none; padding: 0; }
.ct-box { padding: 0; }
.ct-set h3.ct-legend {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500); margin-bottom: 14px;
}
.user-ident.ct-legend { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.user-ident .username {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  color: var(--ink-900); letter-spacing: -0.015em;
}
.data-list, ul.data-box {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; color: var(--ink-600);
}
.data-list strong { color: var(--ink-900); font-weight: 600; }
ul.data-box li a { color: var(--p-700); font-weight: 500; }

@media (max-width: 640px) {
  .profile.ct-group { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Admin / Profile sub-menus -------------------------------- */
.admin-menu, .admin-submenu, .main-menu {
  margin: 16px 0 0;
  border-bottom: 1px solid var(--line);
}
.admin-menu ul, .admin-submenu ul, .main-menu ul {
  display: flex; flex-wrap: wrap;
  margin-bottom: -1px;
}
.admin-menu li, .admin-submenu li, .main-menu li { display: flex; }
.admin-menu a, .admin-submenu a, .main-menu a {
  display: inline-flex; align-items: center;
  height: 40px;
  padding: 3px 16px 0;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ink-500);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.admin-menu a span, .admin-submenu a span, .main-menu a span { color: inherit; font-weight: inherit; }
.admin-menu a:hover, .admin-submenu a:hover, .main-menu a:hover { color: var(--ink-900); }
.admin-menu li.active a,
.admin-submenu li.active a,
.main-menu li.active a {
  color: var(--ink-900);
  font-weight: 700;
  border-bottom-color: var(--p-700);
}
.admin-submenu {
  margin-top: 0;
  background: var(--bg-soft);
  border-top: none;
  padding: 0 10px;
}
.admin-submenu a { height: 36px; font-size: 13px; }

/* Admin pages: flatten the outer .main-frm so inner .ct-set cards stand alone */
[id^="brd-admin"] .main-frm {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
[id^="brd-admin"] .ct-group { margin-top: 18px; }
[id^="brd-admin"] .ct-group .ct-set + .ct-set { margin-top: 14px; }
[id^="brd-admin"] .ct-set {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
[id^="brd-admin"] .ct-box h3.ct-legend {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-500);
  margin-bottom: 10px;
}
[id^="brd-admin"] .data-list { font-size: 14px; color: var(--ink-700); gap: 6px; }
[id^="brd-admin"] .data-list strong { color: var(--ink-900); }
[id^="brd-admin"] .data-list a { color: var(--p-700); }
/* Extension/info card action links (e.g. Disable / Uninstall) — dot separator */
[id^="brd-admin"] .extension {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 12px;
}
[id^="brd-admin"] .extension h3.ct-legend { margin-bottom: 8px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink-900); }
[id^="brd-admin"] .extension h3.ct-legend em { font-style: normal; color: var(--ink-400); margin-left: 4px; font-weight: 500; }
[id^="brd-admin"] .extension .options {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
[id^="brd-admin"] .extension .options span { display: inline-flex; align-items: center; }
[id^="brd-admin"] .extension .options span + span::before {
  content: ""; width: 3px; height: 3px;
  border-radius: 50%; background: var(--ink-300);
  margin-right: 12px;
}
[id^="brd-admin"] .extension .options a { color: var(--p-700); font-weight: 500; font-size: 13px; }
[id^="brd-admin"] .extension .options a:hover { color: var(--p-800); }
/* sub-headings inside admin sections */
[id^="brd-admin"] .main-subhead {
  display: block;
  margin-top: 18px;
}
[id^="brd-admin"] .main-subhead h2 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

/* ---------- Messages -------------------------------------------------- */
.main-message {
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-top: 16px;
  text-align: center;
}
.main-message p {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.002em;
  color: var(--ink-700);
}

/* ---------- Footer (light, matches aptonic.com footer) ---------------- */
#brd-about {
  background: #fff;
  margin: 0;
  padding: 36px 28px 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-500);
  font-size: 14px;
}
#qjump { display: none; } /* drop the Jump-to-forum form */
.brd-footer {
  display: flex; flex-direction: column;
}
.brd-footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px 24px;
  padding-bottom: 28px;
}
.brd-footer-brand-col { padding-right: 32px; }
.brd-footer-brand {
  display: inline-block;
  width: 120px; height: 28px;
  background: url('/img/aptonic.png') left center / contain no-repeat;
  font-size: 0; /* swallow any text content */
  transition: opacity .15s ease;
}
.brd-footer-brand:hover { opacity: .8; }
.brd-footer-blurb {
  margin-top: 14px;
  max-width: 380px;
  line-height: 1.55;
  color: var(--ink-600);
  font-size: 13px;
}
.brd-footer-col h4 {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 12px;
}
.brd-footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.brd-footer-col a {
  color: var(--ink-600);
  font-size: 13px;
  transition: color .15s ease;
}
.brd-footer-col a:hover { color: var(--ink-900); }

.brd-footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-500);
}
.brd-footer-copy { color: var(--ink-500); }
.brd-footer-legal { display: flex; gap: 18px; }
.brd-footer-legal a { color: var(--ink-500); }
.brd-footer-legal a:hover { color: var(--ink-900); }

@media (max-width: 720px) {
  .brd-footer-top { grid-template-columns: 1fr 1fr; gap: 24px; }
  .brd-footer-brand-col { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 420px) {
  .brd-footer-top { grid-template-columns: 1fr; }
  .brd-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Flash messages (floating toast) --------------------------- */
/* PunBB renders <div id="brd-messages"><span class="message_info">…</span></div>
   then sets visibility:hidden after 3500ms via punbb.common.js. We make the
   wrapper a fixed positioning context and turn the inner span into a card. */
#brd-messages {
  position: fixed;
  top: 24px; left: 0; right: 0;
  display: flex; justify-content: center;
  pointer-events: none;
  z-index: 9999;
  margin: 0; padding: 0 16px;
  transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
}
#brd-messages:not(:has(span)) { display: none; }
#brd-messages[style*="hidden"] { opacity: 0; transform: translateY(-8px); }
#brd-messages > span {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(20, 17, 60, .04),
    0 12px 32px -8px rgba(91, 76, 182, .22),
    0 2px 8px -2px rgba(20, 17, 60, .08);
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  animation: brd-toast-in .42s cubic-bezier(.2,.9,.25,1.2) both;
}
#brd-messages > span::before {
  content: "";
  flex: 0 0 22px; width: 22px; height: 22px;
  border-radius: 50%;
  background-color: var(--toast-accent, var(--p-600));
  background-image: var(--toast-icon-img, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  box-shadow: 0 0 0 4px var(--toast-halo, rgba(91, 76, 182, .12));
}

#brd-messages > span.message_info {
  --toast-accent: var(--p-600);
  --toast-halo: rgba(124, 119, 221, .14);
  --toast-icon-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path fill-rule='evenodd' d='M16.704 5.29a1 1 0 0 1 .006 1.414l-8 8.084a1 1 0 0 1-1.42.006l-4-4.042a1 1 0 1 1 1.42-1.408l3.29 3.327 7.29-7.375a1 1 0 0 1 1.414-.006z' clip-rule='evenodd'/></svg>");
}
#brd-messages > span.message_warning {
  --toast-accent: #d97706;
  --toast-halo: rgba(217, 119, 6, .14);
  color: #5d3a04;
  --toast-icon-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M9 4a1 1 0 1 1 2 0v6a1 1 0 1 1-2 0V4zm1 12a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z'/></svg>");
}
#brd-messages > span.message_error {
  --toast-accent: #dc2626;
  --toast-halo: rgba(220, 38, 38, .14);
  color: #7a1212;
  --toast-icon-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M6.225 4.811a1 1 0 0 0-1.414 1.414L8.586 10l-3.775 3.775a1 1 0 1 0 1.414 1.414L10 11.414l3.775 3.775a1 1 0 0 0 1.414-1.414L11.414 10l3.775-3.775a1 1 0 0 0-1.414-1.414L10 8.586 6.225 4.811z'/></svg>");
}

@keyframes brd-toast-in {
  0%   { opacity: 0; transform: translateY(-16px) scale(.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}

/* The redirect page itself (rendered when o_redirect_delay > 0) — give the
   "Logged in successfully. Redirecting…" headline + body a proper card. */
#brd-redirect {
  max-width: 520px;
  margin: 80px auto;
  padding: 0 20px;
}
#brd-redirect .main-head {
  background: transparent; border: none; padding: 0 0 14px;
}
#brd-redirect .main-head .hn {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--ink-900); letter-spacing: -0.015em;
  text-align: center;
}
#brd-redirect .main-message {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: 14px; color: var(--ink-600);
  box-shadow: 0 8px 24px -12px rgba(91, 76, 182, .18);
}
#brd-redirect .main-message a {
  color: var(--p-700); font-weight: 600;
}

/* ---------- Security question (overrides hardcoded inline style) ------ */
.sf-set > .sf-box[style] {
  color: var(--ink-900) !important;
  margin: 8px 0 0 !important;
  padding: 10px 14px !important;
  background: var(--p-50);
  border: 1px solid var(--p-200);
  border-radius: 8px;
  font-weight: 600;
  display: block;
}

/* ---------- Responsive ------------------------------------------------- */
@media (max-width: 720px) {
  #brd-wrap { margin: 0 0 40px; border-left: none; border-right: none; }
  #brd-head, #brd-main, #brd-about {
    padding-left: 18px; padding-right: 18px;
  }
  #brd-navlinks { padding: 0 14px; }
  #brd-navlinks a { padding: 0 12px; height: 40px; font-size: 13px; }
  .main-title { font-size: 24px; }
  .main-pagepost { flex-direction: column; align-items: flex-start; }
  #brd-main { padding: 28px 18px; }
  .main-frm { padding: 18px; }
  #qjump select { width: 100%; max-width: none; }

  .main-item { grid-template-columns: 32px 1fr; gap: 12px; padding: 14px 12px; }
  .item-info {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    text-align: left; justify-content: flex-start;
    padding-left: 44px;
    gap: 6px 14px; margin-top: 4px;
  }
  .item-info li { display: flex; flex-direction: row; align-items: baseline; gap: 4px; min-width: 0; }
  .item-info li.info-lastpost {
    min-width: 100%; flex-wrap: wrap;
    color: var(--ink-400); font-size: 12px;
  }
  .item-info .label { font-size: 12px; color: var(--ink-400); order: 2; }
  .item-info li.info-lastpost .label { order: -1; margin-right: 2px; }
  .item-info li.info-lastpost strong, .item-info li.info-lastpost cite { font-size: 12px; font-weight: 500; }

  .postbody { grid-template-columns: 1fr; }
  .post-author {
    display: flex; flex-direction: column; align-items: flex-start;
    text-align: left; padding: 12px 18px; gap: 8px;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .author-ident { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
  .useravatar img { width: 36px; height: 36px; margin: 0; box-shadow: none; }
  .post-entry { padding: 18px; }
  .posthead {
    padding: 10px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  /* On narrow screens, drop the vertical bar between Email and admin actions
     and let everything pack flush-left under the date. */
  .posthead .post-options {
    margin-left: 0;
    justify-content: flex-start;
    width: 100%;
    gap: 4px 14px;
  }
  .posthead .post-options > p + p::before { display: none; }
  .posthead .post-options > p + p { margin-left: 0; }
}

@media (max-width: 540px) {
  #brd-stats ul { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  #brd-head { padding: 12px 18px; height: 64px; }
  #brd-navlinks { padding: 0 8px; }
  #brd-navlinks a { padding: 0 10px; height: 38px; font-size: 13px; }
}