/* ============================================================
   Juniper RSPS — Master Stylesheet
   Design system, components, layout, and page styles
   ============================================================ */

/* Force the HTML `hidden` attribute to actually hide elements even when
   another rule (.btn { display: inline-block }, .panel { display: flex },
   etc.) tries to display them. Without this, JS setting `el.hidden = true`
   appears to no-op because the class-based display wins on specificity. */
[hidden] { display: none !important; }

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --silver: #cbd5e1;
  --silver-bright: #e0f2fe;
  --silver-pale: #f0f9ff;
  --silver-dark: #475569;
  --blue: #3b82f6;
  --blue-bright: #60a5fa;
  --blue-deep: #1e40af;
  --navy: #0c1e3e;
  --navy-deep: #020617;
  --cyan: #22d3ee;
  --cyan-deep: #0e7490;
  --mint: #6ee7b7;
  --mint-bright: #a7f3d0;
  --mint-deep: #047857;
  --amber: #fbbf24;
  --rose: #f43f5e;

  /* Functional */
  --bg: #020617;
  --surface: rgba(15, 30, 60, 0.55);
  --surface-2: rgba(8, 16, 35, 0.7);
  --border: rgba(96, 165, 250, 0.25);
  --border-bright: rgba(96, 165, 250, 0.55);
  --text: #cbd5e1;
  --text-bright: #e0f2fe;
  --text-dim: #64748b;
  --success: var(--mint);
  --error: var(--rose);
  --warning: var(--amber);

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Type */
  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Cinzel', Georgia, serif;
  --font-mono: 'Consolas', 'Monaco', monospace;

  /* Layout */
  --nav-h: 86px;
  --container: 1300px;
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; background: var(--bg); }
body {
  height: 100%;
  font-family: var(--font-body);
  color: var(--text);
  background: transparent;
  overflow-x: hidden;
  position: relative;
  z-index: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

/* ---------- Background stack (shared across all pages) ---------- */
.layer { position: fixed; inset: 0; pointer-events: none; }
.bg-void { z-index: -10; background: var(--navy-deep); }
.bg-ambience {
  z-index: -9;
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(96, 165, 250, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 110%, rgba(30, 64, 175, 0.50) 0%, transparent 65%),
    radial-gradient(ellipse 90% 100% at 30% 60%, rgba(15, 23, 42, 0.65) 0%, transparent 60%),
    radial-gradient(ellipse 90% 100% at 75% 45%, rgba(14, 116, 144, 0.30) 0%, transparent 60%);
}
.bg-vignette {
  z-index: -3;
  background: radial-gradient(ellipse at center, transparent 25%, rgba(2, 6, 23, 0.55) 70%, rgba(2, 6, 23, 0.95) 100%);
}
#stars-canvas, #milkyway-canvas, #shooting-canvas {
  position: fixed; inset: 0; pointer-events: none;
}
#stars-canvas    { z-index: -7; }
#milkyway-canvas { z-index: -7; }
#shooting-canvas { z-index: -6; }

/* ---------- Top utility bar ---------- */
.top-utility {
  position: relative;
  z-index: 5;
  width: 100%;
  background: rgba(2, 6, 23, 0.6);
  border-bottom: 1px solid rgba(96, 165, 250, 0.22);
  backdrop-filter: blur(10px);
}
.top-utility-inner {
  width: 100%;
  padding: 8px 32px;
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  font-size: 12px;
  color: #93c5fd;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: var(--font-ui);
}
.top-utility a { display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; }
.top-utility a:hover { color: var(--silver-bright); }
.util-divider { color: rgba(147, 197, 253, 0.4); font-weight: 300; }
.util-status { display: inline-flex; align-items: center; gap: 6px; }
.util-count { color: var(--mint); font-weight: 700; text-shadow: 0 0 8px rgba(110, 231, 183, 0.55); }

/* ---------- Main navigation ---------- */
header.navbar {
  position: relative;
  z-index: 10;
  padding: 14px 32px 18px;
}
.nav-row {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav-left, .nav-right { display: flex; align-items: center; gap: 14px; }
.nav-left { justify-content: flex-end; }
.nav-right { justify-content: flex-start; }

.nav-btn {
  position: relative;
  padding: 14px 32px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--silver-bright);
  border: 1px solid rgba(96, 165, 250, 0.5);
  background: linear-gradient(180deg, rgba(15, 30, 60, 0.55) 0%, rgba(5, 10, 25, 0.65) 50%, rgba(15, 30, 60, 0.55) 100%);
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.2), inset 0 0 14px rgba(30, 64, 175, 0.25);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  display: inline-block;
  text-align: center;
}
.nav-btn::before, .nav-btn::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--silver);
}
.nav-btn::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.nav-btn::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.nav-btn:hover {
  color: var(--silver-pale);
  border-color: var(--silver-bright);
  box-shadow: 0 0 22px rgba(96, 165, 250, 0.55), inset 0 0 18px rgba(96, 165, 250, 0.2);
  transform: translateY(-1px);
}
.nav-btn.active {
  color: var(--silver-pale);
  border-color: var(--silver-bright);
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.55) 0%, rgba(8, 18, 45, 0.65) 50%, rgba(30, 64, 175, 0.55) 100%);
  box-shadow: 0 0 22px rgba(96, 165, 250, 0.5), inset 0 0 18px rgba(59, 130, 246, 0.3);
}

/* Logo */
.logo-center { text-align: center; position: relative; padding: 0 24px; display: flex; flex-direction: column; align-items: center; }
.logo-mark {
  width: 90px; height: 90px;
  margin: 0 0 4px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.logo-mark::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.45) 0%, rgba(30, 64, 175, 0.25) 35%, transparent 70%);
  filter: blur(8px);
  animation: pulseGlow 4s ease-in-out infinite;
}
.logo-svg {
  position: relative;
  z-index: 2;
  width: 76px; height: 76px;
  filter: drop-shadow(0 0 14px rgba(96, 165, 250, 0.7));
}
.ember-halo {
  transform-origin: 60px 60px;
  animation: emberHalo 2.6s ease-in-out infinite;
  transform-box: fill-box;
}
.ember-core { transform-origin: 60px 60px; animation: emberCore 2.6s ease-in-out infinite; transform-box: fill-box; }
.ember-flicker { animation: emberFlicker 0.45s ease-in-out infinite alternate; transform-origin: 60px 60px; transform-box: fill-box; }
@keyframes emberHalo { 0%,100% { opacity: 0.55; transform: scale(0.95); } 50% { opacity: 0.95; transform: scale(1.15); } }
@keyframes emberCore { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes emberFlicker { 0% { opacity: 0.85; } 100% { opacity: 1; } }
@keyframes pulseGlow { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.18); opacity: 1; } }
.logo-text {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 8px;
  margin-right: -8px;
  margin-top: 2px;
  background: linear-gradient(180deg, var(--silver-pale) 0%, var(--silver-bright) 45%, #93c5fd 70%, var(--silver-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
}

/* ---------- Generic page container ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--sp-6); }
.container-wide { max-width: 1500px; margin: 0 auto; padding: 0 var(--sp-6); }

main { position: relative; z-index: 2; padding: var(--sp-7) 0 var(--sp-8); min-height: 60vh; }

/* ---------- Page headers ---------- */
.page-head {
  text-align: center;
  margin-bottom: var(--sp-7);
  padding: 0 var(--sp-5);
}
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--silver-pale);
  text-shadow: 0 0 30px rgba(96, 165, 250, 0.5);
  margin-bottom: var(--sp-3);
}
.page-head .crumb {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: var(--sp-3);
}
.page-head p.lede {
  font-size: 18px;
  color: var(--text);
  max-width: 640px;
  margin: 0 auto;
  font-style: italic;
}

/* ---------- Cards/panels ---------- */
.panel {
  background: linear-gradient(180deg, rgba(15, 30, 60, 0.7) 0%, rgba(5, 10, 25, 0.85) 50%, rgba(15, 30, 60, 0.7) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  backdrop-filter: blur(14px);
  position: relative;
}
.panel-tight { padding: var(--sp-5); }
.panel h2, .panel h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--silver-pale);
  margin-bottom: var(--sp-4);
}
.panel h2 { font-size: 22px; }
.panel h3 { font-size: 16px; letter-spacing: 2px; }

/* Filigree corners */
.filigree-corners { position: relative; }
.filigree-corners::before, .filigree-corners::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--silver);
  pointer-events: none;
}
.filigree-corners::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.filigree-corners::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  border: 1px solid var(--border-bright);
  color: var(--silver-pale);
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.55) 0%, rgba(10, 18, 50, 0.65) 50%, rgba(30, 64, 175, 0.55) 100%);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.35), inset 0 0 14px rgba(59, 130, 246, 0.25);
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
  text-align: center;
  border-radius: 0;
}
.btn::before, .btn::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid currentColor;
}
.btn::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.btn::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.btn:hover {
  border-color: var(--silver-pale);
  box-shadow: 0 0 30px rgba(96, 165, 250, 0.65), inset 0 0 20px rgba(96, 165, 250, 0.4);
  transform: translateY(-1px);
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-primary {
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.7) 0%, rgba(10, 18, 50, 0.85) 50%, rgba(30, 64, 175, 0.7) 100%);
  border-color: var(--blue-bright);
  box-shadow: 0 0 24px rgba(96, 165, 250, 0.5), inset 0 0 18px rgba(59, 130, 246, 0.35);
}
.btn-mint {
  border-color: var(--mint);
  background: linear-gradient(180deg, rgba(4, 120, 87, 0.5) 0%, rgba(2, 44, 34, 0.75) 50%, rgba(4, 120, 87, 0.5) 100%);
  box-shadow: 0 0 24px rgba(110, 231, 183, 0.35), inset 0 0 18px rgba(110, 231, 183, 0.2);
}
.btn-mint:hover { box-shadow: 0 0 36px rgba(110, 231, 183, 0.65), inset 0 0 24px rgba(110, 231, 183, 0.3); }
.btn-discord {
  border-color: #5865F2;
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.55) 0%, rgba(30, 30, 70, 0.7) 50%, rgba(88, 101, 242, 0.55) 100%);
  box-shadow: 0 0 24px rgba(88, 101, 242, 0.45), inset 0 0 18px rgba(88, 101, 242, 0.25);
}
.btn-ghost {
  background: rgba(15, 30, 60, 0.4);
  border-color: rgba(96, 165, 250, 0.4);
  box-shadow: none;
}
.btn-danger {
  border-color: var(--rose);
  background: linear-gradient(180deg, rgba(244, 63, 94, 0.4) 0%, rgba(50, 10, 20, 0.7) 50%, rgba(244, 63, 94, 0.4) 100%);
  box-shadow: 0 0 18px rgba(244, 63, 94, 0.35), inset 0 0 12px rgba(244, 63, 94, 0.2);
}
.btn-sm { padding: 10px 18px; font-size: 11px; letter-spacing: 3px; }
.btn-lg { padding: 18px 40px; font-size: 15px; letter-spacing: 5px; }
.btn-block { display: flex; width: 100%; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: var(--sp-5); }
.form-group label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--silver-bright);
  margin-bottom: 8px;
}
.form-group label .required { color: var(--rose); margin-left: 4px; }
.form-group .hint {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 6px;
  font-style: italic;
}
.form-group .error-msg {
  display: block;
  font-size: 13px;
  color: var(--rose);
  margin-top: 6px;
  font-family: var(--font-ui);
  letter-spacing: 1px;
}
.form-group .ok-msg {
  display: block;
  font-size: 13px;
  color: var(--mint);
  margin-top: 6px;
  font-family: var(--font-ui);
  letter-spacing: 1px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--silver-pale);
  font-family: var(--font-body);
  font-size: 16px;
  transition: all 0.2s ease;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18), inset 0 0 12px rgba(59, 130, 246, 0.12);
  background: rgba(8, 16, 35, 0.85);
}
input.invalid, select.invalid, textarea.invalid {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);
}
input.valid, select.valid, textarea.valid {
  border-color: var(--mint);
}
textarea { min-height: 140px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-dim); }

.checkbox-row, .radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--sp-3);
}
.checkbox-row input[type="checkbox"], .radio-row input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--blue-bright);
  margin-top: 3px;
  flex-shrink: 0;
}
.checkbox-row label, .radio-row label {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  font-family: var(--font-body);
  margin-bottom: 0;
  line-height: 1.5;
}

.password-strength {
  height: 6px;
  background: rgba(2, 6, 23, 0.6);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}
.password-strength-bar {
  height: 100%;
  width: 0;
  background: var(--rose);
  transition: width 0.25s ease, background 0.25s ease;
  border-radius: 3px;
}
.password-strength-bar.weak { width: 25%; background: var(--rose); }
.password-strength-bar.fair { width: 50%; background: var(--amber); }
.password-strength-bar.good { width: 75%; background: var(--blue-bright); }
.password-strength-bar.strong { width: 100%; background: var(--mint); }
.password-strength-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px;
  font-family: var(--font-ui);
}

/* ---------- Tables ---------- */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  backdrop-filter: blur(10px);
}
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 14px 16px; text-align: left; }
.tbl thead th {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--silver-bright);
  background: rgba(15, 30, 60, 0.7);
  border-bottom: 2px solid var(--border-bright);
}
.tbl tbody tr { border-bottom: 1px solid rgba(96, 165, 250, 0.12); transition: background 0.15s; }
.tbl tbody tr:hover { background: rgba(30, 64, 175, 0.18); }
.tbl tbody tr:last-child { border-bottom: 0; }
.tbl tbody td { font-size: 14px; }
.tbl .rank-1 { color: var(--amber); font-weight: 700; }
.tbl .rank-2 { color: #cbd5e1; font-weight: 700; }
.tbl .rank-3 { color: #f59e0b; font-weight: 700; }
.tbl .num { font-variant-numeric: tabular-nums; text-align: right; }

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-5);
}
.pagination button, .pagination a {
  min-width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text);
  transition: all 0.2s;
}
.pagination button:hover, .pagination a:hover { border-color: var(--silver); color: var(--silver-pale); }
.pagination button[aria-current="page"], .pagination a[aria-current="page"] { background: var(--blue-deep); color: var(--silver-pale); border-color: var(--blue-bright); }

/* ---------- Badges & pills ---------- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.badge-online { color: var(--mint); background: rgba(110, 231, 183, 0.1); }
.badge-offline { color: var(--text-dim); background: rgba(100, 116, 139, 0.1); }
.badge-iron { color: #cbd5e1; background: rgba(203, 213, 225, 0.08); }
.badge-hcim { color: var(--rose); background: rgba(244, 63, 94, 0.1); }
.badge-staff { color: var(--blue-bright); background: rgba(96, 165, 250, 0.1); }
.badge-donor { color: var(--mint-bright); background: rgba(167, 243, 208, 0.1); }
.badge-new { color: var(--cyan); background: rgba(34, 211, 238, 0.12); }

/* ---------- Alerts / state messages ---------- */
.alert {
  padding: 14px 18px;
  border: 1px solid;
  border-radius: var(--r-sm);
  font-size: 14px;
  margin-bottom: var(--sp-5);
}
.alert-info { color: var(--silver-bright); border-color: var(--border-bright); background: rgba(30, 64, 175, 0.18); }
.alert-success { color: var(--mint); border-color: var(--mint); background: rgba(4, 120, 87, 0.18); }
.alert-warning { color: var(--amber); border-color: var(--amber); background: rgba(180, 83, 9, 0.2); }
.alert-error { color: var(--rose); border-color: var(--rose); background: rgba(127, 29, 29, 0.25); }

/* Skeleton loaders */
.skeleton {
  background: linear-gradient(90deg, rgba(15, 30, 60, 0.4), rgba(30, 64, 175, 0.25), rgba(15, 30, 60, 0.4));
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk-line { height: 14px; width: 100%; margin-bottom: 8px; }
.sk-line.short { width: 60%; }

/* Empty state */
.empty-state {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  color: var(--text-dim);
}
.empty-state h3 {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: var(--sp-2);
}
.empty-state p { font-size: 14px; max-width: 400px; margin: 0 auto var(--sp-4); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.tab {
  padding: 12px 20px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.tab:hover { color: var(--silver-pale); }
.tab[aria-selected="true"] {
  color: var(--silver-pale);
  border-bottom-color: var(--mint);
}
.tab-panel { display: none; }
.tab-panel[aria-hidden="false"] { display: block; }

/* ---------- Footer ---------- */
footer.site-footer {
  position: relative;
  z-index: 2;
  margin-top: var(--sp-8);
  border-top: 1px solid var(--border);
  background: rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(10px);
  padding: var(--sp-7) var(--sp-6) var(--sp-5);
}
.footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.footer-col h4 {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: var(--sp-3);
}
.footer-col a { display: block; font-size: 14px; color: var(--text); padding: 4px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--silver-pale); }
.footer-brand p { font-size: 14px; color: var(--text-dim); margin-bottom: var(--sp-3); max-width: 360px; }
.footer-bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(96, 165, 250, 0.12);
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--font-ui);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }

/* Spacing helpers */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); } .mb-7 { margin-bottom: var(--sp-7); }

.text-center { text-align: center; }
.text-mint { color: var(--mint); }
.text-amber { color: var(--amber); }
.text-danger { color: var(--danger, #f87171); }
.text-ok { color: var(--mint, #34d399); }
.text-rose { color: var(--rose); }
.text-bright { color: var(--silver-pale); }
.text-dim { color: var(--text-dim); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-family: var(--font-ui); }

/* ---------- Hero (homepage) ---------- */
.hero {
  position: relative;
  min-height: 50vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 50px 24px 60px;
  z-index: 2;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 88px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 5px;
  color: #d8e0ee;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 0 18px rgba(96, 165, 250, 0.30), 0 0 36px rgba(30, 64, 175, 0.22), 0 4px 18px rgba(0,0,0,0.85);
}
.hero h1 .ornament { color: var(--mint); font-size: 0.7em; margin: 0 0.25em; text-shadow: 0 0 18px rgba(110, 231, 183, 0.85); }
.hero h2.subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--mint-bright);
  margin-bottom: 30px;
  letter-spacing: 2px;
}
.hero p.tagline {
  font-size: clamp(16px, 1.5vw, 20px);
  color: #d8c79a;
  margin-bottom: 50px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Server status panel ---------- */
.status-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  backdrop-filter: blur(12px);
}
.status-cell { text-align: center; }
.status-cell .label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.status-cell .value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--silver-pale);
}
.status-cell.online .value { color: var(--mint); text-shadow: 0 0 14px rgba(110, 231, 183, 0.4); }
.status-cell.offline .value { color: var(--rose); }

/* ---------- Feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.feature {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
  transition: all 0.25s;
}
.feature:hover { border-color: var(--mint); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
.feature .icon { font-size: 32px; margin-bottom: var(--sp-3); display: block; }
.feature h3 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--silver-pale);
  margin-bottom: 6px;
}
.feature p { font-size: 13px; color: var(--text); }

/* ---------- News cards ---------- */
.news-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
}
.news-card:hover { border-color: var(--mint); transform: translateY(-3px); }
.news-card .media {
  height: 140px;
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.5), rgba(14, 116, 144, 0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  border-bottom: 1px solid var(--border);
}
.news-card .body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.news-card .meta { font-family: var(--font-ui); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--mint); margin-bottom: 6px; }
.news-card h3 { font-family: var(--font-display); font-size: 17px; letter-spacing: 1px; color: var(--silver-pale); margin-bottom: 8px; }
.news-card p { font-size: 13px; color: var(--text); margin-bottom: var(--sp-3); flex: 1; }
.news-card .read-more { font-family: var(--font-ui); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--mint); }

/* ---------- Vote / Store specific ---------- */
.vote-card, .store-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.vote-card:hover, .store-card:hover { border-color: var(--mint); transform: translateY(-2px); }
.vote-card .site-name, .store-card .pkg-name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver-pale);
}
.vote-card .reward, .store-card .price {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--mint);
  letter-spacing: 1px;
}
.cooldown {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber);
}

/* ---------- Player profile ---------- */
.profile-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
}
.avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-deep), var(--cyan-deep));
  border: 2px solid var(--mint);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--silver-pale);
  text-shadow: 0 0 14px rgba(110, 231, 183, 0.5);
}
.avatar-sm { width: 40px; height: 40px; font-size: 14px; }
.profile-name { font-family: var(--font-display); font-size: 28px; letter-spacing: 3px; color: var(--silver-pale); margin-bottom: 4px; }
.profile-meta { font-family: var(--font-ui); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); }

.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); }
.skill {
  background: rgba(2, 6, 23, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
}
.skill .name { font-family: var(--font-ui); font-size: 10px; letter-spacing: 1.5px; color: var(--text); flex: 1; }
.skill .lvl { font-family: var(--font-display); font-size: 14px; color: var(--mint); font-weight: 700; }

/* ---------- FAQ accordion ---------- */
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: var(--sp-4);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver-pale);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq summary::after { content: '+'; font-size: 22px; color: var(--mint); }
.faq details[open] summary::after { content: '−'; }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq .faq-body { padding: var(--sp-4); color: var(--text); font-size: 14px; line-height: 1.7; }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: end;
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
}
.filter-bar .form-group { margin-bottom: 0; flex: 1; min-width: 160px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .status-panel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .nav-row { grid-template-columns: 1fr; justify-items: center; }
  .nav-left, .nav-right { justify-content: center; flex-wrap: wrap; }
  .logo-center { order: -1; }
  .nav-btn { padding: 10px 18px; letter-spacing: 2px; font-size: 11px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  main { padding: var(--sp-5) 0; }
  .panel { padding: var(--sp-4); }
  .top-utility-inner { flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
  .profile-head { grid-template-columns: 1fr; text-align: center; }
  /* Mobile table → cards */
  .tbl.mobile-cards thead { display: none; }
  .tbl.mobile-cards tr { display: block; padding: var(--sp-3); border-bottom: 1px solid var(--border); }
  .tbl.mobile-cards td { display: flex; justify-content: space-between; padding: 6px 0; border: none; }
  .tbl.mobile-cards td::before { content: attr(data-label); font-family: var(--font-ui); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 28px; letter-spacing: 3px; }
}

/* ============================================================
 * Support tickets — list rows + thread view (used on support.html
 * and the admin console).
 * ============================================================ */
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.ticket-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ticket-row:hover {
  background: rgba(96, 165, 250, 0.04);
  border-color: rgba(96, 165, 250, 0.25);
}
.ticket-row-main { flex: 1; min-width: 0; }
.ticket-row-subject {
  font-weight: 600; color: var(--text-bright);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.ticket-row-meta { font-size: 12px; }

.badge-open        { color: #f87171; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.3); }
.badge-in-progress { color: #fbbf24; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.3); }
.badge-resolved    { color: #6ee7b7; background: rgba(110, 231, 183, 0.12); border: 1px solid rgba(110, 231, 183, 0.3); }
.badge-closed      { color: #94a3b8; background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.25); }

.ticket-thread {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 600px; overflow-y: auto;
  padding-right: 6px;
}
.ticket-msg {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}
.ticket-msg-user   { background: rgba(96, 165, 250, 0.05);  border-color: rgba(96, 165, 250, 0.18); }
.ticket-msg-staff  { background: rgba(110, 231, 183, 0.05); border-color: rgba(110, 231, 183, 0.2); }
.ticket-msg-system { background: rgba(148, 163, 184, 0.05); }
.ticket-msg-meta { font-size: 11px; margin-bottom: 6px; }
.ticket-msg-body { white-space: pre-wrap; word-wrap: break-word; line-height: 1.5; }

.alert-error {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #fca5a5;
  padding: 12px 16px;
  border-radius: 8px;
}

/* ============================================================
 * ADMIN CONSOLE — top-nav layout, centered content, polished cards.
 * Used only on /admin.html.
 * ============================================================ */

/* ---------- Top navigation bar ---------- */
.admin-topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 12, 24, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.admin-topnav-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 14px 40px;
  display: flex; align-items: center; gap: 32px;
}

.admin-brand {
  display: flex; align-items: center; gap: 12px;
  padding-right: 24px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.admin-brand-mark {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(110,231,183,0.12));
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 10px;
  font-size: 20px;
}
.admin-brand-name {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  letter-spacing: 4px;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1;
}
.admin-brand-sub {
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 4px;
}

.admin-tabs {
  display: flex; align-items: center; gap: 4px;
  flex: 1;
}
.admin-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 8px 16px;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: all 0.15s;
  position: relative;
}
.admin-tab-btn:hover {
  color: var(--text-bright);
  background: rgba(255,255,255,0.04);
}
.admin-tab-btn.active {
  color: var(--blue-bright);
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.15), 0 4px 14px rgba(96, 165, 250, 0.12);
}
.admin-tab-ico { font-size: 14px; }
.admin-tab-count {
  background: #f87171;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0;
}
.admin-tab-soon {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-dim);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.admin-user-chip {
  display: flex; align-items: center; gap: 12px;
  padding-left: 24px;
  border-left: 1px solid rgba(255,255,255,0.06);
}
.admin-user-info { text-align: right; line-height: 1.2; }
.admin-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
}
.admin-user-role {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 2px;
}
.btn-icon {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim);
  width: 36px; height: 36px;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-icon:hover {
  color: var(--text-bright);
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
}

/* ---------- Page wrapper ---------- */
.admin-page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px 40px 80px;
}

.admin-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px;
  flex-wrap: wrap;
}
.admin-page-head h1 {
  margin: 0 0 6px 0;
  font-family: 'Cinzel', serif;
  font-size: 32px;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--text-bright);
}
.admin-page-sub {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0;
}

/* ---------- Buttons (admin-tuned) ---------- */
.btn .btn-ico { display: inline-block; margin-right: 4px; }

/* ---------- Stats strip ---------- */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.admin-stat {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.4));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 20px 22px;
  transition: border-color 0.2s, transform 0.2s;
}
.admin-stat:hover {
  border-color: rgba(96, 165, 250, 0.2);
  transform: translateY(-1px);
}
.admin-stat-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 8px;
}
.admin-stat-value {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* ---------- Orders tab row layout ----------
   Custom block instead of reusing .ticket-row-btn so PayPal IDs (long
   alphanumeric strings) don't break the layout and so the amount can sit
   prominently in the row header. Three lines:
     1. status badge + #id + amount + relative time
     2. buyer → recipient (gift marker if different)
     3. payer email + capture id (monospace, ellipsised)
   The whole row is one <button> so the entire surface is clickable. */
.order-row {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 3px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.order-row:hover {
  background: rgba(30, 41, 59, 0.55);
  border-color: rgba(96, 165, 250, 0.18);
}
.order-row.selected {
  background: rgba(30, 41, 59, 0.7);
  border-left-color: var(--mint, #6ee7b7);
  border-color: rgba(110, 231, 183, 0.25);
}
.order-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.order-row-id {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.order-row-amount {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.order-row-time {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.order-row-who {
  font-size: 14px;
  color: var(--text-bright);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-row-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--text-dim);
  min-width: 0;
}
.order-row-email {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-row-capture {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* ---------- Filter bar ---------- */
.admin-filter-bar {
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 16px 22px;
  margin-bottom: 20px;
}
.filter-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 600;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim);
  padding: 7px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.filter-chip:hover {
  color: var(--text-bright);
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(96, 165, 250, 0.04);
}
.filter-chip.active {
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.5);
  color: var(--blue-bright);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2);
}

/* Form inputs/selects */
.form-select, .form-input {
  background: rgba(8, 12, 24, 0.7);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-bright);
  padding: 8px 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input { width: 100%; padding: 12px 14px; }
.form-select:focus, .form-input:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}
.form-select-lg { padding: 10px 16px; font-size: 14px; text-transform: capitalize; }

/* ---------- List + Detail split ---------- */
.admin-split {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 20px;
  align-items: start;
}

.admin-list-card, .admin-detail-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.admin-list-card {
  overflow: hidden;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
}
.admin-list-head {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  background: rgba(8, 12, 24, 0.3);
}
.admin-list-head span { color: var(--text-bright); font-weight: 700; }
.admin-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px;
}

/* Ticket row button */
.ticket-row-btn {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 14px;
  text-align: left;
  cursor: pointer;
  display: block;
  font: inherit;
  color: var(--text);
  margin-bottom: 4px;
  transition: all 0.15s;
}
.ticket-row-btn:hover {
  background: rgba(96, 165, 250, 0.04);
  border-color: rgba(96, 165, 250, 0.15);
}
.ticket-row-btn.selected {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.4);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.15);
}
.ticket-row-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; font-size: 11px;
}
.ticket-row-id {
  color: var(--text-dim);
  font-family: monospace;
}
.ticket-row-time {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 11px;
}
.ticket-row-subject {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-bright);
  line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ticket-cat-pill {
  display: inline-block;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: var(--text-dim);
  padding: 2px 9px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 6px;
  font-weight: 600;
}

/* ---------- Detail card ---------- */
.admin-detail-card {
  min-height: 600px;
  overflow: hidden;
}
.ticket-detail-header {
  padding: 24px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.04), transparent);
}
.ticket-detail-titlewrap { flex: 1; min-width: 0; }
.ticket-detail-meta-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.ticket-detail-subject {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0 0 8px 0;
  line-height: 1.3;
}
.ticket-status-control {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 160px;
}
.ticket-status-control label {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
}

.ticket-detail-section {
  padding: 22px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ticket-detail-section:last-child { border-bottom: none; }
.ticket-detail-section-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 16px 0;
  font-weight: 600;
}

/* Submitted form fields */
.ticket-form-fields summary {
  cursor: pointer;
  padding: 10px 14px;
  background: rgba(8, 12, 24, 0.4);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-bright);
  user-select: none;
  list-style: none;
}
.ticket-form-fields summary::-webkit-details-marker { display: none; }
.ticket-form-fields summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.2s;
  color: var(--text-dim);
}
.ticket-form-fields[open] summary::before { transform: rotate(90deg); }
.ticket-form-dl {
  background: rgba(8, 12, 24, 0.4);
  border: 1px solid rgba(255,255,255,0.05);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 16px 20px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ticket-form-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.ticket-form-row:last-child { border-bottom: none; padding-bottom: 0; }
.ticket-form-row dt {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}
.ticket-form-row dd {
  margin: 0;
  color: var(--text-bright);
  line-height: 1.5;
  word-wrap: break-word;
}

/* ---------- Thread bubbles ---------- */
.ticket-thread {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 4px;
}
.ticket-msg {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(8, 12, 24, 0.45);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
}
.ticket-msg-staff {
  background: linear-gradient(135deg, rgba(110, 231, 183, 0.06), rgba(8, 12, 24, 0.45));
  border-color: rgba(110, 231, 183, 0.18);
}
.ticket-msg-user {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.06), rgba(8, 12, 24, 0.45));
  border-color: rgba(96, 165, 250, 0.18);
}
.ticket-msg-system {
  background: rgba(148, 163, 184, 0.04);
  border-color: rgba(148, 163, 184, 0.1);
}
.ticket-msg-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.ticket-msg-staff   .ticket-msg-avatar { background: rgba(110, 231, 183, 0.12); }
.ticket-msg-user    .ticket-msg-avatar { background: rgba(96, 165, 250, 0.12); }
.ticket-msg-content { min-width: 0; }
.ticket-msg-meta {
  font-size: 12px;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.ticket-msg-meta strong { color: var(--text-bright); }
.ticket-msg-body {
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Reply section */
.ticket-reply-section {
  background: rgba(96, 165, 250, 0.03);
}

/* ---------- Empty states ---------- */
.empty-state {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-dim);
}
.empty-state-large {
  padding: 100px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 500px;
}
.empty-ico {
  font-size: 56px; margin-bottom: 16px; opacity: 0.5;
}
.empty-msg {
  font-size: 17px;
  color: var(--text-bright);
  font-weight: 500;
  margin-bottom: 8px;
}
.empty-sub {
  font-size: 13px;
  color: var(--text-dim);
  max-width: 380px;
  line-height: 1.6;
  margin-top: 4px;
}
.empty-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(96, 165, 250, 0.15);
  border-top-color: var(--blue-bright);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Placeholder card for stubbed tabs */
.placeholder-card {
  text-align: center;
  padding: 100px 40px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.3));
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 14px;
}

/* ============================================================
 * USER MANAGEMENT — list rows, detail panel, role pills, controls
 * ============================================================ */

/* Inline search input inside the filter bar */
.filter-search { flex: 1; min-width: 200px; }
.form-input-inline { padding: 8px 14px; font-size: 13px; }

/* User row in list */
.user-row-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.user-row-info { min-width: 0; flex: 1; }
.user-row-name {
  font-weight: 600; color: var(--text-bright); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-row-email {
  font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-row-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Avatar */
.user-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(110,231,183,0.14));
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 13px; letter-spacing: 1px; font-weight: 700;
  color: var(--text-bright);
  flex-shrink: 0;
}
.user-avatar-lg {
  width: 56px; height: 56px;
  font-size: 18px;
  border-radius: 12px;
}

/* Role pills, color-coded by rank */
.role-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.role-member  { color: #94a3b8; background: rgba(148, 163, 184, 0.1);  border-color: rgba(148, 163, 184, 0.25); }
/* "Support" tier. Underlying staff_role value is now 'support' across
   DB + worker + frontend (full rename 2026-06-01). Bright sky-blue,
   distinguishable from Mod's deeper royal blue below. */
.role-support { color: #38bdf8; background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.42); }
.role-mod     { color: #60a5fa; background: rgba(96, 165, 250, 0.12);  border-color: rgba(96, 165, 250, 0.35); }
.role-admin     { color: #fbbf24; background: rgba(251, 191, 36, 0.12);  border-color: rgba(251, 191, 36, 0.35); }
/* Developer tier — added 2026-06-08 in the V2 migration. Sits between admin
   and owner. Bright green to read as "build/code" vs. admin's amber/owner's pink. */
.role-developer { color: #34d399; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.4);  }
.role-owner     { color: #f0abfc; background: rgba(240, 171, 252, 0.12); border-color: rgba(240, 171, 252, 0.4); }

/* User detail headline (avatar + name) */
.user-detail-headline { display: flex; align-items: center; gap: 16px; }

/* Stat grid on user detail */
.user-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.user-stat {
  background: rgba(8, 12, 24, 0.4);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 14px 16px;
}
.user-stat-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.user-stat-value {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: var(--text-bright);
  font-weight: 600;
}

/* Admin controls */
.user-controls {
  display: flex; flex-direction: column; gap: 12px;
}
.user-control-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  background: rgba(8, 12, 24, 0.4);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 14px 18px;
  flex-wrap: wrap;
}
.user-control-label { flex: 1; min-width: 200px; }
.user-control-label strong { color: var(--text-bright); display: block; margin-bottom: 4px; }
.user-control-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Danger button */
.btn-danger {
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #fca5a5;
  padding: 8px 16px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-danger:hover {
  background: rgba(248, 113, 113, 0.25);
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.6);
}

/* ============================================================
 * NEWS EDITOR (admin)
 * ============================================================ */
.news-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  align-items: start;
}
.news-edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver-bright);
}
.news-edit-grid input[type="text"],
.news-edit-grid input[type="url"],
.news-edit-grid select,
.news-edit-grid textarea {
  background: rgba(15, 30, 60, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-bright);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: none;
  padding: 10px 12px;
  width: 100%;
}
.news-edit-grid textarea {
  resize: vertical;
  font-family: 'Consolas', 'Menlo', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
}
.news-edit-grid input:focus,
.news-edit-grid select:focus,
.news-edit-grid textarea:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 2px rgba(110, 231, 183, 0.15);
}
.news-edit-wide { grid-column: 1 / -1; }
.news-edit-inline {
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  font-size: 13px !important;
  color: var(--text-bright);
}
@media (max-width: 780px) {
  .news-edit-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * AUDIT LOG TABLE
 * ============================================================ */
.audit-table-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.audit-table {
  width: 100%;
  border-collapse: collapse;
}
.audit-table th {
  background: rgba(8, 12, 24, 0.6);
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  text-align: left;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.audit-table td {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 13px;
  color: var(--text-bright);
  vertical-align: middle;
}
.audit-table tr:last-child td { border-bottom: none; }
.audit-table tbody tr:hover { background: rgba(96, 165, 250, 0.03); }
.audit-meta {
  color: var(--text);
  font-size: 12px;
  max-width: 400px;
  word-wrap: break-word;
}
.mono { font-family: 'Consolas', 'Monaco', monospace; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .admin-split { grid-template-columns: 1fr; }
  .admin-list-card { position: static; max-height: 500px; }
  .admin-page { padding: 32px 24px 60px; }
  .admin-topnav-inner { padding: 14px 24px; }
}
@media (max-width: 760px) {
  .admin-topnav-inner { gap: 16px; flex-wrap: wrap; padding: 12px 16px; }
  .admin-brand { padding-right: 0; border-right: none; }
  .admin-tabs { width: 100%; overflow-x: auto; }
  .admin-user-chip { padding-left: 0; border-left: none; }
  .admin-page { padding: 24px 16px 60px; }
  .admin-page-head h1 { font-size: 24px; }
  .admin-stat-value { font-size: 28px; }
  .ticket-detail-header { flex-direction: column; padding: 18px 20px; }
  .ticket-detail-section { padding: 18px 20px; }
  .ticket-form-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Admin: Settings tab ---------- */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 4px;
}
.settings-card {
  background: var(--panel, rgba(20,28,38,0.75));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 22px 24px;
}
.settings-card-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.settings-card-ico {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.settings-card-title {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--silver-pale, #e8eef5);
}
.settings-card-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim, #94a3b8);
  line-height: 1.5;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--border, rgba(255,255,255,0.06));
}
.settings-row:last-child { border-bottom: none; }
.settings-row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.settings-row-label strong {
  display: block;
  font-size: 14px;
  color: var(--silver-pale, #e8eef5);
  margin-bottom: 2px;
}
.settings-row-hint {
  display: block;
  font-size: 12px;
  color: var(--text-dim, #94a3b8);
  line-height: 1.4;
}
.settings-row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-row-status {
  font-size: 12px;
  color: var(--text-dim, #94a3b8);
}
/* Toggle switch */
.settings-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.settings-switch input { position: absolute; opacity: 0; pointer-events: none; }
.settings-switch-slider {
  width: 44px;
  height: 24px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.settings-switch-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #f8fafc;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.settings-switch input:checked + .settings-switch-slider {
  background: var(--mint, #34d399);
}
.settings-switch input:checked + .settings-switch-slider::after {
  transform: translateX(20px);
}
.settings-switch input:disabled + .settings-switch-slider {
  opacity: 0.6;
  cursor: not-allowed;
}
.settings-switch-label {
  font-size: 13px;
  color: var(--text-dim, #94a3b8);
}

/* ============================================================
 * Rank colors — used in /forums.html, /staff.html, anywhere a
 * username needs to show its in-game / on-site rank.
 *
 * Pattern:
 *   <span class="rank-name rank-staff-admin">Daniel</span>
 *   <span class="rank-pill rank-donor-zenyte">Zenyte</span>
 *
 * Staff colors are roughly tier-coded: helper cyan, mod blue, admin red,
 * owner gold. Donor colors match the V2 PlayerGroup donator ranks.
 * ============================================================ */
:root {
  /* Match the hiscores .staff-* / .donor-* palette so a player's color is
     identical on /highscores.html and /forums.html. If you tweak one, tweak
     the other (highscores.html lines 264-274). */
  --rank-support: #38bdf8;  /* "Support" tier — sky blue. */
  --rank-mod:    #ffffff;
  --rank-admin:  #ef4444;
  --rank-owner:  #facc15;

  --rank-sapphire: #3b82f6;
  --rank-emerald: #10b981;
  --rank-ruby: #ef4444;
  --rank-diamond: #cbd5e1;
  --rank-onyx: #64748b;
  --rank-zenyte: #f59e0b;
}

.rank-name {
  font-weight: 700;
  font-family: var(--font-ui, var(--font-body));
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
}
.rank-name.rank-staff-support { color: var(--rank-support); }
.rank-name.rank-staff-mod    { color: var(--rank-mod);    }
.rank-name.rank-staff-admin  { color: var(--rank-admin);  }
.rank-name.rank-staff-owner  { color: var(--rank-owner);  text-shadow: 0 0 10px rgba(250, 204, 21, 0.6); }

/* Donor color overrides staff color ONLY if no staff role; staff color wins
   in markup ordering (we apply staff class last in JS when both present). */
.rank-name.rank-donor-sapphire { color: var(--rank-sapphire); }
.rank-name.rank-donor-emerald { color: var(--rank-emerald); }
.rank-name.rank-donor-ruby { color: var(--rank-ruby); }
.rank-name.rank-donor-diamond { color: var(--rank-diamond); }
.rank-name.rank-donor-onyx { color: var(--rank-onyx); }
.rank-name.rank-donor-zenyte { color: var(--rank-zenyte); text-shadow: 0 0 10px rgba(245,158,11,0.55); }

/* Compact tag/pill, sits next to the name. */
.rank-pill {
  display: inline-block;
  font-family: var(--font-ui, var(--font-body));
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1.4;
  background: rgba(255,255,255,0.03);
}
.rank-pill.rank-staff-support { color: var(--rank-support); }
.rank-pill.rank-staff-mod    { color: var(--rank-mod);    }
.rank-pill.rank-staff-admin  { color: var(--rank-admin);  }
.rank-pill.rank-staff-owner  { color: var(--rank-owner);  }
.rank-pill.rank-donor-sapphire { color: var(--rank-sapphire); }
.rank-pill.rank-donor-emerald { color: var(--rank-emerald); }
.rank-pill.rank-donor-ruby { color: var(--rank-ruby); }
.rank-pill.rank-donor-diamond { color: var(--rank-diamond); }
.rank-pill.rank-donor-onyx { color: var(--rank-onyx); }
.rank-pill.rank-donor-zenyte { color: var(--rank-zenyte); text-shadow: 0 0 10px rgba(245,158,11,0.55); }

/* Icon-in-front-of-name: the icon inherits the parent .rank-name color so
   it always tints together with the username. */
.rank-name .rank-ico {
  display: inline-block;
  margin-right: 4px;
  font-size: 1em;
  line-height: 1;
  vertical-align: -1px;
  filter: drop-shadow(0 0 4px currentColor);
}
/* Owner crown gets a stronger glow because the gold is the marquee rank. */
.rank-name.rank-staff-owner .rank-ico {
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.7));
}
.rank-name.rank-donor-zenyte .rank-ico {
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6));
}

/* ============================================================
 * Live chatbox — used by /js/chatbox.js which mounts the panel
 * into any page that includes <div id="chat-mount"></div>.
 * Keep these rules in site.css (not page-scoped) so the chat
 * looks identical on every forum page.
 * ============================================================ */
.chat-panel {
  background: linear-gradient(180deg, rgba(15, 30, 60, 0.7) 0%, rgba(5, 10, 25, 0.85) 100%);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  margin-bottom: var(--sp-5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.18), rgba(14, 116, 144, 0.10));
}
.chat-head h2 {
  margin: 0;
  font-family: var(--font-display); font-size: 18px; letter-spacing: 4px;
  text-transform: uppercase; color: var(--silver-pale);
  display: flex; align-items: center; gap: 10px;
}
.chat-head h2 .chat-ico {
  filter: drop-shadow(0 0 8px rgba(110, 231, 183, 0.5));
}
.chat-status {
  font-size: 12px; color: var(--text-dim);
  font-family: var(--font-ui); letter-spacing: 2px;
  /* Now a <button>: reset the default browser chrome and make it read as a
     clickable pill that opens the presence popover. */
  background: transparent; border: 1px solid transparent;
  padding: 4px 10px; border-radius: var(--r-sm, 6px);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chat-status:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border, #1e293b);
  color: var(--text-bright, #f1f5f9);
}
.chat-status-caret { font-size: 10px; opacity: 0.7; }
.chat-status .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint); margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 8px rgba(110, 231, 183, 0.7);
  animation: chat-pulse 2s infinite;
}
@keyframes chat-pulse { 50% { opacity: 0.4; } }

.chat-list {
  height: 280px;
  overflow-y: auto;
  padding: 14px 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.chat-msg {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 14px; line-height: 1.5;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  transition: background 0.1s;
}
.chat-msg:hover { background: rgba(255, 255, 255, 0.02); }
.chat-msg .time {
  color: var(--text-dim); font-size: 11px; flex-shrink: 0; width: 48px;
  font-family: ui-monospace, Menlo, monospace;
}
.chat-msg .author { flex-shrink: 0; }
.chat-msg .body {
  color: var(--text-bright); word-wrap: break-word; word-break: break-word; flex: 1;
}
.chat-msg.deleted .body { color: var(--text-dim); font-style: italic; }
.chat-msg .delete-btn,
.chat-msg .mute-btn {
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 14px; padding: 0 4px;
  opacity: 0; transition: opacity 0.15s, color 0.15s;
}
.chat-msg:hover .delete-btn,
.chat-msg:hover .mute-btn { opacity: 1; }
.chat-msg .delete-btn:hover { color: var(--rose); }
.chat-msg .mute-btn:hover   { color: var(--amber); }

.chat-form {
  display: flex; gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
}
.chat-form input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: 15px;
}
.chat-form input:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.15); }
.chat-form button { padding: 0 22px; }
.chat-signin {
  padding: 14px 22px; text-align: center; color: var(--text-dim);
  background: rgba(0, 0, 0, 0.2); border-top: 1px solid var(--border);
  font-family: var(--font-ui); letter-spacing: 1px;
}
.chat-signin a { color: var(--mint); }

/* ---------- Rank legend ----------
   No outer container box — just the individual colored pills floating in
   their parent (typically the footer between the link columns and the
   copyright line). Pills self-style and self-color via .rank-legend-item. */
.rank-legend {
  max-width: 1300px;
  margin: 14px auto 18px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

/* ============================================================
 * Layout editor (drag-to-position) — admin+/owner only
 * Activated by /js/forum-layout.js
 * ============================================================ */
#layout-editor-bar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(15, 30, 60, 0.92), rgba(5, 10, 25, 0.96));
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
}
.layout-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--silver-pale);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-ui, var(--font-body));
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  transition: border-color 0.15s, background 0.15s;
}
.layout-btn:hover { border-color: var(--border-bright); background: rgba(96, 165, 250, 0.12); }
.layout-btn-primary { color: var(--mint); border-color: var(--mint); }
.layout-btn-primary:hover { background: rgba(110, 231, 183, 0.12); }
.layout-btn-danger { color: var(--rose); border-color: var(--rose); }
.layout-btn-danger:hover { background: rgba(244, 63, 94, 0.12); }

/* While editing: subtle backdrop dim so the draggable sections pop. */
body.layout-editing {
  background: rgba(0, 0, 0, 0.0);  /* no-op, but room for future tint */
}

/* Draggable section visual treatment. */
.layout-draggable {
  outline: 2px dashed var(--mint);
  outline-offset: 4px;
  transition: outline-color 0.15s;
}
.layout-draggable.layout-dragging {
  outline-color: var(--amber);
  opacity: 0.88;
  cursor: grabbing !important;
}

/* The draggable section needs `position: relative` so the floating drag
   chip can anchor to it. Apply only while editing so we don't disturb the
   natural layout otherwise. */
.layout-draggable { position: relative; }

/* Floating chip overlay on each editable section. Anchored just above the
   top edge so it doesn't intrude into the section's content. */
.layout-drag-chip {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  background: linear-gradient(90deg, rgba(110, 231, 183, 0.95), rgba(30, 64, 175, 0.95));
  color: #020617;
  border-radius: 999px;
  font-family: var(--font-ui, var(--font-body));
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 800;
  cursor: grab;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  touch-action: none;
}
.layout-drag-chip:active { cursor: grabbing; }
.layout-drag-chip-ico { font-size: 14px; line-height: 1; }
.layout-drag-chip-hint {
  font-weight: 600;
  letter-spacing: 1.5px;
  font-size: 9px;
  opacity: 0.7;
  text-transform: lowercase;
  padding-left: 4px;
  border-left: 1px solid rgba(2, 6, 23, 0.3);
}
/* Legend label removed from the HTML — kept this rule only so any stray
   .rank-legend-label still inherits a sensible style if it reappears. */
.rank-legend-label { display: none; }

.rank-legend-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;      /* float pills centered in their row */
  align-items: center;
  gap: 8px 10px;
  padding: 0;
}
.rank-legend-row::-webkit-scrollbar { display: none; }
.rank-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid currentColor;
  font-family: var(--font-ui, var(--font-body));
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.rank-legend-item .rank-ico {
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 0 3px currentColor);
}
@media (max-width: 700px) {
  .rank-legend { border-radius: var(--r-md); flex-direction: column; gap: 8px; padding: 12px; }
  .rank-legend-label { border-right: none; padding-right: 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); width: 100%; text-align: center; }
  .rank-legend-row { flex-wrap: wrap; justify-content: center; }
}
.rank-legend-item.rank-staff-support { color: var(--rank-support); }
.rank-legend-item.rank-staff-mod    { color: var(--rank-mod);    }
.rank-legend-item.rank-staff-admin  { color: var(--rank-admin);  }
.rank-legend-item.rank-staff-owner  { color: var(--rank-owner);  }
.rank-legend-item.rank-staff-owner .rank-ico { filter: drop-shadow(0 0 8px rgba(250,204,21,0.7)); }
.rank-legend-item.rank-donor-sapphire { color: var(--rank-sapphire); }
.rank-legend-item.rank-donor-emerald { color: var(--rank-emerald); }
.rank-legend-item.rank-donor-ruby { color: var(--rank-ruby); }
.rank-legend-item.rank-donor-diamond { color: var(--rank-diamond); }
.rank-legend-item.rank-donor-onyx { color: var(--rank-onyx); }
.rank-legend-item.rank-donor-zenyte { color: var(--rank-zenyte); text-shadow: 0 0 10px rgba(245,158,11,0.55); }
.rank-legend-item.rank-donor-zenyte .rank-ico { filter: drop-shadow(0 0 6px rgba(245,158,11,0.6)); }

/* ============================================================
 * Forums + Shoutbox
 * ============================================================ */
.shoutbox {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 0;
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.shoutbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.shoutbox-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--silver-pale);
  margin: 0;
}
.shoutbox-online {
  font-size: 12px;
  color: var(--text-dim);
}
.shoutbox-online .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mint);
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(110,231,183,0.7);
}
.shoutbox-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shoutbox-msg {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.5;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.shoutbox-msg:last-child { border-bottom: none; }
.shoutbox-msg .time {
  color: var(--text-dim);
  font-size: 11px;
  flex-shrink: 0;
  width: 48px;
  font-family: ui-monospace, Menlo, monospace;
}
.shoutbox-msg .author {
  flex-shrink: 0;
}
.shoutbox-msg .body {
  color: var(--text);
  word-wrap: break-word;
  word-break: break-word;
  flex: 1;
}
.shoutbox-msg.deleted .body {
  color: var(--text-dim);
  font-style: italic;
}
.shoutbox-msg .delete-btn,
.shoutbox-msg .mute-btn,
.chat-msg .delete-btn,
.chat-msg .mute-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.shoutbox-msg:hover .delete-btn,
.shoutbox-msg:hover .mute-btn,
.chat-msg:hover .delete-btn,
.chat-msg:hover .mute-btn { opacity: 1; }
.shoutbox-msg .delete-btn:hover,
.chat-msg .delete-btn:hover { color: var(--rose); }
.shoutbox-msg .mute-btn:hover,
.chat-msg .mute-btn:hover { color: var(--amber); }

/* Timeout + Ban hover buttons — share the .mute-btn / .delete-btn
   visual treatment (hidden until row hover) but use distinct colors so
   moderators can read them at a glance. Timeout sits next to mute and
   uses the same amber; ban gets a heavier rose to read as a stronger
   action than delete. */
.shoutbox-msg .timeout-btn,
.shoutbox-msg .ban-btn,
.chat-msg .timeout-btn,
.chat-msg .ban-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.shoutbox-msg:hover .timeout-btn,
.shoutbox-msg:hover .ban-btn,
.chat-msg:hover .timeout-btn,
.chat-msg:hover .ban-btn { opacity: 1; }
.shoutbox-msg .timeout-btn:hover,
.chat-msg .timeout-btn:hover { color: var(--amber); }
.shoutbox-msg .ban-btn:hover,
.chat-msg .ban-btn:hover { color: var(--rose); filter: brightness(1.2); }

/* ============================================================
   Moderation dropdown trigger (⋯) + popover menu + modal.
   Replaces the previous row of four separate hover icons. One
   trigger per message keeps the chat layout calm; the modal's
   two-step confirm makes accidental bans essentially impossible.
   ============================================================ */
.mod-trigger-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.mod-trigger {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 6px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.chat-msg:hover .mod-trigger,
.shoutbox-msg:hover .mod-trigger { opacity: 1; }
.mod-trigger:hover { color: var(--text-bright); }

.mod-dropdown {
  /* fixed positioning + JS-computed top/left so the menu can escape the
     .chat-list overflow clipping (which would otherwise hide it on the
     bottom-most messages). */
  position: fixed;
  z-index: 250;
  min-width: 180px;
  background: var(--surface-2, #0c1322);
  border: 1px solid var(--border, #1e293b);
  border-radius: var(--r-sm, 6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.mod-dropdown button {
  background: transparent;
  border: none;
  color: var(--text, #cbd5e1);
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.1s;
}
.mod-dropdown button:hover { background: rgba(255, 255, 255, 0.04); }
.mod-dropdown button[data-act="ban"] { color: var(--rose, #fb7185); }
.mod-dropdown button[data-act="delete"] { color: var(--rose, #fb7185); }
.mod-dropdown-sep {
  height: 1px;
  background: var(--border, #1e293b);
  margin: 4px 0;
}

.mod-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(2, 6, 23, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.mod-modal[hidden] { display: none; }
.mod-modal-panel {
  background: var(--surface, #0a0f1c);
  border: 1px solid var(--border, #1e293b);
  border-radius: var(--r-md, 10px);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mod-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #1e293b);
}
.mod-modal-head h3 {
  font-family: var(--font-display, inherit);
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--silver-pale, #f0f9ff);
  margin: 0;
}
.mod-modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.mod-modal-close:hover { color: var(--text-bright); }
.mod-modal-body { padding: 18px 20px; }
.mod-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.mod-modal-field label {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mod-modal-field input,
.mod-modal-field select {
  background: var(--surface-2, #0c1322);
  border: 1px solid var(--border, #1e293b);
  border-radius: var(--r-sm, 6px);
  color: var(--text-bright, #f1f5f9);
  padding: 9px 12px;
  font-size: 14px;
  width: 100%;
  font-family: inherit;
}
.mod-modal-field input:focus,
.mod-modal-field select:focus {
  outline: none;
  border-color: var(--mint, #6ee7b7);
}
.mod-modal-custom-row {
  display: flex;
  gap: 8px;
}
.mod-modal-custom-row input { flex: 1; }
.mod-modal-custom-row select { flex: 0 0 120px; }
.mod-modal-hint {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}
.mod-modal-req {
  color: var(--amber, #fbbf24);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}
.mod-modal-err {
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: var(--rose, #fb7185);
  padding: 8px 12px;
  border-radius: var(--r-sm, 6px);
  font-size: 13px;
}
.mod-modal-summary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, #1e293b);
  border-left: 3px solid var(--mint, #6ee7b7);
  padding: 14px 16px;
  border-radius: var(--r-sm, 6px);
  color: var(--text-bright, #f1f5f9);
  font-size: 14px;
  line-height: 1.5;
}
.mod-modal-summary-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.mod-modal-summary-reason {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text, #cbd5e1);
  border-top: 1px solid var(--border, #1e293b);
  padding-top: 8px;
}
.mod-modal-warn {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: var(--r-sm, 6px);
  color: var(--amber, #fbbf24);
  font-size: 12px;
}
.mod-modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border, #1e293b);
  background: rgba(0, 0, 0, 0.18);
}

/* Presence popover — opened by clicking the chat header status pill.
   Lists every account currently watching the chat (heartbeat in last 60s),
   ordered by rank then username. Uses position:fixed + JS-computed coords
   so it isn't clipped by the chat-list overflow. */
.presence-dropdown {
  position: fixed;
  z-index: 250;
  min-width: 220px;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface-2, #0c1322);
  border: 1px solid var(--border, #1e293b);
  border-radius: var(--r-sm, 6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui, inherit);
}
.presence-head {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 8px 14px 6px;
  border-bottom: 1px solid var(--border, #1e293b);
}
.presence-body {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.presence-row {
  padding: 6px 14px;
  font-size: 13px;
  line-height: 1.4;
}
.presence-row:hover { background: rgba(255, 255, 255, 0.03); }
.presence-empty {
  padding: 12px 14px;
  color: var(--text-dim);
  font-size: 12px;
  font-style: italic;
}

.shoutbox-form {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.shoutbox-form input {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 12px;
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: 14px;
}
.shoutbox-form input:focus {
  outline: none;
  border-color: var(--mint);
}
.shoutbox-form button {
  padding: 0 18px;
}
.shoutbox-signin {
  padding: 14px 18px;
  text-align: center;
  color: var(--text-dim);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}

/* Forum category grid */
.forum-category-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.forum-category-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 0.15s, background 0.15s;
  text-decoration: none;
  color: inherit;
}
.forum-category-card:hover {
  border-color: var(--border-bright);
  background: var(--surface-2);
}
.forum-category-card .cat-ico {
  font-size: 28px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.forum-category-card .cat-meta {
  flex: 1;
  min-width: 0;
}
.forum-category-card .cat-name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver-pale);
}
.forum-category-card .cat-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
}
.forum-category-card .cat-stats {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.forum-category-card .cat-stats strong {
  color: var(--silver);
  font-size: 16px;
  font-weight: 700;
}
.forum-category-card.locked .cat-name::after {
  content: ' 🔒';
  font-size: 12px;
  color: var(--amber);
}

/* Forum thread list (inside a category) */
.forum-thread-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.forum-thread-row:hover { border-color: var(--border-bright); }
.forum-thread-row.sticky {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.04);
}
.forum-thread-row .thread-title {
  flex: 1; min-width: 0;
  font-size: 15px;
  color: var(--silver-pale);
  font-weight: 600;
}
.forum-thread-row .thread-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}
.forum-thread-row .thread-stats {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
  min-width: 90px;
}
.forum-thread-row .thread-stats strong { color: var(--silver); }
.forum-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: middle;
}
.forum-badge.sticky { background: rgba(251, 191, 36, 0.15); color: var(--amber); }
.forum-badge.locked { background: rgba(96, 165, 250, 0.15); color: var(--blue-bright); }

/* Thread view + posts */
.forum-post {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  overflow: hidden;
}
.forum-post-author {
  padding: 18px;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  text-align: center;
}
.forum-post-author .author-name { display: block; margin-bottom: 6px; font-size: 14px; }
.forum-post-author .author-pills { margin-top: 6px; min-height: 22px; }
.forum-post-author .author-pills .rank-pill { margin-left: 0; margin-right: 4px; }
.forum-post-author .author-since {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 10px;
}
.forum-post-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.forum-post-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.forum-post-time {
  font-size: 12px;
  color: var(--text-dim);
}
.forum-post-edited {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}
.forum-post-content {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.forum-post-content p { margin: 0 0 1em; }
.forum-post-content p:last-child { margin-bottom: 0; }
.forum-post-content pre {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px;
  overflow-x: auto;
  font-size: 13px;
  margin: 8px 0;
}
.forum-post-content code {
  background: rgba(0,0,0,0.3);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}
.forum-post-content a { color: var(--mint); }
.forum-post-content .mention {
  color: var(--mint-bright);
  font-weight: 600;
  background: rgba(110,231,183,0.08);
  padding: 1px 4px;
  border-radius: 3px;
}
.forum-post-content blockquote {
  border-left: 3px solid var(--border-bright);
  margin: 8px 0;
  padding: 4px 12px;
  color: var(--text-dim);
}
.forum-post-actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
}
.forum-post-actions button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12px;
}
.forum-post-actions button:hover { color: var(--silver-pale); border-color: var(--border-bright); }
.forum-post-actions button.liked { color: var(--rose); border-color: var(--rose); }
.forum-post-actions .spacer { flex: 1; }
.forum-post.deleted { opacity: 0.6; }
.forum-post.deleted .forum-post-content { font-style: italic; color: var(--text-dim); }

.forum-reply-form {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-top: 14px;
}
.forum-reply-form textarea {
  width: 100%;
  min-height: 140px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
.forum-reply-form textarea:focus { outline: none; border-color: var(--mint); }
.forum-reply-form .reply-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
}
.forum-reply-form .reply-hint { color: var(--text-dim); font-size: 12px; }

/* Member roster */
.member-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.member-tile {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.member-tile .rank-pill { font-size: 9px; padding: 1px 5px; }
.member-search {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.member-search input {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 12px;
  color: var(--text-bright);
  font-family: var(--font-body);
}
.member-search input:focus { outline: none; border-color: var(--mint); }

.pager {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 16px;
}
.pager button {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--silver);
  padding: 6px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.pager button:hover:not(:disabled) { border-color: var(--border-bright); color: var(--silver-pale); }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 760px) {
  .forum-post { grid-template-columns: 1fr; }
  .forum-post-author {
    border-right: none;
    border-bottom: 1px solid var(--border);
    text-align: left;
    padding: 12px 16px;
  }
  .forum-post-author .author-since { display: inline; margin-left: 8px; }
  .forum-category-card { flex-direction: column; align-items: flex-start; }
  .forum-category-card .cat-stats { flex-direction: row; align-self: stretch; justify-content: space-between; }
}