*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #0f172a; --surface: #1e293b; --surface2: #263045;
      --border: rgba(148,163,184,0.15); --text: #e2e8f0; --muted: #94a3b8;
      --accent: #6366f1; --accent2: #818cf8; --green: #22c55e; --red: #ef4444;
      --yellow: #f59e0b; --radius: 14px;
    }
    body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; min-height: 100vh; }

    /* ── TOP BAR ── */
    .top-bar { background: rgba(30,41,59,0.95); border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); }
    .top-bar img { height: 32px; }
    .top-bar-right { display: flex; gap: 10px; align-items: center; }
    .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: all .2s; }
    .btn-ghost:hover { border-color: var(--accent2); color: var(--accent2); }

    /* ── SCREENS ── */
    .screen { display: none; }
    .screen.active { display: block; }
    .page-center { max-width: 820px; margin: 0 auto; padding: 32px 20px; }

    /* ── LOADING ── */
    #screen-loading .page-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 0; }
    .spinner { width: 56px; height: 56px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; margin-bottom: 28px; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loading-headline { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 10px; text-align: center; }
    .loading-msg { color: var(--muted); font-size: 14px; text-align: center; min-height: 22px; transition: opacity .3s ease; }
    .loading-msg.fade { opacity: 0; }
    .loading-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; width: 100%; max-width: 340px; }
    .loading-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
    .loading-step.visible { opacity: 1; transform: translateY(0); }
    .loading-step.done { color: var(--green); }
    .loading-step.done .step-dot { background: var(--green); }
    .loading-step.active { color: var(--accent2); }
    .loading-step.active .step-dot { background: var(--accent); animation: pulse-dot .9s ease-in-out infinite; }
    .step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; transition: background .3s; }
    @keyframes pulse-dot { 0%,100% { transform: scale(1); opacity:1; } 50% { transform: scale(1.4); opacity:.6; } }

    /* ── ERROR ── */
    #screen-error .page-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 16px; text-align: center; }
    .error-icon { font-size: 48px; color: var(--red); }
    .error-title { font-size: 20px; font-weight: 700; }
    .error-msg { color: var(--muted); }

    /* ── OVERVIEW ── */
    .overview-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; }
    .format-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(99,102,241,.15); border: 1px solid rgba(129,140,248,.3); color: var(--accent2); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; }
    .overview-title { font-size: 2rem; font-weight: 800; margin-bottom: 10px; }
    .overview-desc { color: var(--muted); line-height: 1.7; margin-bottom: 28px; }
    .sections-preview { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
    .section-preview-item { display: flex; align-items: center; gap: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; }
    .section-preview-num { width: 28px; height: 28px; border-radius: 50%; background: rgba(99,102,241,.2); color: var(--accent2); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .section-preview-info { flex: 1; }
    .section-preview-name { font-size: 14px; font-weight: 600; }
    .section-preview-type { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .section-preview-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
    .overview-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
    .skill-tag { background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--muted); }
    .skills-heading { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }

    /* ── SECTION INTRO ── */
    .section-intro-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 48px 40px; text-align: center; }
    .section-part-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--accent2); margin-bottom: 12px; }
    .section-intro-title { font-size: 1.75rem; font-weight: 800; margin-bottom: 14px; }
    .section-intro-instruction { color: var(--muted); line-height: 1.7; font-size: 15px; margin-bottom: 28px; max-width: 560px; margin-left: auto; margin-right: auto; }
    .section-meta-chips { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
    .meta-chip { background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
    .meta-chip i { color: var(--accent2); font-size: 12px; }
    .section-progress-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 32px; }
    .s-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: all .3s; }
    .s-dot.done { background: var(--green); }
    .s-dot.current { background: var(--accent); width: 24px; border-radius: 4px; }

    /* ── EXERCISE SCREEN ── */
    .ex-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
    .ex-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent2); }
    .ex-progress-bar-wrap { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
    .ex-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 2px; transition: width .4s ease; }
    .ex-counter { font-size: 13px; color: var(--muted); white-space: nowrap; }
    .ex-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; margin-bottom: 20px; }

    /* vocabulary */
    .vocab-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
    .vocab-word { font-size: 3.5rem; font-weight: 800; text-align: center; color: var(--text); margin: 24px 0; letter-spacing: .02em; }
    .vocab-hint { font-size: 13px; color: var(--muted); text-align: center; margin-bottom: 20px; }

    /* read_aloud */
    .passage-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
    .passage-text { font-size: 1.05rem; line-height: 1.85; color: var(--text); background: var(--surface2); border-radius: 10px; padding: 24px; border-left: 3px solid var(--accent); }
    .passage-tip { font-size: 12px; color: var(--muted); margin-top: 12px; }

    /* repeat_sentence */
    .repeat-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
    .sentence-display { font-size: 1.2rem; line-height: 1.7; color: var(--text); background: var(--surface2); border-radius: 10px; padding: 24px; text-align: center; font-style: italic; margin-bottom: 20px; }
    .tts-step { display: flex; gap: 12px; align-items: center; justify-content: center; margin-bottom: 20px; }
    .tts-step-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
    .tts-step-item.active { color: var(--accent2); font-weight: 600; }
    .tts-step-item.done { color: var(--green); }
    .tts-arrow { color: var(--border); font-size: 10px; }
    .btn-play-tts { background: linear-gradient(135deg, #6366f1, #818cf8); color: white; border: none; border-radius: 10px; padding: 12px 24px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: opacity .2s; }
    .btn-play-tts:hover { opacity: .9; }
    .btn-play-tts:disabled { opacity: .45; cursor: not-allowed; }

    /* qa_verbal */
    .qa-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
    .qa-question { font-size: 1.15rem; line-height: 1.7; background: var(--surface2); border-radius: 10px; padding: 24px; border-left: 3px solid var(--yellow); }
    .qa-timer-note { font-size: 13px; color: var(--muted); margin-top: 10px; display: flex; align-items: center; gap: 6px; }

    /* topic_speaking */
    .topic-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
    .topic-instruction { font-size: 14px; color: var(--muted); margin-bottom: 20px; }
    .topic-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
    .topic-card { background: var(--surface2); border: 2px solid var(--border); border-radius: 10px; padding: 16px; cursor: pointer; transition: all .2s; font-size: 14px; font-weight: 500; color: var(--text); text-align: left; }
    .topic-card:hover { border-color: var(--accent2); background: rgba(99,102,241,.1); }
    .topic-card.selected { border-color: var(--accent); background: rgba(99,102,241,.15); color: var(--accent2); }
    .topic-selected-display { background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.3); border-radius: 10px; padding: 14px 18px; font-size: 14px; font-weight: 600; color: var(--accent2); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
    .topic-selected-display i { font-size: 16px; }

    /* mcq */
    .mcq-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
    .mcq-question { font-size: 1.1rem; line-height: 1.7; margin-bottom: 24px; font-weight: 500; }
    .mcq-options { display: flex; flex-direction: column; gap: 10px; }
    .mcq-option { background: var(--surface2); border: 2px solid var(--border); border-radius: 10px; padding: 14px 18px; text-align: left; cursor: pointer; font-size: 14px; color: var(--text); transition: all .2s; display: flex; align-items: center; gap: 12px; }
    .mcq-option:hover { border-color: var(--accent2); background: rgba(99,102,241,.08); }
    .mcq-option.selected { border-color: var(--accent); background: rgba(99,102,241,.15); color: var(--accent2); }
    .mcq-option.correct { border-color: var(--green); background: rgba(34,197,94,.12); color: #86efac; }
    .mcq-option.wrong { border-color: var(--red); background: rgba(239,68,68,.1); color: #fca5a5; }
    .mcq-option-letter { width: 28px; height: 28px; border-radius: 6px; background: var(--border); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .mcq-option.selected .mcq-option-letter { background: var(--accent); color: white; }

    /* code */
    .code-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
    .code-problem { background: var(--surface2); border-radius: 10px; padding: 20px; font-size: 13.5px; line-height: 1.75; color: var(--text); margin-bottom: 16px; white-space: pre-wrap; border-left: 3px solid var(--accent); }
    .code-editor-wrapper { position: relative; }
    .code-lang-badge { position: absolute; top: 10px; right: 12px; background: rgba(99,102,241,.2); color: var(--accent2); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
    .code-editor { width: 100%; min-height: 260px; background: #0a0f1e; border: 1px solid var(--border); border-radius: 10px; padding: 20px; font-family: 'Fira Code', 'Consolas', monospace; font-size: 13.5px; color: #e2e8f0; resize: vertical; line-height: 1.65; outline: none; }
    .code-editor:focus { border-color: var(--accent); }

    /* text_response */
    .text-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
    .text-format-hint { background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.2); border-radius: 8px; padding: 10px 14px; font-size: 12px; color: var(--accent2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
    .text-prompt { background: var(--surface2); border-radius: 10px; padding: 20px; font-size: 14px; line-height: 1.75; margin-bottom: 16px; border-left: 3px solid var(--yellow); }
    .text-answer { width: 100%; min-height: 200px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 16px; font-size: 14px; color: var(--text); resize: vertical; line-height: 1.65; outline: none; font-family: inherit; }
    .text-answer:focus { border-color: var(--accent); }
    .text-answer::placeholder { color: var(--muted); }

    /* voice_scenario */
    .scenario-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
    .scenario-context { display: inline-flex; align-items: center; gap: 6px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: #fcd34d; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; margin-bottom: 16px; }
    .scenario-text { background: var(--surface2); border-radius: 10px; padding: 24px; font-size: 14.5px; line-height: 1.8; border-left: 3px solid var(--yellow); margin-bottom: 14px; }
    .scenario-respond-tip { font-size: 13px; color: var(--muted); margin-bottom: 20px; display: flex; align-items: center; gap: 6px; }

    /* ── VOICE CONTROLS ── */
    .voice-controls { margin-top: 24px; }
    .recording-status { display: flex; align-items: center; justify-content: center; gap: 10px; height: 36px; margin-bottom: 14px; }
    .rec-indicator { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: pulse 1s ease-in-out infinite; }
    @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.3); } }
    .rec-timer { font-size: 18px; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
    .rec-done-text { font-size: 14px; color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 6px; }
    .record-btns { display: flex; justify-content: center; gap: 12px; }
    .btn-record { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; border: none; border-radius: 50px; padding: 14px 28px; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all .2s; box-shadow: 0 4px 20px rgba(239,68,68,.3); }
    .btn-record:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(239,68,68,.45); }
    .btn-stop { background: #374151; color: var(--text); border: 1px solid var(--border); border-radius: 50px; padding: 14px 28px; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 10px; }
    .btn-rerecord { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 8px 16px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .2s; }
    .btn-rerecord:hover { border-color: var(--accent2); color: var(--accent2); }
    .playback-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
    audio { border-radius: 8px; height: 36px; }
    .mic-error { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); border-radius: 8px; padding: 12px 16px; font-size: 13px; color: #fca5a5; text-align: center; }

    /* ── EXERCISE NAV ── */
    .ex-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
    .btn-back-ex { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 10px 18px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: all .2s; }
    .btn-back-ex:hover { border-color: var(--accent2); color: var(--accent2); }
    .btn-next { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: white; border: none; border-radius: 10px; padding: 12px 28px; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all .2s; }
    .btn-next:hover { opacity: .9; transform: translateY(-1px); }
    .btn-next:disabled { opacity: .35; cursor: not-allowed; transform: none; }
    .btn-submit-ex { background: linear-gradient(135deg, var(--green), #16a34a); }

    /* ── SECTION COMPLETE ── */
    #screen-section-complete .page-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 80px; }
    .section-done-icon { font-size: 56px; margin-bottom: 20px; }
    .section-done-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
    .section-done-sub { color: var(--muted); margin-bottom: 36px; }

    /* ── LOCKED SCREEN ── */
    #screen-locked .page-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 0; text-align: center; }
    .locked-icon { font-size: 64px; margin-bottom: 20px; }
    .locked-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
    .locked-sub { color: var(--muted); max-width: 460px; line-height: 1.7; margin-bottom: 28px; }
    .locked-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: #fca5a5; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600; margin-bottom: 28px; }
    .locked-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

    /* ── COMPLETE SCREEN ── */
    #screen-complete .page-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 80px; }
    .complete-icon { font-size: 72px; margin-bottom: 24px; }
    .complete-title { font-size: 2rem; font-weight: 800; margin-bottom: 12px; }
    .complete-sub { color: var(--muted); font-size: 15px; margin-bottom: 32px; max-width: 480px; }
    .complete-stats { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
    .stat-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 28px; min-width: 130px; }
    .stat-num { font-size: 2rem; font-weight: 800; color: var(--accent2); }
    .stat-lbl { font-size: 12px; color: var(--muted); margin-top: 4px; }
    .complete-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

    /* ── COMPLETE SCREEN: AI ANALYSIS BANNER ── */
    .analysis-pending-banner { display: flex; align-items: center; gap: 12px; background: rgba(99,102,241,.08); border: 1px solid rgba(129,140,248,.25); border-radius: 12px; padding: 16px 20px; max-width: 480px; font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 24px; }
    .analysis-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent2); flex-shrink: 0; animation: pulse 1.4s ease-in-out infinite; }
    .one-time-notice { display: flex; align-items: center; gap: 8px; background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.25); border-radius: 10px; padding: 12px 18px; font-size: 13px; color: #fcd34d; max-width: 480px; margin-bottom: 24px; line-height: 1.5; }
    .one-time-notice i { flex-shrink: 0; }

    /* ── SHARED BUTTONS ── */
    .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: white; border: none; border-radius: 10px; padding: 14px 28px; font-size: 15px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all .2s; }
    .btn-primary:hover { opacity: .9; transform: translateY(-1px); }
    .btn-secondary { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: 14px 24px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all .2s; }
    .btn-secondary:hover { border-color: var(--accent2); color: var(--accent2); }

    @media (max-width: 600px) {
      .topic-cards { grid-template-columns: 1fr; }
      .vocab-word { font-size: 2.4rem; }
      .complete-stats { gap: 12px; }
      .overview-title { font-size: 1.5rem; }
    }