@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body { font-family: 'Noto Sans', sans-serif; background-color: #0A0A0A; color: #F5F5F5; }
.tri-color-bar { background: linear-gradient(90deg, #C8102E, #C8102E 33%, #003DA5 33%, #003DA5 66%, #009B3A 66%, #009B3A); height: 3px; }
.tri-color-dot { background: conic-gradient(#C8102E 0deg 120deg, #003DA5 120deg 240deg, #009B3A 240deg 360deg); }
.nav-glass { background: rgba(10,10,10,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(212,175,55,0.1); }
.text-glow { text-shadow: 0 0 40px rgba(212,175,55,0.4); }
.hero-title {
  background: linear-gradient(135deg, #C8102E 0%, #003DA5 50%, #009B3A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(200,16,46,0.2)) drop-shadow(0 0 30px rgba(0,61,165,0.2)) drop-shadow(0 0 30px rgba(0,155,58,0.2));
}
.glow-gold { box-shadow: 0 0 25px rgba(212,175,55,0.4), 0 0 50px rgba(212,175,55,0.15); }
.glow-red { box-shadow: 0 0 30px rgba(200,16,46,0.3), 0 0 60px rgba(200,16,46,0.1); }
.card-base { background: linear-gradient(180deg, rgba(26,26,46,0.6), rgba(10,10,10,0.9)); border: 1px solid rgba(212,175,55,0.12); }
.card-hover { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 0 20px rgba(212,175,55,0.15); }
.section-divider { background: linear-gradient(90deg, transparent, rgba(212,175,55,0.2), transparent); height: 1px; }
.tab-active { color: #D4AF37; border-bottom: 2px solid #D4AF37; }
.tab-inactive { color: #94A3B8; border-bottom: 2px solid transparent; }
.tab-inactive:hover { color: #F5F5F5; }
.countdown-item { background: linear-gradient(135deg, rgba(200,16,46,0.1), rgba(26,26,46,0.8)); border: 1px solid rgba(212,175,55,0.2); }
.bento-card { background: linear-gradient(135deg, rgba(26,26,46,0.7), rgba(10,10,10,0.95)); border: 1px solid rgba(212,175,55,0.1); }
.schedule-line { background: linear-gradient(180deg, #D4AF37, rgba(212,175,55,0.1)); }
.filter-btn { transition: all 0.2s ease-out; }
.filter-btn.active { background: rgba(212,175,55,0.15); color: #D4AF37; border-color: rgba(212,175,55,0.3); }
.pot-badge { font-size: 0.65rem; padding: 2px 8px; border-radius: 9999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
#back-to-top { position: fixed; bottom: 5rem; right: 1.5rem; z-index: 40; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(212,175,55,0.15); border: 1px solid rgba(212,175,55,0.3); color: #D4AF37; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s, background 0.2s; pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#back-to-top:hover { background: rgba(212,175,55,0.3); }
@media (min-width: 768px) { #back-to-top { bottom: 2rem; } }

/* ============ LIGHT MODE ============ */
html.light body { background-color: #F8F9FA; color: #1A1A2E; }
html.light .nav-glass { background: rgba(255,255,255,0.92); border-color: rgba(212,175,55,0.2); }
html.light .text-glow { text-shadow: 0 0 30px rgba(212,175,55,0.25); }
html.light .hero-title {
  background: linear-gradient(135deg, #A30D25 0%, #003080 50%, #007A2E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(200,16,46,0.15)) drop-shadow(0 0 20px rgba(0,61,165,0.15)) drop-shadow(0 0 20px rgba(0,155,58,0.15));
}
html.light .card-base { background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,245,245,0.95)); border-color: rgba(0,0,0,0.08); }
html.light .card-hover:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 15px rgba(212,175,55,0.08); }
html.light .bento-card { background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,249,250,0.98)); border-color: rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
html.light .countdown-item { background: linear-gradient(135deg, rgba(200,16,46,0.06), rgba(240,240,250,0.9)); border-color: rgba(0,0,0,0.06); }
html.light .tab-inactive { color: #64748B; }
html.light .tab-inactive:hover { color: #1A1A2E; }
html.light .section-divider { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); }
html.light .filter-btn { border-color: rgba(0,0,0,0.1); }
html.light .filter-btn.active { background: rgba(212,175,55,0.1); color: #B8960C; border-color: rgba(212,175,55,0.3); }
html.light #back-to-top { background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.25); color: #B8960C; }
html.light #back-to-top:hover { background: rgba(212,175,55,0.2); }
html.light .text-muted { color: #64748B !important; }
html.light .text-text { color: #1A1A2E !important; }
html.light .text-dark { color: #0A0A0A !important; }
html.light .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; }
html.light .border-white\/10 { border-color: rgba(0,0,0,0.08) !important; }
html.light .bg-white\/5 { background: rgba(0,0,0,0.04) !important; }
html.light .bg-surface { background-color: #E8E8F0 !important; }
html.light .text-muted\/40 { color: rgba(100,116,139,0.7) !important; }
html.light .text-muted\/50 { color: rgba(100,116,139,0.7) !important; }
html.light .text-muted\/60 { color: rgba(100,116,139,0.75) !important; }
html.light .text-muted\/70 { color: rgba(100,116,139,0.8) !important; }
html.light .border-t { border-color: rgba(0,0,0,0.08) !important; }

/* Light mode: Hero section overrides */
html.light .hero-section { background: linear-gradient(135deg, #F0F4FF 0%, #FFF8F0 50%, #F0FFF4 100%) !important; }
html.light .hero-bg-img { opacity: 0.25 !important; }
html.light .hero-overlay { background: linear-gradient(to bottom, rgba(248,249,250,0.3), rgba(248,249,250,0.5), rgba(248,249,250,0.85)) !important; }
html.light .hero-section .text-gold { color: #8B6914 !important; }
html.light .hero-section .text-muted { color: #334155 !important; }
html.light .hero-section .text-text { color: #1A1A2E !important; }
html.light .hero-section .bg-gold\/10 { background: rgba(184,150,12,0.1) !important; }
html.light .hero-section .border-gold\/20 { border-color: rgba(184,150,12,0.25) !important; }
html.light .hero-section .border-gold\/30 { border-color: rgba(184,150,12,0.3) !important; }
html.light .hero-section .bg-primary\/5 { background: rgba(200,16,46,0.06) !important; }
html.light .hero-section .bg-secondary\/5 { background: rgba(0,61,165,0.06) !important; }
html.light .hero-section .countdown-item { background: linear-gradient(135deg, rgba(200,16,46,0.06), rgba(255,255,255,0.9)) !important; border-color: rgba(0,0,0,0.08) !important; }
html.light .hero-section .countdown-item .text-muted { color: #475569 !important; }
html.light .hero-section .countdown-item .text-gold { color: #8B6914 !important; }
html.light .hero-section .countdown-item .text-primary { color: #A30D25 !important; }
html.light .hero-section a.bg-gold { background-color: #D4AF37 !important; color: #0A0A0A !important; }
html.light .hero-section a.border-gold\/30 { border-color: rgba(184,150,12,0.4) !important; color: #1A1A2E !important; }
html.light .hero-section a.border-gold\/30:hover { border-color: rgba(184,150,12,0.7) !important; }
html.light .hero-section .tri-color-dot { opacity: 0.8; }

/* Light mode: Bento card text colors - darken for contrast */
html.light .bento-card .text-primary { color: #A30D25 !important; }
html.light .bento-card .text-secondary { color: #003080 !important; }
html.light .bento-card .text-accent { color: #007A2E !important; }
html.light .bento-card .text-gold { color: #8B6914 !important; }

/* Light mode: Timeline dot borders */
html.light .border-dark { border-color: #F8F9FA !important; }

/* Light mode: Footer */
html.light footer { border-color: rgba(0,0,0,0.08) !important; }

/* Theme toggle button */
#theme-toggle { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid rgba(212,175,55,0.2); background: rgba(212,175,55,0.08); color: #D4AF37; transition: background 0.2s, border-color 0.2s; }
#theme-toggle:hover { background: rgba(212,175,55,0.18); border-color: rgba(212,175,55,0.35); }
html.light #theme-toggle { color: #B8960C; background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.2); }