/* ═══════════════════════════════════════════════════════
   Èdè Yorùbá v3 — Frontend Styles
   Clean, card-based lesson layout with progress tracking
   ═══════════════════════════════════════════════════════ */

:root {
    --ey-green-50:  #EAF3DE;
    --ey-green-100: #C0DD97;
    --ey-green-400: #639922;
    --ey-green-600: #3B6D11;
    --ey-green-800: #27500A;

    --ey-blue-50:   #E6F1FB;
    --ey-blue-400:  #378ADD;
    --ey-blue-600:  #185FA5;
    --ey-blue-800:  #0C447C;

    --ey-amber-50:  #FAEEDA;
    --ey-amber-400: #EF9F27;
    --ey-amber-600: #854F0B;
    --ey-amber-800: #633806;

    --ey-purple-50:  #EEEDFE;
    --ey-purple-400: #7F77DD;
    --ey-purple-600: #534AB7;
    --ey-purple-800: #3C3489;

    --ey-gray-50:   #F7F6F3;
    --ey-gray-100:  #EEEDEA;
    --ey-gray-200:  #D3D1C7;
    --ey-gray-400:  #888780;
    --ey-gray-600:  #5F5E5A;
    --ey-gray-800:  #2C2C2A;

    --ey-red-50:    #FCEBEB;
    --ey-red-400:   #E24B4A;

    --ey-text:      #1a1a1a;
    --ey-text-muted: #6b6a66;
    --ey-text-hint:  #9c9a92;
    --ey-bg:        #ffffff;
    --ey-bg-alt:    #f8f7f5;
    --ey-border:    rgba(0,0,0,0.1);
    --ey-radius:    12px;
    --ey-radius-sm: 8px;
    --ey-shadow:    0 1px 3px rgba(0,0,0,0.06);

    --ey-level-color: var(--ey-green-400);
    --ey-level-bg:    var(--ey-green-50);
    --ey-level-text:  var(--ey-green-800);
}

/* Level color overrides */
.ey-level-2 { --ey-level-color: var(--ey-blue-400); --ey-level-bg: var(--ey-blue-50); --ey-level-text: var(--ey-blue-800); }
.ey-level-3 { --ey-level-color: var(--ey-amber-400); --ey-level-bg: var(--ey-amber-50); --ey-level-text: var(--ey-amber-800); }
.ey-level-4 { --ey-level-color: var(--ey-purple-400); --ey-level-bg: var(--ey-purple-50); --ey-level-text: var(--ey-purple-800); }

/* ── Layout ──────────────────────────────────────────── */

.ey-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    color: var(--ey-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Course header ───────────────────────────────────── */

.ey-course-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.ey-course-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--ey-radius-sm);
    background: var(--ey-level-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.ey-course-header h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.ey-course-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ey-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ey-level-bg);
    color: var(--ey-level-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ey-item-count {
    font-size: 13px;
    color: var(--ey-text-hint);
}

/* ── Progress bar ────────────────────────────────────── */

.ey-progress-bar {
    height: 6px;
    background: var(--ey-gray-100);
    border-radius: 3px;
    margin-bottom: 24px;
    overflow: hidden;
}

.ey-progress-fill {
    height: 100%;
    background: var(--ey-level-color);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* ── Tabs ────────────────────────────────────────────── */

.ey-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ey-border);
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ey-tab {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ey-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.ey-tab:hover {
    color: var(--ey-text);
}

.ey-tab.active {
    color: var(--ey-blue-600);
    border-bottom-color: var(--ey-blue-600);
}

.ey-tab-panel {
    display: none;
}

.ey-tab-panel.active {
    display: block;
}

/* ── Section (week) ──────────────────────────────────── */

.ey-section {
    margin-bottom: 32px;
}

.ey-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ey-section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--ey-text);
}

.ey-section-count {
    font-size: 12px;
    color: var(--ey-text-hint);
    background: var(--ey-gray-50);
    padding: 2px 10px;
    border-radius: 99px;
    white-space: nowrap;
}

/* ── Item list (card stack) ──────────────────────────── */

.ey-item-stack {
    border: 1px solid var(--ey-border);
    border-radius: var(--ey-radius);
    overflow: hidden;
    background: var(--ey-bg);
}

.ey-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--ey-border);
    transition: background 0.15s;
}

.ey-item:first-child {
    border-top: none;
}

.ey-item:hover {
    background: var(--ey-bg-alt);
}

.ey-item.locked {
    opacity: 0.5;
    pointer-events: none;
}

/* Completion indicator */
.ey-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.ey-check.done {
    background: var(--ey-level-color);
}

.ey-check.done svg {
    width: 14px;
    height: 14px;
}

.ey-check.pending {
    border: 2px solid var(--ey-gray-200);
    cursor: pointer;
}

.ey-check.pending:hover {
    border-color: var(--ey-level-color);
    background: var(--ey-level-bg);
}

/* Item text */
.ey-item-text {
    flex: 1;
    min-width: 0;
}

.ey-yoruba {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ey-text);
    line-height: 1.4;
}

.ey-english {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--ey-text-muted);
    line-height: 1.3;
}

/* Audio buttons */
.ey-audio-group {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.ey-audio-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--ey-border);
    background: var(--ey-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
    position: relative;
}

.ey-audio-btn:hover {
    background: var(--ey-bg-alt);
    border-color: var(--ey-gray-200);
}

.ey-audio-btn.playing {
    background: var(--ey-level-bg);
    border-color: var(--ey-level-color);
}

.ey-audio-btn svg {
    width: 16px;
    height: 16px;
    fill: var(--ey-text-muted);
}

.ey-audio-btn.playing svg {
    fill: var(--ey-level-color);
}

.ey-audio-btn .ey-gender-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--ey-bg);
    font-size: 0;
}

.ey-gender-dot.male { background: var(--ey-blue-400); }
.ey-gender-dot.female { background: #D4537E; }

/* ── Quiz card ───────────────────────────────────────── */

.ey-quiz-card {
    margin-top: 12px;
    border: 1px solid var(--ey-border);
    border-radius: var(--ey-radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--ey-bg);
}

.ey-quiz-card:hover {
    background: var(--ey-bg-alt);
    border-color: var(--ey-gray-200);
}

.ey-quiz-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.ey-quiz-card.passed {
    border-color: var(--ey-green-400);
    background: var(--ey-green-50);
}

.ey-quiz-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ey-radius-sm);
    background: var(--ey-blue-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ey-quiz-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--ey-blue-600);
}

.ey-quiz-card.passed .ey-quiz-icon {
    background: var(--ey-green-50);
}

.ey-quiz-card.passed .ey-quiz-icon svg {
    fill: var(--ey-green-600);
}

.ey-quiz-info {
    flex: 1;
}

.ey-quiz-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--ey-text);
}

.ey-quiz-meta {
    font-size: 13px;
    color: var(--ey-text-muted);
    margin: 2px 0 0;
}

.ey-quiz-arrow {
    width: 20px;
    height: 20px;
    color: var(--ey-text-hint);
    flex-shrink: 0;
}

/* ── Stats bar ───────────────────────────────────────── */

.ey-stats {
    background: var(--ey-bg-alt);
    border-radius: var(--ey-radius);
    padding: 16px;
    margin-bottom: 28px;
}

.ey-stats-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ey-text-hint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
}

.ey-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ey-stat-card {
    background: var(--ey-bg);
    border-radius: var(--ey-radius-sm);
    padding: 14px 12px;
    text-align: center;
}

.ey-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--ey-text);
    line-height: 1;
    margin: 0;
}

.ey-stat-name {
    font-size: 12px;
    color: var(--ey-text-muted);
    margin: 6px 0 0;
}

/* ── Quiz modal ──────────────────────────────────────── */

.ey-quiz-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    padding: 16px;
}

.ey-quiz-modal.open {
    display: flex;
}

.ey-quiz-modal-inner {
    background: var(--ey-bg);
    border-radius: var(--ey-radius);
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
}

.ey-quiz-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--ey-gray-50);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--ey-text-muted);
}

.ey-question {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ey-border);
}

.ey-question:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.ey-question-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--ey-text-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 6px;
}

.ey-question-text {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 14px;
    line-height: 1.5;
}

.ey-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ey-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ey-border);
    border-radius: var(--ey-radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 15px;
}

.ey-option:hover {
    background: var(--ey-bg-alt);
    border-color: var(--ey-gray-200);
}

.ey-option.selected {
    border-color: var(--ey-blue-400);
    background: var(--ey-blue-50);
}

.ey-option.correct {
    border-color: var(--ey-green-400);
    background: var(--ey-green-50);
}

.ey-option.incorrect {
    border-color: var(--ey-red-400);
    background: var(--ey-red-50);
}

.ey-option-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--ey-gray-200);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.ey-option.selected .ey-option-radio {
    border-color: var(--ey-blue-400);
    background: var(--ey-blue-400);
}

.ey-fill-blank {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--ey-border);
    border-radius: var(--ey-radius-sm);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.ey-fill-blank:focus {
    border-color: var(--ey-blue-400);
}

.ey-feedback {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--ey-radius-sm);
    font-size: 13px;
    line-height: 1.4;
}

.ey-feedback.correct {
    background: var(--ey-green-50);
    color: var(--ey-green-800);
}

.ey-feedback.incorrect {
    background: var(--ey-red-50);
    color: #791F1F;
}

.ey-feedback.hint {
    background: var(--ey-amber-50);
    color: var(--ey-amber-800);
}

/* ── Quiz submit & results ───────────────────────────── */

.ey-quiz-submit {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--ey-blue-600);
    color: #fff;
    border: none;
    border-radius: var(--ey-radius-sm);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.2s;
}

.ey-quiz-submit:hover {
    background: var(--ey-blue-800);
}

.ey-quiz-submit:disabled {
    background: var(--ey-gray-200);
    cursor: not-allowed;
}

.ey-quiz-result {
    text-align: center;
    padding: 20px 0;
}

.ey-quiz-score {
    font-size: 48px;
    font-weight: 700;
    margin: 0;
}

.ey-quiz-score.pass { color: var(--ey-green-600); }
.ey-quiz-score.fail { color: var(--ey-red-400); }

.ey-quiz-verdict {
    font-size: 18px;
    font-weight: 500;
    margin: 8px 0;
}

.ey-badge-earned {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--ey-amber-50);
    border-radius: var(--ey-radius-sm);
    color: var(--ey-amber-800);
    font-weight: 600;
    font-size: 15px;
    margin-top: 16px;
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 600px) {
    .ey-wrap { padding: 16px 12px; }
    .ey-course-header h2 { font-size: 18px; }
    .ey-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ey-stat-card { padding: 10px 8px; }
    .ey-stat-value { font-size: 20px; }
    .ey-item { padding: 12px; gap: 10px; }
    .ey-yoruba { font-size: 14px; }
    .ey-audio-btn { width: 30px; height: 30px; }
    .ey-quiz-modal-inner { padding: 20px; }
}

/* ── Badges page ─────────────────────────────────────── */

.ey-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.ey-badge-card {
    text-align: center;
    padding: 20px 12px;
    border-radius: var(--ey-radius);
    border: 1px solid var(--ey-border);
    background: var(--ey-bg);
}

.ey-badge-card.earned {
    border-color: var(--ey-level-color);
    background: var(--ey-level-bg);
}

.ey-badge-card.locked {
    opacity: 0.4;
}

.ey-badge-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--ey-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.ey-badge-card.earned .ey-badge-card-icon {
    background: var(--ey-level-color);
}

.ey-badge-card-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.ey-badge-card-date {
    font-size: 11px;
    color: var(--ey-text-hint);
    margin: 4px 0 0;
}

/* ── Course card (program overview) ──────────────────── */

.ey-program-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ey-course-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--ey-radius);
    border: 1px solid var(--ey-border);
    background: var(--ey-bg);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
}

.ey-course-card:hover {
    background: var(--ey-bg-alt);
    border-color: var(--ey-gray-200);
}

.ey-course-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.ey-course-card-progress {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.ey-course-card-info {
    flex: 1;
    min-width: 0;
}

.ey-course-card-code {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.ey-course-card-subtitle {
    font-size: 13px;
    color: var(--ey-text-muted);
    margin: 2px 0 0;
}

.ey-course-card-arrow {
    width: 20px;
    height: 20px;
    color: var(--ey-text-hint);
    flex-shrink: 0;
}

/* ── Animations ──────────────────────────────────────── */

@keyframes ey-check-pop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.ey-check.just-completed {
    animation: ey-check-pop 0.4s ease;
}

@keyframes ey-badge-glow {
    0% { box-shadow: 0 0 0 0 rgba(99, 153, 34, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(99, 153, 34, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 153, 34, 0); }
}

.ey-badge-card.just-earned {
    animation: ey-badge-glow 1.5s ease;
}
.ey-audio-btn { color: #6b6a66; }
.ey-audio-btn:hover { color: #2c2c2a; }
.ey-audio-btn.playing { color: var(--ey-level-color, #639922); }
.ey-fc-container { perspective: 800px; margin: 20px 0; }
.ey-fc-card { width:100%;min-height:200px;position:relative;cursor:pointer;transform-style:preserve-3d;transition:transform 0.5s ease;border-radius:12px; }
.ey-fc-card.flipped { transform: rotateY(180deg); }
.ey-fc-front,.ey-fc-back { position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;border-radius:12px;border:1px solid rgba(0,0,0,0.1);background:#fff; }
.ey-fc-back { transform:rotateY(180deg);background:#EAF3DE; }
.ey-fc-yoruba { font-size:24px;font-weight:700;text-align:center;margin:0 0 8px; }
.ey-fc-english { font-size:20px;font-weight:600;text-align:center;color:#27500A; }
.ey-fc-hint { font-size:13px;color:#9c9a92;margin-top:12px; }
.ey-fc-controls { display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px; }
.ey-fc-btn { padding:10px 24px;border-radius:8px;border:1px solid rgba(0,0,0,0.1);background:#fff;font-size:15px;font-weight:500;cursor:pointer; }
.ey-fc-btn:hover { background:#f8f7f5; }
.ey-fc-counter { font-size:14px;color:#6b6a66;min-width:60px;text-align:center; }
.ey-fc-audio-row { display:flex;gap:8px;margin-top:12px; }