/* ============================================================
   Helix Games — Admin / Dashboard Pages
   HUD aesthetic across profile.html, leaderboards.html,
   achievements.html, admin.html, user.html, reset-password.html.

   Visual rules (mirrors home-style.css HUD layout):
     - flat bordered cards (no rounded corners except pills)
     - corner brackets on major content blocks
     - bracket-divider section titles `── TITLE ──`
     - Audiowide display for titles, VT323 for numerics
     - teal primary at rest, dark-orange (--helix-secondary) on hover
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   Shared utilities
   ───────────────────────────────────────────────────────────── */

/* Player search — leaderboards + user pages. */
.player-search {
  max-width: 500px;
  margin: 0 auto 20px;
  position: relative;
}
.player-search-results {
  background: var(--helix-bg-card);
  border: 1px solid rgba(var(--helix-primary-rgb), 0.4);
  margin-top: 6px;
  max-height: 360px;
  overflow-y: auto;
}
.player-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--helix-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--helix-primary-rgb), 0.15);
  transition: background 0.15s, color 0.15s;
}
.player-search-item:last-child { border-bottom: none; }
.player-search-item:hover,
.player-search-item:focus-visible {
  background: var(--helix-secondary-hover);
  color: var(--helix-secondary);
}
.player-search-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  object-fit: cover;
}
.player-search-name    { font-weight: 600; }
.player-search-handle  { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; margin-left: auto; }
.player-search-empty   { padding: 14px; text-align: center; color: rgba(255, 255, 255, 0.5); }

/* "This row is you" star in a leaderboard. */
.player-name .hx-icon { color: var(--helix-primary); }

/* Streak badge — shown on profile name, header. */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--helix-radius-pill);
  background: var(--helix-secondary);
  color: #fff;
  font-family: var(--helix-font-numeric);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 1px;
  box-shadow: 0 0 18px var(--helix-secondary-glow);
}
.streak-badge.quiet { background: rgba(255, 255, 255, 0.08); color: var(--helix-text); }

/* Follow button on public profile (user.html). */
.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 22px;
  background: transparent;
  color: var(--helix-primary);
  border: 1px solid var(--helix-primary);
  font-family: var(--helix-font-display);
  font-size: 0.85rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.follow-btn::before { content: '▸'; color: var(--helix-secondary); }
.follow-btn:hover,
.follow-btn:focus-visible {
  background: var(--helix-secondary);
  color: #0a0e10;
  border-color: var(--helix-secondary);
  box-shadow: 0 0 18px var(--helix-secondary-glow);
}
.follow-btn:hover::before { color: #0a0e10; }
.follow-btn.following {
  background: rgba(var(--helix-primary-rgb), 0.1);
  color: var(--helix-primary);
}
.follow-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────
   Common page header + section title
   ───────────────────────────────────────────────────────────── */
.page-header {
  text-align: center;
  margin-bottom: 40px;
}
.page-title {
  font-family: var(--helix-font-display);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 4px;
  color: var(--helix-primary);
  margin-bottom: 8px;
  text-shadow: 0 0 14px rgba(var(--helix-primary-rgb), 0.5);
}
.page-title::before { content: '── '; color: var(--helix-secondary); }
.page-title::after  { content: ' ──'; color: var(--helix-secondary); }
.page-subtitle {
  font-family: var(--helix-font-body);
  /* Explicit: this used to inherit 600 from the Bootstrap template's
     own .page-header component rule. */
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.55);
}

.section-title {
  font-family: var(--helix-font-display);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 4px;
  color: var(--helix-secondary);
  margin: 30px 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title::before { content: '◆'; color: var(--helix-primary); }

.no-scores {
  text-align: center;
  padding: 60px 20px;
  color: var(--helix-text-muted);
  font-family: var(--helix-font-body);
}
.no-scores-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0.5;
}

.view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: transparent;
  color: var(--helix-primary);
  border: 1px solid var(--helix-primary);
  font-family: var(--helix-font-display);
  font-size: 0.85rem;
  letter-spacing: 3px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  margin-top: 18px;
}
.view-all-btn::before { content: '▸'; color: var(--helix-secondary); }
.view-all-btn:hover {
  background: var(--helix-secondary);
  color: #0a0e10;
  border-color: var(--helix-secondary);
  box-shadow: 0 0 22px var(--helix-secondary-glow);
}
.view-all-btn:hover::before { color: #0a0e10; }

/* ─────────────────────────────────────────────────────────────
   HUD panel utility — used as base for big content blocks.
   Adds a thin teal border and corner brackets.
   ───────────────────────────────────────────────────────────── */
/* progress-stats is a layout grid; its individual .progress-card children
   already get a panel frame, so don't double-frame the parent.
   compare-section is an ID, not a class — user.html uses
   class="scores-container" for that panel so it's covered above. */
.profile-header,
.scores-container,
.achievements-preview,
.leaderboard-card,
.admin-section {
  position: relative;
  background: rgba(26, 31, 35, 0.7);
  border: 1px solid rgba(var(--helix-primary-rgb), 0.4);
  padding: 28px 32px;
  margin-bottom: 22px;
}
.profile-header::before,
.profile-header::after,
.scores-container::before,
.scores-container::after,
.achievements-preview::before,
.achievements-preview::after,
.leaderboard-card::before,
.leaderboard-card::after,
.admin-section::before,
.admin-section::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  transition: border-color 0.25s;
}
.profile-header::before,
.scores-container::before,
.achievements-preview::before,
.leaderboard-card::before,
.admin-section::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--helix-primary);
  border-left: 2px solid var(--helix-primary);
}
.profile-header::after,
.scores-container::after,
.achievements-preview::after,
.leaderboard-card::after,
.admin-section::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--helix-primary);
  border-right: 2px solid var(--helix-primary);
}

/* ─────────────────────────────────────────────────────────────
   Profile page
   ───────────────────────────────────────────────────────────── */
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}
.profile-header {
  display: flex;
  align-items: center;
  gap: 28px;
}
.profile-avatar {
  width: 110px;
  height: 110px;
  border: 2px solid var(--helix-primary);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(var(--helix-primary-rgb), 0.3);
  object-fit: cover;
}
.profile-info { flex: 1; }
.profile-name {
  font-family: var(--helix-font-display);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--helix-primary);
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(var(--helix-primary-rgb), 0.4);
}
.profile-username {
  font-family: var(--helix-font-body);
  font-size: 0.95rem;
  color: var(--helix-secondary);
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.profile-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.profile-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--helix-text-muted);
  font-family: var(--helix-font-body);
  font-size: 0.85rem;
}

/* ── Stat tiles (used on profile, achievements progress) ───── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}
.stat-card {
  position: relative;
  background: rgba(26, 31, 35, 0.7);
  border: 1px solid rgba(var(--helix-primary-rgb), 0.4);
  padding: 20px 16px;
  text-align: center;
  transition: border-color 0.25s, background 0.25s;
}
.stat-card:hover {
  border-color: var(--helix-secondary);
  background: var(--helix-secondary-wash);
}
.stat-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  display: block;
  filter: drop-shadow(0 0 6px rgba(var(--helix-primary-rgb), 0.4));
}
.stat-card .stat-value {
  font-family: var(--helix-font-numeric);
  font-size: 3rem;
  line-height: 1;
  color: var(--helix-primary);
  text-shadow: 0 0 12px rgba(var(--helix-primary-rgb), 0.55);
  display: block;
  margin-bottom: 4px;
}
.stat-card .stat-label {
  font-family: var(--helix-font-body);
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--helix-secondary);
}

/* ── Scores container (profile page) ──────────────────────── */
.game-scores { margin-bottom: 24px; }
.game-scores:last-child { margin-bottom: 0; }
.game-scores-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(var(--helix-primary-rgb), 0.25);
}
.game-icon { font-size: 1.6rem; filter: drop-shadow(0 0 6px rgba(var(--helix-primary-rgb), 0.4)); }
.game-title {
  font-family: var(--helix-font-display);
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: var(--helix-primary);
  text-transform: capitalize;
}
.scores-list {
  display: grid;
  gap: 6px;
}
.score-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 8px 12px;
  border-bottom: 1px dotted rgba(var(--helix-primary-rgb), 0.2);
  font-family: var(--helix-font-body);
}
.score-item:last-child { border-bottom: none; }
.score-value {
  font-family: var(--helix-font-numeric);
  font-size: 1.8rem;
  letter-spacing: 1px;
  color: var(--helix-primary);
}
.score-meta {
  color: var(--helix-text-muted);
  font-size: 0.82rem;
  letter-spacing: 1px;
}

/* ── Achievements preview / grid ──────────────────────────── */
.achievements-preview { /* container has bracket-frame from utility above */ }
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.achievement-badge {
  background: rgba(26, 31, 35, 0.7);
  border: 1px solid rgba(var(--helix-primary-rgb), 0.4);
  padding: 18px 16px;
  text-align: center;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.achievement-badge:hover {
  border-color: var(--helix-secondary);
  background: var(--helix-secondary-wash);
  box-shadow: 0 0 18px var(--helix-secondary-glow);
}
.achievement-icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 6px rgba(var(--helix-primary-rgb), 0.4));
}
.achievement-title {
  font-family: var(--helix-font-display);
  font-size: 0.95rem;
  letter-spacing: 2px;
  color: var(--helix-primary);
}

/* ─────────────────────────────────────────────────────────────
   Achievements page (full list with rarity / filter tabs)
   ───────────────────────────────────────────────────────────── */
.achievements-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}
.progress-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}
.progress-card {
  position: relative;
  background: rgba(26, 31, 35, 0.7);
  border: 1px solid rgba(var(--helix-primary-rgb), 0.4);
  padding: 22px 18px;
  text-align: center;
  transition: border-color 0.25s, background 0.25s;
}
.progress-card:hover {
  border-color: var(--helix-secondary);
  background: var(--helix-secondary-wash);
}
.progress-value {
  font-family: var(--helix-font-numeric);
  font-size: 3rem;
  line-height: 1;
  color: var(--helix-primary);
  text-shadow: 0 0 12px rgba(var(--helix-primary-rgb), 0.55);
  display: block;
}
.progress-label {
  font-family: var(--helix-font-body);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--helix-secondary);
  margin-top: 4px;
}

.achievement-card {
  position: relative;
  background: rgba(26, 31, 35, 0.7);
  border: 1px solid rgba(var(--helix-primary-rgb), 0.4);
  padding: 22px 22px 18px;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.25s;
}
.achievement-card::before,
.achievement-card::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  transition: border-color 0.25s;
  pointer-events: none;
}
.achievement-card::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--helix-primary);
  border-left: 2px solid var(--helix-primary);
}
.achievement-card::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--helix-primary);
  border-right: 2px solid var(--helix-primary);
}
.achievement-card.locked {
  opacity: 0.5;
  filter: grayscale(0.8);
}
.achievement-card.unlocked:hover {
  border-color: var(--helix-secondary);
  background: var(--helix-secondary-wash);
  transform: translateY(-3px);
  box-shadow: 0 0 22px var(--helix-secondary-glow);
}
.achievement-card.unlocked:hover::before {
  border-top-color: var(--helix-secondary);
  border-left-color: var(--helix-secondary);
}
.achievement-card.unlocked:hover::after {
  border-bottom-color: var(--helix-secondary);
  border-right-color: var(--helix-secondary);
}
.achievement-card.unlocked .achievement-icon {
  filter: drop-shadow(0 0 10px var(--helix-secondary-glow));
}
.achievement-description {
  font-family: var(--helix-font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--helix-text-muted);
  margin: 8px 0 14px;
}
.achievement-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px dotted rgba(var(--helix-primary-rgb), 0.2);
  gap: 8px;
  flex-wrap: wrap;
}
.achievement-points {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--helix-font-numeric);
  font-size: 1.4rem;
  color: var(--helix-secondary);
  letter-spacing: 1px;
}
.achievement-rarity,
.rarity-badge {
  font-family: var(--helix-font-body);
  font-size: 0.66rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid currentColor;
}
.rarity-common,    .achievement-rarity.rarity-common,    .rarity-badge.rarity-common    { color: rgba(255, 255, 255, 0.6); }
.rarity-rare,      .achievement-rarity.rarity-rare,      .rarity-badge.rarity-rare      { color: #5cd8ff; }
.rarity-epic,      .achievement-rarity.rarity-epic,      .rarity-badge.rarity-epic      { color: #b886ff; }
.rarity-legendary, .achievement-rarity.rarity-legendary, .rarity-badge.rarity-legendary { color: var(--helix-secondary); }
.achievement-date {
  font-family: var(--helix-font-body);
  font-size: 0.72rem;
  color: var(--helix-secondary);
  letter-spacing: 1px;
  margin-top: 8px;
}
.no-achievements {
  text-align: center;
  padding: 50px 20px;
  color: var(--helix-text-muted);
}
.no-achievements-icon { font-size: 4rem; margin-bottom: 14px; opacity: 0.4; }

/* ─────────────────────────────────────────────────────────────
   Leaderboards page
   ───────────────────────────────────────────────────────────── */
.leaderboard-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}
.game-tabs,
.filter-tabs,
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.game-tab,
.filter-tab,
.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: transparent;
  color: var(--helix-text-muted);
  border: 1px solid rgba(var(--helix-primary-rgb), 0.4);
  font-family: var(--helix-font-body);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.game-tab:hover,
.game-tab:focus-visible,
.filter-tab:hover,
.filter-tab:focus-visible,
.admin-tab:hover,
.admin-tab:focus-visible {
  border-color: var(--helix-secondary);
  color: var(--helix-secondary);
  background: var(--helix-secondary-wash);
}
.game-tab.active,
.filter-tab.active,
.admin-tab.active {
  background: var(--helix-primary);
  color: #0a0e10;
  border-color: var(--helix-primary);
}
.game-tab-icon { font-size: 1rem; }

.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(var(--helix-primary-rgb), 0.3);
}
.leaderboard-title {
  font-family: var(--helix-font-display);
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: var(--helix-primary);
  text-shadow: 0 0 10px rgba(var(--helix-primary-rgb), 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.leaderboard-title-icon { font-size: 1.4rem; }
.leaderboard-count {
  font-family: var(--helix-font-body);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--helix-secondary);
}
.leaderboard-table {
  display: grid;
  gap: 4px;
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 56px 1fr 130px 140px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(var(--helix-primary-rgb), 0.04);
  border: 1px solid rgba(var(--helix-primary-rgb), 0.15);
  font-family: var(--helix-font-body);
  transition: border-color 0.2s, background 0.2s;
}
.leaderboard-row:hover {
  border-color: var(--helix-secondary);
  background: var(--helix-secondary-wash);
}
.leaderboard-row.current-user-row {
  border-color: var(--helix-secondary);
  background: var(--helix-secondary-hover);
}
.leaderboard-rank {
  font-family: var(--helix-font-numeric);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--helix-primary);
  text-align: center;
}
.leaderboard-rank.rank-1 { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.55); }
.leaderboard-rank.rank-2 { color: #c0c0c0; text-shadow: 0 0 8px rgba(192, 192, 192, 0.4); }
.leaderboard-rank.rank-3 { color: #cd7f32; text-shadow: 0 0 8px rgba(205, 127, 50, 0.4); }
.leaderboard-player {
  /* wrapper around .player-name in each row; lets the flex layout
     inherit naturally without adding visible chrome */
  min-width: 0;
}
.player-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--helix-text);
  font-weight: 600;
}
.leaderboard-score {
  font-family: var(--helix-font-numeric);
  font-size: 1.6rem;
  text-align: right;
  color: var(--helix-secondary);
  text-shadow: 0 0 8px var(--helix-secondary-glow);
}
.leaderboard-meta {
  font-size: 0.78rem;
  color: var(--helix-text-muted);
  letter-spacing: 1px;
  text-align: right;
}

/* Compare table (user.html head-to-head).
   The container uses class="scores-container" so it picks up the panel
   frame above. Only the per-row diff colours are unique here. */
.compare-win  { color: var(--helix-primary); font-family: var(--helix-font-numeric); }
.compare-lose { color: #e94c4c;             font-family: var(--helix-font-numeric); }
.compare-tie  { color: var(--helix-text-muted); }

/* ─────────────────────────────────────────────────────────────
   Admin panel
   ───────────────────────────────────────────────────────────── */
.admin-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}
.admin-section { padding: 22px 26px; }
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.admin-search { display: flex; gap: 6px; flex: 1; min-width: 240px; }
.admin-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-count {
  font-family: var(--helix-font-body);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--helix-secondary);
  margin-left: auto;
}

.admin-input,
.admin-select {
  background: rgba(var(--helix-primary-rgb), 0.05);
  border: 1px solid rgba(var(--helix-primary-rgb), 0.4);
  padding: 10px 14px;
  color: var(--helix-text);
  font-family: var(--helix-font-body);
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}
.admin-input { flex: 1; min-width: 150px; }
.admin-input:focus,
.admin-select:focus {
  border-color: var(--helix-secondary);
  background: var(--helix-secondary-wash);
}
.admin-select-sm { padding: 4px 8px; font-size: 0.8rem; }

.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid currentColor;
  font-family: var(--helix-font-body);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.admin-btn-sm { padding: 4px 10px; font-size: 0.7rem; }
.admin-btn-warn    { color: #f1c40f; }
.admin-btn-warn:hover,
.admin-btn-warn:focus-visible { background: #f1c40f; color: #0a0e10; box-shadow: 0 0 14px rgba(241, 196, 15, 0.4); }
.admin-btn-danger  { color: #e74c3c; }
.admin-btn-danger:hover,
.admin-btn-danger:focus-visible { background: #e74c3c; color: #fff; box-shadow: 0 0 14px rgba(231, 76, 60, 0.4); }
.admin-btn-success { color: var(--helix-primary); }
.admin-btn-success:hover,
.admin-btn-success:focus-visible { background: var(--helix-primary); color: #0a0e10; box-shadow: 0 0 14px rgba(var(--helix-primary-rgb), 0.4); }

.admin-table-wrap { overflow-x: auto; border: 1px solid rgba(var(--helix-primary-rgb), 0.3); }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--helix-font-body);
  font-size: 0.85rem;
}
.admin-table th,
.admin-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px dotted rgba(var(--helix-primary-rgb), 0.2);
}
.admin-table th {
  background: rgba(var(--helix-primary-rgb), 0.08);
  color: var(--helix-secondary);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.admin-table tr:hover { background: var(--helix-secondary-faint); }
.admin-table tr.row-banned { opacity: 0.45; }
.admin-table td.td-primary { color: var(--helix-primary); font-weight: 600; }
.admin-table td.td-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--helix-font-body);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.status-badge.status-active { color: var(--helix-primary); }
.status-badge.status-banned { color: #e74c3c; }

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.admin-page-info {
  font-family: var(--helix-font-body);
  font-size: 0.78rem;
  letter-spacing: 2px;
  color: var(--helix-text-muted);
}

.progress-bar-mini {
  height: 6px;
  background: rgba(var(--helix-primary-rgb), 0.15);
  border: 1px solid rgba(var(--helix-primary-rgb), 0.3);
  overflow: hidden;
  min-width: 80px;
}
.progress-bar-fill {
  height: 100%;
  background: var(--helix-primary);
  box-shadow: 0 0 6px rgba(var(--helix-primary-rgb), 0.55);
}

/* ─────────────────────────────────────────────────────────────
   Confirm modal (admin destructive actions)
   ───────────────────────────────────────────────────────────── */
/* Uses .auth-modal-overlay + .auth-modal classes from auth-ui.css;
   nothing extra needed here. */

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .profile-header { flex-direction: column; text-align: center; }
  .profile-avatar { margin: 0 auto; }
  .leaderboard-row {
    grid-template-columns: 50px 1fr;
    grid-template-rows: auto auto;
  }
  .leaderboard-row .leaderboard-score,
  .leaderboard-row .leaderboard-meta {
    grid-column: 1 / -1;
    text-align: left;
  }
  .page-title { font-size: 2.2rem; letter-spacing: 2px; }
  .admin-table { font-size: 0.78rem; }
}