*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --blue: #1a237e;
      --blue-light: #3949ab;
      --orange: #ff6f00;
      --orange-light: #ffa000;
      --white: #ffffff;
      --surface: #f5f6fa;
      --border: #e0e0e0;
      --text: #212121;
      --text-sec: #616161;
      --green: #2e7d32;
      --green-bg: #e8f5e9;
      --blue-bg: #e3f2fd;
      --red: #c62828;
      --score-red: #f44336;
      --score-orange: #ff9800;
      --score-green: #4caf50;
      --shadow: 0 2px 12px rgba(0,0,0,0.08);
      --radius: 16px;
      --nav-h: 68px;
    }

    html, body { height: 100%; background: var(--surface); font-family: 'Inter', sans-serif; color: var(--text); -webkit-tap-highlight-color: transparent; }

    #app { display: flex; flex-direction: column; min-height: 100%; max-width: 480px; margin: 0 auto; background: var(--white); position: relative; }

    /* ── NAV ─────────────────────────────── */
    #bottom-nav {
      position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 480px;
      background: var(--white); border-top: 1px solid var(--border);
      display: flex; height: var(--nav-h);
      padding-bottom: env(safe-area-inset-bottom);
      z-index: 100; box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    }
    .nav-item {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      border: none; background: none; cursor: pointer; padding: 8px 4px;
      color: var(--text-sec); font-size: 11px; font-weight: 500; gap: 4px;
      transition: color 0.2s; min-height: 48px;
    }
    .nav-item .nav-icon { font-size: 22px; line-height: 1; }
    .nav-item.active { color: var(--blue); }
    .nav-item.active .nav-icon { filter: drop-shadow(0 0 4px rgba(26,35,126,0.3)); }

    /* ── PANELS ──────────────────────────── */
    .tab-panel {
      display: none; flex-direction: column; padding: 0 0 calc(var(--nav-h) + 16px);
      min-height: calc(100vh - var(--nav-h)); animation: fadeIn 0.2s ease;
    }
    .tab-panel.active { display: flex; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

    /* ── HEADER ──────────────────────────── */
    .panel-header {
      background: var(--blue); color: var(--white);
      padding: 20px 20px 24px; position: sticky; top: 0; z-index: 50;
    }
    .panel-header h1 { font-size: 20px; font-weight: 700; }
    .panel-header p { font-size: 13px; opacity: 0.8; margin-top: 2px; }

    /* ── PRIMARY BUTTON ─────────────────── */
    .primary-btn {
      background: var(--blue); color: #fff; border: none; border-radius: 14px;
      font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
      box-shadow: 0 4px 14px rgba(26,35,126,0.25);
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .primary-btn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(26,35,126,0.2); }

    /* ── PRACTICE TAB ────────────────────── */
    #practice-record-section {
      display: flex; flex-direction: column; align-items: center;
      padding: 32px 20px 20px; gap: 20px;
    }
    .record-hint { font-size: 15px; color: var(--text-sec); font-weight: 500; }

    #record-btn {
      width: 96px; height: 96px; border-radius: 50%;
      background: var(--blue); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 20px rgba(26,35,126,0.35);
      transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
      position: relative;
    }
    #record-btn:active { transform: scale(0.94); }
    #record-btn.recording {
      background: #c62828;
      animation: pulse 1.4s ease-in-out infinite;
      box-shadow: 0 4px 20px rgba(198,40,40,0.45);
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 4px 20px rgba(198,40,40,0.45); }
      50% { box-shadow: 0 4px 32px rgba(198,40,40,0.7), 0 0 0 12px rgba(198,40,40,0.12); }
    }
    #record-btn .btn-icon { font-size: 40px; }
    #record-timer {
      position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
      font-size: 13px; font-weight: 600; color: #c62828; display: none;
    }

    #waveform-wrap { width: 100%; background: var(--blue); border-radius: var(--radius); overflow: hidden; height: 72px; display: none; }
    #waveform-canvas { width: 100%; height: 72px; display: block; }

    /* ── LOADING ──────────────────────────── */
    #loading-state { display: none; flex-direction: column; align-items: center; gap: 16px; padding: 40px 20px; }
    .spinner { width: 44px; height: 44px; border: 4px solid #e0e0e0; border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    #loading-text { font-size: 15px; color: var(--text-sec); font-weight: 500; }

    /* ── TRANSCRIPT ───────────────────────── */
    #transcript-section { display: none; padding: 0 20px; }
    .transcript-card {
      background: var(--surface); border-radius: var(--radius);
      padding: 16px; border-left: 4px solid var(--blue);
    }
    .transcript-label { font-size: 11px; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
    .transcript-text { font-size: 15px; line-height: 1.6; color: var(--text); }

    /* ── FEEDBACK CARD ────────────────────── */
    #feedback-section { display: none; padding: 0 20px 8px; }
    .feedback-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }

    .score-header {
      background: var(--blue); padding: 20px;
      display: flex; align-items: center; gap: 16px;
    }
    .score-circle {
      width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.5);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; font-weight: 700; color: var(--white); flex-shrink: 0;
    }
    .score-label { color: var(--white); }
    .score-label h3 { font-size: 18px; font-weight: 700; }
    .score-label p { font-size: 13px; opacity: 0.8; margin-top: 2px; }

    .feedback-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

    .feedback-section-block { display: flex; flex-direction: column; gap: 8px; }
    .section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-sec); }

    .correction-row { display: flex; flex-direction: column; gap: 6px; }
    .correction-item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; }
    .correction-item .badge { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

    .mode-btn {
      flex: 1; padding: 10px 0; border-radius: 22px; font-size: 14px; font-weight: 600;
      border: 1.5px solid var(--border); background: var(--card); color: var(--text-sec);
      cursor: pointer; transition: all 0.18s;
    }
    .mode-btn-active { background: var(--blue); color: #fff; border-color: var(--blue); }

    .fillers-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
    .filler-badge {
      background: #fff3e0; color: #e65100; padding: 4px 12px;
      border-radius: 20px; font-size: 13px; font-weight: 600;
    }
    .no-fillers { font-size: 14px; color: var(--text-sec); font-style: italic; }

    .green-box { background: var(--green-bg); border-radius: 12px; padding: 14px 16px; border-left: 4px solid var(--green); }
    .blue-box { background: var(--blue-bg); border-radius: 12px; padding: 14px 16px; border-left: 4px solid var(--blue-light); }
    .box-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
    .green-box .box-label { color: var(--green); }
    .blue-box .box-label { color: var(--blue-light); }
    .box-text { font-size: 14px; line-height: 1.6; }

    .encouragement { font-style: italic; font-size: 14px; color: var(--text-sec); line-height: 1.6; text-align: center; padding: 4px 0; }

    #record-again-btn {
      margin: 16px 20px 0; background: var(--blue); color: var(--white);
      border: none; border-radius: 12px; padding: 16px;
      font-size: 16px; font-weight: 600; cursor: pointer; width: calc(100% - 40px);
      transition: background 0.2s; min-height: 52px;
    }
    #record-again-btn:active { background: var(--blue-light); }

    /* ── MIC PERMISSION DIALOG ───────────── */
    #mic-dialog {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
      z-index: 200; align-items: center; justify-content: center; padding: 24px;
    }
    .dialog-box {
      background: var(--white); border-radius: 20px; padding: 28px 24px;
      max-width: 340px; width: 100%; text-align: center;
    }
    .dialog-icon { font-size: 48px; margin-bottom: 16px; }
    .dialog-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
    .dialog-body { font-size: 14px; color: var(--text-sec); line-height: 1.6; margin-bottom: 24px; }
    .dialog-buttons { display: flex; gap: 12px; }
    .dialog-buttons button {
      flex: 1; padding: 14px; border-radius: 12px; font-size: 15px;
      font-weight: 600; border: none; cursor: pointer; min-height: 52px;
    }
    #dialog-allow { background: var(--blue); color: var(--white); }
    #dialog-deny { background: var(--surface); color: var(--text); }

    /* ── HISTORY TAB ─────────────────────── */
    #tab-history { padding-bottom: calc(var(--nav-h) + 16px); }
    .session-list { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
    .session-card {
      background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
      overflow: hidden; cursor: pointer; transition: transform 0.15s;
    }
    .session-card:active { transform: scale(0.98); }
    .session-card-header { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
    .score-badge {
      width: 44px; height: 44px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700; color: var(--white); flex-shrink: 0;
    }
    .session-meta { flex: 1; min-width: 0; }
    .session-date { font-size: 12px; color: var(--text-sec); font-weight: 500; }
    .session-excerpt { font-size: 14px; color: var(--text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .expand-icon { color: var(--text-sec); font-size: 18px; transition: transform 0.2s; }
    .session-card.expanded .expand-icon { transform: rotate(180deg); }
    .session-detail { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border); margin-top: 0; }
    .session-card.expanded .session-detail { display: block; }
    .detail-row { margin-top: 12px; }
    .detail-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-sec); margin-bottom: 4px; }
    .detail-val { font-size: 14px; line-height: 1.5; }
    .empty-state { text-align: center; padding: 60px 24px; color: var(--text-sec); }
    .empty-icon { font-size: 64px; margin-bottom: 16px; }
    .empty-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
    .empty-body { font-size: 14px; line-height: 1.6; }

    /* ── PROGRESS TAB ────────────────────── */
    .progress-content { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
    .chart-wrap { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
    .chart-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
    .chart-container { position: relative; height: 200px; }

    .stats-row { display: flex; gap: 12px; }
    .stat-card {
      flex: 1; background: var(--white); border-radius: var(--radius);
      box-shadow: var(--shadow); padding: 16px; text-align: center;
    }
    .stat-value { font-size: 28px; font-weight: 700; color: var(--blue); }
    .stat-label { font-size: 12px; color: var(--text-sec); font-weight: 500; margin-top: 4px; }

    .issues-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
    .issues-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
    .issue-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .issue-item:last-child { border-bottom: none; }
    .issue-num { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: var(--white); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .issue-text { font-size: 14px; line-height: 1.4; }

    .motivation-card { background: var(--blue); color: var(--white); border-radius: var(--radius); padding: 20px; text-align: center; }
    .motivation-icon { font-size: 32px; margin-bottom: 10px; }
    .motivation-text { font-size: 15px; line-height: 1.6; }

    /* ── GRAMMAR EXERCISES ──────────────── */
    #grammar-exercises-section { display: none; }
    .grammar-exercises-header { font-size: 16px; font-weight: 700; color: var(--blue); margin: 4px 20px 12px; }
    .grammar-ex-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 20px 12px; overflow: hidden; }
    .grammar-ex-front { padding: 18px; cursor: pointer; }
    .grammar-ex-wrong { font-size: 15px; color: #c62828; margin-bottom: 6px; line-height: 1.5; }
    .grammar-ex-tap-hint { font-size: 12px; color: var(--text-sec); }
    .grammar-ex-back { display: none; padding: 18px; border-top: 1px solid var(--border); animation: cardReveal 0.2s ease; }
    .grammar-ex-card.revealed .grammar-ex-front { background: #fafafa; }
    .grammar-ex-card.revealed .grammar-ex-back { display: block; }
    .grammar-ex-correct { font-size: 15px; color: #2e7d32; font-weight: 600; margin-bottom: 8px; line-height: 1.5; }
    .grammar-ex-hint { font-size: 13px; color: var(--text-sec); margin-bottom: 14px; line-height: 1.5; font-style: italic; }
    .grammar-ex-btns { display: flex; gap: 10px; }
    .grammar-ex-btn { flex: 1; padding: 11px; border-radius: 10px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .grammar-ex-got { background: #e8f5e9; color: #2e7d32; }
    .grammar-ex-practice { background: #fbe9e7; color: #bf360c; }

    /* ── WEAKNESS PROFILE ───────────────── */
    .weakness-section { padding: 0 20px 20px; }
    .weakness-section-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
    .weakness-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 10px; }
    .weakness-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .weakness-sound-name { font-size: 15px; font-weight: 700; color: var(--text); }
    .trend-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
    .trend-improving { background: #e8f5e9; color: #2e7d32; }
    .trend-stable    { background: #fff8e1; color: #f57f17; }
    .trend-worsening { background: #ffebee; color: #c62828; }
    .trend-new       { background: #e8eaf6; color: #3949ab; }
    .weakness-stats  { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--text-sec); margin-bottom: 10px; }
    .weakness-stats strong { color: var(--text); }
    .weakness-coaching { font-size: 13px; color: var(--text-sec); line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-style: italic; }
    .score-dots { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
    .score-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
    .weakness-focus-banner { background: #fff3e0; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; border-left: 4px solid var(--orange); }
    .weakness-focus-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--orange); margin-bottom: 4px; }
    .weakness-focus-text { font-size: 14px; color: var(--text); line-height: 1.5; }

    /* ── VOCABULARY TAB ──────────────────── */
    .vocab-content { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
    .vocab-progress-wrap { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; }
    .vocab-progress-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .vocab-progress-title { font-size: 15px; font-weight: 600; }
    .vocab-progress-count { font-size: 14px; color: var(--text-sec); font-weight: 500; }
    .progress-bar-bg { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
    .progress-bar-fill { height: 100%; background: var(--orange); border-radius: 4px; transition: width 0.4s ease; }

    .vocab-card {
      position: relative; width: 100%; min-height: 190px;
      cursor: pointer;
    }
    .vocab-card-face {
      position: absolute; inset: 0; border-radius: var(--radius);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 24px; box-shadow: var(--shadow);
    }
    .vocab-card-front { background: var(--white); }
    .vocab-card-back { background: #e8eaf6; display: none; justify-content: flex-start; align-items: flex-start; }
    .vocab-card.flipped .vocab-card-front { display: none; }
    .vocab-card.flipped .vocab-card-back { display: flex; animation: cardReveal 0.2s ease; }
    @keyframes cardReveal { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
    .vocab-word { font-size: 26px; font-weight: 700; color: var(--blue); }
    .mastery-stars { font-size: 16px; margin-top: 8px; }
    .flip-hint { font-size: 13px; color: var(--text-sec); margin-top: 12px; }
    .vocab-meaning { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
    .vocab-example { font-size: 14px; color: var(--text-sec); line-height: 1.5; font-style: italic; margin-bottom: 16px; }
    .quiz-btns { display: flex; gap: 10px; width: 100%; }
    .quiz-btn {
      flex: 1; padding: 12px; border-radius: 10px; border: none;
      font-size: 14px; font-weight: 600; cursor: pointer; min-height: 48px;
    }
    .btn-got { background: #e8f5e9; color: var(--green); }
    .btn-practice { background: #fbe9e7; color: #bf360c; }
    .vocab-card-placeholder { min-height: 190px; } /* keeps height while card is absolute */

    /* ── TOAST ───────────────────────────── */
    #toast {
      position: fixed; bottom: calc(var(--nav-h) + 16px); left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: #323232; color: var(--white); padding: 12px 20px;
      border-radius: 24px; font-size: 14px; font-weight: 500;
      z-index: 999; pointer-events: none; white-space: nowrap;
      transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0;
      max-width: calc(100% - 40px);
    }
    #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
    #toast.success { background: var(--green); }
    #toast.error { background: #c62828; }

    /* ── DRILLS ──────────────────────────── */
    #drills-section { display: none; padding: 0 20px 8px; }
    .drills-header { font-size: 16px; font-weight: 700; color: var(--blue); margin: 16px 0 12px; }
    .drill-card {
      background: var(--white); border-radius: var(--radius);
      box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden;
    }
    .drill-card-head { background: #e8eaf6; padding: 14px 16px; }
    .drill-sound-label {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.8px; color: var(--blue-light); margin-bottom: 6px;
    }
    .drill-sentence { font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.5; margin-bottom: 6px; }
    .drill-instruction { font-size: 13px; color: var(--text-sec); line-height: 1.5; }
    .drill-actions { padding: 12px 16px; display: flex; gap: 10px; align-items: center; }
    .drill-hear-btn {
      padding: 10px 16px; border-radius: 10px; border: 1.5px solid var(--blue);
      background: var(--white); color: var(--blue); font-size: 14px; font-weight: 600;
      cursor: pointer; min-height: 44px;
    }
    .drill-rec-btn {
      flex: 1; padding: 10px 16px; border-radius: 10px; border: none;
      background: var(--blue); color: var(--white); font-size: 14px; font-weight: 600;
      cursor: pointer; min-height: 44px; transition: background 0.2s;
    }
    .drill-rec-btn.recording { background: #c62828; }
    .drill-rec-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .drill-loading { padding: 0 16px 14px; font-size: 13px; color: var(--text-sec); display: none; align-items: center; gap: 8px; }
    .drill-loading .mini-spinner { width: 16px; height: 16px; border: 2px solid #e0e0e0; border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; }
    .drill-results { display: none; padding: 0 16px 16px; }
    .drill-summary { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
    .drill-score-num { font-size: 22px; font-weight: 800; }
    .drill-score-msg { font-size: 13px; color: var(--text-sec); }
    .drill-group { margin-bottom: 10px; }
    .drill-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-sec); margin-bottom: 6px; }
    .word-scores-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
    .word-chip { padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: default; }
    .word-chip.clickable { cursor: pointer; }
    .word-chip.active { outline: 2px solid currentColor; outline-offset: 2px; }
    .chip-green { background: #e8f5e9; color: #2e7d32; }
    .chip-yellow { background: #fff8e1; color: #f57f17; }
    .chip-red { background: #ffebee; color: #c62828; }
    .phoneme-panel { background: #f8f9fa; border-radius: 10px; padding: 12px; margin-top: 10px; }
    .phoneme-panel-word { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
    .phoneme-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
    .phoneme-row-worst { background: #fff8e1; border-radius: 6px; padding: 4px 6px; margin: 2px -6px; }
    .phoneme-code { background: #e0e0e0; color: #333; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700; font-family: monospace; min-width: 30px; text-align: center; flex-shrink: 0; }
    .phoneme-name { flex: 1; color: var(--text-sec); }
    .phoneme-score { font-weight: 700; min-width: 34px; text-align: right; flex-shrink: 0; }
    .phoneme-bar-wrap { width: 50px; height: 5px; background: #e0e0e0; border-radius: 3px; flex-shrink: 0; }
    .phoneme-bar { height: 100%; border-radius: 3px; }
    .drill-focus-tip { margin-top: 10px; font-size: 13px; color: var(--text-sec); background: #fff8e1; border-radius: 8px; padding: 10px 12px; line-height: 1.5; }
    .drill-focus-tip strong { color: #e65100; }

    /* ── SPEAK BUTTONS ───────────────────── */
    .speak-btn {
      background: none; border: none; cursor: pointer;
      font-size: 15px; padding: 2px 4px; opacity: 0.65;
      vertical-align: middle; border-radius: 6px; transition: opacity 0.15s, background 0.15s;
    }
    .speak-btn:hover { opacity: 1; background: rgba(0,0,0,0.06); }

    /* ── UTILS ────────────────────────────── */
    .section-gap { height: 12px; }
    .divider { height: 1px; background: var(--border); margin: 4px 0; }
    button { font-family: inherit; }

    /* ── AUTH SCREEN ──────────────────────── */
    #auth-screen {
      position: fixed; inset: 0; z-index: 1000;
      background: var(--surface);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 24px;
    }
    #auth-screen.hidden { display: none; }
    .auth-logo { font-size: 48px; margin-bottom: 8px; }
    .auth-title { font-size: 26px; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
    .auth-subtitle { font-size: 14px; color: var(--text-sec); margin-bottom: 28px; text-align: center; }
    .auth-card {
      background: var(--white); border-radius: 16px;
      box-shadow: 0 2px 16px rgba(0,0,0,0.10);
      padding: 24px; width: 100%; max-width: 380px;
    }
    .auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
    .auth-tab {
      flex: 1; padding: 8px; border: none; border-radius: 8px;
      font-size: 14px; font-weight: 600; cursor: pointer;
      background: var(--surface); color: var(--text-sec);
    }
    .auth-tab.active { background: var(--blue); color: #fff; }
    .auth-form { display: flex; flex-direction: column; gap: 12px; }
    .auth-form input {
      padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px;
      font-size: 15px; font-family: inherit; outline: none;
      transition: border-color 0.2s;
    }
    .auth-form input:focus { border-color: var(--blue); }
    .pw-wrap { position: relative; display: flex; align-items: center; }
    .pw-wrap input { flex: 1; padding-right: 44px; }
    .pw-toggle { position: absolute; right: 10px; border: none; background: none; cursor: pointer; font-size: 18px; color: #aaa; padding: 0; line-height: 1; user-select: none; }
    .pw-toggle:focus { outline: none; }
    .auth-submit {
      padding: 13px; border: none; border-radius: 10px;
      background: var(--blue); color: #fff;
      font-size: 15px; font-weight: 600; cursor: pointer;
      transition: opacity 0.2s;
    }
    .auth-submit:hover { opacity: 0.88; }
    .auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
    .auth-divider {
      display: flex; align-items: center; gap: 10px;
      color: var(--text-sec); font-size: 13px; margin: 4px 0;
    }
    .auth-divider::before, .auth-divider::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }
    .auth-error {
      font-size: 13px; color: #c62828;
      background: #ffebee; border-radius: 8px;
      padding: 10px 12px; display: none;
    }
    .auth-error.show { display: block; }
    .logout-btn {
      position: absolute; top: 16px; right: 16px;
      border: none; background: none; color: var(--text-sec);
      font-size: 13px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
    }
    .logout-btn:hover { background: var(--surface); }

    /* ── PROFILE SHEET ──────────────────── */
    #profile-sheet {
      position: fixed; bottom: -100%; left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 480px;
      background: #fff; border-radius: 20px 20px 0 0;
      padding: 12px 24px 32px; max-height: 85vh; overflow-y: auto;
      z-index: 901; transition: bottom 0.3s ease;
    }
    #profile-sheet.open { bottom: 0; }
    #profile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 900; display: none; }
    .profile-handle { width: 40px; height: 4px; background: #e0e0e0; border-radius: 2px; margin: 0 auto 20px; }
    .profile-field-label { font-size: 11px; font-weight: 600; color: var(--text-sec); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
    .profile-input { width: 100%; padding: 10px 12px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 14px; font-family: inherit; box-sizing: border-box; margin-bottom: 8px; }
    .profile-input:focus { outline: none; border-color: var(--blue); }
    /* ── MOUTH ANIMATION MODAL ──────────── */
    #mouth-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.6);
      z-index: 1001; display: none; align-items: center; justify-content: center;
      padding: 20px;
    }
    #mouth-modal-overlay.visible { display: flex; }
    .mouth-modal {
      background: white; border-radius: 20px; width: 100%; max-width: 400px;
      padding: 20px 20px 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    }
    .mouth-modal-hd { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
    .mouth-modal-title { font-size: 16px; font-weight: 700; color: var(--blue); }
    .mouth-modal-sub { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
    .mouth-close-x {
      border: none; background: var(--surface); border-radius: 50%;
      width: 30px; height: 30px; font-size: 14px; cursor: pointer;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .mouth-svg-bg { background: #FEF3EE; border-radius: 12px; padding: 10px 10px 4px; }
    .mouth-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
    .mouth-dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd; transition: background 0.3s; }
    .mouth-dot.on { background: var(--orange); }
    .mouth-lip-badge { font-size: 12px; font-weight: 600; color: var(--orange); text-align: center; height: 18px; margin-top: 5px; transition: opacity 0.3s; }
    .mouth-frame-label { font-size: 14px; font-weight: 700; color: var(--blue); margin: 12px 0 4px; text-align: center; min-height: 20px; }
    .mouth-frame-desc { font-size: 13px; color: var(--text-sec); line-height: 1.55; text-align: center; min-height: 52px; }
    .mouth-ok-btn { width: 100%; padding: 13px; border-radius: 12px; border: none; background: var(--blue); color: white; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 12px; }
    .drill-see-how { border: none; background: var(--blue-bg); color: var(--blue-light); font-size: 12px; font-weight: 600; cursor: pointer; padding: 5px 10px; border-radius: 8px; margin-top: 6px; display: inline-block; }
    .mouth-caption { font-size: 11px; color: var(--text-sec); text-align: center; margin-bottom: 7px; line-height: 1.5; background: var(--blue-bg); border-radius: 8px; padding: 5px 8px; }
    #ma-tongue-body, #ma-tongue-tip-g, #ma-jaw-floor, #ma-lower-teeth { transition: transform 0.5s ease; }
    @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.6); opacity: 0; } }
    .pulse-ring { animation: pulse-ring 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }

    /* ── ONBOARDING OVERLAY ─────────────────────────── */
    #onboarding-overlay {
      position: fixed; inset: 0; z-index: 1100;
      background: rgba(0,0,0,0.55);
      display: none; align-items: flex-end; justify-content: center;
    }
    #onboarding-overlay.visible { display: flex; }
    .ob-sheet {
      background: var(--white); border-radius: 24px 24px 0 0;
      width: 100%; max-width: 480px;
      max-height: 92vh; overflow-y: auto;
      padding: 24px 24px 48px;
      animation: slideUp 0.3s ease;
    }
    @keyframes slideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .ob-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
    .ob-dots { display: flex; gap: 8px; align-items: center; }
    .ob-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); transition: background 0.2s, transform 0.2s; }
    .ob-dot.active { background: var(--blue); transform: scale(1.25); }
    .ob-dot.done { background: var(--blue-light); }
    .ob-skip-btn { background: none; border: none; color: var(--text-sec); font-size: 14px; font-weight: 500; cursor: pointer; padding: 4px 0; }
    .ob-step { display: none; flex-direction: column; gap: 20px; }
    .ob-step.active { display: flex; }
    .ob-step-title { font-size: 21px; font-weight: 700; color: var(--text); }
    .ob-step-sub { font-size: 14px; color: var(--text-sec); line-height: 1.5; margin-top: -12px; }
    .ob-label { font-size: 12px; font-weight: 600; color: var(--text-sec); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
    .ob-input {
      width: 100%; padding: 12px 14px; border: 1.5px solid var(--border);
      border-radius: 12px; font-size: 15px; font-family: inherit;
      outline: none; transition: border-color 0.2s; box-sizing: border-box;
    }
    .ob-input:focus { border-color: var(--blue); }
    .ob-input-group { display: flex; flex-direction: column; gap: 14px; }
    .ob-paragraph-card { background: #e8eaf6; border-radius: 14px; padding: 18px; border-left: 4px solid var(--blue); }
    .ob-paragraph-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--blue-light); margin-bottom: 10px; }
    .ob-paragraph-text { font-size: 16px; line-height: 1.8; color: var(--text); }
    .ob-rec-row { display: flex; flex-direction: column; align-items: center; gap: 12px; }
    .ob-rec-btn {
      width: 80px; height: 80px; border-radius: 50%;
      background: var(--blue); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(26,35,126,0.3);
      font-size: 32px; transition: transform 0.15s, background 0.2s;
    }
    .ob-rec-btn.recording { background: #c62828; animation: pulse 1.4s ease-in-out infinite; box-shadow: 0 4px 20px rgba(198,40,40,0.45); }
    .ob-rec-hint { font-size: 14px; color: var(--text-sec); font-weight: 500; }
    .ob-rec-timer { font-size: 13px; font-weight: 700; color: #c62828; display: none; }
    .ob-results { display: none; flex-direction: column; gap: 16px; }
    .ob-results.visible { display: flex; }
    .ob-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-sec); }
    .ob-pe-list { display: flex; flex-direction: column; gap: 9px; }
    .ob-pe-row { display: flex; align-items: center; gap: 10px; }
    .ob-pe-name { font-size: 13px; color: var(--text); font-weight: 500; flex: 1; min-width: 0; }
    .ob-pe-bar-wrap { width: 90px; height: 6px; background: var(--border); border-radius: 3px; flex-shrink: 0; }
    .ob-pe-bar { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
    .ob-pe-score { font-size: 13px; font-weight: 700; width: 30px; text-align: right; flex-shrink: 0; }
    .ob-delivery-row { display: flex; gap: 10px; }
    .ob-delivery-stat { flex: 1; background: var(--surface); border-radius: 12px; padding: 12px 8px; text-align: center; }
    .ob-delivery-val { font-size: 18px; font-weight: 700; color: var(--blue); }
    .ob-delivery-label { font-size: 11px; color: var(--text-sec); margin-top: 3px; }
    .ob-cefr-badge { display: inline-block; background: var(--blue); color: #fff; font-size: 26px; font-weight: 800; padding: 10px 28px; border-radius: 14px; letter-spacing: 1px; }
    .ob-speak-prompt-card { background: var(--surface); border-radius: 14px; padding: 18px; }
    .ob-topic-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .ob-topic-chip { background: #e8eaf6; color: var(--blue); border: none; border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 500; cursor: default; font-family: inherit; }
    .ob-next-btn {
      background: var(--blue); color: #fff; border: none; border-radius: 14px;
      padding: 16px; font-size: 15px; font-weight: 700; cursor: pointer;
      font-family: inherit; width: 100%; box-shadow: 0 4px 14px rgba(26,35,126,0.25);
      transition: transform 0.15s;
    }
    .ob-next-btn:active { transform: scale(0.97); }
    .ob-next-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    .ob-complete-btn {
      background: var(--blue); color: #fff; border: none; border-radius: 14px;
      padding: 16px; font-size: 16px; font-weight: 700; cursor: pointer;
      font-family: inherit; width: 100%; box-shadow: 0 4px 14px rgba(26,35,126,0.25);
      transition: transform 0.15s;
    }
    .ob-complete-btn:active { transform: scale(0.97); }
    .ob-loading { display: none; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; }
    .ob-loading.visible { display: flex; }
    .ob-error { display: none; background: #ffebee; color: #c62828; border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
    .ob-error.show { display: block; }

    /* ── ADAPTIVE DRILLS TAB ─────────────────────────────── */
    /* Idle screen */
    #drills-idle { display: flex; flex-direction: column; gap: 20px; padding: 20px 0 8px; }
    #drills-active { display: none; flex-direction: column; gap: 16px; padding: 16px 0; }
    #drills-active.visible { display: flex; }

    .drill-idle-title { font-size: 18px; font-weight: 700; color: var(--text); }
    .drill-idle-subtitle { font-size: 14px; color: var(--text-sec); margin-top: -14px; line-height: 1.5; }

    .drill-focus-card {
      background: var(--surface); border-radius: 16px; padding: 16px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .drill-focus-title { font-size: 12px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.8px; color: var(--text-sec); margin-bottom: 2px; }
    .drill-focus-row { display: flex; align-items: center; gap: 10px; }
    .drill-focus-rank {
      width: 22px; height: 22px; border-radius: 50%; background: var(--blue);
      color: #fff; font-size: 11px; font-weight: 700; display: flex;
      align-items: center; justify-content: center; flex-shrink: 0;
    }
    .drill-focus-label { font-size: 14px; color: var(--text); font-weight: 500; flex: 1; min-width: 0; }
    .drill-score-bar-bg { width: 72px; height: 6px; background: var(--border); border-radius: 3px; flex-shrink: 0; }
    .drill-score-bar-fill { height: 100%; border-radius: 3px; background: var(--blue); transition: width 0.4s ease; }
    .drill-focus-score { font-size: 13px; font-weight: 700; color: var(--text-sec); width: 28px; text-align: right; flex-shrink: 0; }

    .btn-start-drill {
      background: var(--blue); color: #fff; border: none; border-radius: 14px;
      padding: 16px; font-size: 16px; font-weight: 700; cursor: pointer;
      font-family: inherit; width: 100%; box-shadow: 0 4px 14px rgba(26,35,126,0.25);
      transition: transform 0.15s;
    }
    .btn-start-drill:active { transform: scale(0.97); }
    .btn-start-drill:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    /* Active drill card */
    .drill-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .difficulty-chip {
      display: inline-flex; align-items: center; border-radius: 20px;
      padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
    }
    .chip-green  { background: #e8f5e9; color: #2e7d32; }
    .chip-orange { background: #fff3e0; color: #e65100; }
    .chip-blue   { background: #e8eaf6; color: var(--blue); }
    .chip-category {
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text-sec); border-radius: 20px; padding: 4px 10px;
      font-size: 12px; font-weight: 600;
    }
    .drill-score-label { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--text-sec); }

    .drill-active-card {
      background: var(--surface); border-radius: 16px; padding: 20px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .drill-sentence { font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.5; }
    .drill-instruction { font-size: 13px; color: var(--text-sec); line-height: 1.5; }

    .drill-hear-btn {
      align-self: flex-start; background: none; border: 1.5px solid var(--border);
      border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600;
      color: var(--blue); cursor: pointer; font-family: inherit; display: flex;
      align-items: center; gap: 6px; transition: background 0.15s;
    }
    .drill-hear-btn:hover { background: var(--surface); }

    /* Recording area */
    #drill-record-area { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    #drill-record-btn {
      width: 68px; height: 68px; border-radius: 50%; border: none; cursor: pointer;
      background: var(--blue); color: #fff; font-size: 28px; font-weight: 700;
      transition: transform 0.15s, background 0.2s; box-shadow: 0 4px 16px rgba(26,35,126,0.3);
      display: flex; align-items: center; justify-content: center;
    }
    #drill-record-btn.recording { background: #c62828; animation: pulse 1.4s ease-in-out infinite; box-shadow: 0 4px 20px rgba(198,40,40,0.45); }
    #drill-record-btn:active { transform: scale(0.92); }
    #drill-record-hint { font-size: 14px; color: var(--text-sec); font-weight: 500; }
    #drill-record-timer { font-size: 13px; font-weight: 700; color: #c62828; display: none; }

    /* Result area */
    #drill-result-area { display: none; flex-direction: column; gap: 12px; }
    #drill-result-area.visible { display: flex; }
    .drill-score-update {
      background: var(--surface); border-radius: 12px; padding: 14px 16px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .drill-score-update-title { font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.7px; color: var(--text-sec); }
    .drill-score-update-line { font-size: 15px; font-weight: 700; color: var(--text); }
    .drill-score-up   { color: #2e7d32; }
    .drill-score-down { color: #c62828; }
    .drill-score-same { color: var(--text-sec); }

    .drill-nav-buttons { display: flex; gap: 10px; }
    .drill-nav-buttons button {
      flex: 1; padding: 14px; border: none; border-radius: 12px;
      font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
      transition: transform 0.15s;
    }
    .drill-nav-buttons button:active { transform: scale(0.97); }
    #btn-drill-back { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); }
    #btn-drill-next { background: var(--blue); color: #fff; box-shadow: 0 4px 14px rgba(26,35,126,0.2); }