/* ===== CSS Variables ===== */
:root {
    --primary: #8B1A1A;
    --primary-dark: #5C1010;
    --primary-light: #C0392B;
    --secondary: #D4A74A;
    --secondary-light: #F0D68A;
    --gold: #D4A74A;
    --gold-light: #F5E6B8;
    --gold-dark: #B8922E;
    --dark: #1A1A2E;
    --dark-light: #2D2D44;
    --text: #2C3E50;
    --text-light: #7F8C8D;
    --bg: #F8F5F0;
    --white: #FFFFFF;
    --border: #ddd;
    --input-bg: #F8F5F0;
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow: 0 8px 30px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
    --shadow-xl: 0 30px 80px rgba(0,0,0,0.15);
    --shadow-glow: 0 0 20px rgba(212,167,74,0.15);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-full: 50px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-light) 30%, transparent); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-light) 50%, transparent); }
@supports (scrollbar-width: thin) { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-light) 30%, transparent) transparent; } }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}
::selection { background: var(--primary); color: var(--white); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ===== Buttons ===== */
.btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
    border-radius: var(--radius-full); font-weight: 600; font-size: 0.95rem; border: none;
    cursor: pointer; transition: var(--transition); text-align: center;
    justify-content: center; font-family: 'Inter', sans-serif;
    position: relative; overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent); opacity: 0; transition: var(--transition); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(0.97) translateY(0) !important; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: var(--white); box-shadow: 0 4px 15px rgba(139,26,26,0.3); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-light), var(--primary)); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(139,26,26,0.45); }
.btn-secondary { background: linear-gradient(135deg, var(--secondary), var(--gold-dark)); color: var(--dark); box-shadow: 0 4px 15px rgba(212,167,74,0.3); }
.btn-secondary:hover { background: linear-gradient(135deg, var(--gold-light), var(--secondary)); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(212,167,74,0.45); }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--dark); box-shadow: 0 4px 15px rgba(212,167,74,0.3); }
.btn-gold:hover { background: linear-gradient(135deg, var(--gold-light), var(--gold)); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(212,167,74,0.45); }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--white); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(139,26,26,0.3); }
.btn-outline-white { background: transparent; border: 2px solid rgba(255,255,255,0.5); color: var(--white); backdrop-filter: blur(4px); }
.btn-outline-white:hover { background: var(--white); color: var(--primary); transform: translateY(-3px); border-color: var(--white); }
.btn-white { background: var(--white); color: var(--primary); box-shadow: var(--shadow-sm); }
.btn-white:hover { background: var(--gold-light); transform: translateY(-3px); box-shadow: var(--shadow); }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn-lg { padding: 18px 40px; font-size: 1.05rem; }
/* Ripple effect on click */
.btn::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.25) 0%, transparent 60%); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.btn:active::before { opacity: 1; transition: opacity 0s; }

/* ===== Navigation ===== */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 16px 0; transition: var(--transition); background: transparent;
}
.navbar.scrolled { background: rgba(26,26,46,0.85); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); padding: 10px 0; box-shadow: 0 4px 30px rgba(0,0,0,0.15); border-bottom: 1px solid rgba(255,255,255,0.04); }
.navbar .container { display: flex; align-items: center; justify-content: space-between; }
@keyframes logoSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.logo { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; font-weight: 800; color: var(--white); }
.logo:hover .logo-icon { animation: logoSpin 0.6s ease; }
.logo-icon { width: 42px; height: 42px; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--dark); flex-shrink: 0; box-shadow: 0 4px 12px rgba(212,167,74,0.3); transition: transform 0.3s ease; }
.logo span { color: var(--gold); }
.logo small { font-weight: 400; font-size: 0.6rem; opacity: 0.7; display: block; margin-top: -2px; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a { color: rgba(255,255,255,0.8); font-weight: 500; font-size: 0.9rem; transition: var(--transition); position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: var(--transition); border-radius: 1px; }
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }
.nav-links .btn { padding: 10px 24px; font-size: 0.85rem; }
.nav-links a.active { color: var(--gold); }
.nav-links a.active::after { width: 100%; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; -webkit-tap-highlight-color: transparent; }
.hamburger span { width: 28px; height: 2.5px; background: var(--white); border-radius: 2px; transition: var(--transition); }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* ===== Mobile Nav Drawer (hamburger) ===== */
.nav-links.open {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; background: rgba(13,13,26,0.98); backdrop-filter: blur(24px);
    z-index: 2002; animation: fadeIn 0.25s ease; padding: 80px 24px calc(80px + var(--safe-bottom));
}
.nav-links.open a, .nav-links.open .btn {
    font-size: 1.2rem !important; padding: 16px 32px !important; width: 100%; max-width: 320px;
    text-align: center; justify-content: center;
}
.nav-links.open a:not(.btn) { color: rgba(255,255,255,0.9); border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-links.open a:not(.btn):hover { color: var(--gold); }
.nav-links.open .nav-dark-toggle { position: relative; top: auto; right: auto; }
body.dark-mode .nav-links.open { background: rgba(10,10,18,0.98); }
.nav-dark-toggle { transition: var(--transition); }
.nav-dark-toggle:active { transform: scale(0.9); }
/* Mobile dark toggle — always visible outside nav-links */
.nav-dark-toggle-mobile { display: none; padding:8px 10px; font-size:0.85rem; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.8); border-radius:50px; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.nav-dark-toggle-mobile:active { transform:scale(0.9); }

/* ===== Hero Section ===== */
.hero { min-height: 100vh; display: flex; align-items: center; position: relative; background: linear-gradient(160deg, var(--dark) 0%, #1A0A0A 50%, #0D0D1A 100%); overflow: hidden; padding: 120px 0 80px; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 40%, rgba(139,26,26,0.35) 0%, transparent 55%), radial-gradient(circle at 80% 60%, rgba(212,167,74,0.15) 0%, transparent 50%), radial-gradient(circle at 50% 100%, rgba(212,167,74,0.05) 0%, transparent 40%); z-index: 1; }
.hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,167,74,0.3), transparent); z-index: 2; }
.hero-pattern { position: absolute; inset: 0; z-index: 0; opacity: 0.03; background-image: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.03) 40px, rgba(255,255,255,0.03) 41px), repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(255,255,255,0.03) 40px, rgba(255,255,255,0.03) 41px); }
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.hero-content { animation: fadeInUp 0.8s ease forwards; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(212,167,74,0.12); border: 1px solid rgba(212,167,74,0.2); padding: 6px 18px; border-radius: var(--radius-full); color: var(--gold); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; backdrop-filter: blur(4px); }
.hero-content h1 { font-family: 'Playfair Display', serif; font-size: 4.2rem; font-weight: 900; line-height: 1.05; color: var(--white); margin-bottom: 8px; }
.hero-content h1 .highlight { background: linear-gradient(135deg, var(--gold), var(--secondary-light), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: shimmer 4s ease infinite; }
@keyframes shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-content .year { font-size: 1rem; color: rgba(255,255,255,0.4); font-weight: 400; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 16px; display: block; }
.hero-content .tagline { font-size: 1.3rem; color: rgba(255,255,255,0.8); margin-bottom: 8px; font-weight: 300; }
.hero-content p { color: rgba(255,255,255,0.7); font-size: 1.05rem; max-width: 500px; margin-bottom: 28px; line-height: 1.8; }
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-buttons .btn-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); font-size: 0.75rem; padding: 8px 16px; border-radius: var(--radius-full); cursor: pointer; transition: var(--transition); font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
.hero-buttons .btn-toggle:hover { border-color: rgba(255,255,255,0.4); color: var(--white); }
.hero-buttons .btn-toggle i { transition: transform 0.3s ease; }
.hero-buttons .btn-toggle.expanded i { transform: rotate(180deg); }
.hero-stats { display: flex; gap: 48px; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06); }
.hero-stats .stat { text-align: left; }
.hero-stats .stat-number { font-size: 2rem; font-weight: 800; color: var(--gold); display: block; }
.hero-stats .stat-label { color: rgba(255,255,255,0.5); font-size: 0.85rem; }
.hero-image { display: flex; justify-content: center; align-items: center; animation: fadeInUp 0.8s ease 0.2s forwards; opacity: 0; }
.hero-crown-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 24px; padding: 40px 32px; border: 1px solid rgba(255,255,255,0.08); width: 100%; max-width: 460px; text-align: center; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hero-crown-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.hero-crown-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(212,167,74,0.06) 0%, transparent 70%); }
.hero-crown-card .crown-icon { font-size: 4.5rem; color: var(--gold); margin-bottom: 12px; display: block; position: relative; filter: drop-shadow(0 4px 20px rgba(212,167,74,0.2)); }
.hero-crown-card h3 { color: var(--white); font-size: 1.5rem; font-weight: 700; position: relative; }
.hero-crown-card .prize-amount { font-size: 2.8rem; font-weight: 900; color: var(--gold); margin: 4px 0; position: relative; }
.hero-crown-card p { color: rgba(255,255,255,0.6); font-size: 0.95rem; line-height: 1.6; position: relative; }
.hero-crown-card .features-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; text-align: left; position: relative; }
.hero-crown-card .features-list li { color: rgba(255,255,255,0.7); font-size: 0.85rem; display: flex; align-items: center; gap: 8px; list-style: none; }
.hero-crown-card .features-list li i { color: var(--gold); font-size: 0.7rem; }
.hero-crown-card .badge-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; position: relative; }
.hero-crown-card .badge { background: rgba(212,167,74,0.12); color: var(--gold); padding: 6px 16px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(212,167,74,0.15); backdrop-filter: blur(4px); }

/* ===== Section Styles ===== */
section { padding: 100px 0; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-header .label { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--primary); background: rgba(139,26,26,0.08); padding: 6px 20px; border-radius: var(--radius-full); margin-bottom: 12px; }
.section-header h2 { font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 700; color: var(--dark); margin-bottom: 12px; }
.section-header h2 .highlight { background: linear-gradient(135deg, var(--primary), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-header p { color: var(--text-light); font-size: 1.1rem; line-height: 1.8; }
.section-header .gold { color: var(--gold); }

/* ===== About ===== */
.fgn-about { background: var(--white); position: relative; }
.fgn-about::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-text h3 { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--dark); margin-bottom: 16px; }
.about-text p { color: var(--text-light); line-height: 1.8; margin-bottom: 16px; }
.about-text .pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.about-text .pillar { background: var(--bg); padding: 16px 20px; border-radius: 12px; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 0.9rem; transition: var(--transition); }
.about-text .pillar:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.about-text .pillar i { color: var(--gold); font-size: 1.2rem; }
.about-image { background: linear-gradient(160deg, var(--primary-dark), var(--primary)); border-radius: 24px; padding: 40px; min-height: 300px; display: flex; align-items: center; justify-content: center; color: var(--white); text-align: center; position: relative; overflow: hidden; }
.about-image::before { content: '👑'; font-size: 8rem; opacity: 0.1; position: absolute; right: -20px; bottom: -20px; }
.about-image h4 { font-size: 1.8rem; font-weight: 700; position: relative; z-index: 1; }
.about-image p { opacity: 0.8; position: relative; z-index: 1; }

/* ===== Process ===== */
.process-section { background: var(--bg); position: relative; }
.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.step-card { background: var(--white); border-radius: 20px; padding: 32px 24px; text-align: center; box-shadow: var(--shadow); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; position: relative; overflow: hidden; }
.step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--primary-light)); }
.step-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-lg); }
.step-card .step-num { display: inline-flex; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: var(--white); font-weight: 800; font-size: 1.1rem; align-items: center; justify-content: center; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(139,26,26,0.3); }
.step-card .step-icon { font-size: 2rem; color: var(--gold); margin-bottom: 8px; display: block; }
.step-card h4 { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.step-card p { font-size: 0.85rem; color: var(--text-light); line-height: 1.5; }
.step-card .duration { display: inline-block; margin-top: 8px; font-size: 0.7rem; font-weight: 600; color: var(--primary); background: rgba(139,26,26,0.06); padding: 4px 14px; border-radius: var(--radius-full); }

/* ===== Eligibility ===== */
.eligibility-section { background: linear-gradient(160deg, var(--dark), #0D0D1A); color: var(--white); }
.eligibility-section .section-header h2 { color: var(--white); }
.eligibility-section .section-header p { color: rgba(255,255,255,0.7); }
.eligibility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.eligibility-item { background: rgba(255,255,255,0.04); border-radius: 16px; padding: 24px 20px; text-align: center; border: 1px solid rgba(255,255,255,0.06); transition: var(--transition); backdrop-filter: blur(8px); }
.eligibility-item:hover { background: rgba(255,255,255,0.08); transform: translateY(-4px); }
.eligibility-item .icon { font-size: 2rem; color: var(--gold); margin-bottom: 8px; display: block; }
.eligibility-item h4 { font-size: 1rem; font-weight: 600; }
.eligibility-item p { font-size: 0.85rem; opacity: 0.7; }

/* ===== Prizes ===== */
.prizes-section { background: var(--white); }
.prizes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; align-items: start; }
.prize-card { background: var(--bg); border-radius: 20px; padding: 32px 24px; text-align: center; box-shadow: var(--shadow); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; border: 1px solid var(--border); position: relative; }
.prize-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-lg); }
.prize-card.gold { border: 2px solid var(--gold); background: linear-gradient(135deg, #FFFDF5, #FFF8E7); box-shadow: 0 8px 30px rgba(212,167,74,0.15); }
.prize-card.gold .crown-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 2.2rem; filter: drop-shadow(0 4px 12px rgba(212,167,74,0.3)); }
.prize-card .rank { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--text-light); }
.prize-card .amount { font-size: 2.4rem; font-weight: 900; color: var(--primary); margin: 4px 0; }
.prize-card.gold .amount { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 2.8rem; }
.prize-card .title { font-size: 1.1rem; font-weight: 700; color: var(--dark); }
.prize-card .benefits { list-style: none; margin-top: 16px; text-align: left; }
.prize-card .benefits li { padding: 6px 0; font-size: 0.9rem; color: var(--text-light); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.prize-card .benefits li:last-child { border-bottom: none; }
.prize-card .benefits li i { color: var(--gold); font-size: 0.8rem; width: 18px; text-align: center; }

/* ===== Voting ===== */
.voting-section { background: linear-gradient(160deg, var(--dark), var(--dark-light), var(--dark)); color: var(--white); }
.voting-section .section-header h2 { color: var(--white); }
.voting-section .section-header p { color: rgba(255,255,255,0.7); }
.voting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.voting-info h3 { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--gold); margin-bottom: 12px; }
.voting-info p { color: rgba(255,255,255,0.7); line-height: 1.8; }
.voting-info .voting-stats { display: flex; gap: 32px; margin-top: 20px; }
.voting-info .voting-stats .vs { text-align: center; }
.voting-info .voting-stats .vs .num { font-size: 2rem; font-weight: 800; color: var(--gold); display: block; }
.voting-info .voting-stats .vs .label { font-size: 0.8rem; opacity: 0.6; }
.voting-cta { background: rgba(255,255,255,0.04); border-radius: 20px; padding: 32px; text-align: center; border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(12px); }
.voting-cta .price-tag { font-size: 2.5rem; font-weight: 900; background: linear-gradient(135deg, var(--gold), var(--gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.voting-cta p { color: rgba(255,255,255,0.6); margin: 8px 0 16px; }

/* ===== Sponsors ===== */
.sponsors-section { background: var(--white); }
.sponsorship-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.sponsor-card { background: var(--bg); border-radius: 20px; padding: 28px 24px; box-shadow: var(--shadow); text-align: center; transition: var(--transition); border: 1px solid var(--border); }
.sponsor-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.sponsor-card .tier { display: inline-block; padding: 4px 16px; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.sponsor-card .tier.platinum { background: linear-gradient(135deg, #E5E4E2, #C0C0C0); color: #2D2D2D; }
.sponsor-card .tier.gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--dark); }
.sponsor-card .tier.silver { background: linear-gradient(135deg, #E8E8E8, #D0D0D0); color: #555; }
.sponsor-card .tier.bronze { background: linear-gradient(135deg, #E8C9A0, #D4A574); color: #5D4037; }
.sponsor-card .price { font-size: 1.6rem; font-weight: 800; color: var(--dark); margin: 8px 0; }
.sponsor-card .price small { font-size: 0.8rem; font-weight: 400; color: var(--text-light); }
.sponsor-card ul { list-style: none; text-align: left; margin: 16px 0; }
.sponsor-card ul li { padding: 5px 0; font-size: 0.85rem; color: var(--text-light); display: flex; align-items: center; gap: 8px; }
.sponsor-card ul li i { color: var(--gold); font-size: 0.7rem; }

/* ===== Agbagyipedia Mini ===== */
.agbagyipedia-mini { background: var(--bg); }
.agbagyipedia-mini .mini-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: center; }
.mini-content h3 { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--dark); margin-bottom: 12px; }
.mini-content p { color: var(--text-light); line-height: 1.8; }
.mini-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mini-tags .tag { background: var(--white); padding: 8px 18px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 500; color: var(--text); box-shadow: var(--shadow-sm); transition: var(--transition); cursor: default; }
.mini-tags .tag:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mini-tags .tag i { color: var(--gold); margin-right: 6px; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mini-stat { background: var(--white); border-radius: 16px; padding: 20px; text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition); }
.mini-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mini-stat .num { font-size: 1.8rem; font-weight: 800; color: var(--primary); display: block; }
.mini-stat .label { font-size: 0.8rem; color: var(--text-light); }

/* ===== CTA ===== */
.cta-section { background: linear-gradient(160deg, var(--primary-dark), var(--primary), var(--primary-light)); color: var(--white); text-align: center; padding: 100px 0; position: relative; overflow: hidden; }
.cta-section::before { content: '👑'; position: absolute; font-size: 20rem; opacity: 0.04; right: -50px; bottom: -80px; }
.cta-section::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); }
.cta-section h2 { font-family: 'Playfair Display', serif; font-size: 2.8rem; margin-bottom: 12px; position: relative; }
.cta-section p { max-width: 600px; margin: 0 auto 32px; opacity: 0.9; font-size: 1.1rem; position: relative; }
.cta-section .btn-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; }
.cta-section .highlight-text { background: linear-gradient(135deg, var(--gold), var(--gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ===== Footer ===== */
.footer { background: linear-gradient(180deg, var(--dark), #0D0D1A); color: rgba(255,255,255,0.7); padding: 80px 0 30px; border-top: 1px solid rgba(255,255,255,0.04); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p { font-size: 0.9rem; line-height: 1.7; max-width: 420px; }
.footer h4 { color: var(--white); font-size: 1rem; margin-bottom: 16px; position: relative; display: inline-block; }
.footer h4::after { content: ''; display: block; width: 24px; height: 2px; background: var(--gold); margin-top: 6px; border-radius: 1px; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 8px; }
.footer ul li a { font-size: 0.9rem; transition: color 0.3s ease, padding-left 0.3s ease; position: relative; padding-left: 0; }
.footer ul li a:hover { color: var(--gold); padding-left: 4px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 0.85rem; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; font-size: 0.9rem; border: 1px solid rgba(255,255,255,0.06); }
.footer-social a:hover { background: var(--gold); color: var(--dark); transform: translateY(-3px) scale(1.1); box-shadow: 0 8px 20px rgba(212,167,74,0.3); }

/* ===== Form Groups ===== */
.form-group { margin-bottom: 18px; }
::placeholder { color: var(--text-light); opacity: 0.6; }
.form-group label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; color: var(--dark); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-family: 'Inter', sans-serif; font-size: 0.95rem; transition: border-color 0.25s ease, box-shadow 0.25s ease; background: var(--input-bg); color: var(--text); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent), 0 1px 2px rgba(0,0,0,0.05); }
.form-group input.error { border-color: #E74C3C; box-shadow: 0 0 0 3px rgba(231,76,60,0.12); }
.form-group .error-text { color: #E74C3C; font-size: 0.78rem; margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.form-group .error-text::before { content: '\\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7rem; }
.form-group textarea { min-height: 80px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group .btn { width: 100%; }
.form-note { font-size: 0.8rem; color: var(--text-light); text-align: center; margin-top: 12px; }
.form-note i { color: var(--gold); }

/* ===== App-shell (mobile native feel) ===== */
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --bottom-nav-h: 64px; }
body { -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: contain; }
input, textarea, select { -webkit-appearance: none; border-radius: 0; }
a, button, .btn, .dash-action, .share-card-btn, .tab-btn, .gallery-filters button, [role="button"] { cursor: pointer; }
a:active, button:active, .btn:active, .dash-action:active, .share-card-btn:active, .tab-btn:active, .gallery-filters button:active { transform: scale(0.97); }

/* ===== Page Transition ===== */
.page-wrap { animation: pageIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .page-wrap { animation: none; } }

/* ===== Install Prompt Banner ===== */
.install-banner { display: none; position: fixed; bottom: var(--bottom-nav-h); left: 0; right: 0; z-index: 901; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; padding: 12px 16px calc(12px + var(--safe-bottom)); align-items: center; gap: 12px; animation: slideUpBanner 0.3s ease; }
.install-banner.show { display: flex; }
@keyframes slideUpBanner { from { transform: translateY(100%); } to { transform: translateY(0); } }
.install-banner .install-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.install-banner .install-text { flex: 1; min-width: 0; }
.install-banner .install-text strong { display: block; font-size: 0.85rem; }
.install-banner .install-text small { opacity: 0.8; font-size: 0.75rem; }
.install-banner .install-btn { background: #fff; color: var(--primary); border: none; padding: 8px 20px; border-radius: 50px; font-weight: 700; font-size: 0.8rem; cursor: pointer; font-family: 'Inter', sans-serif; flex-shrink: 0; }
.install-banner .install-close { background: rgba(255,255,255,0.15); border: none; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 0.9rem; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
body.dark-mode .install-banner { background: linear-gradient(135deg, #2A2A2A, #1A1A1A); }

/* ===== Bottom Nav ===== */
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1001; background: rgba(26,26,46,0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid rgba(255,255,255,0.06); padding: 4px 0 calc(4px + var(--safe-bottom)); }
.mobile-nav .nav-inner { display: flex; align-items: center; justify-content: space-around; max-width: 600px; margin: 0 auto; }
.mobile-nav a { display: flex; flex-direction: column; align-items: center; gap: 1px; color: rgba(255,255,255,0.45); font-size: 0.65rem; font-weight: 600; transition: var(--transition); text-decoration: none; padding: 8px 4px; border-radius: 12px; min-width: 0; min-height: 48px; flex: 1; max-width: 72px; position: relative; -webkit-tap-highlight-color: transparent; }
.mobile-nav a i { font-size: 1.25rem; transition: var(--transition); }
.mobile-nav a::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%) scaleX(0); width: 16px; height: 3px; background: var(--gold); border-radius: 99px; transition: var(--transition-bounce); }
.mobile-nav a.active { color: var(--gold); }
.mobile-nav a.active::after { transform: translateX(-50%) scaleX(1); }
.mobile-nav a.active i { transform: translateY(-2px); }
.mobile-nav a:hover { color: rgba(255,255,255,0.8); }
.mobile-nav a:active { transform: scale(0.92); }
body.dark-mode .mobile-nav { background: rgba(18,18,18,0.96); border-top-color: rgba(255,255,255,0.04); }

/* ===== Bottom Sheet Modal ===== */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 2000; align-items: flex-end; justify-content: center; padding: 0; }
.modal-overlay.active { display: flex; }
.modal { background: var(--white); border-radius: 24px 24px 0 0; max-width: 600px; width: 100%; padding: 32px 28px calc(32px + var(--safe-bottom)); max-height: 90vh; overflow-y: auto; position: relative; animation: sheetUp 0.35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-xl); }
@keyframes sheetUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal::before { content: ''; display: block; width: 36px; height: 4px; background: var(--border); border-radius: 99px; margin: 0 auto 20px; flex-shrink: 0; }
@media (min-width: 769px) { .modal-overlay { align-items: center; padding: 24px; } .modal { border-radius: 24px; padding: 40px 32px; max-width: 600px; animation: modalIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .modal::before { display: none; } }
.modal-close { position: absolute; top: 12px; right: 16px; background: var(--bg); border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; color: var(--text-light); transition: var(--transition); display: flex; align-items: center; justify-content: center; z-index: 1; }
.modal-close:hover { background: var(--primary); color: var(--white); transform: rotate(90deg); }
.modal h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--dark); margin-bottom: 4px; }
.modal .sub { color: var(--text-light); margin-bottom: 20px; font-size: 0.9rem; }

/* ===== Toast ===== */
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--dark); color: var(--white); padding: 16px 24px; border-radius: 14px; box-shadow: var(--shadow-xl); z-index: 3000; opacity: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; display: flex; align-items: center; gap: 12px; max-width: 400px; width: calc(100% - 32px); backdrop-filter: blur(12px); font-size: 0.9rem; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.success { border-left: 4px solid #2ECC71; }
.toast.success i:first-child { color: #2ECC71; }
.toast.error { border-left: 4px solid #E74C3C; }
.toast.error i:first-child { color: #E74C3C; }
.toast i:first-child { font-size: 1.1rem; flex-shrink: 0; }
@media (min-width: 769px) { .toast { left: auto; right: 24px; bottom: 24px; transform: translateX(120px) translateY(0); } .toast.show { transform: translateX(0) translateY(0); } }

/* ===== Scroll Animations ===== */
.fade-up { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.fade-up.visible { opacity: 1; transform: translateY(0); }
/* Stagger children for grid layouts */
.stagger-grid > * { opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease, transform 0.5s ease; }
.stagger-grid.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-grid.visible > *:nth-child(2) { transition-delay: 0.05s; }
.stagger-grid.visible > *:nth-child(3) { transition-delay: 0.1s; }
.stagger-grid.visible > *:nth-child(4) { transition-delay: 0.15s; }
.stagger-grid.visible > *:nth-child(5) { transition-delay: 0.2s; }
.stagger-grid.visible > *:nth-child(6) { transition-delay: 0.25s; }
.stagger-grid.visible > *:nth-child(7) { transition-delay: 0.3s; }
.stagger-grid.visible > *:nth-child(8) { transition-delay: 0.35s; }
.stagger-grid.visible > *:nth-child(9) { transition-delay: 0.4s; }
.stagger-grid.visible > *:nth-child(10) { transition-delay: 0.45s; }
.stagger-grid.visible > * { opacity: 1; transform: translateY(0); }

/* ===== Page Hero (sub-pages) ===== */
.page-hero { background:linear-gradient(160deg,#1A1A2E,#1A0A0A,#0D0D1A); color:#fff; padding:120px 0 60px; text-align:center; position:relative; overflow:hidden; }
.page-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(212,167,74,0.3),transparent); }
.page-hero h1, .page-hero > p, .page-hero .hero-stats { max-width:800px; margin-left:auto; margin-right:auto; padding:0 24px; }
.page-hero h1 { font-family:'Playfair Display',serif; font-size:2.8rem; font-weight:900; }
.page-hero h1 span { background:linear-gradient(135deg,#D4A74A,#F0D68A); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.page-hero p { color:rgba(255,255,255,0.7); max-width:500px; margin:8px auto 0; }

/* ===== Skeleton Loading ===== */
@keyframes shimmerAnim { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmerAnim 1.5s ease infinite; border-radius: 8px; }
.skeleton-card { background: var(--white); border-radius: 20px; overflow: hidden; border: 1px solid var(--border); }
.skeleton-card .skeleton-photo { height: 280px; background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmerAnim 1.5s ease infinite; }
.skeleton-card .skeleton-body { padding: 20px; }
.skeleton-card .skeleton-line { height: 14px; margin-bottom: 8px; background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmerAnim 1.5s ease infinite; border-radius: 6px; }
.skeleton-card .skeleton-line:last-child { width: 60%; }
.skeleton-card .skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmerAnim 1.5s ease infinite; flex-shrink: 0; }
.skeleton-card .skeleton-row { display: flex; align-items: center; gap: 12px; }
.skeleton-card .skeleton-badge { width: 60px; height: 22px; border-radius: 99px; background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmerAnim 1.5s ease infinite; }
/* Blur-up image loading */
.img-blur { filter: blur(20px); transition: filter 0.4s ease; }
.img-blur.loaded { filter: blur(0); }
body.dark-mode .skeleton { background: linear-gradient(90deg, #333 25%, #2A2A2A 50%, #333 75%); background-size: 200% 100%; }
body.dark-mode .skeleton-card { background: #1E1E1E; border-color: #333; }
body.dark-mode .skeleton-card .skeleton-photo { background: linear-gradient(90deg, #333 25%, #2A2A2A 50%, #333 75%); background-size: 200% 100%; }
body.dark-mode .skeleton-card .skeleton-line { background: linear-gradient(90deg, #333 25%, #2A2A2A 50%, #333 75%); background-size: 200% 100%; }
body.dark-mode .skeleton-avatar { background: linear-gradient(90deg, #333 25%, #2A2A2A 50%, #333 75%); background-size: 200% 100%; }

/* ===== Gallery ===== */
.gallery-filters {
    display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
    margin-top:-24px; position:relative; z-index:2;
}
.gallery-filters button {
    padding:10px 24px; border-radius:var(--radius-full); border:2px solid var(--border);
    background:var(--white); font-weight:600; font-size:0.85rem; color:var(--text-light);
    cursor:pointer; transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease; font-family:'Inter',sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.gallery-filters button:hover { border-color:var(--primary); color:var(--primary); transform:translateY(-2px); }
.gallery-filters button.active { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 4px 15px rgba(139,26,26,0.3); transform:translateY(-2px); }
.gallery-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:24px;
}
.contestant-card {
    background:var(--white); border-radius:20px; overflow:hidden;
    transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    text-decoration:none; color:inherit;
    border:1px solid var(--border); will-change:transform;
}
.contestant-card:hover { transform:translateY(-8px) scale(1.01); box-shadow:var(--shadow-lg); border-color:transparent; }
.contestant-card:active { transform:translateY(-2px) scale(0.98); box-shadow:var(--shadow-sm); }
.contestant-card .photo {
    width:100%; height:280px; background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:4rem; overflow:hidden;
}
.contestant-card .photo img { width:100%; height:100%; object-fit:cover; transition:var(--transition-slow); }
.contestant-card:hover .photo img { transform:scale(1.06); }
.contestant-card .info { padding:20px; }
.contestant-card .info h3 { font-size:1.1rem; font-weight:700; }
.contestant-card .info .state { font-size:0.85rem; color:var(--text-light); margin-top:2px; }
.contestant-card .info .meta {
    display:flex; justify-content:space-between; align-items:center;
    margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
}
.contestant-card .info .badge {
    padding:4px 12px; border-radius:var(--radius-full); font-size:0.7rem; font-weight:600;
}
.contestant-card .info .badge.screened { background:#CCE5FF; color:#004085; }
.contestant-card .info .badge.auditioned { background:#D4EDDA; color:#155724; }
.contestant-card .info .badge.finalist { background:#E8DAEF; color:#6C3483; }
.contestant-card .info .badge.winner { background:linear-gradient(135deg,#D4A74A,#B8922E); color:#1A1A2E; }
.contestant-card .info .badge.competition { background:#FFF3CD; color:#856404; }

/* ===== Featured Contestants Grid ===== */
.featured-section { padding: 100px 0; }
.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 24px;
}
.featured-grid .contestant-card .meta .vote-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.featured-grid .contestant-card .meta .vote-link i {
    font-size: 0.75rem;
}
.featured-grid .contestant-card .meta .vote-link:hover {
    color: var(--primary-dark);
}
.empty-state {
    text-align:center; padding:80px 20px; color:var(--text-light);
    animation: fadeInUp 0.4s ease;
}
.empty-state i { font-size:3rem; opacity:0.2; margin-bottom:12px; display:block; }
.empty-state h3 { font-size:1.2rem; color: var(--text); margin-bottom: 4px; }
.back-link {
    display:inline-flex; align-items:center; gap:6px; margin-top:24px; color:var(--primary); text-decoration:none;
    font-weight:600; font-size:0.9rem; transition:gap 0.3s ease, color 0.3s ease;
}
.back-link:hover { gap:8px; color:var(--primary-dark); }
.spinner-loading {
    text-align:center; padding:60px 20px; color:var(--text-light);
}
.spinner-loading i { font-size:2rem; display:block; margin-bottom:8px; }

/* ===== Lightbox ===== */
.lightbox {
    display:none; position:fixed; inset:0; z-index:2999;
    background:rgba(0,0,0,0.92); align-items:center; justify-content:center;
    padding:24px; cursor:pointer; backdrop-filter:blur(8px);
}
.lightbox.active { display:flex; animation:fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.lightbox img { max-width:100%; max-height:90vh; border-radius:12px; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.lightbox .close { position:absolute; top:24px; right:32px; color:#fff; font-size:2rem; cursor:pointer; opacity:0.7; transition:opacity 0.2s; background:rgba(255,255,255,0.1); border:none; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.lightbox .close:hover { opacity:1; background:rgba(255,255,255,0.2); }

/* ===== Leaderboard ===== */
.board-list { max-width:800px; margin:0 auto; }
.board-item {
    display:flex; align-items:center; gap:16px;
    background:var(--white); border-radius:var(--radius); padding:16px 20px;
    margin-bottom:12px; box-shadow:var(--shadow-sm);
    transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    text-decoration:none; color:inherit;
    border:1px solid var(--border);
}
.board-item:hover { transform:translateY(-3px) scale(1.01); box-shadow:var(--shadow); border-color:transparent; }
.board-item .rank {
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.1rem; flex-shrink:0;
    background:var(--bg); color:var(--text-light);
}
.board-item:nth-child(1) .rank { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#fff; box-shadow:0 4px 12px rgba(212,167,74,0.3); }
.board-item:nth-child(2) .rank { background:linear-gradient(135deg,#C0C0C0,#A0A0A0); color:#fff; }
.board-item:nth-child(3) .rank { background:linear-gradient(135deg,#CD7F32,#B8860B); color:#fff; }
.board-item .avatar {
    width:48px; height:48px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; overflow:hidden;
}
.board-item .avatar img { width:100%; height:100%; object-fit:cover; }
.board-item .info { flex:1; }
.board-item .info h4 { font-size:1rem; font-weight:700; }
.board-item .info .state { font-size:0.8rem; color:var(--text-light); }
.board-item .votes { text-align:right; flex-shrink:0; }
.board-item .votes .num { font-size:1.3rem; font-weight:800; color:var(--primary); display:block; }
.board-item .votes .label { font-size:0.7rem; color:var(--text-light); }
@media (max-width:768px) {
    .board-item { flex-wrap:wrap; }
}

/* ===== Auth Pages (login, forgot, reset) ===== */
.auth-page {
    font-family:'Inter',sans-serif;
    background:linear-gradient(160deg,#1A1A2E,#1A0A0A,#0D0D1A);
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:100px 24px 60px;
}
.auth-card {
    background:var(--white); border-radius:24px; padding:40px;
    max-width:420px; width:100%; box-shadow:var(--shadow-xl);
    animation:modalIn 0.4s cubic-bezier(0.4,0,0.2,1);
}
.auth-card h1 { font-family:'Playfair Display',serif; font-size:1.5rem; text-align:center; margin-bottom:4px; }
.auth-card h1 span { background:linear-gradient(135deg,#D4A74A,#F0D68A); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.auth-card .sub { text-align:center; color:var(--text-light); font-size:0.85rem; margin-bottom:24px; }
.auth-card .form-group label { display:block; font-weight:600; font-size:0.85rem; margin-bottom:4px; }
.auth-card .form-group input {
    width:100%; padding:12px 16px; border:2px solid var(--border); border-radius:var(--radius-sm);
    font-family:inherit; font-size:0.95rem; transition:border-color 0.2s;
    background:var(--input-bg); color:var(--text);
}
.auth-card .form-group input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.auth-card .btn {
    width:100%; padding:14px; border:none; border-radius:var(--radius-sm);
    background:var(--primary); color:#fff; font-size:1rem; font-weight:700;
    cursor:pointer; transition:var(--transition);
}
.auth-card .btn:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 8px 20px rgba(139,26,26,0.3); }
.auth-card .btn:disabled { opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }
.auth-msg { background:#D4EDDA; color:#155724; padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:0.85rem; border-left:4px solid #155724; }
.auth-error { background:#F8D7DA; color:#721C24; padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:0.85rem; border-left:4px solid #721C24; }
.auth-links { text-align:center; margin-top:16px; font-size:0.85rem; }
.auth-links a { color:var(--primary); text-decoration:none; font-weight:600; }
.auth-links a:hover { text-decoration:underline; }

/* ===== Tab Switcher ===== */
.tab-group {
    display:flex; gap:0; margin-bottom:24px;
    border-radius:var(--radius-sm); overflow:hidden;
    border:1px solid var(--border);
}
.tab-btn {
    flex:1; padding:10px; border:none; cursor:pointer;
    font-weight:600; font-size:0.85rem; transition:var(--transition);
    background:transparent; color:var(--text); font-family:'Inter',sans-serif;
}
.tab-btn:hover { background:color-mix(in srgb, var(--primary) 8%, transparent); }
.tab-btn.active { background:var(--primary); color:#fff; }
body.dark-mode .tab-btn { color: #bbb; }
body.dark-mode .tab-btn:hover { background:color-mix(in srgb, var(--primary) 15%, transparent); }
body.dark-mode .tab-btn.active { background:var(--primary); color:#fff; }

/* ===== Contestant Portal ===== */
.portal-container { max-width:800px; margin:0 auto; padding:24px; }
.portal-card {
    background:var(--white); border-radius:20px; padding:24px;
    box-shadow:var(--shadow-sm); margin-bottom:16px; border:1px solid var(--border);
    transition:var(--transition);
}
.portal-card:hover { box-shadow:var(--shadow); }
.portal-card h3 { font-size:1rem; margin-bottom:12px; color:var(--dark); }
.portal-stats { display:flex; gap:12px; }
.portal-stat {
    flex:1; background:var(--bg); border-radius:12px; padding:20px; text-align:center;
    transition:var(--transition);
}
.portal-stat:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.portal-stat .num { font-size:1.8rem; font-weight:900; color:var(--primary); display:block; }
.portal-stat .lbl { font-size:0.8rem; color:var(--text-light); }
.portal-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.portal-info-grid .item { padding:8px 0; }
.portal-info-grid .item .label { font-size:0.75rem; color:var(--text-light); text-transform:uppercase; letter-spacing:0.5px; }
.portal-info-grid .item .value { font-weight:600; }
.portal-photo {
    width:80px; height:80px; border-radius:12px; object-fit:cover;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.5rem;
}
.portal-flex { display:flex; align-items:center; gap:16px; }
.portal-btn {
    display:inline-block; padding:10px 20px; border-radius:var(--radius-sm); font-weight:600;
    text-decoration:none; font-size:0.85rem; transition:var(--transition); border:none; cursor:pointer;
}
.portal-btn-primary { background:var(--primary); color:#fff; }
.portal-btn-primary:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 4px 12px rgba(139,26,26,0.3); }
.portal-btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }
.portal-btn-outline { border:2px solid var(--primary); color:var(--primary); background:transparent; }
.portal-btn-outline:hover { background:var(--primary); color:#fff; transform:translateY(-2px); }
.portal-badge {
    display:inline-block; padding:4px 12px; border-radius:var(--radius-full); font-size:0.75rem; font-weight:600;
}
.portal-badge.pending { background:#FEF3CD; color:#856404; }
.portal-badge.screened { background:#D1ECF1; color:#0C5460; }
.portal-badge.auditioned { background:#CCE5FF; color:#004085; }
.portal-badge.finalist { background:#D4EDDA; color:#155724; }
.portal-badge.winner { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--dark); }
.portal-badge.disqualified { background:#F8D7DA; color:#721C24; }
.portal-success { background:#D4EDDA; color:#155724; padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:16px; border-left:4px solid #155724; }
.portal-error { background:#F8D7DA; color:#721C24; padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:16px; border-left:4px solid #721C24; }
.portal-table { width:100%; font-size:0.85rem; border-collapse:collapse; }
.portal-table thead { text-align:left; color:var(--text-light); }
.portal-table th, .portal-table td { padding:12px 8px; border-bottom:1px solid var(--border); }
.portal-table tbody tr { transition:var(--transition); }
.portal-table tbody tr:hover { background:color-mix(in srgb, var(--primary) 4%, transparent); }

/* ===== Dashboard Hero ===== */
.dash-hero {
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    border-radius:20px; padding:32px; margin-bottom:24px;
    color:#fff; position:relative; overflow:hidden;
}
.dash-hero::before {
    content:''; position:absolute; top:-50%; right:-20%;
    width:300px; height:300px; border-radius:50%;
    background:rgba(255,255,255,0.05);
}
.dash-hero::after {
    content:''; position:absolute; bottom:-30%; left:-10%;
    width:200px; height:200px; border-radius:50%;
    background:rgba(255,255,255,0.03);
}
.dash-hero .dash-flex { display:flex; align-items:center; gap:20px; position:relative; z-index:1; }
.dash-hero .dash-avatar {
    width:72px; height:72px; border-radius:16px; object-fit:cover;
    background:rgba(255,255,255,0.15); border:3px solid rgba(255,255,255,0.3);
    display:flex; align-items:center; justify-content:center;
    font-size:1.8rem; font-weight:900; flex-shrink:0;
}
.dash-hero .dash-avatar img { width:100%; height:100%; border-radius:13px; object-fit:cover; }
.dash-hero h1 { font-family:'Playfair Display',serif; font-size:1.4rem; margin:0; color:#fff; }
.dash-hero .dash-meta { color:rgba(255,255,255,0.7); font-size:0.85rem; margin-top:2px; }
.dash-hero .dash-code {
    display:inline-block; background:rgba(255,255,255,0.15); backdrop-filter:blur(8px);
    padding:4px 14px; border-radius:8px; font-weight:800; font-size:0.9rem;
    margin-top:6px; letter-spacing:0.5px;
}

/* ===== Dashboard Stat Cards ===== */
.dash-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:24px; }
.dash-stat {
    background:var(--white); border-radius:16px; padding:20px;
    box-shadow:var(--shadow-sm); border:1px solid var(--border);
    transition:var(--transition); text-align:center;
}
.dash-stat:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.dash-stat .dash-stat-icon {
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 10px; font-size:1.2rem;
}
.dash-stat .dash-stat-icon.primary { background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); }
.dash-stat .dash-stat-icon.gold { background:color-mix(in srgb, var(--gold) 20%, transparent); color:var(--gold-dark); }
.dash-stat .dash-stat-icon.info { background:color-mix(in srgb, #3498DB 12%, transparent); color:#2980B9; }
.dash-stat .dash-stat-icon.success { background:color-mix(in srgb, #27AE60 12%, transparent); color:#1E8449; }
.dash-stat .dash-stat-icon.warning { background:color-mix(in srgb, #F39C12 12%, transparent); color:#D68910; }
.dash-stat .num { font-size:1.6rem; font-weight:900; color:var(--text); display:block; }
.dash-stat .lbl { font-size:0.75rem; color:var(--text-light); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }

/* ===== Dashboard Info Grid ===== */
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dash-grid .dash-item {
    background:var(--white); border-radius:14px; padding:16px;
    border:1px solid var(--border); transition:var(--transition);
}
.dash-grid .dash-item:hover { box-shadow:var(--shadow-sm); }
.dash-grid .dash-item .label {
    font-size:0.7rem; color:var(--text-light); text-transform:uppercase;
    letter-spacing:0.5px; font-weight:600; margin-bottom:2px;
}
.dash-grid .dash-item .value { font-weight:600; font-size:0.9rem; word-break:break-word; }

/* ===== Coordinator Dashboard extras ===== */
.dash-copy-btn {
    display:inline-flex; align-items:center; gap:6px; padding:4px 14px;
    border-radius:8px; font-size:0.75rem; font-weight:600; cursor:pointer;
    background:var(--white); color:var(--text); border:1px solid var(--border);
    transition:var(--transition); font-family:'Inter',sans-serif;
}
.dash-copy-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.dash-copy-btn.copied { background:#27AE60; color:#fff; border-color:#27AE60; }
.dash-share-box {
    background:var(--white); border-radius:16px; padding:24px;
    border:2px dashed var(--border); text-align:center;
    transition:var(--transition); margin-bottom:24px;
}
.dash-share-box:hover { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 3%, transparent); }
.dash-share-box .big-code {
    font-size:1.8rem; font-weight:900; letter-spacing:2px;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; display:block; margin-bottom:4px;
}

/* ===== Status badges ===== */
.dash-badge {
    display:inline-block; padding:4px 14px; border-radius:50px;
    font-size:0.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.3px;
}
.dash-badge.pending { background:#FEF3CD; color:#856404; }
.dash-badge.screened { background:#D1ECF1; color:#0C5460; }
.dash-badge.auditioned { background:#CCE5FF; color:#004085; }
.dash-badge.finalist { background:#D4EDDA; color:#155724; }
.dash-badge.winner { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--dark); }
.dash-badge.disqualified { background:#F8D7DA; color:#721C24; }

/* ===== Empty state ===== */
.dash-empty {
    text-align:center; padding:60px 20px; color:var(--text-light);
}
.dash-empty i { font-size:3rem; opacity:0.15; display:block; margin-bottom:16px; }
.dash-empty h3 { font-size:1.1rem; color:var(--text); margin-bottom:4px; }
.dash-empty p { font-size:0.85rem; }

/* ===== Dashboard action buttons ===== */
.dash-actions { display:flex; gap:8px; flex-wrap:wrap; }
.dash-actions .dash-action {
    display:inline-flex; align-items:center; gap:8px; padding:10px 20px;
    border-radius:12px; font-weight:600; font-size:0.85rem;
    transition:var(--transition); border:none; cursor:pointer;
    font-family:'Inter',sans-serif; text-decoration:none;
}
.dash-actions .dash-action.primary { background:var(--primary); color:#fff; }
.dash-actions .dash-action.primary:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 4px 15px rgba(139,26,26,0.3); }
.dash-actions .dash-action.outline { border:2px solid var(--primary); color:var(--primary); background:transparent; }
.dash-actions .dash-action.outline:hover { background:var(--primary); color:#fff; transform:translateY(-2px); }
.dash-actions .dash-action.gold { background:var(--gold); color:var(--dark); }
.dash-actions .dash-action.gold:hover { background:var(--gold-light); transform:translateY(-2px); }

/* ===== Dark mode dash overrides ===== */
body.dark-mode .dash-stat { background:#1E1E1E; }
body.dark-mode .dash-stat .num { color:#E0E0E0; }
body.dark-mode .dash-grid .dash-item { background:#1E1E1E; }
body.dark-mode .dash-grid .dash-item .value { color:#E0E0E0; }
body.dark-mode .dash-share-box { background:#1E1E1E; border-color:#333; }
body.dark-mode .dash-share-box:hover { border-color:var(--primary); }
body.dark-mode .dash-copy-btn { background:#2A2A2A; color:#bbb; border-color:#444; }
body.dark-mode .dash-copy-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
body.dark-mode .portal-table tbody tr:hover { background:color-mix(in srgb, var(--primary) 8%, transparent); }
body.dark-mode .dash-empty h3 { color:#E0E0E0; }
body.dark-mode .dash-rank-badge { background:#2A2A2A; }
body.dark-mode .dash-rank-badge.gold { background:linear-gradient(135deg,#8B7530,#6B5A20); }
body.dark-mode .dash-rank-badge.silver { background:linear-gradient(135deg,#555,#444); }
body.dark-mode .dash-rank-badge.bronze { background:linear-gradient(135deg,#6B4226,#4A2E1A); }
body.dark-mode .dash-progress { background:#2A2A2A; }
body.dark-mode .dash-activity-item { border-bottom-color:#333; }
body.dark-mode .dash-search { background:#2A2A2A; color:#E0E0E0; border-color:#444; }
body.dark-mode .dash-search:focus { border-color:var(--primary); }

/* ===== Rank Badge ===== */
.dash-rank-badge {
    display:inline-flex; align-items:center; gap:6px; padding:4px 12px;
    border-radius:50px; font-size:0.75rem; font-weight:800;
    background:var(--bg); color:var(--text);
}
.dash-rank-badge.gold { background:linear-gradient(135deg,#FFD700,#DAA520); color:#3D2B00; }
.dash-rank-badge.silver { background:linear-gradient(135deg,#E8E8E8,#B0B0B0); color:#1A1A1A; }
.dash-rank-badge.bronze { background:linear-gradient(135deg,#CD7F32,#A0522D); color:#fff; }

/* ===== Progress Bar ===== */
.dash-progress {
    width:100%; height:8px; background:var(--border); border-radius:99px;
    overflow:hidden; margin-top:8px;
}
.dash-progress .dash-progress-fill {
    height:100%; border-radius:99px;
    background:linear-gradient(90deg,var(--primary),var(--gold));
    transition:width 0.6s ease;
}

/* ===== Activity Feed ===== */
.dash-activity { list-style:none; padding:0; margin:0; }
.dash-activity-item {
    display:flex; align-items:center; gap:12px;
    padding:12px 0; border-bottom:1px solid var(--border);
}
.dash-activity-item:last-child { border-bottom:none; }
.dash-activity-item .dash-activity-icon {
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary);
}
.dash-activity-item .dash-activity-info { flex:1; min-width:0; }
.dash-activity-item .dash-activity-info .name { font-weight:600; font-size:0.85rem; }
.dash-activity-item .dash-activity-info .meta { font-size:0.75rem; color:var(--text-light); display:flex; gap:8px; flex-wrap:wrap; }
.dash-activity-item .dash-activity-time { font-size:0.7rem; color:var(--text-light); white-space:nowrap; }

/* ===== Search Input ===== */
.dash-search {
    width:100%; padding:10px 14px 10px 38px; border:2px solid var(--border);
    border-radius:12px; font-family:'Inter',sans-serif; font-size:0.85rem;
    background:var(--white); color:var(--text); transition:var(--transition);
}
.dash-search:focus { outline:none; border-color:var(--primary); }
.dash-search-wrap { position:relative; }
.dash-search-wrap i {
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--text-light); font-size:0.9rem;
}

/* ===== Share Card Button ===== */
.share-card-btn {
    display:inline-flex; align-items:center; gap:6px; padding:10px 18px;
    border-radius:12px; font-weight:600; font-size:0.85rem;
    transition:var(--transition); cursor:pointer; border:none;
    font-family:'Inter',sans-serif; text-decoration:none;
}
.share-card-btn:hover { transform:translateY(-2px); opacity:0.9; }
.share-card-btns { display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:480px) {
    .share-card-btns .share-card-btn { flex:1; min-width:120px; justify-content:center; }
}

/* ===== Export CSV button ===== */
.dash-export-btn {
    display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
    border-radius:10px; font-size:0.8rem; font-weight:600; cursor:pointer;
    background:#27AE60; color:#fff; border:none;
    transition:var(--transition); font-family:'Inter',sans-serif; text-decoration:none;
}
.dash-export-btn:hover { background:#1E8449; transform:translateY(-1px); }

/* ===== Stage label ===== */
.dash-stage-label { font-size:0.75rem; color:var(--text-light); margin-top:4px; display:flex; justify-content:space-between; }
.dash-stage-label span { font-weight:600; color:var(--text); }

@media (max-width:600px) {
    .portal-info-grid { grid-template-columns:1fr; }
    .portal-stats { flex-direction:column; }
    .portal-flex { flex-direction:column; align-items:flex-start; }
    .dash-grid { grid-template-columns:1fr; }
    .dash-stats { grid-template-columns:repeat(2,1fr); }
    .dash-hero { padding:24px; }
    .dash-hero .dash-flex { flex-direction:column; text-align:center; }
    .dash-actions { justify-content:center; }
}

/* ===== Edit Profile ===== */
.edit-container { max-width:600px; margin:0 auto; padding:24px; }
.edit-card {
    background:var(--white); border-radius:20px; padding:24px;
    box-shadow:var(--shadow-sm); margin-bottom:16px; border:1px solid var(--border);
}
.edit-card h3 { font-size:1rem; margin-bottom:16px; color:var(--dark); }
.edit-card .form-group { margin-bottom:16px; }
.edit-card .form-group label { display:block; font-weight:600; font-size:0.85rem; margin-bottom:4px; }
.edit-card .form-group input, .edit-card .form-group textarea {
    width:100%; padding:12px 16px; border:2px solid var(--border); border-radius:var(--radius-sm);
    font-family:inherit; font-size:0.9rem; transition:border-color 0.2s;
    background:var(--input-bg); color:var(--text);
}
.edit-card .form-group input:focus, .edit-card .form-group textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.edit-card .form-group textarea { resize:vertical; min-height:100px; }
.edit-card .form-group input[type="file"] { padding:8px; }
.edit-flex { display:flex; gap:8px; }
.current-photo { width:80px; height:80px; border-radius:12px; object-fit:cover; display:block; border:2px solid var(--border); }

/* ===== Privacy / Terms ===== */
.legal-page { background:var(--bg); padding:100px 24px 60px; min-height:100vh; }
.legal-container { max-width:800px; margin:0 auto; background:var(--white); border-radius:24px; padding:40px; box-shadow:var(--shadow); }
.legal-container h1 { font-size:2rem; color:var(--dark); margin-bottom:8px; }
.legal-container h2 { font-size:1.3rem; color:var(--primary); margin-top:28px; margin-bottom:8px; }
.legal-container p { margin-bottom:12px; color:var(--text); line-height:1.9; font-size:0.95rem; }
.legal-container ul { margin-bottom:12px; padding-left:20px; }
.legal-container li { margin-bottom:4px; color:var(--text); line-height:1.8; }
.legal-container .updated { font-size:0.85rem; color:var(--text-light); margin-bottom:24px; }

/* ===== 404 Page ===== */
.four-oh-four {
    font-family:'Inter',sans-serif;
    background:linear-gradient(160deg,#1A1A2E,#1A0A0A,#0D0D1A);
    color:#fff; min-height:100vh;
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:100px 24px 60px;
}
.four-oh-four .content { max-width:500px; animation:fadeInUp 0.6s ease; }
.four-oh-four .content .icon { font-size:5rem; display:block; margin-bottom:12px; filter:drop-shadow(0 4px 20px rgba(212,167,74,0.3)); }
.four-oh-four .content h1 { font-family:'Playfair Display',serif; font-size:3rem; font-weight:900; margin-bottom:4px; }
.four-oh-four .content p { color:rgba(255,255,255,0.7); margin-bottom:24px; }
.four-oh-four .content a {
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 32px; border-radius:var(--radius-full); font-weight:600;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--dark); text-decoration:none;
    transition:var(--transition); box-shadow:0 4px 15px rgba(212,167,74,0.3);
}
.four-oh-four .content a:hover { background:var(--gold-light); transform:translateY(-3px); box-shadow:0 8px 25px rgba(212,167,74,0.45); }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .hero .container { grid-template-columns: 1fr; text-align: center; }
    .hero-content p { margin-left: auto; margin-right: auto; }
    .hero-buttons { justify-content: center; }
    .hero-stats { justify-content: center; }
    .about-grid { grid-template-columns: 1fr; }
    .voting-grid { grid-template-columns: 1fr; }
    .agbagyipedia-mini .mini-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
    body { padding-bottom: var(--bottom-nav-h); }
    .mobile-nav { display: block; }
    .hamburger { display: flex; }
    .nav-links { display: none !important; }
    .nav-dark-toggle-mobile { display: inline-flex; }
    .nav-dark-toggle { position: fixed; top: calc(10px + var(--safe-top, 0px)); right: 12px; z-index: 1002; padding: 6px 10px; font-size: 0.75rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); border-radius: 50px; }
    .navbar { padding: 10px 0; }
}
@media (max-width: 768px) {
    .navbar .container { justify-content: center; }
    .logo { font-size: 1rem; gap: 8px; }
    .logo small { display: none; }
    .logo-icon { width: 34px; height: 34px; font-size: 0.9rem; }
    .hero-content h1 { font-size: 2.6rem; }
    .section-header { margin-bottom: 40px; }
    .section-header h2 { font-size: 2rem; }
    .page-hero h1 { font-size: 2rem; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .hero-stats { flex-direction: column; gap: 16px; align-items: center; }
    .hero-stats .stat { text-align: center; }
    .modal { padding: 28px 20px; }
    .prizes-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .about-text .pillars { grid-template-columns: 1fr; }
    .hero-crown-card .features-list { grid-template-columns: 1fr; }
    .voting-info .voting-stats { flex-direction: column; gap: 12px; }
    .mini-stats { grid-template-columns: 1fr 1fr; }
    section { padding: 80px 0; }
}
@media (max-width: 480px) {
    .hero { padding: 100px 0 60px; min-height: auto; }
    .hero-content h1 { font-size: 2rem; }
    .hero-content .tagline { font-size: 1rem; }
    .hero-content p { font-size: 0.9rem; }
    .hero-stats { gap: 20px; flex-wrap: wrap; justify-content:center; }
    .hero-stats .stat-number { font-size: 1.5rem; }
    .hero .container { gap: 24px; }
    .container { padding: 0 16px; }
    .btn { padding: 14px 24px; font-size: 0.9rem; }
    .btn-sm { padding: 10px 18px; font-size: 0.85rem; }
    .btn-lg { padding: 14px 32px; font-size: 0.95rem; }
    section { padding: 48px 0; }
    .hero-crown-card { padding: 28px 20px; }
    .hero-crown-card .prize-amount { font-size: 2rem; }
    .hero-crown-card .crown-icon { font-size: 3rem; }
    .hero-crown-card .features-list { grid-template-columns:1fr; }
    .mini-stats { grid-template-columns: 1fr; }
    /* Collapse hero buttons — show only primary, toggle rest */
    .hero-buttons .btn-outline-white { display: none; }
    .hero-buttons .btn-toggle { display: inline-flex; align-items: center; gap: 6px; }
    .hero-buttons.expanded .btn-outline-white { display: inline-flex; }
    .hero-buttons.expanded .btn-primary { flex: 0 0 100%; order: -1; }
    .nav-links { left: 8px; right: 8px; padding: 12px; top: 62px; }
    .nav-links a,
    .nav-links .btn { padding: 10px 14px; font-size: 0.85rem; }
    .logo { font-size: 0.9rem; gap: 6px; }
    .logo-icon { width: 30px; height: 30px; font-size: 0.8rem; }
    .auth-card { padding: 28px 16px; }
    .auth-card .btn { padding: 14px; font-size: 1rem; }
    .tab-btn { font-size:0.8rem; padding:10px 6px; min-height:44px; }
    .tab-btn i { margin-right:4px; }
    .contestant-card .photo { height:200px; font-size:3rem; }
    .gallery-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
    .section-header { margin-bottom: 32px; }
    .section-header h2 { font-size: 1.6rem; }
    .voting-grid { gap:24px; }
    .voting-info .voting-stats { gap:16px; flex-wrap:wrap; justify-content:center; }
    .voting-cta { padding:24px 16px; }
    .cta-section { padding: 60px 0; }
    .cta-section h2 { font-size: 1.8rem; }
    .process-steps { grid-template-columns:1fr; gap:16px; }
    .prizes-grid { gap:16px; }
    .sponsorship-grid { gap:16px; }
    .dash-hero { padding: 24px 16px; }
    .dash-hero h1 { font-size:1.1rem; }
    .dash-code { font-size:0.75rem; }
    .dash-meta { font-size:0.75rem; }
    .share-card-btn { width:100%; justify-content:center; }
    .dash-stats { grid-template-columns:repeat(2,1fr); gap:8px; }
    .dash-stat { padding:14px 8px; }
    .dash-stat .num { font-size:1.2rem; }
    .dash-stat .lbl { font-size:0.65rem; }
    .dash-stat .dash-stat-icon { width:36px; height:36px; font-size:1rem; }
    .portal-card { padding:16px; }
    .modal { padding:24px 16px; }
    .modal h2 { font-size:1.3rem; }
    .form-group input, .form-group select, .form-group textarea { font-size:16px; padding:14px 12px; }
    .dash-actions .dash-action { font-size:0.8rem; padding:10px 14px; }
    .dash-share-box { padding:16px; }
    .dash-share-box .big-code { font-size:1.3rem; }
    .dash-grid { grid-template-columns:1fr; }
    .edit-card { padding:16px; }
    .edit-flex { flex-direction:column; }
    .profile-grid { padding:24px 16px; }
    .profile-name { font-size:1.5rem; }
    .profile-photo { min-height:200px; }
    .page-hero { padding:100px 16px 40px; }
    .page-hero h1, .page-hero > p, .page-hero .hero-stats { padding: 0; }
    .page-hero h1 { font-size:1.8rem; }
    .footer { padding: 60px 0 24px; }
    .footer-grid { gap:24px; }
    .gallery-filters button { padding:8px 16px; font-size:0.75rem; min-height:36px; }
    .about-grid { gap:32px; }
    .about-text .pillars { grid-template-columns:1fr; }
    .about-image { min-height:200px; padding:24px; }
    .step-card { padding:24px 16px; }
    .prize-card { padding:24px 16px; }
    .portal-container { padding:16px; }
    .auth-page { padding: 80px 16px calc(40px + var(--bottom-nav-h)); }
    .toast { bottom: calc(var(--bottom-nav-h) + 16px); width: calc(100% - 32px); max-width:100%; left:16px; right:16px; transform: translateY(100px); }
    .toast.show { transform: translateY(0); }
}
@media (max-width: 360px) {
    .logo { font-size: 0.8rem; gap: 4px; }
    .logo-icon { width: 26px; height: 26px; font-size: 0.7rem; }
    .nav-links { left: 4px; right: 4px; padding: 8px; top: 58px; }
    .nav-links a,
    .nav-links .btn { padding: 8px 12px; font-size: 0.8rem; }
    .nav-dark-toggle { padding: 6px 10px !important; font-size: 0.75rem !important; }
    .hero-content h1 { font-size:1.6rem; }
    .hero-content .tagline { font-size:0.9rem; }
    .hero-content p { font-size:0.85rem; }
    .hero-stats .stat-number { font-size:1.2rem; }
    .section-header h2 { font-size:1.3rem; }
    .auth-card { padding:24px 12px; }
    .auth-card h1 { font-size:1.2rem; }
    .tab-btn { font-size:0.65rem; padding:6px 4px; min-height:40px; }
    .tab-btn i { display:none; }
    .dash-actions { flex-direction:column; }
    .dash-actions .dash-action { width:100%; justify-content:center; }
    .dash-stats { grid-template-columns:1fr 1fr; gap:6px; }
    .modal { padding:20px 12px; }
    .modal h2 { font-size:1.1rem; }
    .modal .sub { font-size:0.85rem; }
    .form-group input, .form-group select, .form-group textarea { font-size:16px; padding:12px 10px; }
    .auth-card .form-group input { font-size:16px; }
    .edit-card .form-group input { font-size:16px; }
    .dash-hero { padding:20px 16px; }
    .dash-hero h1 { font-size:1rem; }
    .dash-hero .dash-avatar { width:56px; height:56px; font-size:1.3rem; }
    .contestant-card .photo { height:160px; font-size:2.5rem; }
    .gallery-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
    .gallery-filters button { font-size:0.65rem; padding:6px 12px; }
    .profile-grid { padding:16px 12px; gap:20px; }
    .profile-name { font-size:1.3rem; }
    .step-card { padding:20px 12px; }
    .prize-card { padding:20px 12px; }
    .auth-page { padding: 70px 12px calc(30px + var(--bottom-nav-h)); }
    .dash-stat { padding:10px 6px; }
    .dash-stat .num { font-size:1rem; }
    .cta-section h2 { font-size:1.4rem; }
    .footer-grid { gap:16px; }
    .edit-card { padding:12px; }
    .portal-card { padding:12px; }
}

/* ===== Dark Mode ===== */
body.dark-mode {
    --primary: #C0392B;
    --primary-dark: #8B1A1A;
    --bg: #121212;
    --text: #E0E0E0;
    --text-light: #999;
    --white: #1E1E1E;
    --border: #333;
    --input-bg: #2A2A2A;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --shadow: 0 8px 30px rgba(0,0,0,0.3);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.4);
    --shadow-xl: 0 30px 80px rgba(0,0,0,0.5);
}
body.dark-mode .navbar { background: rgba(18,18,18,0.85); }
body.dark-mode .navbar a { color: #bbb; }
body.dark-mode .navbar a:hover { color: var(--secondary); }
body.dark-mode .hero-crown-card,
body.dark-mode .profile-grid, body.dark-mode .board-item,
body.dark-mode .footer { background: #1E1E1E; }
body.dark-mode .footer { border-top-color: #333; }
body.dark-mode .modal { background: #1E1E1E; color: #E0E0E0; }
body.dark-mode .modal-close { background: #2A2A2A; color: #999; }
body.dark-mode .modal-close:hover { background: var(--primary); color: #fff; }
body.dark-mode .hero-content h1 { color: #fff; }
body.dark-mode .hero-content p { color: #aaa; }
body.dark-mode .knowledge-card { background: #1E1E1E; }
body.dark-mode .tier-card { background: #1E1E1E; }
body.dark-mode .auth-card { background: #1E1E1E; color: #E0E0E0; }
body.dark-mode .auth-card h1 { color: #E0E0E0; }
body.dark-mode .contestant-card { background: #1E1E1E; }
body.dark-mode .contestant-card .info .meta { border-top-color: #333; }
body.dark-mode .step-card { background: #1E1E1E; }
body.dark-mode .step-card p { color: #999; }
body.dark-mode .prize-card { background: #1E1E1E; }
body.dark-mode .prize-card.gold { background: linear-gradient(135deg, #2A2A1A, #1E1E1E); border-color: var(--gold); }
body.dark-mode .prize-card .title { color: #E0E0E0; }
body.dark-mode .prize-card .rank { color: #999; }
body.dark-mode .prize-card .benefits li { color: #999; }
body.dark-mode .sponsor-card { background: #1E1E1E; }
body.dark-mode .sponsor-card .price { color: #E0E0E0; }
body.dark-mode .gallery-filters button { background: #1E1E1E; }
body.dark-mode .board-item { background: #1E1E1E; }
body.dark-mode .mini-stat { background: #1E1E1E; }
body.dark-mode .mini-tags .tag { background: #1E1E1E; color: #ccc; }
body.dark-mode .portal-card { background: #1E1E1E; }
body.dark-mode .portal-stat { background: #2A2A2A; }
body.dark-mode .edit-card { background: #1E1E1E; }
body.dark-mode .legal-container { background: #1E1E1E; }
body.dark-mode .legal-container h1 { color: #E0E0E0; }
body.dark-mode .legal-container .updated { color: var(--text-light); }
body.dark-mode .about-text h3 { color: #E0E0E0; }
body.dark-mode .about-text .pillar { background: #2A2A2A; color: #ccc; }
body.dark-mode .portal-table td { border-bottom-color: #333; }
body.dark-mode .profile-grid { background: #1E1E1E; }
body.dark-mode .profile-grid .details { border-top-color: #333; }
body.dark-mode .profile-grid .item strong { color: #999; }
body.dark-mode .gallery-filters button:hover { border-color: var(--primary); color: var(--primary); }

/* ===== Profile Grid ===== */
.profile-wrap { padding-top:100px; }
.profile-grid {
    display:grid; grid-template-columns:1fr 1.5fr; gap:40px;
    background:var(--white); border-radius:16px; padding:40px;
    box-shadow:var(--shadow);
}
.profile-photo {
    width:100%; aspect-ratio:3/4; border-radius:12px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    display:flex; align-items:center; justify-content:center;
    font-size:6rem; color:var(--white); overflow:hidden;
}
.profile-photo img { width:100%; height:100%; object-fit:cover; cursor:zoom-in; }
.profile-ref { font-size:0.85rem; color:var(--text-light); margin-bottom:4px; }
.profile-name { font-family:'Playfair Display',serif; font-size:2.2rem; font-weight:900; color:var(--dark); }
.profile-state { font-size:1rem; color:var(--primary); font-weight:600; margin-bottom:16px; }
.profile-badge { display:inline-block; padding:4px 16px; border-radius:50px; font-size:0.8rem; font-weight:600; margin-bottom:16px; }
.profile-badge.screened { background:#CCE5FF; color:#004085; }
.profile-badge.auditioned { background:#D4EDDA; color:#155724; }
.profile-badge.finalist { background:#E8DAEF; color:#6C3483; }
.profile-badge.winner { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--dark); }
.profile-badge.competition { background:#FFF3CD; color:#856404; }
.profile-bio { line-height:1.8; color:var(--text-light); margin:16px 0; white-space:pre-wrap; }
.profile-details {
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
    margin:20px 0; padding:20px 0; border-top:1px solid var(--border);
}
.profile-details .item { font-size:0.9rem; }
.profile-details .item strong { display:block; font-size:0.75rem; color:var(--text-light); text-transform:uppercase; }
.profile-details .item span { color:var(--text); }
body.dark-mode .profile-grid { background:var(--white); }
body.dark-mode .profile-name { color:var(--text); }
body.dark-mode .profile-bio { color:var(--text-light); }
body.dark-mode .profile-details { border-top-color:var(--border); }
body.dark-mode .profile-details .item strong { color:var(--text-light); }
body.dark-mode .profile-details .item span { color:var(--text); }
@media (max-width:768px) {
    .profile-grid { grid-template-columns:1fr; }
    .profile-details { grid-template-columns:1fr; }
}

/* ===== Knowledge Card ===== */
.knowledge-card {
    background:var(--white); border-radius:16px; padding:24px 20px;
    box-shadow:var(--shadow-sm); transition:var(--transition); cursor:default;
}
.knowledge-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.knowledge-card .icon {
    width:48px; height:48px; border-radius:12px;
    background:rgba(139,26,26,0.06); color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; margin-bottom:12px;
}
.knowledge-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:4px; color:var(--dark); }
.knowledge-card p { font-size:0.85rem; color:var(--text-light); }
.knowledge-card .entry-count { font-size:0.75rem; color:var(--gold); font-weight:600; margin-top:8px; display:inline-block; }
body.dark-mode .knowledge-card { background:var(--white); }
body.dark-mode .knowledge-card h3 { color:var(--text); }
body.dark-mode .knowledge-card p { color:var(--text-light); }

/* ===== Search Input (shared) ===== */
.search-input {
    width:100%; padding:16px 24px; border:2px solid transparent;
    border-radius:var(--radius-full); font-family:'Inter',sans-serif; font-size:1rem;
    box-shadow:0 10px 40px rgba(0,0,0,0.1); outline:none;
    background:var(--white); color:var(--text); transition:var(--transition);
}
.search-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent), 0 10px 40px rgba(0,0,0,0.1); }
.gallery-search {
    max-width:400px; margin:16px auto 0;
}
.gallery-search input {
    width:100%; padding:12px 18px; border:2px solid var(--border);
    border-radius:var(--radius-full); font-family:'Inter',sans-serif; font-size:0.9rem;
    outline:none; transition:var(--transition); background:var(--input-bg); color:var(--text);
}
.gallery-search input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }

/* ===== Winner Banner ===== */
.winner-banner-wrap {
    display:none; background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    color:var(--dark); text-align:center; padding:24px; position:relative;
}
.winner-banner-wrap .icon { font-size:2rem; display:block; }
.winner-banner-wrap h2 { font-size:1.4rem; font-weight:800; margin-bottom:4px; }
.winner-banner-wrap .winner-name {
    font-size:1.6rem; background:var(--dark); color:var(--gold);
    padding:4px 20px; border-radius:8px; display:inline-block; margin-left:8px;
}
.winner-banner-wrap p { opacity:0.8; font-size:0.95rem; }
body.dark-mode .winner-banner-wrap { color:var(--dark); }
body.dark-mode .winner-banner-wrap .winner-name { color:var(--gold); }

/* ===== Navbar Dark Toggle ===== */
.nav-dark-toggle {
    padding:8px 12px; font-size:0.85rem;
    background:transparent; border-color:rgba(255,255,255,0.3);
    color:rgba(255,255,255,0.7);
}
.nav-dark-toggle:hover { border-color:rgba(255,255,255,0.6); color:var(--white); }

/* ===== Touch Device Hover ===== */
@media (hover: hover) {
    .contestant-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
    .prize-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
    .sponsor-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
    .board-item:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:transparent; }
    .step-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
    .knowledge-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
    .mini-stat:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
}
@media (hover: none) {
    .contestant-card:active { transform:translateY(-4px); box-shadow:var(--shadow); }
    .prize-card:active { transform:translateY(-4px); box-shadow:var(--shadow); }
    .sponsor-card:active { transform:translateY(-3px); box-shadow:var(--shadow); }
    .board-item:active { transform:translateY(-2px); box-shadow:var(--shadow); }
    .step-card:active { transform:translateY(-4px); box-shadow:var(--shadow); }
}

/* ===== Focus-visible for keyboard nav ===== */
:focus-visible { outline: 3px solid var(--primary, #D4A74A); outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--primary, #D4A74A); outline-offset: 2px; border-radius: 4px; }

/* ===== Back to Top ===== */
.back-to-top {
    position: fixed; bottom: calc(var(--bottom-nav-h) + 16px); right: 16px; z-index: 1002;
    width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: #fff;
    border: none; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(139,26,26,0.3); opacity: 0; transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
    pointer-events: none; -webkit-tap-highlight-color: transparent;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--primary-dark); transform: translateY(-2px); }
.back-to-top:active { transform: scale(0.92); }
body.dark-mode .back-to-top { background: var(--primary-light); }
@media (min-width: 769px) { .back-to-top { bottom: 32px; right: 32px; } }

/* ===== Desktop refinements ===== */
@media (min-width: 1025px) {
    .gallery-search { max-width: 520px; }
    .hero-buttons .btn-outline-white { font-size: 0.9rem; padding: 10px 22px; }
}
@media (min-width: 1440px) {
    .hero .container { max-width: 1400px; gap: 80px; }
    .hero-crown-card { max-width: 500px; }
}