:root { --navy: #020617; --emerald: #059669; --emerald-dark: #047857; --slate: #64748b; --surface: #f8fafc; --border: #e2e8f0; }
* { box-sizing: border-box; }
body { font-family: Inter, system-ui, sans-serif; color: #0f172a; background: #fff; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-navbar { background: var(--navy); }
.navbar-brand { letter-spacing: -.03em; }
.brand-mark, .auth-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(16,185,129,.16); color: #34d399; }
.btn-emerald { color: #fff; background: var(--emerald); border-color: var(--emerald); }
.btn-emerald:hover, .btn-emerald:focus { color: #fff; background: var(--emerald-dark); border-color: var(--emerald-dark); }
.text-emerald { color: var(--emerald) !important; }
.hero-section { background: radial-gradient(circle at 75% 10%, rgba(16,185,129,.12), transparent 30%), linear-gradient(180deg, #f8fafc 0%, #fff 100%); }
.py-lg-6 { padding-top: 7rem !important; padding-bottom: 7rem !important; }
.eyebrow { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--emerald); }
.hero-card, .auth-card, .panel-card, .stat-card, .feature-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; }
.hero-card { padding: 2rem; }
.hero-icon, .feature-icon, .recommendation-icon, .empty-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: #ecfdf5; color: var(--emerald); }
.hero-icon { width: 48px; height: 48px; font-size: 1.25rem; }
.progress-chart { height: 130px; display: flex; align-items: end; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.progress-chart span { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #34d399, #059669); }
.section-soft, .auth-section, .dashboard-section { background: var(--surface); }
.feature-card { padding: 1.5rem; transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15,23,42,.06); }
.feature-icon { width: 48px; height: 48px; font-size: 1.25rem; }
.cta-card { border-radius: 20px; background: linear-gradient(120deg, var(--navy), #0f2d3a); }
.auth-section { min-height: calc(100vh - 150px); }
.auth-card { padding: 2rem; }
.auth-mark { width: 52px; height: 52px; font-size: 1.35rem; }
.form-control { border-color: var(--border); }
.form-control:focus { border-color: #34d399; box-shadow: 0 0 0 .25rem rgba(16,185,129,.12); }
.stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; }
.stat-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.1rem; }
.stat-icon.green { color: #059669; background: #ecfdf5; } .stat-icon.blue { color: #2563eb; background: #eff6ff; } .stat-icon.purple { color: #7c3aed; background: #f5f3ff; } .stat-icon.orange { color: #d97706; background: #fffbeb; }
.stat-value { font-size: 1.45rem; font-weight: 800; line-height: 1.1; } .stat-label { color: var(--slate); font-size: .78rem; margin-top: .25rem; }
.panel-card { padding: 1.5rem; }
.chart-wrap { height: 240px; position: relative; }
.recommendation { display: flex; gap: .85rem; padding: 1rem; background: #fffbeb; border: 1px solid #fef3c7; border-radius: 14px; }
.recommendation-icon { flex: 0 0 38px; width: 38px; height: 38px; color: #d97706; background: #fef3c7; }
.badge-soft { display: inline-flex; align-items: center; padding: .4rem .7rem; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: .75rem; font-weight: 700; }
.empty-state { text-align: center; padding: 2rem 1rem; } .empty-icon { width: 48px; height: 48px; margin: 0 auto 1rem; background: #f1f5f9; color: #64748b; }
.table > :not(caption) > * > * { padding: .9rem .75rem; border-bottom-color: #f1f5f9; }
.module-list > div { display: flex; align-items: center; gap: .75rem; padding: .9rem 0; border-bottom: 1px solid #f1f5f9; } .module-list > div:last-child { border-bottom: 0; }
.module-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: #f1f5f9; color: #475569; display: inline-flex; align-items: center; justify-content: center; }
.module-list span:nth-child(2) { flex: 1; } .module-list strong, .module-list small { display: block; } .module-list small { color: #64748b; margin-top: .15rem; }
.question-pick-list { max-height: 430px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 12px; }
.question-pick { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.question-pick:last-child { border-bottom: 0; } .question-pick input { margin-top: .25rem; accent-color: #059669; } .question-pick strong, .question-pick small { display: block; } .question-pick small { color: #64748b; margin-top: .2rem; }
.package-card { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.exam-section { background: var(--surface); min-height: calc(100vh - 150px); }
.exam-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.timer-value { color: #b45309; font-size: 1.7rem; line-height: 1.2; font-weight: 800; font-variant-numeric: tabular-nums; }
.question-text { font-size: 1.15rem; line-height: 1.8; white-space: pre-line; }
.question-media { display: block; max-width: 100%; max-height: 280px; border-radius: 12px; object-fit: contain; }
.option-media { width: 72px; height: 52px; object-fit: contain; border-radius: 8px; background: #f8fafc; }
.answer-option { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem; margin-bottom: .75rem; border: 1px solid #e2e8f0; border-radius: 13px; cursor: pointer; transition: .15s ease; }
.answer-option:hover, .answer-option.selected { border-color: #34d399; background: #ecfdf5; }
.answer-option input { margin-top: .3rem; accent-color: #059669; }
.answer-key, .option-key { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: #f1f5f9; color: #475569; font-size: .82rem; font-weight: 800; }
.question-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.question-nav-button { min-width: 36px; height: 36px; border: 1px solid #e2e8f0; border-radius: 9px; color: #475569; background: #fff; font-size: .82rem; font-weight: 700; }
.question-nav-button.active { color: #fff; background: #020617; border-color: #020617; }
.question-nav-button.answered:not(.active) { color: #047857; border-color: #6ee7b7; background: #ecfdf5; }
.question-nav-button.flagged { box-shadow: inset 0 -3px 0 #f59e0b; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; } .legend-dot.answered { background: #10b981; } .legend-dot.flagged { background: #f59e0b; }
.result-hero { display: flex; justify-content: space-between; align-items: center; padding: 2rem; border: 0; background: linear-gradient(120deg, #020617, #0f3b3b); }
.result-hero-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 20px; color: #fde68a; background: rgba(253,230,138,.12); font-size: 2rem; }
.app-footer { background: #fff; border-top: 1px solid var(--border); }
@media (max-width: 767.98px) { .py-lg-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .hero-card { padding: 1.35rem; } .auth-card, .panel-card { padding: 1.25rem; } }