:root {
  --theme-bg: #020617;
  --theme-text: #e2e8f0;
  --theme-surface: rgba(255,255,255,.05);
  --theme-surface-strong: rgba(255,255,255,.08);
  --theme-border: rgba(255,255,255,.10);
  --theme-shadow: 0 14px 34px rgba(0,0,0,.28);
  --connector-stroke: rgba(255,255,255,.18);
  --connector-stroke-strong: rgba(255,255,255,.24);
}

body[data-theme="light"] {
  --theme-bg: #eef4f8;
  --theme-text: #0f172a;
  --theme-surface: rgba(255,255,255,.78);
  --theme-surface-strong: rgba(255,255,255,.92);
  --theme-border: rgba(148,163,184,.22);
  --theme-shadow: 0 14px 34px rgba(15,23,42,.10);
  --connector-stroke: rgba(71,85,105,.38);
  --connector-stroke-strong: rgba(51,65,85,.50);
}

body {
  transition: background-color .28s ease, color .28s ease;
}

.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.theme-switch__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  color: inherit;
  opacity: .92;
  white-space: nowrap;
}
.theme-switch__button {
  position: relative;
  width: 54px;
  height: 30px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,41,59,.88));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  cursor: pointer;
}
.theme-switch__button::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff, #dbeafe);
  box-shadow: 0 4px 12px rgba(15,23,42,.25);
  transition: transform .22s ease;
}
.theme-switch__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}
.theme-switch__icon--sun { left: 8px; opacity: .35; }
.theme-switch__icon--moon { right: 8px; opacity: .95; }
body[data-theme="light"] .theme-switch__button {
  background: linear-gradient(135deg, #bfdbfe, #60a5fa);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.36);
}
body[data-theme="light"] .theme-switch__button::before {
  transform: translateX(24px);
  background: linear-gradient(135deg, #ffffff, #f8fafc);
}
body[data-theme="light"] .theme-switch__icon--sun { opacity: .95; }
body[data-theme="light"] .theme-switch__icon--moon { opacity: .35; }

body[data-theme="light"] {
  background: linear-gradient(to bottom, #f4f8fb, #e9f0f6);
  color: #0f172a;
}
body[data-theme="light"] .bg-video-wrap {
  background: #e9f1f7;
}
body[data-theme="light"] .bg-video {
  filter: saturate(.92) contrast(.95) brightness(1.1);
}
body[data-theme="light"] .bg-overlay {
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(16,185,129,.08), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(59,130,246,.08), transparent 60%),
    linear-gradient(to bottom, rgba(248,250,252,.78), rgba(235,243,249,.90));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body[data-theme="light"] .glow,
body[data-theme="light"] header,
body[data-theme="light"] main {
  box-shadow: 0 0 0 1px rgba(148,163,184,.12), 0 14px 34px rgba(15,23,42,.10);
}
body[data-theme="light"] header[class],
body[data-theme="light"] main[class],
body[data-theme="light"] .approachCard,
body[data-theme="light"] .topCard,
body[data-theme="light"] .qualifyRow,
body[data-theme="light"] .emptyState,
body[data-theme="light"] .matchCard,
body[data-theme="light"] .originBar,
body[data-theme="light"] .badgePill,
body[data-theme="light"] .rowWrap,
body[data-theme="light"] .theme-surface {
  background-color: rgba(255,255,255,.78);
  border-color: rgba(148,163,184,.18);
}
body[data-theme="light"] .approachCardHead,
body[data-theme="light"] .originBar {
  background: linear-gradient(to right, rgba(255,255,255,.92), rgba(241,245,249,.78));
}
body[data-theme="light"] .matchCard {
  background: rgba(255,255,255,.82);
}
body[data-theme="light"] .cardPending {
  background: rgba(255,255,255,.82);
  border-color: rgba(148,163,184,.18);
}
body[data-theme="light"] .cardLive {
  background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(255,255,255,.92));
  border-color: rgba(16,185,129,.24);
}
body[data-theme="light"] .cardFinished {
  background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(255,255,255,.92));
  border-color: rgba(245,158,11,.22);
}
body[data-theme="light"] .lineSep { background: rgba(148,163,184,.24); }
body[data-theme="light"] .rowLoser { background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.14); opacity: .85; }
body[data-theme="light"] .seed,
body[data-theme="light"] .originPill,
body[data-theme="light"] .pill,
body[data-theme="light"] .badgePill,
body[data-theme="light"] .inline-flex.rounded-full {
  background: rgba(248,250,252,.92);
  border-color: rgba(148,163,184,.22);
  color: #334155;
}
body[data-theme="light"] .scoreBox {
  background: linear-gradient(to bottom right, rgba(59,130,246,.12), rgba(255,255,255,.95));
  border-color: rgba(96,165,250,.24);
}
body[data-theme="light"] .rankBadge,
body[data-theme="light"] .qualifyRankBox,
body[data-theme="light"] .rankBig,
body[data-theme="light"] .topCard,
body[data-theme="light"] .avatar,
body[data-theme="light"] .avatarXL {
  box-shadow: 0 0 0 1px rgba(148,163,184,.14), 0 10px 24px rgba(15,23,42,.08);
}
body[data-theme="light"] .avatarFallback {
  color: #0f172a;
}
body[data-theme="light"] .text-slate-100,
body[data-theme="light"] .text-slate-200,
body[data-theme="light"] .text-slate-300,
body[data-theme="light"] .text-white,
body[data-theme="light"] .panelTitle,
body[data-theme="light"] .playerName,
body[data-theme="light"] .topName,
body[data-theme="light"] .qualifyName,
body[data-theme="light"] .qualifyScore,
body[data-theme="light"] .rankNum,
body[data-theme="light"] .lineName,
body[data-theme="light"] .scoreValue {
  color: #0f172a !important;
}
body[data-theme="light"] .text-slate-400,
body[data-theme="light"] .text-slate-500,
body[data-theme="light"] .text-slate-600,
body[data-theme="light"] .panelCount,
body[data-theme="light"] .playerSub,
body[data-theme="light"] .rankText,
body[data-theme="light"] .topSeed,
body[data-theme="light"] .scoreLabel,
body[data-theme="light"] .originText,
body[data-theme="light"] .seed,
body[data-theme="light"] .emptyState {
  color: #64748b !important;
}
body[data-theme="light"] .text-emerald-300 { color: #059669 !important; }
body[data-theme="light"] .text-amber-100,
body[data-theme="light"] .text-amber-200 { color: #92400e !important; }
body[data-theme="light"] .text-amber-100\/90 { color: #92400e !important; }
body[data-theme="light"] .firstGlow {
  box-shadow: 0 0 0 1px rgba(245,158,11,.24), 0 18px 44px rgba(15,23,42,.12), 0 0 50px rgba(245,158,11,.10);
}
body[data-theme="light"] .podiumCard {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.86));
}
body[data-theme="light"] .podiumCard::before {
  opacity: .45;
}
body[data-theme="light"] .badgeWinner {
  color: #047857;
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.24);
}
body[data-theme="light"] .emptyState {
  background: rgba(255,255,255,.72);
  border-style: solid;
}
body[data-theme="light"] .bg-black\/40 {
  background: rgba(241,245,249,.68) !important;
}
body[data-theme="light"] .border-white\/10,
body[data-theme="light"] .ring-white\/10 {
  border-color: rgba(148,163,184,.18) !important;
}
body[data-theme="light"] .brand-logo {
  filter: drop-shadow(0 8px 18px rgba(15,23,42,.14));
}


/* Premium light refinements */
body[data-theme="light"] {
  background:
    radial-gradient(circle at top left, rgba(16,185,129,.10), transparent 30%),
    radial-gradient(circle at top right, rgba(245,158,11,.08), transparent 24%),
    linear-gradient(180deg, #f8fafc 0%, #eef4f7 100%);
}
body[data-theme="light"] .glow {
  box-shadow:
    0 18px 40px rgba(15,23,42,.08),
    0 2px 10px rgba(15,23,42,.04);
}
body[data-theme="light"] .theme-switch {
  background: rgba(255,255,255,.82);
  border-color: rgba(148,163,184,.22);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}
body[data-theme="light"] .firstGlow {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,251,235,.95));
}
body[data-theme="light"] .secondGlow,
body[data-theme="light"] .thirdGlow {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.92));
}


/* Light mode podium contrast fix */
body[data-theme="light"] .podiumCard .badgePill {
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(148,163,184,.24) !important;
  color: #334155 !important;
  box-shadow: 0 6px 14px rgba(15,23,42,.06);
}
body[data-theme="light"] .podiumCard .rankGold {
  background: linear-gradient(180deg, #fef3c7, #fde68a) !important;
  color: #92400e !important;
  border-color: rgba(245,158,11,.38) !important;
}
body[data-theme="light"] .podiumCard .rankSilver {
  background: linear-gradient(180deg, #f8fafc, #e2e8f0) !important;
  color: #334155 !important;
  border-color: rgba(148,163,184,.34) !important;
}
body[data-theme="light"] .podiumCard .rankBronze {
  background: linear-gradient(180deg, #ffedd5, #fdba74) !important;
  color: #9a3412 !important;
  border-color: rgba(249,115,22,.34) !important;
}
body[data-theme="light"] .podiumCard .avatarXL {
  background: rgba(255,255,255,.96);
}
body[data-theme="light"] .podiumCard .avatarFallback {
  color: #0f172a;
}
body[data-theme="light"] .podiumCard .text-amber-100,
body[data-theme="light"] .podiumCard .text-amber-100\/90,
body[data-theme="light"] .podiumCard .text-amber-200 {
  color: #92400e !important;
}
body[data-theme="light"] .podiumCard .text-slate-100,
body[data-theme="light"] .podiumCard .text-white {
  color: #0f172a !important;
}


/* Light mode ranking chips readability fix (positions 4–64) */
body[data-theme="light"] .rowWrap > .flex:first-child > div:first-child {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.96)) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  color: #334155 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 10px rgba(15,23,42,.04);
}

body[data-theme="light"] .rowWrap > .flex:first-child > div:first-child span {
  color: inherit !important;
}

body[data-theme="light"] .rowWrap:nth-child(-n+5) > .flex:first-child > div:first-child {
  background: linear-gradient(180deg, #ecfdf5, #d1fae5) !important;
  border-color: rgba(16,185,129,.22) !important;
  color: #047857 !important;
}

body[data-theme="light"] .rowWrap:nth-child(-n+2) > .flex:first-child > div:first-child {
  background: linear-gradient(180deg, #e0f2fe, #bae6fd) !important;
  border-color: rgba(14,165,233,.22) !important;
  color: #0369a1 !important;
}