/**
 * Seasonal themes, global UI immersion (modals, menus, overlays, forms, everything).
 * Loaded last so [data-season] overrides win over light/dark defaults.
 */

/* =============================================================================
   SHARED, every surface picks up tokens below
   ============================================================================= */

[data-season] {
  color-scheme: dark;
  --season-bg-gradient: radial-gradient(ellipse at 50% 0%, var(--color-background-alt, #1a1a2e), var(--color-page-bg, #0a0a12));
  --season-bg-image: none;
}

/* Fixed viewport background, visible behind every page, modal backdrop, and panel */
[data-season] html {
  background: transparent !important;
}

[data-season] html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-color: var(--color-page-bg);
  background-image: var(--season-bg-gradient);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

[data-season] html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--season-bg-image);
  background-size: min(720px, 88vw) auto;
  background-position: center 108%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.24;
}

[data-season] body {
  background: transparent !important;
  min-height: 100%;
}

[data-season] body,
[data-season] #app,
[data-season] .classroom-container,
[data-season] .classroom-student-display,
[data-season] .student-display-main,
[data-season] .teacher-dashboard,
[data-season] .form-container,
[data-season] .marketing-page,
[data-season] .home-page,
[data-season] .classroom-reports-page,
[data-season] .auth-page,
[data-season] .wizard-container {
  color: var(--color-text);
}

[data-season] #app,
[data-season] .classroom-container,
[data-season] .classroom-student-display,
[data-season] .student-display-main,
[data-season] .teacher-dashboard,
[data-season] .form-container,
[data-season] .marketing-page,
[data-season] .home-page,
[data-season] .classroom-reports-page,
[data-season] .auth-page,
[data-season] .wizard-container {
  background: transparent !important;
}

[data-season] body.season-active #app {
  position: relative;
  z-index: 1;
}

[data-season] .header {
  z-index: 200;
}

[data-season] .header-buttons .btn-header-menu,
[data-season] .header-buttons .btn-notification,
[data-season] .header-buttons .btn-help,
[data-season] .header-buttons .btn-reports,
[data-season] .header-buttons .btn-theme,
[data-season] .header-buttons .student-view-toggle {
  color: rgba(255, 255, 255, 0.9);
}

[data-season] .header-buttons .btn-header-menu:hover,
[data-season] .header-buttons .btn-notification:hover,
[data-season] .header-buttons .btn-help:hover,
[data-season] .header-buttons .btn-reports:hover,
[data-season] .header-buttons .student-view-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

[data-season] .header-buttons .student-view-toggle[aria-pressed="true"] {
  background: var(--season-accent);
  color: #fff;
}

/* --- Modals & overlays --- */
[data-season] #modal-container:not(:empty),
[data-season] .student-shop-backdrop,
[data-season] .spellbook-backdrop,
[data-season] .give-award-overlay,
[data-season] .give-reward-overlay,
[data-season] .combat-overlay,
[data-season] .reward-celebration-overlay {
  background: var(--modal-backdrop) !important;
  backdrop-filter: blur(6px) saturate(1.1);
}

[data-season] .modal,
[data-season] .modal-shell .modal,
[data-season] .custom-modal,
[data-season] .nc-modal,
[data-season] .data-management-modal,
[data-season] .student-management-modal,
[data-season] .students-management-modal,
[data-season] .raids-white-theme,
[data-season] .campaigns-modal,
[data-season] .attendance-management-modal,
[data-season] .activity-center-modal,
[data-season] .random-encounter-modal,
[data-season] .student-transfer-modal,
[data-season] .inspiration-modal,
[data-season] .student-shop-panel,
[data-season] .student-shop-overlay .student-shop-panel,
[data-season] .spellbook-overlay .spellbook-panel,
[data-season] .help-panel,
[data-season] .form-box,
[data-season] .wizard-container .form-box,
[data-season] .give-reward-panel,
[data-season] .give-award-panel {
  background: linear-gradient(
    165deg,
    var(--color-modal-shell-glass-start, var(--color-modal-shell-start)),
    var(--color-modal-shell-glass-end, var(--color-modal-shell-end))
  ) !important;
  border-color: var(--color-modal-shell-border) !important;
  color: var(--color-text) !important;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--color-modal-shell-border),
    0 0 40px var(--season-glow) !important;
  backdrop-filter: blur(14px) saturate(1.15);
}

[data-season] .modal-header,
[data-season] .student-shop-header,
[data-season] .help-panel-header {
  background: var(--color-modal-shell-header) !important;
  border-bottom-color: var(--color-modal-shell-border) !important;
}

[data-season] .modal-title,
[data-season] .modal-header h2,
[data-season] .modal-header h3,
[data-season] .student-shop-header h2 {
  color: var(--season-accent) !important;
  font-family: Cinzel, serif;
  text-shadow: 0 0 20px var(--season-glow);
}

[data-season] .modal-body,
[data-season] .modal-footer,
[data-season] .modal-content,
[data-season] .modal-tabs,
[data-season] .data-management-modal .modal-content,
[data-season] .data-management-modal .modal-tabs,
[data-season] .data-management-modal .modal-body,
[data-season] .raids-white-theme .modal-content,
[data-season] .raids-white-theme .modal-body,
[data-season] .student-management-modal .modal-content,
[data-season] .student-shop-tabs,
[data-season] .student-shop-toolbar,
[data-season] .student-shop-grid-wrap,
[data-season] .student-shop-grid,
[data-season] .student-shop-preview,
[data-season] .student-shop-preview-meta {
  background: transparent !important;
  color: var(--color-text);
}

[data-season] .potion-belt-panel,
[data-season] .potion-belt-overlay .potion-belt-panel {
  border-color: var(--color-modal-shell-border) !important;
}

[data-season] .potion-belt-header,
[data-season] .potion-belt-preview,
[data-season] .potion-belt-inventory {
  background: transparent !important;
  color: var(--color-text);
}

/* --- Dropdowns & menus --- */
[data-season] .header-menu-dropdown,
[data-season] .nc-dropdown,
[data-season] .nc-modal,
[data-season] .mkt-nav__dropdown {
  background: linear-gradient(
    180deg,
    var(--color-modal-shell-start),
    var(--color-modal-shell-end)
  ) !important;
  border: 1px solid var(--color-modal-shell-border) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px var(--season-glow) !important;
  color: var(--color-text) !important;
}

[data-season] .header-menu-item,
[data-season] .header-menu-theme-option,
[data-season] .nc-dropdown-item,
[data-season] .mkt-nav__dropdown-link {
  color: var(--color-text) !important;
}

[data-season] .header-menu-item:hover,
[data-season] .header-menu-theme-option:hover,
[data-season] .nc-dropdown-item:hover,
[data-season] .mkt-nav__dropdown-link:hover {
  background: var(--season-accent-soft) !important;
}

[data-season] .header-menu-theme-option.active {
  border-color: var(--season-accent) !important;
  background: var(--season-accent-soft) !important;
}

[data-season] .header-menu-divider,
[data-season] .nc-dropdown-divider {
  background: var(--color-border) !important;
}

/* --- Classroom shell --- */
[data-season] .classroom-menu,
[data-season] .classroom-student-list,
[data-season] .student-dashboard-sidebar,
[data-season] .student-list-header {
  background: linear-gradient(
    180deg,
    var(--color-panel-glass-start, var(--color-surface)),
    var(--color-panel-glass-end, var(--color-background-alt))
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px) saturate(1.1);
}

[data-season] .classroom-student-list,
[data-season] .student-list-header {
  border-color: var(--season-accent) !important;
}

[data-season] .menu-header h3,
[data-season] .menu-section-title,
[data-season] .student-list-header h3,
[data-season] .student-list-header h4 {
  color: var(--season-accent) !important;
  font-family: Cinzel, serif;
}

[data-season] .menu-item {
  color: var(--color-text) !important;
  border-radius: 10px;
}

[data-season] .menu-item:hover,
[data-season] .menu-item.active {
  background: var(--season-accent-soft) !important;
  box-shadow: 0 0 12px var(--season-glow);
}

[data-season] .menu-item i {
  color: var(--season-accent) !important;
}

[data-season] .student-list-item {
  background: linear-gradient(
    135deg,
    var(--color-panel-glass-start, var(--color-surface)),
    var(--color-panel-glass-end, var(--color-background-alt))
  ) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 3px solid transparent !important;
  margin: 4px 8px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  backdrop-filter: blur(6px);
  color: var(--color-text);
}

[data-season] .student-list-item:hover {
  border-color: var(--season-accent) !important;
  border-left-color: var(--season-accent) !important;
  background: var(--season-accent-soft) !important;
  box-shadow: 0 0 14px var(--season-glow) !important;
}

[data-season] .student-list-item.active {
  border-color: var(--season-accent) !important;
  border-left-color: var(--season-accent) !important;
  background: var(--season-accent-soft) !important;
  box-shadow: 0 0 18px var(--season-glow), inset 0 0 0 1px var(--season-accent) !important;
}

[data-season] .student-search {
  background: var(--color-input-bg) !important;
  color: var(--color-input-text) !important;
  border-color: var(--color-input-border) !important;
}

[data-season] .student-search::placeholder {
  color: var(--color-text-light) !important;
}

[data-season] .student-search:focus {
  border-color: var(--season-accent) !important;
  box-shadow: 0 0 0 3px var(--season-accent-soft) !important;
}

[data-season] .filter-sort-toggle {
  background: var(--color-panel-glass-start, var(--color-surface)) !important;
  border-color: var(--color-border) !important;
  color: var(--season-accent) !important;
}

[data-season] .filter-sort-toggle:hover {
  border-color: var(--season-accent) !important;
  background: var(--season-accent-soft) !important;
}

/* Gradient fill only when there is no portrait image - !important background
   shorthand would otherwise wipe inline background-image on real portraits. */
[data-season] .student-avatar-thumb:not(.student-avatar-thumb--placeholder):not([style*="background-image"]),
[data-season] .student-roster-card-avatar:not([style*="background-image"]) {
  background: linear-gradient(135deg, var(--season-accent), var(--color-brand-quest)) !important;
  box-shadow: 0 0 10px var(--season-glow);
}

[data-season] .student-avatar-thumb[style*="background-image"],
[data-season] .student-roster-card-avatar[style*="background-image"] {
  box-shadow: 0 0 10px var(--season-glow);
}

[data-season] .student-avatar-thumb--placeholder {
  background: #ffffff !important;
  border: 2px dashed rgba(91, 33, 182, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(124, 115, 255, 0.14),
    0 1px 3px rgba(91, 33, 182, 0.12) !important;
  color: #6d28d9 !important;
}

[data-season] .student-avatar-thumb,
[data-season] .student-roster-card-avatar {
  border: 2px solid var(--season-accent-soft);
}

[data-season] .student-roster-card-level {
  border-color: var(--season-accent) !important;
  color: var(--season-accent) !important;
  background: var(--color-panel-glass-start, var(--color-surface)) !important;
}

[data-season] .student-roster-card {
  background: transparent !important;
  border: 1px solid transparent;
  border-radius: 12px;
}

[data-season] .student-roster-card:hover {
  background: var(--season-accent-soft) !important;
  border-color: var(--color-border) !important;
}

[data-season] .student-roster-card.active {
  background: var(--season-accent-soft) !important;
  box-shadow: inset 0 0 0 2px var(--season-accent), 0 0 16px var(--season-glow) !important;
}

[data-season] #student-list-content {
  background: transparent !important;
}

[data-season] .student-list-content:hover {
  scrollbar-color: var(--season-accent) transparent;
}

[data-season] .student-list-content::-webkit-scrollbar-thumb {
  background: var(--season-accent) !important;
}

[data-season] .student-dashboard-layout .classroom-student-list {
  background: linear-gradient(
    180deg,
    var(--color-panel-glass-start, var(--color-surface)),
    var(--color-panel-glass-end, var(--color-background-alt))
  ) !important;
  border-right-color: var(--season-accent) !important;
  backdrop-filter: blur(10px) saturate(1.1);
}

/* --- Student stat block & action HUD (teacher + student dashboard) --- */
html[data-season] .stats-overlay,
html[data-season] .action-overlay,
html[data-season] .student-dashboard-layout .stats-overlay,
html[data-season] .student-dashboard-layout .action-overlay,
html[data-season] .student-overlay-stack .stats-overlay,
html[data-season] .student-overlay-stack .action-overlay {
  background: linear-gradient(
    145deg,
    var(--color-modal-shell-glass-start, var(--color-modal-shell-start)),
    var(--color-modal-shell-glass-end, var(--color-modal-shell-end))
  ) !important;
  border: 2px solid var(--season-accent) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 24px var(--season-glow) !important;
  color: var(--color-text) !important;
  backdrop-filter: blur(14px) saturate(1.15);
}

html[data-season] .stats-overlay-header,
html[data-season] .student-dashboard-layout .stats-overlay-header {
  border-bottom: 1px solid var(--color-border) !important;
}

html[data-season] .stats-overlay-header,
html[data-season] .stats-overlay-header h2,
html[data-season] .student-dashboard-layout .stats-overlay-header h2 {
  color: var(--color-text) !important;
}

html[data-season] .action-overlay-header,
html[data-season] .student-dashboard-layout .action-overlay-header {
  color: var(--season-accent) !important;
  text-shadow: 0 0 12px var(--season-glow);
}

html[data-season] .level-badge {
  background: linear-gradient(135deg, var(--season-accent), var(--color-brand-quest)) !important;
  color: #fff !important;
  box-shadow: 0 0 12px var(--season-glow);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

html[data-season] .stat-bar-label {
  color: var(--color-text-secondary) !important;
}

html[data-season] .stat-bar-label span:last-child {
  color: var(--color-text) !important;
}

html[data-season] .stat-bar,
html[data-season] .student-dashboard-layout .stat-bar {
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid var(--color-border) !important;
}

html[data-season] .stat-info,
html[data-season] .student-dashboard-layout .stat-info {
  border-top: 1px solid var(--color-border) !important;
}

html[data-season] .stat-info-item {
  color: var(--color-text) !important;
}

html[data-season] .stat-info-item .label {
  color: var(--color-text-secondary) !important;
}

html[data-season] .action-btn-small,
html[data-season] .student-dashboard-layout .action-btn-small {
  background: linear-gradient(
    145deg,
    var(--color-panel-glass-start, var(--color-surface)),
    var(--color-panel-glass-end, var(--color-background-alt))
  ) !important;
  border: 2px solid var(--color-border) !important;
  color: var(--season-accent) !important;
  backdrop-filter: blur(6px);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

html[data-season] .action-btn-small i,
html[data-season] .student-dashboard-layout .action-btn-small,
html[data-season] .student-dashboard-layout .action-btn-small i {
  color: var(--season-accent) !important;
}

html[data-season] .action-btn-small:hover,
html[data-season] .student-dashboard-layout .action-btn-small:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--season-accent) !important;
  box-shadow: 0 0 18px var(--season-glow) !important;
  background: var(--season-accent-soft) !important;
  color: var(--season-accent) !important;
  z-index: 1000;
}

html[data-season] .action-btn-small:hover i,
html[data-season] .student-dashboard-layout .action-btn-small:hover i {
  color: var(--season-accent) !important;
}

html[data-season] .action-btn-small::after {
  background: var(--color-modal-shell-end) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--season-accent) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 10px var(--season-glow) !important;
}

html[data-season] .action-overlay-container,
html[data-season] .student-overlay-stack {
  filter: drop-shadow(0 4px 20px var(--season-glow));
}

/* --- Cards & panels --- */
[data-season] .stat-card,
[data-season] .classroom-card,
[data-season] .quick-action-card,
[data-season] .card,
[data-season] .form-box,
[data-season] .mkt-card,
[data-season] .mkt-pillar,
[data-season] .student-shop-tile,
[data-season] .award-card,
[data-season] .potion-card {
  background: linear-gradient(
    145deg,
    var(--color-surface),
    var(--color-background-alt)
  ) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-season] .stat-card:hover,
[data-season] .classroom-card:hover,
[data-season] .quick-action-card:hover,
[data-season] .student-shop-tile:hover {
  border-color: var(--season-accent) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 20px var(--season-glow) !important;
}

[data-season] .section-title,
[data-season] .dashboard-title,
[data-season] .card-title,
[data-season] .mkt-section-title {
  color: var(--season-accent) !important;
  font-family: Cinzel, serif;
}

[data-season] .stat-icon {
  filter: drop-shadow(0 0 8px var(--season-glow));
}

/* --- Buttons & inputs --- */
[data-season] .btn-primary,
[data-season] .modal-btn-primary,
[data-season] .btn-register {
  background: linear-gradient(135deg, var(--season-accent), var(--color-brand-quest)) !important;
  border-color: var(--season-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px var(--season-glow);
}

[data-season] .btn-primary:hover,
[data-season] .modal-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--season-glow);
}

[data-season] .btn-secondary,
[data-season] .btn-login,
[data-season] .modal-btn-secondary,
[data-season] .student-shop-tab {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

[data-season] .btn-secondary:hover,
[data-season] .student-shop-tab:hover {
  border-color: var(--season-accent) !important;
  background: var(--season-accent-soft) !important;
}

[data-season] .student-shop-tab.active {
  background: var(--season-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}

[data-season] input:not([type="checkbox"]):not([type="radio"]),
[data-season] select,
[data-season] textarea,
[data-season] .form-input {
  background: var(--color-input-bg) !important;
  color: var(--color-input-text) !important;
  border-color: var(--color-input-border) !important;
}

[data-season] input:focus,
[data-season] select:focus,
[data-season] textarea:focus {
  border-color: var(--season-accent) !important;
  box-shadow: 0 0 0 3px var(--season-accent-soft) !important;
}

/* --- Toasts & banners --- */
[data-season] .toast,
[data-season] .notification-toast {
  background: var(--color-modal-shell-end) !important;
  border: 1px solid var(--season-accent) !important;
  color: var(--color-text) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px var(--season-glow);
}

[data-season] .student-dashboard-viewonly-banner,
[data-season] .student-dashboard-impersonation-banner,
[data-season] .student-dashboard-lock-banner {
  background: var(--season-accent-soft) !important;
  border: 1px solid var(--season-accent) !important;
  color: var(--color-text) !important;
}

/* --- Tabs, chips, badges --- */
[data-season] .tab-btn.active,
[data-season] .dm-tab.active,
[data-season] .raids-tab.active {
  background: var(--season-accent) !important;
  border-color: var(--season-accent) !important;
  color: #fff !important;
}

[data-season] .tab-btn,
[data-season] .dm-tab,
[data-season] .raids-tab {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* --- Scrollbars --- */
[data-season] ::-webkit-scrollbar-track {
  background: var(--color-background-alt);
}

[data-season] ::-webkit-scrollbar-thumb {
  background: var(--season-accent);
  border-radius: 8px;
}

/* --- Fun: animated accent bar under header --- */
[data-season] .header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--season-accent),
    var(--color-brand-quest),
    var(--season-accent),
    var(--color-brand-teach),
    var(--season-accent)
  );
  background-size: 300% 100%;
  animation: season-header-shimmer 6s linear infinite;
}

[data-season] .header {
  position: sticky;
  overflow: visible;
}

@keyframes season-header-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* --- Falling theme flakes (emoji / icons) --- */
.seasonal-theme-decor {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  opacity: 1;
}

.seasonal-theme-flake {
  position: absolute;
  top: -12vh;
  left: var(--flake-left, 50%);
  font-size: var(--flake-size, 1rem);
  line-height: 1;
  opacity: var(--flake-opacity, 0.5);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
  animation: seasonal-flake-fall var(--flake-duration, 16s) linear var(--flake-delay, 0s) infinite;
  will-change: transform;
  user-select: none;
}

@keyframes seasonal-flake-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(var(--flake-drift, 20px), 120vh, 0)
      rotate(calc(var(--flake-spin, 1) * 360deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .seasonal-theme-flake {
    animation: none;
    display: none;
  }
}

.seasonal-theme-decor--halloween {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255, 117, 24, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(199, 125, 255, 0.12) 0%, transparent 40%);
}

.seasonal-theme-decor--christmas {
  background-image:
    radial-gradient(circle at 20% 25%, rgba(196, 30, 58, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(74, 222, 128, 0.1) 0%, transparent 42%);
}

.seasonal-theme-decor--valentines {
  background-image:
    radial-gradient(circle at 25% 30%, rgba(233, 30, 140, 0.14) 0%, transparent 42%),
    radial-gradient(circle at 75% 65%, rgba(255, 107, 157, 0.1) 0%, transparent 38%);
}

/* =============================================================================
   HALLOWEEN, token pack (html + dark beats prefers-color-scheme :root rules)
   ============================================================================= */
html[data-theme="dark"][data-season="halloween"],
html[data-season="halloween"] {
  --color-primary: #ff7518;
  --color-primary-dark: #e5650f;
  --color-primary-light: #ff9e00;
  --color-primary-text: #ff9e00;
  --color-brand-teach: #c77dff;
  --color-brand-quest: #ff9e00;
  --color-secondary: #ff6b35;
  --color-page-bg: #0a0510;
  --color-background: #140820;
  --color-background-alt: #1a0a2e;
  --color-background-secondary: #2d1b4e;
  --color-surface: #2a1845;
  --color-surface-hover: #352052;
  --color-surface-active: #3f2860;
  --color-border: rgba(255, 117, 24, 0.4);
  --color-border-dark: rgba(255, 117, 24, 0.55);
  --color-text: #f5e6ff;
  --color-text-secondary: #c9b8e0;
  --color-text-light: #9a8ab5;
  --color-input-bg: #1a0a2e;
  --color-input-text: #f5e6ff;
  --color-input-border: rgba(255, 117, 24, 0.35);
  --color-modal-bg: #1a0a2e;
  --color-modal-surface: #2a1845;
  --color-modal-shell-start: #1a0a2e;
  --color-modal-shell-end: #2d1b4e;
  --color-modal-shell-header: rgba(42, 24, 69, 0.95);
  --color-modal-shell-border: rgba(255, 117, 24, 0.5);
  --color-brand-hover-bg: rgba(255, 117, 24, 0.15);
  --color-selection-bg: rgba(255, 117, 24, 0.22);
  --color-selection-hover: rgba(255, 117, 24, 0.12);
  --color-toolbar-btn-icon: rgba(255, 255, 255, 0.88);
  --color-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --color-toolbar-btn-active-bg: #ff7518;
  --modal-backdrop: rgba(10, 5, 16, 0.48);
  --season-accent: #ff7518;
  --season-accent-soft: rgba(255, 117, 24, 0.2);
  --season-glow: rgba(255, 117, 24, 0.35);
  --season-bg-gradient: radial-gradient(ellipse at 50% -8%, #3d2060 0%, #0a0510 42%, #050208 100%);
  --season-bg-image: url('../images/events/trick-or-treat.webp');
  --color-dm-bg-start: rgba(26, 10, 46, 0.92);
  --color-dm-bg-end: rgba(45, 27, 78, 0.88);
  --color-dm-border: rgba(255, 117, 24, 0.5);
  --color-panel-glass-start: rgba(42, 24, 69, 0.82);
  --color-panel-glass-end: rgba(26, 10, 46, 0.78);
  --color-modal-shell-glass-start: rgba(26, 10, 46, 0.88);
  --color-modal-shell-glass-end: rgba(45, 27, 78, 0.84);
  --color-combat-shell-start: #2a1020;
  --color-combat-shell-end: #1a0818;
  --color-reward-shell-start: #1a2e18;
  --color-reward-shell-end: #0f1a10;
  --color-tool-panel-wash: linear-gradient(180deg, rgba(42, 24, 69, 0.9), rgba(26, 10, 46, 0.95));
}

[data-season="halloween"] .header {
  background: linear-gradient(180deg, rgba(26, 10, 46, 0.98) 0%, rgba(15, 5, 20, 0.94) 100%);
  border-bottom: none;
  box-shadow: 0 4px 32px rgba(255, 117, 24, 0.2);
}

[data-season="halloween"] .header-logo-teach {
  color: #c77dff;
  text-shadow: 0 0 16px rgba(199, 125, 255, 0.6);
}

[data-season="halloween"] .header-logo-quest {
  color: #ff9e00;
  text-shadow: 0 0 16px rgba(255, 158, 0, 0.6);
}

/* =============================================================================
   CHRISTMAS / TEACHMAS
   ============================================================================= */
html[data-theme="dark"][data-season="christmas"],
html[data-season="christmas"] {
  --color-primary: #c41e3a;
  --color-primary-dark: #9f1830;
  --color-primary-light: #f87171;
  --color-primary-text: #fca5a5;
  --color-brand-teach: #4ade80;
  --color-brand-quest: #f87171;
  --color-secondary: #dc2626;
  --color-page-bg: #071510;
  --color-background: #0a1f14;
  --color-background-alt: #0d2818;
  --color-background-secondary: #165b33;
  --color-surface: #0f3322;
  --color-surface-hover: #14402a;
  --color-surface-active: #1a4d34;
  --color-border: rgba(196, 30, 58, 0.4);
  --color-text: #ecfdf5;
  --color-text-secondary: #a7d4b8;
  --color-text-light: #6b9b7a;
  --color-input-bg: #0a1f14;
  --color-input-text: #ecfdf5;
  --color-input-border: rgba(74, 222, 128, 0.25);
  --color-modal-shell-start: #0d2818;
  --color-modal-shell-end: #165b33;
  --color-modal-shell-header: rgba(15, 51, 34, 0.95);
  --color-modal-shell-border: rgba(196, 30, 58, 0.45);
  --color-brand-hover-bg: rgba(196, 30, 58, 0.15);
  --color-selection-bg: rgba(74, 222, 128, 0.18);
  --color-toolbar-btn-active-bg: #c41e3a;
  --modal-backdrop: rgba(7, 21, 16, 0.48);
  --season-accent: #c41e3a;
  --season-accent-soft: rgba(196, 30, 58, 0.18);
  --season-glow: rgba(196, 30, 58, 0.3);
  --season-bg-gradient: radial-gradient(ellipse at 50% -8%, #165b33 0%, #071510 48%, #040d08 100%);
  --season-bg-image: url('../images/events/teachmas.webp');
  --color-dm-bg-start: rgba(13, 40, 24, 0.92);
  --color-dm-bg-end: rgba(22, 91, 51, 0.88);
  --color-dm-border: rgba(196, 30, 58, 0.45);
  --color-panel-glass-start: rgba(15, 51, 34, 0.82);
  --color-panel-glass-end: rgba(13, 40, 24, 0.78);
  --color-modal-shell-glass-start: rgba(13, 40, 24, 0.88);
  --color-modal-shell-glass-end: rgba(22, 91, 51, 0.84);
  --color-tool-panel-wash: linear-gradient(180deg, rgba(13, 40, 24, 0.92), rgba(22, 91, 51, 0.88));
}

[data-season="christmas"] .header {
  background: linear-gradient(180deg, rgba(13, 40, 24, 0.98) 0%, rgba(7, 21, 16, 0.95) 100%);
  border-bottom: none;
  box-shadow: 0 4px 32px rgba(196, 30, 58, 0.15);
}

[data-season="christmas"] .header-logo-teach {
  color: #4ade80;
  text-shadow: 0 0 14px rgba(74, 222, 128, 0.5);
}

[data-season="christmas"] .header-logo-quest {
  color: #f87171;
  text-shadow: 0 0 14px rgba(248, 113, 113, 0.5);
}

/* =============================================================================
   VALENTINES / FESTIVAL OF FRIENDSHIP
   ============================================================================= */
html[data-theme="dark"][data-season="valentines"],
html[data-season="valentines"] {
  --color-primary: #e91e8c;
  --color-primary-dark: #be185d;
  --color-primary-light: #ff6b9d;
  --color-primary-text: #ffb3d9;
  --color-brand-teach: #ffb3d9;
  --color-brand-quest: #ff6b9d;
  --color-page-bg: #1a0818;
  --color-background: #2a1025;
  --color-background-alt: #4a1942;
  --color-surface: #3d1a36;
  --color-surface-hover: #4a2242;
  --color-border: rgba(233, 30, 140, 0.4);
  --color-text: #fff0f7;
  --color-text-secondary: #e8b8d0;
  --color-text-light: #c990ad;
  --color-input-bg: #2a1025;
  --color-input-text: #fff0f7;
  --color-input-border: rgba(233, 30, 140, 0.35);
  --color-modal-shell-start: #4a1942;
  --color-modal-shell-end: #3d1a36;
  --color-modal-shell-header: rgba(74, 25, 66, 0.95);
  --color-modal-shell-border: rgba(233, 30, 140, 0.45);
  --color-brand-hover-bg: rgba(233, 30, 140, 0.15);
  --color-selection-bg: rgba(233, 30, 140, 0.2);
  --color-toolbar-btn-active-bg: #e91e8c;
  --modal-backdrop: rgba(26, 8, 24, 0.48);
  --season-accent: #e91e8c;
  --season-accent-soft: rgba(233, 30, 140, 0.18);
  --season-glow: rgba(233, 30, 140, 0.32);
  --season-bg-gradient: radial-gradient(ellipse at 50% -8%, #7b2869 0%, #1a0818 48%, #120510 100%);
  --season-bg-image: url('../images/events/friendship-festival.webp');
  --color-dm-bg-start: rgba(74, 25, 66, 0.92);
  --color-dm-bg-end: rgba(61, 26, 54, 0.88);
  --color-dm-border: rgba(233, 30, 140, 0.45);
  --color-panel-glass-start: rgba(61, 26, 54, 0.82);
  --color-panel-glass-end: rgba(42, 16, 37, 0.78);
  --color-modal-shell-glass-start: rgba(74, 25, 66, 0.88);
  --color-modal-shell-glass-end: rgba(61, 26, 54, 0.84);
  --color-tool-panel-wash: linear-gradient(180deg, rgba(74, 25, 66, 0.9), rgba(61, 26, 54, 0.92));
}

[data-season="valentines"] .header {
  background: linear-gradient(180deg, rgba(74, 25, 66, 0.98) 0%, rgba(26, 8, 24, 0.95) 100%);
  border-bottom: none;
  box-shadow: 0 4px 32px rgba(233, 30, 140, 0.18);
}

[data-season="valentines"] .header-logo-teach { color: #ffb3d9; }
[data-season="valentines"] .header-logo-quest { color: #ff6b9d; }

/* =============================================================================
   EASTER
   ============================================================================= */
html[data-theme="dark"][data-season="easter"],
html[data-season="easter"] {
  --color-primary: #5ecf9a;
  --color-primary-dark: #3da876;
  --color-primary-light: #8ae0b8;
  --color-primary-text: #b8f0d4;
  --color-brand-teach: #7dd3c0;
  --color-brand-quest: #f0c75e;
  --color-secondary: #6ec1e0;
  --color-page-bg: #071612;
  --color-background: #0c221c;
  --color-background-alt: #12332a;
  --color-background-secondary: #1a4a3c;
  --color-surface: #154036;
  --color-surface-hover: #1b4f43;
  --color-surface-active: #225f50;
  --color-border: rgba(94, 207, 154, 0.4);
  --color-border-dark: rgba(94, 207, 154, 0.55);
  --color-text: #eefcf5;
  --color-text-secondary: #b5dcc9;
  --color-text-light: #7eaa97;
  --color-input-bg: #0c221c;
  --color-input-text: #eefcf5;
  --color-input-border: rgba(94, 207, 154, 0.3);
  --color-modal-bg: #0c221c;
  --color-modal-surface: #154036;
  --color-modal-shell-start: #12332a;
  --color-modal-shell-end: #1a4a3c;
  --color-modal-shell-header: rgba(21, 64, 54, 0.95);
  --color-modal-shell-border: rgba(240, 199, 94, 0.45);
  --color-brand-hover-bg: rgba(94, 207, 154, 0.15);
  --color-selection-bg: rgba(94, 207, 154, 0.2);
  --color-selection-hover: rgba(94, 207, 154, 0.12);
  --color-toolbar-btn-icon: rgba(255, 255, 255, 0.88);
  --color-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --color-toolbar-btn-active-bg: #5ecf9a;
  --modal-backdrop: rgba(7, 22, 18, 0.48);
  --season-accent: #f0c75e;
  --season-accent-soft: rgba(240, 199, 94, 0.18);
  --season-glow: rgba(94, 207, 154, 0.32);
  --season-bg-gradient: radial-gradient(ellipse at 50% -8%, #2a6b55 0%, #071612 48%, #040e0b 100%);
  --season-bg-image: url('../images/events/easter.webp');
  --color-dm-bg-start: rgba(18, 51, 42, 0.92);
  --color-dm-bg-end: rgba(21, 64, 54, 0.88);
  --color-dm-border: rgba(94, 207, 154, 0.45);
  --color-panel-glass-start: rgba(21, 64, 54, 0.82);
  --color-panel-glass-end: rgba(12, 34, 28, 0.78);
  --color-modal-shell-glass-start: rgba(18, 51, 42, 0.88);
  --color-modal-shell-glass-end: rgba(21, 64, 54, 0.84);
  --color-tool-panel-wash: linear-gradient(180deg, rgba(18, 51, 42, 0.9), rgba(21, 64, 54, 0.92));
}

[data-season="easter"] .header {
  background: linear-gradient(180deg, rgba(18, 51, 42, 0.98) 0%, rgba(7, 22, 18, 0.95) 100%);
  border-bottom: none;
  box-shadow: 0 4px 32px rgba(94, 207, 154, 0.18);
}

[data-season="easter"] .header-logo-teach { color: #7dd3c0; }
[data-season="easter"] .header-logo-quest { color: #f0c75e; }

/* =============================================================================
   EXTRA SURFACES, combat, rewards, context menus, tools, marketing
   ============================================================================= */

[data-season] .student-action-context-menu,
[data-season] .filter-sort-panel,
[data-season] .combat-panel,
[data-season] .combat-dramatic-results-card,
[data-season] .combat-dramatic-roster-card,
[data-season] .combat-defense-row,
[data-season] .combat-curse-student-row,
[data-season] .combat-damage-tile,
[data-season] .combat-result-card,
[data-season] .reward-celebration-card,
[data-season] .spellbook-panel,
[data-season] .data-management-toolbar,
[data-season] .data-management-sidebar,
[data-season] .activity-center-sidebar,
[data-season] .help-topic-card,
[data-season] .mkt-hero,
[data-season] .mkt-nav {
  background: linear-gradient(
    145deg,
    var(--color-modal-shell-start),
    var(--color-modal-shell-end)
  ) !important;
  border-color: var(--color-modal-shell-border) !important;
  color: var(--color-text) !important;
}

[data-season] .student-action-context-menu {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 20px var(--season-glow) !important;
}

[data-season] .student-action-context-menu-header {
  color: var(--season-accent) !important;
  border-bottom-color: var(--color-border) !important;
}

[data-season] .student-action-context-menu-item i {
  color: var(--season-accent) !important;
}

[data-season] .student-action-context-menu-item:hover {
  background: var(--season-accent-soft) !important;
  color: var(--color-text) !important;
}

[data-season] .combat-panel,
[data-season] .combat-dramatic-results-card {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 32px var(--season-glow) !important;
}

[data-season] .combat-scene-head h3,
[data-season] .combat-section h3,
[data-season] .combat-section h4,
[data-season] .combat-chip,
[data-season] .reward-celebration-title,
[data-season] .reward-celebration-kicker {
  color: var(--season-accent) !important;
}

[data-season] .combat-damage-tile--selected,
[data-season] .reward-card.selected,
[data-season] .student-roster-card--selected {
  border-color: var(--season-accent) !important;
  box-shadow: 0 0 16px var(--season-glow) !important;
}

[data-season] .reward-celebration-backdrop {
  background: var(--modal-backdrop) !important;
}

[data-season] .reward-celebration-card {
  border: 2px solid var(--season-accent) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5), 0 0 40px var(--season-glow) !important;
}

[data-season] .student-roster-card:hover {
  border-color: var(--season-accent) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 14px var(--season-glow) !important;
}

[data-season] .mkt-hero__title,
[data-season] .mkt-hero__subtitle,
[data-season] .mkt-nav__link {
  color: var(--color-text) !important;
}

[data-season] .mkt-hero__title span,
[data-season] .mkt-nav__brand-teach {
  color: var(--color-brand-teach) !important;
}

[data-season] .mkt-nav__brand-quest {
  color: var(--color-brand-quest) !important;
}

[data-season] .mkt-btn--primary {
  background: linear-gradient(135deg, var(--season-accent), var(--color-brand-quest)) !important;
  box-shadow: 0 4px 20px var(--season-glow);
}

[data-season] .classroom-toolbar,
[data-season] .classroom-bottom-bar,
[data-season] .toolbar-btn {
  background: var(--color-tool-panel-wash) !important;
  border-color: var(--color-border) !important;
}

[data-season] .toolbar-btn:hover,
[data-season] .toolbar-btn.active {
  background: var(--season-accent-soft) !important;
  box-shadow: 0 0 12px var(--season-glow);
}

[data-season] .toolbar-btn.active {
  background: var(--season-accent) !important;
  color: #fff !important;
}

[data-season] .toolbar-btn i {
  color: var(--color-toolbar-btn-icon, rgba(255, 255, 255, 0.88));
}

[data-season] .seasonal-event-tab.active,
[data-season] .seasonal-candy-item.owned,
[data-season] .seasonal-advent-day.can-open {
  border-color: var(--season-accent) !important;
  box-shadow: 0 0 12px var(--season-glow);
}

[data-season] .seasonal-event-banner {
  animation: season-banner-glow 3s ease-in-out infinite;
}

@keyframes season-banner-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--season-glow); }
  50% { box-shadow: 0 0 20px 4px var(--season-glow); }
}

[data-season] .data-management-modal .damage-card,
[data-season] .data-management-modal .reward-card,
[data-season] .data-management-modal .spell-card,
[data-season] .data-management-modal .list-item,
[data-season] .data-management-modal .card-item {
  background: var(--color-panel-glass-start, var(--color-surface)) !important;
  border-color: var(--color-modal-shell-border) !important;
  backdrop-filter: blur(8px);
}