:root {
  color-scheme: light;
  --ink: #131417;
  --muted: #69707a;
  --paper: #dce4f0;
  --panel: #ffffff;
  --line: #d9d6cc;
  --red: #d82d2d;
  --teal: #087f8c;
  --gold: #d7a31a;
  --green: #27875d;
  --shadow: 0 24px 70px rgba(28, 31, 35, 0.14);
  --surface: #ccd8ea;
  --panel-soft: #f8f9fa;
  --input-bg: #ffffff;
  --row-head: #f0eee6;
  --soft-hover: #eef2f8;
  --overlay: rgba(19, 20, 23, 0.48);
}

.dark {
  color-scheme: dark;
  --ink: #f4f1ea;
  --muted: #a8b0bf;
  --paper: #090d15;
  --panel: #131a26;
  --line: #2e3a4d;
  --red: #f87171;
  --teal: #2dd4bf;
  --gold: #fbbf24;
  --green: #22c55e;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
  --surface: #1d2736;
  --panel-soft: #172131;
  --input-bg: #0f1724;
  --row-head: #1b2534;
  --soft-hover: #223048;
  --overlay: rgba(3, 7, 18, 0.72);
}

* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    linear-gradient(135deg, rgba(100, 140, 200, 0.12), transparent 40%),
    linear-gradient(225deg, rgba(8, 127, 140, 0.10), transparent 44%),
    var(--paper);
}

.dark body {
  background:
    radial-gradient(circle at 18% 8%, rgba(45, 212, 191, 0.14), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(248, 113, 113, 0.10), transparent 28%),
    linear-gradient(135deg, #090d15 0%, #101827 48%, #0b111c 100%);
}

button,
input {
  font: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

button {
  border: 0;
  cursor: pointer;
}

.shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px clamp(16px, 5vw, 58px);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 210px;
}

.brand-mark, .brand-logo {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: white;
  font-weight: 900;
  background: conic-gradient(from 180deg, var(--red), var(--gold), var(--teal), var(--red));
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 5px 5px 0 var(--ink);
}
.brand-logo {
  background: none;
  border: none;
  box-shadow: none;
  object-fit: contain;
}

.hero-logo {
  max-width: 400px;
  margin-bottom: 16px;
  mix-blend-mode: multiply;
}

.dark .hero-logo {
  mix-blend-mode: normal;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.36));
}

.brand strong {
  display: block;
  line-height: 1;
}

.brand span {
  color: var(--muted);
  font-size: 12px;
}

/* ── Desktop Navigation ── */
.desktop-nav {
  display: flex;
  gap: 2px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-width: 0;
}

.desktop-nav::-webkit-scrollbar { display: none; }

.nav-link {
  padding: 8px 14px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
}

.nav-link:hover {
  color: var(--ink);
  background: var(--surface);
}

.nav-link.is-active {
  color: var(--ink);
  font-weight: 700;
}

/* ── Admin Dropdown ── */
.admin-dropdown {
  position: relative;
  flex-shrink: 0;
}

.admin-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-dropdown-arrow {
  font-size: 10px;
  transition: transform 0.2s;
}

.admin-dropdown.is-open .admin-dropdown-arrow {
  transform: rotate(180deg);
}

.admin-dropdown-menu {
  display: none;
  position: fixed;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding: 4px;
}

.admin-dropdown-menu.is-open {
  display: block;
}

.admin-dropdown-item {
  display: block;
  padding: 8px 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.15s;
}

.admin-dropdown-item:hover {
  background: var(--surface);
}

.admin-dropdown-item.is-active {
  color: var(--teal);
  font-weight: 700;
}

/* ── Topbar Right ── */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.desktop-account {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════
   NOTIFICATION BELL & PANEL
   ═══════════════════════════════════════════════════════════ */

.notif-bell {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s;
}

.notif-bell:hover {
  background: var(--surface);
}

.notif-bell.is-open {
  background: var(--surface);
  border-color: var(--ink);
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: white;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.notif-panel {
  display: none;
  position: fixed;
  width: 340px;
  max-height: 400px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  z-index: 100;
  overflow: hidden;
}

.notif-panel.is-open {
  display: block;
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.notif-header h4 {
  margin: 0;
  font-size: 14px;
}

.notif-list {
  max-height: 340px;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s;
}

.notif-item:last-child {
  border-bottom: 0;
}

.notif-item:hover {
  background: var(--surface);
}

.notif-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.notif-content {
  min-width: 0;
}

.notif-content strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.notif-content .muted {
  font-size: 12px;
}

.notif-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 768px) {
  .notif-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 60vh;
    border-radius: 16px 16px 0 0;
  }
}

/* ── Hamburger Button ── */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.hamburger-btn:hover {
  background: var(--surface);
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.hamburger-btn.is-open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile Menu ── */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100vh;
  height: 100dvh;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  z-index: 100;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.mobile-menu-links {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.mobile-nav-link {
  display: block;
  padding: 12px 20px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.15s;
}

.mobile-nav-link:hover {
  background: var(--surface);
}

.mobile-nav-link.is-active {
  color: var(--teal);
  font-weight: 700;
  background: rgba(8, 127, 140, 0.06);
}

.mobile-menu-divider {
  height: 1px;
  margin: 8px 16px;
  background: var(--line);
}

.mobile-menu-section-title {
  padding: 8px 20px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mobile-menu-footer {
  padding: 16px;
  border-top: 1px solid var(--line);
}

.mobile-menu-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mobile-menu-actions .primary,
.mobile-menu-actions .ghost {
  flex: 1;
  justify-content: center;
}

.mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s;
}

.mobile-menu-backdrop.is-open {
  opacity: 1;
}

.account {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 210px;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.theme-toggle:hover {
  background: var(--surface);
  border-color: var(--ink);
}

.ghost,
.primary,
.icon-button {
  min-height: 38px !important;
  border: 1px solid var(--ink) !important;
  border-radius: 7px !important;
}

.ghost {
  padding: 0 14px !important;
  color: var(--ink) !important;
  background: var(--input-bg) !important;
}

.primary {
  padding: 0 16px !important;
  color: white !important;
  background: var(--red) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
}

.icon-button {
  width: 40px;
  color: var(--ink);
  background: var(--input-bg);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--teal) 72%, white);
  outline-offset: 2px;
}

.hero {
  display: flex;
  justify-content: center;
  padding: clamp(28px, 7vw, 84px) clamp(16px, 5vw, 58px) 28px;
  text-align: center;
}

.hero-copy {
  width: min(100%, 920px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-headline {
  max-width: 920px;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(32px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero-accent {
  color: var(--teal);
}

.hero-sub {
  max-width: 680px;
  margin-top: 16px;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  justify-content: center;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.hero-cta:active {
  transform: scale(0.97);
}

.hero-stats {
  display: flex;
  gap: clamp(16px, 4vw, 40px);
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-stat-num {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hero-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════
   HOME TOP 5 PREVIEW
   ═══════════════════════════════════════════════════════════ */

.home-top5 {
  max-width: 600px;
  margin: 0 auto 32px;
  padding: 0 clamp(16px, 5vw, 58px);
}

.home-top5-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.home-top5-header h3 {
  margin: 0;
  font-size: 18px;
}

.home-top5-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.home-top5-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}

.home-top5-item:last-child { border-bottom: 0; }
.home-top5-item:hover { background: var(--surface); }

.home-top5-item.gold { background: linear-gradient(90deg, rgba(251, 191, 36, 0.08), transparent 50%); }
.home-top5-item.silver { background: linear-gradient(90deg, rgba(156, 163, 175, 0.06), transparent 50%); }
.home-top5-item.bronze { background: linear-gradient(90deg, rgba(217, 119, 6, 0.06), transparent 50%); }

.home-top5-rank {
  font-size: 16px;
  font-weight: 900;
  min-width: 32px;
  color: var(--muted);
}

.home-top5-item.gold .home-top5-rank { color: #d4a017; font-size: 20px; }
.home-top5-item.silver .home-top5-rank { color: #6b7280; }
.home-top5-item.bronze .home-top5-rank { color: #d97706; }

.home-top5-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.home-top5-info {
  flex: 1;
  min-width: 0;
}

.home-top5-info strong {
  display: block;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-top5-info .muted {
  font-size: 12px;
}

.home-top5-pumb {
  font-weight: 900;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .home-top5 { padding: 0 12px; margin-bottom: 24px; }
  .home-top5-item { padding: 10px 12px; gap: 10px; }
  .home-top5-avatar { width: 30px; height: 30px; }
  .home-top5-pumb { font-size: 13px; }
  .home-top5-rank { font-size: 14px; min-width: 28px; }
}

.placeholder-page {
  padding: 40px 0;
}

.placeholder-page h2 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED LEADERBOARD (Phase 2)
   ═══════════════════════════════════════════════════════════ */

.lb-header {
  margin-bottom: 20px;
}

.lb-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.lb-header-top h2 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
}

.lb-stats-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.lb-stat-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 80px;
}

.lb-stat-mini b {
  font-size: 18px;
  color: var(--ink);
}

.lb-stat-mini span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Filters */
.lb-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.lb-search {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}

.lb-search:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(8, 127, 140, 0.15);
}

.lb-filter-select {
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  min-width: 140px;
}

.lb-filter-select:focus {
  outline: none;
  border-color: var(--teal);
}

.lb-clear-filter {
  padding: 10px 14px;
  font-size: 13px;
}

/* Board */
.lb-board {
  overflow-x: auto;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.lb-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.7fr) minmax(220px, 1.8fr) minmax(180px, 1.1fr) minmax(150px, 0.8fr) minmax(120px, 0.7fr);
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.lb-row > div {
  min-width: 0;
}

.lb-row:last-child {
  border-bottom: 0;
}

.lb-row.lb-head {
  background: var(--ink);
  color: white;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  align-items: center;
}

.lb-row.rank-pos-1 {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.08), transparent 40%);
}

.lb-row.rank-pos-2 {
  background: linear-gradient(90deg, rgba(156, 163, 175, 0.08), transparent 40%);
}

.lb-row.rank-pos-3 {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.08), transparent 40%);
}

.lb-rank-num {
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  color: var(--muted);
}

.rank-pos-1 .lb-rank-num { color: #d4a017; font-size: 20px; }
.rank-pos-2 .lb-rank-num { color: #6b7280; font-size: 18px; }
.rank-pos-3 .lb-rank-num { color: #d97706; font-size: 18px; }

.lb-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lb-avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
  flex-shrink: 0;
  object-fit: cover;
}

.lb-player-info {
  min-width: 0;
}

.lb-player-info strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.lb-badges {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.lb-badge {
  display: inline-block;
  padding: 1px 6px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.lb-city {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-community {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lb-community-logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.lb-pumbility {
  font-weight: 900;
  font-size: 15px;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rank-pos-1 .lb-pumbility { color: #d4a017; }

.lb-head .lb-rank-num,
.lb-head .lb-player,
.lb-head .lb-community,
.lb-head .lb-city,
.lb-head .lb-pumbility,
.lb-head .lb-category {
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

.lb-head-rank,
.lb-head-player,
.lb-head-community,
.lb-head-city {
  text-align: left;
}

.lb-head-pumbility {
  padding-right: 0;
  text-align: right;
}

.lb-head-category {
  padding-left: 12px;
  text-align: center;
}

.lb-last-sync {
  font-size: 11px;
  color: var(--muted);
}

.lb-category {
  text-align: center;
}

.lb-cat-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: white;
}

.lb-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
}

.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  color: var(--muted);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   LEADERBOARD MOBILE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .lb-header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .lb-stats-row {
    gap: 6px;
  }

  .lb-stat-mini {
    padding: 8px 10px;
    min-width: 60px;
  }

  .lb-stat-mini b {
    font-size: 15px;
  }

  .lb-filters {
    flex-direction: column;
  }

  .lb-search {
    min-width: 0;
  }

  .lb-filter-select {
    min-width: 0;
    width: 100%;
  }

  .lb-row {
    grid-template-columns: 40px 1fr 80px;
    padding: 10px 12px;
    gap: 6px;
    font-size: 12px;
  }

  .lb-row.lb-head .lb-community,
  .lb-row.lb-head .lb-category,
  .lb-community,
  .lb-category {
    display: none;
  }

  .lb-rank-num {
    font-size: 14px;
  }

  .lb-avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .lb-player-info strong {
    font-size: 13px;
  }

  .lb-pumbility {
    font-size: 13px;
  }

  .lb-head-pumbility {
    padding-right: 0;
  }

  .lb-badge {
    font-size: 8px;
    padding: 1px 4px;
  }
}

/* ═══════════════════════════════════════════════════════════
   DYNAMIC PAGES & GALLERY (Phase 3)
   ═══════════════════════════════════════════════════════════ */

.dynamic-page {
  max-width: 900px;
  padding: 24px 0;
}

.page-title {
  margin: 0 0 20px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
}

.page-content {
  line-height: 1.7;
  font-size: 15px;
}

.page-content h1, .page-content h2, .page-content h3 {
  margin-top: 24px;
  margin-bottom: 12px;
  color: var(--ink);
}

.page-content p { margin: 0 0 16px; }
.page-content ul, .page-content ol { margin: 0 0 16px; padding-left: 24px; }
.page-content li { margin-bottom: 8px; }

.page-content code {
  padding: 2px 6px;
  background: var(--surface);
  border-radius: 4px;
  font-size: 13px;
}

.page-content.empty { padding: 40px 0; }

.page-updated {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.gallery-header h2 { margin: 0; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.gallery-item {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.gallery-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }

.gallery-img-wrapper {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--surface);
}

.gallery-img { width: 100%; height: 100%; object-fit: cover; }

.gallery-item-title { padding: 10px 14px 4px; font-weight: 700; font-size: 14px; }
.gallery-item-desc { padding: 0 14px 10px; font-size: 12px; }

.gallery-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.gallery-item:hover .gallery-delete-btn { opacity: 1; }

.gallery-empty {
  padding: 60px 20px;
  text-align: center;
  border: 2px dashed var(--line);
  border-radius: 12px;
}

/* Gallery & Pages Mobile */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .gallery-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .gallery-item-title { font-size: 12px; padding: 8px 10px 2px; }
  .gallery-item-desc { font-size: 11px; padding: 0 10px 8px; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════ */

.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(4px);
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  z-index: 210;
  transition: background 0.15s;
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

.lightbox-content {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  margin-top: 12px;
  text-align: center;
  color: white;
}

.lightbox-title {
  font-size: 16px;
  font-weight: 700;
}

.lightbox-desc {
  font-size: 13px;
  margin-top: 4px;
  opacity: 0.8;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 28px;
  cursor: pointer;
  z-index: 210;
  transition: background 0.15s;
}

.lightbox-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.25); }
.lightbox-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 24px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 10px; right: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   COMMUNITIES BY CITY (Phase 4)
   ═══════════════════════════════════════════════════════════ */

.community-city-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.community-city-group {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.community-city-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.15s;
}

.community-city-header:hover {
  background: var(--surface);
}

.community-city-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.community-city-name {
  font-weight: 700;
  font-size: 16px;
}

.community-city-count {
  font-size: 13px;
}

.community-city-chevron {
  font-size: 14px;
  color: var(--muted);
}

.community-city-groups {
  padding: 0 14px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE ENHANCED (Phase 5)
   ═══════════════════════════════════════════════════════════ */

.profile-stats-bar {
  display: flex;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  background: var(--surface);
  border-radius: 8px;
}

.profile-stat {
  flex: 1;
  text-align: center;
}

.profile-stat b {
  display: block;
  font-size: 20px;
  color: var(--ink);
}

.profile-stat span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
}

.profile-history {
  display: flex;
  flex-direction: column;
}

.profile-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.profile-history-row:last-child {
  border-bottom: none;
}

.profile-history-info {
  min-width: 0;
}

.profile-history-info strong {
  display: block;
  font-size: 14px;
}

.profile-history-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.profile-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  background: var(--surface);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.profile-rank-badge.top {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
}

.profile-score {
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .profile-stats-bar {
    gap: 6px;
    padding: 10px;
  }

  .profile-stat b {
    font-size: 16px;
  }

  .profile-stat span {
    font-size: 10px;
  }

  .profile-history-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .community-city-groups {
    grid-template-columns: 1fr;
  }
}

.stage {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(8, 127, 140, 0.85), rgba(216, 45, 45, 0.8)),
    radial-gradient(circle at center, white, transparent 35%);
  box-shadow: var(--shadow);
}

.stage::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 2px dashed rgba(255, 255, 255, 0.65);
  border-radius: 999px;
}

.arrow-grid {
  position: absolute;
  inset: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  transform: rotate(-8deg);
}

.arrow {
  display: grid;
  place-items: center;
  color: white;
  font-size: 22px;
  font-weight: 900;
  border: 2px solid rgba(255, 255, 255, 0.88);
  background: rgba(19, 20, 23, 0.28);
  border-radius: 4px;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
  animation: pulse 2.6s ease-in-out infinite;
}

.arrow:nth-child(1),
.arrow:nth-child(9) {
  background: rgba(59, 130, 246, 0.45);
  border-color: #60a5fa;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.5), inset 0 0 8px rgba(59, 130, 246, 0.3);
}

.arrow:nth-child(3),
.arrow:nth-child(7) {
  background: rgba(59, 130, 246, 0.45);
  border-color: #60a5fa;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.5), inset 0 0 8px rgba(59, 130, 246, 0.3);
}

.arrow:nth-child(2),
.arrow:nth-child(6) {
  background: rgba(236, 72, 153, 0.45);
  border-color: #f472b6;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.5), inset 0 0 8px rgba(236, 72, 153, 0.3);
}

.arrow:nth-child(4),
.arrow:nth-child(8) {
  background: rgba(236, 72, 153, 0.45);
  border-color: #f472b6;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.5), inset 0 0 8px rgba(236, 72, 153, 0.3);
}

.arrow:nth-child(5) {
  background: rgba(16, 185, 129, 0.5);
  border-color: #34d399;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.6), inset 0 0 10px rgba(16, 185, 129, 0.3);
  font-size: 26px;
}
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }
  45% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.content {
  padding: 24px clamp(16px, 5vw, 58px) 72px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stat {
  padding: 18px;
  background: color-mix(in srgb, var(--panel) 82%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 8px;
}

.stat b {
  display: block;
  font-size: clamp(24px, 4vw, 38px);
}

.stat span {
  color: var(--muted);
  font-size: 13px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.toolbar h2 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 4vw, 46px);
}

.search {
  width: min(100%, 360px);
  padding: 12px 14px;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.board {
  overflow: hidden;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.empty-state {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 28px;
}

.empty-state strong {
  font-size: 20px;
}

.empty-state span {
  max-width: 620px;
  color: var(--muted);
  line-height: 1.5;
}

.row {
  display: grid;
  grid-template-columns: 76px minmax(180px, 1.4fr) repeat(2, minmax(90px, 0.7fr));
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.row:last-child {
  border-bottom: 0;
}

.row.head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--row-head);
}

.rank {
  font-size: 22px;
  font-weight: 900;
}

.player {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.avatar {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  color: white;
  font-weight: 900;
  background: var(--teal);
  border: 1px solid var(--ink);
  border-radius: 8px;
}

.player strong,
.song-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player span,
.muted {
  color: var(--muted);
  font-size: 13px;
}

.pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  color: white;
  background: var(--green);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.song-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.song-card {
  min-height: 178px;
  padding: 18px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 6px 6px 0 rgba(19, 20, 23, 0.16);
}

.song-card .song-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
  background: var(--surface);
}

.song-card .chart {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 6px 10px;
  color: white;
  background: var(--red);
  border-radius: 6px;
  font-weight: 900;
}

.song-card h3 {
  margin: 0 0 5px;
}

.song-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.profile-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.profile-info h2 {
  margin: 0;
}

.profile-info .muted {
  margin: 0;
}

.piugame-mini {
  padding: 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.piugame-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.piugame-info {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}

.piugame-info div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.profile-panel,
.score-panel {
  padding: 22px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.profile-panel .avatar {
  width: 72px;
  height: 72px;
  margin-bottom: 14px;
  font-size: 24px;
}

.score-list {
  display: grid;
  gap: 10px;
}

.score-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* ── Custom Modal (override Bootstrap .modal default display:none) ── */
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 18px;
  background: var(--overlay);
  overflow-y: auto;
}

.modal-backdrop > .modal {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: auto !important;
  height: auto !important;
  min-height: 0 !important;
  width: min(100%, 380px);
  max-width: 380px;
  max-height: min(90vh, 720px);
  max-height: min(90dvh, 720px);
  overflow-y: auto;
  padding: 24px;
  background: var(--panel, #fff);
  border: 2px solid var(--ink, #333);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 10000;
  text-align: center;
  font-family: inherit;
  color: inherit;
}

.modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.modal h2 {
  margin: 0 0 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 34px;
}

.modal-backdrop > .auth-modal {
  width: min(100%, 380px);
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 36px);
  overflow: auto;
  align-self: center;
  padding: 24px;
}

.auth-modal .modal-head {
  align-items: flex-start;
}

.auth-modal .field {
  text-align: left;
}

.auth-modal .field label {
  text-align: left;
}

.auth-modal .hero-actions {
  justify-content: center;
  margin-top: 18px;
}

.toast-region {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10050;
  width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}

.app-toast {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.app-toast.success { border-color: var(--teal); }
.app-toast.error { border-color: var(--red); }
.app-toast.info { border-color: var(--ink); }

.app-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
}

.app-toast.success .app-toast-icon { background: var(--teal); }
.app-toast.error .app-toast-icon { background: var(--red); }

.app-toast p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.app-toast-close {
  min-height: 32px !important;
  width: 32px;
  padding: 0 !important;
}

.field {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.field label {
  font-size: 13px;
  font-weight: 800;
}

.field input,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--input-bg);
}

select,
textarea {
  color: var(--ink);
  background: var(--input-bg);
}

textarea {
  min-height: auto;
  padding: 10px 12px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"])::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
}

.notice {
  margin: 16px 0 0;
  padding: 12px;
  color: color-mix(in srgb, var(--gold) 55%, var(--ink));
  background: color-mix(in srgb, var(--gold) 14%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.error {
  color: var(--red);
  font-weight: 800;
}

.chart-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.chart-badge-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 22px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  color: white;
}

.chart-badge-small.type-S {
  background: var(--red);
}

.chart-badge-small.type-D {
  background: var(--teal);
}

.chart-badge-small.type-C {
  background: var(--gold);
}

.type-toggle {
  display: flex;
  gap: 4px;
}

.gen-type-btn {
  padding: 8px 16px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: var(--input-bg);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
}

.gen-type-btn.active {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--soft-hover);
}

.gen-category {
  margin-top: 14px;
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.event-tab {
  margin-top: 14px;
}

.bracket-rounds {
  margin-top: 8px;
}

.bracket-head {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.bracket-round-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.ev-cat-btn {
  padding: 8px 16px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: var(--input-bg);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
}

.ev-cat-btn.active {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--soft-hover);
}

.ev-song-results {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-top: 4px;
}

.ev-song-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

.ev-song-result:hover {
  background: var(--soft-hover);
}

.ev-selected-songs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ev-selected-song {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface);
  border-radius: 6px;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════
   EVENT MANAGE PAGE
   ═══════════════════════════════════════════════════════════ */

.event-manage-page {
  padding: 0 0 40px;
}

.event-manage-topbar {
  padding: 12px 0;
  margin-bottom: 8px;
}

.event-manage-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.event-manage-hero-main {
  min-width: 0;
}

.event-manage-title-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.event-manage-title-row h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
}

.event-manage-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.event-manage-meta > span:not(.pill)::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line);
  margin-right: 8px;
  vertical-align: middle;
}

.event-manage-command-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.event-manage-switcher {
  margin-bottom: 12px;
}

.event-manage-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
}

.event-manage-tab {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--input-bg);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
}

.event-manage-tab.active {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--soft-hover);
}

.event-manage-tab.new-tab {
  border-style: dashed;
  color: var(--teal);
}

.event-manage-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}

.event-manage-content-flat {
  background: transparent;
  border: none;
  padding: 0;
}

.event-manage-waiting-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
  gap: 14px;
  align-items: start;
}

.event-manage-side {
  display: grid;
  gap: 14px;
}

.event-manage-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}

.event-manage-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.event-manage-panel-head h3,
.event-manage-panel h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
}

.event-manage-ready-panel {
  border-color: rgba(8, 127, 140, 0.28);
}

.event-score-panel {
  padding-top: 0;
}

.event-score-panel-head,
.report-scores-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.event-score-panel-head h3,
.report-scores-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
}

.event-score-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}

.event-score-scroll .score-table-header,
.event-score-scroll .score-input-row,
.event-score-scroll .pm-song-headers,
.event-score-scroll .pm-match-card {
  min-width: 720px;
}

.report-scores-body {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: auto;
}

.score-table-header {
  position: sticky;
  top: 0;
  z-index: 1;
}

.score-input-row {
  align-items: center;
}

.score-total,
.score-total-header,
.pm-player-total {
  font-variant-numeric: tabular-nums;
}

.event-manage-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.event-manage-header h2 {
  margin: 0;
  font-size: 18px;
}

.event-manage-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.event-manage-section h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.event-manage-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* Event Card (Tab Event) */
.event-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}

.event-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.event-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.event-name-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.event-name-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.event-manage-btn {
  font-size: 12px;
  padding: 4px 12px;
}

.event-card-v2 {
  padding: 0;
  overflow: hidden;
}

.event-card-summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  cursor: pointer;
}

.event-card-summary-main {
  min-width: 0;
  flex: 1;
}

.event-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.event-card-title-row h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
}

.event-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.event-card-meta > span:not(.pill)::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line);
  margin-right: 8px;
  vertical-align: middle;
}

.event-card-summary-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.event-card-chevron {
  color: var(--muted);
  font-size: 12px;
  padding: 5px 0;
}

.event-card-progress-compact .event-round-progress {
  margin: 10px 0 0;
}

.event-card-progress-compact .event-round-pill {
  font-size: 11px;
  padding: 3px 9px;
}

.event-card-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.event-card-tab {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.event-card-tab.active {
  border-color: var(--teal);
  background: rgba(8, 127, 140, 0.08);
  color: var(--ink);
}

.event-card-tab-panel {
  padding: 16px;
}

.event-tab-panel-scroll {
  overflow-x: auto;
}

.event-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.event-overview-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
  min-width: 0;
}

.event-overview-item span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.event-overview-item strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.event-bracket-actions {
  display: grid;
  gap: 10px;
}

/* Event Round Progress */
.event-round-progress {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.event-round-pill {
  padding: 4px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  background: var(--line);
  color: var(--muted);
}

.event-round-pill.current {
  background: var(--gold);
  color: #000;
}

.event-round-pill.done {
  background: var(--teal);
  color: #fff;
}

/* Event Collapsible Rounds */
.event-round-collapsible {
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.event-round-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  background: var(--surface);
}

.event-round-toggle:hover {
  background: var(--soft-hover);
}

/* Event Participants */
.event-participants-section {
  margin: 12px 0;
}

.players-header {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}

.event-participant-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 16px;
  padding: 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.event-participant-chip-grid {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-participant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.event-participant-chip {
  background: var(--surface);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
}

.event-participant-list-manage {
  margin-top: 8px;
}

.event-participant-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.event-participant-num {
  font-size: 13px;
  color: var(--muted);
  min-width: 24px;
}

.event-participant-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}

.event-participant-add {
  margin-top: 8px;
}

/* Event Song Section */
.event-song-section {
  margin: 12px 0;
}

.event-song-list {
  margin-top: 6px;
}

/* Event Bracket Info */
.event-bracket-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.event-bracket-round-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-bracket-round-name {
  font-weight: 600;
  font-size: 13px;
}

.event-bracket-arrow {
  color: var(--muted);
  font-size: 12px;
}

/* Event Bracket Editor */
.event-bracket-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── User Table (Admin Modal) ── */
.user-table {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}

.user-row {
  display: grid;
  grid-template-columns: 40px 1fr 1fr 80px 60px 1fr 120px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  gap: 6px;
}

.user-row:last-child { border-bottom: none; }

.user-row-head {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
}

/* ── Event Gen Form ── */
.event-gen-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.event-gen-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, var(--muted) 8%);
}

.event-gen-step.active {
  border-color: color-mix(in srgb, var(--teal) 55%, var(--line));
  background: color-mix(in srgb, var(--teal) 10%, var(--panel));
}

.event-gen-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.event-gen-step.active .event-gen-step-number {
  background: var(--teal);
  color: #fff;
}

.event-gen-step-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.event-gen-step-copy strong {
  font-size: 12px;
  line-height: 1.1;
}

.event-gen-step-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.event-gen-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.event-gen-section {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.event-gen-section:last-child { border-bottom: none; }

.event-gen-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}

.event-gen-range {
  display: flex;
  gap: 8px;
  align-items: center;
}

.event-gen-range input {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
}

.event-gen-cat-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.event-gen-actions {
  padding: 12px 0 0;
  display: flex;
  gap: 8px;
}

/* ── Participant List (Modal) ── */
.participant-list {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 8px;
}

.participant-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.participant-row:last-child { border-bottom: none; }

/* ── Round Song Search ── */
.round-song-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}

.ev-song-results {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: var(--panel);
}

/* ═══════════════════════════════════════════════════════════
   LEADERBOARD (Event Tab)
   ═══════════════════════════════════════════════════════════ */

.event-leaderboard {
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.event-leaderboard-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--ink);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.event-leaderboard-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.event-leaderboard-row:nth-child(even) {
  background: color-mix(in srgb, var(--surface) 42%, transparent);
}

.event-leaderboard-row:last-child {
  border-bottom: none;
}

.event-leaderboard-empty {
  margin: 12px 0;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lb-rank {
  width: 60px;
  font-weight: 700;
}

.lb-name {
  flex: 1;
  font-weight: 600;
}

.lb-score {
  width: 120px;
  text-align: right;
  font-weight: 700;
}

.lb-song {
  width: 100px;
  text-align: right;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════
   REPORT SCORES (Event Manage Page)
   ═══════════════════════════════════════════════════════════ */

.report-scores-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--ink);
  color: white;
  border-radius: 8px 8px 0 0;
}

.report-scores-header h3 {
  margin: 0;
  color: white;
}

.report-scores-actions {
  display: flex;
  gap: 8px;
}

.report-scores-body {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.score-table-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.score-input-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.score-input-row:last-child {
  border-bottom: none;
}

.score-rank {
  width: 60px;
  font-weight: 700;
  font-size: 14px;
}

.score-participant {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
}

.score-input {
  width: 100%;
  max-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  text-align: right;
}

.score-input:focus {
  outline: none;
  border-color: var(--ink);
}

.score-input-header {
  width: 100%;
  max-width: 200px;
  text-align: right;
}

.score-song-header {
  width: 100px;
  text-align: right;
  font-size: 11px;
  line-height: 1.3;
}

.event-song-score-input {
  width: 100px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  text-align: right;
}

.event-song-score-input:focus {
  outline: none;
  border-color: var(--ink);
}

.score-total {
  width: 100px;
  text-align: right;
  font-weight: 700;
  font-size: 14px;
  color: var(--red);
}

.score-total-header {
  width: 100px;
  text-align: right;
}

/* Event Winner Panel */
.event-winner-panel {
  margin: 16px 0;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(0, 200, 120, 0.05));
  border-radius: 8px;
  border: 1px solid var(--teal);
}

/* Podium */
.event-podium {
  margin: 16px 0;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06), rgba(0, 200, 120, 0.04));
  border-radius: 12px;
  border: 1px solid var(--line);
}
.podium-title {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}
.podium-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  padding: 0 20px;
}
.podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.podium-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
}
.podium-1 .podium-avatar {
  width: 52px;
  height: 52px;
  font-size: 18px;
  box-shadow: 0 0 0 3px #ffd700;
}
.podium-medal {
  font-size: 24px;
}
.podium-1 .podium-medal { font-size: 32px; }
.podium-name {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-label {
  font-size: 11px;
  color: var(--muted);
}
.podium-bar {
  width: 80px;
  border-radius: 6px 6px 0 0;
  margin-top: 4px;
}
.podium-1 .podium-bar { width: 90px; }

/* Round Selector Row */
.round-selector-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Picked Songs */
.event-picked-songs {
  margin-top: 8px;
}

.event-picked-song {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--surface);
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 4px;
}

.event-picked-num {
  font-weight: 700;
  color: var(--muted);
}

.event-picked-title {
  font-weight: 600;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   RANDOMIZER SONG PAGE
   ═══════════════════════════════════════════════════════════ */

.randomizer-page {
  padding: 0 0 40px;
}

.randomizer-container {
  max-width: 600px;
  margin: 0 auto;
}

.randomizer-display {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  margin-bottom: 24px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.randomizer-display.empty {
  background: var(--surface);
}

.randomizer-display.rolling {
  background: linear-gradient(135deg, var(--ink), #2d2d3a);
  border-color: var(--gold);
  animation: pulse-border 0.5s ease-in-out infinite alternate;
}

.randomizer-display.result {
  background: var(--panel);
  border-color: var(--teal);
}

@keyframes pulse-border {
  from { border-color: var(--gold); box-shadow: 0 0 10px rgba(215, 163, 26, 0.3); }
  to { border-color: var(--red); box-shadow: 0 0 20px rgba(216, 45, 45, 0.3); }
}

.randomizer-rolling-text {
  font-size: 28px;
  font-weight: 900;
  color: var(--gold);
  animation: blink 0.3s ease-in-out infinite alternate;
  letter-spacing: 4px;
}

@keyframes blink {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.randomizer-placeholder {
  font-size: 16px;
  color: var(--muted);
}

.randomizer-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.randomizer-chart-badge {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 12px;
  color: white;
}

.randomizer-chart-badge.type-S { background: var(--teal); }
.randomizer-chart-badge.type-D { background: var(--gold); color: #000; }
.randomizer-chart-badge.type-C { background: var(--ink); }

.randomizer-song-title {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 6px;
}

.randomizer-song-artist {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}

.randomizer-song-meta {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
}

.randomizer-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .randomizer-categories {
    grid-template-columns: 1fr;
  }
}

.randomizer-group {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.randomizer-group h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.randomizer-btn-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.randomizer-btn {
  font-size: 12px !important;
  padding: 6px 12px !important;
  min-width: 44px;
}

.randomizer-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.randomizer-actions {
  text-align: center;
  margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════
   CO-OP SONG LIST MODAL (Slot Machine)
   ═══════════════════════════════════════════════════════════ */

.coop-song-list-modal {
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.coop-slot {
  margin: 16px 0;
  padding: 12px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 10px;
}

.coop-slot.rolling {
  border-color: var(--gold);
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  animation: slot-pulse 0.4s ease-in-out infinite alternate;
}

.coop-slot.result {
  border-color: var(--teal);
  background: linear-gradient(135deg, rgba(8, 127, 140, 0.08), rgba(8, 127, 140, 0.02));
}

.coop-slot.idle {
  border-style: dashed;
}

@keyframes slot-pulse {
  from { box-shadow: 0 0 8px rgba(215, 163, 26, 0.3); }
  to { box-shadow: 0 0 16px rgba(215, 163, 26, 0.6); }
}

.coop-slot-window {
  overflow: hidden;
  padding: 10px;
  background: var(--input-bg);
  border-radius: 6px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coop-slot-item {
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.coop-slot-item.spinning {
  color: var(--gold);
  animation: slot-spin 0.08s linear infinite;
}

@keyframes slot-spin {
  0% { transform: translateY(-2px); opacity: 0.7; }
  50% { transform: translateY(2px); opacity: 1; }
  100% { transform: translateY(-2px); opacity: 0.7; }
}

.coop-slot-item.winner {
  color: var(--teal);
  font-size: 22px;
  animation: slot-win 0.5s ease-out;
}

@keyframes slot-win {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.coop-slot-item.placeholder {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.coop-song-list-scroll {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 8px 0;
  background: var(--surface);
}

.coop-song-item {
  padding: 7px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

.coop-song-item:last-child {
  border-bottom: none;
}

.coop-song-item:nth-child(even) {
  background: color-mix(in srgb, var(--surface) 38%, transparent);
}

.gen-song-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.gen-song-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gen-song-label {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.gen-cat-header {
  margin-bottom: 8px;
}

.weekly-gen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.weekly-gen-grid label {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.weekly-gen-grid label span {
  line-height: 1.2;
}

.weekly-gen-grid input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  background: var(--input-bg);
}

@media (max-width: 520px) {
  .gen-song-types {
    grid-template-columns: 1fr;
  }

  .gen-song-type {
    justify-content: space-between;
  }
}

.hidden {
  display: none;
}

.link-button {
  color: var(--teal);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
  padding: 0;
}

.link-button:hover {
  color: var(--red);
}

.danger {
  color: var(--red);
  border-color: var(--red);
}

.piugame-panel {
  padding: 22px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.steps {
  margin: 14px 0;
  padding: 14px;
  background: color-mix(in srgb, var(--teal) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--teal) 40%, var(--line));
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.steps p {
  margin: 4px 0;
}

.steps a {
  color: var(--teal);
}

textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: monospace;
  font-size: 12px;
  resize: vertical;
}

.avatar.has-photo {
  overflow: hidden;
  padding: 0;
}

.avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}

.page-btn {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--input-bg);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink);
}

.page-btn:hover:not(:disabled) {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}

.page-btn.active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.challenge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.challenge-header h2 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 4vw, 46px);
}

.challenge-timer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 14px;
}

.challenge-timer strong {
  font-size: 20px;
  color: var(--red);
}

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.challenge-card {
  padding: 20px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 6px 6px 0 rgba(19, 20, 23, 0.12);
}

.challenge-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.challenge-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 28px;
  padding: 0 10px;
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.challenge-card-title {
  margin: 0 0 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
}

.challenge-songs {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.challenge-song {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.challenge-song-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--ink);
  color: white;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.challenge-song-info {
  flex: 1;
  min-width: 0;
}

.challenge-song-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.challenge-song-ranking {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.ranking-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}

.ranking-pos {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  background: #e5e7eb;
  color: #374151;
}

.ranking-entry.gold .ranking-pos { background: #fbbf24; color: #78350f; }
.ranking-entry.silver .ranking-pos { background: #9ca3af; color: #1f2937; }
.ranking-entry.bronze .ranking-pos { background: #d97706; color: #fff; }

.ranking-entry.gold .ranking-name,
.ranking-entry.gold .ranking-score { color: #92400e; font-weight: 700; }

.ranking-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-score {
  flex-shrink: 0;
}

.challenge-delete-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
  font-size: 13px;
  margin-bottom: 8px;
}

.main-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0;
}

.main-tab {
  padding: 10px 20px;
  font-weight: 700;
  font-size: 15px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -2px;
}

.main-tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.main-tab:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cat-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.cat-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
}

.cat-tab.active {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--soft-hover);
}

.cat-tab:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cat-level {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.challenge-admin-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.challenge-songs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.challenge-song-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(19, 20, 23, 0.1);
}

.challenge-song-thumb {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.challenge-song-thumb-empty {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
  color: var(--muted);
  flex-shrink: 0;
}

.challenge-song-card .challenge-song-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--ink);
  color: white;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 900;
  flex-shrink: 0;
}

.challenge-song-card .challenge-song-info {
  flex: 1;
  min-width: 0;
}

.challenge-song-card .challenge-song-info h3 {
  margin: 0;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.challenge-ranking-section h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  margin: 0 0 12px;
}

.ranking-table {
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.rank-row {
  display: grid;
  grid-template-columns: 50px 1fr repeat(3, 100px) 110px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.rank-row:last-child { border-bottom: 0; }

.rank-row.rank-head {
  background: #f0eee6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.rank-row.top-1 { background: #fef9e7; }
.rank-row.top-2 { background: #f5f5f5; }
.rank-row.top-3 { background: #fdf2e9; }

.rank-pos {
  font-weight: 800;
  text-align: center;
}

.rank-name {
  font-weight: 700;
}

.rank-score {
  text-align: right;
  font-size: 13px;
}

.rank-total {
  text-align: right;
  color: var(--red);
  font-size: 16px;
}

@media (max-width: 920px) {
  .challenge-songs-grid {
    grid-template-columns: 1fr;
  }

  .rank-row {
    grid-template-columns: 40px 1fr 80px;
    font-size: 12px;
  }

  .rank-row .rank-score:nth-child(4),
  .rank-row .rank-score:nth-child(5) {
    display: none;
  }

  .rank-row.rank-head .rank-score:nth-child(4),
  .rank-row.rank-head .rank-score:nth-child(5) {
    display: none;
  }
}

.challenge-song-info .muted {
  font-size: 12px;
}

.edit-scores-table {
  margin-top: 14px;
}

.edit-score-row {
  display: grid;
  grid-template-columns: 1fr repeat(3, 80px) 90px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.edit-score-head {
  background: #f0eee6;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
}

.edit-score-entry {
  display: grid;
  grid-template-columns: 1fr repeat(3, 80px) 90px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.edit-score-input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  text-align: right;
}

.edit-score-total {
  text-align: right;
  color: var(--red);
}

.admin-score-actions {
  display: flex;
  gap: 8px;
}

.challenge-my-score {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
}

.challenge-join-section {
  margin-bottom: 16px;
  padding: 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.join-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.badges-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.badges-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.badges-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--gold) 24%, var(--panel));
  color: color-mix(in srgb, var(--gold) 55%, var(--ink));
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  margin-right: 4px;
}

.badge-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.leaderboard-badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
  margin-left: 4px;
}

.past-card {
  padding: 16px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(19, 20, 23, 0.1);
}

.past-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.past-songs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.past-winners {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.past-winner {
  font-size: 14px;
  padding: 2px 0;
}

.badge-item {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.challenge-admin-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.challenge-admin-actions .danger {
  width: 100%;
  text-align: center;
  justify-content: center;
  font-size: 13px;
}

/* ── Weekly Challenge Enhanced ── */
.weekly-challenge-panel { margin-top: 16px; }
.wc-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px;
}
.wc-cat-badge {
  padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
  color: #fff; text-transform: uppercase; flex-shrink: 0;
}
.wc-info { display: flex; flex-direction: column; gap: 2px; }
.wc-dates { font-size: 13px; font-weight: 600; }
.wc-pumb { font-size: 11px; color: var(--muted); }
.wc-songs-section, .wc-join-section, .wc-ranking-section {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 14px;
}
.wc-section-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.wc-songs-grid { display: flex; flex-direction: column; gap: 8px; }
.wc-join-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.wc-join-info { display: flex; align-items: center; gap: 10px; }
.wc-sync-section { margin-top: 12px; text-align: center; }
.wc-join-form { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.wc-pumb-info { display: flex; flex-direction: column; gap: 2px; }
.wc-ranking-list { display: grid; gap: 12px; }
.wc-ranking-entry {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.wc-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(90deg, #e0b212 0%, #ffd633 100%);
  color: #151515;
}
.wc-ranking-entry.is-second .wc-entry-head {
  background: linear-gradient(90deg, #d7dee8 0%, #f3f6fb 100%);
}
.wc-ranking-entry.is-third .wc-entry-head {
  background: linear-gradient(90deg, #d6a676 0%, #f2d1a7 100%);
}
.wc-entry-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.wc-entry-rank { font-weight: 900; font-size: 16px; }
.wc-entry-name {
  font-weight: 900;
  font-size: 23px;
  line-height: 1;
  min-width: 0;
}
.wc-entry-player .leaderboard-badge {
  background: rgba(17, 24, 39, 0.12);
  color: #111827;
}
.wc-entry-total-wrap { flex-shrink: 0; }
.wc-entry-total {
  font-size: 21px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.wc-entry-breakdown { display: grid; }
.wc-entry-song-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--panel) 78%, #f2f5fb);
  border-top: 1px solid var(--line);
}
.wc-entry-song-row:nth-child(even) {
  background: color-mix(in srgb, var(--panel) 88%, #ffffff);
}
.wc-entry-song-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.wc-entry-song-name {
  font-weight: 600;
  min-width: 0;
}
.wc-entry-song-score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex-shrink: 0;
}

.piugame-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.piugame-header h3 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
}

.piugame-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.piugame-stats .stat {
  padding: 12px;
  background: color-mix(in srgb, var(--panel) 82%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}

.piugame-stats .stat b {
  display: block;
  font-size: 22px;
}

.piugame-stats .stat span {
  color: var(--muted);
  font-size: 12px;
}

.piugame-info {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.piugame-info div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pill.verified {
  background: var(--green);
}

.pill.unverified {
  background: var(--muted);
}

.profile .stats.mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.profile .stats.mini .stat {
  padding: 10px;
  background: color-mix(in srgb, var(--panel) 82%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}

.profile .stats.mini .stat b {
  display: block;
  font-size: 18px;
}

.profile .stats.mini .stat span {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 920px) {
  .hero,
  .profile {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .brand,
  .account {
    min-width: 0;
  }

  .account {
    justify-content: flex-start;
  }

  .tabs {
    overflow-x: auto;
  }

  .stats,
  .song-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .row {
    grid-template-columns: 54px minmax(0, 1fr) 88px;
  }

  .row .hide-small,
  .row.head .hide-small {
    display: none;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 24px;
  }

  .stage {
    min-height: 260px;
  }

  .arrow-grid {
    inset: 36px;
  }

  .stats,
  .song-grid {
    grid-template-columns: 1fr;
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .search {
    width: 100%;
  }

  .score-item {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   LOADING SPINNER
   ═══════════════════════════════════════════════════════════ */

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--line);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-spinner span {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.clickable-name {
  cursor: pointer;
  transition: color 0.15s;
}

.clickable-name:hover {
  color: var(--teal);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   CO-OP PAIRING
   ═══════════════════════════════════════════════════════════ */

.pairing-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.pairing-actions .active {
  background: var(--ink);
  color: #fff;
}

.pairing-manual-form {
  margin-bottom: 10px;
}

.pairing-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pair-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}

.pair-chip-num {
  font-weight: 700;
  color: var(--muted);
}

.pair-chip-names {
  font-weight: 600;
}

.pair-plus {
  color: var(--teal);
  font-weight: 700;
  margin: 0 2px;
}

.pair-chip-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(0, 200, 120, 0.08);
  border: 1px solid var(--teal);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
}

.coop-score-row {
  background: rgba(0, 200, 120, 0.04);
}

/* ═══════════════════════════════════════════════════════════ */
/* Groups & Battles                                           */
/* ═══════════════════════════════════════════════════════════ */

.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.group-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.group-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 16px rgba(8,127,140,0.1);
}

.group-card-logo img,
.group-card-logo .group-logo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
}

.group-logo-placeholder {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: var(--line);
  font-weight: 700;
  font-size: 18px;
  color: var(--muted);
}
.group-logo-placeholder.large {
  width: 120px;
  height: 120px;
  font-size: 36px;
  border-radius: 16px;
}
.group-logo-placeholder.small {
  width: 40px;
  height: 40px;
  font-size: 14px;
  border-radius: 8px;
}

.group-card-info {
  flex: 1;
  min-width: 0;
}
.group-card-info h3 {
  margin: 0 0 4px;
  font-size: 16px;
}
.group-card-info .muted {
  display: block;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.group-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.group-type-badge.club {
  background: var(--red);
  color: #fff;
}
.group-type-badge.komunitas {
  background: var(--teal);
  color: #fff;
}

.group-detail-header {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 16px;
}
.group-detail-logo {
  position: relative;
}
.group-detail-logo img {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  object-fit: cover;
}
.logo-upload-btn {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.avatar-upload-btn {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.avatar-wrapper {
  position: relative;
  display: inline-block;
}
.avatar-wrapper .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
}

.group-detail-info {
  flex: 1;
}
.group-detail-info h2 {
  margin: 0 0 6px;
}
.group-detail-info .muted {
  display: block;
  font-size: 13px;
}

.role-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--line);
  color: var(--muted);
}

.members-list {
  margin-top: 12px;
}
.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.member-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
}
.member-actions {
  display: flex;
  gap: 4px;
}

.manager-panel {
  padding: 12px;
  background: rgba(8,127,140,0.05);
  border: 1px solid var(--teal);
  border-radius: 8px;
  margin-bottom: 12px;
}
.manager-panel h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.invite-notifications {
  padding: 12px 16px;
  background: rgba(215,163,26,0.08);
  border: 1px solid var(--gold);
  border-radius: 8px;
  margin-bottom: 16px;
}
.invite-notifications h4 {
  margin: 0 0 8px;
  font-size: 13px;
}
.invite-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
}

.invite-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}

.event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.event-row:hover { color: var(--teal); }
.event-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.event-status-badge.upcoming { background: var(--line); color: var(--muted); }
.event-status-badge.in_progress { background: var(--teal); color: #fff; }
.event-status-badge.finished { background: var(--gold); color: #fff; }
.event-status-badge.waiting { background: var(--line); color: var(--muted); }

.event-song-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.song-num {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--line);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.song-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.song-info .muted { font-size: 12px; }

.participant-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--line);
  border-radius: 12px;
  font-size: 12px;
  margin: 2px;
}

/* ── Battles ── */
.battles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.battle-card {
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.battle-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 16px rgba(8,127,140,0.1);
}
.battle-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.battle-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.battle-name {
  font-size: 12px;
  color: var(--muted);
}
.battle-type-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--teal);
  color: #fff;
  letter-spacing: 0.5px;
}
.player-battle-score-input {
  width: 120px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
}
.battle-card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.battle-club {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.battle-club-logo img,
.battle-club-logo .group-logo-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
}
.battle-club-logo.large img,
.battle-club-logo.large .group-logo-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 16px;
}
.battle-club-name {
  font-weight: 600;
  font-size: 13px;
  text-align: center;
}
.battle-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.battle-score {
  font-size: 24px;
  font-weight: 900;
}
.vs-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.battle-card-footer {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
}

.battle-detail-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 20px;
}
.battle-detail-club {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.battle-detail-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.battle-total-score {
  display: flex;
  align-items: center;
  gap: 16px;
}
.score-big {
  font-size: 42px;
  font-weight: 900;
}
.battle-winner-label {
  display: block;
  margin-top: 6px;
  padding: 4px 14px;
  background: var(--gold);
  color: #fff;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}

.battle-rounds-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.battle-round-card {
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.battle-round-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.round-num {
  padding: 2px 8px;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.battle-round-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.battle-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 120px;
}
.battle-player.winner {
  color: var(--teal);
}
.player-name {
  font-weight: 600;
  font-size: 13px;
}
.player-score {
  font-size: 22px;
  font-weight: 900;
}
.winner-badge {
  padding: 1px 8px;
  background: var(--teal);
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}
.battle-round-vs {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.battle-round-admin {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.admin-score-input {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.admin-score-input input {
  width: 100px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
}

/* ── Battles Enhanced ── */
.battles-page { max-width: 900px; margin: 0 auto; font-family: inherit; }
.battles-page h1,
.battles-page h2,
.battles-page h3,
.battles-page h4,
.battles-page button,
.battles-page input,
.battles-page select {
  font-family: inherit;
}
.battles-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.battles-header h2 { margin: 0; }
.battles-header-actions { display: flex; gap: 8px; }
.battles-filters { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.battles-type-tabs, .battles-status-tabs { display: flex; gap: 4px; }
.btt, .bst {
  padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer;
  transition: all 0.15s;
}
.btt:hover, .bst:hover { border-color: var(--teal); }
.btt.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.bst.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.battles-grid-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.battle-card-new {
  padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.2s, transform 0.15s; position: relative; overflow: hidden;
}
.battle-card-new:hover { border-color: var(--teal); box-shadow: 0 6px 24px rgba(8,127,140,0.12); transform: translateY(-2px); }
.bcn-status {
  position: absolute; top: 0; left: 0; padding: 3px 10px; border-radius: 0 0 8px 0;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.bcn-type {
  position: absolute; top: 0; right: 0; padding: 3px 10px; border-radius: 0 0 0 8px;
  font-size: 10px; font-weight: 600; background: var(--line); color: var(--muted); text-transform: uppercase;
}
.bcn-fighters { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px 0 12px; }
.bcn-fighter { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.bcn-fighter.bcn-winner .bcn-avatar { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(218,165,32,0.25); }
.bcn-avatar {
  width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff; background: var(--teal); border: 2px solid transparent;
  overflow: hidden; transition: border-color 0.2s;
}
.bcn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bcn-name { font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bcn-vs-block { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bcn-scores { display: flex; align-items: center; gap: 6px; }
.bcn-score-num { font-size: 22px; font-weight: 900; line-height: 1; }
.bcn-score-num.bcn-score-win { color: var(--gold); }
.bcn-vs-text { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.bcn-meta {
  display: flex; justify-content: center; gap: 8px; font-size: 11px; color: var(--muted);
  padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px;
}
.bcn-title { text-align: center; font-size: 12px; color: var(--muted); margin-top: 6px; }

.battles-empty { text-align: center; padding: 60px 20px; }
.battles-empty-icon { font-size: 48px; margin-bottom: 12px; }
.battles-empty h3 { margin: 0 0 8px; }

/* ── Battle Detail Enhanced ── */
.bda-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px; margin-bottom: 20px;
}
.bda-fighters { display: flex; align-items: center; justify-content: center; gap: 20px; }
.bda-fighter { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.bda-fighter.bda-winner .bda-avatar { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(218,165,32,0.25); }
.bda-avatar {
  width: 80px; height: 80px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: #fff; background: var(--teal); border: 3px solid transparent;
  overflow: hidden;
}
.bda-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bda-name { font-size: 15px; font-weight: 700; }
.bda-score { font-size: 32px; font-weight: 900; line-height: 1; }
.bda-center { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bda-vs { font-size: 18px; font-weight: 900; color: var(--muted); }
.bda-info { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); }
.bda-winner-badge {
  display: inline-block; padding: 5px 16px; background: var(--gold); color: #fff;
  border-radius: 20px; font-size: 13px; font-weight: 700; margin-top: 4px;
}
.bda-title { font-size: 13px; color: var(--muted); }
.bda-actions { display: flex; gap: 8px; margin-top: 16px; justify-content: center; }

.br-section-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.br-list { display: flex; flex-direction: column; gap: 10px; }

.br-card {
  padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color 0.15s;
}
.br-card.br-played { border-left: 3px solid var(--teal); }
.br-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.br-round-badge {
  padding: 3px 10px; background: var(--ink); color: #fff; border-radius: 8px;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.br-song-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.br-song-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-chart-badge {
  padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; flex-shrink: 0;
  background: var(--line); color: var(--text);
}
.br-chart-badge.type-S { background: #3b82f6; color: #fff; }
.br-chart-badge.type-D { background: #f97316; color: #fff; }
.br-chart-badge.type-C { background: #a855f7; color: #fff; }
.br-winner-tag {
  padding: 2px 10px; background: var(--gold); color: #fff; border-radius: 10px;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.br-draw-tag {
  padding: 2px 10px; background: var(--line); color: var(--muted); border-radius: 10px;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}

.br-scores { display: flex; align-items: center; justify-content: center; gap: 16px; }
.br-player-score { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 100px; }
.br-player-score.br-won .br-pscore { color: var(--gold); font-weight: 900; }
.br-pname { font-size: 12px; font-weight: 600; color: var(--muted); }
.br-pscore { font-size: 20px; font-weight: 800; }
.br-vs { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; }

.br-admin-actions {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.br-select {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; min-width: 140px;
}
.br-score-input {
  width: 100px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; text-align: center;
}
.br-btn { padding: 5px 14px; font-size: 12px; }
.br-submitted {
  margin-top: 8px; padding: 4px 12px; display: inline-block;
  background: var(--teal); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 600;
}

.player-battle-score-input {
  width: 120px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; text-align: center;
}

.admin-groups-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE FRIENDLY (Phase 6)
   ═══════════════════════════════════════════════════════════ */

/* Touch targets — global minimum 44px */
button, a.nav-link, a.mobile-nav-link, a.admin-dropdown-item {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Prevent zoom on inputs on iOS */
input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="search"], textarea, select {
  font-size: 16px;
}

/* Base body font */
body {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ═══ All mobile @media ═══ */
@media (max-width: 768px) {

  /* Topbar */
  .topbar {
    padding: 10px 12px;
    gap: 8px;
  }
  .brand { min-width: 0; flex: 1; }
  .brand-logo { width: 32px; height: 32px; }
  .brand strong { font-size: 14px; }
  .brand span { font-size: 10px; }
  .desktop-nav, .desktop-account { display: none; }
  .hamburger-btn { display: flex; }
  .mobile-menu.is-open { display: flex; }
  .mobile-menu-backdrop.is-open { display: block; }
  .topbar-right { gap: 4px; }

  /* Hero */
  .hero { padding: 20px 12px 24px; }
  .hero-headline { font-size: clamp(22px, 6vw, 32px); }
  .hero-sub { font-size: 13px; margin-top: 12px; }
  .hero-actions { flex-direction: column; gap: 8px; width: 100%; }
  .hero-cta { width: 100%; min-height: 48px; font-size: 14px; }
  .hero-stats { flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; padding-top: 16px; }
  .hero-stat { min-width: 60px; }
  .hero-stat-num { font-size: 18px; }
  .hero-stat-label { font-size: 10px; }

  /* Content */
  .content { padding: 16px 12px 60px; }

  /* Modal */
  .modal-backdrop { padding: 10px; }
  .modal { width: 100%; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; border-radius: 12px; }
  .modal h2 { font-size: 22px; }
  .modal-backdrop > .auth-modal { height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 20px); overflow: auto; padding: 20px; border-radius: 8px; }
  .auth-modal h2 { font-size: 30px; }
  .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; font-size: 16px; border-radius: 6px; }

  .event-gen-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .event-gen-step {
    padding: 9px;
    align-items: flex-start;
  }

  .event-gen-step-number {
    width: 24px;
    height: 24px;
  }

  /* Buttons */
  .ghost, .primary { min-height: 44px; font-size: 13px; }
  .primary { box-shadow: 3px 3px 0 var(--ink); }

  /* Tabs */
  .main-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .main-tabs::-webkit-scrollbar { display: none; }
  .main-tab { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
  .cat-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tab { white-space: nowrap; flex-shrink: 0; }
  .challenge-admin-bar { flex-wrap: wrap; }
  .challenge-admin-bar .primary, .challenge-admin-bar .ghost { white-space: nowrap; }

  /* Tables — horizontal scroll */
  .lb-board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lb-row { min-width: 700px; }
  .lb-row.lb-head { position: sticky; top: 0; z-index: 1; }

  .user-table, .edit-scores-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .user-row, .edit-score-row, .edit-score-entry { min-width: 600px; }

  /* Ranking */
  .row { grid-template-columns: 42px 1fr 70px; font-size: 12px; padding: 10px 12px; gap: 8px; }
  .row .hide-small, .row.head .hide-small { display: none; }
  .rank { font-size: 16px; }
  .player { gap: 8px; min-width: 0; }
  .avatar { width: 34px; height: 34px; font-size: 12px; }
  .player strong { font-size: 13px; }
  .player > div > span { font-size: 11px; }
  .leaderboard-badge { font-size: 8px; padding: 1px 5px; margin-left: 2px; }
  .badges-list .badge-item { font-size: 9px; padding: 2px 6px; }

  /* Profile */
  .profile { gap: 12px; padding: 16px 12px; }
  .profile-panel { padding: 16px; }
  .profile-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .profile-avatar { width: 80px; height: 80px; }
  .profile-info h2 { font-size: 20px; }
  .profile .stats { grid-template-columns: repeat(2, 1fr); }
  .profile-stats-bar { gap: 8px; padding: 12px; flex-wrap: wrap; }
  .profile-stat b { font-size: 16px; }
  .profile-stat span { font-size: 10px; }
  .profile-history-row { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Song grid */
  .song-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .song-card { padding: 12px; }
  .song-title { font-size: 13px; }

  /* Challenge */
  .challenge-songs-grid { grid-template-columns: 1fr; }
  .challenge-card { padding: 12px; }

  /* Stats */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat { padding: 12px; }

  /* Groups */
  .groups-grid { grid-template-columns: 1fr; gap: 10px; }
  .group-detail-header { flex-wrap: wrap; gap: 12px; padding: 14px; }

  /* Battles */
  .battle-card-new { padding: 12px; }
  .bda-panel { padding: 16px; }
  .bda-fighters { flex-direction: column; gap: 16px; }
  .bda-avatar { width: 64px; height: 64px; font-size: 22px; }
  .br-list { gap: 8px; }
  .battles-grid-new { grid-template-columns: 1fr; }
  .battles-filters { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Toolbar */
  .toolbar { flex-direction: column; gap: 8px; }
  .toolbar .search { width: 100%; }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gallery-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gallery-item-title { font-size: 12px; padding: 8px 10px 2px; }
  .gallery-item-desc { font-size: 11px; padding: 0 10px 8px; }

  /* Form elements */
  textarea { font-size: 16px; min-height: 80px; }
  select { font-size: 16px; min-height: 44px; }
  input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="search"] { min-height: 44px; padding: 10px 12px; }

  /* Event manage */
  .event-manage-content { padding: 12px; }
  .event-manage-content-flat { padding: 0; }
  .event-manage-hero { flex-direction: column; padding: 14px; }
  .event-manage-command-bar { width: 100%; justify-content: stretch; }
  .event-manage-command-bar .primary,
  .event-manage-command-bar .ghost { flex: 1; justify-content: center; }
  .event-manage-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; }
  .event-manage-tab { white-space: nowrap; }
  .event-manage-waiting-grid { grid-template-columns: 1fr; }
  .event-manage-panel { padding: 12px; }
  .event-score-panel-head,
  .report-scores-header { align-items: stretch; flex-direction: column; }
  .report-scores-actions,
  .report-scores-actions .primary,
  .event-score-panel-head .primary { width: 100%; }
  .event-manage-header { flex-wrap: wrap; gap: 8px; }
  .event-manage-section { padding: 12px; }
  .event-manage-actions { flex-direction: column; }
  .event-manage-actions button { width: 100%; justify-content: center; }
  .event-card-summary { flex-direction: column; }
  .event-card-summary-actions { justify-content: space-between; align-items: center; }
  .event-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-card-tabs { padding: 10px 12px; }
  .event-card-tab-panel { padding: 12px; }
  .event-participant-grid { grid-template-columns: repeat(2, 1fr); }

  /* Utility */
  .muted { font-size: 11px; }
  h2 { font-size: 20px; }
  h3 { font-size: 15px; }

  /* Scroll hint for tables */
  .lb-board::after, .user-table::after {
    content: "← scroll →";
    display: block;
    text-align: center;
    padding: 6px;
    font-size: 10px;
    color: var(--muted);
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .hero-headline { font-size: 22px; }
  .hero-stat-num { font-size: 16px; }
  .profile-stats-bar { justify-content: center; }
}

/* Scrollable modals on very short screens */
@media (max-width: 768px) and (max-height: 600px) {
  .modal { max-height: 92vh; }
}

/* ═══ Dark Mode Overrides ═══ */
.dark .topbar {
  background: rgba(15, 15, 26, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark .nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dark .mobile-menu {
  background: var(--panel);
  border-left-color: var(--line);
}

.dark .mobile-nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dark .mobile-nav-link.is-active {
  background: rgba(20, 184, 166, 0.1);
}

.dark .hamburger-btn {
  border-color: var(--line);
}

.dark .hamburger-line {
  background: var(--ink);
}

.dark .mobile-menu-divider {
  background: var(--line);
}

.dark .admin-dropdown-menu {
  background: var(--panel);
  border-color: var(--line);
}

.dark .admin-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dark .notif-bell {
  background: var(--panel);
  border-color: var(--line);
}

.dark .notif-panel {
  background: var(--panel);
  border-color: var(--line);
}

.dark .notif-item {
  border-color: var(--line);
}

.dark .notif-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dark .ghost {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

.dark .ghost:hover {
  background: var(--surface);
}

.dark .icon-button {
  background: var(--panel);
  border-color: var(--line);
}

.dark .song-card {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
}

.dark .hero-logo {
  mix-blend-mode: lighten;
}

/* Leaderboard dark mode */
.dark .lb-board {
  background: var(--panel);
  border-color: var(--line);
}

.dark .lb-row:not(.lb-head) {
  border-color: var(--line);
}

.dark .lb-row:not(.lb-head):hover {
  background: rgba(255, 255, 255, 0.03);
}

.dark .lb-stat-mini {
  background: var(--panel);
  border-color: var(--line);
}

.dark .lb-search,
.dark .lb-filter-select {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.dark .event-participant-grid {
  background: #111122;
}

.dark .modal {
  background: var(--panel);
  border-color: var(--line);
}

.dark .modal-backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.dark .challenge-join-section {
  background: var(--surface);
  border-color: var(--line);
}

.dark .pill {
  border-color: var(--line);
}

.dark input,
.dark textarea,
.dark select {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.dark .event-leaderboard-header {
  background: #111122;
}

.dark .event-leaderboard-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* Dark mode — profile enhanced */
.dark .profile-stats-bar {
  background: var(--surface);
}

.dark .profile-stat b {
  color: var(--ink);
}

.dark .profile-history-row {
  border-color: var(--line);
}

/* Dark mode — gallery & lightbox */
.dark .gallery-item {
  background: var(--panel);
  border-color: var(--line);
}

.dark .gallery-empty {
  border-color: var(--line);
}

.dark .lightbox-nav {
  background: rgba(255, 255, 255, 0.15);
}

/* Dark mode — community city */
.dark .community-city-group {
  background: var(--panel);
  border-color: var(--line);
}

.dark .community-city-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Dark mode — page content */
.dark .page-content code {
  background: var(--surface);
}

/* Dark mode — scroll hint */
@media (max-width: 768px) {
  .dark .lb-board::after,
  .dark .user-table::after {
    background: var(--surface);
    border-color: var(--line);
  }
}

.dark .past-card {
  background: var(--panel);
  border-color: var(--line);
}

.dark .search {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.dark .page-btn {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.dark .page-btn.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.dark a {
  color: var(--teal);
}

.dark table {
  border-color: var(--line);
}

.dark th {
  background: var(--surface);
  border-color: var(--line);
}

.dark td {
  border-color: var(--line);
}

.dark .profile-card {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dark .challenge-card,
.dark .event-card {
  background: var(--panel);
  border-color: var(--line);
}

.dark .group-card,
.dark .battle-card-new {
  background: var(--panel);
  border-color: var(--line);
}

.dark .stat-card {
  background: var(--panel);
  border-color: var(--line);
}

.dark .field {
  background: var(--panel);
}

.dark .content .muted {
  color: var(--muted);
}

.dark .content .divider,
.dark hr {
  border-color: var(--line);
}

.dark .event-picked-song {
  background: var(--surface);
  border-color: var(--line);
}

.dark .randomizer-display {
  background: var(--surface);
}

.dark .randomizer-display.empty {
  background: var(--surface);
}

.dark .alert-content {
  background: var(--panel);
}

.dark .badge-card {
  background: var(--panel);
  border-color: var(--line);
}

.dark .group-member-row {
  border-color: var(--line);
}

.dark .bracket-round {
  background: var(--surface);
  border-color: var(--line);
}

.dark .bracket-match {
  border-color: var(--line);
}

.dark .bracket-player {
  background: var(--panel);
  border-color: var(--line);
}

.dark .bracket-player.winner {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--green);
}

.dark .user-list-row {
  border-color: var(--line);
}

.dark .admin-section {
  background: var(--panel);
  border-color: var(--line);
}

.dark .round-song-card {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.dark .round-song-thumb-empty {
  background: var(--surface);
  color: var(--muted);
}

/* ═══ Cumulative Leaderboard ═══ */
.lb-cumulative {
  margin: 12px 0;
}

.lb-cumulative-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.lb-cumulative-header h3 {
  margin: 0;
  font-size: 18px;
}

.lb-card {
  margin-bottom: 8px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}

.lb-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #b91c1c;
  color: #fff;
  cursor: pointer;
  transition: filter 0.15s;
  font-weight: 600;
}

.lb-card-header:hover {
  filter: brightness(1.1);
}

.lb-card-header.rank-1 {
  background: linear-gradient(135deg, #d4a017, #f5c518);
  color: #1a1a1a;
}

.lb-card-header.rank-2 {
  background: linear-gradient(135deg, #9ca3af, #d1d5db);
  color: #1a1a1a;
}

.lb-card-header.rank-3 {
  background: linear-gradient(135deg, #92400e, #d97706);
  color: #fff;
}

.lb-card-header.rank-other {
  background: #374151;
  color: #d1d5db;
}

.lb-card-header.rank-eliminated {
  background: #b91c1c;
}

.lb-card-rank {
  font-size: 18px;
  font-weight: 900;
  min-width: 36px;
}

.lb-card-name {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
}

.lb-card-total {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.lb-card-chevron {
  font-size: 12px;
  opacity: 0.7;
}

.lb-card-songs {
  padding: 0;
  background: var(--surface);
}

.lb-song-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}

.lb-song-row:last-child {
  border-bottom: none;
}

.lb-song-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  background: var(--ink);
  color: var(--paper);
}

.lb-song-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.lb-song-score {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lb-song-round {
  font-size: 11px;
  color: var(--muted);
  padding: 2px 6px;
  background: var(--line);
  border-radius: 4px;
  font-weight: 600;
}

/* ═══ Round Song Cards ═══ */
.event-song-section {
  margin: 12px 0;
}

.event-song-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.round-song-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08);
}

.round-song-thumb {
  width: 140px;
  height: 140px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.round-song-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--muted);
  font-size: 24px;
  font-weight: 800;
}

.round-song-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.round-song-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.round-song-artist {
  font-size: 13px;
  color: var(--muted);
}

.round-song-meta {
  font-size: 13px;
  margin-top: 2px;
}

.round-song-charts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* ── Ranked Match ── */
.ranked-page { max-width: 900px; margin: 0 auto; }
.ranked-hero { text-align: center; padding: 32px 0 24px; }
.ranked-hero-icon { font-size: 48px; margin-bottom: 8px; }
.ranked-hero h2 { margin: 0 0 6px; }

.rm-discord-banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
  border-radius: 12px; margin-bottom: 20px; color: #fff;
}
.rm-discord-icon { font-size: 24px; flex-shrink: 0; }
.rm-discord-info { flex: 1; min-width: 0; }
.rm-discord-title { font-weight: 700; font-size: 14px; display: block; }
.rm-discord-sub { font-size: 12px; opacity: 0.9; display: block; }
.rm-discord-sub strong { color: #FFD700; }
.rm-discord-btn {
  padding: 6px 16px; border-radius: 8px; background: #fff; color: #5865F2;
  font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap;
  transition: transform 0.15s;
}
.rm-discord-btn:hover { transform: scale(1.05); }

.rm-my-rank { margin-bottom: 24px; }
.rm-rank-card {
  display: flex; align-items: center; gap: 20px; padding: 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px;
}
.rm-rank-tier { font-size: 48px; flex-shrink: 0; }
.rm-rank-info { flex: 1; min-width: 0; }
.rm-rank-tier-name { font-size: 18px; font-weight: 800; }
.rm-rank-elo { font-size: 32px; font-weight: 900; line-height: 1.1; }
.rm-rank-progress { margin-top: 6px; }
.rm-progress-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.rm-progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.rm-progress-text { font-size: 11px; color: var(--muted); margin-top: 2px; display: block; }
.rm-rank-stats { display: flex; gap: 16px; flex-shrink: 0; }
.rm-stat { display: flex; flex-direction: column; align-items: center; }
.rm-stat-num { font-size: 20px; font-weight: 800; }
.rm-stat-num.streak { color: var(--gold); }
.rm-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; }

.rm-queue-section { text-align: center; }
.rm-queue-btn {
  padding: 12px 32px; font-size: 16px; font-weight: 700; border-radius: 12px;
  background: var(--teal); color: #fff; border: none; cursor: pointer; transition: transform 0.15s;
}
.rm-queue-btn:hover { transform: scale(1.03); }
.rm-queue-status {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; background: var(--panel); border: 1px solid var(--teal); border-radius: 12px;
}
.rm-queue-spinner {
  width: 20px; height: 20px; border: 3px solid var(--line); border-top-color: var(--teal);
  border-radius: 50%; animation: spin 1s linear infinite;
}

.rm-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rm-section { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; overflow: hidden; }
.rm-section h3 { margin: 0 0 12px; font-size: 16px; }

.rm-lb-list { display: flex; flex-direction: column; }
.rm-lb-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.rm-lb-row:last-child { border-bottom: none; }
.rm-lb-row.rm-lb-me { background: rgba(8,127,140,0.08); margin: 0 -16px; padding: 8px 16px; border-radius: 8px; }
.rm-lb-rank { width: 32px; text-align: center; font-weight: 700; flex-shrink: 0; }
.rm-lb-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-lb-tier { font-size: 11px; font-weight: 600; white-space: nowrap; }
.rm-lb-elo { font-weight: 800; width: 44px; text-align: right; }
.rm-lb-wl { font-size: 11px; color: var(--muted); width: 56px; text-align: right; }

.rm-hist-list { display: flex; flex-direction: column; }
.rm-hist-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.rm-hist-row:last-child { border-bottom: none; }
.rm-hist-result { flex-shrink: 0; }
.rm-hist-opp { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-hist-score { color: var(--muted); }
.rm-hist-elo { font-weight: 700; width: 48px; text-align: right; }
.rm-hist-elo.positive { color: var(--teal); }
.rm-hist-elo.negative { color: var(--red); }

/* ── Ranked Match Detail ── */
.rm-match-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; text-align: center;
}
.rm-match-header { margin-bottom: 16px; }
.rm-match-status {
  padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  background: var(--line); color: var(--muted);
}
.rm-match-status.pending { background: #f59e0b; color: #fff; }
.rm-match-status.accepted { background: var(--teal); color: #fff; }
.rm-match-status.in_progress { background: var(--teal); color: #fff; }

.rm-match-fighters { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 20px; }
.rm-match-player { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rm-avatar {
  width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff; background: var(--teal); border: 3px solid var(--line);
}
.rm-match-name { font-weight: 700; font-size: 14px; }
.rm-match-score { font-size: 28px; font-weight: 900; }
.rm-match-vs { font-size: 16px; font-weight: 900; color: var(--muted); }

.rm-match-songs { text-align: left; margin-bottom: 16px; }
.rm-songs-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.rm-song-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.rm-song-row:last-child { border-bottom: none; }
.rm-song-num { width: 20px; text-align: center; font-weight: 700; color: var(--muted); }
.rm-song-title { flex: 1; font-weight: 600; }

.rm-match-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rm-submit-row { display: flex; gap: 8px; align-items: center; }
.rm-score-input {
  width: 140px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; text-align: center;
}

/* ── Profile Ranked Card ── */
.profile-ranked-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; margin-top: 12px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(8,127,140,0.06), rgba(8,127,140,0.02));
  border: 1px solid rgba(8,127,140,0.15); cursor: pointer; transition: border-color 0.15s;
}
.profile-ranked-card:hover { border-color: var(--teal); }
.profile-ranked-card.placement { border-color: rgba(8,127,140,0.25); background: linear-gradient(135deg, rgba(8,127,140,0.04), rgba(8,127,140,0.01)); }
.prc-left { display: flex; align-items: center; gap: 10px; }
.prc-tier { font-size: 28px; }
.prc-info { display: flex; flex-direction: column; }
.prc-tier-name { font-size: 13px; font-weight: 700; }
.prc-elo { font-size: 22px; font-weight: 900; line-height: 1.1; }
.prc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 80px; }
.prc-stats { display: flex; align-items: center; gap: 8px; }
.prc-wl { font-size: 12px; font-weight: 600; }
.prc-w { color: var(--teal); }
.prc-l { color: var(--red); }
.prc-streak { font-size: 12px; font-weight: 700; color: var(--gold); }
.prc-placement-text { font-size: 12px; font-weight: 600; color: var(--teal); }
.prc-progress { width: 80px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.prc-progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }

/* ── Ranked Placement ── */
.rm-placement { flex-direction: column; gap: 12px; text-align: left; }
.rm-placement-header { display: flex; align-items: center; gap: 12px; }
.rm-placement-icon { font-size: 32px; }
.rm-placement-info { display: flex; flex-direction: column; }
.rm-placement-title { font-size: 16px; font-weight: 800; color: var(--teal); }
.rm-placement-sub { font-size: 12px; color: var(--muted); }
.rm-placement-progress { display: flex; align-items: center; gap: 10px; width: 100%; }
.rm-placement-bar { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.rm-placement-fill { height: 100%; background: var(--teal); border-radius: 4px; transition: width 0.3s; }
.rm-placement-count { font-size: 13px; font-weight: 700; color: var(--teal); white-space: nowrap; }
.rm-placement-elo { display: flex; align-items: baseline; gap: 6px; }
.rm-placement-elo-num { font-size: 28px; font-weight: 900; }

@media (max-width: 640px) {
  .rm-two-col { grid-template-columns: 1fr; }
  .rm-rank-card { flex-direction: column; text-align: center; }
  .rm-rank-stats { justify-content: center; }
  .rm-match-fighters { gap: 16px; }
  .rm-lb-tier { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   Audit Log Page
   ═══════════════════════════════════════════════════════════ */
.audit-list { display: flex; flex-direction: column; gap: 1px; }
.audit-header { display: grid; grid-template-columns: 180px 120px 120px 1fr; gap: 12px; padding: 10px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px 8px 0 0; font-weight: 700; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.audit-row { display: grid; grid-template-columns: 180px 120px 120px 1fr; gap: 12px; padding: 10px 16px; background: var(--panel); border: 1px solid var(--line); border-top: none; font-size: 13px; }
.audit-row:last-child { border-radius: 0 0 8px 8px; }
.audit-time { font-family: monospace; font-size: 12px; color: var(--muted); }
.audit-user { font-weight: 600; }
.audit-action .pill { font-size: 11px; padding: 2px 8px; }
.audit-details { font-size: 12px; word-break: break-word; }
@media (max-width: 768px) {
  .audit-header, .audit-row { grid-template-columns: 1fr; gap: 4px; }
  .audit-header span:not(:first-child) { display: none; }
  .audit-row { padding: 12px 16px; }
  .audit-user::before { content: "User: "; color: var(--muted); font-weight: 400; }
  .audit-action::before { content: "Action: "; color: var(--muted); font-weight: 400; }
  .audit-details::before { content: "Detail: "; color: var(--muted); font-weight: 400; }
}

/* ═══════════════════════════════════════════════════════════
   Tournament Archive Page
   ═══════════════════════════════════════════════════════════ */
.archive-tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.archive-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; transition: transform 0.15s, box-shadow 0.15s; }
.archive-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.archive-card-header { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.archive-card-header .pill { font-size: 11px; padding: 3px 10px; border-radius: 12px; }
.archive-card-header .finished { background: var(--green); color: #fff; }
.archive-name { font-size: 17px; font-weight: 800; margin: 0 0 10px; }
.archive-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.archive-winner { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--gold); }
@media (max-width: 640px) {
  .archive-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   Language Toggle
   ═══════════════════════════════════════════════════════════ */
.lang-toggle { font-weight: 700; letter-spacing: 0.5px; }

/* ═══════════════════════════════════════════════════════════
   Invite Link / Share Button
   ═══════════════════════════════════════════════════════════ */
.share-btn, .invite-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--ink); transition: background 0.15s; }
.share-btn:hover, .invite-link-btn:hover { background: var(--surface); }

/* ═══════════════════════════════════════════════════════════
   Push Notification Banner
   ═══════════════════════════════════════════════════════════ */
.push-banner { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: linear-gradient(135deg, var(--teal), #0891b2); border-radius: 12px; color: #fff; margin-bottom: 20px; }
.push-banner-text { flex: 1; }
.push-banner-title { font-weight: 700; font-size: 15px; }
.push-banner-desc { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.push-banner-btn { padding: 8px 16px; border-radius: 8px; border: none; background: #fff; color: var(--teal); font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.push-banner-btn:hover { opacity: 0.9; }

/* ═══════════════════════════════════════════════════════════
   Tournament Bracket Visualization
   ═══════════════════════════════════════════════════════════ */
.bracket-container { padding: 8px 0; }
.bracket-scroll { display: flex; gap: 0; overflow-x: auto; padding-bottom: 8px; }
.bracket-round { min-width: 180px; max-width: 220px; flex-shrink: 0; position: relative; }
.bracket-round:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 16px;
  height: 2px;
  background: var(--line);
}
.bracket-round-header { text-align: center; padding: 8px 12px; margin-bottom: 8px; background: var(--surface); border-radius: 8px; }
.bracket-round-name { font-weight: 800; font-size: 14px; }
.bracket-round-meta { font-size: 11px; margin-top: 2px; }
.bracket-round-players { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.bracket-player {
  padding: 10px 12px;
  border-radius: 8px;
  border: 2px solid var(--line);
  background: var(--panel);
  transition: transform 0.15s, box-shadow 0.15s;
}
.bracket-player:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.bracket-player-rank { font-size: 11px; font-weight: 700; color: var(--muted); }
.bracket-player-name { font-size: 14px; font-weight: 700; margin: 2px 0; }
.bracket-player-score { font-size: 13px; font-weight: 800; color: var(--teal); }
.bracket-player-songs { font-size: 11px; color: var(--muted); margin-top: 4px; }

.bracket-winner { border-color: var(--gold); background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02)); }
.bracket-winner .bracket-player-rank { color: var(--gold); }
.bracket-winner .bracket-player-name { color: var(--gold); }

.bracket-advanced { border-color: var(--teal); background: linear-gradient(135deg, rgba(8, 127, 140, 0.06), transparent); }
.bracket-advanced .bracket-player-rank { color: var(--teal); }

.bracket-eliminated { opacity: 0.5; border-style: dashed; }
.bracket-eliminated .bracket-player-rank { color: var(--red); }

.bracket-empty { border-style: dashed; opacity: 0.3; min-height: 40px; display: flex; align-items: center; justify-content: center; }

/* ═══════════════════════════════════════════════════════════
   Group Stage UI
   ═══════════════════════════════════════════════════════════ */
.gs-section { border: 2px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel); }

/* Event Flow Indicator */
.gs-flow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; padding: 12px; background: var(--surface); border-radius: 8px; }
.gs-flow-step { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.gs-flow-badge { width: 20px; height: 20px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.gs-flow-title { font-size: 13px; font-weight: 700; }
.gs-flow-arrow { font-size: 18px; font-weight: 800; color: var(--teal); }
.gs-pool { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.gs-pool-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.gs-pool-search { margin-bottom: 8px; position: relative; }
#gs-pool-results { position: absolute; z-index: 10; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; max-height: 200px; overflow-y: auto; width: 100%; box-shadow: var(--shadow); display: none; }
.gs-pool-result-item:hover { background: var(--surface); }
.gs-pool-list { max-height: 150px; overflow-y: auto; margin-bottom: 8px; }
.gs-pool-selected { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-song-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--surface); border-radius: 6px; font-size: 12px; font-weight: 600; }
.gs-song-chip.small { font-size: 11px; padding: 2px 8px; }
.gs-chip-remove { background: none; border: none; color: var(--red); cursor: pointer; font-size: 12px; padding: 0 2px; }
.gs-groups { margin-bottom: 16px; }
.gs-groups-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.gs-groups-list { display: flex; flex-direction: column; gap: 10px; }
.gs-group-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: rgba(255,255,255,0.5); }
.gs-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.gs-group-advance { display: flex; align-items: center; gap: 4px; }
.gs-group-songs { display: flex; flex-direction: column; gap: 4px; }
.gs-group-song-list { display: flex; flex-wrap: wrap; gap: 4px; }
.gs-playoff { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.gs-playoff-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.gs-playoff-rounds { display: flex; flex-direction: column; gap: 6px; }
.gs-playoff-preview { margin-top: 12px; padding: 12px; background: var(--surface); border-radius: 8px; }
.gs-manage-groups { display: flex; flex-direction: column; gap: 12px; }
.gs-manage-group-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--panel); }
.gs-manage-group-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.gs-score-section { margin-top: 12px; overflow-x: auto; }
.gs-score-header { display: flex; align-items: end; gap: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--line); margin-bottom: 4px; }
.gs-score-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.gs-score-name { min-width: 120px; font-size: 13px; font-weight: 600; }
.gs-score-inputs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gs-score-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gs-score-song-label { font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; min-width: 70px; }
.gs-score-total { font-weight: 800; font-size: 14px; color: var(--teal); min-width: 60px; text-align: right; }
.gs-score-total-label { font-size: 10px; font-weight: 700; color: var(--muted); min-width: 60px; text-align: right; }
.gs-playoff-preview-rounds { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gs-preview-round { padding: 6px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; text-align: center; }
.gs-preview-round-name { font-size: 12px; font-weight: 700; display: block; }
.gs-preview-round-meta { font-size: 11px; color: var(--muted); display: block; }
.gs-preview-arrow { font-size: 14px; color: var(--teal); font-weight: 800; }

/* Pool Picker (multi-select from pool to group) */
.gs-pool-picker { margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); }
.gs-pool-picker-label { padding: 6px 10px; background: var(--surface); font-weight: 700; font-size: 12px; }
.gs-pool-picker-list { max-height: 180px; overflow-y: auto; }
.gs-pool-pick-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 12px; border-bottom: 1px solid var(--line); transition: background 0.1s; }
.gs-pool-pick-item:last-child { border-bottom: none; }
.gs-pool-pick-item:hover { background: var(--surface); }
.gs-pool-pick-item.gs-picked { background: rgba(0, 229, 160, 0.08); }
.gs-pick-check { width: 18px; height: 18px; border: 2px solid var(--line); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--teal); flex-shrink: 0; }
.gs-picked .gs-pick-check { border-color: var(--teal); background: var(--teal); color: #fff; }
.gs-pick-title { flex: 1; font-weight: 600; }
.gs-pick-chart { font-weight: 700; color: var(--muted); font-size: 11px; }

/* ═══════════════════════════════════════════════════════════
   Double Elimination Bracket
   ═══════════════════════════════════════════════════════════ */
.de-bracket { overflow-x: auto; padding: 8px 0; }
.de-section { margin-bottom: 24px; }
.de-section-title { font-size: 16px; font-weight: 800; margin: 0 0 12px; color: var(--ink); }
.de-bracket-row { display: flex; gap: 24px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.de-round { min-width: 180px; display: flex; flex-direction: column; gap: 12px; }
.de-round-title { font-size: 12px; font-weight: 700; text-align: center; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.de-round-matches { display: flex; flex-direction: column; gap: 20px; }

/* VS Banner Match Card */
.de-match-card {
  border: 2px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
  min-width: 180px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.de-match-card:hover { transform: scale(1.02); box-shadow: var(--shadow); }
.de-match-played { cursor: pointer; }
.de-match-vs-banner {
  display: flex;
  align-items: stretch;
}
.de-match-vs-player {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  background: rgba(0,0,0,0.03);
}
.de-vs-left { justify-content: flex-start; border-right: 1px solid var(--line); }
.de-vs-right { justify-content: flex-end; border-left: 1px solid var(--line); }
.de-vs-winner { background: rgba(0, 229, 160, 0.08); color: var(--teal); }
.de-vs-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.de-match-vs-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  background: var(--surface);
  min-width: 70px;
}
.de-vs-score { font-size: 11px; font-weight: 800; color: var(--ink); }
.de-vs-text { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; }

/* Match Detail (expandable) */
.de-match-detail {
  border-top: 1px solid var(--line);
  padding: 8px 12px;
  background: rgba(0,0,0,0.02);
}
.de-match-detail-songs { display: flex; flex-direction: column; gap: 4px; }
.de-match-detail-song { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.de-match-detail-song:last-child { border-bottom: none; }
.de-mds-song { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.de-mds-score { min-width: 50px; text-align: right; font-weight: 700; }
.de-mds-winner { color: var(--teal); }
.de-mds-vs { color: var(--muted); font-weight: 800; }

.de-groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.de-group { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.de-group-header { padding: 8px 12px; background: var(--surface); font-weight: 800; font-size: 13px; }
.de-group-players { padding: 4px 0; }
.de-group-player-header { display: flex; align-items: center; gap: 8px; padding: 4px 12px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--line); }
.de-group-player { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; }
.de-group-player.de-advanced { color: var(--teal); font-weight: 600; }
.de-group-player.de-eliminated { opacity: 0.5; }

/* Group Stage Table */
.de-group-table { overflow: visible; }
.de-group-table-header { display: flex; gap: 0; padding: 6px 10px; background: var(--surface); border-bottom: 2px solid var(--line); font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.de-gth-no { width: 24px; text-align: center; flex-shrink: 0; }
.de-gth-player { flex: 1; min-width: 80px; }
.de-gth-song { min-width: 60px; text-align: center; font-size: 9px; line-height: 1.3; }
.de-gth-total { width: 90px; text-align: right; flex-shrink: 0; }
.de-group-table-row { display: flex; gap: 0; padding: 5px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.de-group-table-row:last-child { border-bottom: none; }
.de-group-table-row.de-advanced { background: rgba(0, 229, 160, 0.05); }
.de-group-table-row.de-eliminated { opacity: 0.5; }
.de-gtr-no { width: 24px; text-align: center; flex-shrink: 0; font-weight: 700; }
.de-gtr-player { flex: 1; min-width: 80px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.de-gtr-score { min-width: 60px; text-align: center; color: var(--muted); font-size: 11px; }
.de-gtr-total { width: 90px; text-align: right; font-weight: 800; flex-shrink: 0; color: var(--ink); }
.de-group-songs-footer { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--line); background: rgba(0,0,0,0.02); }
.de-song-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; background: var(--surface); border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Playoff Match-based Score Input */
.pm-song-headers { display: flex; gap: 0; padding: 8px 10px; background: var(--surface); border-radius: 8px 8px 0 0; border: 1px solid var(--line); }
.pm-song-header-spacer { min-width: 120px; flex-shrink: 0; }
.pm-song-header { min-width: 80px; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.pm-song-header-total { min-width: 70px; text-align: right; font-weight: 700; font-size: 11px; color: var(--muted); }
.pm-matches-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.pm-match-card { border: 2px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.pm-match-header { padding: 6px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.pm-match-num { font-size: 12px; font-weight: 700; color: var(--teal); }
.pm-match-body { display: flex; align-items: stretch; }
.pm-match-player { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.pm-match-player:first-child { border-right: 1px solid var(--line); }
.pm-player-name { font-size: 14px; font-weight: 700; }
.pm-player-scores { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-player-scores input { width: 70px; padding: 6px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; text-align: center; }
.pm-player-total { font-size: 16px; font-weight: 800; color: var(--teal); }
.pm-match-vs { display: flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 14px; font-weight: 900; color: var(--muted); background: var(--surface); }
.de-gp-rank { width: 16px; text-align: center; font-size: 12px; }
.de-gp-name { flex: 1; }
.de-gp-score { font-weight: 700; min-width: 40px; text-align: right; }

.de-grand-final { justify-content: center; }
.de-champion { text-align: center; margin-top: 12px; font-size: 18px; font-weight: 900; color: var(--gold); }

@media (max-width: 640px) {
  .de-groups-grid { grid-template-columns: 1fr; }
  .de-round { min-width: 150px; }
  .de-match-card { min-width: 140px; }
}

@media (max-width: 640px) {
  .bracket-round { min-width: 160px; }
  .bracket-player { padding: 8px 10px; }
  .bracket-player-name { font-size: 13px; }
}

/* ── Announcements ── */
.announcement-carousel-shell {
  width: 100%;
  padding: 0 clamp(16px, 5vw, 58px);
  margin: 24px auto 30px;
}

.announcement-carousel {
  position: relative;
  width: min(100%, 1240px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  box-shadow: 0 20px 55px rgba(30, 35, 45, 0.16);
  isolation: isolate;
}

.announcement-carousel .carousel-inner,
.announcement-carousel .carousel-item {
  min-height: 238px;
}

.announcement-slide {
  --announcement-from: #dc2626;
  --announcement-to: #991b1b;
  --announcement-image: none;
  position: relative;
  min-height: 238px;
  overflow: hidden;
  background:
    linear-gradient(105deg, var(--announcement-from) 0%, var(--announcement-to) 100%);
}

.announcement-slide.has-image {
  background-image:
    linear-gradient(100deg, rgba(12, 16, 24, 0.88) 0%, rgba(12, 16, 24, 0.58) 52%, rgba(12, 16, 24, 0.20) 100%),
    var(--announcement-image);
  background-position: center;
  background-size: cover;
}

.announcement-slide-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.20), transparent 25%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 52%);
  pointer-events: none;
}

.announcement-slide-content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 238px;
  max-width: 760px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 96px 38px;
  color: #fff;
  text-align: left;
}

.announcement-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-bottom: 10px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.95);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.announcement-title {
  max-width: 650px;
  margin: 0;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.announcement-message {
  max-width: 620px;
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 14px;
  line-height: 1.55;
}

.announcement-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.announcement-stat {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(12, 16, 24, 0.14);
  backdrop-filter: blur(6px);
}

.announcement-stat strong {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.announcement-stat span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 600;
}

.announcement-slide-cta {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 17px;
  padding: 0 17px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 92%, white);
  color: var(--announcement-from);
  box-shadow: 0 8px 20px rgba(14, 18, 26, 0.18);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.announcement-slide-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(14, 18, 26, 0.24);
}

.announcement-carousel .carousel-control-prev,
.announcement-carousel .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: rgba(10, 14, 22, 0.28) !important;
  opacity: 1 !important;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(10, 14, 22, 0.18);
}

.announcement-carousel .carousel-control-prev {
  left: 18px;
}

.announcement-carousel .carousel-control-next {
  right: 18px;
}

.announcement-carousel .carousel-control-prev:hover,
.announcement-carousel .carousel-control-next:hover {
  background-color: rgba(10, 14, 22, 0.5) !important;
  transform: translateY(-50%) scale(1.06);
}

.announcement-carousel .carousel-control-prev:focus-visible,
.announcement-carousel .carousel-control-next:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

.announcement-control-icon {
  display: block;
  width: 16px;
  height: 16px;
  color: #fff;
}

.announcement-control-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.announcement-carousel .carousel-indicators {
  position: absolute;
  right: 22px;
  bottom: 16px;
  left: auto;
  top: auto;
  z-index: 3;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end;
  margin: 0 !important;
  padding: 0 !important;
  gap: 6px;
  list-style: none;
}

.announcement-carousel .carousel-indicators [data-bs-target] {
  box-sizing: border-box !important;
  display: block !important;
  flex: none !important;
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  min-height: 7px !important;
  max-width: 7px !important;
  max-height: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 999px !important;
  background-color: rgba(255, 255, 255, 0.46) !important;
  background-clip: padding-box !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-indent: -9999px;
  overflow: hidden;
  opacity: 1 !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.announcement-carousel .carousel-indicators [data-bs-target].active {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  background-color: #fff !important;
}

.announcement-carousel-single .announcement-slide-content {
  padding-left: 46px;
}

.announcement-page { min-height: 60vh; }
.announcement-hero { position: relative; overflow: hidden; }
.announcement-section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.announcement-section:last-child { border-bottom: none; }
.announcement-form input[type="text"],
.announcement-form input[type="email"],
.announcement-form input[type="tel"],
.announcement-form input[type="number"],
.announcement-form select,
.announcement-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.announcement-form input:focus,
.announcement-form select:focus,
.announcement-form textarea:focus {
  outline: none;
  border-color: var(--teal);
}

@media (max-width: 900px) {
  .announcement-carousel .carousel-inner,
  .announcement-carousel .carousel-item,
  .announcement-slide,
  .announcement-slide-content {
    min-height: 220px;
  }

  .announcement-slide-content {
    max-width: 680px;
    padding: 28px 78px 36px;
  }

}

@media (max-width: 640px) {
  .announcement-carousel-shell {
    padding: 0 12px;
    margin: 14px auto 22px;
  }

  .announcement-carousel {
    border-radius: 14px;
  }

  .announcement-carousel .carousel-inner,
  .announcement-carousel .carousel-item,
  .announcement-slide,
  .announcement-slide-content {
    min-height: 250px;
  }

  .announcement-slide-content,
  .announcement-carousel-single .announcement-slide-content {
    max-width: none;
    padding: 25px 52px 42px;
  }

  .announcement-title {
    font-size: 24px;
  }

  .announcement-message {
    font-size: 13px;
  }

  .announcement-stat {
    padding: 4px 8px;
  }

  .announcement-carousel .carousel-control-prev,
  .announcement-carousel .carousel-control-next {
    width: 34px;
    height: 34px;
  }

  .announcement-carousel .carousel-control-prev {
    left: 10px;
  }

  .announcement-carousel .carousel-control-next {
    right: 10px;
  }

  .announcement-control-icon {
    font-size: 27px;
    line-height: 28px;
  }

  .announcement-carousel .carousel-indicators {
    right: 18px;
    bottom: 14px;
  }
}

/* Dark mode compatibility for older cards and inline render styles. */
.dark .ghost,
.dark .icon-button,
.dark .song-card,
.dark .profile-panel,
.dark .score-panel,
.dark .piugame-panel,
.dark .challenge-card,
.dark .challenge-song-card,
.dark .past-card,
.dark .page-btn,
.dark .cat-tab,
.dark .event-manage-tab,
.dark .ev-cat-btn,
.dark .gen-type-btn {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.dark .cat-tab.active,
.dark .event-manage-tab.active,
.dark .ev-cat-btn.active,
.dark .gen-type-btn.active,
.dark .page-btn.active {
  background: var(--soft-hover) !important;
  border-color: var(--teal) !important;
  color: var(--ink) !important;
}

.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.dark select,
.dark textarea,
.dark .search,
.dark .round-song-search,
.dark .score-input,
.dark .event-song-score-input,
.dark .weekly-gen-grid input {
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.dark .stat,
.dark .piugame-stats .stat,
.dark .profile .stats.mini .stat,
.dark .piugame-mini,
.dark .gen-category,
.dark .challenge-join-section,
.dark .challenge-song,
.dark .event-overview-item,
.dark .ev-selected-song {
  background: var(--panel-soft) !important;
}

.dark [style*="background:white"],
.dark [style*="background: white"],
.dark [style*="background:#fff"],
.dark [style*="background: #fff"],
.dark [style*="background:#f8f9fa"],
.dark [style*="background: #f8f9fa"],
.dark [style*="background:#f0f0f0"],
.dark [style*="background: #f0f0f0"] {
  background: var(--panel-soft) !important;
}

.dark [style*="border:1px solid var(--line)"],
.dark [style*="border: 1px solid var(--line)"],
.dark [style*="border:2px solid var(--line)"],
.dark [style*="border: 2px solid var(--line)"] {
  border-color: var(--line) !important;
}

/* Admin workspace shell */
.admin-workspace {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.admin-workspace-side,
.admin-workspace-main {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-workspace-side {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.admin-workspace-summary h2 {
  margin: 4px 0 6px;
  font-size: 24px;
}

.admin-workspace-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.admin-workspace-stats {
  display: grid;
  gap: 8px;
}

.admin-workspace-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.admin-workspace-stats strong { font-size: 20px; }
.admin-workspace-stats span { color: var(--muted); font-size: 12px; }

.admin-workspace-main {
  min-width: 0;
  padding: 14px;
}

.admin-workspace-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-workspace-toolbar input {
  flex: 1;
  min-width: 180px;
}

.admin-table-scroll {
  overflow-x: auto;
}

@media (max-width: 760px) {
  .toast-region {
    right: 12px;
    bottom: 12px;
  }

  .admin-workspace {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .admin-workspace-side {
    position: static;
  }

  .admin-workspace-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}