:root {
  --bg: #0b1120;
  --surface: #131c2e;
  --surface-2: #1b2740;
  --border: #2a3752;
  --accent: #38bdf8;
  --accent-2: #a78bfa;
  --text: #f1f5f9;
  --muted: #b0c4de;
  --success: #34d399;
  --warning: #facc15;
  --danger: #f87171;
  --radius: 12px;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-reading: 'Lora', Georgia, 'Times New Roman', serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.35);
  --glass-blur: blur(24px) saturate(180%);
  --ease-liquid: cubic-bezier(0.32, 0.72, 0, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; overscroll-behavior-y: none; }
body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 10% -5%, rgba(56, 189, 248, 0.14), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(167, 139, 250, 0.12), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(56, 189, 248, 0.06), transparent 50%);
  pointer-events: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font-family: inherit; font-size: 14px; }

/* ----- Utility rounded classes (pill / circle) ----- */
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 16px; }
.rounded-lg { border-radius: 12px; }
.rounded { border-radius: 8px; }

/* ----- Topbar with search centered, profile right-aligned ----- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11,17,32,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand {
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; color: var(--accent); }

.search-form {
  flex: 1;
  max-width: 480px;
  position: relative;
  margin: 0 auto;
}
.search-form input {
  width: 100%;
  padding: 8px 38px 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.2s;
}
.search-form input:focus {
  outline: none;
  border-color: var(--accent);
}
.search-form button {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 6px 10px;
  cursor: pointer;
}
.search-form button:hover { color: var(--text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Profile Dropdown */
.profile-dropdown {
  position: relative;
}
.profile-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s;
}
.profile-trigger:hover { border-color: var(--accent); }
.profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.profile-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: #04121e;
}
.profile-name {
  font-weight: 500;
  font-size: 14px;
}
.dropdown-arrow {
  color: var(--muted);
}
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 0;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  z-index: 200;
}
.profile-dropdown:hover .dropdown-menu,
.profile-dropdown:focus-within .dropdown-menu {
  display: block;
}
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.dropdown-menu a:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.dropdown-menu hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 6px 12px;
}
.dropdown-menu .text-danger { color: var(--danger); }
.dropdown-menu .badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 9999px;
}

/* ----- App layout: left sidebar, main, right sidebar ----- */
.app-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 24px 100px;
}
.app-layout {
  display: grid;
  grid-template-columns: 84px 1fr 280px;
  gap: 24px;
  align-items: start;
}

/* Left Sidebar */
.left-sidebar {
  position: sticky;
  top: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.left-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 4px;
  width: 100%;
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
  border-radius: 12px;
  gap: 4px;
}
.nav-item svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}
.nav-item span { font-size: 10px; letter-spacing: 0.03em; }
.nav-item:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav-item.active { color: var(--accent); background: rgba(56,189,248,0.08); }
.nav-item-cta {
  margin-top: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04121e;
}
.nav-item-cta:hover { color: #04121e; opacity: 0.9; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* Right Sidebar */
.right-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sidebar-widget {
  background: linear-gradient(180deg, var(--glass-bg-strong), transparent 40%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px -16px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}
.sidebar-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
}
.sidebar-widget h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
.sidebar-widget .muted { font-size: 12px; }

.online-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
}
.online-user .avatar-small {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--surface-2);
  overflow: hidden;
}
.online-user .avatar-small img { width: 100%; height: 100%; object-fit: cover; }
.online-user .username { color: var(--text); }
.online-user .guest { color: var(--muted); font-style: italic; }

.contributors-list { display: flex; flex-direction: column; gap: 4px; }
.contributor-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.contributor-item .name { display: flex; align-items: center; gap: 6px; }
.contributor-item .count { color: var(--muted); font-size: 12px; }

.stat-list { list-style: none; padding: 0; margin: 0; }
.stat-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}
.stat-list li:last-child { border-bottom: none; }
.stat-list .label { color: var(--muted); }
.stat-list .value { font-weight: 600; color: var(--text); }

.announcement-item { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.announcement-item:last-child { border-bottom: none; }
.announcement-item .title { font-weight: 600; font-size: 13px; }
.announcement-item .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ----- Main content: Welcome, Latest (compact), Category Sections ----- */
.welcome-card {
  background: linear-gradient(135deg, rgba(56,189,248,0.10), rgba(167,139,250,0.07));
  border-color: rgba(56,189,248,0.22);
  margin-bottom: 20px;
}
.welcome-card h2 { font-size: 21px; letter-spacing: -0.01em; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
}
.stat {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.stat .value { font-size: 22px; font-weight: 700; color: var(--accent); }
.stat .label { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ----- Latest Discussions – compact strip (desktop) ----- */
.latest-discussions {
  padding: 12px 16px;
  margin-bottom: 20px;
}
.latest-discussions h2 {
  margin: 0 0 8px;
  font-size: 15px;
}
.discussion-card {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.discussion-card:last-child { border-bottom: none; }

/* Top bar: category + stats */
.discussion-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.category-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 9999px;
  background: var(--surface-2);
  color: var(--accent);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.discussion-stats {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

/* Title */
.thread-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 2px 0;
}
.thread-title a { color: var(--text); }
.thread-title a:hover { color: var(--accent); text-decoration: none; }

/* Preview (optional) */
.thread-preview {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  margin: 1px 0;
}

/* Meta row: avatar + name + time */
.thread-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.thread-meta .author-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.thread-meta .author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.thread-meta .author-name { font-weight: 600; color: var(--text); }
.thread-meta .time-ago {
  color: var(--muted);
  white-space: nowrap;
}

/* ----- Category Sections with banner and forum rows ----- */
.category-section {
  margin-bottom: 28px;
}

/* Section Banner with background image */
.section-banner {
  position: relative;
  padding: 28px 24px;
  border-radius: 16px 16px 0 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.section-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,17,32,0.2) 0%, rgba(11,17,32,0.85) 100%);
  z-index: 1;
}
.section-banner .banner-content {
  position: relative;
  z-index: 2;
}
.section-banner .banner-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.section-banner .banner-subtitle {
  font-size: 15px;
  color: var(--muted);
  margin-top: 4px;
}
.section-banner .banner-meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

/* Forum list container (card) */
.section-forums {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

/* Individual forum row */
.forum-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.forum-row:last-child { border-bottom: none; }
.forum-row:hover { background: rgba(255,255,255,0.02); }

.forum-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.forum-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.forum-icon svg {
  width: 24px;
  height: 24px;
}

.forum-info {
  min-width: 0;
}
.forum-info .forum-name {
  font-weight: 600;
  font-size: 16px;
}
.forum-info .forum-name a { color: var(--text); }
.forum-info .forum-name a:hover { color: var(--accent); text-decoration: none; }
.forum-info .forum-desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forum-info .forum-latest {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.forum-info .forum-latest .latest-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.forum-info .forum-latest .latest-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.forum-info .forum-latest .latest-user {
  font-weight: 500;
  color: var(--text);
}
.forum-info .forum-latest .latest-title {
  color: var(--accent);
  text-decoration: underline;
}
.forum-info .forum-latest .latest-time {
  color: var(--muted);
}

.forum-stats {
  text-align: right;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.forum-stats .stat-number {
  font-weight: 600;
  color: var(--text);
}

/* Optional grid layout for sub-forums (2 columns) */
.forum-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 4px 0;
}
.forum-grid-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background 0.15s;
}
.forum-grid-item:hover { background: rgba(255,255,255,0.03); }
.forum-grid-item .grid-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
}
.forum-grid-item .grid-name {
  font-weight: 500;
  font-size: 14px;
}
.forum-grid-item .grid-desc {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
}

/* Badge for locked/private */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.badge-vip { color: var(--accent-2); border-color: var(--accent-2); }
.badge-locked { color: var(--danger); border-color: var(--danger); }

/* ----- Responsive adjustments ----- */
@media (max-width: 1024px) {
  .app-layout { grid-template-columns: 72px 1fr 220px; gap: 16px; }
}
@media (max-width: 820px) {
  .app-layout { grid-template-columns: 1fr; }
  .left-sidebar { display: none; }
  .right-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .bottom-tabbar { display: flex; }
  .app-container { padding-bottom: calc(96px + var(--safe-bottom)); }
  .footer { display: none; }
  .topbar-inner { flex-wrap: wrap; gap: 8px; }
  .search-form { order: 3; flex: 1 0 100%; max-width: 100%; margin: 0; }
  .brand { font-size: 18px; }
  .profile-name { display: none; }
  .right-sidebar { grid-template-columns: 1fr; }
  .forum-row {
    grid-template-columns: 36px 1fr;
    gap: 10px;
    padding: 10px 16px;
  }
  .forum-stats {
    grid-column: 2;
    text-align: left;
    margin-top: 2px;
  }
  .forum-grid-2 { grid-template-columns: 1fr; }
  .section-banner { padding: 20px 16px; min-height: 80px; }
  .section-banner .banner-title { font-size: 20px; }
}

/* ----- Mobile bottom nav (keep as before) ----- */
.bottom-tabbar {
  display: none;
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + var(--safe-bottom));
  z-index: 100;
  background: rgba(20, 28, 46, 0.55);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  padding: 8px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.08) inset;
  animation: liquid-rise 0.5s var(--ease-liquid) both;
}
@keyframes liquid-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.bottom-tabbar::before {
  content: '';
  position: absolute;
  top: 1px; left: 16%; right: 16%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  border-radius: 9999px;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 18px;
  color: rgba(241,245,249,0.55);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  position: relative;
  transition: color 0.3s var(--ease-liquid), transform 0.25s var(--ease-liquid), background 0.3s var(--ease-liquid);
  user-select: none;
}
.tab-item:hover { text-decoration: none; color: var(--text); }
.tab-item:active { transform: scale(0.88); }
.tab-item-active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(56,189,248,0.22), rgba(56,189,248,0.08));
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 12px -4px rgba(56,189,248,0.4);
}
.tab-item-active .tab-icon { color: var(--accent); filter: drop-shadow(0 0 6px rgba(56,189,248,0.5)); }
.tab-icon, .tab-icon-wrap .tab-icon { width: 21px; height: 21px; display: block; }
.tab-icon-wrap { position: relative; display: flex; }
.tab-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1px; white-space: nowrap; }
.tab-dot { position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid rgba(20,28,46,0.9); }
.tab-item-cta { flex: 0 0 auto; padding: 0; }
.tab-icon-cta {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #04121e;
  display: flex; align-items: center; justify-content: center;
  margin-top: -30px;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 10px 24px -6px rgba(56,189,248,0.55), 0 0 0 5px rgba(20,28,46,0.55), 0 1px 0 rgba(255,255,255,0.5) inset;
  transition: transform 0.25s var(--ease-liquid), box-shadow 0.25s ease;
}
.tab-icon-cta svg { width: 22px; height: 22px; }
.tab-item-cta:active .tab-icon-cta { transform: scale(0.85) rotate(-8deg); }

@media (max-width: 720px) {
  .bottom-tabbar { display: flex; }
}

/* ----- General UI Helpers (buttons, cards, forms) ----- */
.card {
  background: linear-gradient(180deg, var(--glass-bg-strong), transparent 40%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px -16px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
}
.card h2 { margin-top: 0; font-size: 16px; color: var(--accent); }

/* Any element carrying the boolean `hidden` attribute must actually hide,
   even when it also has a class (like .btn) that sets its own `display`.
   Author-stylesheet rules always beat the browser's built-in
   `[hidden] { display: none }` UA rule regardless of specificity, so
   without this, `el.hidden = true` on a .btn silently does nothing —
   that's why the report dialog's Submit button stayed on screen reading
   "Sending…" after the report actually succeeded. */
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
  transition: transform 0.15s var(--ease-liquid), background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: #24304a; text-decoration: none; border-color: rgba(255,255,255,0.14); }
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #04121e; box-shadow: 0 4px 16px -4px rgba(56, 189, 248, 0.5); }
.btn-primary:hover { background: #22b3f0; box-shadow: 0 6px 20px -4px rgba(56, 189, 248, 0.65); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #2b0505; }
.btn-danger:hover { background: #f65d5d; }
.btn-small { padding: 5px 10px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ----- Admin Panel Styling (dark glass) ----- */
.admin-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
}
.admin-wrapper .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}
.admin-wrapper .card h2 {
  margin-top: 0;
  font-size: 20px;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table th {
  text-align: left;
  padding: 12px 10px;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 2px solid var(--border);
}
.admin-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table tr:hover td { background: rgba(255,255,255,0.02); }
.admin-table .actions {
  display: flex;
  gap: 6px;
}
.admin-table .actions .btn {
  padding: 4px 10px;
  font-size: 12px;
}
.admin-form .form-group {
  margin-bottom: 16px;
}
.admin-form label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}
.admin-form input, .admin-form select, .admin-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.admin-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.admin-form .form-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}
@media (max-width: 720px) {
  .admin-form .form-row { grid-template-columns: 1fr; }
  .admin-table { font-size: 12px; }
  .admin-table th, .admin-table td { padding: 8px 6px; }
}

/* ============================================================
   MOBILE OVERHAUL – appended to the existing styles
   ============================================================ */

/* ---------- Mobile-first base improvements ---------- */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .app-container { padding: 12px 12px 100px; }
  .topbar-inner { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
  .brand { font-size: 18px; }
  .search-form { order: 3; flex: 1 0 100%; max-width: 100%; margin: 4px 0 0; }
  .search-form input { padding: 10px 38px 10px 16px; font-size: 15px; }
  .nav-actions .btn { padding: 6px 10px; font-size: 12px; }
  .profile-name { display: none; }
  .app-layout { grid-template-columns: 1fr; }
  .left-sidebar { display: none; }
  .right-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .right-sidebar .sidebar-widget { padding: 12px; }
  .section-banner { padding: 16px; min-height: 70px; border-radius: 12px 12px 0 0; }
  .section-banner .banner-title { font-size: 20px; }
  .section-banner .banner-subtitle { font-size: 13px; }
  .section-banner .banner-meta { font-size: 12px; }
  .forum-row {
    grid-template-columns: 36px 1fr;
    gap: 8px;
    padding: 10px 12px;
  }
  .forum-icon { width: 36px; height: 36px; font-size: 18px; }
  .forum-info .forum-name { font-size: 14px; }
  .forum-info .forum-desc { font-size: 12px; white-space: normal; }
  .forum-info .forum-latest { font-size: 11px; flex-wrap: wrap; }
  .forum-stats {
    grid-column: 2;
    text-align: left;
    display: flex;
    gap: 12px;
    font-size: 12px;
    margin-top: 2px;
  }
  .forum-stats div { display: inline; }
  .card h2 { font-size: 16px; }
  .topic-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .topic-title { font-size: 20px; }
  .topic-meta { flex-wrap: wrap; font-size: 13px; }
  .post {
    grid-template-columns: 48px 1fr;
    gap: 10px;
    padding: 12px 0;
  }
  .post .avatar { width: 40px; height: 40px; border-radius: 50%; font-size: 14px; }
  .post-header { flex-wrap: wrap; gap: 4px; }
  .post-author { font-size: 14px; }
  .post-time { font-size: 11px; }
  .post-body { font-size: 15px; }
  .post-actions { flex-wrap: wrap; gap: 6px; }
  .post-actions .btn { padding: 4px 8px; font-size: 11px; border-radius: 9999px; }
  .op-badge {
    display: inline-block;
    background: var(--success);
    color: #04121e;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 9999px;
    margin-left: 6px;
    text-transform: uppercase;
  }
  .post-op {
    border-left: 3px solid var(--success);
    padding-left: 10px;
    background: rgba(52, 211, 153, 0.04);
    border-radius: 0 8px 8px 0;
  }
  .reply-form .ql-toolbar { flex-wrap: wrap; }
  .reply-form .ql-container { min-height: 120px; }
  .reply-form .btn { padding: 10px 16px; font-size: 14px; }
  .bottom-tabbar { display: flex; }
  .app-container { padding-bottom: calc(96px + var(--safe-bottom)); }
  .footer { display: none; }
}

/* ---------- Extra small devices ---------- */
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .right-sidebar { grid-template-columns: 1fr; }
  .forum-row { padding: 8px 10px; }
  .forum-info .forum-latest { font-size: 10px; }
  .post { grid-template-columns: 36px 1fr; }
  .post .avatar { width: 32px; height: 32px; font-size: 12px; }
  .post-body { font-size: 14px; }
}

/* ---------- OP vs Comment differentiation ---------- */
.post-op {
  border-left: 3px solid var(--success);
  padding-left: 12px;
  background: rgba(52, 211, 153, 0.04);
  border-radius: 0 8px 8px 0;
}
.post-op .post-header .post-author::after {
  content: " OP";
  font-size: 10px;
  font-weight: 700;
  color: var(--success);
  background: rgba(52, 211, 153, 0.15);
  padding: 1px 6px;
  border-radius: 9999px;
  margin-left: 6px;
  text-transform: uppercase;
}

/* ============================================================
   CATEGORY PAGE – UPDATED FLEX LAYOUT
   ============================================================ */

/* Category header and control bar (rounded) */
.category-header-card {
    padding: 18px 24px;
    margin-bottom: 20px;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
}
.header-left .category-icon {
    font-size: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}
.header-left .category-title {
    font-size: 24px;
    margin: 0;
}
.category-desc {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.follow-btn {
    padding: 8px 16px;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
}
.follow-btn:hover {
    border-color: var(--accent);
    background: rgba(56,189,248,0.05);
}
.btn-new-topic {
    padding: 10px 24px;
    font-size: 15px;
    border-radius: 9999px;
}

.control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.control-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.control-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.control-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.control-select {
    padding: 4px 28px 4px 12px;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.control-select:focus {
    outline: none;
    border-color: var(--accent);
}
.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
}
.btn-ghost:hover {
    border-color: var(--border);
    color: var(--text);
}
.bulk-select {
    display: flex;
    align-items: center;
}
.bulk-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent);
    border-radius: 4px;
}

/* ===== Unified Topics Container ===== */
.topics-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

/* ===== Topic Row (Desktop Flex Layout) ===== */
.topic-row {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
  gap: 16px;
}
.topic-row:last-child {
  border-bottom: none;
}
.topic-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Checkbox Column */
.topic-col-check {
  flex: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main Column: Avatar + Title + Author Subtitle */
.topic-col-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 50%;
  min-width: 0;
}
.topic-avatar {
  flex-shrink: 0;
}
.topic-avatar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.topic-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.topic-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.topic-title {
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
}
.topic-title:hover {
  color: var(--accent);
}
.topic-author {
  font-size: 12px;
  color: var(--muted);
}
.author-name {
  color: var(--text);
  font-weight: 500;
}

/* Center Column: Badges (Top) & Stats (Bottom) */
.topic-col-center {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.topic-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.user-badge {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.topic-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}
.topic-stats strong {
  color: var(--text);
}

/* Right Column: Last Poster Avatar + Details */
.topic-col-right {
  flex: 0 0 180px;
  display: flex;
  justify-content: flex-end;
  text-align: right;
}
.last-poster {
  display: flex;
  align-items: center;
  gap: 8px;
}
.last-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.last-meta {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 1.3;
}
.last-name {
  font-weight: 600;
  color: var(--text);
}
.last-time {
  color: var(--muted);
  font-size: 11px;
}
.no-replies {
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
}

/* ===== Pagination in toolbar ===== */
.control-right .pagination-top {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: 8px;
}
.pagination-top a, .pagination-top span {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    border: 1px solid var(--border);
}
.pagination-top a:hover {
    background: var(--accent);
    color: #04121e;
}
.pagination-top .active {
    background: var(--accent);
    color: #04121e;
    border-color: var(--accent);
}

/* ===== Responsive ===== */
@media (max-width: 820px) {
    .topic-row {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 10px 14px;
    }
    .topic-col-check {
        flex: 0 0 20px;
        order: 0;
    }
    .topic-col-left {
        flex: 1 1 100%;
        order: 1;
    }
    .topic-col-center {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        order: 2;
        width: 100%;
        justify-content: flex-start;
    }
    .topic-col-right {
        flex: 0 0 auto;
        order: 3;
        width: 100%;
        justify-content: flex-start;
    }
    .last-poster {
        justify-content: flex-start;
    }
    .topic-stats {
        gap: 12px;
    }
}

/* ===== Site Footer ===== */
.site-footer {
    margin-top: 50px;
    padding: 20px 0 30px;
    border-top: 1px solid var(--border);
    background: transparent;
}
.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}
.footer-inner span {
    opacity: 0.8;
}

@media (max-width: 720px) {
    .footer-inner {
        flex-direction: column;
        text-align: center;
        padding: 0 16px;
    }
    .site-footer {
        margin-top: 40px;
        padding: 16px 0 20px;
    }
}

/* ============================================================
   AUTH PAGES – Centered glass card, styled inputs & buttons
   ============================================================ */

.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 140px);
    padding: 20px;
}

.auth-card {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.06) inset;
    max-width: 420px;
    width: 100%;
    padding: 36px 32px 32px;
    transition: 0.3s ease;
}

.auth-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
    text-align: center;
}

.auth-subtitle {
    color: var(--muted);
    text-align: center;
    margin: 0 0 24px;
    font-size: 0.95rem;
}

.auth-errors {
    margin-bottom: 16px;
}

.form-error {
    background: rgba(248, 113, 113, 0.12);
    border-left: 3px solid var(--danger);
    padding: 10px 14px;
    border-radius: 6px;
    color: var(--danger);
    font-size: 14px;
    margin-bottom: 8px;
}

.auth-form .form-group {
    margin-bottom: 18px;
}

.auth-form label {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.auth-form .form-control {
    width: 100%;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 1rem;
    transition: border 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.auth-form .form-control::placeholder {
    color: #6b7290;
}

.auth-form .form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.password-strength-wrapper {
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    margin-top: 6px;
    overflow: hidden;
}

.strength-bar {
    height: 100%;
    width: 0%;
    transition: width 0.2s ease, background 0.2s ease;
    border-radius: 2px;
}

.form-hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.auth-form .btn-block {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 9999px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.auth-links {
    margin-top: 22px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted);
}

.auth-links a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

.auth-links a:hover {
    color: #48cae4;
    text-decoration: underline;
}

.auth-links .separator {
    margin: 0 8px;
    color: var(--border);
}

/* Responsive auth */
@media (max-width: 480px) {
    .auth-card {
        padding: 28px 20px 24px;
        border-radius: 16px;
    }
    .auth-title {
        font-size: 1.5rem;
    }
    .auth-form .form-control {
        padding: 10px 14px;
        font-size: 15px;
    }
    .auth-form .btn-block {
        height: 44px;
        font-size: 15px;
    }
}

/* ============================================================
   NEW TOPIC PAGE – Centered glass card with refined form
   ============================================================ */

.new-topic-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 20px;
    min-height: calc(100vh - 140px);
}

.new-topic-card {
    max-width: 780px;
    width: 100%;
    padding: 32px 36px 40px;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.06) inset;
}

.new-topic-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.new-topic-icon {
    font-size: 2.4rem;
    line-height: 1;
    background: var(--surface-2);
    padding: 12px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border: 1px solid var(--glass-border);
}

.new-topic-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.new-topic-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.new-topic-form .form-group {
    margin-bottom: 24px;
}

.new-topic-form label {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.new-topic-form .form-control {
    width: 100%;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-size: 1rem;
    transition: border 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.new-topic-form .form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.new-topic-form select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.quill-editor {
    min-height: 240px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

/* Quill toolbar styling – adapt to dark theme */
.quill-editor .ql-toolbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
    padding: 8px 12px;
}

.quill-editor .ql-container {
    font-size: 16px;
    font-family: var(--font-ui);
    color: var(--text);
    min-height: 200px;
}

.quill-editor .ql-editor {
    padding: 16px;
}

.quill-editor .ql-editor.ql-blank::before {
    color: var(--muted);
    font-style: normal;
}

.new-topic-actions {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.new-topic-actions .btn {
    flex: 1;
    justify-content: center;
    padding: 12px 20px;
    font-size: 1rem;
    border-radius: 9999px;
    min-width: 120px;
}

.new-topic-actions .btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.new-topic-actions .btn-ghost:hover {
    background: var(--surface-2);
    border-color: var(--muted);
}

/* Responsive new topic */
@media (max-width: 720px) {
    .new-topic-card {
        padding: 24px 20px 32px;
        border-radius: 16px;
    }
    .new-topic-header {
        gap: 12px;
    }
    .new-topic-icon {
        width: 48px;
        height: 48px;
        font-size: 1.8rem;
        padding: 8px;
    }
    .new-topic-title {
        font-size: 1.4rem;
    }
    .new-topic-subtitle {
        font-size: 0.85rem;
    }
    .new-topic-actions {
        flex-direction: column;
    }
    .new-topic-actions .btn {
        width: 100%;
        flex: none;
    }
}

@media (max-width: 480px) {
    .new-topic-card {
        padding: 16px 14px 24px;
    }
    .new-topic-icon {
        display: none;
    }
    .new-topic-title {
        font-size: 1.2rem;
    }
}

/* ============================================================
   QUILL EDITOR – Full dark theme for toolbar & icons
   ============================================================ */

.ql-toolbar.ql-snow {
    background: #1a2333 !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 8px 12px !important;
}

.ql-container.ql-snow {
    border: 1px solid var(--border) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    background: var(--surface-2) !important;
    font-size: 16px;
    font-family: var(--font-ui);
    color: var(--text);
}

.ql-snow .ql-stroke {
    stroke: var(--text) !important;
}
.ql-snow .ql-fill {
    fill: var(--text) !important;
}
.ql-snow .ql-stroke.ql-thin,
.ql-snow .ql-stroke.ql-even {
    stroke: var(--text) !important;
}
.ql-snow .ql-fill.ql-even,
.ql-snow .ql-fill.ql-thin {
    fill: var(--text) !important;
}

.ql-snow .ql-picker-label {
    color: var(--text) !important;
}
.ql-snow .ql-picker-label .ql-stroke {
    stroke: var(--text) !important;
}
.ql-snow .ql-picker-label .ql-fill {
    fill: var(--text) !important;
}

.ql-snow .ql-picker-options {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
.ql-snow .ql-picker-options .ql-picker-item {
    color: var(--text) !important;
}
.ql-snow .ql-picker-options .ql-picker-item:hover,
.ql-snow .ql-picker-options .ql-picker-item.ql-selected {
    background: var(--surface-2) !important;
    color: var(--accent) !important;
}

.ql-snow .ql-toolbar button:hover,
.ql-snow .ql-toolbar button:focus,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label.ql-active {
    color: var(--accent) !important;
}
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--accent) !important;
}
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill {
    fill: var(--accent) !important;
}

.ql-snow .ql-toolbar button {
    padding: 4px 6px !important;
    border-radius: 6px !important;
}
.ql-snow .ql-toolbar button:hover {
    background: rgba(255,255,255,0.05) !important;
}

.ql-snow .ql-editor.ql-blank::before {
    color: var(--muted) !important;
    font-style: normal !important;
}
.ql-snow .ql-editor {
    color: var(--text) !important;
    padding: 16px !important;
}

.ql-snow .ql-color-picker .ql-picker-label {
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
}
.ql-snow .ql-color-picker .ql-picker-label .ql-color-label {
    stroke: var(--text) !important;
}

.ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-radius: 0 0 12px 12px !important;
}

/* ============================================================
   MOBILE: LATEST DISCUSSIONS – 3‑row clean layout
   ============================================================ */

@media (max-width: 768px) {
  .discussion-card {
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .discussion-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .thread-title {
    font-size: 15px;
    font-weight: 600;
    margin: 2px 0;
  }

  .thread-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #8A92A6;
    white-space: nowrap;
  }
  .thread-meta .time-ago {
    white-space: nowrap;
  }
  .thread-preview {
    display: none;
  }
}

/* ============================================================
   MOBILE: WELCOME CARD – Compact horizontal stats
   ============================================================ */

@media (max-width: 768px) {
  .welcome-card {
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
  }

  .welcome-card h2 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  .stat-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .stat {
    padding: 6px 4px !important;
    border-radius: 8px !important;
    text-align: center !important;
  }

  .stat .value {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .stat .label {
    font-size: 10px !important;
    opacity: 0.7;
    white-space: nowrap !important;
  }
}

/* ============================================================
   PROFILE PAGE – Modern card-based layout
   ============================================================ */

.profile-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
}

.profile-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 768px) {
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .profile-wrapper {
        padding: 12px;
    }
}

/* ---------- Sidebar ---------- */
.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-avatar-card {
    text-align: center;
    padding: 24px 16px;
}

.avatar-container {
    margin: 0 auto 12px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent);
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.3);
}

.profile-avatar-large {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    color: #04121e;
}

.profile-username {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.profile-email {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 10px;
}

.profile-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 12px;
}

.profile-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 12px 0;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.stat-label {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.profile-status {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Main area ---------- */
.profile-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Alerts */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
}
.alert-success {
    background: rgba(52, 211, 153, 0.12);
    border-left: 4px solid var(--success);
    color: var(--success);
}
.alert-error {
    background: rgba(248, 113, 113, 0.12);
    border-left: 4px solid var(--danger);
    color: var(--danger);
}

/* Activity list */
.activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.activity-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.activity-list li:last-child {
    border-bottom: none;
}
.activity-list .time {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}
.activity-list a {
    color: var(--text);
    text-decoration: none;
}
.activity-list a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Danger Zone */
.danger-zone {
    border: 1px solid rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.05);
}
.danger-zone .btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #2b0505;
}
.danger-zone .btn-danger:hover {
    background: #f65d5d;
}

/* Password strength bar (already in style.css, but ensure it's here) */
.password-strength-wrapper {
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    margin-top: 6px;
    overflow: hidden;
}
.strength-bar {
    height: 100%;
    width: 0%;
    transition: width 0.2s ease, background 0.2s ease;
    border-radius: 2px;
}

/* Role badge reuse (already defined) */
.role-badge {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--role-color, #38bdf8);
    color: #fff;
}

/* Additional form tweaks */
.profile-main .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) {
    .profile-main .form-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ============================================================
   FIX: Compact Profile Dropdown (header)
   ============================================================ */

/* Reduce overall trigger size */
.profile-trigger {
    padding: 2px 8px 2px 4px !important;   /* was 4px 10px 4px 4px */
    gap: 4px !important;                  /* was 8px */
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s;
    display: flex;
    align-items: center;
}

/* Smaller avatar */
.profile-avatar,
.profile-avatar-placeholder {
    width: 24px !important;   /* was 28px */
    height: 24px !important;  /* was 28px */
    font-size: 10px !important; /* was 12px */
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Compact username */
.profile-name {
    font-size: 13px !important; /* was 14px */
    font-weight: 500;
    line-height: 1.2;
}

/* Dropdown arrow */
.dropdown-arrow {
    font-size: 10px !important;
    color: var(--muted);
    margin-left: 2px;
}

/* Dropdown menu itself – tighter */
.dropdown-menu {
    min-width: 160px !important; /* was 200px */
    padding: 4px 0 !important;   /* was 8px 0 */
    border-radius: 12px !important; /* was 16px */
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}
.dropdown-menu a {
    padding: 6px 14px !important; /* was 8px 16px */
    font-size: 13px !important;   /* was 14px */
    gap: 8px !important;          /* was 10px */
}
.dropdown-menu hr {
    margin: 4px 12px !important;  /* was 6px 12px */
}

/* If you want to hide the username on very small screens (already done in media queries) */
@media (max-width: 480px) {
    .profile-name {
        display: none !important;
    }
    .profile-trigger {
        padding: 2px 6px 2px 4px !important;
    }
    .profile-avatar,
    .profile-avatar-placeholder {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ---- Small avatars (sidebar, contributor list, etc.) ---- */
.avatar-small {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
}
.avatar-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Footer Gap Fix ===== */
.site-footer {
    margin-top: 0 !important;
    padding: 10px 0 !important;
}
.app-container {
    padding-bottom: 20px !important;
}
.footer {
    margin-top: 0 !important;
    padding: 10px 0 !important;
}

/* ===== Breadcrumb ===== */
.breadcrumb-nav {
    margin: 0 0 1rem;
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent;
}
.breadcrumb li {
    margin-right: 0.5rem;
}
.breadcrumb li + li::before {
    content: "›";
    margin-right: 0.5rem;
    color: #888;
}
.breadcrumb .active {
    color: #4caf50;
    font-weight: 600;
}

/* ===== Category Header with left accent ===== */
.category-header-card.accent-left {
    border-left: 4px solid #4caf50; /* green accent */
    padding-left: 20px;
}

/* ============================================================
   INSPIRED BY INVISION COMMUNITY – CATEGORY PAGE
   ============================================================ */

/* --- Category Header --- */
.ipsPageHeader {
    position: relative;
    background: linear-gradient(180deg, var(--i-featured-soft, rgba(56,189,248,0.08)) 0%, var(--surface) 65%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 26px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.ipsPageHeader::before {
    /* Thin accent stripe along the top, colored per-category so distinct
       forums feel visually distinct from one another at a glance. */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--i-featured, var(--accent));
}
.ipsPageHeader__row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.ipsPageHeader__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--i-featured, var(--accent));
    background: var(--i-featured-soft, rgba(56,189,248,0.12));
    border: 1px solid var(--border);
}
.ipsPageHeader__icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
}
.ipsPageHeader__primary {
    flex: 1;
    min-width: 200px;
}
.ipsPageHeader__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text);
    letter-spacing: -0.01em;
}
.ipsPageHeader__desc {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
    max-width: 640px;
}
.ipsPageHeader__desc p { margin: 0; }
.ipsPageHeader__stats {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--muted);
}
.ipsPageHeader__stats strong {
    color: var(--text);
}

.ipsButtons {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}
.ipsButtons li { margin: 0; }

.ipsButton--follow {
    display: inline-flex;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 16px;
    border-radius: 9999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.ipsButton--follow:hover {
    border-color: var(--i-featured, var(--accent));
    color: var(--i-featured, var(--accent));
    transform: translateY(-1px);
}
.ipsButton__label { margin-left: 4px; }

.btn-new-topic {
    background: var(--i-featured, var(--accent));
    border-color: var(--i-featured, var(--accent));
    color: #04121e;
    padding: 8px 20px;
    font-weight: 600;
    box-shadow: 0 6px 16px -6px var(--i-featured, var(--accent));
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.btn-new-topic:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -6px var(--i-featured, var(--accent));
    color: #04121e;
}

/* --- Control Bar --- */
.ipsBox--forumsTable {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.ipsButtonBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
    background: rgba(255,255,255,0.015);
}
.ipsButtonBar--bottom {
    border-bottom: none;
    border-top: 1px solid var(--border);
}
.ipsButtonBar__pagination {
    display: flex;
    align-items: center;
}
.ipsButtonBar__end {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ipsDataFilters {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ipsDataFilters li {
    display: flex;
    align-items: center;
}
/* Nudge the shared .control-select pill (defined earlier in this file)
   toward this category's accent color on hover/focus, without
   re-declaring `background`/`padding` here — that would reset the
   dropdown chevron background-image set by the base rule via shorthand. */
.ipsBox--forumsTable .control-select:hover,
.ipsBox--forumsTable .control-select:focus {
    border-color: var(--i-featured, var(--accent));
    outline: none;
}

/* --- Topic List (table style) --- */
.ipsData {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ipsData__item {
    display: flex;
    align-items: center;
    padding: 14px 20px 14px 17px;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    transition: background 0.15s, border-left-color 0.15s;
    position: relative;
}
.ipsData__item:hover {
    background: rgba(255,255,255,0.028);
}
.ipsData__item:hover,
.ipsData__item.ipsData__item--pinned {
    border-left-color: var(--i-featured, var(--accent));
}
.ipsData__item.ipsData__item--pinned {
    background: var(--i-featured-soft, rgba(56,189,248,0.05));
}
.ipsData__item:last-child {
    border-bottom: none;
}
.ipsLinkPanel {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    text-indent: -9999px;
}
.ipsData__icon {
    flex: 0 0 42px;
    margin-right: 14px;
}
.ipsUserPhoto {
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.ipsUserPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ipsData__content {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    position: relative;
    gap: 12px;
}
.ipsData__main {
    flex: 1;
    min-width: 0;
}
.ipsData__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ipsData__title h4 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
}
.ipsData__title h4 a {
    color: var(--text);
    text-decoration: none;
}
.ipsData__title h4 a:hover {
    color: var(--i-featured, var(--accent));
}
.ipsBadges {
    display: flex;
    gap: 5px;
}
.ipsBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 11px;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
}
.ipsBadge--pinned {
    color: var(--i-featured, var(--accent));
    background: var(--i-featured-soft, rgba(56,189,248,0.12));
    border-color: transparent;
}
.ipsBadge--locked {
    color: var(--danger);
    background: rgba(248,113,113,0.12);
    border-color: transparent;
}
.ipsBadge i {
    font-size: 11.5px;
}
.ipsData__meta {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 3px;
}
.ipsData__meta .ipsUsername {
    color: var(--text);
    font-weight: 500;
}
.ipsData__groups {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0 12px 0 8px;
    padding: 0;
}
.ipsData__groups li {
    display: inline-flex;
}
.user-badge {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}
.ipsData__extra {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 0 0 auto;
}
.ipsData__stats {
    display: flex;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ipsData__stats li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}
.ipsData__stats-icon {
    font-size: 13px;
    color: var(--muted);
    opacity: 0.85;
}
.ipsData__stats-label {
    font-size: 12.5px;
}
.ipsData__stats-label strong {
    color: var(--text);
    font-weight: 600;
}
.ipsData__last {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
    justify-content: flex-end;
    padding-left: 20px;
    border-left: 1px solid var(--border);
}
.ipsData__last .ipsUserPhoto {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.ipsData__last-text {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    line-height: 1.35;
}
.ipsData__last-primary .ipsUsername {
    font-weight: 600;
    color: var(--text);
}
.ipsData__last-secondary {
    color: var(--muted);
}
.no-replies {
    color: var(--muted);
    font-style: italic;
    font-size: 13px;
}

/* --- Pagination --- */
.ipsPagination {
    display: flex;
    gap: 5px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ipsPagination li {
    display: inline-block;
}
.ipsPagination a,
.ipsPagination .ipsPagination__active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ipsPagination a:hover {
    background: var(--i-featured, var(--accent));
    border-color: var(--i-featured, var(--accent));
    color: #04121e;
    text-decoration: none;
}
.ipsPagination .ipsPagination__active {
    background: var(--i-featured, var(--accent));
    color: #04121e;
    border-color: var(--i-featured, var(--accent));
}
.ipsPagination__inactive {
    opacity: 0.4;
    pointer-events: none;
}
.ipsPagination__prev,
.ipsPagination__next,
.ipsPagination__first,
.ipsPagination__last {
    padding: 0 8px;
}

/* --- Empty State --- */
.category-empty-state {
    list-style: none;
    text-align: center;
    padding: 56px 24px;
}
.category-empty-state__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.category-empty-state__text {
    color: var(--muted);
    margin: 0 0 16px;
    font-size: 14px;
}

/* --- Responsive --- */
@media (max-width: 820px) {
    .ipsPageHeader {
        padding: 18px 18px;
    }
    .ipsPageHeader__row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .ipsPageHeader__icon {
        width: 44px;
        height: 44px;
        font-size: 19px;
    }
    .ipsButtons {
        justify-content: flex-start;
    }
    .ipsData__item {
        flex-wrap: wrap;
        padding: 12px;
    }
    .ipsData__icon {
        flex: 0 0 32px;
        margin-right: 8px;
    }
    .ipsUserPhoto {
        width: 32px;
        height: 32px;
    }
    .ipsData__content {
        flex-wrap: wrap;
    }
    .ipsData__main {
        flex: 1 1 100%;
        order: 1;
    }
    .ipsData__groups {
        order: 2;
        margin: 4px 0 0;
    }
    .ipsData__extra {
        flex: 1 1 100%;
        order: 3;
        justify-content: space-between;
        margin-top: 6px;
        gap: 12px;
        flex-wrap: wrap;
    }
    .ipsData__last {
        min-width: auto;
        justify-content: flex-start;
        padding-left: 0;
        border-left: none;
    }
    .ipsButtonBar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .ipsButtonBar__end {
        flex-wrap: wrap;
    }
    .ipsDataFilters {
        flex-wrap: wrap;
    }
}

/* ===== Hidden badge ===== */
.ipsBadge--warning {
    color: #facc15;
    border-color: #facc15;
}
.ipsBadge--warning i {
    color: #facc15;
}
.ipsBadge--locked {
    color: #f87171;
    border-color: #f87171;
}
.ipsBadge--locked i {
    color: #f87171;
}
.ipsBadge--pinned {
    color: #38bdf8;
    border-color: #38bdf8;
}
.ipsBadge--pinned i {
    color: #38bdf8;
}

/* ---- Poll Styles ---- */
.poll-container {
    background: var(--surface-2);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 16px 0;
    border: 1px solid var(--border);
}
.poll-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.poll-question {
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
}
.poll-closed-badge {
    background: #ef4444;
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.poll-total-votes {
    font-size: 13px;
    color: var(--muted);
}
.poll-option {
    margin-bottom: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.poll-option:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.poll-option-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 3px;
}
.poll-option-text {
    font-weight: 500;
}
.poll-option-votes {
    color: var(--muted);
    font-size: 13px;
}
.poll-bar-bg {
    background: var(--surface-3);
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
    margin: 2px 0 6px;
}
.poll-bar {
    height: 100%;
    background: #6366f1;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.poll-vote-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 2px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.poll-vote-btn:hover {
    background: var(--accent);
    color: #04121e;
    border-color: var(--accent);
}
.poll-vote-btn.voted {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}
.poll-vote-btn.voted:hover {
    background: #2563eb;
}
.poll-expiry {
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.poll-countdown {
    color: #fbbf24;
    font-weight: 600;
}

/* Auth links – enhanced */
.auth-links .btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.auth-links .btn-ghost:hover {
    background: var(--surface-2);
    border-color: var(--muted);
    text-decoration: none;
}
.auth-links .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #04121e;
}
.auth-links .btn-primary:hover {
    background: #22b3f0;
    border-color: #22b3f0;
    color: #04121e;
    text-decoration: none;
}
.auth-legal a {
    color: var(--accent);
    text-decoration: none;
}
.auth-legal a:hover {
    text-decoration: underline;
}

/* ===== @mention link + autocomplete dropdown (see assets/js/mentions.js) ===== */
.mention-link {
    color: var(--accent, #22b3f0);
    font-weight: 600;
    text-decoration: none;
}
.mention-link:hover { text-decoration: underline; }
.mention-autocomplete {
    z-index: 2000;
    background: var(--surface, #16202b);
    border: 1px solid var(--border, #2a3746);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
}
.mention-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 7px;
    font-size: 14px;
    cursor: pointer;
    color: var(--text, #e7edf3);
    border-left: 2px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.mention-autocomplete-item.active,
.mention-autocomplete-item:hover {
    background: var(--surface-2, #1e2b38);
    border-left-color: var(--accent, #22b3f0);
}
.mention-avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2, #1e2b38);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mention-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mention-avatar--fallback {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent, #22b3f0);
}
.mention-avatar--fallback img {
    display: none;
}
.mention-username {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mention-hint {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--muted, #94a3b8);
    opacity: 0.75;
    white-space: nowrap;
}
.mention-autocomplete-item.active .mention-hint,
.mention-autocomplete-item:hover .mention-hint {
    color: var(--accent, #22b3f0);
    opacity: 1;
}
.mention-autocomplete-empty {
    padding: 14px 10px;
    font-size: 13px;
    color: var(--muted, #94a3b8);
    text-align: center;
}

/* ===== Draft restore banner (see assets/js/drafts.js) ===== */
.draft-restore-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--surface-2, #1e2b38);
    border: 1px solid var(--border, #2a3746);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text, #e7edf3);
}
.draft-restore-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }

.draft-restore-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background-color: #f8f9fa; /* Subtle light gray background */
  border: 1px solid #e9ecef;   /* Clean border */
  border-left: 4px solid #0d6efd; /* Accent line on the left (blue/primary) */
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Text and Icon Alignment */
.draft-restore-banner > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.draft-restore-banner i {
  color: #0d6efd; /* Matches accent color */
}

/* Action Buttons Container */
.draft-restore-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Button Base Styles */
.draft-restore-banner .btn-small {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;
}

/* Secondary / Discard Button */
.draft-restore-banner .btn:not(.btn-primary) {
  background-color: transparent;
  color: #6c757d;
  border-color: #ced4da;
}

.draft-restore-banner .btn:not(.btn-primary):hover {
  background-color: #e9ecef;
  color: #495057;
}

/* Primary / Restore Button */
.draft-restore-banner .btn-primary {
  background-color: #0d6efd;
  color: #ffffff;
}

.draft-restore-banner .btn-primary:hover {
  background-color: #0b5ed7;
}

/* Mobile Responsiveness */
@media (max-width: 576px) {
  .draft-restore-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .draft-restore-banner-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
/* ============================================================
   REVAMPED PAGINATION (pagination_links() in includes/functions.php)
   Prev/Next + windowed page numbers + gap ellipses + page summary,
   replacing the old "print every page number in a row" version.
   ============================================================ */
.coven-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.coven-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--surface-2, #1b2536);
  border: 1px solid var(--border, #29344a);
  color: var(--text, #f1f5f9);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.coven-page-btn:hover:not(.active):not(.disabled) {
  border-color: var(--accent, #38bdf8);
  transform: translateY(-1px);
}
.coven-page-btn.active {
  background: var(--accent, #38bdf8);
  color: #04121e;
  border-color: var(--accent, #38bdf8);
  cursor: default;
}
.coven-page-btn.disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}
.coven-page-gap {
  padding: 0 4px;
  color: var(--muted, #8291ab);
  font-weight: 700;
  user-select: none;
}
.coven-page-summary {
  margin-left: 8px;
  font-size: 12px;
  color: var(--muted, #8291ab);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .coven-page-summary { width: 100%; order: 99; text-align: center; margin: 4px 0 0; }
  .coven-page-btn { min-width: 30px; height: 30px; font-size: 12px; padding: 0 8px; }
}

/* ============================================================
   SUB-FORUM CHIPS (index.php forum rows, category.php subcategory
   strip) — IPB-style inline sub-forum links inside a parent row,
   instead of each subcategory eating a full row of its own.
   ============================================================ */
.subforum-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}
.subforum-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  background: var(--surface-2, #1b2536);
  border: 1px solid var(--border, #29344a);
  color: var(--muted, #8291ab);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, transform .1s ease, background .15s ease;
}
.subforum-chip i {
  font-size: 11px;
  opacity: .8;
}
.subforum-chip:hover {
  border-color: var(--accent, #38bdf8);
  color: var(--accent, #38bdf8);
  background: color-mix(in srgb, var(--accent, #38bdf8) 10%, var(--surface-2, #1b2536));
  transform: translateY(-1px);
  text-decoration: none;
}
@media (max-width: 560px) {
  .subforum-chip { font-size: 11px; padding: 4px 10px 4px 8px; }
}

/* ============================================================
   MOBILE: Forum/category list rows — card-style with full
   description text, circular category icon, and a compact
   "latest post" meta line (avatar + user + topic + time).
   ============================================================ */
@media (max-width: 768px) {
  .section-banner {
    padding: 22px 18px;
    border-radius: 18px 18px 0 0;
    min-height: 130px;
  }
  .section-banner .banner-title {
    font-size: 22px;
  }
  .section-banner .banner-subtitle {
    font-size: 14px;
  }

  .section-forums {
    border-radius: 0 0 18px 18px;
  }

  .forum-row {
    grid-template-columns: 44px 1fr;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
  }

  /* Stats (topic/post counts) move out of the row layout entirely on
     mobile — the reference design doesn't show them at all, keeping
     the row focused on what the forum is and what's happening in it. */
  .forum-row .forum-stats {
    display: none;
  }

  .forum-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .forum-info .forum-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
  }

  /* Full description instead of a single truncated line — this is the
     core of the requested redesign: let people actually read what a
     forum is about without needing to open it first. */
  .forum-info .forum-desc {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--muted);
    margin-top: 2px;
    margin-bottom: 10px;
  }

  .forum-info .forum-latest {
    font-size: 13px;
    flex-wrap: nowrap;
  }
  .forum-info .forum-latest .latest-user {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .forum-info .forum-latest .latest-title {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
  }
  .forum-info .forum-latest .latest-time {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .subforum-chip-row {
    margin-top: 10px;
  }
}

/* "New" label on category.php topic rows — activity since the
   visitor last viewed the topic, shown even for topics they don't
   follow (see get_unread_topic_ids_bulk() in includes/functions.php). */
.new-activity-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #04121e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: middle;
  animation: newBadgePulse 2.4s ease-in-out infinite;
}
@keyframes newBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.35); }
  50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
/* ============================================================
   GLOBAL POLISH LAYER (Feedback 1)
   Cross-cutting fixes that apply to every page: iOS input zoom,
   focus rings, touch targets, long-word overflow, motion
   preferences and consistent easing. Loaded last so it wins
   without needing !important on most rules.
   ============================================================ */

/* ---- iOS zoom on focus ----
   Mobile Safari zooms the whole page whenever a focused form control has a
   font-size under 16px — and the global rule above sets every input to 14px.
   That's why tapping the search box, the reply editor or any settings field
   jerked the layout and left the page zoomed in. 16px on small screens stops
   it; desktop keeps the tighter 14px. */
@media (max-width: 820px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* ---- Visible keyboard focus ----
   There was no focus style anywhere, so keyboard and switch-control users had
   no idea where they were on the page. :focus-visible keeps mouse clicks
   clean while making keyboard focus obvious. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Long content must not blow out the layout ----
   A long username, pasted URL or unbroken token in a post could push a row
   wider than the viewport and force the whole page to scroll sideways. */
/* `clip` rather than `hidden` on purpose: overflow-x:hidden on the body turns
   it into a scroll container and silently breaks every `position: sticky`
   element on the site (the topbar included). `clip` trims the overflow
   without that side effect. */
body { overflow-x: clip; }
p, li, td, dd, blockquote,
.ipsData__title h4,
.message-content,
.popup-item .title,
.ipsUsername {
    /* BUG FIX: this was `overflow-wrap: anywhere`, which — unlike
       `break-word` — also shrinks an element's intrinsic MIN-CONTENT width to
       a single character. Applied to `td`, that let the automatic table layout
       squeeze columns down to one letter wide, which is why usernames in the
       admin Users table rendered vertically ("L i l i t h"). `break-word`
       still prevents a long URL or unbroken token from overflowing, but leaves
       min-content sizing alone so table columns keep sensible widths. */
    overflow-wrap: break-word;
    word-break: break-word;
}
pre, code { overflow-x: auto; max-width: 100%; }
img, video, svg, iframe, table { max-width: 100%; }

/* ---- Comfortable touch targets on phones ----
   Apple and Android both ask for ~44px; several of the small pill buttons
   and icon buttons were closer to 26px, which is why taps missed. */
/* Deliberately an explicit list rather than a blanket `button` selector —
   a global min-height would stretch the compact icon buttons in the call
   modal, the message toolbar and the editor toolbar out of shape. */
@media (max-width: 768px) {
    .btn,
    .btn-small,
    .control-select,
    .header-btn,
    .bottom-nav-item,
    .sidebar-nav-group .nav-item,
    .ipsButton {
        min-height: 42px;
    }
    .btn, .btn-small, .ipsButton { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- One easing curve everywhere ----
   Interactive elements were a mix of `transition: all 0.2s`, 0.15s linear and
   no transition at all, which is what made the UI feel uneven. These use the
   existing --ease-liquid token so motion is consistent across the site. */
a, button, .btn, .card, .ipsData__item, .nav-item,
.subcategory-card, .reaction-btn, .control-select,
input, select, textarea {
    transition-timing-function: var(--ease-liquid);
}
.btn, .reaction-btn, .subcategory-card, .au-stat {
    transition-property: background, border-color, color, box-shadow, transform;
    transition-duration: 0.18s;
}
.btn:active, .reaction-btn:active { transform: scale(0.97); }

/* Cards and rows lift slightly rather than snapping. */
.card { transition: border-color 0.18s var(--ease-liquid), box-shadow 0.18s var(--ease-liquid); }

/* ---- Consistent scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* ---- Fluid headings ----
   Fixed pixel headings were oversized on 360px phones and undersized on wide
   desktops; clamp() scales them with the viewport instead. */
h1 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.15rem); line-height: 1.2; }
h2 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.65rem); line-height: 1.25; }
h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.3; }

/* ---- Respect the user's motion setting ----
   Nothing in the stylesheet honoured prefers-reduced-motion, so the animated
   badges, sliding drawers, smooth scrolling and hover lifts all still ran for
   people who have explicitly asked their OS to stop that. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:active, .reaction-btn:active { transform: none; }
}

/* ============================================================
   WHO IS ONLINE (index.php)
   A bar-style trigger above the forum layout plus a modal
   listing members, guests and crawlers. IP addresses only ever
   reach the page for staff — see ajax/who-is-online.php.
   ============================================================ */

.who-online-bar { max-width: 1600px; margin: 0 auto 14px; padding: 0 16px; }

.who-online-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: border-color .18s var(--ease-liquid), transform .18s var(--ease-liquid), box-shadow .18s var(--ease-liquid);
}
.who-online-trigger:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(0,0,0,.18);
}

/* Pulsing "live" dot. */
.who-online-pulse {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    position: relative;
}
.who-online-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--success);
    opacity: .55;
    animation: who-online-ping 2s var(--ease-liquid) infinite;
}
@keyframes who-online-ping {
    0%   { transform: scale(.6); opacity: .6; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { opacity: 0; }
}

.who-online-label { font-weight: 700; }
.who-online-counts { color: var(--muted); font-size: 13px; }
.who-online-counts strong { color: var(--text); }
.who-online-chevron { margin-left: auto; color: var(--muted); font-size: 12px; }

/* ---- Modal ---- */
.who-online-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.who-online-modal[hidden] { display: none; }
.who-online-backdrop { position: absolute; inset: 0; background: rgba(4,8,16,.72); backdrop-filter: blur(4px); }
.who-online-panel {
    position: relative;
    width: min(560px, calc(100vw - 24px));
    max-height: min(78vh, 700px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
    overflow: hidden;
    animation: who-online-rise .22s var(--ease-liquid) both;
}
@keyframes who-online-rise {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.who-online-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.who-online-head h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 9px; }
.who-online-head i { color: var(--accent); font-size: 14px; }
.who-online-close { background: none; border: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; }
.who-online-close:hover { color: var(--text); }

.who-online-tabs { display: flex; gap: 6px; padding: 12px 18px 0; }
.who-tab {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 10px;
    border-radius: 10px 10px 0 0;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--muted);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.who-tab:hover { color: var(--text); background: var(--surface-2); }
.who-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.who-tab-count {
    min-width: 20px; padding: 1px 6px;
    border-radius: 9999px;
    background: var(--surface-2);
    font-size: 11px; font-weight: 700;
}
.who-tab.is-active .who-tab-count { background: rgba(56,189,248,.18); color: var(--accent); }

.who-online-body { flex: 1; overflow-y: auto; padding: 10px 12px 14px; border-top: 1px solid var(--border); }
.who-online-loading, .who-empty { padding: 26px 12px; text-align: center; color: var(--muted); font-size: 13.5px; }

.who-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.who-row {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 10px;
    transition: background .12s var(--ease-liquid);
}
.who-row:hover { background: var(--surface-2); }
.who-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    background: var(--surface-2); border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 14px;
}
.who-avatar--bot { color: var(--accent-2); }
.who-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.who-name { font-weight: 600; font-size: 14px; color: var(--text); text-decoration: none; }
a.who-name:hover { color: var(--accent); }
.who-verified { color: #3b9eff; font-size: 11px; }
.who-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-ip {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(250, 204, 21, .12);
    border: 1px solid rgba(250, 204, 21, .3);
    color: #fde047;
    flex-shrink: 0;
}

.who-online-foot {
    padding: 11px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 12px; color: var(--muted);
    display: flex; align-items: center; gap: 8px;
}

@media (max-width: 720px) {
    .who-online-counts .who-online-breakdown { display: none; }
    .who-online-panel { width: 100vw; max-height: 88vh; border-radius: 16px 16px 0 0; align-self: flex-end; }
    .who-online-modal { align-items: flex-end; }
    /* Wrap the IP onto its own line rather than hiding it — staff are the only
       people who receive it, and they need it most often on a phone. */
    .who-row { flex-wrap: wrap; }
    .who-ip { width: 100%; margin-left: 45px; }
}

/* ============================================================
   REPORT DIALOG (shared, rendered once in includes/footer.php)
   ============================================================ */

.report-trigger { cursor: pointer; }
.report-trigger--icon {
    background: none;
    border: none;
    color: var(--muted);
    padding: 4px 6px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    transition: opacity .15s var(--ease-liquid), color .15s var(--ease-liquid), background .15s var(--ease-liquid);
}
/* Reveal the flag on hover/focus so it doesn't clutter every message bubble. */
.message-bubble:hover .report-trigger--icon,
.report-trigger--icon:focus-visible { opacity: .75; }
.report-trigger--icon:hover { opacity: 1; color: var(--danger); background: rgba(248,113,113,.12); }
.chat-header-actions .report-trigger--icon { opacity: 1; }

.report-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; }
.report-modal[hidden] { display: none; }
.report-backdrop { position: absolute; inset: 0; background: rgba(4,8,16,.75); backdrop-filter: blur(4px); }
.report-panel {
    position: relative;
    width: min(520px, calc(100vw - 24px));
    max-height: min(86vh, 760px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
    overflow: hidden;
    animation: report-rise .2s var(--ease-liquid) backwards;
}
@keyframes report-rise {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.report-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.report-head h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 9px; }
.report-head i { color: var(--danger); font-size: 14px; }
.report-close { background: none; border: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; }
.report-close:hover { color: var(--text); }

.report-body { padding: 16px 18px; overflow-y: auto; }
.report-body[hidden] { display: none; }
.report-intro { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }

.report-categories { border: none; margin: 0 0 16px; padding: 0; }
.report-categories legend {
    font-size: 13px; font-weight: 700; color: var(--text);
    padding: 0; margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
}
.report-required, .report-optional {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: 2px 7px; border-radius: 9999px;
}
.report-required { background: rgba(248,113,113,.15); color: #fca5a5; }
.report-optional { background: var(--surface-2); color: var(--muted); }

.report-option {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color .15s var(--ease-liquid), background .15s var(--ease-liquid);
}
.report-option:hover { border-color: var(--accent); background: var(--surface-2); }
.report-option input { margin-top: 3px; accent-color: var(--danger); flex-shrink: 0; }
.report-option:has(input:checked) { border-color: var(--danger); background: rgba(248,113,113,.08); }
.report-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.report-option-text strong { font-size: 13.5px; font-weight: 600; }
.report-option-text small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.report-notes-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; margin-bottom: 6px;
}
#reportNotes {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    resize: vertical;
    font-family: inherit;
}
#reportNotes:focus { border-color: var(--accent); outline: none; }

.report-error {
    margin-top: 12px; padding: 10px 12px;
    border-radius: 10px;
    background: rgba(248,113,113,.12);
    border: 1px solid rgba(248,113,113,.35);
    color: #fca5a5;
    font-size: 13px;
}
.report-error[hidden] { display: none; }

.report-done { padding: 34px 24px; text-align: center; }
.report-done[hidden] { display: none; }
.report-done i { font-size: 34px; color: var(--success); margin-bottom: 12px; display: block; }
.report-done p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.report-foot {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.report-foot .btn { min-width: 110px; justify-content: center; }

@media (max-width: 600px) {
    .report-modal { align-items: flex-end; }
    .report-panel { width: 100vw; max-height: 92vh; border-radius: 16px 16px 0 0; }
    .report-foot .btn { flex: 1; min-width: 0; }
    .report-trigger--icon { opacity: .75; } /* no hover on touch */
}

/* ============================================================
   ANNOUNCEMENT BANNER (rendered by includes/header.php)
   ============================================================ */

.announcement-bar {
    max-width: 1600px;
    margin: 12px auto 0;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.announcement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--announce-border, var(--border));
    background: var(--announce-bg, var(--surface));
    color: var(--text);
    overflow: hidden;
    transition: opacity .2s var(--ease-liquid), height .2s var(--ease-liquid),
                margin .2s var(--ease-liquid), padding .2s var(--ease-liquid);
}
.announcement.is-dismissing {
    opacity: 0;
    height: 0 !important;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

.announcement--info    { --announce-bg: rgba(56,189,248,.10);  --announce-border: rgba(56,189,248,.35);  }
.announcement--success { --announce-bg: rgba(52,211,153,.10);  --announce-border: rgba(52,211,153,.35);  }
.announcement--warning { --announce-bg: rgba(250,204,21,.10);  --announce-border: rgba(250,204,21,.35);  }
.announcement--danger  { --announce-bg: rgba(248,113,113,.10); --announce-border: rgba(248,113,113,.38); }

.announcement-icon { flex-shrink: 0; font-size: 15px; line-height: 1.5; }
.announcement--info    .announcement-icon { color: var(--accent); }
.announcement--success .announcement-icon { color: var(--success); }
.announcement--warning .announcement-icon { color: var(--warning); }
.announcement--danger  .announcement-icon { color: var(--danger); }

.announcement-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.announcement-title { font-size: 14px; font-weight: 700; }
.announcement-body { font-size: 13px; color: var(--muted); line-height: 1.5; }

.announcement-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    border-radius: 6px;
    transition: color .15s var(--ease-liquid), background .15s var(--ease-liquid);
}
.announcement-close:hover { color: var(--text); background: rgba(255,255,255,.06); }

@media (max-width: 720px) {
    .announcement-bar { padding: 0 12px; }
    .announcement { padding: 10px 12px; }
}