/* ════════════════════════════════════════════════════════════════════
   PRONUNCIATION COACH — index.css · standalone app shell (P7)
   Base tokens come from ../theme.css (Space Grotesk, dark/light vars).
   The .pron-* drill styles are copied verbatim from vocab/index.css so
   pron-core.js renders identically here; pron-core.css adds the newer
   chips/custom-word pieces on top.
   ════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 600px 500px at -10% -10%,rgba(244,63,94,.07),transparent),radial-gradient(ellipse 500px 400px at 110% 110%,rgba(14,165,233,.07),transparent);pointer-events:none;z-index:0}
main{flex:1;position:relative;z-index:1}
.wrap{max-width:760px;margin:0 auto;padding:24px 18px 40px}
.wrap-narrow{max-width:560px}

.page-title{font-size:1.65rem;font-weight:700;margin-bottom:4px;line-height:1.25}
.page-title em{color:#F43F5E;font-style:normal}
.page-sub{color:var(--dim);font-size:.85rem;margin-bottom:22px;line-height:1.6}
.dim-note{font-size:.78rem;color:var(--dimmer);margin-bottom:12px}

/* screens */
.screen{display:none}
.screen.on{display:block}

/* gate */
.gate-panel{max-width:430px;margin:70px auto;text-align:center;background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:34px 26px}
.gate-ic{font-size:2.6rem;margin-bottom:12px}
.gate-title{font-size:1.15rem;font-weight:700;margin-bottom:8px}
.gate-msg{font-size:.86rem;color:var(--dim);line-height:1.6;margin-bottom:18px}
.btn-teal{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;padding:11px 18px;font-family:inherit;font-size:.86rem;font-weight:700;cursor:pointer;border:none;min-height:42px;background:linear-gradient(135deg,#20B9B9,#0D7D6A);color:#fff;text-decoration:none;width:100%}
.btn-teal:hover{opacity:.9;transform:translateY(-1px)}

/* home source cards */
.pc-card{background:var(--surf);border:1px solid var(--border);border-radius:13px;padding:14px 15px;margin:10px 0}
.pc-card-head{display:flex;align-items:flex-start;gap:12px}
.pc-card-ic{font-size:1.3rem;line-height:1.2;flex-shrink:0}
.pc-card-body{flex:1;min-width:0}
.pc-card-title{font-weight:700;color:var(--text);font-size:.92rem}
.pc-card-msg{font-size:.76rem;color:var(--dim);margin-top:2px;line-height:1.5}
.pc-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.pc-pro-badge{display:inline-block;font-size:.6rem;font-weight:800;background:linear-gradient(135deg,#F5C543,#E0902B);color:#3a2600;border-radius:999px;padding:2px 8px;vertical-align:middle;margin-left:4px}
.pc-link{display:flex;align-items:center;gap:10px;background:rgba(124,92,191,.08);border:1px solid rgba(124,92,191,.3);border-radius:13px;padding:13px 15px;font-size:.84rem;color:var(--text);text-decoration:none;margin:14px 0 10px;transition:border-color .15s}
.pc-link:hover{border-color:var(--accent)}
.pc-link-sub{font-size:.76rem;color:var(--dim)}

/* drill header + progress bar (mount nodes pron-core drives) */
.quiz-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.quiz-info{font-size:.82rem;color:var(--dim);font-weight:600}
.quiz-info b{color:var(--text)}
.btn-x{background:var(--surf2);border:1px solid var(--border);border-radius:9px;width:34px;height:34px;color:var(--dim);font-family:inherit;font-size:.9rem;cursor:pointer;transition:color .15s,border-color .15s}
.btn-x:hover{color:var(--text);border-color:var(--accent)}
.pbar-wrap{height:6px;background:var(--surf2);border-radius:99px;overflow:hidden;margin-bottom:16px}
.pbar{height:100%;background:linear-gradient(90deg,#0EA5E9,#F43F5E);border-radius:99px;transition:width .3s ease}

/* toast (pron-core falls back to D.toast → index.js renders these) */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--surf2);border:1px solid var(--border);color:var(--text);border-radius:11px;padding:11px 17px;font-size:.84rem;font-weight:600;z-index:1200;max-width:90vw;box-shadow:0 10px 34px rgba(0,0,0,.45);animation:pcToastIn .2s ease}
@keyframes pcToastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ══════════════════════════════════════════════════════════════════════
   PRONUNCIATION COACH drill styles — copied from vocab/index.css (Phase 4A)
   so pron-core.js renders identically in the standalone app. Keep in sync.
   ══════════════════════════════════════════════════════════════════════ */
:root{ --pron-teal:#20B9B9; --pron-ok:#22c55e; --pron-mid:#f59e0b; --pron-bad:#ef4444; }

/* Home entry card — mirrors the novice/booster card layout */
.pron-home-card{
  display:flex;align-items:center;gap:12px;margin:10px 0;padding:13px 15px;
  background:linear-gradient(135deg,rgba(32,185,185,.10),rgba(124,92,191,.08));
  border:1px solid rgba(32,185,185,.30);border-radius:13px}
.pron-home-card .novice-card-label{font-weight:700;color:var(--text);font-size:.92rem}
.pron-home-card .novice-card-msg{font-size:.76rem;color:var(--dim);margin-top:1px}
.pron-home-card .novice-card-body{flex:1;min-width:0}
.pron-home-card .novice-card-btn{
  flex-shrink:0;background:linear-gradient(135deg,#20B9B9,#159a9a);border:none;border-radius:9px;
  padding:9px 16px;font-family:inherit;font-size:.8rem;font-weight:700;color:#fff;cursor:pointer;
  transition:transform .1s,box-shadow .2s;box-shadow:0 2px 8px rgba(32,185,185,.3)}
.pron-home-card .novice-card-btn:hover{transform:translateY(-1px)}

/* Drill card */
.pron-card{background:var(--surf2);border:1px solid var(--border);border-radius:16px;
  padding:18px 16px;text-align:center}
.pron-word-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.pron-word{font-family:'Space Grotesk',sans-serif;font-size:1.6rem;font-weight:700;color:var(--text)}
.pron-pos,.pron-cefr{font-size:.62rem;font-weight:700;border-radius:5px;padding:2px 7px;
  background:rgba(124,92,191,.16);color:var(--accent)}
.pron-cefr{background:rgba(32,185,185,.16);color:var(--pron-teal)}
.pron-ipa-row{margin-top:4px}
.pron-ipa{font-size:1rem;color:var(--dim);font-style:italic}
.pron-meaning{margin-top:6px;font-size:.9rem;color:var(--text2)}

/* Record zone */
.pron-rec-zone{margin:20px 0 10px;display:flex;flex-direction:column;align-items:center;gap:12px}
.pron-mic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:120px;height:120px;border-radius:50%;border:none;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#20B9B9,#159a9a);box-shadow:0 6px 20px rgba(32,185,185,.4);
  font-family:inherit;font-weight:700;transition:transform .12s,box-shadow .2s}
.pron-mic:hover{transform:scale(1.04)}
.pron-mic .pron-mic-ic{font-size:2rem;line-height:1}
.pron-mic .pron-mic-tx{font-size:.78rem}
.pron-mic.recording{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 6px 20px rgba(239,68,68,.45);
  animation:pronPulse 1.2s ease-in-out infinite}
@keyframes pronPulse{0%,100%{box-shadow:0 6px 20px rgba(239,68,68,.45)}50%{box-shadow:0 6px 30px rgba(239,68,68,.7)}}
.pron-wave{width:80%;max-width:240px;height:34px;display:flex;align-items:center;justify-content:center;
  background:var(--surf);border-radius:8px;overflow:hidden}
.pron-wave-bar{width:5px;height:100%;border-radius:3px;background:var(--pron-teal);
  transform:scaleY(.06);transition:transform .08s linear}
.pron-status{font-size:.78rem;color:var(--dim);min-height:1.1em}

.pron-actions-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px}
.pron-preview-info{font-size:.7rem;color:var(--dimmer)}

/* Result */
.pron-score{font-family:'Space Grotesk',sans-serif;font-size:1.25rem;font-weight:800;margin:12px 0 8px}
.pron-score.ok{color:var(--pron-ok)} .pron-score.mid{color:var(--pron-mid)} .pron-score.bad{color:var(--pron-bad)}
.pron-ph-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}
.pron-ph{font-size:.85rem;font-weight:600;border-radius:7px;padding:4px 9px;font-family:'Space Grotesk',sans-serif}
.pron-ph.ok{background:rgba(34,197,94,.15);color:var(--pron-ok)}
.pron-ph.bad{background:rgba(239,68,68,.15);color:var(--pron-bad)}
.pron-ph.mid{background:rgba(245,158,11,.15);color:var(--pron-mid)}

.pron-tip{display:flex;gap:9px;text-align:left;background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.30);border-radius:11px;padding:11px 13px;margin:10px 0}
.pron-tip-ic{font-size:1.1rem;line-height:1.2;flex-shrink:0}
.pron-tip-short{font-size:.86rem;color:var(--text);line-height:1.45}
.pron-tip-more{margin-top:6px}
.pron-tip-more summary{cursor:pointer;font-size:.78rem;color:var(--pron-mid);font-weight:600}
.pron-tip-more>div{margin-top:6px;font-size:.82rem;color:var(--text2);line-height:1.5}
.pron-final-note{font-size:.78rem;color:var(--dim);margin:8px 0;line-height:1.5}

.pron-result-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.pron-sub-actions{margin-top:8px}
.pron-btn-primary,.pron-btn-ghost,.pron-btn-warn{font-family:inherit;font-size:.82rem;font-weight:700;
  border-radius:9px;padding:10px 16px;cursor:pointer;border:1px solid transparent;text-decoration:none;display:inline-block}
.pron-btn-primary{background:linear-gradient(135deg,#20B9B9,#159a9a);color:#fff;box-shadow:0 2px 8px rgba(32,185,185,.3)}
.pron-btn-primary:hover{transform:translateY(-1px)}
.pron-btn-ghost{background:var(--surf);border-color:var(--border);color:var(--dim)}
.pron-btn-ghost:hover{color:var(--text);border-color:var(--accent)}
.pron-btn-warn{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.35);color:var(--pron-bad)}

/* Consent / gate */
.pron-consent,.pron-gate{text-align:center}
.pron-consent-ic{font-size:2.2rem}
.pron-consent-title{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text);margin:8px 0}
.pron-consent-list{text-align:left;max-width:340px;margin:10px auto;padding-left:18px;font-size:.85rem;color:var(--text2);line-height:1.6}
.pron-gate-msg{font-size:.86rem;color:var(--dim);margin:8px 0 4px}

/* Dispute */
.pron-dispute-title{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:10px}
.pron-dispute-reasons{display:flex;flex-direction:column;gap:8px;text-align:left;margin-bottom:10px}
.pron-dispute-reasons label{font-size:.85rem;color:var(--text2);display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.pron-dispute-note{width:100%;min-height:60px;background:var(--surf);border:1px solid var(--border);border-radius:9px;
  padding:9px;font-family:inherit;font-size:.85rem;color:var(--text);resize:vertical}

/* Mic-recovery iframe */
.pron-recovery-frame{width:100%;height:380px;border:1px solid var(--border);border-radius:11px;background:var(--surf)}

/* Interactive root-cause picker */
.pron-causes{text-align:left;margin:12px 0 4px}
.pron-causes-q{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:8px}
.pron-cause{display:block;width:100%;text-align:left;background:var(--surf);border:1px solid var(--border);
  border-radius:11px;padding:10px 12px;margin:7px 0;cursor:pointer;font-family:inherit;transition:border-color .15s,transform .1s}
.pron-cause:hover{border-color:var(--pron-teal);transform:translateY(-1px)}
.pron-cause.suggested{border-color:var(--pron-teal);background:rgba(32,185,185,.07)}
.pron-cause-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pron-cause-label{font-size:.88rem;font-weight:700;color:var(--text)}
.pron-cause-badge{font-size:.62rem;font-weight:700;color:#fff;background:var(--pron-teal);border-radius:999px;padding:2px 8px}
.pron-cause-diag{display:block;margin-top:4px;font-size:.78rem;color:var(--dim);line-height:1.45}

/* Root-cause accordion (R3 #3 — expand fixes in place, no back-navigation) */
.pron-cause-acc{display:block;background:var(--surf);border:1px solid var(--border);border-radius:11px;margin:7px 0;text-align:left}
.pron-cause-acc.suggested{border-color:var(--pron-teal);background:rgba(32,185,185,.07)}
.pron-cause-acc>summary{cursor:pointer;padding:10px 12px;list-style:none;position:relative}
.pron-cause-acc>summary::-webkit-details-marker{display:none}
.pron-cause-acc>summary::after{content:'▾';position:absolute;right:12px;top:10px;color:var(--dim);font-size:.8rem;transition:transform .15s}
.pron-cause-acc[open]>summary::after{transform:rotate(180deg)}
.pron-cause-acc>summary:hover{border-color:var(--pron-teal)}
.pron-cause-acc-body{padding:0 12px 12px;border-top:1px dashed var(--border);margin-top:2px;padding-top:10px}

/* Cause detail (fix + drill + success) */
.pron-cause-detail{text-align:left;background:rgba(32,185,185,.07);border:1px solid rgba(32,185,185,.30);
  border-radius:12px;padding:12px 13px;margin:10px 0}
.pron-cause-detail-label{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:6px}
.pron-fix{font-size:.86rem;color:var(--text2);line-height:1.5}
.pron-diagram-wrap{max-width:300px;margin:11px auto 2px;border-radius:10px;overflow:hidden;background:#fff}
.pron-drill-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.pron-drill-chip{background:var(--surf2);border:1px solid var(--border);border-radius:8px;padding:5px 10px;
  font-family:inherit;font-size:.8rem;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .15s}
.pron-drill-chip:hover{border-color:var(--pron-teal);color:var(--pron-teal)}
.pron-minpairs{margin-top:9px;font-size:.78rem;color:var(--dim)}
.pron-minpairs span{white-space:nowrap;margin-right:4px}
.pron-success{margin-top:9px;font-size:.8rem;color:var(--pron-ok);line-height:1.45}

/* iOS real-test fix #2 — minimal-pair words are now tappable audio buttons */
.pron-mp-word{background:var(--surf2);border:1px solid var(--border);border-radius:7px;
  padding:3px 8px;font-family:inherit;font-size:.78rem;font-weight:600;color:var(--text);
  cursor:pointer;transition:border-color .15s,color .15s}
.pron-mp-word:hover{border-color:var(--pron-teal);color:var(--pron-teal)}
.pron-mp-pair{display:inline-flex;align-items:center;gap:5px}

/* ── iOS real-test fix #3 — sound↔fix colour link ─────────────────────────
   Each of the up-to-2 focus sounds gets an accent colour. pron-core.js puts a
   `pron-fx-N` class on BOTH the fix card and its matching syllable chip — same
   class ⇒ same colour, so "the red chip ↔ the red fix card" is exact. The card
   gets a thick coloured left-border + a prominent header pill in that colour.
   --pron-fx is theme-aware: the app's default theme is dark, so the base values
   are the BRIGHT (dark-surface-legible, AA-clear) hues; [data-theme=light]
   swaps in the deeper hues that read on white. Selectors are specced higher
   than the base .pron-syll/.pron-focus-* rules in pron-core.css (loaded after
   this file) so they win regardless of source order. */
.pron-fx-0{--pron-fx:#fb7185}  /* rose   — Sửa trước  (dark default) */
.pron-fx-1{--pron-fx:#60a5fa}  /* blue   — Sửa tiếp */
.pron-fx-2{--pron-fx:#a78bfa}  /* violet — on-demand (Sửa thêm) */
[data-theme="light"] .pron-fx-0{--pron-fx:#e11d48}
[data-theme="light"] .pron-fx-1{--pron-fx:#2563eb}
[data-theme="light"] .pron-fx-2{--pron-fx:#7c3aed}
.pron-card .pron-fx-sec{
  border-left:4px solid var(--pron-fx,var(--pron-teal,#20B9B9));
  padding-left:11px;border-radius:4px}
/* Dormant-tip fallback: the supplementary cluster/suprasegmental card has no
   per-phoneme accent (no .pron-fx-N), so it inherits the neutral teal fallback
   above. A dashed border marks it as an EXTRA, word-level note vs the solid
   per-sound cards. Reversible with the JS block in pron-core.js. */
.pron-card .pron-fx-sec.pron-supp-sec{border-left-style:dashed}
/* keep the R3 tap-flash visible but in the card's own accent colour */
.pron-card .pron-fx-sec.pron-flash{
  animation:pronFxFlash 1.2s ease;border-radius:10px}
@keyframes pronFxFlash{
  0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--pron-fx,#20B9B9) 55%,transparent)}
  100%{box-shadow:0 0 0 3px transparent}}
/* prominent target-sound label — larger than body, unmistakable */
.pron-focus-pill{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
  font-size:.92rem;font-weight:800;line-height:1.35;
  color:var(--pron-fx,var(--text));
  background:color-mix(in srgb,var(--pron-fx,#20B9B9) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--pron-fx,#20B9B9) 38%,transparent);
  border-radius:10px;padding:5px 11px}
.pron-focus-pill b{font-weight:800}
/* tint the matching syllable chip in the SAME accent (beats .pron-syll.bad) */
.pron-syll-row .pron-syll.pron-fx-chip{
  border-color:var(--pron-fx,#20B9B9);
  box-shadow:0 0 0 1px var(--pron-fx,#20B9B9);
  font-weight:800}
.pron-fx-dot{font-size:.7em;line-height:1;margin-right:1px}