@font-face {
  font-family: 'Google Sans Flex';
  src: url('/fonts/GoogleSansFlex-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #171717;             /* darker page background */
  --bg-elevated: #212020;    /* section box */
  --bg-row-hover: #2a2828;
  --border: #3d3a3b;         /* dark grey box outline, replaces red */
  --border-soft: #363334;    /* subtle divider between nested rows */
  --text: #c7c4bd;           /* muted, less bright than before */
  --text-heading: #b4b1aa;   /* subforum/thread titles - grey, low contrast */
  --text-dim: #86837c;
  --accent: #8a2626;         /* dark red kept for buttons/badges/links */
  --accent-bright: #b23434;
  --accent-ink: #0f0f0f;
  --danger: #b8564a;
  --danger-ink: #180c0a;
  --purple: #9c8bb5;

  --font-display: 'Public Sans', -apple-system, sans-serif;
  --font-body: 'Public Sans', -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* Every small UI icon <img> in this app uses a class with "icon" in its
   name (header-icon-img, post-action-icon-img, category-icon-img,
   badge-*-icon, etc.) - a consistent enough convention that one attribute
   selector covers all of them, present and future, without having to list
   every class by hand. On mobile, long-pressing one of these triggered the
   browser's native image context menu (Open/Preview/Copy/Download/Share/
   Google Lens) - useless for a 16px UI glyph and just gets in the way of
   tapping the button it's sitting in. -webkit-touch-callout covers iOS
   Safari's long-press menu; user-select/pointer-events + draggable="false"
   (set alongside this in the templates where it matters most) cover
   Android Chrome's long-press behavior. This never applies to actual
   content images (avatars, banners, post/message attachments) - those
   don't use "icon" in their class name, and people should still be able
   to save/share those normally. */
img[class*="icon"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

html { overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  max-width: 100vw;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 14px;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* On phones, the fixed 20px side padding was eating a real chunk of an
   already-small screen - shrink it so threads/lists/forms use nearly the
   full width instead of a narrow column with wasted margins either side. */
@media (max-width: 700px) {
  .container { padding: 0 10px; }
  main { padding: 16px 0 40px; }
}
@media (max-width: 420px) {
  .container { padding: 0 8px; }
}

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); }

.header-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo-img { height: 64px; width: auto; max-width: 340px; display: block; }
@media (max-width: 600px) {
  .logo-img { height: 44px; max-width: 220px; }
}
@media (max-width: 480px) {
  /* Logo + hamburger + 5 header icons genuinely don't all fit at 44px
     logo height on a phone-width screen - the icons past the
     notifications bell were getting pushed off (and, since the page now
     clips horizontal overflow instead of letting it scroll, effectively
     unreachable). Shrinking the logo is most of the fix; the icon row
     itself is also tightened below. */
  .logo-img { height: 30px; max-width: 120px; }
}

.header-icons { display: flex; align-items: center; gap: 6px; }
.link-button {
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
}
.header-icons a.link-button, .header-icons a.btn-small { margin-left: 4px; }
.link-button:hover { color: var(--accent-bright); }
.nav-user { color: var(--text); font-size: 0.88rem; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
  cursor: default;
}
a.icon-btn { cursor: pointer; }
.icon-btn:hover { background: var(--bg-elevated); }
.header-icon-img { width: 18px; height: 18px; object-fit: contain; opacity: 0.85; }
.icon-btn:hover .header-icon-img { opacity: 1; }

.member-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
  object-fit: cover; /* no-op on the span/div "initial letter" fallback, needed when this class ends up on an <img> */
}
.member-avatar-small { width: 28px; height: 28px; font-size: 0.82rem; }
.profile-avatar-large { width: 64px; height: 64px; font-size: 1.6rem; }

/* ---------- User menu dropdown ---------- */
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 4px;
}
.user-menu-trigger:hover { background: var(--bg-elevated); }
.user-menu[open] .user-menu-trigger { background: var(--bg-elevated); }

.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  max-width: calc(100vw - 16px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  z-index: 20;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.user-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 6px;
}
.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.user-menu-item:hover { background: var(--bg-row-hover); }
.user-menu-logout { color: var(--accent-bright); border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 10px; }

/* ---------- Members / Profile ---------- */
.member-table { display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin-top: 16px; }
.member-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-soft); text-decoration: none; color: var(--text); }
.member-row:first-child { border-top: none; }
.member-row:hover { background: var(--bg-row-hover); }
.member-info { flex: 1; }
.member-meta { margin: 2px 0 0; color: var(--text-dim); font-size: 0.8rem; }

.profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.profile-stats { color: var(--text-dim); font-size: 0.88rem; margin: 4px 0 0; }

/* ---------- Rules ---------- */
.rules-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.rule-item { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 14px 16px; }
.rule-item h3 { margin: 0 0 4px; font-size: 1rem; }
.rule-item p { margin: 0 0 8px; color: var(--text-dim); font-size: 0.88rem; }
.rule-item p:last-child { margin-bottom: 0; }
.rule-item ul { margin: 6px 0 0; padding-left: 20px; color: var(--text-dim); font-size: 0.88rem; }
.rule-item ul ul { margin-top: 4px; }
.rule-item li { margin-bottom: 4px; }

.header-tabs { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.header-tabs .container { display: flex; gap: 4px; }
.tab {
  display: inline-block;
  padding: 10px 16px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.01em;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent-bright); }

/* ---------- Mobile nav (hamburger) ---------- */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mobile-nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-nav-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav-backdrop { display: none; }

@media (max-width: 800px) {
  .header-top { padding: 12px 16px; gap: 10px; }
  .mobile-nav-toggle { display: flex; }

  .header-tabs {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(80vw, 300px);
    z-index: 100;
    border: none;
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
    animation: kz-nav-slide-in 0.2s ease-out;
  }
  .header-tabs.nav-open { display: block; }
  .header-tabs .container {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: none;
    padding: 60px 0 20px;
  }
  .tab {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 1rem;
  }
  .tab.active { background: var(--bg-elevated); border-bottom-color: var(--border-soft); border-left: 3px solid var(--accent-bright); padding-left: 17px; }

  .mobile-nav-backdrop {
    display: none;
  }
  .header-tabs.nav-open ~ .mobile-nav-backdrop,
  .header-tabs.nav-open + .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
  }

  /* Trim the header-icons row so it doesn't crowd the hamburger + logo
     on narrow phones - keep the icons, drop the username label. */
  .nav-user { display: none; }
  .user-menu-trigger { padding: 4px; gap: 0; }
}

@media (max-width: 480px) {
  /* Logo + hamburger + 5 header icons genuinely don't all fit on a phone
     width even with the logo already shrunk above - tighten the icon row
     itself too, otherwise the icons past the notification bell (tasks,
     avatar) get pushed past the edge, and since the page clips horizontal
     overflow instead of scrolling, they'd be flat-out unreachable. */
  .header-top { padding: 10px 10px; gap: 6px; }
  .header-icons { gap: 2px; }
  .icon-btn { width: 30px; height: 30px; }
  .header-icon-img { width: 16px; height: 16px; }
  .mobile-nav-toggle { width: 30px; height: 30px; }
  .user-menu-trigger { padding: 2px; }
  .user-menu-trigger .member-avatar { width: 30px; height: 30px; }
}

@keyframes kz-nav-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

body.mobile-nav-locked { overflow: hidden; }

main { padding: 28px 0 64px; animation: page-fade-in 0.28s ease-out; }

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Enables the browser's native cross-page transition (smooth fade) when
   navigating between pages, e.g. opening/closing a thread, in browsers
   that support the View Transitions API (Chrome/Edge 126+). Browsers
   without support just ignore this and fall back to the fade-in above. */
@view-transition {
  navigation: auto;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
h1 { margin-bottom: 4px; font-size: 1.8rem; }
.subtitle { color: var(--text-dim); margin-top: 0; }
.breadcrumb { color: var(--text-dim); font-size: 0.85rem; }
.breadcrumb a { color: var(--text-dim); }

.btn, .btn-small {
  display: inline-block;
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.88rem;
  font-family: var(--font-body);
}
.btn-small { padding: 6px 12px; font-size: 0.82rem; }
.btn:hover, .btn-small:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.btn-small.danger { background: var(--danger); color: var(--danger-ink); border-color: var(--danger); }
.post-watch-btn { padding: 4px 10px; font-size: 0.76rem; }
.post-watch-btn.active { border-color: var(--accent-bright); color: var(--accent-bright); }
.profile-banner-actions .follow-btn.active { border-color: var(--accent-bright); color: var(--accent-bright); background: var(--bg); }

.forum-toolbar { margin: 18px 0; display: flex; justify-content: flex-end; gap: 10px; }

.post-thread-picker { position: relative; }
.post-thread-picker summary { list-style: none; cursor: pointer; }
.post-thread-picker summary::-webkit-details-marker { display: none; }
.post-thread-picker-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  max-width: calc(100vw - 16px);
  max-height: 400px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  z-index: 20;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.post-thread-picker-label {
  margin: 2px 8px 8px;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.post-thread-picker-section {
  margin: 10px 8px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.post-thread-picker-section:first-of-type { margin-top: 2px; }

/* ---------- New posts page: pagination + filter bars ---------- */
.new-posts-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.82rem;
}
.page-link:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.page-link.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.page-ellipsis { color: var(--text-dim); padding: 0 4px; font-size: 0.82rem; }


/* ---------- Two-column layout ---------- */
.forum-layout { display: flex; gap: 24px; align-items: flex-start; }
.forum-main { flex: 1; min-width: 0; }
.forum-sidebar { width: 280px; flex-shrink: 0; }

/* ---------- Section blocks ---------- */
.section-block { margin-bottom: 26px; }
.section-header { padding: 14px 16px; border: 1px solid var(--border); border-bottom: none; border-radius: 4px 4px 0 0; background: var(--bg-elevated); }
.section-header h2 { margin: 0; font-size: 1.3rem; letter-spacing: 0.01em; }
.section-header p { margin: 4px 0 0; color: var(--text-dim); font-size: 0.82rem; }

.category-table {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}
.category-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-top: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--text);
}
.category-row:hover { background: var(--bg-row-hover); }
.category-row:first-child { border-top: none; }
.category-icon { font-size: 1.5rem; width: 32px; text-align: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.category-icon-img { width: 26px; height: 26px; object-fit: contain; }
.category-info { flex: 1; min-width: 0; }
.category-info h3 { margin: 0 0 2px; font-size: 1.1rem; font-weight: 600; color: var(--text-heading); }
.category-info p { margin: 0; color: var(--text-dim); font-size: 0.82rem; }

.category-stats { display: flex; gap: 18px; flex-shrink: 0; text-align: center; }
.category-stats .stat-num { display: block; font-weight: 600; font-size: 0.95rem; }
.category-stats .stat-label { display: block; color: var(--text-dim); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }

.category-lastpost { width: 210px; flex-shrink: 0; font-size: 0.8rem; color: var(--text-dim); text-align: right; }
.category-lastpost .lp-title { color: var(--text); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The homepage's last-post avatar is a mobile-only addition (shown next
   to the username in that compact right-aligned block) - hidden here by
   default so it doesn't render at native, unstyled (and huge) image size
   on desktop, where this avatar was never part of the design. */
.lp-avatar { display: none; }
.category-lastpost .lp-meta { margin: 0; }

/* Subforum cards on a parent category's page also show a last-post avatar. */
.subforum-table { margin: 20px 0; }
.subforum-table .category-lastpost { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.subforum-table .category-lastpost > div { min-width: 0; }

/* ---------- Anonymous subforum: generic identity everywhere ---------- */
.anon-avatar { background: var(--bg-row-hover); cursor: default; font-size: 1.1rem; }
.anon-avatar[data-username] { cursor: default; }

/* ---------- VIP-gated subforum ---------- */
.vip-gate {
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 20px 0;
}
.vip-gate-icon { font-size: 2rem; margin-bottom: 8px; }
.vip-gate h2 { margin: 0 0 8px; }
.vip-gate .subtitle { max-width: 420px; margin: 0 auto; }
.vip-badge {
  display: inline-block;
  margin-left: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  vertical-align: middle;
}

/* ---------- Sidebar ---------- */
.sidebar-block { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 14px; margin-bottom: 16px; }
.sidebar-block h3 { margin: 0 0 10px; font-size: 1.15rem; }
.sidebar-item { display: block; text-decoration: none; color: var(--text); padding: 9px 0; border-top: 1px solid var(--border-soft); }
.sidebar-item:first-of-type { border-top: none; }
.si-row { display: flex; align-items: center; gap: 8px; }
.si-title { margin: 0; font-size: 0.98rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; color: var(--text-heading); }
.si-meta { margin: 4px 0 0; font-size: 0.84rem; color: var(--text-dim); }
.si-cat { margin: 2px 0 0; font-size: 0.8rem; color: var(--accent-bright); }

/* ---------- Newest members grid (homepage sidebar) ---------- */
.newest-members-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.newest-member-tile {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
}
.newest-member-tile img,
.newest-member-tile span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}

/* ---------- Thread table (category view) ---------- */
.thread-table {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.thread-table-head {
  display: flex;
  padding: 10px 16px;
  color: var(--text-dim);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.thread-table-row {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  border-top: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--text);
}
.thread-table-row:first-child { border-top: none; }
.thread-table-row:hover { background: var(--bg-row-hover); }
.th-title { flex: 1; min-width: 0; }
.th-title strong { color: var(--text-heading); }
.th-title p.thread-meta { margin: 3px 0 0; font-size: 0.78rem; color: var(--text-dim); }
.th-stats { width: 90px; text-align: center; flex-shrink: 0; }
.th-lastpost { width: 200px; text-align: right; flex-shrink: 0; }
.th-lastpost .lp-meta { margin: 0; font-size: 0.78rem; color: var(--text-dim); }

.badge {
  display: inline-block;
  background: var(--accent);
  color: var(--text);
  font-size: 0.63rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-locked { background: var(--danger); color: var(--danger-ink); }
.badge-mod { background: var(--purple); color: var(--accent-ink); }

/* Admin gets its own treatment: animated red gradient, a diagonal shine
   sweeping across, and a few sparkle dots that twinkle on top. All pure
   CSS on the pseudo-elements, no extra markup needed per instance. */
.badge-admin {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff2f2;
  background: linear-gradient(120deg, #5c0000, #d81c1c 35%, #ff5252 50%, #d81c1c 65%, #5c0000);
  background-size: 220% 100%;
  border: none;
  animation: badgeAdminShift 2.6s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(255, 50, 50, 0.65), 0 0 12px rgba(255, 40, 40, 0.25);
}
.badge-admin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.85) 48%, transparent 66%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: badgeAdminSweep 2.2s linear infinite;
  mix-blend-mode: screen;
}
.badge-admin::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, #fff 0, transparent 1.4px),
    radial-gradient(circle, #fff 0, transparent 1.4px),
    radial-gradient(circle, #fff 0, transparent 1.2px);
  background-size: 7px 7px, 6px 6px, 5px 5px;
  background-position: 12% 25%, 60% 70%, 82% 20%;
  background-repeat: no-repeat;
  animation: badgeAdminSparkle 1.6s ease-in-out infinite;
}
@keyframes badgeAdminShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes badgeAdminSweep {
  0% { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
@keyframes badgeAdminSparkle {
  0%, 100% { opacity: 0; }
  15% { opacity: 1; }
  30% { opacity: 0; }
  55% { opacity: 1; }
  70% { opacity: 0; }
  85% { opacity: 0.8; }
}

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; max-width: 500px; }
.form label { font-weight: 600; margin-top: 10px; font-size: 0.9rem; }
.form input, .form textarea {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent-bright); }
.form textarea { resize: vertical; }
.form .btn { align-self: flex-start; margin-top: 14px; }
.hint { color: var(--text-dim); font-size: 0.8rem; margin: 0; }

/* Honeypot field - hidden from sighted users and screen readers, but still
   present in the DOM/tab order for simple bots that fill in every field
   without rendering CSS. position:absolute off-screen (not display:none)
   on purpose, since some bots skip display:none fields specifically. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-errors {
  background: rgba(138, 38, 38, 0.15);
  border: 1px solid var(--border);
  color: #d99a8f;
  padding: 12px 16px;
  border-radius: 4px;
  margin-top: 16px;
}
.form-errors ul { margin: 0; padding-left: 18px; }

/* Buttons/inputs have no blue anywhere in this file (accent is dark red -
   see --accent above) - a blue outline on a button is the browser's own
   default :focus-visible ring, not anything set here. Override it site-wide
   so keyboard/click focus always shows in the site's own accent color. */
.btn:focus-visible, .btn-small:focus-visible, button:focus-visible, .link-button:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

/* ---------- Auth pages (login / register / forgot / reset password) ----------
   Deliberately NOT a centered floating card - every other page on the site
   (events, admin, settings) is a plain left-aligned h1 + .subtitle sitting in
   the normal container flow with flat, shadowless boxes. This just extends
   the existing .form pattern instead of introducing a separate look. */
.auth-forgot-link {
  align-self: flex-start;
  font-size: 0.82rem;
  color: var(--text-dim);
  text-decoration: none;
  margin-top: 6px;
}
.auth-forgot-link:hover { color: var(--accent-bright); }
.auth-switch-plain { color: var(--text-dim); font-size: 0.88rem; margin-top: 18px; }
.auth-switch-plain a { color: var(--accent-bright); text-decoration: none; font-weight: 600; }
.auth-switch-plain a:hover { text-decoration: underline; }
.auth-flash-success {
  background: rgba(47, 227, 138, 0.12);
  color: #2fe38a;
  border: 1px solid rgba(47, 227, 138, 0.3);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin: 16px 0 0;
  max-width: 500px;
}

/* ---------- Thread view ---------- */
.thread-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.thread-title-row h1 { margin: 0; }

.post-list { margin-top: 24px; }
.post { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 12px; scroll-margin-top: 16px; }
.post-author { margin-bottom: 8px; font-weight: 600; }
.post-body p { white-space: pre-wrap; margin: 0; }
.post-signature {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-dim);
  font-size: 0.85rem;
}
.post-signature p { white-space: pre-wrap; margin: 0; }
@media (max-width: 700px) {
  /* View-only: signatures still work exactly the same in Settings >
     Signature (that page isn't touched by this), they just don't render
     under every post on a phone screen where they mostly just add scroll. */
  .post-signature { display: none; }

  /* post-header-row is "time" left / a whole row of controls (New badge,
     Watch button, Thread owner badge, share, bookmark, post number)
     right, justified with space-between. On a phone that right-hand
     group doesn't fit on one line and wraps beneath "time" - fine in
     principle, except .post-watch-btn kept its full desktop padding and
     font-size, so it wrapped onto its own line as an oversized pill
     that looked broken next to everything else. Let the whole row wrap
     properly and shrink the watch button to match the other controls. */
  .post-header-row { flex-wrap: wrap; row-gap: 8px; }
  .post-header-right { flex-wrap: wrap; row-gap: 8px; }
  .post-watch-btn { padding: 3px 8px; font-size: 0.72rem; }
}
.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-dim);
  font-size: 0.78rem;
}

/* Post card: profile-card sidebar + main content, replica layout */
.post-grid { display: flex; align-items: stretch; }

.post-sidebar {
  width: 150px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.post-sidebar-avatar-link { display: block; }
.post-sidebar-avatar {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  object-fit: cover;
  font-size: 1.7rem;
}
.post-sidebar-username {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  color: var(--text-heading);
  text-decoration: none;
  font-size: 0.95rem;
}
.post-sidebar-username:hover { color: var(--accent-bright); }
.post-sidebar-title { color: var(--text-dim); font-size: 0.78rem; margin-top: 2px; }
.post-sidebar .badge-mod { margin-top: 4px; margin-right: 0; }

.post-sidebar-stats { margin-top: 14px; width: 100%; display: flex; flex-direction: column; gap: 4px; }
.post-sidebar-stat {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--text-dim);
}
.post-sidebar-stat span:first-child { text-align: left; }
.post-sidebar-stat span:last-child { color: var(--text); text-align: right; }

.post-main { flex: 1; min-width: 0; padding: 14px 18px 16px; }

.post-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.post-time { color: var(--text-dim); font-size: 0.8rem; }
.post-header-right { display: flex; align-items: center; gap: 8px; }
.post-number { color: var(--text-dim); font-size: 0.82rem; margin-left: 2px; }

.badge-new { background: #3a6ea5; color: #eaf1fa; }
.badge-owner { background: var(--bg); border: 1px solid var(--border); color: var(--text); text-transform: none; letter-spacing: 0; }

.icon-btn-plain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
}
.icon-btn-plain:hover { background: var(--bg-row-hover); color: var(--text); }
.icon-btn-plain.active { color: var(--accent-bright); }

.post-actions { display: flex; align-items: center; gap: 22px; }
.post-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 0.78rem;
  white-space: nowrap;
}
.post-action-icon { font-size: 0.9rem; line-height: 1; display: inline-flex; align-items: center; }
.post-action-icon-img { width: 0.95em; height: 0.95em; object-fit: contain; opacity: 0.85; vertical-align: -0.1em; }
.post-action-btn.active .post-action-icon-img, button.post-action-btn:hover .post-action-icon-img, a.post-action-btn:hover .post-action-icon-img { opacity: 1; }
button.post-action-btn { background: none; border: none; cursor: pointer; font-family: var(--font-body); padding: 0; }
button.post-action-btn:hover, a.post-action-btn:hover { color: var(--accent-bright); }
.post-action-btn.active { color: var(--accent-bright); }
.post-action-disabled { opacity: 0.5; cursor: default; }
.post-reported-label { color: var(--text-dim); font-style: italic; }

.post-reactions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.post-reactions-icon { font-size: 0.9rem; display: inline-flex; align-items: center; }
.post-reactions-icon-img { width: 0.9em; height: 0.9em; object-fit: contain; opacity: 0.85; vertical-align: -0.1em; }

@media (max-width: 640px) {
  .post-grid { flex-direction: column; }
  .post-sidebar {
    width: 100%;
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
    gap: 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
  }
  .post-sidebar-avatar { width: 48px; height: 48px; font-size: 1.2rem; }
  .post-sidebar-stats { display: none; }
  .post-sidebar-username { margin-top: 0; }
  .post-sidebar { padding: 10px 12px; }
  .post-main { padding: 12px 14px 14px; }

  /* Like / Rep / Gift / Reply / Edit / Delete can add up to more than a
     phone's width fits on one line - wrap instead of pushing the post
     wider than the screen. */
  .post-actions { flex-wrap: wrap; gap: 14px; row-gap: 8px; }
}
.mod-tools { margin: 12px 0; display: flex; gap: 8px; }
.inline-form { display: inline-block; }
.link-button.danger { color: var(--danger); }

.empty-state { color: var(--text-dim); text-align: center; font-size: 1.25rem; margin: 32px 0; }

/* ---------- Admin ---------- */
.admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); margin-top: 16px; flex-wrap: wrap; }
.admin-subtabs { border-bottom: none; margin-top: 8px; }
.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--text); border-bottom-color: var(--accent-bright); }
.admin-tab-count {
  background: var(--danger);
  color: var(--danger-ink);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  line-height: 1.5;
}
.admin-search { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.admin-report-excerpt { color: var(--text-dim); font-size: 0.82rem; margin-top: 4px; white-space: normal; max-width: 480px; }

.admin-hof-add-topic { margin: 16px 0 24px; }
.admin-hof-add-topic summary, .admin-hof-add-guide summary { list-style: none; cursor: pointer; display: inline-block; }
.admin-hof-add-topic summary::-webkit-details-marker, .admin-hof-add-guide summary::-webkit-details-marker { display: none; }
.admin-hof-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
  margin-top: 10px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.admin-hof-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--text-dim); }
.admin-hof-form input, .admin-hof-form textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
}
.admin-hof-topic { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-soft); }
.admin-hof-topic-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-hof-topic-head h2 { margin: 0; }
.admin-hof-topic-slug { color: var(--text-dim); font-weight: 400; font-size: 0.8rem; }
.admin-hof-guide {
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
}
.admin-hof-guide summary { cursor: pointer; font-weight: 600; }
.admin-hof-add-guide { margin-top: 12px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 20px; }
.admin-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9rem; margin-top: 0; }
.admin-table th, .admin-table td { border-bottom: 1px solid var(--border-soft); padding: 10px; text-align: left; white-space: nowrap; }
.admin-table td:nth-child(2) { white-space: normal; } /* email column can still wrap */
.admin-table:has(.admin-report-excerpt) td:first-child { white-space: normal; }
.admin-table td:last-child { white-space: normal; }
.reason-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-right: 6px;
}
.reason-input-narrow { width: 80px; margin-right: 6px; }
.admin-subtext { color: var(--text-dim); font-size: 0.78rem; }
.admin-actions-stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 6px 0; }
.admin-actions-stack .inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }

/* ---------- Admin table: compact row hover + status pills ---------- */
.admin-table-compact tbody tr:hover { background: var(--bg-elevated); }
.status-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.status-pill-active { background: rgba(80, 200, 120, 0.15); color: #5fd88a; }
.status-pill-banned { background: rgba(220, 70, 70, 0.15); color: #ff8b8b; }
.status-pill-vip { background: rgba(230, 180, 60, 0.18); color: #f0c664; }
.status-pill-neutral { background: var(--bg-elevated); color: var(--text-dim); }

/* ---------- Admin: per-user detail page ---------- */
.admin-detail-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.admin-detail-header h1 { margin: 0; }
.admin-detail-meta { color: var(--text-dim); font-size: 0.88rem; margin: 4px 0 20px; }
.admin-detail-meta span { margin-right: 14px; }
.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.admin-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 16px;
}
.admin-card h2 { margin: 0 0 4px; font-size: 1rem; }
.admin-card-sub { color: var(--text-dim); font-size: 0.78rem; margin: 0 0 12px; }
.admin-card .btn-small { margin-top: 4px; }
.admin-card-form { display: flex; flex-direction: column; gap: 8px; }
.admin-card-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-card-form input, .admin-card-form select {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
}
.admin-badge-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.admin-badge-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-badge-chip form { display: inline; }
.admin-badge-chip button {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}
.admin-badge-chip button:hover { color: var(--danger); }
.admin-warning-row { border-top: 1px solid var(--border-soft); padding: 8px 0; font-size: 0.85rem; }
.admin-warning-row:first-child { border-top: none; padding-top: 0; }
.admin-warning-meta { color: var(--text-dim); font-size: 0.76rem; margin-top: 2px; }
.admin-quick-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Thread picker modal (admin HOF guide linking) ---------- */
.thread-picker-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.thread-picker-selected { font-size: 0.8rem; color: var(--text-dim); }
.thread-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.thread-picker-overlay[hidden] { display: none; }
.thread-picker-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.thread-picker-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.thread-picker-modal-head h3 { margin: 0; font-size: 1rem; }
.thread-picker-close { background: none; border: none; color: var(--text-dim); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.thread-picker-close:hover { color: var(--text); }
.thread-picker-search { width: 100%; margin-bottom: 10px; box-sizing: border-box; }
.thread-picker-list { overflow-y: auto; flex: 1; }
.thread-picker-section { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin: 12px 0 4px; }
.thread-picker-section:first-child { margin-top: 0; }
.thread-picker-category { font-size: 0.85rem; font-weight: 600; margin: 8px 0 2px; }
.thread-picker-thread {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.82rem;
  cursor: pointer;
}
.thread-picker-thread:hover { background: var(--bg-surface); }
.thread-picker-empty { color: var(--text-dim); font-size: 0.85rem; padding: 12px 4px; }

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 20px 0;
  text-align: center;
  font-style: italic;
}
.site-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  font-style: normal;
}
.site-footer-links a {
  color: var(--text-dim);
  font-size: 0.78rem;
  text-decoration: none;
  opacity: 0.7;
}
.site-footer-links a:hover { opacity: 1; text-decoration: underline; }

/* ---------- BBCode guide page ---------- */
/* Reuses .post-body.rich-content so its <pre><code>/details/table/heading
   styling is identical to how the same markup looks in a real post -
   this page's content is genuinely rendered through the same parser. */
.bbcode-guide-content {
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- Legal pages (Terms/Privacy/Cookies) ---------- */
.legal-page {
  max-width: 760px;
  color: var(--text);
  line-height: 1.6;
}
.legal-page h2 {
  color: var(--text-heading);
  font-size: 1.1rem;
  margin: 26px 0 8px;
}
.legal-page h2:first-of-type { margin-top: 10px; }
.legal-page p { margin: 0 0 12px; color: var(--text-dim); }
.legal-page ul, .legal-page ol { margin: 0 0 12px; padding-left: 22px; color: var(--text-dim); }
.legal-page li { margin-bottom: 4px; }
.legal-page a { color: var(--accent-bright); }
.legal-cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 16px;
  font-size: 0.9rem;
}
.legal-cookie-table th, .legal-cookie-table td {
  border: 1px solid var(--border-soft);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.legal-cookie-table th {
  background: var(--bg-elevated);
  color: var(--text-heading);
  white-space: nowrap;
}
.legal-cookie-table td { color: var(--text-dim); }

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
  /* Same align-items:flex-start-becomes-shrink-to-fit issue as
     .profile-layout below - restore full-width stretching now that this
     is a column, not a row. */
  .forum-layout { flex-direction: column; align-items: stretch; }
  .forum-sidebar { width: 100%; }
  .category-lastpost, .th-lastpost { display: none; }
}
@media (max-width: 700px) {
  .category-row { padding: 11px 12px; gap: 10px; }
  .category-icon { width: 26px; font-size: 1.3rem; }
  .section-header { padding: 11px 12px; }
  .section-header h2 { font-size: 1.15rem; }

  /* The Threads/Messages count column was eating a big fixed chunk of an
     already-narrow row, squeezing the subforum description into a sliver
     that wrapped into a cramped, ragged block - drop the counts here (the
     numbers aren't the point of this list on a phone) and clamp the
     description itself to 2 tidy lines instead of wrapping indefinitely. */
  .category-stats { display: none; }
  .category-info h3 { font-size: 1rem; }
  .category-info p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.4;
  }

  /* Homepage subforum rows only (.home-category-row) - description stays
     (clamped by the rule above like everywhere else), and the latest-reply
     avatar/username/time sits on the right edge of the row. .category-info
     keeps flex:1 from the base .category-row rule, so it eats the middle
     space and naturally pushes this block to the right - no need to
     re-lay-out the whole row for it. */
  .home-category-row .category-lastpost {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    width: auto;
    max-width: 150px;
    flex-shrink: 0;
    text-align: right;
  }
  /* Which thread the latest reply landed in, squeezed onto one line and
     truncated with an ellipsis rather than wrapping or getting dropped -
     same treatment the desktop version already uses. */
  .home-category-row .lp-title {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 0.72rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .home-category-row .lp-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.3;
  }
  .home-category-row .lp-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.64rem; flex-shrink: 0; object-fit: cover; }
  .home-category-row .lp-text { text-align: right; }
}

/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

/* ================= Rich text editor & post-thread page ================= */
.post-thread-form { margin-top: 20px; }
.post-thread-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.post-title-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.prefix-select {
  background: var(--bg-row-hover);
  color: var(--text);
  border: none;
  border-right: 1px solid var(--border);
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
}
.prefix-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: middle;
}
.title-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  padding: 18px 20px;
  font-family: var(--font-body);
}
.title-input:focus { outline: none; }
.title-input::placeholder { color: var(--text-dim); }

@media (max-width: 640px) {
  .post-title-row { flex-wrap: wrap; }
  .title-input { flex: 1 1 180px; min-width: 0; font-size: 1.1rem; padding: 14px 16px; }
  .collab-invite-dropdown { flex: 1 1 100%; padding: 8px 16px 12px; justify-content: flex-end; border-top: 1px solid var(--border-soft); }
}

/* ---------- Thread collaboration: invite picker ---------- */
.collab-invite-dropdown { position: relative; display: flex; align-items: center; padding: 0 14px; }
.collab-invite-dropdown summary { list-style: none; cursor: pointer; }
.collab-invite-dropdown summary::-webkit-details-marker { display: none; }
.collab-invite-btn { white-space: nowrap; }
.collab-invite-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 16px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.collab-invite-hint { margin: 0 0 10px; font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }

/* ---------- Gift coins ---------- */
.gift-coins-dropdown { position: relative; display: inline-flex; align-items: center; }
.gift-coins-dropdown summary { list-style: none; cursor: pointer; }
.gift-coins-dropdown summary::-webkit-details-marker { display: none; }
.gift-coins-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  max-width: calc(100vw - 16px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gift-coins-panel label { font-size: 0.78rem; color: var(--text-dim); }
.gift-coins-panel input[type="number"] {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}

/* ---------- Showcase badge ---------- */
/* The self-only picker button that sits right next to the username on a
   profile page (empty dashed outline if nothing picked yet, filled +
   rarity-colored once a badge is chosen). Only isOwnProfile ever sees
   this control at all. */
.showcase-badge-picker { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.35em; }
.showcase-badge-picker summary { list-style: none; cursor: pointer; }
.showcase-badge-picker summary::-webkit-details-marker { display: none; }
.showcase-badge-slot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px dashed rgba(224, 176, 90, 0.4);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(224, 176, 90, 0.08), transparent 70%);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.showcase-badge-slot-btn:hover { border-color: rgba(224, 176, 90, 0.8); transform: scale(1.05); }
.showcase-badge-slot-btn.filled { border-style: solid; }
.showcase-badge-slot-btn img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.showcase-badge-picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 260px;
  max-width: calc(100vw - 16px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.showcase-badge-hint { margin: 0; font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }
.showcase-badge-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  /* Without this, scrolling to the top/bottom of this list hands the
     leftover scroll off to the page underneath instead of just stopping -
     that's what made scrolling the dropdown feel like it was scrolling
     the whole page. */
  overscroll-behavior: contain;
}
.showcase-badge-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}
.showcase-badge-option:hover { background: var(--bg); }
.showcase-badge-option input { margin: 0; }
.showcase-badge-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.85em;
}
.showcase-badge-option-icon.rarity-common,
.showcase-badge-option-icon.rarity-uncommon,
.showcase-badge-option-icon.rarity-rare,
.showcase-badge-option-icon.rarity-epic,
.showcase-badge-option-icon.rarity-legendary,
.showcase-badge-option-icon.rarity-mythic { border: 1px solid; }
.showcase-badge-option-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* The inline badge injected next to every rendered username site-wide by
   /js/showcaseBadge.js. Sized to sit comfortably next to normal text. */
.showcase-badge-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.3em;
  border: 1px solid;
  border-radius: 50%;
  vertical-align: middle;
  text-decoration: none;
  font-size: 0.85em;
  line-height: 1;
}
.showcase-badge-inline img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.showcase-badge-inline { cursor: pointer; }
.showcase-badge-nowrap { display: inline-flex; align-items: center; white-space: nowrap; max-width: 100%; }
.showcase-badge-nowrap > * { min-width: 0; }
.showcase-badge-nowrap > a[href^="/u/"],
.showcase-badge-nowrap > span,
.showcase-badge-nowrap > strong { overflow: hidden; text-overflow: ellipsis; }

/* Generic [data-tooltip] bubble - see /js/main.js. Reused for the
   showcase-badge description popup on hover (desktop) / tap (mobile). */
.kz-tooltip-bubble {
  position: absolute;
  z-index: 250;
  max-width: 240px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  padding: 8px 10px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  pointer-events: none;
}
.kz-tooltip-bubble.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.collab-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.collab-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 0.78rem;
}
.collab-chip em { color: var(--text-dim); font-style: normal; font-size: 0.72rem; }
.collab-chip-declined { opacity: 0.5; text-decoration: line-through; }
.collab-chip-new { border-color: var(--accent-bright); }
.collab-chip-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
}
.collab-chip-remove:hover { color: var(--danger); }
.collab-search-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 7px 10px;
  font-size: 0.85rem;
  font-family: var(--font-body);
}
.collab-search-results {
  display: none;
  margin-top: 4px;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}
.collab-search-option { padding: 7px 10px; font-size: 0.82rem; cursor: pointer; }
.collab-search-option:hover { background: var(--bg-row-hover); }
.collab-search-empty { padding: 7px 10px; font-size: 0.8rem; color: var(--text-dim); }
.collab-invite-slots-left { margin: 8px 0 0; font-size: 0.72rem; color: var(--text-dim); }

.collab-thread-authors { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.collab-thread-authors-label { font-size: 0.78rem; color: var(--text-dim); }
.collab-thread-author-avatar { width: 22px; height: 22px; border-radius: 4px; font-size: 0.7rem; }
.collab-thread-author-link { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; }

.draft-row { align-items: center; justify-content: space-between; gap: 12px; }
.draft-row-title-text { color: var(--text-dim); }
.draft-locked-label { color: var(--danger); }

.collab-invite-actions { display: flex; gap: 8px; margin-top: 8px; }
.collab-invite-status { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-dim); }

/* ---------- Events (competitions) - deliberately its own look ---------- */
.events-hero {
  background: linear-gradient(135deg, #3a1616 0%, #1c0d0d 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 24px;
  margin-bottom: 20px;
}
.events-hero h1 { margin: 0 0 6px; }
.events-hero .subtitle { margin: 0; max-width: 640px; }

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}
@media (max-width: 400px) {
  .events-grid { grid-template-columns: 1fr; }
}

.event-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.event-card:hover {
  border-color: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.event-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright), var(--accent));
}

.event-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.event-kind-badge {
  display: inline-block;
  background: rgba(178, 52, 52, 0.16);
  color: var(--accent-bright);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
}
.event-deadline { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; }
.event-deadline-ended { color: var(--danger); }

.event-card-title { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.3; }
.event-card-desc { margin: 0 0 18px; color: var(--text-dim); font-size: 0.88rem; line-height: 1.5; }

.event-card .empty-state {
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px dashed var(--border-soft);
  border-radius: 8px;
  padding: 14px;
  margin: 0 0 4px;
}

.event-candidates { display: flex; flex-direction: column; gap: 14px; }
.event-candidate {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 12px;
  transition: border-color 0.15s ease;
}
.event-candidate:hover { border-color: var(--border); }
.event-candidate-winner { border-color: var(--accent-bright); box-shadow: 0 0 0 1px var(--accent-bright) inset; }
.event-candidate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.event-candidate-identity { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); min-width: 0; }
.event-candidate-name { font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-winner-tag {
  display: inline-block;
  margin-left: 6px;
  background: var(--accent-bright);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  vertical-align: middle;
}
.event-vote-count { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; }
.event-candidate-note { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-dim); font-style: italic; }
.event-vote-bar-track { margin-top: 8px; height: 6px; border-radius: 4px; background: var(--border-soft); overflow: hidden; }
.event-vote-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  border-radius: 4px;
  transition: width 0.4s ease;
}
.event-vote-btn { margin-top: 10px; }
.event-vote-btn.active { border-color: var(--accent-bright); color: var(--accent-bright); background: var(--bg-elevated); }
.event-remove-candidate { margin-top: 8px; font-size: 0.75rem; color: var(--text-dim); }
.event-remove-candidate:hover { color: var(--danger); }

.event-total-votes { margin: 12px 0 0; font-size: 0.78rem; color: var(--text-dim); }
.event-vote-gate {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
  background: rgba(178, 52, 52, 0.08);
  border: 1px solid rgba(178, 52, 52, 0.25);
  border-radius: 6px;
  padding: 8px 12px;
}
.event-vote-gate a { color: var(--accent-bright); }

.event-nominate { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.event-nominate summary { list-style: none; cursor: pointer; }
.event-nominate summary::-webkit-details-marker { display: none; }
.event-nominate-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.event-nominate-form input[type="text"] {
  flex: 1;
  min-width: 120px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.82rem;
  font-family: var(--font-body);
}

/* ---------- Featured posts (profile sidebar) ---------- */
.featured-slot-wrap { position: relative; }
.featured-slot-wrap:first-of-type .featured-slot-editor { border-top: none; }
.featured-slot-unfeature-form { position: absolute; top: 8px; right: 0; margin: 0; }
.featured-slot-unfeature-btn {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.featured-slot-wrap:hover .featured-slot-unfeature-btn { opacity: 1; }
.featured-slot-unfeature-btn:hover { background: var(--danger, #e03131); color: #fff; }
.featured-slot-editor { border-top: 1px solid var(--border-soft); }
.featured-slot-editor:first-of-type { border-top: none; }
.featured-slot-summary { list-style: none; cursor: pointer; }
.featured-slot-summary::-webkit-details-marker { display: none; }
.featured-slot-filled { padding: 0; border-top: none; }
.featured-slot-empty {
  padding: 9px 0;
  color: var(--text-dim);
  font-size: 0.88rem;
  border-top: none;
}
.featured-slot-summary:hover .featured-slot-empty,
.featured-slot-summary:hover .si-title { color: var(--accent-bright); }
.featured-slot-form { display: flex; gap: 6px; padding: 8px 0 10px; }
.featured-slot-form select {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 5px 6px;
  font-size: 0.8rem;
  font-family: var(--font-body);
}

.post-tabs { display: flex; border-bottom: 1px solid var(--border); }
.post-tab {
  padding: 12px 20px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dim);
  cursor: default;
}
.post-tab.active { color: var(--text); border-bottom: 2px solid var(--accent-bright); }
.post-tab.disabled { opacity: 0.45; cursor: not-allowed; }

.kaizen-editor { display: flex; flex-direction: column; }
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-row-hover);
}
.editor-toolbar button {
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-body);
}
.editor-toolbar button:hover { background: var(--bg-elevated); }
.editor-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.editor-font-select, .editor-size-select {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.9rem;
  font-family: var(--font-body);
}
.editor-color-input {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  padding: 2px;
  cursor: pointer;
}
.editor-file-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  border: none;
  background: none;
  font-family: var(--font-body);
}
.editor-file-btn:hover { background: var(--bg-elevated); }
.editor-icon-btn { gap: 6px; }
.editor-icon-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.editor-icon-btn .editor-voice-btn-label { font-size: 0.85rem; }
.editor-icon-btn .editor-voice-btn-label:empty { display: none; }
.editor-voice-btn.recording {
  background: var(--accent);
  color: #fff;
  animation: kz-voice-pulse 1.4s ease-in-out infinite;
}
@keyframes kz-voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
/* ================= Voice notes ================= */
.kz-voice-note {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  max-width: 340px;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0;
}
.kz-voice-note-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.kz-voice-note audio,
audio {
  width: 100%;
  max-width: 320px;
  height: 36px;
  /* Chromium/WebKit theme their native controls off this - dark scrubber
     track, accent-colored play button and progress fill instead of the
     default light-grey OS player bar. */
  color-scheme: dark;
  accent-color: var(--accent-bright);
  border-radius: 8px;
}

.editor-surface-wrap { position: relative; }
.editor-surface {
  min-height: 420px;
  padding: 20px;
  font-size: 1.05rem;
  line-height: 1.7;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  outline: none;
}
@media (max-width: 700px) {
  .editor-toolbar { padding: 8px 10px; }
  .editor-surface { padding: 14px; min-height: 260px; }
}
.editor-surface:empty::before {
  content: attr(data-placeholder);
  color: var(--text-dim);
}

/* The legacy execCommand font-size scale (1-7) maps to fixed browser
   defaults that are hard to control - override the two big sizes so
   "Large" and "Huge" are actually dramatic, both while typing and once
   the post is published. */
.editor-surface font[size="5"], .rich-content font[size="5"] { font-size: 1.9em; }
.editor-surface font[size="7"], .rich-content font[size="7"] { font-size: 3em; }
.editor-mention-box {
  display: none;
  position: absolute;
  z-index: 30;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 160px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.mention-option { padding: 8px 12px; cursor: pointer; font-size: 0.9rem; }
.mention-option:hover { background: var(--bg-row-hover); }

.attach-row { padding: 12px 20px; border-top: 1px solid var(--border); }
.attach-files-btn { color: var(--text-dim); font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.attach-files-btn:hover { color: var(--text); }
.attach-files-icon { width: 1em; height: 1em; object-fit: contain; opacity: 0.85; }

.editor-theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
.editor-theme-toggle-icon { width: 1.1em; height: 1.1em; object-fit: contain; opacity: 0.85; }
.editor-theme-toggle:hover .editor-theme-toggle-icon, .editor-theme-toggle.active .editor-theme-toggle-icon { opacity: 1; }

/* Spoiler toolbar button - rich text (.editor-spoiler-btn, an icon-only
   .editor-icon-btn) and BBCode (.editor-bb-spoiler-btn, icon + "Spoiler"
   label) share the same icon sizing. */
.editor-spoiler-btn-icon { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; }
.editor-bb-spoiler-btn { display: inline-flex; align-items: center; gap: 5px; }
.editor-bb-spoiler-btn .editor-spoiler-btn-icon { width: 14px; height: 14px; opacity: 0.85; }

.attach-list { padding: 14px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.attach-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.attach-card {
  position: relative;
  width: 140px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.attach-card-thumb {
  width: 100%;
  height: 90px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.attach-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-card-name {
  padding: 6px 8px;
  font-size: 0.75rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attach-card-insert {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-size: 0.7rem;
  padding: 3px 7px;
  cursor: pointer;
}
.attach-card-insert:hover { background: var(--accent); border-color: var(--accent); }
.attach-card-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-size: 0.7rem;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.attach-card-remove:hover { background: var(--danger); border-color: var(--danger); }
.attach-insert-all {
  align-self: flex-start;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: var(--font-body);
}
.attach-insert-all:hover { border-color: var(--accent-bright); color: var(--accent-bright); }

.post-options-row { display: flex; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--border); }
.post-options-label { color: var(--text-dim); font-size: 0.9rem; flex-shrink: 0; width: 80px; }
.post-options-list { display: flex; flex-direction: column; gap: 6px; }
.post-options-list label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; cursor: pointer; }
.disabled-option { color: var(--text-dim); font-size: 0.9rem; opacity: 0.6; }
.disabled-option.sub-option { margin-left: 20px; }

.post-submit-row { padding: 16px 20px; border-top: 1px solid var(--border); }

/* Mentions and rendered post content */
.mention { color: var(--accent-bright); font-weight: 600; background: rgba(178,52,52,0.12); padding: 1px 4px; border-radius: 3px; cursor: pointer; }
.mention:hover { background: rgba(178,52,52,0.22); }
.rich-content img, .rich-content video { max-width: 100%; border-radius: 4px; margin: 8px 0; }
.rich-content iframe { max-width: 100%; border-radius: 4px; margin: 8px 0; }
.rich-content blockquote { border-left: 3px solid var(--accent); margin: 10px 0; padding: 4px 14px; color: var(--text-dim); }
.post-body blockquote[data-quote-post-id] { cursor: pointer; transition: border-color 0.15s, background 0.15s; border-radius: 0 4px 4px 0; }
.post-body blockquote[data-quote-post-id]:hover { border-color: var(--accent-bright); background: var(--bg-row-hover); }
.quote-jump-hint { display: inline-block; margin-top: 4px; font-size: 0.78rem; color: var(--accent-bright); opacity: 0.85; }
.post-body blockquote[data-quote-post-id]:hover .quote-jump-hint { opacity: 1; text-decoration: underline; }

/* Brief flash on the post scrolled to when a quote is clicked. */
.post-quote-highlight { animation: post-quote-flash 1.6s ease-out; }
@keyframes post-quote-flash {
  0% { box-shadow: inset 0 0 0 2px var(--accent-bright); }
  100% { box-shadow: inset 0 0 0 2px transparent; }
}
.rich-content p { margin: 0 0 10px; }
.rich-content ul, .rich-content ol { margin: 0 0 10px; padding-left: 24px; }

/* Notification badge */
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 4px;
  line-height: 1.2;
  min-width: 14px;
  text-align: center;
}

/* ---- Tasks trophy icon dropdown ---- */
.tasks-icon-wrap { position: relative; }
.tasks-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 16px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  z-index: 20;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.tasks-dropdown-heading {
  margin: 0 0 8px;
  padding: 0 2px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}
.tasks-dropdown-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.tasks-dropdown-empty { margin: 0; padding: 8px 2px; font-size: 0.85rem; color: var(--text-dim); }
.tasks-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--bg-surface);
}
.tasks-dropdown-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success, #2fb86f);
  color: #fff;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tasks-dropdown-title { flex: 1; font-size: 0.85rem; }
.tasks-dropdown-rewards { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tasks-dropdown-reward-coins { font-size: 0.75rem; color: #ffd43b; white-space: nowrap; }
/* ---------- Notification bell dropdown (reuses .tasks-dropdown box) ---------- */
.notif-icon-wrap { position: relative; }
.notif-dropdown { cursor: default; }
.notif-dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: var(--text);
  text-decoration: none;
}
.notif-dropdown-item.unread { box-shadow: inset 2px 0 0 var(--accent-bright); }
.notif-dropdown-item:hover { background: var(--bg-row-hover); }
.notif-dropdown-text { font-size: 0.85rem; line-height: 1.4; }
.notif-dropdown-time { font-size: 0.72rem; color: var(--text-dim); }
.notif-dropdown-viewall {
  display: block;
  text-align: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.8rem;
  color: var(--accent-bright);
  text-decoration: none;
}
.notif-dropdown-viewall:hover { text-decoration: underline; }

.tasks-dropdown-reward-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ================= Redesigned thread list (subforum page) ================= */
.thread-list-v2 {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
}
.thread-row-v2 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-top: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--text);
}
.thread-row-v2:first-child { border-top: none; }
.thread-row-v2:hover { background: var(--bg-row-hover); }

.thread-row-avatar { width: 44px; height: 44px; font-size: 1.2rem; border-radius: 6px; flex-shrink: 0; }

.thread-row-main { flex: 1; min-width: 0; }
.thread-row-title { font-size: 1.1rem; font-weight: 700; color: var(--text-heading); }
.thread-row-meta { margin-top: 3px; font-size: 0.82rem; color: var(--text-dim); }

.thread-row-stats { display: flex; gap: 20px; flex-shrink: 0; text-align: center; }
.thread-row-stats .stat-num { display: block; font-weight: 700; font-size: 0.95rem; }
.thread-row-stats .stat-label { display: block; color: var(--text-dim); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; }

.thread-row-lastpost { display: flex; align-items: center; gap: 8px; width: 170px; flex-shrink: 0; justify-content: flex-end; text-align: right; }
.thread-row-lastpost .lp-meta { margin: 0; font-size: 0.78rem; color: var(--text-dim); }
.lp-author-link { color: var(--accent-bright); text-decoration: none; font-weight: 700; }
.lp-author-link:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .thread-row-stats, .thread-row-lastpost { display: none; }
}
@media (max-width: 700px) {
  .thread-row-v2 { padding: 11px 12px; gap: 10px; }
  .thread-row-avatar { width: 38px; height: 38px; }
  .thread-row-title { font-size: 1rem; }
}

/* ================= Media selection: resize, move, delete in the editor ================= */
.editor-surface img.kz-media-selected,
.editor-surface video.kz-media-selected,
.editor-surface .kz-embed-wrap.kz-media-selected {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
.editor-surface img, .editor-surface video { cursor: pointer; }
.editor-image-toolbar {
  display: none;
  position: absolute;
  z-index: 25;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px;
  gap: 2px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.editor-image-toolbar button {
  background: none;
  border: none;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.95rem;
}
.editor-image-toolbar button:hover { background: var(--bg-row-hover); }
.media-shrink-btn, .media-enlarge-btn { font-weight: 700; }
.media-delete-btn:hover { color: var(--danger); }
/* Voice notes can only be deleted, not resized/aligned/enlarged. */
.editor-image-toolbar.audio-only [data-align],
.editor-image-toolbar.audio-only .media-shrink-btn,
.editor-image-toolbar.audio-only .media-enlarge-btn,
.editor-image-toolbar.audio-only .editor-sep { display: none; }
.editor-surface .kz-voice-note.kz-media-selected {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 10px;
}

.editor-media-resize-handle {
  display: none;
  position: absolute;
  z-index: 26;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--accent-bright);
  border: 2px solid var(--bg-elevated);
  cursor: nwse-resize;
}

/* Embedded YouTube/Vimeo widgets. The overlay catches clicks so the
   iframe (which otherwise swallows them - it's a separate document) can
   be selected/resized/deleted like any other piece of media while
   composing. It's switched off outside the editor so the embed is fully
   interactive once a post is actually published. */
.kz-embed-wrap { position: relative; max-width: 100%; margin: 8px 0; }
.kz-embed-ratio { position: relative; width: 100%; padding-top: 56.25%; }
.kz-embed-ratio iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.kz-embed-overlay { position: absolute; inset: 0; background: transparent; pointer-events: none; }
.editor-surface .kz-embed-overlay { pointer-events: auto; cursor: pointer; }

/* ================= Compact editor (replies) ================= */
.kaizen-editor.editor-compact .editor-surface { min-height: 130px; padding: 12px 16px; font-size: 0.95rem; }
.kaizen-editor.editor-compact .editor-toolbar { padding: 6px 10px; gap: 4px; }
.kaizen-editor.editor-compact .editor-toolbar button { font-size: 0.95rem; padding: 4px 8px; }
.kaizen-editor.editor-compact .editor-font-select,
.kaizen-editor.editor-compact .editor-size-select { font-size: 0.8rem; padding: 4px 6px; }
.kaizen-editor.editor-compact .editor-color-input { width: 26px; height: 26px; }

.reply-form-row { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; }
.reply-form-avatar { width: 64px; height: 64px; font-size: 1.6rem; border-radius: 6px; flex-shrink: 0; }
.reply-form-card { flex: 1; min-width: 0; }

@media (max-width: 700px) {
  /* The avatar next to the compose box eats width that matters a lot
     more on a phone than the identity cue is worth - drop it and let
     the editor use the full row. */
  .reply-form-row { gap: 0; }
  .reply-form-avatar { display: none; }
}

/* ================= Profile page ================= */
.profile-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 14px;
}

.profile-banner {
  position: relative;
  height: 210px;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  background: linear-gradient(160deg, #2a2727, #1c1a1a);
  background-size: cover;
  background-position: center;
}
.profile-banner-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.profile-banner-btn { position: relative; overflow: hidden; }
.profile-banner-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}

/* Mythic badge - a single wide slot in the banner's top-left, sized to
   the width the old 3-slot row used to take up (3 * 58px + 2 * 10px gap).
   Hand-granted by the site owner only; sorting/acquisition UI is TBD. */
.profile-mythic-slot {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  width: 194px;
  height: 58px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  text-align: center;
  cursor: default;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(135deg, #4a3410 0%, #2a1f10 55%, #1a1412 100%);
  border: 2px solid rgba(255, 200, 90, 0.55);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.55),
    inset 0 0 0 3px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
.profile-mythic-slot-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 220, 160, 0.75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Equipped badges - sit on the stats row (Messages / Reputation / Coins),
   pushed to the right as a group, with the "equip" entry point (own
   profile only) immediately to their left. */
.profile-badge-slots-wrap { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.profile-badge-slots {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.profile-badge-slots .badge-slot { width: 52px; height: 52px; }
.profile-badge-slots .badge-slot::after { inset: 7px; }
.badge-slot {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: default;
  position: relative;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(160deg, #3a2c1c 0%, #241b12 60%, #1a1412 100%);
  border: 2px solid rgba(224, 176, 90, 0.4);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.55),
    inset 0 0 0 3px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.12);
}
.badge-slot::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1.5px dashed rgba(224, 176, 90, 0.4);
}

/* Custom tooltip for badges, on top of (not instead of) the native title=
   attribute - title="" never shows on a touchscreen (there's no hover on
   mobile), and every screenshot this whole session has come from a phone,
   so relying on it alone meant the badge name was never actually visible
   to most people looking at it. tabindex="0" on the element (see
   profile.ejs/badge-hall-equip.ejs) makes a tap focus it the same way a
   mouse hover would on desktop, so this works both ways with no JS. */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::before,
[data-tooltip]:focus::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.profile-card-body {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 0 20px 18px;
  margin-top: -110px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 55%, var(--bg-elevated) 100%);
}

.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-card .profile-avatar-large,
.profile-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  border: 4px solid var(--bg-elevated);
  display: block;
  object-fit: cover;
  font-size: 2.2rem;
}
.avatar-edit-form { display: inline-block; }
.avatar-edit-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
}
.avatar-edit-btn:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.avatar-edit-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}

.profile-identity { padding-top: 10px; }
.profile-identity h1 { margin: 0 0 2px; font-size: 1.5rem; }
.profile-custom-title { margin: 0 0 6px; color: var(--accent-bright); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; }
.profile-identity .subtitle { margin: 0; font-size: 0.82rem; }

@media (max-width: 700px) {
  /* .profile-layout is align-items:flex-start for the desktop side-by-side
     layout (so the shorter sidebar doesn't stretch to match main's
     height) - once it stacks to a column here that same flex-start stops
     children stretching to full width instead, so profile posts were
     only as wide as their own content. Restore stretching now that
     "cross axis" means width, not height. */
  .profile-layout { flex-direction: column; align-items: stretch; }
  .profile-sidebar { width: 100%; }

  .profile-banner { height: 150px; }
  .profile-mythic-slot { width: 130px; height: 40px; top: 10px; left: 10px; border-radius: 8px; }
  .profile-mythic-slot-label { font-size: 0.62rem; }
  .profile-banner-actions { top: 10px; right: 10px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 150px); }

  .profile-card-body { margin-top: -70px; gap: 12px; padding: 0 14px 14px; }
  .profile-card .profile-avatar-large,
  .profile-avatar-img { width: 72px; height: 72px; font-size: 1.7rem; }
  .profile-identity h1 { font-size: 1.2rem; }

  .profile-stats-row { gap: 18px; padding: 12px 14px; flex-wrap: wrap; }
  .profile-badge-slots-wrap { flex-basis: 100%; margin-left: 0; flex-direction: column; align-items: center; gap: 10px; }
  /* Empty badge slots are just dashed placeholder circles - dropping them
     on mobile removes most of the clutter that was pushing badges half
     off the screen, without ever hiding a badge someone actually earned.
     Wrapping (instead of the old horizontal scroll) keeps every earned
     badge visible - about 5 comfortably fit per row at this size - and
     centering them keeps a short row from looking lopsided. */
  .profile-badge-slots {
    margin-left: 0;
    max-width: 100%;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .profile-badge-slots .badge-slot:not(.filled) { display: none; }
  .profile-badge-slots .badge-slot { width: 46px; height: 46px; }

  /* Shrink the tab row so it always fits on one line on a phone width
     instead of needing horizontal scrolling to reach the last tab. */
  .profile-tabs { gap: 0; overflow-x: visible; }
  .profile-tabs .tab { padding: 10px 6px; font-size: 0.8rem; flex: 1; text-align: center; }

  .profile-actions-row { padding: 0 14px 14px; flex-wrap: wrap; }
}

.profile-stats-row {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-soft);
}
.profile-stat { display: flex; flex-direction: column; }
.profile-stat-num { font-weight: 700; font-size: 1.1rem; color: var(--text-heading); }
.profile-stat-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }

.profile-actions-row {
  display: flex;
  gap: 10px;
  padding: 0 20px 16px;
}

.profile-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-top: 18px;
  overflow-x: auto;
}

.profile-layout { display: flex; gap: 24px; align-items: flex-start; margin-top: 18px; }
.profile-main { flex: 1; min-width: 0; }
.profile-sidebar { width: 260px; flex-shrink: 0; }

.profile-status-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.profile-status-form input[type="text"] {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.profile-status-form input[type="text"]:focus { outline: none; }
.profile-status-avatar { object-fit: cover; }

.profile-post-list { display: flex; flex-direction: column; gap: 14px; }
.profile-post {
  display: flex;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px 16px;
}
.profile-post-pinned { flex-wrap: wrap; border-color: rgba(224, 176, 90, 0.45); }
.profile-post-pinned-label {
  flex: 0 0 100%;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #dcae5c;
  margin-bottom: 4px;
}
.profile-post-avatar-col { flex-shrink: 0; }
.profile-post-avatar { display: block; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.profile-post-body { flex: 1; min-width: 0; }
.profile-post-meta { margin: 0 0 4px; font-size: 0.8rem; color: var(--text-dim); }
.profile-post-author { color: var(--text-heading); font-weight: 600; text-decoration: none; }
.profile-post-author:hover, .profile-post-comment-author:hover { text-decoration: underline; }
.profile-post-dot { margin: 0 4px; }
.profile-name-banned { text-decoration: line-through; color: var(--text-dim) !important; }
.profile-post-content { margin: 0 0 10px; word-wrap: break-word; }

.post-footer-small { margin-top: 8px; padding-top: 6px; }
.post-footer-small .post-actions { gap: 12px; }
.post-reactions-small { margin-top: 6px; font-size: 0.78rem; }

.profile-post-comments {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-post-comment { display: flex; gap: 10px; font-size: 0.85rem; }
.profile-post-comment-avatar-col { flex-shrink: 0; }
.profile-post-comment-avatar { display: block; width: 28px; height: 28px; border-radius: 6px; object-fit: cover; font-size: 0.78rem; flex-shrink: 0; }
.profile-post-comment-body { flex: 1; min-width: 0; }
.profile-post-comment-author { display: block; color: var(--text-heading); font-weight: 600; text-decoration: none; margin-bottom: 2px; }
.profile-post-comment-content { margin: 0; word-wrap: break-word; }
.profile-post-comment-meta { font-size: 0.72rem; color: var(--text-dim); }

/* ================= Profile: Latest activity tab ================= */
.activity-feed { display: flex; flex-direction: column; }
.activity-item {
  display: flex;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--text);
}
.activity-item:hover { background: var(--bg-row-hover); }
.activity-item:last-child { border-bottom: none; }
.activity-avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 6px; }
.activity-body { min-width: 0; flex: 1; }
.activity-line { margin: 0 0 4px; font-size: 0.88rem; color: var(--text-dim); line-height: 1.4; }
.activity-line strong { color: var(--text-heading); }
.activity-snippet {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-time { margin: 0; font-size: 0.72rem; color: var(--text-dim); }

@media (max-width: 700px) {
  /* A thread title or username with no spaces to break on (or the
     inline prefix-badge chip sitting mid-sentence) could push this wider
     than the phone instead of wrapping - force it to wrap regardless. */
  .activity-item { gap: 10px; padding: 12px 4px; }
  .activity-avatar { width: 32px; height: 32px; }
  .activity-line { overflow-wrap: anywhere; }
  .activity-snippet { white-space: normal; overflow-wrap: anywhere; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ================= Avatar mini-profile card ================= */
.member-avatar[data-username] { cursor: pointer; }

.user-card-popover {
  position: absolute;
  z-index: 200;
  width: 280px;
  max-width: calc(100vw - 16px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  padding: 14px;
  font-size: 0.85rem;
}
.user-card-loading { color: var(--text-dim); text-align: center; padding: 8px 0; }
.user-card-header { display: flex; gap: 10px; margin-bottom: 10px; }
.user-card-avatar { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.user-card-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
}
.user-card-identity { min-width: 0; }
.user-card-username { display: block; font-weight: 700; color: var(--text-heading); text-decoration: none; font-size: 1rem; }
.user-card-username:hover { text-decoration: underline; }
.user-card-bio { margin: 2px 0 0; color: var(--text-dim); font-size: 0.8rem; }
.user-card-meta { margin: 0 0 2px; color: var(--text-dim); font-size: 0.78rem; }
.user-card-stats {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.user-card-stats > div { text-align: center; flex: 1; }
.user-card-stat-num { display: block; font-weight: 700; color: var(--text-heading); }
.user-card-stat-label { display: block; font-size: 0.7rem; color: var(--text-dim); }
.user-card-badge-slots { display: flex; justify-content: space-between; margin-bottom: 10px; }
.user-card-badge-slots .badge-slot { width: 30px; height: 30px; }
.user-card-badge-slots .badge-slot::after { inset: 5px; }
.user-card-view-btn { display: block; text-align: center; }

.profile-reply-toggle { cursor: pointer; }

/* Matches .profile-post-comment's avatar + body row so the box you type
   a reply into lines up under the comments above it instead of sitting
   flush left on its own. */
.profile-post-comment-form { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.profile-post-comment-form input[type="text"] {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 8px 10px;
}
.profile-post-comment-form input[type="text"]:focus { outline: none; border-color: var(--accent-bright); }

.profile-about { display: flex; flex-direction: column; gap: 14px; }
.profile-about p { margin: 0; }
.profile-about strong { color: var(--text-heading); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------- Followers / Following (profile About tab) ---------- */
.profile-follow-section { margin-top: 20px; }
.profile-follow-section h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--accent-bright);
}
.profile-follow-count { color: var(--text-dim); font-weight: 400; margin-left: 4px; }
.profile-follow-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-follow-tile { display: block; border-radius: 4px; overflow: hidden; }
.profile-follow-tile .member-avatar { width: 42px; height: 42px; border-radius: 4px; font-size: 1rem; }
.profile-follow-more { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-dim); }

/* ---------- Profile avatar/banner edit bar ---------- */
.profile-edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 20px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.profile-edit-bar[hidden] { display: none; }
.profile-edit-bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.profile-edit-bar .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.profile-edit-bar .btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #fff; }

/* ---------- Direct messages ---------- */
.dm-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.dm-bubble-row { display: flex; }
.dm-bubble-row.dm-mine { justify-content: flex-end; }
.dm-bubble {
  max-width: 60%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
}
@media (max-width: 600px) {
  .dm-bubble { max-width: 82%; }
}
.dm-mine .dm-bubble { background: var(--accent); border-color: var(--accent); }
.dm-bubble-content { margin: 0; word-wrap: break-word; }
.dm-bubble-meta { margin: 4px 0 0; font-size: 0.7rem; color: var(--text-dim); }
.dm-mine .dm-bubble-meta { color: rgba(255,255,255,0.7); }

.dm-reply-form { display: flex; gap: 10px; margin-top: 18px; }
.dm-reply-form input[type="text"] {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 10px 12px;
}
.dm-reply-form input[type="text"]:focus { outline: none; border-color: var(--accent-bright); }

/* ================= Notable members page ================= */
.members-layout { display: flex; gap: 24px; align-items: flex-start; margin-top: 16px; }
.members-sidebar { width: 260px; flex-shrink: 0; }
.members-main { flex: 1; min-width: 0; }

.members-nav { display: flex; flex-direction: column; }
.members-nav-item {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
}
.members-nav-item:hover { background: var(--bg-row-hover); color: var(--text); }
.members-nav-item.active { background: var(--bg-row-hover); color: var(--text); font-weight: 700; }

.members-legend { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; }
.members-legend li { padding: 3px 0; font-weight: 600; }

/* ---------- Settings ---------- */
.settings-layout { display: flex; gap: 24px; align-items: flex-start; margin-top: 16px; }
.settings-sidebar { width: 220px; flex-shrink: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 14px; }
.settings-sidebar h3 { margin: 0 0 10px; }
.settings-main { flex: 1; min-width: 0; }
.settings-nav { display: flex; flex-direction: column; }
.settings-nav-item {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.92rem;
}
.settings-nav-item:hover { background: var(--bg-row-hover); color: var(--text); }
.settings-nav-item.active { background: var(--bg-row-hover); color: var(--text); font-weight: 700; }

@media (max-width: 720px) {
  .settings-layout { flex-direction: column; align-items: stretch; }
  .settings-sidebar { width: 100%; }
  .settings-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
}

@media (max-width: 560px) {
  .settings-panel { padding: 4px 14px; }
  .settings-row { flex-direction: column; gap: 6px; }
  .settings-label { width: auto; text-align: left; padding-top: 0; }
  .settings-inline-form { position: static; margin-top: 8px; flex-wrap: wrap; box-shadow: none; }
  .settings-inline-form input { min-width: 0; width: 100%; }
  .settings-password-row { flex-wrap: wrap; max-width: 100%; }
  .settings-disabled-input { max-width: 100%; }
}

.settings-flash { padding: 10px 14px; border-radius: 4px; margin-bottom: 14px; font-size: 0.9rem; }
.settings-flash-success { background: rgba(47, 227, 138, 0.12); color: #2fe38a; border: 1px solid rgba(47, 227, 138, 0.3); }
.settings-flash-error { background: rgba(178, 52, 52, 0.12); color: var(--accent-bright); border: 1px solid rgba(178, 52, 52, 0.3); }

.settings-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 4px 20px; }
.settings-row {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
}
.settings-row:last-child { border-bottom: none; }
.settings-label { width: 160px; flex-shrink: 0; padding-top: 6px; color: var(--text-dim); text-align: right; }
.settings-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.settings-static-value { display: inline-block; margin-right: 10px; }
.settings-hint { display: block; font-size: 0.78rem; color: var(--text-dim); }

.settings-inline-change { display: inline-block; position: relative; }
.settings-inline-change summary { list-style: none; cursor: pointer; }
.settings-inline-change summary::-webkit-details-marker { display: none; }
.settings-inline-form {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.settings-inline-form input { min-width: 220px; }
.settings-inline-form .btn-small { align-self: flex-start; }

.settings-checkbox-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.92rem; }
.settings-checkbox-row .settings-hint { flex-basis: 100%; margin-left: 24px; }
.settings-checkbox-nested { margin-left: 24px; }

.settings-disabled-input { max-width: 320px; color: var(--text-dim); cursor: not-allowed; }

.settings-dob-row { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-dob-row select,
.settings-dob-row input { max-width: 140px; }

.settings-avatar-preview { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.settings-avatar-fallback { background: var(--accent); color: #fff; font-weight: 700; }

.settings-panel-block { padding: 16px 20px; margin-bottom: 16px; }
.settings-block-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.settings-block-header h3 { margin: 0; }
.settings-password-row { display: flex; gap: 8px; max-width: 420px; }
.settings-password-input { flex: 1; min-width: 0; }
.settings-password-toggle { flex-shrink: 0; }

/* Glow for the higher post-count tiers (1,500+) - color comes from
   whatever inline `color` is already set via currentColor, so this
   class never needs to know the specific tier color. */
@keyframes tier-glow-pulse {
  0%, 100% { text-shadow: 0 0 4px currentColor, 0 0 8px currentColor; }
  50% { text-shadow: 0 0 11px currentColor, 0 0 20px currentColor; }
}
.tier-glow { animation: tier-glow-pulse 2.2s ease-in-out infinite; }

/* ---------- Overview: 5-panel grid ---------- */
.members-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.members-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
}
.members-panel h3 { margin: 0 0 12px; font-size: 1rem; }
.members-panel-list { display: flex; flex-direction: column; gap: 10px; }
.members-panel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.members-panel-name { flex: 1; font-weight: 700; font-size: 0.9rem; }
.members-panel-value { color: var(--text-dim); font-size: 0.85rem; }
.members-see-more {
  display: block;
  text-align: center;
  margin-top: 14px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
}
.members-see-more:hover { border-color: var(--accent-bright); color: var(--accent-bright); }

/* ---------- Leaderboard / search rows ---------- */
.members-list-rows {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.members-list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--text);
}
.members-list-row:first-child { border-top: none; }
.members-list-row:hover { background: var(--bg-row-hover); }
.members-list-info { flex: 1; min-width: 0; }
.members-list-name { margin: 0; font-weight: 700; }
.staff-wrench { font-size: 0.8rem; }
.members-list-title { margin: 2px 0 0; font-size: 0.85rem; color: var(--text); font-weight: 600; }
.members-list-location { margin: 2px 0 0; font-size: 0.8rem; color: #4dabf7; }
.members-list-stats { margin: 4px 0 0; font-size: 0.78rem; color: var(--text-dim); }
.members-list-value { font-size: 1.3rem; font-weight: 700; color: var(--text-heading); flex-shrink: 0; }

@media (max-width: 800px) {
  .members-layout { flex-direction: column; }
  .members-sidebar { width: 100%; }
  .members-panel-grid { grid-template-columns: 1fr; }
}

/* ================= Editor: mode tabs + extra panels ================= */
.editor-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 8px 14px 0;
  background: var(--bg-row-hover);
}
.editor-mode-tab {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  font-family: var(--font-body);
}
.editor-mode-tab:hover { color: var(--text); background: var(--bg-elevated); }
.editor-mode-tab.active { color: var(--text); background: var(--bg-elevated); }
.editor-mode-tab[data-mode].active { box-shadow: inset 0 -2px 0 var(--accent-bright); }
.editor-panel-toggle.active { color: var(--accent-bright); background: var(--bg-elevated); }
.editor-mode-tabs .editor-sep { align-self: center; }

.editor-toolbar-bbcode { flex-wrap: wrap; }
.editor-bb-color-input { width: 0; height: 0; opacity: 0; position: absolute; }

.editor-bbcode-wrap { position: relative; }
.editor-bbcode-textarea {
  width: 100%;
  min-height: 420px;
  padding: 20px;
  font-size: 0.95rem;
  line-height: 1.7;
  font-family: 'Courier New', Consolas, monospace;
  color: #ffffff;
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  display: block;
}
.kaizen-editor.editor-compact .editor-bbcode-textarea { min-height: 130px; padding: 12px 16px; font-size: 0.9rem; }
.editor-bbcode-guide-link { margin: 0; padding: 6px 20px 12px; font-size: 0.8rem; }
.editor-bbcode-guide-link a { color: var(--accent-bright); text-decoration: none; }
.editor-bbcode-guide-link a:hover { text-decoration: underline; }

.editor-extra-panel {
  border-top: 1px solid var(--border);
  background: var(--bg-row-hover);
  padding: 14px 20px;
}
.editor-panel-hint { margin: 0 0 10px; font-size: 0.8rem; color: var(--text-dim); }

.editor-css-textarea {
  width: 100%;
  min-height: 140px;
  background: var(--bg);
  color: #c8f7c5;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
}

.editor-theme-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.theme-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.theme-swatch:hover { border-color: var(--text-dim); }
.theme-swatch.selected { border-color: var(--accent-bright); box-shadow: 0 0 0 2px rgba(178,52,52,0.3); }
.theme-swatch-none { background: var(--bg-elevated); }

/* ================= Rich content extras: highlight, code, hr ================= */
.rich-content mark, .editor-surface mark { background: none; padding: 1px 3px; border-radius: 2px; }
.rich-content code, .editor-surface code {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.9em;
}
.rich-content pre, .editor-surface pre {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 10px 0;
}
.rich-content pre code, .editor-surface pre code { background: none; border: none; padding: 0; }
.rich-content hr, .editor-surface hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.rich-content details, .editor-surface details {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 8px 14px;
  margin: 10px 0;
}
.rich-content details summary, .editor-surface details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text-heading);
}
.rich-content details[open] summary { margin-bottom: 8px; }
.kz-gif { border-radius: 4px; }

/* [spoiler]/[spoiler=Title] from the BBCode parser, and the matching Rich
   Text toolbar button (editor.js) - both produce the same
   <details class="bb-spoiler"><summary>...</summary><div class="bb-spoiler-content">
   markup. More specific than the generic ".rich-content details" rule
   above (two classes beats one class + one tag), so this fully replaces
   that box look with a small pill-style toggle button instead. The actual
   slide-down-on-open animation is done in JS (see main.js) - a plain CSS
   max-height transition can't run on <details> because the browser removes
   the content from layout (display: none) the instant it closes, before
   any transition would have a chance to play. */
.rich-content details.bb-spoiler, .editor-surface details.bb-spoiler {
  background: none;
  border: none;
  padding: 0;
  margin: 10px 0;
  border-radius: 0;
}
.rich-content details.bb-spoiler > summary, .editor-surface details.bb-spoiler > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  padding: 7px 14px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  user-select: none;
}
.rich-content details.bb-spoiler > summary::-webkit-details-marker,
.editor-surface details.bb-spoiler > summary::-webkit-details-marker {
  display: none;
}
.rich-content details.bb-spoiler > summary::before, .editor-surface details.bb-spoiler > summary::before {
  content: '';
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: url('/images/icons/spoiler.png') center / contain no-repeat;
  opacity: 0.85;
}
.rich-content details.bb-spoiler > summary:hover, .editor-surface details.bb-spoiler > summary:hover {
  border-color: var(--accent-bright);
  color: var(--accent-bright);
}
.rich-content details.bb-spoiler[open] > summary, .editor-surface details.bb-spoiler[open] > summary {
  margin-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.rich-content details.bb-spoiler > .bb-spoiler-content, .editor-surface details.bb-spoiler > .bb-spoiler-content {
  border: 1px solid var(--border-soft);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 12px 14px;
  background: var(--bg);
}
.rich-content details.bb-spoiler > .bb-spoiler-content > :first-child,
.editor-surface details.bb-spoiler > .bb-spoiler-content > :first-child {
  margin-top: 0;
}
.rich-content details.bb-spoiler > .bb-spoiler-content > :last-child,
.editor-surface details.bb-spoiler > .bb-spoiler-content > :last-child {
  margin-bottom: 0;
}

/* [heading=1/2/3] from the BBCode parser (maps to h3/h4/h5) - sized to
   sit clearly above body text without competing with real page headings. */
.rich-content h3, .rich-content h4, .rich-content h5 {
  color: var(--text-heading);
  margin: 14px 0 8px;
  line-height: 1.3;
}
.rich-content h3 { font-size: 1.3em; }
.rich-content h4 { font-size: 1.15em; }
.rich-content h5 { font-size: 1.05em; }

/* [table]/[tr]/[th]/[td] from the BBCode parser. */
.rich-content table.bb-table {
  border-collapse: collapse;
  margin: 10px 0;
  max-width: 100%;
  overflow-x: auto;
  display: block;
}
.rich-content table.bb-table th, .rich-content table.bb-table td {
  border: 1px solid var(--border-soft);
  padding: 6px 12px;
  text-align: left;
}
.rich-content table.bb-table th {
  background: var(--bg);
  color: var(--text-heading);
  font-weight: 700;
}

/* ================= Preset post themes ================= */
/* Full-height gradients that stay within each theme's own color family -
   previously these faded into var(--bg-elevated) after 140px, which made
   every theme look like it turned into the default dark-grey background
   for the rest of the post instead of staying themed all the way down. */
.kz-theme-midnight { background: linear-gradient(180deg, #1b1f3b, #12142a); border-color: #2c3268; }
.kz-theme-ember { background: linear-gradient(180deg, #3b1b1b, #2a1212); border-color: #6b2c2c; }
.kz-theme-forest { background: linear-gradient(180deg, #1b3b24, #122818); border-color: #2c6b3d; }
.kz-theme-royal { background: linear-gradient(180deg, #2a1b3b, #1c1129); border-color: #52326b; }
.kz-theme-neon { background: linear-gradient(180deg, #0d0d0d, #000000); border-color: #2fe38a; }
/* ================= Hall of Fame ================= */
.hof-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 18px;
}
.hof-book {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
}
.hof-book-cover {
  aspect-ratio: 3 / 4;
  border-radius: 4px 8px 8px 4px;
  background: none;
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.hof-book:hover .hof-book-cover { transform: translateY(-4px); border-color: var(--border); }
.hof-book-cover img { width: 100%; height: 100%; object-fit: cover; }
.hof-book-info { padding: 10px 2px 0; }
.hof-book-name { font-weight: 700; color: var(--text-heading, var(--text)); margin: 0; }
.hof-book-desc { font-size: 0.82rem; color: var(--text-dim); margin: 4px 0 0; }
.hof-book-count { font-size: 0.78rem; color: var(--text-dim); margin: 4px 0 0; }

/* ---------- Big book tiles that open in place (hof.ejs) ---------- */
.hof-shelf-big {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px 24px;
  align-items: start;
}
.hof-book-picker {
  grid-column: span 1;
}
.hof-book-picker[open] {
  grid-column: 1 / -1;
}
.hof-book-picker summary { list-style: none; }
.hof-book-picker summary::-webkit-details-marker { display: none; }

.hof-book-big {
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.15s ease;
}
.hof-book-picker[open] .hof-book-big { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; }
.hof-book-picker[open] .hof-book-big .hof-book-cover { width: 160px; flex-shrink: 0; }
.hof-book-picker[open] .hof-book-big .hof-book-info { padding-top: 4px; }
.hof-book-big:hover .hof-book-cover { transform: translateY(-4px); }
.hof-book-picker[open] .hof-book-big:hover .hof-book-cover { transform: none; }

.hof-book-icon { width: 46%; height: 46%; color: var(--text-dim); transition: color 0.15s ease; }
.hof-book:hover .hof-book-icon { color: var(--text); }
.hof-book-icon-open { display: none; }
.hof-book-picker[open] .hof-book-icon-closed { display: none; }
.hof-book-picker[open] .hof-book-icon-open { display: block; }

.hof-book-pages {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .hof-book-pages {
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .hof-book-picker::details-content {
    transition: content-visibility 0.25s allow-discrete, opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    transform: translateY(-6px);
  }
  .hof-book-picker[open]::details-content {
    opacity: 1;
    transform: translateY(0);
  }
}

.hof-guide-list { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.hof-guide-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px 22px;
}
.hof-guide-title { margin: 0 0 10px; font-size: 1.3rem; }
.hof-guide-credit { margin-bottom: 12px; }
.hof-guide-credit-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.hof-guide-credit-link strong { color: var(--text); }
.hof-guide-credit-plain { color: var(--text-dim); font-size: 0.85rem; }
.hof-guide-excerpt { color: var(--text); line-height: 1.55; margin: 0 0 14px; }

/* ================= Badge Hall ================= */
.badge-hall-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }

/* ---------- Rarity colors - shared by the big circles and the legend
   swatches. Mythic matches the existing hand-granted mythic-slot gold. */
.rarity-common {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.14), transparent 60%), linear-gradient(160deg, #4a4a4a 0%, #2b2b2b 60%, #1a1a1a 100%);
  border-color: rgba(160, 160, 160, 0.5);
  color: #c9c9c9;
}
.rarity-uncommon {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.16), transparent 60%), linear-gradient(160deg, #1e4a2c 0%, #14301d 60%, #101f16 100%);
  border-color: rgba(47, 227, 138, 0.55);
  color: #4ade8a;
}
.rarity-rare {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.16), transparent 60%), linear-gradient(160deg, #1a3a5c 0%, #12283f 60%, #0d1c2c 100%);
  border-color: rgba(77, 171, 247, 0.55);
  color: #4dabf7;
}
.rarity-epic {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.16), transparent 60%), linear-gradient(160deg, #3a1e5c 0%, #28143f 60%, #1c0d2c 100%);
  border-color: rgba(199, 125, 255, 0.55);
  color: #c77dff;
}
.rarity-legendary {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.16), transparent 60%), linear-gradient(160deg, #5c1e1e 0%, #3f1414 60%, #2c0d0d 100%);
  border-color: rgba(255, 107, 107, 0.55);
  color: #ff6b6b;
}
.rarity-mythic {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.18), transparent 60%), linear-gradient(135deg, #4a3410 0%, #2a1f10 55%, #1a1412 100%);
  border-color: rgba(255, 200, 90, 0.6);
  color: #ffd97a;
}

.badge-hall-layout { display: flex; gap: 24px; align-items: flex-start; margin-top: 18px; }
.badge-hall-main { flex: 1; min-width: 0; }

.badge-hall-array { display: flex; flex-wrap: wrap; gap: 22px; }
.badge-hall-item {
  display: block;
  width: 130px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  padding: 8px;
  transition: background 0.15s;
}
.badge-hall-item:hover { background: var(--bg-elevated); }
.badge-hall-item:hover .badge-hall-item-name { color: var(--accent-bright); }
.badge-hall-circle {
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border: 2px solid;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 0 0 3px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.12);
}
.badge-hall-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.badge-hall-lock { opacity: 0.6; }

/* Dimmed, not desaturated - the rarity color should still read at a
   glance even for badges you don't own yet. */
.badge-hall-item.not-owned .badge-hall-circle { filter: brightness(0.55); opacity: 0.6; }
.badge-hall-item.not-owned .badge-hall-item-name { color: var(--text-dim); }

.badge-hall-item-bio { margin-top: 8px; }
.badge-hall-item-name { margin: 0; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.badge-hall-owned-tag {
  font-size: 0.62rem;
  font-weight: 700;
  color: #2fe38a;
  border: 1px solid rgba(47, 227, 138, 0.4);
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-hall-item-desc { margin: 4px 0 0; font-size: 0.74rem; color: var(--text-dim); line-height: 1.4; }
.badge-hall-item-owners { margin: 4px 0 0; font-size: 0.7rem; color: var(--text-dim); }

/* ---------- Badge tier legend ---------- */
.badge-tier-legend {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  position: sticky;
  top: 16px;
}
.badge-tier-legend h3 { margin: 0 0 10px; }
.badge-tier-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.88rem; }
.badge-tier-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid; vertical-align: middle; margin-right: 8px; }
.badge-tier-hint { margin: 12px 0 0; font-size: 0.76rem; color: var(--text-dim); line-height: 1.5; }

@media (max-width: 800px) {
  .badge-hall-layout { flex-direction: column; align-items: stretch; }
  .badge-tier-legend { width: 100%; position: static; }
}
@media (max-width: 700px) {
  /* Left-aligned flex-wrap leaves a lopsided gap on the right on a phone
     width (2 badges per row with room left over) - center the rows
     instead so they sit balanced regardless of how many fit per row. */
  .badge-hall-array { justify-content: center; }
}

/* ---------- Badge Hall: equip page ---------- */
.badge-equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.badge-equip-slot-picker { position: relative; }
.badge-equip-slot-picker summary { list-style: none; cursor: pointer; }
.badge-equip-slot-picker summary::-webkit-details-marker { display: none; }

.badge-equip-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 10px;
  min-height: 110px;
  justify-content: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.badge-equip-slot:hover { border-color: rgba(224, 176, 90, 0.6); transform: translateY(-1px); }
.badge-equip-slot-picker[open] .badge-equip-slot { border-color: var(--accent-bright); }

.badge-equip-slot-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px dashed rgba(224, 176, 90, 0.4);
  font-size: 1.2rem;
  color: var(--text-dim);
}
.badge-equip-slot-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.badge-equip-slot.filled .badge-equip-slot-icon { border-style: solid; }

.badge-equip-slot-name { margin: 0; font-size: 0.82rem; font-weight: 600; }
.badge-equip-slot-empty { color: var(--text-dim); font-size: 0.82rem; }

.badge-equip-slot-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  max-width: calc(100vw - 16px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ---------- Badge Hall: single-badge detail page ---------- */
.badge-detail-hero { text-align: center; padding: 30px 16px 26px; }
.badge-detail-circle {
  width: 140px;
  height: 140px;
  font-size: 3rem;
  margin: 0 auto 16px;
}
.badge-detail-hero h1 { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.badge-detail-rarity-tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-detail-desc { max-width: 480px; margin: 0 auto; color: var(--text-dim); line-height: 1.6; }
.badge-detail-owners-heading { margin: 24px 0 4px; }
.badge-detail-earned { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; }

/* ---------- Badge Hall: search bar ---------- */
.badge-hall-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}
.badge-hall-search-bar input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 0.88rem;
  font-family: var(--font-body);
}
.badge-hall-search-bar select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: var(--font-body);
}

/* ---------- Profile: equipped badges in the stats row ---------- */
.profile-badge-slot-btn { display: block; }
.badge-slot.filled { border-style: solid; cursor: default; }
.badge-slot.filled::after { display: none; }
.badge-slot img.badge-slot-icon { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.badge-slot .badge-slot-fallback { font-size: 1.3rem; color: rgba(224, 176, 90, 0.9); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.profile-equip-badges-btn {
  display: inline-flex;
  align-items: center;
  text-align: center;
}
@media (max-width: 700px) {
  .profile-equip-badges-btn { width: 100%; }
}

/* ================= Tasks ================= */
.task-tabs {
  display: flex;
  gap: 4px;
  margin-top: 18px;
  border-bottom: 1px solid var(--border);
}
.task-tab {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.task-tab:hover { color: var(--text); }
.task-tab.active { color: var(--text); border-bottom-color: var(--accent-bright); }

.task-tab-panel { padding-top: 18px; }

.task-list { display: flex; flex-direction: column; gap: 12px; }
.task-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  transition: border-color 0.15s;
}
.task-card:hover { border-color: var(--border-soft); }
.task-card.completed { border-color: rgba(47, 227, 138, 0.4); background: linear-gradient(180deg, rgba(47, 227, 138, 0.06), var(--bg-elevated) 40%); }

.task-card-status {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border-soft);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-card.completed .task-card-status { border-color: #2fe38a; background: rgba(47, 227, 138, 0.15); }
.task-card-check { color: #2fe38a; font-weight: 700; font-size: 0.95rem; }

.task-card-main { flex: 1; min-width: 200px; }
.task-card-title { margin: 0; font-weight: 700; font-size: 1.05rem; }
.task-card.completed .task-card-title { color: #2fe38a; }
.task-card-desc { margin: 4px 0 0; color: var(--text-dim); font-size: 0.88rem; line-height: 1.5; }

.task-card-rewards { display: flex; align-items: center; gap: 18px; flex-shrink: 0; margin-left: auto; }
.task-reward { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; color: var(--text); }
.task-reward-coins {
  background: rgba(255, 212, 59, 0.1);
  border: 1px solid rgba(255, 212, 59, 0.3);
  color: #ffd43b;
  padding: 5px 12px;
  border-radius: 20px;
}
.task-reward-icon { font-size: 1.1rem; }
.task-reward-badge-circle { width: 34px; height: 34px; font-size: 0.9rem; }

@media (max-width: 600px) {
  .task-card { padding: 14px 16px; }
  .task-card-rewards { margin-left: 0; flex-basis: 100%; padding-left: 46px; }
}