/* ============================================================
   EXAM — Level Assessment (Cambridge / Aptis style)
============================================================ */

/* ── Layout ── */
.exam-wrap { max-width: 680px; margin: 0 auto; padding: 0 0 48px; }

/* ── Locked state ── */
.exam-locked { text-align:center; padding:80px 24px; }
.exam-locked-icon  { font-size:3rem; margin-bottom:16px; }
.exam-locked-title { font-size:1.3rem; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.exam-locked-desc  { color:var(--text-secondary); font-size:.9rem; line-height:1.7; margin-bottom:28px; }

/* ── Intro ── */
.exam-intro-hdr { text-align:center; padding:28px 0 20px; }
.exam-intro-hdr h1 { font-family:var(--font-display); font-size:1.85rem; color:var(--text-primary); margin-bottom:6px; }
.exam-intro-hdr p  { color:var(--text-secondary); font-size:.9rem; }

/* Mode cards */
.exam-mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0 18px; }
@media(max-width:560px){ .exam-mode-grid { grid-template-columns:1fr; gap:8px; } }

.exam-mode-card {
    background:var(--bg-card); border:2px solid var(--border-subtle);
    border-radius:var(--r-lg); padding:18px 12px 14px; cursor:pointer;
    text-align:center; transition:all var(--t-normal);
}
.exam-mode-card:hover { border-color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.exam-mode-card.selected { border-color:var(--accent); background:rgba(79,70,229,.07); }
.exam-mode-icon  { font-size:1.7rem; margin-bottom:7px; }
.exam-mode-name  { font-weight:700; font-size:.95rem; color:var(--text-primary); margin-bottom:3px; }
.exam-mode-qs    { font-size:.76rem; color:var(--text-secondary); font-weight:600; }
.exam-mode-time  { font-size:.71rem; color:var(--text-muted); margin-top:3px; }
.exam-mode-badge {
    display:inline-block; font-size:.62rem; font-weight:700; margin-top:7px;
    padding:2px 8px; border-radius:99px;
    background:rgba(79,70,229,.1); color:var(--accent);
}
.exam-mode-card.selected .exam-mode-badge { background:var(--accent); color:#fff; }

/* Module chips */
.exam-modules-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:0 0 22px; }
.exam-mod-chip {
    background:var(--bg-tertiary); border:1px solid var(--border-subtle);
    border-radius:99px; padding:5px 13px; font-size:.75rem; color:var(--text-muted);
    display:flex; align-items:center; gap:5px;
}
.exam-mod-chip.active {
    background:rgba(79,70,229,.09); border-color:rgba(79,70,229,.3);
    color:var(--accent); font-weight:600;
}

/* Start button */
.exam-start-btn {
    display:block; width:100%; padding:14px; border-radius:var(--r-md); border:none;
    background:var(--accent); color:#fff; font-size:.97rem; font-weight:700;
    cursor:pointer; transition:all var(--t-fast); font-family:var(--font-body);
}
.exam-start-btn:hover:not(:disabled) { opacity:.9; transform:translateY(-1px); }
.exam-start-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* History */
.exam-hist-hdr {
    font-size:.72rem; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.07em; margin:28px 0 10px;
}
.exam-hist-list  { display:flex; flex-direction:column; gap:8px; }
.exam-hist-empty { color:var(--text-muted); font-size:.82rem; text-align:center; padding:14px 0; }
.exam-hist-card  {
    background:var(--bg-card); border:1px solid var(--border-subtle);
    border-radius:var(--r-md); padding:11px 16px;
    display:flex; align-items:center; gap:12px;
}
.exam-hist-badge {
    font-size:.82rem; font-weight:800; color:#fff;
    padding:4px 10px; border-radius:var(--r-sm); flex-shrink:0; white-space:nowrap;
}
.exam-hist-info   { flex:1; }
.exam-hist-mode   { font-size:.78rem; font-weight:600; color:var(--text-primary); }
.exam-hist-meta   { font-size:.71rem; color:var(--text-muted); margin-top:1px; }
.exam-hist-score  { font-size:.85rem; font-weight:700; color:var(--text-secondary); }

/* ── Module intro ── */
.exam-modintr { text-align:center; padding:56px 20px 40px; }
.exam-modintr-icon { font-size:2.8rem; margin-bottom:12px; }
.exam-modintr-name { font-size:1.45rem; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.exam-modintr-desc { color:var(--text-secondary); font-size:.9rem; line-height:1.65; margin-bottom:28px; max-width:400px; margin-left:auto; margin-right:auto; }
.exam-modintr-meta { display:flex; gap:32px; justify-content:center; margin-bottom:32px; }
.exam-modintr-val  { font-size:1.5rem; font-weight:800; color:var(--accent); }
.exam-modintr-lbl  { font-size:.71rem; color:var(--text-muted); margin-top:2px; }
.exam-modintr-btn  {
    background:var(--accent); color:#fff; border:none;
    border-radius:var(--r-md); padding:13px 44px; font-size:.95rem;
    font-weight:700; cursor:pointer; font-family:var(--font-body);
    transition:all var(--t-fast);
}
.exam-modintr-btn:hover { opacity:.9; }

/* ── Running: header ── */
.exam-run-hdr {
    display:flex; align-items:center; gap:10px;
    padding:12px 0 10px; margin-bottom:10px;
    border-bottom:1px solid var(--border-subtle);
}
.exam-run-module  { font-weight:700; font-size:.84rem; color:var(--accent); flex:1; }
.exam-run-counter { font-size:.78rem; color:var(--text-muted); white-space:nowrap; }

/* Timer */
.exam-timer {
    font-size:.9rem; font-weight:700; font-family:monospace;
    padding:4px 10px; border-radius:var(--r-sm); min-width:58px; text-align:center;
    background:var(--bg-tertiary); color:var(--text-primary);
    transition:background var(--t-normal), color var(--t-normal);
}
.exam-timer.warning { background:rgba(245,158,11,.15); color:#D97706; }
.exam-timer.danger  {
    background:rgba(239,68,68,.15); color:#DC2626;
    animation:examTimerPulse 1s ease infinite;
}
@keyframes examTimerPulse { 0%,100%{opacity:1} 50%{opacity:.55} }

/* Progress */
.exam-prog-bar  { height:4px; background:var(--bg-hover); border-radius:99px; margin-bottom:24px; overflow:hidden; }
.exam-prog-fill { height:100%; background:var(--accent); border-radius:99px; transition:width .4s ease; }

/* Question card */
.exam-q-card {
    background:var(--bg-card); border:1px solid var(--border-subtle);
    border-radius:var(--r-xl); padding:26px 26px 20px;
    margin-bottom:14px; box-shadow:var(--shadow-sm);
}
.exam-q-badge {
    display:inline-block; font-size:.63rem; font-weight:700; letter-spacing:.04em;
    padding:2px 8px; border-radius:99px; margin-bottom:13px;
    background:var(--bg-hover); color:var(--text-muted);
}
.exam-q-text {
    font-size:1.02rem; font-weight:600; color:var(--text-primary);
    line-height:1.65; margin-bottom:20px;
}

/* Reading passage */
.exam-q-passage {
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-size: .87rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 16px;
    font-style: italic;
}

/* Options */
.exam-options { display:flex; flex-direction:column; gap:9px; }
.exam-option {
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:var(--r-md);
    border:1.5px solid var(--border-subtle); background:var(--bg-secondary);
    cursor:pointer; transition:all var(--t-fast); text-align:left;
    font-family:var(--font-body); font-size:.9rem; color:var(--text-primary);
    width:100%;
}
.exam-option:hover:not(:disabled) { border-color:var(--accent); background:rgba(79,70,229,.05); }
.exam-option.selected { border-color:var(--accent); background:rgba(79,70,229,.09); font-weight:600; }
.exam-option:disabled { cursor:default; }
.exam-opt-letter {
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
    background:var(--bg-hover); color:var(--text-muted);
    font-size:.73rem; font-weight:700; display:flex; align-items:center; justify-content:center;
    transition:all var(--t-fast);
}
.exam-option.selected .exam-opt-letter { background:var(--accent); color:#fff; }

/* Nav */
.exam-nav { display:flex; gap:10px; margin-top:6px; }
.exam-nav-prev {
    padding:10px 18px; border-radius:var(--r-md); border:1px solid var(--border-default);
    background:var(--bg-card); color:var(--text-secondary); cursor:pointer;
    font-family:var(--font-body); font-size:.86rem; font-weight:500;
    transition:all var(--t-fast); white-space:nowrap;
}
.exam-nav-prev:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.exam-nav-prev:disabled { opacity:.4; cursor:not-allowed; }
.exam-nav-next {
    flex:1; padding:11px; border-radius:var(--r-md); border:none;
    background:var(--accent); color:#fff; cursor:pointer;
    font-family:var(--font-body); font-size:.92rem; font-weight:700;
    transition:all var(--t-fast);
}
.exam-nav-next:hover { opacity:.9; }
.exam-nav-finish { background:var(--accent-cta); }

/* Question dots */
.exam-q-dots { display:flex; flex-wrap:wrap; gap:5px; margin-top:14px; justify-content:center; }
.exam-q-dot {
    width:9px; height:9px; border-radius:50%;
    background:var(--bg-hover); border:1.5px solid var(--border-subtle);
    cursor:pointer; transition:all var(--t-fast); flex-shrink:0;
}
.exam-q-dot.answered { background:var(--accent); border-color:var(--accent); }
.exam-q-dot.current  { border-color:var(--accent); box-shadow:0 0 0 2px rgba(79,70,229,.3); }

/* ── Module done ── */
.exam-mod-done { text-align:center; padding:52px 20px; }
.exam-mod-done-icon  { font-size:2.8rem; margin-bottom:12px; }
.exam-mod-done-title { font-size:1.3rem; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.exam-mod-done-pct   { font-size:3rem; font-weight:900; color:var(--accent); margin:16px 0 4px; line-height:1; }
.exam-mod-done-frac  { font-size:.82rem; color:var(--text-muted); margin-bottom:8px; }
.exam-mod-done-sub   { color:var(--text-secondary); font-size:.9rem; margin-bottom:32px; line-height:1.6; }
.exam-mod-done-btn   {
    background:var(--accent); color:#fff; border:none;
    border-radius:var(--r-md); padding:13px 44px; font-size:.95rem;
    font-weight:700; cursor:pointer; font-family:var(--font-body); transition:all var(--t-fast);
}
.exam-mod-done-btn:hover { opacity:.9; }

/* ── Results ── */
.exam-results-hdr { text-align:center; padding:28px 0 20px; }
.exam-level-circle {
    width:100px; height:100px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:2rem; font-weight:900; color:#fff; margin-bottom:14px;
    box-shadow:0 8px 32px rgba(0,0,0,.2);
}
.exam-results-level { font-size:1.15rem; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.exam-results-sub   { font-size:.85rem; color:var(--text-secondary); }
.exam-results-total {
    font-size:1.4rem; font-weight:800;
    margin-top:6px; color:var(--text-primary);
}

/* Score cards grid */
.exam-scores-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0; }
@media(max-width:460px){ .exam-scores-grid { grid-template-columns:1fr; } }
.exam-score-card {
    background:var(--bg-card); border:1px solid var(--border-subtle);
    border-radius:var(--r-lg); padding:15px 16px;
}
.exam-score-top  { display:flex; align-items:center; gap:7px; margin-bottom:10px; }
.exam-score-icon { font-size:1rem; }
.exam-score-name { font-size:.8rem; font-weight:600; color:var(--text-secondary); flex:1; }
.exam-score-pct  { font-size:1.45rem; font-weight:800; color:var(--text-primary); }
.exam-score-bar-bg   { height:5px; background:var(--bg-hover); border-radius:99px; overflow:hidden; }
.exam-score-bar-fill { height:100%; border-radius:99px; transition:width .9s ease; }
.exam-score-cefr { font-size:.71rem; color:var(--text-muted); margin-top:5px; }

/* Result action buttons */
.exam-results-btns { display:flex; flex-direction:column; gap:9px; margin-top:24px; }
.exam-btn-save {
    padding:13px; border-radius:var(--r-md); border:none;
    background:var(--accent); color:#fff; font-size:.95rem;
    font-weight:700; cursor:pointer; font-family:var(--font-body); transition:all var(--t-fast);
}
.exam-btn-save:hover { opacity:.9; }
.exam-btn-save:disabled { opacity:.6; cursor:default; }
.exam-btn-pdf {
    padding:13px; border-radius:var(--r-md); border:none;
    background:var(--accent-cta); color:#fff; font-size:.95rem;
    font-weight:700; cursor:pointer; font-family:var(--font-body); transition:all var(--t-fast);
}
.exam-btn-pdf:hover { opacity:.9; }
.exam-btn-ghost {
    padding:11px; border-radius:var(--r-md); border:1px solid var(--border-default);
    background:var(--bg-card); color:var(--text-secondary); font-size:.9rem;
    font-weight:500; cursor:pointer; font-family:var(--font-body); transition:all var(--t-fast);
}
.exam-btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

/* ── Writing module ── */
.exam-writing-tip {
    background: rgba(79,70,229,.07);
    border: 1px solid rgba(79,70,229,.18);
    border-radius: var(--r-sm);
    padding: 9px 13px;
    font-size: .8rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 12px;
}
.exam-writing-area {
    width: 100%;
    min-height: 140px;
    padding: 12px 14px;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: .9rem;
    line-height: 1.7;
    resize: vertical;
    transition: border-color var(--t-fast);
    box-sizing: border-box;
}
.exam-writing-area:focus {
    outline: none;
    border-color: var(--accent);
}
.exam-writing-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 7px;
    font-size: .73rem;
    color: var(--text-muted);
}
.exam-writing-wc { font-weight: 600; transition: color var(--t-fast); }
.exam-wc-ok      { color: var(--accent); }

/* ── Speaking module ── */
.exam-speak-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--r-xl);
    padding: 22px 20px 18px;
    display: flex; flex-direction: column; gap: 14px;
}
.exam-speak-card.speak-active { border-color: #3B82F6; background: rgba(59,130,246,.04); }
.exam-speak-card.rate          { border-color: rgba(79,70,229,.3); }
.exam-speak-card.done          { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.04); }

.exam-speak-prompt {
    font-size: 1rem; font-weight: 600; color: var(--text-primary);
    line-height: 1.6;
}
.exam-speak-tip {
    font-size: .78rem; color: var(--text-secondary);
    background: rgba(79,70,229,.06); border: 1px solid rgba(79,70,229,.15);
    border-radius: var(--r-sm); padding: 8px 12px; line-height: 1.55;
}

/* Prep phase */
.exam-speak-prep-row  { display: flex; align-items: center; justify-content: space-between; }
.exam-speak-prep-label { font-size: .76rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.exam-speak-prep-timer {
    font-family: monospace; font-size: 1.5rem; font-weight: 800;
    color: var(--accent); letter-spacing: .05em;
}

/* Speak phase */
.exam-speak-mic {
    font-size: 2.6rem; text-align: center;
    animation: speakPulse 1.4s ease-in-out infinite;
}
@keyframes speakPulse { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.18); opacity:.75; } }
.exam-speak-speak-timer {
    font-family: monospace; font-size: 2rem; font-weight: 900;
    color: #3B82F6; text-align: center; letter-spacing: .05em;
}
.exam-speak-timer-label { font-size: .72rem; color: var(--text-muted); text-align: center; margin-top: -8px; }

/* Buttons */
.exam-speak-btn {
    padding: 11px 24px; border-radius: var(--r-md); border: none;
    background: var(--accent); color: #fff; font-size: .92rem; font-weight: 700;
    cursor: pointer; font-family: var(--font-body); transition: all var(--t-fast);
    text-align: center;
}
.exam-speak-btn:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.exam-speak-btn.disabled, .exam-speak-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.exam-speak-btn-done { background: #10B981; }

/* Rate phase */
.exam-speak-rate-intro { font-size: .82rem; color: var(--text-secondary); font-style: italic; }
.exam-speak-criterion  { display: flex; flex-direction: column; gap: 7px; }
.exam-speak-crit-name  { font-size: .83rem; font-weight: 700; color: var(--text-primary); }
.exam-speak-crit-desc  { font-weight: 400; color: var(--text-muted); font-size: .76rem; }
.exam-speak-crit-opts  { display: flex; gap: 8px; }
.exam-speak-crit-btn {
    flex: 1; padding: 8px 4px; border-radius: var(--r-md);
    border: 1.5px solid var(--border-subtle); background: var(--bg-secondary);
    font-size: .8rem; color: var(--text-secondary); cursor: pointer;
    transition: all var(--t-fast); font-family: var(--font-body); text-align: center;
}
.exam-speak-crit-btn:hover    { border-color: var(--accent); }
.exam-speak-crit-btn.selected { border-color: var(--accent); background: rgba(79,70,229,.1); color: var(--accent); font-weight: 700; }

/* Done phase */
.exam-speak-done-badge {
    text-align: center; font-size: .95rem; font-weight: 700;
    color: #059669; background: rgba(16,185,129,.1);
    border: 1px solid rgba(16,185,129,.3); border-radius: 99px;
    padding: 7px 18px;
}
.exam-speak-done-grid { display: flex; flex-direction: column; gap: 8px; }
.exam-speak-done-row  { display: flex; align-items: center; justify-content: space-between; }
.exam-speak-done-lbl  { font-size: .83rem; color: var(--text-secondary); font-weight: 600; }
.exam-speak-done-stars { font-size: .85rem; }

/* Saved state */
.exam-saved-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.3);
    color:#059669; border-radius:99px; padding:5px 14px;
    font-size:.8rem; font-weight:600; margin-top:6px;
}