/* lelongX -- Academy LMS styles */

/* Academy hero with purple gradient */
.academy-hero {
    background: var(--gradient-mesh);
    padding: var(--space-16) 0 var(--space-8);
    text-align: center;
}
.academy-hero h1 {
    font-size: clamp(40px, 5vw, 64px);
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--space-3);
}

/* Academy course grid */
.academy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
@media (max-width: 1024px) { .academy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .academy-grid { grid-template-columns: 1fr; } }

.academy-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 768px) { .academy-grid-2 { grid-template-columns: 1fr; } }

/* Continue Learning horizontal scroll */
.continue-strip {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4);
}
.continue-strip .course-card { flex: 0 0 360px; scroll-snap-align: start; }

/* Course landing page */
.course-landing-shell {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-8);
    padding: var(--space-6) 0;
}
@media (max-width: 1024px) { .course-landing-shell { grid-template-columns: 1fr; } }

.outcomes-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (max-width: 640px) { .outcomes-list { grid-template-columns: 1fr; } }
.outcomes-list li { display: flex; gap: var(--space-3); padding: var(--space-3); background: var(--bg-elevated); border-radius: var(--radius-md); font-size: var(--text-sm); }
.outcomes-list i { color: var(--brand-emerald); margin-top: 2px; }

.curriculum-chapter { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); margin-bottom: var(--space-3); overflow: hidden; }
.chapter-head { padding: var(--space-4); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.chapter-head:hover { background: var(--bg-elevated); }
.chapter-lessons { display: none; }
.curriculum-chapter.open .chapter-lessons { display: block; }
.curriculum-chapter.open .chapter-head i.chevron { transform: rotate(180deg); }
.lesson-row { padding: var(--space-3) var(--space-6); border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); color: var(--text-secondary); }
.lesson-row .lesson-title-line { display: flex; align-items: center; gap: var(--space-3); }
.lesson-row i.fa-circle-play { color: var(--brand-emerald); }
.lesson-row i.fa-lock { color: var(--text-muted); }

.enroll-card-sticky { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-6); position: sticky; top: calc(var(--nav-height) + var(--space-4)); align-self: start; }
.preview-video { aspect-ratio: 16/9; background: var(--bg-elevated); border-radius: var(--radius-md); margin-bottom: var(--space-4); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; }
.preview-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.preview-video .play-overlay { position: absolute; width: 64px; height: 64px; background: var(--brand-cyan); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--text-inverse); font-size: 24px; }
.enroll-price { font-size: var(--text-3xl); font-weight: 800; color: var(--brand-gold); margin-bottom: var(--space-3); }
.enroll-features { list-style: none; padding: 0; margin: var(--space-4) 0; }
.enroll-features li { padding: 6px 0; display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.enroll-features i { color: var(--brand-emerald); }

/* Lesson player */
.lesson-player-shell { display: grid; grid-template-columns: 280px 1fr 320px; height: calc(100vh - var(--nav-height)); }
.lesson-player-shell.notes-collapsed { grid-template-columns: 280px 1fr 0; }
@media (max-width: 1024px) { .lesson-player-shell, .lesson-player-shell.notes-collapsed { grid-template-columns: 1fr; height: auto; } }

.lesson-sidebar { background: var(--bg-surface); border-right: 1px solid var(--border-soft); padding: var(--space-4); overflow-y: auto; }
.lesson-sidebar h3 { font-size: var(--text-md); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-soft); }
.lesson-sidebar-item { padding: var(--space-3); border-radius: var(--radius-md); margin-bottom: var(--space-1); display: flex; gap: var(--space-2); align-items: flex-start; cursor: pointer; transition: background var(--duration-fast); font-size: var(--text-sm); }
.lesson-sidebar-item:hover { background: var(--bg-elevated); }
.lesson-sidebar-item.active { background: rgba(34, 211, 238, 0.1); border-left: 3px solid var(--brand-cyan); }
.lesson-sidebar-item.completed i { color: var(--brand-emerald); }
.lesson-sidebar-item.current i { color: var(--brand-cyan); }
.lesson-sidebar-item.locked { opacity: 0.5; }
.lesson-sidebar-item.locked i { color: var(--text-muted); }
.lesson-sidebar-item .duration { margin-left: auto; color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }

.lesson-main { padding: var(--space-6); overflow-y: auto; }
.lesson-video { aspect-ratio: 16/9; background: #000; border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.lesson-video video { width: 100%; height: 100%; border-radius: var(--radius-lg); }

.lesson-actions { display: flex; gap: var(--space-3); margin: var(--space-6) 0; }

.lesson-notes-panel { background: var(--bg-surface); border-left: 1px solid var(--border-soft); padding: var(--space-4); overflow-y: auto; }

/* Quiz */
.quiz-page { max-width: 760px; margin: 0 auto; padding: var(--space-12) var(--space-6); }
.quiz-progress-bar { height: 4px; background: var(--bg-elevated); border-radius: var(--radius-full); margin-bottom: var(--space-6); overflow: hidden; }
.quiz-progress-fill { height: 100%; background: var(--gradient-hero); transition: width var(--duration-normal); }
.quiz-question-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-8); }
.quiz-question-num { color: var(--brand-cyan); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.quiz-question-text { font-size: var(--text-xl); margin-bottom: var(--space-6); }
.quiz-options { list-style: none; padding: 0; }
.quiz-option { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-md); margin-bottom: var(--space-2); cursor: pointer; transition: all var(--duration-fast); }
.quiz-option:hover { border-color: var(--brand-cyan); transform: translateY(-1px); }
.quiz-option.selected { border-color: var(--brand-cyan); background: rgba(34, 211, 238, 0.1); box-shadow: var(--shadow-glow-cyan); }
.quiz-option.correct { border-color: var(--brand-emerald); background: rgba(16, 185, 129, 0.15); }
.quiz-option.wrong { border-color: var(--brand-rose); background: rgba(244, 63, 94, 0.15); }
.quiz-actions { display: flex; justify-content: space-between; margin-top: var(--space-6); }

.quiz-result { text-align: center; padding: var(--space-12); }
.quiz-result-circle { width: 180px; height: 180px; margin: 0 auto var(--space-6); }
.quiz-result-score { font-size: var(--text-6xl); font-family: var(--font-mono); font-weight: 800; }
.quiz-result.pass .quiz-result-score { color: var(--brand-emerald); }
.quiz-result.fail .quiz-result-score { color: var(--brand-rose); }

/* My Courses */
.my-courses-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); }
@media (max-width: 640px) { .my-courses-stats { grid-template-columns: 1fr; } }

/* Certificate */
.certificate-page { padding: var(--space-8) 0; min-height: 100vh; background: var(--bg-base); }
.certificate-actions { display: flex; gap: var(--space-3); justify-content: center; margin-bottom: var(--space-6); }
.certificate { max-width: 1000px; margin: 0 auto; aspect-ratio: 1.414/1; background: linear-gradient(135deg, #0a0f1e 0%, #1a2235 50%, #0a0f1e 100%); border-radius: var(--radius-lg); padding: var(--space-12); position: relative; overflow: hidden; box-shadow: var(--shadow-xl); }
.certificate::before { content: ''; position: absolute; inset: 24px; border: 2px solid; border-image: var(--gradient-border) 1; pointer-events: none; }
.certificate::after { content: ''; position: absolute; inset: 32px; border: 1px solid rgba(255, 255, 255, 0.1); pointer-events: none; }
.certificate-inner { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: var(--space-8); text-align: center; }
.cert-logo { font-size: var(--text-3xl); font-weight: 800; }
.cert-logo .brand-lelong { color: var(--brand-cyan); }
.cert-logo .brand-x { color: var(--brand-purple); }
.cert-title-block h1 { font-size: var(--text-4xl); margin-bottom: var(--space-3); background: var(--gradient-text-cyan-purple); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cert-name { font-size: var(--text-5xl); font-weight: 800; color: var(--text-primary); margin: var(--space-6) 0; padding-bottom: var(--space-3); border-bottom: 2px solid var(--brand-gold); display: inline-block; padding-left: var(--space-12); padding-right: var(--space-12); }
.cert-course { font-size: var(--text-2xl); color: var(--brand-gold); font-weight: 700; }
.cert-meta { color: var(--text-muted); margin-top: var(--space-3); }
.cert-footer { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
.cert-signature { text-align: left; border-top: 1px solid var(--text-muted); padding-top: var(--space-2); min-width: 200px; }
.cert-qr { width: 80px; height: 80px; background: #fff; padding: 4px; border-radius: var(--radius-sm); }

@media print {
    body { background: #fff; }
    .nav, .footer, .certificate-actions, [data-nav], [data-footer] { display: none !important; }
    .certificate-page { padding: 0; }
    .certificate { box-shadow: none; max-width: 100%; }
    @page { size: landscape A4; margin: 0; }
}