/* ═══════════════════════════════════════
   JEE PREP — Custom CSS
   Colors: Deep Blue #1a3a6b + Orange #f97316
   ═══════════════════════════════════════ */

:root {
    --jee-blue: #1a3a6b;
    --jee-blue-light: #2a5298;
    --jee-orange: #f97316;
    --jee-orange-dark: #ea6c0a;
    --jee-bg: #f8fafc;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--jee-bg);
    color: #1e293b;
}

/* ── Navbar ── */
.jee-navbar {
    background: linear-gradient(135deg, var(--jee-blue) 0%, var(--jee-blue-light) 100%);
    box-shadow: 0 2px 20px rgba(26, 58, 107, 0.3);
    padding: 12px 0;
}

.brand-main {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.brand-sub {
    font-size: 0.65rem;
    opacity: 0.7;
    letter-spacing: 0.5px;
}
.brand-icon { font-size: 1.8rem; }

.streak-badge {
    background: linear-gradient(135deg, #ff6b35, #f97316);
    color: white;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 20px;
}
.points-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 20px;
}

.avatar-circle {
    width: 32px; height: 32px;
    background: var(--jee-orange);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 0.85rem;
}

/* ── Buttons ── */
.btn-jee-orange {
    background: linear-gradient(135deg, var(--jee-orange) 0%, var(--jee-orange-dark) 100%);
    color: white;
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35);
    transition: all 0.2s;
}
.btn-jee-orange:hover {
    background: linear-gradient(135deg, var(--jee-orange-dark) 0%, #d05e09 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
}

.text-orange { color: var(--jee-orange) !important; }

/* ── Hero Section ── */
.hero-section {
    background: linear-gradient(135deg, var(--jee-blue) 0%, #1e4d8c 50%, #2563eb 100%);
    color: white;
    min-height: 85vh;
    display: flex;
    align-items: center;
}
.hero-title { line-height: 1.15; }
.hero-subtitle { opacity: 0.9; }
.hero-stats .stat-number { font-size: 2rem; }
.hero-stats .stat-label { opacity: 0.7; }

/* Quiz Card Preview (hero) */
.quiz-card-preview {
    background: white;
    border-radius: 16px;
    padding: 24px;
    color: #1e293b;
    transform: rotate(2deg);
}
.question-preview { font-size: 0.95rem; font-weight: 600; }
.option-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 6px;
    font-size: 0.85rem;
}
.option-correct {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
    font-weight: 600;
}
.score-circle { font-size: 1.5rem; font-weight: 800; color: var(--jee-blue); }
.streak-display { color: var(--jee-orange); font-weight: 700; }

/* ── Subject Cards ── */
.subject-card {
    border-radius: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.subject-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important;
}
.subject-icon { font-size: 3rem; }

/* ── Step Cards ── */
.step-card {
    border-radius: 12px;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: transform 0.2s;
}
.step-card:hover { transform: translateY(-3px); }
.step-number {
    width: 36px; height: 36px;
    background: var(--jee-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 auto;
}
.step-icon { font-size: 2rem; }

/* ── Grade Section ── */
.grade-section {
    background: linear-gradient(135deg, var(--jee-blue) 0%, var(--jee-blue-light) 100%);
}
.grade-pill {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    transition: background 0.2s;
    cursor: default;
}
.grade-pill:hover { background: rgba(255,255,255,0.2); }
.grade-num { font-size: 1rem; }
.grade-level { opacity: 0.85; font-size: 0.75rem; }

/* ── Pricing ── */
.pricing-card { border-radius: 20px; }
.pricing-featured {
    background: linear-gradient(135deg, #fff7ed, #fff);
    border: 2px solid var(--jee-orange) !important;
    border-radius: 20px;
}

/* ── CTA ── */
.cta-section { background: var(--jee-bg); }

/* ── Auth Cards ── */
.auth-card { border-radius: 20px; }
.auth-icon { font-size: 3rem; }

/* ── Trial Banner ── */
.trial-banner {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-bottom: 1px solid #fcd34d;
    font-size: 0.9rem;
}

/* ── Dashboard ── */
.stat-card { border-radius: 16px; }
.stat-emoji { font-size: 2rem; }
.stat-value { line-height: 1.2; }
.stat-label { font-size: 0.8rem; }

.trial-info-box {
    background: #fff7ed;
    border-color: #fed7aa !important;
    border-radius: 12px;
}

/* Daily Quiz Row */
.daily-quiz-row { border-color: #e2e8f0 !important; }
.quiz-completed { background: #f0fdf4; border-color: #bbf7d0 !important; }
.quiz-pending { background: #fff; }
.quiz-weekly { background: #fffbeb; border-color: #fde68a !important; }
.subject-emoji { line-height: 1; }
.score-badge { font-size: 1rem; }

/* Activity Bar */
.activity-dot {
    width: 32px; height: 32px;
    background: #e2e8f0;
}
.activity-active { background: var(--jee-orange) !important; }

/* Recent Attempts */
.mini-avatar {
    width: 32px; height: 32px;
    background: var(--jee-blue);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem;
}

/* ── Quiz Page ── */
.quiz-header { border-radius: 16px; }
.timer-display {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--jee-blue);
}

/* ── Quiz Result ── */
.score-circle-lg {
    width: 160px; height: 160px;
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-size: 0.85rem;
}
.score-number { font-size: 2.5rem; font-weight: 800; }
.score-excellent { background: #dcfce7; color: #166534; border: 4px solid #86efac; }
.score-good { background: #dbeafe; color: #1e40af; border: 4px solid #93c5fd; }
.score-average { background: #fef3c7; color: #92400e; border: 4px solid #fcd34d; }
.score-poor { background: #fee2e2; color: #991b1b; border: 4px solid #fca5a5; }
.points-earned { font-size: 1rem; }

.option-correct-bg { background: #dcfce7; border: 1px solid #86efac; }
.option-wrong-bg { background: #fee2e2; border: 1px solid #fca5a5; }
.opt-badge { min-width: 28px; }
.explanation-box { background: #eff6ff; border-left: 3px solid #3b82f6; }

/* ── Progress Page ── */
.heatmap { flex-wrap: wrap; }
.heatmap-cell {
    width: 16px; height: 16px;
    background: #e2e8f0;
    border-radius: 3px;
}
.heatmap-active { background: var(--jee-orange) !important; }

/* ── Leaderboard ── */
.podium-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 800; color: white;
}
.gold { background: linear-gradient(135deg, #f59e0b, #d97706); }
.silver { background: linear-gradient(135deg, #94a3b8, #64748b); }
.bronze { background: linear-gradient(135deg, #cd7c4e, #92400e); }
.podium-block {
    padding: 12px 20px;
    border-radius: 8px 8px 0 0;
    font-weight: 700;
    color: white;
    margin-top: 8px;
}
.gold-block { background: linear-gradient(135deg, #f59e0b, #d97706); min-height: 80px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; }
.silver-block { background: #94a3b8; min-height: 60px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; }
.bronze-block { background: #cd7c4e; min-height: 45px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; }
.crown { font-size: 1.5rem; }

/* ── Subject Select (quiz pick) ── */
.subject-select-card {
    border-radius: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.subject-select-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important; }
.subject-icon-lg { font-size: 4rem; }
.score-shown { font-size: 1.5rem; }
.completed-check {
    position: absolute; top: 16px; right: 16px;
    width: 28px; height: 28px;
    background: #22c55e; color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}

/* ── Footer ── */
.jee-footer {
    background: var(--jee-blue);
    color: rgba(255,255,255,0.7);
}
.jee-footer .fw-bold { color: white; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .hero-section { min-height: auto; padding: 40px 0; }
    .hero-title { font-size: 2rem; }
    .score-circle-lg { width: 120px; height: 120px; }
    .score-number { font-size: 2rem; }
    .podium-row { transform: scale(0.85); }
}