/* =========================================================
   ZOR Esports — Global Light & Dark Theme System
   Default: Dark Mode (Cyber Void)
   Light Mode: Clean High-Tech Arena with Dynamic Ambient FX
   ========================================================= */

/* ---------- 1. Color Tokens in Light Mode ---------- */
html[data-theme="light"],
html.theme-light {
  --bg-void: #F2F5FB;
  --panel: #FFFFFF;
  --panel-raised: #EBF0F8;
  --border: #DCE3EF;
  --crimson: #E8283F;
  --crimson-dim: #C41E33;
  --cyan: #009EB8;
  --text-primary: #121620;
  --text-muted: #60687A;
  color-scheme: light;
}

/* ---------- 2. Scrollbar in Light Mode ---------- */
html[data-theme="light"] {
  scrollbar-color: var(--crimson-dim) #E9EDF5;
}

html[data-theme="light"] ::-webkit-scrollbar-track {
  background: #E9EDF5;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--crimson), var(--crimson-dim));
  border: 2px solid #E9EDF5;
}

/* ---------- 3. Ambient Arena Background in Light Mode ---------- */
html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(0, 158, 184, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 158, 184, 0.09) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 82%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 82%);
}

html[data-theme="light"] body::after {
  background:
    radial-gradient(650px circle at 95% 100%, rgba(232, 40, 63, 0.08), transparent 70%),
    radial-gradient(550px circle at 0% 25%, rgba(0, 158, 184, 0.08), transparent 70%);
}

html[data-theme="light"]::after {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%, #EEF3FA, #F2F5FB 70%);
  color: #121620;
  text-shadow: 0 0 6px var(--cyan), 0 0 20px rgba(232, 40, 63, 0.4);
}

/* ---------- 4. Header, Navigation, Brand ---------- */
html[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #DCE3EF;
  box-shadow: 0 2px 14px rgba(18, 22, 32, 0.04);
}

html[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid #DCE3EF;
  box-shadow: 0 -4px 18px rgba(18, 22, 32, 0.05);
}

html[data-theme="light"] .bottom-nav__item {
  color: #60687A;
}

html[data-theme="light"] .bottom-nav__item--active {
  color: var(--cyan);
}

html[data-theme="light"] .nav-pill {
  color: #384252;
  background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .nav-pill:hover {
  background: rgba(0, 158, 184, 0.1);
  color: var(--cyan);
}

html[data-theme="light"] .nav-pill--active {
  background: var(--cyan);
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(0, 158, 184, 0.35);
}

html[data-theme="light"] .icon-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: #DCE3EF;
  color: #121620;
}

html[data-theme="light"] .icon-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* ---------- 5. Panels, Cards & Containers ---------- */
html[data-theme="light"] :is(.panel, .site-footer, .marquee-banner, .profile-header, .stat-card, .team-view-card, .edit-profile-card, .zorc-card, .tutorial-rules-box, .stream-card, .leaderboard-slot__frame, .register-fee, .register-prize) {
  background: #FFFFFF;
  border-color: #DCE3EF;
  box-shadow: 0 4px 20px rgba(18, 22, 32, 0.05);
}

html[data-theme="light"] :is(.reg-mode-card, .featured-match-card) {
  background: #FFFFFF;
  border-color: #DCE3EF;
  box-shadow: 0 4px 18px rgba(18, 22, 34, 0.05);
}

html[data-theme="light"] :is(.reg-mode-card:hover, .featured-match-card:hover, .stat-card:hover, .stream-card:hover) {
  border-color: rgba(0, 158, 184, 0.5);
  box-shadow: 0 8px 26px rgba(0, 158, 184, 0.12), 0 4px 12px rgba(18, 22, 34, 0.06);
}

html[data-theme="light"] .panel h2,
html[data-theme="light"] .panel h3,
html[data-theme="light"] .section__head h2,
html[data-theme="light"] .profile-header__name,
html[data-theme="light"] .team-view-name,
html[data-theme="light"] .edit-profile-title,
html[data-theme="light"] .leaderboard-slot__time,
html[data-theme="light"] .zorc-card__value {
  color: #121620;
}

html[data-theme="light"] .section__head p,
html[data-theme="light"] .team-role,
html[data-theme="light"] .field-hint,
html[data-theme="light"] .leaderboard-slot__description,
html[data-theme="light"] .profile-header__meta span {
  color: #60687A;
}

/* ---------- 6. General Forms & Inputs in Light Mode ---------- */
html[data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #F4F7FC !important;
  border: 1px solid #D0D8E8 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  color: #121620 !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 10px rgba(0, 158, 184, 0.25) !important;
}

html[data-theme="light"] input::placeholder {
  color: #8A94A6 !important;
}

html[data-theme="light"] .field-group label {
  color: #121620;
}

/* ---------- 6B. Auth Pages (Login & Signup) in Light Mode ---------- */
html[data-theme="light"] .auth-shell,
html.theme-light .auth-shell {
  background: var(--bg-void);
}

html[data-theme="light"] .brand-panel,
html.theme-light .brand-panel {
  background: #FFFFFF !important;
  border-right: 1px solid #DCE3EF !important;
}

html[data-theme="light"] .brand-panel::before,
html.theme-light .brand-panel::before {
  opacity: 0.05 !important;
}

html[data-theme="light"] .brand-panel::after,
html.theme-light .brand-panel::after {
  opacity: 0.04 !important;
}

html[data-theme="light"] .brand-mark__name,
html.theme-light .brand-mark__name {
  color: #121620 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .brand-mark__tagline,
html.theme-light .brand-mark__tagline {
  color: #60687A !important;
}

html[data-theme="light"] .brand-copy h1,
html.theme-light .brand-copy h1 {
  color: #121620 !important;
  font-weight: 700 !important;
  animation: none !important; /* Removes fx-glitch reddish haze/blur */
  text-shadow: none !important;
}

html[data-theme="light"] .brand-copy p,
html.theme-light .brand-copy p {
  color: #555E6D !important;
  text-shadow: none !important;
}

html[data-theme="light"] .brand-foot,
html.theme-light .brand-foot {
  color: #8A94A6 !important;
}

/* Right Form Card Container */
html[data-theme="light"] .form-panel,
html.theme-light .form-panel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
}

html[data-theme="light"] .form-card,
html.theme-light .form-card {
  max-width: 420px !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(220, 227, 239, 0.95) !important;
  border-radius: 16px !important;
  padding: 38px 34px !important;
  box-shadow: 0 20px 48px rgba(18, 22, 34, 0.09), 0 4px 12px rgba(18, 22, 34, 0.04) !important;
  position: relative !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
}

html[data-theme="light"] .form-card__header,
html.theme-light .form-card__header {
  margin-bottom: 26px !important;
}

html[data-theme="light"] .form-card__header h2,
html.theme-light .form-card__header h2 {
  color: #121620 !important;
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 6px !important;
  text-shadow: none !important;
}

html[data-theme="light"] .form-card__header p,
html.theme-light .form-card__header p {
  color: #5A6478 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  margin: 0 !important;
  text-shadow: none !important;
}

/* Fields & Inputs inside Auth Form */
html[data-theme="light"] .form-card .field-group,
html.theme-light .form-card .field-group {
  margin-bottom: 20px !important;
}

html[data-theme="light"] .form-card .field-group label,
html.theme-light .form-card .field-group label {
  color: #242B38 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 8px !important;
  display: block !important;
  text-shadow: none !important;
}

html[data-theme="light"] .form-card .field-group input,
html.theme-light .form-card .field-group input {
  width: 100% !important;
  background: #F4F7FB !important;
  border: 1px solid #D2D9E8 !important;
  border-radius: 10px !important;
  padding: 13px 16px !important;
  font-size: 14.5px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  color: #121620 !important;
  text-shadow: none !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

html[data-theme="light"] .form-card .field-group input::placeholder,
html.theme-light .form-card .field-group input::placeholder {
  color: #8C96A8 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html[data-theme="light"] .form-card .field-group input:focus,
html.theme-light .form-card .field-group input:focus {
  background: #FFFFFF !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 158, 184, 0.16) !important;
  text-shadow: none !important;
}

/* Show password */
html[data-theme="light"] .form-card .show-password-wrap,
html.theme-light .form-card .show-password-wrap {
  margin-top: 8px !important;
  margin-bottom: 22px !important;
}

html[data-theme="light"] .form-card .show-password-label,
html.theme-light .form-card .show-password-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

html[data-theme="light"] .form-card .show-password-checkbox,
html.theme-light .form-card .show-password-checkbox {
  accent-color: var(--crimson) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  border-radius: 4px !important;
}

html[data-theme="light"] .form-card .show-password-text,
html.theme-light .form-card .show-password-text {
  color: #555E6F !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

/* Primary Button in Form Card */
html[data-theme="light"] .form-card .btn-primary,
html.theme-light .form-card .btn-primary {
  width: 100% !important;
  min-height: 48px !important;
  background: var(--crimson) !important;
  color: #FFFFFF !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  border-radius: 10px !important;
  clip-path: none !important;
  padding: 13px 20px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(232, 40, 63, 0.25) !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

html[data-theme="light"] .form-card .btn-primary:hover,
html.theme-light .form-card .btn-primary:hover {
  background: var(--crimson-dim) !important;
  box-shadow: 0 8px 24px rgba(232, 40, 63, 0.35) !important;
  transform: translateY(-1px) !important;
}

html[data-theme="light"] .form-card .btn-primary:active,
html.theme-light .form-card .btn-primary:active {
  transform: translateY(0) !important;
}

/* Divider inside Form Card */
html[data-theme="light"] .form-card .divider,
html.theme-light .form-card .divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 20px 0 !important;
  color: #8A94A6 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

html[data-theme="light"] .form-card .divider::before,
html[data-theme="light"] .form-card .divider::after,
html.theme-light .form-card .divider::before,
html.theme-light .form-card .divider::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: #E2E7F0 !important;
}

/* Google Sign-in / Secondary Button */
html[data-theme="light"] .form-card .btn-secondary,
html.theme-light .form-card .btn-secondary {
  width: 100% !important;
  min-height: 48px !important;
  background: #FFFFFF !important;
  border: 1px solid #D2D9E8 !important;
  border-radius: 10px !important;
  color: #1E2533 !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(18, 22, 34, 0.04) !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

html[data-theme="light"] .form-card .btn-secondary:hover,
html.theme-light .form-card .btn-secondary:hover {
  background: #F8FAFC !important;
  border-color: #B8C4DC !important;
  box-shadow: 0 4px 14px rgba(18, 22, 34, 0.08) !important;
  transform: translateY(-1px) !important;
}

html[data-theme="light"] .form-card .btn-secondary:active,
html.theme-light .form-card .btn-secondary:active {
  transform: translateY(0) !important;
}

/* Footer Switch Link */
html[data-theme="light"] .form-card .form-switch,
html.theme-light .form-card .form-switch {
  margin-top: 24px !important;
  font-size: 13.5px !important;
  color: #60687A !important;
  text-align: center !important;
  text-shadow: none !important;
}

html[data-theme="light"] .form-card .form-switch a,
html.theme-light .form-card .form-switch a {
  color: var(--cyan) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 2px 4px !important;
  transition: color 0.15s ease !important;
}

html[data-theme="light"] .form-card .form-switch a:hover,
html.theme-light .form-card .form-switch a:hover {
  color: #008196 !important;
  text-decoration: underline !important;
}

/* Auth Error & Notice Messages */
html[data-theme="light"] #login-error,
html[data-theme="light"] #signup-error,
html.theme-light #login-error,
html.theme-light #signup-error {
  color: #D32F2F !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .auth-error-msg,
html.theme-light .auth-error-msg {
  background: #FFF0F2 !important;
  border-color: #FFA4B0 !important;
  color: #D32F2F !important;
}

html[data-theme="light"] .auth-error-msg a,
html.theme-light .auth-error-msg a {
  color: #0288D1 !important;
}

html[data-theme="light"] .auth-verify-notice,
html.theme-light .auth-verify-notice {
  background: #EBF8FA !important;
  border: 1px solid #B4E6F0 !important;
  color: #0E4B5A !important;
  text-shadow: none !important;
}

html[data-theme="light"] .auth-success-notice,
html.theme-light .auth-success-notice {
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #047857 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .btn-resend-verify,
html.theme-light .btn-resend-verify {
  border-color: #009EB8 !important;
  color: #008196 !important;
  background: transparent !important;
  text-shadow: none !important;
}

html[data-theme="light"] .btn-resend-verify:hover,
html.theme-light .btn-resend-verify:hover {
  background: rgba(0, 158, 184, 0.1) !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  html[data-theme="light"] .form-card,
  html.theme-light .form-card {
    padding: 28px 20px !important;
    border-radius: 14px !important;
  }
}

/* Secondary Button (General) */
html[data-theme="light"] .btn-secondary {
  background: #EEF2F8;
  border-color: #D2D9E8;
  color: #121620;
}

html[data-theme="light"] .btn-secondary:hover {
  background: #E5EBF5;
  border-color: #C0C8DA;
  color: #121620;
}

/* ---------- 7. Profile Settings List in Light Mode ---------- */
html[data-theme="light"] .settings-row {
  color: #121620;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .settings-list > a.settings-row[href*="edit-profile"],
html[data-theme="light"] .settings-row:first-child {
  border-top: none !important;
}

html[data-theme="light"] .settings-row svg {
  stroke: #7B8599;
}

html[data-theme="light"] .settings-row:hover {
  color: var(--cyan);
}

html[data-theme="light"] .settings-row--danger,
html[data-theme="light"] .settings-row--danger span {
  color: var(--crimson) !important;
}

html[data-theme="light"] .settings-row--danger svg {
  stroke: var(--crimson) !important;
}

html[data-theme="light"] .settings-row--danger:hover,
html[data-theme="light"] .settings-row--danger:hover span {
  color: #c41e33 !important;
}

html[data-theme="light"] .settings-row--danger:hover svg {
  stroke: #c41e33 !important;
}

/* ---------- 8. Tables (Standings & Results) ---------- */
html[data-theme="light"] .standings-table th,
html[data-theme="light"] .leaderboard-table th {
  color: #60687A;
  border-bottom-color: #DCE3EF;
}

html[data-theme="light"] .standings-table td,
html[data-theme="light"] .leaderboard-table td {
  color: #121620;
  border-top-color: #E6EAF2;
}

html[data-theme="light"] .leaderboard-table tr:hover {
  background: rgba(0, 158, 184, 0.04);
}

/* ---------- 9. Site Footer ---------- */
html[data-theme="light"] .site-footer {
  background: #FFFFFF;
  border-top: 1px solid #DCE3EF;
  color: #60687A;
}

html[data-theme="light"] .site-footer a {
  color: #384252;
}

html[data-theme="light"] .site-footer a:hover {
  color: var(--cyan);
}

/* ---------- 10. Modals & Dialogs (Theme, Language, Logout) ---------- */
html[data-theme="light"] .lang-overlay,
html[data-theme="light"] .theme-overlay,
html[data-theme="light"] .logout-overlay,
html[data-theme="light"] .reg-confirm-overlay,
html[data-theme="light"] .popup-message-overlay {
  background: rgba(18, 22, 34, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="light"] :is(.lang-dialog, .theme-dialog, .logout-dialog, .reg-confirm-card, .popup-message-modal, .security-dialog) {
  background: #FFFFFF;
  border: 1px solid #DCE3EF;
  box-shadow: 0 20px 48px rgba(18, 22, 34, 0.16);
  color: #121620;
}

html[data-theme="light"] :is(.lang-dialog__title, .theme-dialog__title, .logout-dialog__title, .reg-confirm-card__title, .security-dialog__title) {
  color: #121620;
}

html[data-theme="light"] :is(.lang-dialog__desc, .theme-dialog__desc, .logout-dialog__text, .reg-confirm-card__en, .security-dialog__text) {
  color: #60687A;
}

html[data-theme="light"] :is(.lang-dialog__close, .theme-dialog__close, .security-dialog__close) {
  color: #7B8599;
}

html[data-theme="light"] :is(.lang-dialog__close:hover, .theme-dialog__close:hover, .security-dialog__close:hover) {
  color: #121620;
  background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .security-dialog__btn {
  background: var(--cyan);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 158, 184, 0.35);
}

html[data-theme="light"] :is(.lang-option-btn, .theme-option-btn) {
  background: #F5F7FC;
  border: 1px solid #DCE3EF;
  color: #121620;
}

html[data-theme="light"] :is(.lang-option-btn__title, .theme-option-btn__title) {
  color: #121620;
}

html[data-theme="light"] :is(.lang-option-btn:hover, .theme-option-btn:hover) {
  background: #EBF4FC;
  border-color: var(--cyan);
}

html[data-theme="light"] :is(.lang-option-btn.is-active, .theme-option-btn.is-active) {
  background: linear-gradient(135deg, rgba(0, 158, 184, 0.12) 0%, rgba(232, 40, 63, 0.05) 100%);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0, 158, 184, 0.18);
}

html[data-theme="light"] :is(.lang-dialog__cancel-btn, .theme-dialog__cancel-btn) {
  color: #60687A;
  border-color: #DCE3EF;
}

html[data-theme="light"] :is(.lang-dialog__cancel-btn:hover, .theme-dialog__cancel-btn:hover) {
  color: #121620;
  border-color: #C0C8DA;
  background: #F0F3F8;
}

html[data-theme="light"] .logout-dialog__btn--no,
html[data-theme="light"] .reg-confirm-card__btn--no {
  background: #F0F3F9;
  border-color: #D0D8E8;
  color: #121620;
}

/* Badges in Light Mode */
html[data-theme="light"] .settings-row__auth-badge {
  background: rgba(0, 158, 184, 0.1);
  border-color: rgba(0, 158, 184, 0.3);
  color: var(--cyan);
}

/* ---------- 11. Appearance Modal Styles (Both Dark & Light) ---------- */
.settings-row__theme-badge {
  background: rgba(232, 184, 75, 0.12);
  border: 1px solid rgba(232, 184, 75, 0.35);
  color: #E8B84B;
  font-weight: 700;
  letter-spacing: 0.06em;
}

html[data-theme="light"] .settings-row__theme-badge--light {
  background: rgba(0, 158, 184, 0.12);
  border: 1px solid rgba(0, 158, 184, 0.35);
  color: var(--cyan);
}

.theme-overlay {
  position: fixed;
  inset: 0;
  z-index: 145;
  background: rgba(5, 6, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: logout-fade-in 0.2s ease-out;
}

.theme-overlay[hidden] {
  display: none !important;
}

.theme-dialog {
  width: 100%;
  max-width: 380px;
  padding: 24px 22px 20px;
  border-radius: 16px;
  background: linear-gradient(165deg, #151822 0%, #0d0f15 100%);
  border: 1px solid rgba(232, 184, 75, 0.35);
  box-shadow:
    0 0 28px rgba(232, 184, 75, 0.18),
    0 16px 40px rgba(0, 0, 0, 0.7);
  animation: logout-pop 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.theme-dialog__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.theme-dialog__icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(232, 184, 75, 0.12);
  border: 1px solid rgba(232, 184, 75, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E8B84B;
  flex-shrink: 0;
}

.theme-dialog__icon-wrap svg {
  width: 20px;
  height: 20px;
}

.theme-dialog__title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 19px;
  font-weight: 700;
  color: #f4f6fb;
  flex: 1;
  letter-spacing: 0.02em;
}

.theme-dialog__close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}

.theme-dialog__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.theme-dialog__close svg {
  width: 18px;
  height: 18px;
}

.theme-dialog__desc {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(240, 244, 255, 0.72);
}

.theme-dialog__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.theme-option-btn {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8ecf6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.theme-option-btn * {
  pointer-events: none;
}

.theme-option-btn:hover {
  background: rgba(232, 184, 75, 0.08);
  border-color: rgba(232, 184, 75, 0.35);
  transform: translateY(-1px);
}

.theme-option-btn:active {
  transform: scale(0.98);
}

.theme-option-btn.is-active {
  background: linear-gradient(135deg, rgba(232, 184, 75, 0.14) 0%, rgba(232, 40, 63, 0.08) 100%);
  border-color: rgba(232, 184, 75, 0.65);
  box-shadow: 0 0 16px rgba(232, 184, 75, 0.2);
}

.theme-option-btn__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-option-btn__icon {
  font-size: 24px;
  line-height: 1;
}

.theme-option-btn__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-option-btn__title {
  font-family: var(--font-display, inherit);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.theme-option-btn__sub {
  font-size: 12px;
  color: var(--text-muted);
}

.theme-option-btn__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E8B84B;
  color: #06080d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(232, 184, 75, 0.6);
}

.theme-option-btn__check svg {
  width: 14px;
  height: 14px;
}

.theme-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

.theme-dialog__cancel-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--font-display, inherit);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-dialog__cancel-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}

/* ---------- 12. Live Page in Light Mode ---------- */
html[data-theme="light"] .live-platform {
  background: #FFFFFF !important;
  border-color: #DCE3EF !important;
  box-shadow: 0 2px 14px rgba(18, 22, 34, 0.05) !important;
}

html[data-theme="light"] .live-platform span {
  color: #121620 !important;
  font-weight: 700 !important;
}

/* Status Pill in Light Mode */
html[data-theme="light"] .status-pill--offline {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #1E293B !important;
  box-shadow: 0 2px 12px rgba(30, 41, 59, 0.08) !important;
}

html[data-theme="light"] .status-pill--offline .status-pill__text {
  color: #1E293B !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .status-pill--offline .status-pill__dot {
  background: #64748B !important;
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.2) !important;
}

html[data-theme="light"] .status-pill--live {
  background: #FFF1F2 !important;
  border-color: rgba(232, 40, 63, 0.6) !important;
  color: #C41E33 !important;
  box-shadow: 0 4px 18px rgba(232, 40, 63, 0.18) !important;
}

html[data-theme="light"] .status-pill--live .status-pill__text {
  color: #C41E33 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .status-pill--live .status-pill__dot {
  background: #E8283F !important;
  box-shadow: 0 0 8px rgba(232, 40, 63, 0.6) !important;
}

/* Stream Cards in Light Mode */
html[data-theme="light"] .stream-card {
  background: #FFFFFF !important;
  border-color: #DCE3EF !important;
  box-shadow: 0 4px 18px rgba(18, 22, 34, 0.05) !important;
}

html[data-theme="light"] .stream-card--offline {
  border-color: #DCE3EF !important;
  box-shadow: 0 4px 16px rgba(18, 22, 34, 0.04) !important;
  opacity: 1 !important;
}

html[data-theme="light"] .stream-card--live {
  border-color: rgba(232, 40, 63, 0.55) !important;
  box-shadow: 0 6px 24px rgba(232, 40, 63, 0.16) !important;
}

/* Stream Badges in Light Mode */
html[data-theme="light"] .stream-card__label--offline {
  background: #EEF2F8 !important;
  border-color: #CBD5E1 !important;
  color: #1E293B !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 2px 6px rgba(18, 22, 34, 0.05) !important;
}

html[data-theme="light"] .stream-card__label--live {
  background: #FFE4E6 !important;
  border-color: rgba(232, 40, 63, 0.5) !important;
  color: #BE123C !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-shadow: none !important;
  box-shadow: 0 2px 6px rgba(232, 40, 63, 0.12) !important;
}

/* Stream Card Action Buttons / Links in Light Mode */
html[data-theme="light"] .stream-card__link {
  background: linear-gradient(135deg, #E8283F 0%, #C41E33 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  box-shadow: 0 4px 14px rgba(232, 40, 63, 0.28) !important;
  opacity: 1 !important;
  filter: none !important;
}

html[data-theme="light"] .stream-card__link:hover {
  background: linear-gradient(135deg, #FF3850 0%, #D42037 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(232, 40, 63, 0.42) !important;
  transform: translateY(-1px);
}

html[data-theme="light"] .stream-card__link--offline {
  background: linear-gradient(135deg, #E8283F 0%, #C41E33 100%) !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  filter: none !important;
}

html[data-theme="light"] .stream-card__link--live {
  background: linear-gradient(135deg, #FF2E48 0%, #B91C1C 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 18px rgba(232, 40, 63, 0.45) !important;
}

html[data-theme="light"] .live-empty-note {
  color: #60687A !important;
}

/* =========================================================
   13. HELP & SUPPORT, WITHDRAW & NOTIFICATIONS IN LIGHT MODE
   Fixes the dark muddy alert box & styles floating widgets
   ========================================================= */

/* Help & Support Dialog Panel */
html[data-theme="light"] .hs-panel,
html.theme-light .hs-panel {
  background: #FFFFFF !important;
  border: 1px solid #DCE3EF !important;
  box-shadow: 0 24px 54px rgba(18, 22, 34, 0.18), 0 4px 16px rgba(18, 22, 34, 0.06) !important;
}

html[data-theme="light"] .hs-panel__title,
html.theme-light .hs-panel__title {
  color: #121620 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .hs-panel__close,
html.theme-light .hs-panel__close {
  border-color: #DCE3EF !important;
  color: #64748B !important;
  background: #F8FAFC !important;
}

html[data-theme="light"] .hs-panel__close:hover,
html.theme-light .hs-panel__close:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

/* Help & Support Alert Notice (Image 2 Fix) */
html[data-theme="light"] .hs-warn,
html.theme-light .hs-warn {
  border: 1px solid #FCD34D !important;
  background: linear-gradient(135deg, #FEFCE8 0%, #FEF3C7 100%) !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.14) !important;
}

html[data-theme="light"] .hs-warn__en,
html.theme-light .hs-warn__en {
  color: #92400E !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

html[data-theme="light"] .hs-warn__bn,
html.theme-light .hs-warn__bn {
  color: #B45309 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* Help & Support Contact Link Cards */
html[data-theme="light"] .hs-item__link,
html.theme-light .hs-item__link {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
  box-shadow: 0 2px 8px rgba(18, 22, 34, 0.04) !important;
}

html[data-theme="light"] .hs-item__link:hover,
html.theme-light .hs-item__link:hover {
  background: #FFFFFF !important;
  border-color: rgba(0, 158, 184, 0.55) !important;
  box-shadow: 0 6px 20px rgba(0, 158, 184, 0.16) !important;
  transform: translateY(-1px);
}

html[data-theme="light"] .hs-item__icon,
html.theme-light .hs-item__icon {
  background: rgba(0, 158, 184, 0.12) !important;
  color: #009EB8 !important;
}

html[data-theme="light"] .hs-item__label,
html.theme-light .hs-item__label {
  color: #0F172A !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .hs-item__value,
html.theme-light .hs-item__value {
  color: #64748B !important;
}

html[data-theme="light"] .hs-empty,
html.theme-light .hs-empty {
  color: #64748B !important;
}

html[data-theme="light"] .hs-overlay,
html.theme-light .hs-overlay {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Floating Action Buttons in Light Mode */
html[data-theme="light"] .hs-fab,
html.theme-light .hs-fab {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 158, 184, 0.4) !important;
  color: #009EB8 !important;
  box-shadow: 0 4px 18px rgba(18, 22, 34, 0.1), 0 0 12px rgba(0, 158, 184, 0.16) !important;
}

html[data-theme="light"] .hs-fab:hover,
html.theme-light .hs-fab:hover {
  background: #009EB8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 24px rgba(0, 158, 184, 0.38) !important;
}

html[data-theme="light"] .wd-fab,
html.theme-light .wd-fab {
  background: #FFFFFF !important;
  border: 1px solid rgba(217, 119, 6, 0.4) !important;
  color: #D97706 !important;
  box-shadow: 0 4px 18px rgba(18, 22, 34, 0.1), 0 0 12px rgba(245, 158, 11, 0.16) !important;
}

html[data-theme="light"] .wd-fab:hover,
html.theme-light .wd-fab:hover {
  background: #D97706 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 24px rgba(217, 119, 6, 0.38) !important;
}

/* Withdraw Modal in Light Mode */
html[data-theme="light"] .wd-modal,
html.theme-light .wd-modal {
  background: #FFFFFF !important;
  border: 1px solid #DCE3EF !important;
  box-shadow: 0 24px 54px rgba(18, 22, 34, 0.18) !important;
}

html[data-theme="light"] .wd-modal__title,
html.theme-light .wd-modal__title {
  color: #121620 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .wd-modal__close,
html.theme-light .wd-modal__close {
  border-color: #DCE3EF !important;
  color: #64748B !important;
}

html[data-theme="light"] .wd-modal__close:hover,
html.theme-light .wd-modal__close:hover {
  color: #E8283F !important;
  border-color: #E8283F !important;
}

html[data-theme="light"] .wd-balance,
html.theme-light .wd-balance {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

html[data-theme="light"] .wd-balance__value,
html.theme-light .wd-balance__value {
  color: #D97706 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .wd-item,
html.theme-light .wd-item {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

/* Notification Drawer in Light Mode */
html[data-theme="light"] .nf-panel,
html.theme-light .nf-panel {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #DCE3EF !important;
  box-shadow: 0 20px 50px rgba(18, 22, 34, 0.16), 0 0 20px rgba(0, 158, 184, 0.08) !important;
  color: #121620 !important;
}

html[data-theme="light"] .nf-panel__title,
html.theme-light .nf-panel__title {
  color: #121620 !important;
}

html[data-theme="light"] .nf-tool-btn,
html.theme-light .nf-tool-btn {
  background: #F0F4FA !important;
  color: #475569 !important;
  border-color: #CBD5E1 !important;
}

html[data-theme="light"] .nf-tool-btn:hover,
html.theme-light .nf-tool-btn:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

html[data-theme="light"] .nf-tab,
html.theme-light .nf-tab {
  background: #F1F5F9 !important;
  color: #64748B !important;
  border-color: #E2E8F0 !important;
}

html[data-theme="light"] .nf-tab--active,
html.theme-light .nf-tab--active {
  background: #009EB8 !important;
  color: #FFFFFF !important;
  border-color: #009EB8 !important;
}

html[data-theme="light"] .nf-item,
html.theme-light .nf-item {
  color: #121620 !important;
}

html[data-theme="light"] .nf-item:hover,
html.theme-light .nf-item:hover {
  background: rgba(0, 158, 184, 0.06) !important;
}

html[data-theme="light"] .nf-item__title,
html.theme-light .nf-item__title {
  color: #121620 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .nf-item__body,
html.theme-light .nf-item__body {
  color: #60687A !important;
}


/* =========================================================
   14. DYNAMIC COLOR EFFECTS ON LIGHT MODE (MAX MODE)
   Applies to every page in the user panel on PC & Mobile
   Only active in MAX MODE (suppressed in Performance Mode)
   ========================================================= */

/* A. Atmospheric Background Multi-Color Auras */
html[data-theme="light"]:not(.perf-mode-performance) body,
html.theme-light:not(.perf-mode-performance) body,
html[data-theme="light"].perf-mode-max body,
html.theme-light.perf-mode-max body {
  background: #F2F5FB !important;
  background-image:
    radial-gradient(ellipse 700px 520px at 8% 12%, rgba(0, 180, 216, 0.15) 0%, transparent 72%),
    radial-gradient(ellipse 680px 500px at 92% 16%, rgba(232, 40, 63, 0.13) 0%, transparent 70%),
    radial-gradient(ellipse 800px 480px at 50% 92%, rgba(16, 185, 129, 0.08) 0%, transparent 72%),
    radial-gradient(ellipse 600px 400px at 50% 35%, rgba(139, 92, 246, 0.06) 0%, transparent 70%) !important;
  background-attachment: fixed !important;
}

html[data-theme="light"]:not(.perf-mode-performance) body::before,
html.theme-light:not(.perf-mode-performance) body::before {
  background-image:
    linear-gradient(rgba(0, 180, 216, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 180, 216, 0.11) 1px, transparent 1px) !important;
  background-size: 52px 52px !important;
  -webkit-mask-image: radial-gradient(ellipse at 50% 10%, #000 0%, transparent 86%) !important;
  mask-image: radial-gradient(ellipse at 50% 10%, #000 0%, transparent 86%) !important;
  pointer-events: none !important;
}

/* B. Mobile Dynamic Background Wordmarks in Light MAX mode */
html[data-theme="light"]:not(.perf-mode-performance) .zbg-row,
html.theme-light:not(.perf-mode-performance) .zbg-row {
  background: linear-gradient(135deg, rgba(0, 180, 216, 0.22) 0%, rgba(232, 40, 63, 0.20) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-stroke: 1px rgba(0, 180, 216, 0.35) !important;
  color: transparent !important;
  filter: drop-shadow(0 0 16px rgba(0, 180, 216, 0.15)) !important;
}

/* C. Header & Navigation Glowing Accents */
html[data-theme="light"]:not(.perf-mode-performance) .brand-mark__glyph,
html.theme-light:not(.perf-mode-performance) .brand-mark__glyph {
  filter: drop-shadow(0 0 10px rgba(232, 40, 63, 0.35)) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .nav-pill--active,
html.theme-light:not(.perf-mode-performance) .nav-pill--active {
  background: linear-gradient(135deg, #00B4D8 0%, #009EB8 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 180, 216, 0.36), 0 0 20px rgba(0, 180, 216, 0.2) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .nav-pill--live .icon-btn__badge,
html.theme-light:not(.perf-mode-performance) .nav-pill--live .icon-btn__badge {
  box-shadow: 0 0 10px #E8283F, 0 0 18px rgba(232, 40, 63, 0.6) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .bottom-nav__item--active,
html.theme-light:not(.perf-mode-performance) .bottom-nav__item--active {
  color: #009EB8 !important;
  filter: drop-shadow(0 0 8px rgba(0, 158, 184, 0.5)) !important;
  font-weight: 700 !important;
}

/* D. Card Surfaces & Glowing Elevation Across Every Page */
html[data-theme="light"]:not(.perf-mode-performance) :is(.panel, .profile-header, .stat-card, .team-view-card, .edit-profile-card, .tutorial-rules-box, .stream-card, .leaderboard-slot__frame, .register-fee, .register-prize),
html.theme-light:not(.perf-mode-performance) :is(.panel, .profile-header, .stat-card, .team-view-card, .edit-profile-card, .tutorial-rules-box, .stream-card, .leaderboard-slot__frame, .register-fee, .register-prize) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%) !important;
  border: 1px solid rgba(220, 227, 239, 0.95) !important;
  box-shadow: 0 10px 28px rgba(18, 22, 34, 0.05), 0 0 22px rgba(0, 180, 216, 0.05) !important;
  position: relative !important;
}

html[data-theme="light"]:not(.perf-mode-performance) :is(.panel, .profile-header, .stat-card, .team-view-card, .edit-profile-card, .tutorial-rules-box, .stream-card)::before,
html.theme-light:not(.perf-mode-performance) :is(.panel, .profile-header, .stat-card, .team-view-card, .edit-profile-card, .tutorial-rules-box, .stream-card)::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 20px !important;
  right: 20px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 180, 216, 0.45) 50%, transparent 100%) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}

html[data-theme="light"]:not(.perf-mode-performance) :is(.reg-mode-card, .featured-match-card),
html.theme-light:not(.perf-mode-performance) :is(.reg-mode-card, .featured-match-card) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%) !important;
  border: 1px solid rgba(220, 227, 239, 0.95) !important;
  box-shadow: 0 10px 26px rgba(18, 22, 34, 0.05), 0 0 20px rgba(0, 180, 216, 0.05) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) :is(.reg-mode-card:hover, .featured-match-card:hover, .stat-card:hover, .stream-card:hover),
html.theme-light:not(.perf-mode-performance) :is(.reg-mode-card:hover, .featured-match-card:hover, .stat-card:hover, .stream-card:hover) {
  border-color: rgba(0, 180, 216, 0.55) !important;
  box-shadow: 0 14px 38px rgba(0, 180, 216, 0.15), 0 0 24px rgba(0, 180, 216, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* E. Profile Page Light Mode Color Effects (Image 1 Enhancements) */
html[data-theme="light"]:not(.perf-mode-performance) .profile-header,
html.theme-light:not(.perf-mode-performance) .profile-header {
  box-shadow: 0 12px 34px rgba(18, 22, 34, 0.06), 0 0 28px rgba(0, 180, 216, 0.08) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .profile-avatar-lg,
html.theme-light:not(.perf-mode-performance) .profile-avatar-lg {
  box-shadow: 0 0 22px rgba(0, 180, 216, 0.35) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .profile-avatar-lg__status,
html.theme-light:not(.perf-mode-performance) .profile-avatar-lg__status {
  background: #10B981 !important;
  box-shadow: 0 0 10px #10B981, 0 0 18px rgba(16, 185, 129, 0.5) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) span[style*="PERMANENT #ID"],
html.theme-light:not(.perf-mode-performance) span[style*="PERMANENT #ID"] {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #059669 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.22) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) span[style*="UNIQUE EMAIL"],
html.theme-light:not(.perf-mode-performance) span[style*="UNIQUE EMAIL"] {
  background: rgba(0, 180, 216, 0.14) !important;
  border-color: rgba(0, 180, 216, 0.45) !important;
  color: #009EB8 !important;
  box-shadow: 0 0 12px rgba(0, 180, 216, 0.22) !important;
}

/* ZORC Balance Card (Radiant Cyan-to-Crimson Mesh) */
html[data-theme="light"]:not(.perf-mode-performance) .zorc-card,
html.theme-light:not(.perf-mode-performance) .zorc-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F9FB 55%, #FFF5F6 100%) !important;
  border: 1px solid rgba(0, 180, 216, 0.35) !important;
  box-shadow: 0 12px 34px rgba(18, 22, 34, 0.06), 0 0 28px rgba(0, 180, 216, 0.1) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .zorc-card__value,
html.theme-light:not(.perf-mode-performance) .zorc-card__value {
  color: #121620 !important;
  text-shadow: 0 0 20px rgba(0, 180, 216, 0.15) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .zorc-card .btn-primary,
html[data-theme="light"]:not(.perf-mode-performance) a[href*="add-zorc"],
html.theme-light:not(.perf-mode-performance) .zorc-card .btn-primary,
html.theme-light:not(.perf-mode-performance) a[href*="add-zorc"] {
  background: linear-gradient(135deg, #FF2E48 0%, #E8283F 100%) !important;
  box-shadow: 0 4px 18px rgba(232, 40, 63, 0.38), 0 0 12px rgba(232, 40, 63, 0.2) !important;
  border: none !important;
  color: #FFFFFF !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .zorc-card .btn-primary:hover,
html[data-theme="light"]:not(.perf-mode-performance) a[href*="add-zorc"]:hover,
html.theme-light:not(.perf-mode-performance) .zorc-card .btn-primary:hover,
html.theme-light:not(.perf-mode-performance) a[href*="add-zorc"]:hover {
  box-shadow: 0 6px 24px rgba(232, 40, 63, 0.52), 0 0 18px rgba(232, 40, 63, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* ZORC History Glowing Indicators */
html[data-theme="light"]:not(.perf-mode-performance) .profile-main h2,
html[data-theme="light"]:not(.perf-mode-performance) .profile-main .section-title,
html.theme-light:not(.perf-mode-performance) .profile-main h2,
html.theme-light:not(.perf-mode-performance) .profile-main .section-title {
  position: relative !important;
  padding-left: 14px !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .profile-main h2::before,
html[data-theme="light"]:not(.perf-mode-performance) .profile-main .section-title::before,
html.theme-light:not(.perf-mode-performance) .profile-main h2::before,
html.theme-light:not(.perf-mode-performance) .profile-main .section-title::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 4px !important;
  bottom: 4px !important;
  width: 4px !important;
  border-radius: 4px !important;
  background: linear-gradient(to bottom, #E8283F, #FF455D) !important;
  box-shadow: 0 0 10px rgba(232, 40, 63, 0.55) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) span[style*="#00e699"],
html[data-theme="light"]:not(.perf-mode-performance) span[style*="#10B981"],
html[data-theme="light"]:not(.perf-mode-performance) span[style*="+"],
html.theme-light:not(.perf-mode-performance) span[style*="#00e699"],
html.theme-light:not(.perf-mode-performance) span[style*="#10B981"],
html.theme-light:not(.perf-mode-performance) span[style*="+"] {
  color: #059669 !important;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.28) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) span[style*="-50"],
html[data-theme="light"]:not(.perf-mode-performance) span[style*="-20"],
html.theme-light:not(.perf-mode-performance) span[style*="-50"],
html.theme-light:not(.perf-mode-performance) span[style*="-20"] {
  color: #DC2626 !important;
  text-shadow: 0 0 10px rgba(220, 38, 38, 0.22) !important;
}

/* F. Home Page Light Mode Color Accents */
html[data-theme="light"]:not(.perf-mode-performance) .marquee-banner,
html.theme-light:not(.perf-mode-performance) .marquee-banner {
  border: 1px solid rgba(0, 180, 216, 0.35) !important;
  box-shadow: 0 4px 20px rgba(0, 180, 216, 0.12), inset 0 0 16px rgba(232, 40, 63, 0.04) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .featured-match-card,
html.theme-light:not(.perf-mode-performance) .featured-match-card {
  background: linear-gradient(135deg, rgba(0, 180, 216, 0.05) 0%, #FFFFFF 50%, rgba(232, 40, 63, 0.05) 100%) !important;
  border: 1px solid rgba(220, 227, 239, 0.95) !important;
  box-shadow: 0 10px 30px rgba(18, 22, 34, 0.05), 0 0 20px rgba(0, 180, 216, 0.08) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .standings-table tr:first-child td:first-child span,
html.theme-light:not(.perf-mode-performance) .standings-table tr:first-child td:first-child span {
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45) !important;
}

/* G. Live Page Light Mode Color Accents */
html[data-theme="light"]:not(.perf-mode-performance) .status-pill--live,
html.theme-light:not(.perf-mode-performance) .status-pill--live {
  background: #FFF1F2 !important;
  border-color: #E8283F !important;
  color: #C41E33 !important;
  box-shadow: 0 0 18px rgba(232, 40, 63, 0.38) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .status-pill--live .status-pill__dot,
html.theme-light:not(.perf-mode-performance) .status-pill--live .status-pill__dot {
  background: #E8283F !important;
  box-shadow: 0 0 12px #E8283F, 0 0 20px rgba(232, 40, 63, 0.6) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .stream-card--live,
html.theme-light:not(.perf-mode-performance) .stream-card--live {
  border-color: rgba(232, 40, 63, 0.65) !important;
  box-shadow: 0 10px 32px rgba(232, 40, 63, 0.2), 0 0 22px rgba(232, 40, 63, 0.12) !important;
}

/* H. Tutorial & Rules Glowing Box */
html[data-theme="light"]:not(.perf-mode-performance) .tutorial-rules-box,
html.theme-light:not(.perf-mode-performance) .tutorial-rules-box {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFDF7 100%) !important;
  border: 1px solid rgba(232, 184, 75, 0.6) !important;
  box-shadow: 0 0 24px rgba(232, 184, 75, 0.18), 0 8px 24px rgba(18, 22, 34, 0.05) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .tutorial-video-frame,
html.theme-light:not(.perf-mode-performance) .tutorial-video-frame {
  box-shadow: 0 8px 26px rgba(18, 22, 34, 0.07), 0 0 18px rgba(0, 180, 216, 0.08) !important;
  border: 1px solid #DCE3EF !important;
}

/* I. Floating FABs Glow in Light MAX Mode */
html[data-theme="light"]:not(.perf-mode-performance) .hs-fab,
html.theme-light:not(.perf-mode-performance) .hs-fab {
  border-color: #009EB8 !important;
  box-shadow: 0 6px 20px rgba(18, 22, 34, 0.1), 0 0 18px rgba(0, 180, 216, 0.32) !important;
}

html[data-theme="light"]:not(.perf-mode-performance) .wd-fab,
html.theme-light:not(.perf-mode-performance) .wd-fab {
  border-color: #D97706 !important;
  box-shadow: 0 6px 20px rgba(18, 22, 34, 0.1), 0 0 18px rgba(245, 158, 11, 0.3) !important;
}


/* =========================================================
   15. STRICT PERFORMANCE MODE: ALL LIGHT COLOR EFFECTS OFF
   User constraint: "performance mode and max mode will still have
   their attributes same, but the light mode's color effect can't
   be seen in the performance mode."
   ========================================================= */

html[data-theme="light"].perf-mode-performance body,
html.theme-light.perf-mode-performance body,
html[data-perf-mode="performance"][data-theme="light"] body {
  background: var(--bg-void, #F2F5FB) !important;
  background-image: none !important;
}

html[data-theme="light"].perf-mode-performance body::before,
html[data-theme="light"].perf-mode-performance body::after,
html.theme-light.perf-mode-performance body::before,
html.theme-light.perf-mode-performance body::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

/* Strip colored drop-shadows, radiant mesh & glow borders */
html[data-theme="light"].perf-mode-performance :is(.panel, .profile-header, .zorc-card, .stat-card, .team-view-card, .edit-profile-card, .tutorial-rules-box, .stream-card, .leaderboard-slot__frame, .register-fee, .register-prize, .reg-mode-card, .featured-match-card, .marquee-banner, .site-footer),
html.theme-light.perf-mode-performance :is(.panel, .profile-header, .zorc-card, .stat-card, .team-view-card, .edit-profile-card, .tutorial-rules-box, .stream-card, .leaderboard-slot__frame, .register-fee, .register-prize, .reg-mode-card, .featured-match-card, .marquee-banner, .site-footer) {
  background: #FFFFFF !important;
  border-color: #DCE3EF !important;
  box-shadow: 0 1px 3px rgba(18, 22, 34, 0.05) !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

html[data-theme="light"].perf-mode-performance :is(.panel, .profile-header, .stat-card, .team-view-card, .edit-profile-card, .tutorial-rules-box, .stream-card)::before,
html.theme-light.perf-mode-performance :is(.panel, .profile-header, .stat-card, .team-view-card, .edit-profile-card, .tutorial-rules-box, .stream-card)::before {
  display: none !important;
}

html[data-theme="light"].perf-mode-performance :is(.reg-mode-card:hover, .featured-match-card:hover, .stat-card:hover, .stream-card:hover),
html.theme-light.perf-mode-performance :is(.reg-mode-card:hover, .featured-match-card:hover, .stat-card:hover, .stream-card:hover) {
  border-color: #CBD5E1 !important;
  box-shadow: 0 2px 8px rgba(18, 22, 34, 0.08) !important;
  transform: none !important;
}

html[data-theme="light"].perf-mode-performance .nav-pill--active,
html.theme-light.perf-mode-performance .nav-pill--active {
  box-shadow: none !important;
  text-shadow: none !important;
  background: #009EB8 !important;
}

html[data-theme="light"].perf-mode-performance .bottom-nav__item--active,
html.theme-light.perf-mode-performance .bottom-nav__item--active {
  filter: none !important;
  text-shadow: none !important;
  color: #009EB8 !important;
}

html[data-theme="light"].perf-mode-performance .profile-avatar-lg,
html[data-theme="light"].perf-mode-performance .profile-avatar-lg__status,
html[data-theme="light"].perf-mode-performance span[style*="PERMANENT #ID"],
html[data-theme="light"].perf-mode-performance span[style*="UNIQUE EMAIL"] {
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-theme="light"].perf-mode-performance .profile-main h2::before,
html[data-theme="light"].perf-mode-performance .profile-main .section-title::before {
  box-shadow: none !important;
}

html[data-theme="light"].perf-mode-performance .zorc-card,
html.theme-light.perf-mode-performance .zorc-card {
  background: #FFFFFF !important;
  border-color: #DCE3EF !important;
  box-shadow: 0 1px 3px rgba(18, 22, 34, 0.05) !important;
}

html[data-theme="light"].perf-mode-performance .zorc-card .btn-primary,
html[data-theme="light"].perf-mode-performance a[href*="add-zorc"] {
  box-shadow: none !important;
  background: #E8283F !important;
}

html[data-theme="light"].perf-mode-performance .hs-fab,
html[data-theme="light"].perf-mode-performance .wd-fab {
  box-shadow: 0 2px 8px rgba(18, 22, 34, 0.08) !important;
  filter: none !important;
}

html[data-theme="light"].perf-mode-performance .zbg-row {
  background: none !important;
  -webkit-text-stroke: 1px #CBD5E1 !important;
  color: transparent !important;
  filter: none !important;
}

/* Profile header celestial particles performance suppression (Light & Dark) */
html.perf-mode-performance .profile-header__particles,
html[data-perf-mode="performance"] .profile-header__particles {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}