/* =========================================
    1. CORE THEME & VARIABLES
    ========================================= */
:root {
    /* Dark Mode (Default) */
    --bg-deep: #050505;
    --bg-surface: #0f1115;
    --bg-glass: rgba(15, 17, 21, 0.95);
    --primary: #6366f1; 
    --primary-glow: rgba(99, 102, 241, 0.6);
    --accent: #8b5cf6;  
    --cyan: #06b6d4;    
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --text-main: #ffffff;
    --text-muted: #9ca3af;
    --border: rgba(255, 255, 255, 0.1);
    --border-bright: rgba(255, 255, 255, 0.2);
    --shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

/* Light Mode Overrides */
body.light-mode {
    --bg-deep: #f8fafc;
    --bg-surface: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.95);
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border: rgba(0, 0, 0, 0.1);
    --border-bright: rgba(0, 0, 0, 0.2);
    --primary-glow: rgba(99, 102, 241, 0.2);
    --shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
}

html { scroll-behavior: smooth; }

* { 
    margin: 0; padding: 0; box-sizing: border-box; 
    font-family: 'Outfit', sans-serif; 
    transition: background-color 0.3s, color 0.3s, border-color 0.3s; 
}

body {
    background-color: var(--bg-deep);
    color: var(--text-main);
    overflow-x: hidden;
    background-image: radial-gradient(rgba(99, 102, 241, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* =========================================
    2. ANIMATIONS (Full Suite)
    ========================================= */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse-glow { 0% { box-shadow: 0 0 5px var(--primary-glow); } 50% { box-shadow: 0 0 25px var(--primary-glow); } 100% { box-shadow: 0 0 5px var(--primary-glow); } }
@keyframes pulse-core { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); } 70% { box-shadow: 0 0 60px 30px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit { from { transform: rotate(0deg) translateX(180px) rotate(0deg); } to { transform: rotate(360deg) translateX(180px) rotate(-360deg); } }
@keyframes orbit-reverse { from { transform: rotate(360deg) translateX(120px) rotate(-360deg); } to { transform: rotate(0deg) translateX(120px) rotate(0deg); } }
@keyframes orbit-small { from { transform: rotate(0deg) translateX(280px) rotate(0deg); } to { transform: rotate(360deg) translateX(280px) rotate(-360deg); } }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }

/* Electric Logo Animations */
@keyframes electric-pulse {
    0%, 100% { text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary); transform: scale(1); }
    50% { text-shadow: 0 0 20px var(--cyan), 0 0 40px var(--primary); transform: scale(1.1); }
}
@keyframes liquid-text {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.fade-in { animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.slide-up { animation: slideUp 1s ease forwards; }

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* =========================================
    3. UI COMPONENTS
    ========================================= */
/* Buttons */
.btn-glow {
    padding: 14px 35px; font-size: 1rem; font-weight: 700; border-radius: 50px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white; border: none; cursor: pointer;
    box-shadow: 0 10px 30px -10px var(--primary-glow);
    transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1;
}
.btn-glow::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--accent), var(--primary));
    z-index: -1; transition: opacity 0.3s; opacity: 0;
}
.btn-glow:hover::before { opacity: 1; }
.btn-glow:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 40px -10px var(--primary-glow); }
.btn-glow:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(100%); }

.btn-outline {
    padding: 14px 35px; font-size: 1rem; font-weight: 700; border-radius: 50px;
    background: transparent; border: 1px solid var(--border); color: var(--text-main); cursor: pointer;
    transition: 0.3s;
}
.btn-outline:hover { border-color: var(--primary); background: rgba(99, 102, 241, 0.1); transform: translateY(-2px); }

.btn-mini {
    padding: 8px 16px; font-size: 0.85rem; font-weight: 600; border-radius: 20px;
    background: rgba(99, 102, 241, 0.1); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3);
    cursor: pointer; transition: 0.3s;
}
.btn-mini:hover { background: var(--primary); color: white; transform: translateY(-2px); box-shadow: 0 5px 15px var(--primary-glow); }

/* LOGO STYLING */
.logo-container {
    display: flex; align-items: center; gap: 12px; cursor: pointer; transition: 0.3s;
}
.logo-container:hover { transform: scale(1.05); }
.logo-icon {
    font-size: 2rem; color: var(--primary);
    animation: electric-pulse 2s infinite ease-in-out;
}
.logo-text {
    font-weight: 900; font-size: 2rem; letter-spacing: -1px;
    background: linear-gradient(90deg, #fff, var(--primary), var(--cyan), #fff);
    background-size: 300% 100%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: liquid-text 4s linear infinite;
}

/* Inputs */
input, select, textarea {
    width: 100%; padding: 16px; margin-bottom: 15px; background: var(--bg-surface);
    border: 1px solid var(--border); border-radius: 12px; color: var(--text-main); outline: none;
    transition: all 0.3s ease; font-size: 1rem;
}
input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); transform: scale(1.01); }

/* Theme Toggle */
.theme-toggle {
    background: var(--bg-surface); border: 1px solid var(--border);
    color: var(--text-main); width: 45px; height: 45px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: 0.3s; margin-left: 20px; font-size: 1.2rem;
}
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); transform: rotate(15deg); }

/* =========================================
    4. LANDING PAGE
    ========================================= */
#landing-page { position: relative; z-index: 10; width: 100%; min-height: 100vh; background: var(--bg-deep); padding-top: 35px; }

.ticker-wrap {
    position: fixed; top: 0; width: 100%; height: 35px; background: var(--primary);
    z-index: 200; overflow: hidden; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ticker { display: inline-block; white-space: nowrap; animation: marquee 30s linear infinite; color: white; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px; }

.lp-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 5%; position: fixed; top: 35px; width: 100%;
    background: rgba(var(--bg-deep), 0.85); backdrop-filter: blur(16px);
    z-index: 100; border-bottom: 1px solid var(--border);
}
.nav-links a { color: var(--text-muted); text-decoration: none; margin: 0 25px; font-weight: 500; transition: 0.3s; cursor: pointer; position: relative; }
.nav-links a:hover { color: var(--primary); }
.nav-links a::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0;
    background: var(--primary); transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }

/* Hero */
.hero {
    min-height: 100vh; display: flex; align-items: center; justify-content: space-between;
    padding: 160px 5% 80px; background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%);
}
.hero-text { flex: 1; max-width: 650px; z-index: 2; animation: fadeIn 1s ease-out; }
.hero h1 { font-size: 5rem; line-height: 1.1; margin-bottom: 25px; color: var(--text-main); letter-spacing: -2px; }
.hero p { font-size: 1.3rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 40px; max-width: 90%; }

.savings-sim {
    background: var(--bg-surface); border: 1px solid var(--border); padding: 30px;
    border-radius: 24px; margin-bottom: 40px; width: 100%; max-width: 500px;
    box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.savings-sim::after {
    content: ''; position: absolute; top: -50px; right: -50px; width: 100px; height: 100px;
    background: var(--primary); filter: blur(60px); opacity: 0.2;
}
input[type=range] { width: 100%; height: 8px; background: var(--border); border-radius: 5px; outline: none; margin-top: 20px; accent-color: var(--primary); cursor: pointer; }

/* Hero Animation (Galaxy) */
.hero-visual { flex: 1; height: 600px; position: relative; display: flex; align-items: center; justify-content: center; animation: fadeIn 1.5s ease; }
.core-sphere {
    width: 160px; height: 160px; background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 5rem; color: white; animation: pulse-core 3s infinite; position: relative; z-index: 10;
    box-shadow: 0 0 80px rgba(99, 102, 241, 0.6);
}
.orbit-ring-1 { 
    position: absolute; width: 380px; height: 380px; 
    border: 2px dashed rgba(99, 102, 241, 0.4); 
    border-radius: 50%; animation: spin-slow 20s linear infinite; 
}
.orbit-ring-2 { 
    position: absolute; width: 600px; height: 600px; 
    border: 1px dashed rgba(255, 255, 255, 0.2); 
    border-radius: 50%; animation: spin-slow 35s linear infinite reverse; 
}

.planet {
    position: absolute; width: 70px; height: 70px; background: var(--bg-surface);
    border: 1px solid var(--border-bright); border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 1.8rem;
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.3); top: 50%; left: 50%; margin-top: -35px; margin-left: -35px; z-index: 5;
}
.p1 { animation: orbit 12s linear infinite; color: var(--success); background: rgba(16, 185, 129, 0.1); border-color: var(--success); }
.p2 { animation: orbit-reverse 18s linear infinite; color: var(--cyan); background: rgba(6, 182, 212, 0.1); border-color: var(--cyan); }
.p3 { animation: orbit-small 25s linear infinite reverse; transform-origin: 300px; color: var(--danger); background: rgba(239, 68, 68, 0.1); border-color: var(--danger); }

/* Partners */
.partners { padding: 50px 0; background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; }
.partner-icons { display: flex; justify-content: center; gap: 70px; flex-wrap: wrap; opacity: 0.7; font-size: 1.6rem; color: var(--text-muted); margin-top: 20px; font-weight: 600; }
.partner-icons span { transition: 0.3s; cursor: default; }
.partner-icons span:hover { opacity: 1; color: var(--text-main); transform: translateY(-5px); text-shadow: 0 0 10px var(--primary-glow); }

/* Features */
.features { padding: 120px 5%; background: var(--bg-deep); }
.section-header { text-align: center; margin-bottom: 80px; }
.section-header h2 { font-size: 3rem; margin-bottom: 15px; color: var(--text-main); }
.section-header p { font-size: 1.2rem; color: var(--text-muted); }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.feature-card {
    padding: 50px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 30px;
    transition: 0.4s; position: relative; overflow: hidden;
}
.feature-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:5px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: 0; transition: 0.3s; }
.feature-card:hover { transform: translateY(-15px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5); border-color: var(--primary); }
.feature-card:hover::before { opacity: 1; }
.feature-card i { font-size: 3rem; color: var(--cyan); margin-bottom: 30px; display: block; transition: 0.4s; }
.feature-card:hover i { transform: scale(1.1); color: var(--primary); }
.feature-card h3 { color: var(--text-main); margin-bottom: 15px; font-size: 1.6rem; }
.feature-card p { color: var(--text-muted); line-height: 1.7; font-size: 1.05rem; }

/* FAQ */
.faq-section { padding: 100px 5%; background: var(--bg-surface); }
.faq-item { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 20px; margin-bottom: 20px; padding: 30px; cursor: pointer; transition: 0.3s; }
.faq-item:hover { border-color: var(--primary); box-shadow: 0 0 15px rgba(99, 102, 241, 0.1); }
.faq-item h4 { color: var(--text-main); margin-bottom: 5px; display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 600; }
.faq-item p { color: var(--text-muted); font-size: 1rem; display: none; margin-top: 20px; line-height: 1.8; border-top: 1px solid var(--border); padding-top: 20px; }
.faq-item.active p { display: block; animation: fadeIn 0.4s ease; }
.faq-item i { transition: 0.3s; }
.faq-item.active i { transform: rotate(180deg); color: var(--primary); }

/* Footer */
.lp-footer { padding: 100px 5% 50px; border-top: 1px solid var(--border); background: var(--bg-deep); font-size: 0.95rem; color: var(--text-muted); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 80px; }
.footer-col h4 { color: var(--text-main); margin-bottom: 25px; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.footer-col a { display: block; color: var(--text-muted); text-decoration: none; margin-bottom: 15px; transition: 0.2s; cursor: pointer; }
.footer-col a:hover { color: var(--primary); transform: translateX(5px); }

.social-icons { margin-top: 25px; display: flex; gap: 20px; }
.social-icons a { font-size: 1.5rem; color: var(--text-muted); transition: 0.3s; }
.social-icons a:hover { color: var(--primary); transform: translateY(-3px); }

.disclaimer-box {
    background: var(--bg-surface); border: 1px solid var(--border);
    padding: 30px; border-radius: 16px; margin-top: 50px;
    color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; text-align: center;
}

/* =========================================
    5. DASHBOARD
    ========================================= */
#app-container { display: none; height: 100vh; width: 100%; padding-top: 0; }

.sidebar { width: 300px; background: var(--bg-surface); border-right: 1px solid var(--border); padding: 40px 30px; display: flex; flex-direction: column; }
.nav-btn {
    padding: 18px 25px; margin-bottom: 10px; border-radius: 16px; cursor: pointer;
    color: var(--text-muted); display: flex; align-items: center; gap: 15px; font-weight: 500; transition: 0.3s;
}
.nav-btn:hover { background: var(--bg-deep); color: var(--text-main); }
.nav-btn.active { background: var(--bg-deep); color: var(--text-main); border-left: 4px solid var(--primary); box-shadow: var(--shadow); }
.nav-btn i { width: 25px; font-size: 1.1rem; }

.level-container { margin-bottom: 40px; }
.level-text { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }
.level-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.level-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.5s; }

.main-content { flex: 1; padding: 50px; overflow-y: auto; background: var(--bg-deep); }
.section { display: none; opacity: 0; transform: translateY(20px); transition: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.section.active { display: block; opacity: 1; transform: translateY(0); }

.glass-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 24px; padding: 35px; transition: 0.3s; margin-bottom: 30px;
    position: relative; overflow: hidden;
}
.glass-card:hover { border-color: rgba(99, 102, 241, 0.3); box-shadow: var(--shadow); }

.burn-alert {
    background: rgba(239, 68, 68, 0.1); border: 1px solid var(--danger); padding: 15px 25px;
    border-radius: 15px; display: none; align-items: center; gap: 15px; margin-bottom: 30px;
    color: var(--danger); animation: fadeIn 0.5s ease;
}
.burn-alert i { font-size: 1.5rem; }

.stat-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-bottom: 30px; }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.time-filters { display: flex; gap: 10px; background: rgba(255,255,255,0.05); padding: 5px; border-radius: 12px; }
.filter-btn { padding: 6px 16px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: 0.3s; }
.filter-btn.active { background: var(--primary); color: white; }

/* REWARDS GRID - FIXED PREMIUM LOGOS */
.rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px; }
.reward-card {
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 24px;
    padding: 30px; text-align: center; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    cursor: pointer; position: relative; overflow: hidden;
    display: flex; flex-direction: column; height: 320px; justify-content: center; align-items: center;
}

/* Icon Circle Background - CENTERED AND VISIBLE */
.reward-icon-bg {
    width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); margin-bottom: 25px; transition: 0.4s ease;
    position: relative; z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    /* Ensure centered correctly */
    margin-left: auto; margin-right: auto;
}

/* Brand Specific Colors on Hover */
.reward-card:hover .reward-icon-bg { transform: scale(1.15); }
.brand-spotify:hover .reward-icon-bg { background: radial-gradient(circle, rgba(29, 185, 84, 0.4), transparent); box-shadow: 0 0 40px #1DB954; border: 2px solid #1DB954; }
.brand-netflix:hover .reward-icon-bg { background: radial-gradient(circle, rgba(229, 9, 20, 0.4), transparent); box-shadow: 0 0 40px #E50914; border: 2px solid #E50914; }
.brand-zomato:hover .reward-icon-bg { background: radial-gradient(circle, rgba(203, 32, 45, 0.4), transparent); box-shadow: 0 0 40px #cb202d; border: 2px solid #cb202d; }
.brand-amazon:hover .reward-icon-bg { background: radial-gradient(circle, rgba(255, 153, 0, 0.4), transparent); box-shadow: 0 0 40px #ff9900; border: 2px solid #ff9900; }
.brand-uber:hover .reward-icon-bg { background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent); box-shadow: 0 0 40px #ffffff; border: 2px solid #ffffff; }
.brand-dominos:hover .reward-icon-bg { background: radial-gradient(circle, rgba(0, 100, 145, 0.4), transparent); box-shadow: 0 0 40px #006491; border: 2px solid #006491; }
.brand-myntra:hover .reward-icon-bg { background: radial-gradient(circle, rgba(230, 0, 126, 0.4), transparent); box-shadow: 0 0 40px #E6007E; border: 2px solid #E6007E; }
.brand-steam:hover .reward-icon-bg { background: radial-gradient(circle, rgba(23, 26, 33, 0.8), transparent); box-shadow: 0 0 40px #171a21; border: 2px solid #66c0f4; }

/* Icon Style - Centered */
.reward-card i { 
    font-size: 3.5rem; transition: 0.4s; color: white; position: relative; z-index: 3;
    /* Removed absolute positioning to prevent corner glitches */
}

.reward-info { transition: 0.4s; z-index: 2; text-align: center; width: 100%; position: relative; }

/* Smooth Lift on Hover */
.reward-card:hover { transform: translateY(-12px); border-color: var(--primary); box-shadow: 0 25px 60px -15px rgba(99,102,241,0.25); }
.reward-badge { position: absolute; top: 15px; right: 15px; background: var(--danger); color: white; padding: 5px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 800; z-index: 3; box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4); }

/* QUESTS SECTION */
.quest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.quest-card {
    background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
    display: flex; align-items: center; gap: 15px; transition: 0.3s; cursor: pointer;
}
.quest-card:hover { background: rgba(99,102,241,0.1); border-color: var(--primary); }
.quest-icon {
    width: 50px; height: 50px; background: var(--bg-surface); border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--accent);
}
.quest-check { margin-left: auto; color: var(--success); font-size: 1.2rem; opacity: 0; }
.quest-card.completed .quest-check { opacity: 1; }
.quest-card.completed { opacity: 0.6; pointer-events: none; }

/* Academy */
.academy-banner {
    background: linear-gradient(90deg, var(--primary), var(--accent)); padding: 20px; border-radius: 16px;
    color: white; margin-bottom: 30px; display: flex; align-items: center; gap: 15px; font-weight: 600;
    box-shadow: 0 10px 30px -5px var(--primary-glow); animation: slideUp 0.5s ease-out;
}
.academy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.course-card {
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 24px; overflow: hidden;
    transition: 0.3s; cursor: pointer; display: flex; flex-direction: column; height: 100%;
}
.course-card:hover { border-color: var(--cyan); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(6, 182, 212, 0.15); }
.course-thumb { height: 160px; background: linear-gradient(45deg, #111, #222); display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--text-muted); position: relative; }
.course-thumb::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8)); }
.course-content { padding: 25px; flex: 1; display: flex; flex-direction: column; }
.course-tag { font-size: 0.75rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; font-weight: 700; }
/* Completed Course Style */
.course-card.completed { opacity: 0.7; border-color: var(--success); pointer-events: none; }
.course-card.completed .course-thumb { background: #064e3b; color: var(--success); }

/* Leaderboard */
.rank-tabs { display: flex; gap: 15px; margin-bottom: 25px; }
.rank-tab { padding: 10px 25px; border-radius: 30px; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-weight: 600; transition: 0.3s; }
.rank-tab:hover { border-color: var(--primary); color: var(--text-main); }
.rank-tab.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 5px 15px var(--primary-glow); }

.rank-table { width: 100%; border-collapse: collapse; }
.rank-table th { text-align: left; padding: 20px; color: var(--text-muted); border-bottom: 1px solid var(--border); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
.rank-table td { padding: 20px; border-bottom: 1px solid var(--border); color: var(--text-main); font-weight: 500; }
.rank-row { transition: 0.2s; }
.rank-row:hover { background: rgba(255,255,255,0.02); }
.rank-badge { width: 35px; height: 35px; border-radius: 50%; background: #222; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: bold; margin-right: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }

.tx-list { max-height: 350px; overflow-y: auto; padding-right: 10px; }
.tx-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border); }
.tx-income { color: var(--success); font-weight: 700; }
.tx-expense { color: var(--danger); font-weight: 700; }

.uni-battle-card { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.battle-bar-container { display: flex; align-items: flex-end; height: 150px; gap: 15px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.battle-bar { flex: 1; background: var(--accent); border-radius: 8px 8px 0 0; position: relative; transition: height 1s; opacity: 0.7; }
.battle-bar:hover { opacity: 1; }
.battle-bar.active { background: var(--primary); opacity: 1; box-shadow: 0 0 15px var(--primary-glow); }
.battle-label { text-align: center; font-size: 0.8rem; margin-top: 10px; color: var(--text-muted); }

/* =========================================
    6. MODALS & POPUPS
    ========================================= */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(12px);
    z-index: 2000; align-items: center; justify-content: center; animation: fadeIn 0.3s ease;
}
.modal-box {
    width: 600px; max-height: 85vh; overflow-y: auto; padding: 50px; background: var(--bg-surface);
    border: 1px solid var(--border); border-radius: 30px; text-align: left;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.8); animation: zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative;
}
.modal-close { position: absolute; top: 25px; right: 25px; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); transition: 0.2s; }
.modal-close:hover { color: var(--primary); transform: rotate(90deg); }

.review-card {
    background: var(--bg-deep); border: 1px solid var(--border); padding: 25px; border-radius: 20px; margin-bottom: 20px;
    transition: 0.3s;
}
.review-card:hover { border-color: var(--primary); transform: translateX(5px); }

/* Detailed Learning Modal Styles */
#course-content {
    margin-bottom: 30px; height: 350px; overflow-y: auto; padding-right: 15px;
    border-bottom: 1px solid var(--border);
}
.course-nav {
    display: flex; justify-content: space-between; align-items: center; margin-top: 20px;
}
#page-indicator { color: var(--text-muted); font-size: 0.9rem; font-weight: 600; }

/* Rename FAB class to avoid conflict */
.chat-trigger {
    position: fixed; bottom: 40px; right: 40px; width: 70px; height: 70px;
    background: var(--primary); border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 2rem; color: white;
    cursor: pointer; box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4); z-index: 500;
    transition: 0.3s; animation: float 4s infinite ease-in-out;
}
.chat-trigger:hover { transform: scale(1.1) rotate(15deg); }
.chat-win {
    display: none; position: fixed; bottom: 125px; right: 40px; width: 380px; height: 550px;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 24px;
    z-index: 500; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8); animation: zoomIn 0.3s;
}

@media (max-width: 1024px) {
    .stat-grid, .footer-grid { grid-template-columns: 1fr; }
    .sidebar { width: 80px; padding: 20px 10px; }
    .nav-btn span, .logo-text span { display: none; }
    .logo-text i { font-size: 2rem; }
    .hero h1 { font-size: 3rem; }
}