/* ===== CSS VARIABLES / THEMES ===== */
:root, [data-theme="brand"] {
  --primary: #F58220;
  --primary-hover: #E0741A;
  --primary-light: #FFF3E6;
  --secondary: #4AA8D8;
  --secondary-light: #E8F4FD;
  --dark: #2D3748;
  --dark-secondary: #4A5568;
  --bg: #FFFFFF;
  --bg-alt: #F7FAFC;
  --bg-section-blue: #E8F4FD;
  --bg-section-orange: #FFF3E6;
  --card-bg: #FFFFFF;
  --card-shadow: 0 4px 20px rgba(0,0,0,0.08);
  --card-shadow-hover: 0 8px 30px rgba(0,0,0,0.12);
  --text: #2D3748;
  --text-secondary: #718096;
  --text-muted: #A0AEC0;
  --border: #E2E8F0;
  --footer-bg: #2D3748;
  --footer-text: #CBD5E0;
  --gradient-orange: linear-gradient(135deg, #F58220, #FF9F43);
  --gradient-blue: linear-gradient(135deg, #4AA8D8, #63B3DE);
  --header-bg: #FFFFFF;
  --header-border: #F58220;
  --badge-bg: rgba(245,130,32,0.1);
  --input-bg: #FFFFFF;
  --input-border: #E2E8F0;
  --star-color: #F58220;
}

[data-theme="dark"] {
  --primary: #F58220;
  --primary-hover: #FF9F43;
  --primary-light: #2a2218;
  --secondary: #4AA8D8;
  --secondary-light: #1a2a3a;
  --dark: #E2E8F0;
  --dark-secondary: #CBD5E0;
  --bg: #1a1a2e;
  --bg-alt: #16213e;
  --bg-section-blue: #1a2744;
  --bg-section-orange: #2a2218;
  --card-bg: #16213e;
  --card-shadow: 0 4px 20px rgba(0,0,0,0.3);
  --card-shadow-hover: 0 8px 30px rgba(0,0,0,0.4);
  --text: #E2E8F0;
  --text-secondary: #A0AEC0;
  --text-muted: #718096;
  --border: #2D3748;
  --footer-bg: #0f0f23;
  --footer-text: #A0AEC0;
  --gradient-orange: linear-gradient(135deg, #F58220, #FF9F43);
  --gradient-blue: linear-gradient(135deg, #4AA8D8, #63B3DE);
  --header-bg: #16213e;
  --header-border: #F58220;
  --badge-bg: rgba(245,130,32,0.15);
  --input-bg: #1a1a2e;
  --input-border: #2D3748;
  --star-color: #F58220;
}

[data-theme="night"] {
  --primary: #FFB347;
  --primary-hover: #FFA733;
  --primary-light: #1a2a40;
  --secondary: #63B3DE;
  --secondary-light: #0f2a4a;
  --dark: #E8F0FE;
  --dark-secondary: #B8D4F0;
  --bg: #0c2340;
  --bg-alt: #0a1f3a;
  --bg-section-blue: #0f2a4a;
  --bg-section-orange: #1a2a40;
  --card-bg: #0f2a4a;
  --card-shadow: 0 4px 20px rgba(0,0,0,0.4);
  --card-shadow-hover: 0 8px 30px rgba(0,0,0,0.5);
  --text: #E8F0FE;
  --text-secondary: #8BAAC8;
  --text-muted: #5A7A98;
  --border: #1a3a5a;
  --footer-bg: #061525;
  --footer-text: #5A7A98;
  --gradient-orange: linear-gradient(135deg, #FFB347, #FFCC80);
  --gradient-blue: linear-gradient(135deg, #4AA8D8, #63B3DE);
  --header-bg: #0a1f3a;
  --header-border: #FFB347;
  --badge-bg: rgba(255,179,71,0.15);
  --input-bg: #0c2340;
  --input-border: #1a3a5a;
  --star-color: #FFB347;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  transition: background 0.3s, color 0.3s;
  overflow-x: hidden;
  display: flex; flex-direction: column; min-height: 100vh;
}
.footer { margin-top: auto; }
a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; }
ul { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }