/* ── Dark Theme (Default) — matches homepage dark palette ── */
:root {
  --primary: #E088D8;
  --primary-light: #f0b8eb;
  --primary-dark: #b060a8;
  --saffron: #FFBB77;
  --saffron-light: #FFD49A;
  --bg-body: linear-gradient(180deg,#08051a 0%,#18103a 30%,#2e1408 62%,#3e1c08 82%,#4a2208 100%);
  --bg-card: #130a2c;
  --bg-card-hover: #1c1040;
  --bg-header: rgba(8,5,26,.96);
  --bg-input: #180d34;
  --border: #3a2868;
  --border-light: #4e3882;
  --text: #f5e6d0;
  --text-secondary: #c8b4a0;
  --text-muted: rgba(245,230,208,.45);
  --shadow-card: 0 2px 16px rgba(0,0,0,0.45);
  --header-bg: rgba(8,5,26,.96);
  --header-text: #f5e6d0;
  --header-border: rgba(255,187,119,.2);
  --btn-signin-bg: linear-gradient(135deg, #FFBB77, #E088D8);
  --btn-signin-text: #fff;
  --btn-register-bg: linear-gradient(135deg, #FFBB77, #E088D8);
  --btn-register-text: #fff;
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;
  --info: #60a5fa;
  --icon-filter: none;
  --overlay-bg: rgba(4,2,12,0.78);
  --menu-bg: linear-gradient(180deg, #0c0820 0%, #160c2a 45%, #221208 85%, #2e1808 100%);
  --menu-active-bg: rgba(224,136,216,0.14);
  --menu-active-border: #E088D8;
  --splash-bg: radial-gradient(ellipse at 50% 38%, #2a2250 0%, #1a1638 60%, #100e28 100%);
  --splash-subtitle: rgba(245,230,208,0.45);
  --splash-bar-bg: rgba(96,165,250,0.1);
  --splash-bar-fill: linear-gradient(90deg, #60a5fa, #E088D8, #FFBB77);
  --splash-title-gradient: linear-gradient(135deg, #60a5fa, #E088D8, #FFBB77);
  --tag-open-bg: rgba(52,211,153,0.12);
  --tag-open-border: rgba(52,211,153,0.25);
  --tag-open-text: #34d399;
  --program-label: #E088D8;
}

/* ── Light Theme — matches homepage light palette ── */
[data-theme="light"] {
  --primary: #9b3da0;
  --primary-light: #c060b0;
  --primary-dark: #7a2a80;
  --saffron: #cc5500;
  --saffron-light: #e87020;
  --bg-body: linear-gradient(180deg,#ffecd2 0%,#ffcc88 30%,#f0b868 62%,#c88040 82%,#a86030 100%);
  --bg-card: #ffebc8;
  --bg-card-hover: #ffe0b4;
  --bg-header: linear-gradient(135deg, #FF9933, #FFB050);
  --bg-input: #fff4e0;
  --border: rgba(180,80,0,.28);
  --border-light: rgba(180,80,0,.42);
  --text: #1a0a00;
  --text-secondary: rgba(60,20,0,.72);
  --text-muted: rgba(60,20,0,.48);
  --shadow-card: 0 2px 10px rgba(120,50,0,0.12);
  --header-bg: linear-gradient(135deg, #FF9933, #FFB050);
  --header-text: #fff;
  --header-border: #E8A040;
  --btn-signin-bg: linear-gradient(135deg, #FF9933, #E07000);
  --btn-signin-text: #fff;
  --btn-register-bg: linear-gradient(135deg, #FF9933, #E08000);
  --btn-register-text: #fff;
  --success: #16a34a;
  --warning: #d97706;
  --error: #dc2626;
  --info: #2563eb;
  --icon-filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
  --overlay-bg: rgba(0,0,0,0.45);
  --menu-bg: linear-gradient(180deg, #fff8e8 0%, #ffe8c0 45%, #f5d4a0 85%, #e0c080 100%);
  --menu-active-bg: rgba(204,85,0,0.08);
  --menu-active-border: #cc5500;
  --splash-bg: radial-gradient(ellipse at 50% 38%, #FFF3E0 0%, #FFF8F0 60%, #FFFBF5 100%);
  --splash-subtitle: rgba(100,40,0,0.5);
  --splash-bar-bg: rgba(180,100,20,0.1);
  --splash-bar-fill: linear-gradient(90deg, #CC6600, #FF9933);
  --splash-title-gradient: linear-gradient(135deg, #B85500, #E08000);
  --tag-open-bg: rgba(22,163,74,0.08);
  --tag-open-border: rgba(22,163,74,0.15);
  --tag-open-text: #16a34a;
  --program-label: #7a2a80;
}

/* ── Global gradient background ── */
html {
  background-color: #4a2208; /* elastic-scroll overscroll flash — dark theme */
}
html[data-theme="light"] {
  background-color: #a86030; /* elastic-scroll overscroll flash — light theme */
}
main {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* ── Transitions ── */
*, *::before, *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}