/* ═══════════════════════════════════════════════════════
   TOEFL Prep — Shared Stylesheet (Glassmorphism)
   css/style.css
═══════════════════════════════════════════════════════ */

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

/* ── Base Variables ── */
:root {
  --bg: linear-gradient(160deg, #f5f3ff 0%, #ede9fe 40%, #f5f3ff 70%, #ede9fe 100%);
  --bg-flat: #f0eef8;
  --card: rgba(255,255,255,.55);
  --card-solid: #ffffff;
  --card-border: rgba(255,255,255,.5);
  --card-hover: rgba(255,255,255,.75);
  --blur: blur(12px);
  --text: #1e1b4b;
  --muted: #6b7280;
  --border: rgba(255,255,255,.5);
  --border-solid: #e5e7eb;
  --success-bg: rgba(240,253,244,.7); --success-border: #bbf7d0; --success-text: #15803d;
  --error-bg: rgba(254,242,242,.7);   --error-border: #fecaca;   --error-text: #b91c1c;
  --radius: 14px; --radius-sm: 8px;
  --accent: #4f46e5; --accent-light: rgba(238,242,255,.6);
  --accent-mid: #c7d2fe; --accent-dark: #4338ca;
  --hero-from: #4f46e5; --hero-to: #6366f1;
}

/* ── Section Colour Themes ── */
body.section-reading  { --accent:#4f46e5; --accent-light:rgba(238,242,255,.6); --accent-mid:#c7d2fe; --accent-dark:#4338ca; --hero-from:#4f46e5; --hero-to:#6366f1; }
body.section-writing  { --accent:#d97706; --accent-light:rgba(254,249,236,.6); --accent-mid:#fde68a; --accent-dark:#b45309; --hero-from:#d97706; --hero-to:#f59e0b; }
body.section-listening{ --accent:#059669; --accent-light:rgba(236,253,245,.6); --accent-mid:#a7f3d0; --accent-dark:#047857; --hero-from:#059669; --hero-to:#10b981; }
body.section-speaking { --accent:#9333ea; --accent-light:rgba(253,244,255,.6); --accent-mid:#e9d5ff; --accent-dark:#7e22ce; --hero-from:#9333ea; --hero-to:#a855f7; }

/* ── Base ── */
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
a { text-decoration:none; color:inherit; }

/* ── Layout ── */
.app      { max-width:700px; margin:0 auto; padding:2rem 1rem 4rem; }
.app-wide { max-width:780px; margin:0 auto; padding:1rem 1rem 4rem; }

/* ── Hero (glass) ── */
.hero { background:rgba(255,255,255,.45); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1.5px solid var(--card-border); padding:2rem 1.5rem 2.5rem; }
.hero-badge { display:inline-block; background:var(--accent-light); color:var(--accent); border:1px solid var(--accent-mid); border-radius:99px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 14px; margin-bottom:1.25rem; }
.hero-icon { font-size:36px; margin-bottom:10px; }
.hero h1 { font-size:clamp(22px,4vw,32px); font-weight:800; color:var(--text); margin-bottom:6px; line-height:1.2; letter-spacing:-.02em; }
.hero p  { font-size:14px; color:var(--muted); line-height:1.6; max-width:480px; }
.hero-stats { display:flex; gap:2rem; flex-wrap:wrap; margin-top:1.5rem; }
.hero-stat .num { font-size:22px; font-weight:800; color:var(--accent); line-height:1; }
.hero-stat .lbl { font-size:12px; color:var(--muted); margin-top:3px; }

/* ── Back link ── */
.back-btn { display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-size:13px; font-weight:600; margin-bottom:1.25rem; transition:color .15s; cursor:pointer; }
.back-btn:hover { color:var(--accent-dark); }

/* ── Progress ── */
.progress-wrap { background:rgba(255,255,255,.3); border-radius:99px; height:5px; overflow:hidden; backdrop-filter:blur(4px); }
.progress-fill { height:100%; background:var(--accent); border-radius:99px; transition:width .4s ease; }

/* ── Card ── */
.card { background:var(--card); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1.5px solid var(--card-border); border-radius:var(--radius); padding:1.75rem; box-shadow:0 4px 24px rgba(0,0,0,.06); }

/* ── Tags ── */
.tag { display:inline-block; font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px; backdrop-filter:blur(4px); }
.tag-available { background:rgba(236,253,245,.7); color:#15803d; border:1px solid #bbf7d0; }
.tag-soon      { background:rgba(254,249,236,.7); color:#b45309; border:1px solid #fde68a; }
.tag-correct   { background:rgba(240,253,244,.7); color:#15803d; border:1px solid #bbf7d0; }
.tag-wrong     { background:rgba(254,242,242,.7); color:#b91c1c; border:1px solid #fecaca; }
.topic-tag { display:inline-block; background:var(--accent-light); color:var(--accent); border:1px solid var(--accent-mid); border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 10px; margin-bottom:12px; backdrop-filter:blur(4px); }

/* ── Buttons ── */
.btn { padding:9px 18px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; border:1.5px solid var(--border-solid); background:rgba(255,255,255,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--text); transition:background .12s,transform .1s,border-color .12s; display:inline-flex; align-items:center; gap:6px; }
.btn:hover  { background:rgba(255,255,255,.8); }
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.35; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); backdrop-filter:none; }
.btn-primary:hover { background:var(--accent-dark); }
.btn-outline { border-color:var(--accent); color:var(--accent); }
.btn-outline:hover { background:var(--accent-light); }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; }

/* ── Top bar ── */
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.exam-label { font-size:15px; font-weight:700; color:var(--accent); letter-spacing:.02em; }
.q-counter  { font-size:13px; color:var(--muted); font-weight:500; }

/* ── Nav row ── */
.nav-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:1.25rem; }
.nav-row .btn { min-width:110px; }

/* ── Divider ── */
.divider { border:none; border-top:1px solid var(--border-solid); margin:1.25rem 0; }

/* ── Feedback ── */
.feedback { padding:10px 14px; border-radius:var(--radius-sm); font-size:14px; line-height:1.6; display:none; margin-top:1rem; backdrop-filter:blur(8px); }
.feedback.correct { background:var(--success-bg); border:1px solid var(--success-border); color:var(--success-text); }
.feedback.wrong   { background:var(--error-bg);   border:1px solid var(--error-border);   color:var(--error-text); }
.feedback.reveal  { background:rgba(248,249,251,.7); border:1px solid var(--border-solid); color:var(--text); font-size:13px; }
.feedback.info    { background:var(--accent-light); border:1px solid var(--accent-mid); color:var(--accent); }

/* ── Info strip ── */
.info-strip { background:var(--accent-light); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--accent-mid); border-radius:var(--radius-sm); padding:1rem 1.25rem; font-size:13px; color:var(--accent); line-height:1.6; display:flex; gap:10px; align-items:flex-start; }

/* ── Options ── */
.options { display:flex; flex-direction:column; gap:8px; }
.option { display:flex; align-items:flex-start; gap:10px; background:rgba(255,255,255,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1.5px solid var(--card-border); border-radius:var(--radius-sm); padding:10px 14px; cursor:pointer; font-size:14px; color:var(--text); line-height:1.5; text-align:left; font-family:inherit; transition:border-color .15s,background .15s; width:100%; }
.option:hover:not(.disabled) { border-color:var(--accent-mid); background:var(--accent-light); }
.option.selected       { border-color:var(--accent); background:var(--accent-light); }
.option.correct-answer { border-color:#22c55e; background:var(--success-bg); color:var(--success-text); }
.option.wrong-answer   { border-color:#ef4444; background:var(--error-bg);   color:var(--error-text); }
.option.disabled { cursor:default; }
.option-letter { font-weight:700; font-size:13px; min-width:20px; padding-top:1px; color:var(--accent); }
.option.correct-answer .option-letter { color:var(--success-text); }
.option.wrong-answer   .option-letter { color:var(--error-text); }

/* ── Score Screen ── */
.score-screen { display:none; }
.score-screen.visible { display:block; }
.score-hero { text-align:center; padding:2rem 0 1.5rem; }
.score-circle { width:110px; height:110px; border-radius:50%; background:var(--accent); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 1rem; box-shadow:0 4px 24px rgba(0,0,0,.15), 0 0 40px rgba(79,70,229,.15); }
.score-circle .big   { font-size:32px; font-weight:800; line-height:1; }
.score-circle .small { font-size:12px; opacity:.8; margin-top:3px; }
.score-msg { font-size:16px; color:var(--muted); margin-bottom:1.5rem; }

/* ── Review ── */
.review-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:1rem; padding-bottom:8px; border-bottom:1px solid var(--border-solid); }
.review-item { border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:1rem 1.25rem; margin-bottom:10px; background:rgba(255,255,255,.4); backdrop-filter:blur(6px); }
.review-item.correct-item { border-left:4px solid #22c55e; }
.review-item.wrong-item   { border-left:4px solid #ef4444; }
.review-row { font-size:13px; margin-bottom:4px; line-height:1.5; }
.review-row .label { font-weight:600; margin-right:6px; }
.review-row .given   { color:var(--error-text); }
.review-row .correct { color:var(--success-text); }
.review-row .ok      { color:var(--success-text); }
.review-q-text { font-size:14px; color:var(--text); margin-bottom:6px; font-weight:500; }
.review-passage { font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; }
.restart-row { text-align:center; margin-top:1.5rem; }

/* ── Home / Hub section grid ── */
.section-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:540px){ .section-grid{grid-template-columns:1fr;} }
.section-card { background:var(--card); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1.5px solid var(--card-border); border-radius:var(--radius); padding:1.5rem; box-shadow:0 4px 24px rgba(0,0,0,.06); color:var(--text); display:flex; flex-direction:column; gap:12px; transition:transform .15s,box-shadow .15s,background .15s; cursor:pointer; }
.section-card:hover { transform:translateY(-2px); box-shadow:0 4px 24px rgba(124,58,237,.12); border-color:var(--accent-mid); background:var(--card-hover); }
.section-card.disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.card-top { display:flex; align-items:center; justify-content:space-between; }
.card-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; background:var(--accent-light); backdrop-filter:blur(4px); }
.card-title { font-size:17px; font-weight:700; margin-bottom:2px; }
.card-desc  { font-size:13px; color:var(--muted); line-height:1.55; }
.card-arrow { font-size:14px; color:var(--accent-mid); font-weight:700; margin-top:auto; padding-top:8px; display:flex; align-items:center; gap:4px; transition:gap .15s; }
.section-card:hover .card-arrow { gap:8px; color:var(--accent); }
.task-list { display:flex; flex-direction:column; gap:6px; }
.task-row  { display:flex; align-items:center; gap:8px; font-size:13px; }
.task-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.task-dot.done    { background:#22c55e; }
.task-dot.soon    { background:#f59e0b; }
.task-dot.planned { background:var(--border-solid); }
.task-name.muted  { color:var(--muted); }

/* ── Hub task cards ── */
.task-card { background:var(--card); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1.5px solid var(--card-border); border-radius:var(--radius); padding:1.5rem; box-shadow:0 4px 24px rgba(0,0,0,.06); margin-bottom:14px; display:flex; align-items:flex-start; gap:1rem; color:var(--text); transition:transform .15s,box-shadow .15s,background .15s; cursor:pointer; }
.task-card:hover { transform:translateY(-2px); box-shadow:0 4px 24px rgba(124,58,237,.12); border-color:var(--accent-mid); background:var(--card-hover); }
.task-card.disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.task-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; background:var(--accent-light); backdrop-filter:blur(4px); }
.task-info { flex:1; }
.task-top  { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.task-name { font-size:16px; font-weight:700; }
.task-desc { font-size:13px; color:var(--muted); line-height:1.55; margin-bottom:8px; }
.task-meta { display:flex; gap:12px; flex-wrap:wrap; }
.meta-item { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:4px; }
.meta-item strong { color:var(--text); }
.task-card .arrow { font-size:18px; color:var(--accent-mid); flex-shrink:0; margin-top:2px; transition:color .15s; }
.task-card:hover .arrow { color:var(--accent); }

/* ── Passage / text boxes ── */
.passage-box { background:rgba(248,249,251,.7); backdrop-filter:blur(6px); border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:1rem 1.25rem; font-size:14px; line-height:1.85; color:var(--text); }
.passage-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:10px; }
.email-subject { font-weight:700; font-size:13px; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; }
.email-from    { font-size:13px; color:var(--muted); margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border-solid); }

/* ── Writing textarea ── */
.write-area { width:100%; min-height:220px; border:1.5px solid var(--card-border); border-radius:var(--radius-sm); padding:12px 14px; font-size:14px; line-height:1.75; font-family:inherit; color:var(--text); resize:vertical; background:rgba(255,255,255,.4); backdrop-filter:blur(8px); transition:border-color .15s,background .15s; outline:none; }
.write-area:focus { border-color:var(--accent); background:rgba(255,255,255,.7); }
.word-count-bar { display:flex; justify-content:space-between; align-items:center; margin-top:6px; margin-bottom:1rem; }
.word-count { font-size:12px; color:var(--muted); }
.word-count.met { color:var(--success-text); font-weight:600; }
.word-min-note { font-size:12px; color:var(--muted); }

/* ── Timer bar ── */
.timer-bar { display:flex; align-items:center; gap:10px; background:var(--accent-light); backdrop-filter:blur(8px); border:1px solid var(--accent-mid); border-radius:var(--radius-sm); padding:8px 14px; margin-bottom:1rem; }
.timer-icon  { font-size:16px; }
.timer-label { font-size:13px; color:var(--muted); flex:1; }
.timer-num   { font-size:15px; font-weight:700; color:var(--accent); min-width:50px; text-align:right; }
.timer-num.urgent { color:var(--error-text); }

/* ── AI Feedback ── */
.ai-feedback { border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden; margin-top:1.25rem; display:none; backdrop-filter:var(--blur); }
.ai-feedback-header { background:var(--accent); color:#fff; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.ai-feedback-title { font-size:14px; font-weight:700; }
.ai-score-badge { background:rgba(255,255,255,.2); backdrop-filter:blur(4px); border-radius:99px; padding:3px 12px; font-size:13px; font-weight:700; }
.ai-feedback-body { padding:1.25rem; background:rgba(255,255,255,.4); }
.ai-section { margin-bottom:1rem; }
.ai-section:last-child { margin-bottom:0; }
.ai-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
.ai-section p  { font-size:14px; line-height:1.65; color:var(--text); }
.ai-section ul { padding-left:1.25rem; }
.ai-section li { font-size:14px; line-height:1.65; color:var(--text); margin-bottom:4px; }
.ai-model-answer { background:rgba(248,249,251,.7); backdrop-filter:blur(6px); border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:1rem; font-size:14px; line-height:1.75; color:var(--text); white-space:pre-wrap; }
.loading-spinner { display:flex; align-items:center; gap:12px; padding:1rem; color:var(--muted); font-size:14px; }
.loading-dots { display:inline-flex; gap:4px; }
.loading-dots span { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:bounce 1.2s infinite; }
.loading-dots span:nth-child(2){ animation-delay:.2s; }
.loading-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ── API Key modal ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.3); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:100; display:none; }
.modal-overlay.visible { display:flex; }
.modal { background:rgba(255,255,255,.8); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1.5px solid var(--card-border); border-radius:var(--radius); padding:1.75rem; max-width:420px; width:90%; box-shadow:0 8px 40px rgba(0,0,0,.15); }
.modal h3 { font-size:16px; font-weight:700; margin-bottom:8px; }
.modal p  { font-size:13px; color:var(--muted); margin-bottom:1rem; line-height:1.6; }
.modal input { width:100%; padding:10px 12px; border:1.5px solid var(--card-border); border-radius:var(--radius-sm); font-size:14px; font-family:inherit; outline:none; margin-bottom:1rem; background:rgba(255,255,255,.5); backdrop-filter:blur(6px); }
.modal input:focus { border-color:var(--accent); background:rgba(255,255,255,.8); }

/* ── Discussion prompt box ── */
.discussion-box { background:var(--accent-light); backdrop-filter:blur(8px); border:1px solid var(--accent-mid); border-radius:var(--radius-sm); padding:1rem 1.25rem; margin-bottom:1rem; }
.discussion-professor { font-size:12px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.discussion-question  { font-size:14px; color:var(--text); line-height:1.6; font-weight:500; }
.student-response { background:rgba(255,255,255,.5); backdrop-filter:blur(6px); border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:8px; }
.student-name { font-size:12px; font-weight:700; color:var(--muted); margin-bottom:4px; }
.student-text { font-size:13px; color:var(--text); line-height:1.6; }

/* ── Audio player placeholder ── */
.audio-player { background:rgba(30,27,75,.9); backdrop-filter:blur(12px); border-radius:var(--radius-sm); padding:1rem 1.25rem; margin-bottom:1.25rem; }
.audio-top { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.play-btn { width:42px; height:42px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; flex-shrink:0; transition:transform .1s,opacity .15s; }
.play-btn:hover { opacity:.85; }
.play-btn:active { transform:scale(.95); }
.audio-info { flex:1; }
.audio-title { font-size:13px; font-weight:600; color:#fff; margin-bottom:2px; }
.audio-sub   { font-size:11px; color:rgba(255,255,255,.5); }
.audio-time  { font-size:12px; color:rgba(255,255,255,.6); font-weight:500; }
.audio-progress-wrap { background:rgba(255,255,255,.15); border-radius:99px; height:4px; overflow:hidden; cursor:pointer; }
.audio-progress-fill { height:100%; background:var(--accent); border-radius:99px; width:0%; transition:width .1s linear; }
.transcript-toggle { background:rgba(255,255,255,.1); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.75); border-radius:var(--radius-sm); padding:5px 12px; font-size:12px; cursor:pointer; font-family:inherit; margin-top:8px; transition:color .15s,border-color .15s,background .15s; }
.transcript-toggle:hover { color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.15); }
.transcript-box { background:rgba(248,249,251,.7); backdrop-filter:blur(6px); border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:1rem 1.25rem; margin-bottom:1rem; font-size:14px; line-height:1.85; color:var(--text); display:none; }
.transcript-box.visible { display:block; }
.transcript-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; }
.audio-coming-soon { background:var(--accent-light); border:1px dashed var(--accent-mid); border-radius:var(--radius-sm); padding:8px 12px; font-size:12px; color:var(--accent); text-align:center; margin-bottom:1rem; }

/* ── Heard sentence (choose-a-response) ── */
.heard-box { background:var(--accent-light); backdrop-filter:blur(8px); border:1px solid var(--accent-mid); border-radius:var(--radius-sm); padding:1rem 1.25rem; margin-bottom:1.25rem; }
.heard-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-bottom:6px; }
.heard-text  { font-size:15px; color:var(--text); font-weight:500; line-height:1.5; font-style:italic; }

/* ── Mic / Speaking UI ── */
.mic-area { display:flex; flex-direction:column; align-items:center; gap:16px; padding:2rem 0; }
.mic-btn { width:80px; height:80px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:32px; color:#fff; box-shadow:0 4px 24px rgba(0,0,0,.15); transition:transform .1s,box-shadow .15s; }
.mic-btn:hover { transform:scale(1.05); }
.mic-btn:active { transform:scale(.95); }
.mic-btn.recording { background:#ef4444; animation:pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)} 50%{box-shadow:0 0 0 16px rgba(239,68,68,0)} }
.mic-label { font-size:14px; color:var(--muted); font-weight:500; }
.mic-timer { font-size:28px; font-weight:800; color:var(--text); letter-spacing:.05em; }
.mic-status { font-size:13px; color:var(--muted); text-align:center; }
.playback-area { width:100%; display:none; }
.playback-area.visible { display:block; }

/* ── Letter inputs (complete the words) ── */
.para { font-size:15px; line-height:2.4; color:var(--text); margin-bottom:1.5rem; }
.letter-input { display:inline-block; width:22px; height:26px; border:none; border-bottom:2px solid var(--accent-mid); background:transparent; text-align:center; font-size:14px; font-weight:600; font-family:inherit; color:var(--accent); padding:0; margin:0 1px; outline:none; vertical-align:middle; transition:border-color .15s; }
.letter-input:focus { border-bottom-color:var(--accent); }
.letter-input.correct { color:var(--success-text); border-bottom-color:var(--success-text); }
.letter-input.wrong   { color:var(--error-text);   border-bottom-color:var(--error-text); }
.letter-input:disabled { opacity:1; cursor:default; }
.word-shown { font-weight:600; color:var(--text); vertical-align:middle; }

/* ── Blank indicators ── */
.blank-indicators { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:1.25rem; align-items:center; }
.blank-box { min-width:44px; height:32px; border-bottom:2px solid var(--accent-mid); border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; color:var(--accent); padding:0 6px; }
.blank-box.filled { border-bottom-color:var(--accent); }
.blank-box.empty  { color:transparent; }

/* ── Word bank ── */
.word-bank { display:flex; flex-wrap:wrap; gap:9px; min-height:40px; margin-bottom:1.25rem; }
.bank-chip { background:rgba(255,255,255,.6); backdrop-filter:blur(6px); border:1.5px solid var(--card-border); border-radius:var(--radius-sm); padding:7px 15px; font-size:14px; color:var(--text); cursor:pointer; font-family:inherit; transition:background .12s,border-color .12s,transform .1s; }
.bank-chip:hover:not(.used):not(:disabled) { background:var(--accent-light); border-color:var(--accent-mid); }
.bank-chip:active:not(.used):not(:disabled) { transform:scale(.96); }
.bank-chip.used { opacity:.2; pointer-events:none; }
.placed-chip { background:var(--accent); color:#fff; border:none; border-radius:7px; padding:4px 11px; font-size:13px; font-family:inherit; cursor:pointer; transition:opacity .15s,transform .1s; }
.placed-chip:hover:not(:disabled) { opacity:.85; }
.placed-chip:active:not(:disabled) { transform:scale(.95); }
.placed-chip:disabled { cursor:default; }

/* ── Dialogue ── */
.dialogue { display:flex; flex-direction:column; gap:12px; margin-bottom:1.5rem; }
.dlg-row  { display:flex; align-items:flex-start; gap:10px; }
.avatar   { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.avatar.a { background:rgba(219,234,254,.7); color:#1e40af; }
.avatar.b { background:rgba(254,243,199,.7); color:#92400e; }
.bubble   { background:rgba(248,249,251,.7); backdrop-filter:blur(6px); border:1px solid var(--card-border); border-radius:0 10px 10px 10px; padding:10px 14px; font-size:14px; line-height:1.65; flex:1; }
.answer-bubble { background:var(--accent-light); backdrop-filter:blur(6px); border:1.5px dashed var(--accent-mid); border-radius:0 10px 10px 10px; padding:10px 14px; flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:46px; }
.answer-bubble .prompt-word { font-size:14px; color:var(--muted); font-style:italic; margin-right:2px; }
.answer-bubble .placeholder { font-size:13px; color:var(--accent-mid); font-style:italic; }

/* ── Q number & stem ── */
.q-number { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-bottom:6px; }
.q-type-badge { display:inline-block; font-size:10px; font-weight:600; padding:2px 7px; border-radius:99px; margin-left:6px; background:var(--accent-light); color:var(--accent); vertical-align:middle; }
.q-stem { font-size:15px; font-weight:500; color:var(--text); margin-bottom:12px; line-height:1.5; }

/* ── Timing reference strip ── */
.timing-strip { padding:1.25rem 1.5rem; }
.timing-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px; }
.timing-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:8px; }
.timing-row.total { font-weight:700; margin-top:4px; }
.timing-time { font-size:12px; font-weight:600; color:var(--accent); background:var(--accent-light); backdrop-filter:blur(4px); padding:3px 10px; border-radius:99px; border:1px solid var(--accent-mid); }

/* ── Band reference ── */
.bands { display:flex; gap:6px; flex-wrap:wrap; }
.band  { flex:1; min-width:55px; border-radius:var(--radius-sm); padding:8px 10px; text-align:center; backdrop-filter:blur(4px); }
.band .band-num  { font-size:15px; font-weight:800; }
.band .band-cefr { font-size:11px; font-weight:600; margin-top:2px; }
.band .band-lbl  { font-size:10px; color:var(--muted); margin-top:1px; }
.band-1 { background:rgba(254,242,242,.6); } .band-1 .band-num,.band-1 .band-cefr { color:#ef4444; }
.band-2 { background:rgba(254,249,236,.6); } .band-2 .band-num,.band-2 .band-cefr { color:#f59e0b; }
.band-3 { background:rgba(255,251,235,.6); } .band-3 .band-num,.band-3 .band-cefr { color:#d97706; }
.band-4 { background:rgba(236,253,245,.6); } .band-4 .band-num,.band-4 .band-cefr { color:#16a34a; }
.band-5 { background:rgba(239,246,255,.6); } .band-5 .band-num,.band-5 .band-cefr { color:#2563eb; }
.band-6 { background:rgba(238,242,255,.6); } .band-6 .band-num,.band-6 .band-cefr { color:#4f46e5; }

/* ── Section label ── */
.section-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:12px; margin-top:1.5rem; }

/* ── Footer ── */
footer { text-align:center; font-size:12px; color:var(--muted); padding:1rem; margin-top:1rem; }

/* ── Responsive ── */
@media(max-width:600px){
  .app,.app-wide { padding:1.5rem .75rem 3rem; }
  .hero { padding:1.5rem 1rem 2.5rem; }
  .card { padding:1.25rem; }
  .btn-row { flex-direction:column; }
  .btn-row .btn { width:100%; justify-content:center; }
  .nav-row .btn { min-width:90px; }
  .section-grid { grid-template-columns:1fr; }
}

/* ── Circle Timer ─────────────────────────────────────────────────────────── */
.circle-timer-wrap { position:relative; width:90px; height:90px; flex-shrink:0; }
.circle-timer-wrap svg { transform:rotate(-90deg); }
.ct-bg       { fill:none; stroke:rgba(255,255,255,.3); stroke-width:7; }
.ct-progress { fill:none; stroke:var(--accent); stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.ct-label    { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:var(--text); }
.ct-label.urgent { color:var(--error-text); }

/* ── Mic Active Indicator ─────────────────────────────────────────────────── */
.mic-active { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; background:rgba(254,242,242,.7); backdrop-filter:blur(6px); border:1px solid #fecaca; border-radius:99px; font-size:13px; color:#ef4444; font-weight:600; }
.mic-dot    { width:10px; height:10px; border-radius:50%; background:#ef4444; animation:micpulse 1s infinite; }
@keyframes micpulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.75)} }

/* ── Speaking stage layout ────────────────────────────────────────────────── */
.speaking-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem 1rem; min-height:280px; gap:1.25rem; }
.stage-icon  { font-size:48px; }
.stage-title { font-size:18px; font-weight:700; color:var(--text); }
.stage-desc  { font-size:14px; color:var(--muted); max-width:320px; line-height:1.6; }

/* ── Word accuracy chips ──────────────────────────────────────────────────── */
.word-result { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:1rem 0; }
.word-chip         { padding:5px 12px; border-radius:99px; font-size:14px; font-weight:500; backdrop-filter:blur(4px); }
.word-chip.correct { background:var(--success-bg); color:var(--success-text); border:1px solid var(--success-border); }
.word-chip.wrong   { background:var(--error-bg);   color:var(--error-text);   border:1px solid var(--error-border); }
.word-chip.missing { background:rgba(243,244,246,.6); color:var(--muted); border:1px solid var(--border-solid); text-decoration:line-through; }

/* ── TTS play button (listening) ──────────────────────────────────────────── */
.tts-bar { display:flex; align-items:center; gap:12px; background:rgba(30,27,75,.9); backdrop-filter:blur(12px); border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:1rem; }
.tts-play { width:40px; height:40px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity .15s; }
.tts-play:hover { opacity:.85; }
.tts-play:disabled { opacity:.4; cursor:not-allowed; }
.tts-info { flex:1; }
.tts-title { font-size:13px; font-weight:600; color:#fff; margin-bottom:2px; }
.tts-sub   { font-size:11px; color:rgba(255,255,255,.5); }
.tts-progress-wrap { background:rgba(255,255,255,.15); border-radius:99px; height:3px; margin-top:8px; overflow:hidden; }
.tts-progress-fill { height:100%; background:var(--accent); border-radius:99px; width:0%; transition:width .5s linear; }

/* ── Language Toggle ─────────────────────────────────────────────────────── */
.lang-toggle { position:fixed; top:12px; right:12px; z-index:9999; background:rgba(30,27,75,.85); backdrop-filter:blur(8px); color:#fff; border:none; border-radius:6px; padding:6px 12px; font-size:13px; font-weight:700; cursor:pointer; letter-spacing:.5px; transition:opacity .15s; box-shadow:0 2px 12px rgba(0,0,0,.15); }
.lang-toggle:hover { opacity:.85; }

/* ── Sticky passage glass ────────────────────────────────────────────────── */
.sticky-passage { background:rgba(255,255,255,.65); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--card-border); }