/* PrepEng — signed-in app UI (dashboard, runner, calibration, results,
   support panel). Loads AFTER base.css, never on its own: it relies on the
   design tokens and .lp-/button primitives defined there. */

/* ===================================================================
   Reference dashboard suite (home.png + five practice screenshots).
   Shared by Home, Practice, and the four focused skill pages.
   =================================================================== */
.dx-practice-sub { display: none; padding: 2px 0 4px 18px; }
.dx-practice-sub.open { display: flex; flex-direction: column; gap: 1px; }
.dx-practice-sub a { padding: 7px 10px; font-size: .82rem; }
.dx-practice-sub a svg { width: 15px; height: 15px; }
.dx-practice-sub a.active { background: rgba(37,99,235,.08); }
.dx-sidebar-goal { display: block; color: inherit; text-decoration: none; }
.dx-sidebar-goal:hover { text-decoration: none; border-color: #c7d2fe; }
.dx-sidebar-goal .dx-tg-pip { display: inline-flex; align-items: center; justify-content: center; }
.dx-sidebar-goal .dx-tg-spark { color: var(--success); font-size: 1.6rem; text-align: right; }

.ref-page { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---- Dashboard: "Where am I, and what do I do now?" -------------------------
   Follows the supplied mockup: score ring, delta chip, 2x2 skill grid, next
   steps. The ring is the one chart — it pictures the estimate range rather than
   asserting a number of its own. */
.dash-home { gap: 22px; }
.dash-label {
  color: var(--text-dim); font-size: 0.74rem; font-weight: 750;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.dash-score-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 18px 20px; border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface); text-align: center;
}
.dash-ring { position: relative; width: 190px; height: 190px; margin: 10px 0 4px; }
.dash-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash-ring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.dash-ring .track { stroke: #e8ebf0; }
.dash-ring .fill {
  stroke: var(--primary);
  /* r=52 -> circumference 2*pi*52 = 326.7 */
  stroke-dasharray: 326.7;
  stroke-dashoffset: calc(326.7 - (326.7 * var(--pct, 0) / 100));
  transition: stroke-dashoffset 0.9s cubic-bezier(0.33, 0, 0.2, 1);
}
.dash-ring-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.dash-ring-mid > strong { font-size: 2.3rem; line-height: 1; letter-spacing: -0.045em; }
.dash-ring-mid > small { color: var(--text-dim); font-size: 0.92rem; }
.dash-chip {
  display: inline-flex; align-items: center; gap: 7px; margin: 4px 0 0;
  padding: 7px 14px; border-radius: 999px; background: var(--primary-soft);
  color: var(--primary); font-size: 0.85rem;
}
.dash-chip > span { width: 17px; height: 17px; display: inline-flex; }
.dash-chip svg { width: 17px; height: 17px; }
.dash-chip.up { background: #e8f8ed; color: #159447; }
.dash-chip.down { background: #fff1f2; color: #be123c; }
.dash-band-note { margin: 2px 0 0; color: var(--text-dim); font-size: 0.82rem; }
.dash-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; }
.dash-fact > b { display: block; margin: 5px 0 2px; font-size: 1.3rem; letter-spacing: -0.03em; }
.dash-fact > small { color: var(--text-dim); font-size: 0.8rem; }
.dash-block > h2 { margin: 0 0 12px; font-size: 1.15rem; letter-spacing: -0.025em; }
.dash-block > a { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.85rem; }
.dash-block > a svg { width: 15px; height: 15px; }
.dash-skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dash-skill-card {
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface);
}
.dash-skill-card.weakest { border-left: 4px solid var(--text); }
.dash-skill-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-skill-top > b { font-size: 1.45rem; letter-spacing: -0.035em; }
.dash-skill-name { font-size: 0.92rem; font-weight: 650; }
.dash-skill-bar { display: block; height: 6px; border-radius: 999px; background: #e8ebf0; overflow: hidden; }
.dash-skill-bar > b { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.dash-skill-card > small { color: var(--text-dim); font-size: 0.76rem; }
.dash-act-meta { margin: 10px 0 0; color: var(--text-dim); font-size: 0.88rem; }
/* Next steps: two tappable rows — the full mock, and the drill aimed at the
   learner's worst evidence. The drill is accented; it is the recommended one. */
.dash-next { display: grid; gap: 10px; }
.dash-next-row {
  width: 100%; min-height: 72px; display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px; align-items: center; gap: 13px;
  padding: 13px 15px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); font: inherit; text-align: left;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.dash-next-row:hover:not(:disabled) { border-color: #c7d2e4; background: #fbfcfe; }
.dash-next-row:disabled { opacity: 0.6; cursor: wait; }
.dash-next-row.accent { border-color: var(--primary); background: linear-gradient(110deg, #fbfdff, #eef4ff); }
.dash-next-row .ref-chev { display: inline-flex; color: var(--text-dim); }
.dash-next-row .ref-chev svg { width: 18px; height: 18px; }
.dash-skill-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dash-skill-main > b { font-size: 0.95rem; }
.dash-skill-main > small { color: var(--text-dim); font-size: 0.81rem; }
.dash-weak { display: grid; }
/* Pressable: each row opens a drill for its skill. */
.dash-weak-row {
  width: 100%; display: grid; grid-template-columns: 10px minmax(0, 1fr) 18px;
  align-items: center; gap: 13px; padding: 13px 4px; border: 0;
  border-bottom: 1px solid var(--border); background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  border-radius: 8px; transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.dash-weak-row:hover:not(:disabled) { background: #f6f8fb; }
.dash-weak-row:disabled { opacity: 0.6; cursor: wait; }
.dash-weak-row .ref-chev { display: inline-flex; color: var(--text-dim); }
.dash-weak-row .ref-chev svg { width: 16px; height: 16px; }
.dash-weak > :last-child { border-bottom: 0; }
.dash-weak-dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.dash-weak-row.high .dash-weak-dot { background: #e11d48; }
.dash-weak-row.medium .dash-weak-dot { background: #f0a91b; }
.dash-weak-row.low .dash-weak-dot { background: #64748b; }

@media (max-width: 640px) {
  .dash-ring { width: 172px; height: 172px; }
  .dash-ring-mid > strong { font-size: 2.05rem; }
  .dash-facts { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 14px; }
  .dash-fact > b { font-size: 1.12rem; }
  .dash-cta { width: 100%; }
  .dash-skill-top > b { font-size: 1.25rem; }
}
@media (min-width: 900px) {
  .dash-skill-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ref-head h1 { margin: 0 0 4px; font-size: clamp(1.8rem,3vw,2.35rem); letter-spacing: -.035em; }
.ref-head p { margin: 0; color: var(--text-dim); font-size: .98rem; }
.ref-page .card { border-radius: 14px; box-shadow: 0 2px 10px rgba(15,23,42,.035); }
.ref-page h2 { margin: 0; font-size: 1.02rem; letter-spacing: -.01em; }
.ref-page a { font-weight: 700; font-size: .86rem; }
.ref-page a svg, .ref-page button svg { width: 16px; height: 16px; }
.ref-grid { display: grid; gap: 18px; min-width: 0; }
.ref-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ref-grid-2 { grid-template-columns: 1.05fr 1fr; }
.ref-grid-2-even { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ref-panel { padding: 20px; min-width: 0; }
.ref-panel > h2 { margin-bottom: 16px; }
.ref-panel > a { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; }
.ref-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.ref-panel-head h2 { margin: 0; }

.ref-home-plan { display: grid; grid-template-columns: minmax(0,1fr) 320px; padding: 28px 32px; gap: 34px; }
.ref-plan-copy h1 { margin: 0; font-size: clamp(1.65rem,2.7vw,2.15rem); letter-spacing: -.035em; }
.ref-plan-copy > p { margin: 7px 0 18px; color: var(--text-dim); }
.ref-score-summary { display: flex; flex-direction: column; justify-content: center; padding-left: 34px; border-left: 1px solid var(--border); }
.ref-score-summary > span { color: var(--text-dim); font-size: .84rem; }
.ref-score-summary strong { color: var(--primary); font-size: 2.3rem; line-height: 1; margin-top: 6px; }
.ref-score-summary strong.target { margin-top: 22px; color: var(--text); }
.ref-score-summary strong small { margin-left: 3px; color: var(--text-faint); font-size: .95rem; }
.ref-score-summary em { margin-top: 5px; color: var(--text-dim); font-size: .78rem; font-style: normal; font-weight: 700; }

.ref-list { display: flex; flex-direction: column; min-width: 0; }
.ref-list-row { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-bottom: 0; background: #fff; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.ref-list-row .ref-row-main, .ref-list-row > b { flex: 1; min-width: 0; }
.ref-list-row:first-child { border-radius: 10px 10px 0 0; }
.ref-list-row:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 10px 10px; }
.ref-list-row:only-child { border-radius: 10px; }
.ref-list-row:hover:not(:disabled) { z-index: 1; border-color: #bfd1ff; background: #f8faff; text-decoration: none; }
.ref-list-row:disabled { cursor: default; opacity: .6; }
.ref-list-row > b, .ref-list-row > strong { font-size: .84rem; }
.ref-row-main { display: flex; min-width: 0; flex-direction: column; }
.ref-row-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.ref-row-main small { overflow: hidden; color: var(--text-faint); font-size: .74rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ref-list.compact .ref-list-row { padding: 9px 10px; }
.ref-list.compact .ref-icon { width: 32px; height: 32px; border-radius: 9px; }
.ref-time { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: .78rem; white-space: nowrap; }
.ref-time i { display: inline-flex; }
.ref-chev { display: inline-flex; color: var(--text-faint); }
.ref-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; }
.ref-icon svg { width: 19px !important; height: 19px !important; }
.ref-icon.large { width: 52px; height: 52px; border-radius: 13px; }
.ref-icon.reading, .ref-hero-icon.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.ref-icon.listening, .ref-hero-icon.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.ref-icon.speaking, .ref-hero-icon.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.ref-icon.writing, .ref-hero-icon.writing { background: var(--c-writing-soft); color: var(--c-writing); }
.ref-icon.full { background: var(--primary-soft); color: var(--primary); }
.ref-actions { display: flex; align-items: center; gap: 28px; margin-top: 16px; }
.ref-actions .btn { display: inline-flex; min-width: 220px; justify-content: center; gap: 8px; }
.ref-actions a { display: inline-flex; align-items: center; gap: 7px; }

.ref-progress-list { display: flex; flex-direction: column; gap: 13px; }
.ref-progress-list.spacious { gap: 20px; }
.ref-progress-row { display: grid; grid-template-columns: 80px minmax(70px,1fr) auto; align-items: center; gap: 12px; font-size: .8rem; }
.ref-progress-row > i { height: 6px; overflow: hidden; border-radius: 99px; background: var(--dx-track); }
.ref-progress-row > i b { display: block; height: 100%; border-radius: inherit; }
.ref-progress-row > i b.reading { background: var(--c-reading); }
.ref-progress-row > i b.listening { background: var(--c-listening); }
.ref-progress-row > i b.speaking { background: var(--c-speaking); }
.ref-progress-row > i b.writing { background: var(--c-writing); }
.ref-progress-row strong { font-size: .75rem; text-align: right; }
.ref-meter { height: 7px; overflow: hidden; margin: 18px 0; border-radius: 99px; background: var(--dx-track); }
.ref-meter span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.ref-feature-line { display: flex; align-items: center; gap: 12px; }
.ref-feature-line > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ref-feature-line b { font-size: .9rem; }
.ref-feature-line small { margin-top: 3px; color: var(--text-faint); font-size: .77rem; }
.ref-empty { padding: 14px 0; color: var(--text-dim); text-align: center; }
.ref-empty > span { display: inline-flex; color: var(--success); }
.ref-empty svg { width: 26px !important; height: 26px !important; }
.ref-link-button { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 0; background: transparent; color: var(--primary); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }

.ref-tip-list { display: flex; flex-direction: column; gap: 16px; }
.ref-tip-list > div { display: flex; align-items: flex-start; gap: 12px; }
.ref-tip-list p { display: flex; flex-direction: column; margin: 2px 0 0; }
.ref-tip-list b { font-size: .85rem; }
.ref-tip-list small { margin-top: 3px; color: var(--text-dim); font-size: .75rem; line-height: 1.4; }
.ref-check-list { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.ref-check-list > div { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: .82rem; }
.ref-check-list span { display: inline-flex; color: var(--c-writing); }
.ref-check-list p { margin: 0; }
.ref-status { padding: 4px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-faint); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.ref-status.scored, .ref-status.good { background: var(--c-listening-soft); color: var(--c-listening); }
.ref-status.avg { background: var(--c-writing-soft); color: #b45309; }

.ref-practice-hero { display: grid; grid-template-columns: 110px minmax(0,1fr) 370px; gap: 30px; align-items: center; padding: 28px; }
.ref-hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 82px; height: 82px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); }
.ref-hero-icon svg { width: 40px !important; height: 40px !important; }
.ref-hero-copy h2, .ref-skill-hero h2, .ref-listening-hero h2, .ref-speaking-hero h2 { margin: 0 0 7px; font-size: 1.55rem; letter-spacing: -.025em; }
.ref-hero-copy > p, .ref-skill-hero p, .ref-speaking-hero p { margin: 0; color: var(--text-dim); line-height: 1.5; }
.ref-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 17px; margin-top: 15px; color: var(--text-dim); font-size: .8rem; }
.ref-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.ref-meta i { display: inline-flex; }
.ref-meta b { color: var(--text); }
.ref-skill-box { padding: 18px; border: 1px solid var(--border); border-radius: 12px; }
.ref-skill-box > b { display: block; margin-bottom: 12px; font-size: .82rem; }
.ref-skill-box > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ref-skill-box a { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-weight: 600; }
.ref-section-title { margin: 2px 0 12px; }
.ref-skill-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.ref-skill-card { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.ref-skill-card > div { display: flex; align-items: center; gap: 14px; }
.ref-skill-card > div > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ref-skill-card b { font-size: .95rem; }
.ref-skill-card small { color: var(--text-dim); font-size: .75rem; margin-top: 4px; }
.ref-practice-bottom { grid-template-columns: minmax(0,1.4fr) minmax(300px,.8fr); }

.ref-skill-hero-grid { grid-template-columns: minmax(0,1.55fr) minmax(330px,.9fr); }
.ref-skill-hero { display: grid; grid-template-columns: 120px minmax(0,1fr); align-items: center; gap: 24px; padding: 24px; }
.ref-skill-hero .ref-actions { grid-column: 2; }
.ref-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .73rem; font-style: normal; font-weight: 700; }
.ref-kicker.plain { padding: 0; background: transparent; color: var(--text); }
.ref-kicker i { display: inline-flex; color: var(--c-speaking); }
.ref-snapshot h2 { display: flex; align-items: center; gap: 8px; }
.ref-snapshot h2 > span { display: inline-flex; color: var(--primary); }
.ref-snapshot-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; margin-top: 9px; font-size: .78rem; }
.ref-snapshot-row strong { max-width: 220px; font-size: .82rem; text-align: right; }

.ref-listening-hero { display: grid; grid-template-columns: 150px minmax(0,1fr) 270px; align-items: center; gap: 28px; padding: 24px; }
.ref-listening-hero > aside { display: flex; flex-direction: column; gap: 18px; padding-left: 24px; border-left: 1px solid var(--border); }
.ref-audio { display: grid; grid-template-columns: 38px auto minmax(100px,1fr) auto; align-items: center; gap: 12px; margin-top: 17px; color: var(--text-dim); font-size: .78rem; }
.ref-audio button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; }
.ref-audio i { height: 7px; overflow: hidden; border-radius: 99px; background: var(--dx-track); }
.ref-audio i b { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.ref-badge { padding: 4px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.ref-badge.listening { background: var(--c-listening-soft); color: var(--c-listening); }

.ref-speaking-hero-grid { grid-template-columns: minmax(0,1fr) 270px; }
.ref-speaking-hero { display: grid; grid-template-columns: minmax(0,1fr) 480px; align-items: center; gap: 20px; padding: 24px; }
.ref-mic-visual { display: grid; grid-template-columns: 1fr 100px 1fr; align-items: center; gap: 20px; text-align: center; }
.ref-mic-visual > span svg { max-width: 100%; }
.ref-mic-visual > button { display: inline-flex; align-items: center; justify-content: center; width: 100px; height: 100px; border: 8px solid #f3e8ff; border-radius: 50%; background: linear-gradient(145deg,#a855f7,#6d28d9); color: #fff; box-shadow: 0 8px 30px rgba(124,58,237,.25); }
.ref-mic-visual > button svg { width: 34px !important; height: 34px !important; }
.ref-mic-visual small { grid-column: 1 / -1; color: var(--text-faint); }
.ref-level-card { display: flex; flex-direction: column; padding: 24px; }
.ref-level-card > span { display: inline-flex; color: var(--primary); }
.ref-level-card > h2 { margin: 12px 0 20px; }
.ref-level-card > strong { color: var(--primary); font-size: 1.55rem; line-height: 1.3; }
.ref-level-card > em { align-self: flex-start; margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .72rem; font-style: normal; font-weight: 700; }
.ref-level-card > p { margin: auto 0 0; color: var(--text-dim); font-size: .78rem; }

.ref-writing-hero { padding: 22px; }
.ref-writing-hero > h2 { margin-bottom: 18px; }
.ref-writing-hero > div { display: flex; align-items: flex-start; gap: 18px; }
.ref-writing-hero > div > span:last-child { min-width: 0; }
.ref-writing-hero p { margin: 4px 0 0; color: var(--text-dim); }

@media (max-width: 1100px) {
  .ref-grid-3, .ref-practice-hero, .ref-listening-hero { grid-template-columns: 1fr 1fr; }
  .ref-practice-hero .ref-skill-box, .ref-listening-hero > aside { grid-column: 1 / -1; }
  .ref-listening-hero > aside { border-left: 0; border-top: 1px solid var(--border); padding: 18px 0 0; }
  .ref-speaking-hero { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* minmax(0,1fr), not 1fr: a bare 1fr track is minmax(auto,1fr) and refuses to
     shrink below its content's min-content, so nowrap text / fixed-width buttons
     push the single column wider than the viewport and get clipped. */
  .ref-home-plan, .ref-skill-hero-grid, .ref-speaking-hero-grid, .ref-grid-2, .ref-grid-2-even, .ref-practice-bottom { grid-template-columns: minmax(0, 1fr); }
  .ref-score-summary { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .ref-skill-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .ref-grid-3, .ref-practice-hero, .ref-listening-hero { grid-template-columns: minmax(0, 1fr); }
  .ref-home-plan, .ref-panel, .ref-practice-hero, .ref-listening-hero { padding: 18px; }
  .ref-practice-hero .ref-skill-box, .ref-listening-hero > aside { grid-column: auto; }
  .ref-skill-cards { grid-template-columns: 1fr; }
  .ref-skill-hero { grid-template-columns: 1fr; }
  .ref-skill-hero .ref-actions { grid-column: auto; }
  .ref-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .ref-actions .btn { width: 100%; min-width: 0; }
  .ref-list-row { grid-template-columns: auto minmax(0,1fr) auto; }
  .ref-list-row > .ref-time, .ref-list-row > .ref-status, .ref-list-row > strong { display: none; }
  .ref-mic-visual { grid-template-columns: 1fr 80px 1fr; }
  .ref-mic-visual > button { width: 80px; height: 80px; }
}

/* ===================================================================
   Dashboard v2 (the redesigned /app overview). Self-contained — does
   not affect history/account, which still use the shared shell.
   Per-skill brand colours: reading=blue, listening=green,
   speaking=purple, writing=orange.
   =================================================================== */
:root {
  --c-reading: #2563eb;   --c-reading-soft: #eaf1ff;
  --c-listening: #10b981; --c-listening-soft: #e7f8f1;
  --c-speaking: #8b5cf6;  --c-speaking-soft: #f1ebfe;
  --c-writing: #f59e0b;   --c-writing-soft: #fef3e2;
  --dx-track: #eef0f4;
}

.dx-content { max-width: 1280px; }

/* --- Sidebar (richer than the shared shell) --- */
.dx-sidebar { padding: 18px 14px; gap: 14px; }
.dx-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em;
  color: var(--text);
}
.dx-logo:hover { text-decoration: none; }
.dx-logo .dx-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--primary); color: #fff;
}
.dx-logo .dx-logo-mark svg { width: 20px; height: 20px; }

.dx-usercard {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.dx-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), #1e3a8a);
  color: #fff; font-weight: 700; font-size: 0.9rem;
}
.dx-usercard .dx-uc-name { font-weight: 700; font-size: 0.9rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.dx-usercard .dx-uc-role { font-size: 0.76rem; color: var(--text-faint); }
.dx-usercard .dx-uc-chev { margin-left: auto; color: var(--text-faint); }
.dx-usercard .dx-uc-chev svg { width: 16px; height: 16px; }

.dx-menu-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 4px 10px; margin-top: 2px;
}
.dx-nav { display: flex; flex-direction: column; gap: 2px; }
.dx-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px;
  color: var(--text-dim); font-size: 0.9rem; font-weight: 500;
}
.dx-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.dx-nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.dx-nav a svg { width: 18px; height: 18px; flex: none; }
.dx-nav .dx-aa { font-weight: 800; font-size: 0.95rem; width: 18px; text-align: center; flex: none; }
.dx-nav-soon {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px;
  color: var(--text-dim); font-size: 0.9rem; font-weight: 500;
  opacity: 0.6; cursor: not-allowed; user-select: none;
}
.dx-nav-soon svg { width: 18px; height: 18px; flex: none; }
.dx-nav .dx-soon {
  margin-left: auto; flex: none;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn);
}

.dx-premium {
  margin-top: auto;
  border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; background: linear-gradient(165deg, #fff, var(--surface-2));
}
.dx-premium .dx-prem-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.dx-premium .dx-prem-head svg { width: 18px; height: 18px; color: var(--warn); }
.dx-premium p { font-size: 0.82rem; color: var(--text-dim); margin: 8px 0 14px; }
.dx-premium .dx-prem-bar { height: 6px; border-radius: 999px; background: var(--dx-track); overflow: hidden; }
.dx-premium .dx-prem-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.dx-premium .dx-prem-tip { font-size: 0.74rem; color: var(--text-faint); margin: 6px 0 12px; }

/* --- Target TOEFL Score card (paid members) — 1:1 with the design mockup.
   Indigo accent, big legacy "100+" headline, pill band picker, "on track" line
   with a green sparkline. Container class is .dx-goal-card, NOT .dx-target (that
   class is the dashboard overview's inline target widget below, and would win). */
.dx-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.dx-goal-card {
  --goal-accent: #5b4de4;
  border: 1px solid var(--border); border-radius: 16px;
  padding: 14px; background: #fff;
}
.dx-tg-skeleton { font-size: 0.82rem; color: var(--text-faint); }
.dx-tg-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 0.9rem; color: var(--text); white-space: nowrap;
}
.dx-tg-head svg { width: 18px; height: 18px; color: var(--goal-accent); flex: none; }
.dx-tg-big { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--text); margin-top: 12px; }
.dx-tg-big.dx-tg-unset { color: var(--text-faint); }
.dx-tg-sub { display: block; font-size: 0.78rem; color: var(--text-dim); margin-top: 6px; }
.dx-tg-pick {
  display: flex; align-items: center; gap: 1px;
  background: var(--dx-track); border-radius: 12px; padding: 4px; margin: 12px 0 14px;
}
.dx-tg-pip {
  flex: 1; padding: 7px 0; border: 0; border-radius: 9px; background: transparent;
  color: var(--text-dim); font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: all 0.14s;
}
.dx-tg-pip:hover:not(:disabled):not(.active) { color: var(--goal-accent); }
.dx-tg-pip.active {
  background: linear-gradient(135deg, #6f63f2, #5746e3); color: #fff;
  box-shadow: 0 4px 10px rgba(91, 77, 228, 0.35);
}
.dx-tg-pip:disabled { cursor: default; }
.dx-tg-track-label { display: block; font-size: 0.78rem; color: var(--text-dim); }
.dx-tg-achieve { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 3px; }
.dx-tg-band-text { font-size: 0.82rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; white-space: nowrap; }
.dx-tg-spark { flex: none; width: 46px; height: 22px; }

/* --- Top bar (search + bell + plan pill) --- */
.dx-topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.dx-topbar-spacer { flex: 1; }
.dx-search { position: relative; flex: 1; max-width: 560px; }
.dx-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-faint); pointer-events: none; }
.dx-search input { padding: 11px 14px 11px 42px; border-radius: 12px; background: var(--surface-2); }
.dx-search kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: inherit; font-size: 0.72rem; font-weight: 600; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; background: var(--surface);
}
.dx-bell {
  position: relative; flex: none; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text-dim); cursor: pointer;
}
.dx-bell svg { width: 19px; height: 19px; }
.dx-bell .dx-dot { position: absolute; top: 9px; right: 11px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--danger); border: 1.5px solid var(--surface); }
.dx-plan {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 12px;
  background: #111827; color: #fff; font-weight: 600; white-space: nowrap;
}
.dx-plan:hover { text-decoration: none; color: #fff; }
.dx-plan svg { width: 16px; height: 16px; color: #fbbf24; }
.dx-plan .dx-plan-sub { font-size: 0.72rem; color: rgba(255,255,255,0.6); line-height: 1; }
.dx-plan .dx-plan-main { font-size: 0.9rem; line-height: 1.1; }

/* --- Settings tab --- */
.dx-settings-content { max-width: 1320px; }
.set-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-top: 8px;
}
.set-head h1 { margin: 0 0 4px; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.set-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.set-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.set-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.set-card-head h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.set-edit {
  flex: none;
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  color: var(--text-dim); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 10px; cursor: pointer;
}
.set-edit:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.set-profile {
  display: flex; align-items: center; gap: 14px;
  padding: 2px 0 14px;
}
.set-photo {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #fff; font-weight: 800; font-size: 1.25rem;
}
.set-profile-name { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.set-profile-role { font-size: 0.86rem; color: var(--text-dim); }
.set-list { display: flex; flex-direction: column; }
.set-row, .set-action-row, .set-switch-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-width: 0;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.set-list > :first-child { border-top: none; }
.set-action-row {
  font: inherit; text-align: left; color: inherit;
  background: transparent; border-left: 0; border-right: 0; border-bottom: 0;
  cursor: pointer;
}
.set-action-row:hover .set-row-title { color: var(--primary); }
.set-switch-row { cursor: pointer; }
.set-ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim); background: var(--surface-2);
}
.set-ic svg { width: 19px; height: 19px; }
.set-ic.blue { background: var(--primary-soft); color: var(--primary); }
.set-ic.green { background: var(--success-soft); color: var(--success); }
.set-ic.orange { background: var(--warn-soft); color: var(--warn); }
.set-ic.purple { background: var(--c-speaking-soft); color: var(--c-speaking); }
.set-ic.red { background: #fee2e2; color: var(--danger); }
.set-ic.slate { background: #f1f5f9; color: #64748b; }
.set-row-copy {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
.set-row-title {
  color: var(--text); font-size: 0.88rem; font-weight: 700;
  line-height: 1.25;
}
.set-row-desc {
  display: block; color: var(--text-dim); font-size: 0.76rem;
  line-height: 1.3;
}
.set-row-value {
  flex: none; max-width: 45%;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-dim); font-size: 0.84rem; font-weight: 600;
  text-align: right; line-height: 1.25;
}
.set-row-value.linkish { color: var(--primary); }
.set-chev { display: inline-flex; color: var(--primary); }
.set-chev svg { width: 15px; height: 15px; }
.switch {
  flex: none; position: relative; width: 38px; height: 22px;
  display: inline-flex;
}
.switch input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0;
}
.switch span {
  position: absolute; inset: 0; border-radius: 999px;
  background: #e5e7eb; transition: background 0.15s;
}
.switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.15s;
}
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(16px); }

.set-subscription { grid-column: span 2; }
.set-plan-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 18px;
  padding: 20px; border-radius: 12px;
  background: #0f172a; color: #fff;
}
.set-plan-star {
  width: 52px; height: 52px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12); color: #fff;
}
.set-plan-star svg { width: 24px; height: 24px; }
.set-plan-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.set-plan-status {
  font-size: 0.72rem; font-weight: 800; padding: 3px 9px;
  border-radius: 999px; background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.75);
}
.set-plan-status.active { background: rgba(16,185,129,0.18); color: #34d399; }
.set-plan-price { margin-top: 4px; font-weight: 800; }
.set-plan-billing { margin-top: 2px; font-size: 0.82rem; color: rgba(255,255,255,0.74); }
.set-plan-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding-left: 22px; border-left: 1px solid rgba(255,255,255,0.16);
}
.set-plan-actions .btn-ghost { background: #fff; border-color: #fff; color: var(--text); }
.set-plan-link {
  font: inherit; font-size: 0.82rem; font-weight: 700;
  color: #bfdbfe; background: transparent; border: 0; cursor: pointer;
}
.set-plan-link:hover { color: #fff; }
.set-plan-perks {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  margin: 14px 2px 0; color: var(--text-dim); font-size: 0.82rem; font-weight: 600;
}
.set-plan-perks span { display: inline-flex; align-items: center; gap: 6px; }
.set-plan-perks svg { width: 15px; height: 15px; color: var(--success); }
.set-plan-note {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 12px 14px; border-radius: 10px;
  background: var(--primary-soft); color: var(--text-dim);
  font-size: 0.86rem;
}
.set-plan-note svg { width: 17px; height: 17px; color: var(--primary); }
.set-plan-note .btn { margin-left: auto; }
.set-billing-empty {
  margin-top: 14px; color: var(--text-faint); font-size: 0.84rem;
}
.set-billing-list { margin-top: 14px; border-top: 1px solid var(--border); }
.set-billing-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}

@media (max-width: 1180px) {
  .set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .set-head { flex-direction: column; }
  .set-grid { grid-template-columns: 1fr; }
  .set-subscription { grid-column: auto; }
  .set-plan-card { grid-template-columns: 1fr; }
  .set-plan-actions { padding-left: 0; border-left: 0; }
  .set-row-value { max-width: 40%; }
}

/* --- Hero progress panel --- */
.dx-hero { padding: 24px 26px; }
.dx-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dx-hero h2 { font-size: 1rem; margin: 0 0 14px; }
.dx-hero-score { display: flex; align-items: baseline; gap: 2px; }
.dx-hero-score .num { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); line-height: 1; }
.dx-hero-score .max { font-size: 1.2rem; font-weight: 700; color: var(--text-faint); }
.dx-hero-eyebrow { font-size: 0.82rem; color: var(--text-dim); margin: 0 0 4px; }
.dx-target { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-dim); }
.dx-target b { color: var(--text); }
.dx-target .dx-edit { color: var(--text-faint); cursor: pointer; display: inline-flex; }
.dx-target .dx-edit svg { width: 15px; height: 15px; }
.dx-hero-updated { font-size: 0.82rem; color: var(--text-faint); }

.dx-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 12px; }
.dx-bar { height: 8px; border-radius: 999px; background: var(--dx-track); overflow: hidden; }
.dx-bar > span { display: block; height: 100%; border-radius: 999px; transition: width 0.5s cubic-bezier(0.16,1,0.3,1); }
.dx-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dx-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.dx-legend-item .dx-led { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dx-legend-item .dx-lscore { margin-left: auto; color: var(--text-faint); font-weight: 600; }

.bar-reading > span, .dx-led.reading { background: var(--c-reading); }
.bar-listening > span, .dx-led.listening { background: var(--c-listening); }
.bar-speaking > span, .dx-led.speaking { background: var(--c-speaking); }
.bar-writing > span, .dx-led.writing { background: var(--c-writing); }

/* --- Section heads with "View all" --- */
.dx-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 0; }
.dx-sec-head h2 { font-size: 1.1rem; margin: 0; }
.dx-link { font-size: 0.88rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.dx-link svg { width: 15px; height: 15px; }

/* --- Skill icon tiles --- */
.dx-ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dx-ic svg { width: 22px; height: 22px; }
.dx-ic.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-ic.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-ic.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-ic.writing { background: var(--c-writing-soft); color: var(--c-writing); }

/* --- Recent practice cards --- */
.dx-practice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dx-practice-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; cursor: pointer; }
.dx-practice-card:hover { border-color: var(--primary); }
.dx-pc-top { display: flex; gap: 12px; align-items: flex-start; }
.dx-pc-title { font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.dx-pc-sub { font-size: 0.8rem; color: var(--text-faint); }
.dx-pc-foot { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--text-dim); margin-top: auto; }
.dx-pc-foot .dx-chev { color: var(--text-faint); }
.dx-pc-foot .dx-chev svg { width: 16px; height: 16px; }

/* --- 4-up middle grid --- */
.dx-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.dx-panel { padding: 18px 20px; display: flex; flex-direction: column; }
.dx-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dx-panel-head h3 { font-size: 1rem; margin: 0; }
.dx-panel-head .dx-ph-meta { font-size: 0.78rem; color: var(--text-faint); display: inline-flex; align-items: center; gap: 6px; }
.dx-panel-head .dx-ph-meta svg { width: 14px; height: 14px; }
.dx-panel-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.dx-panel-foot a { font-size: 0.88rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.dx-panel-foot a svg { width: 15px; height: 15px; }

/* Skill overview rows */
.dx-skill-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.dx-skill-row .dx-mini-ic { width: 22px; flex: none; display: inline-flex; }
.dx-skill-row .dx-mini-ic svg { width: 18px; height: 18px; }
.dx-skill-row.reading .dx-mini-ic { color: var(--c-reading); }
.dx-skill-row.listening .dx-mini-ic { color: var(--c-listening); }
.dx-skill-row.speaking .dx-mini-ic { color: var(--c-speaking); }
.dx-skill-row.writing .dx-mini-ic { color: var(--c-writing); }
.dx-skill-row .dx-sk-name { font-size: 0.88rem; font-weight: 500; width: 70px; flex: none; }
.dx-skill-row .dx-bar { flex: 1; }
.dx-skill-row .dx-sk-score { font-size: 0.82rem; font-weight: 600; color: var(--text-dim); width: 56px; text-align: right; flex: none; }
.dx-overall {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 0.9rem; font-weight: 600;
}
.dx-overall .dx-pill { background: var(--primary-soft); color: var(--primary); padding: 4px 12px; border-radius: 999px; font-weight: 700; }

/* Today's plan checklist */
.dx-plan-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.dx-check {
  flex: none; width: 20px; height: 20px; border-radius: 6px; margin-top: 1px;
  border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center;
  color: transparent; background: var(--surface);
}
.dx-check.done { background: var(--success); border-color: var(--success); color: #fff; }
.dx-check svg { width: 13px; height: 13px; }
.dx-plan-item .dx-pi-title { font-size: 0.88rem; font-weight: 600; }
.dx-plan-item.done .dx-pi-title { color: var(--text-faint); text-decoration: line-through; }
.dx-plan-item .dx-pi-meta { font-size: 0.78rem; color: var(--text-faint); }
.dx-pi-meta .dx-prog { color: var(--primary); font-weight: 600; }

/* Vocabulary ring */
.dx-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; }
.dx-ring { position: relative; width: 150px; height: 150px; }
.dx-ring svg { transform: rotate(-90deg); }
.dx-ring .dx-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dx-ring .dx-ring-num { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.dx-ring .dx-ring-of { font-size: 0.78rem; color: var(--text-faint); }
.dx-ring-label { font-size: 0.85rem; color: var(--text-dim); margin-top: 6px; }
.dx-ring-pct { font-size: 1.05rem; font-weight: 800; color: var(--success); }

/* Practice modules 2x2 */
.dx-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dx-module { padding: 14px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; }
.dx-module:hover { border-color: var(--border); }
.dx-module.reading { background: var(--c-reading-soft); }
.dx-module.listening { background: var(--c-listening-soft); }
.dx-module.speaking { background: var(--c-speaking-soft); }
.dx-module.writing { background: var(--c-writing-soft); }
.dx-module .dx-mod-ic { display: inline-flex; margin-bottom: 10px; }
.dx-module .dx-mod-ic svg { width: 20px; height: 20px; }
.dx-module.reading .dx-mod-ic { color: var(--c-reading); }
.dx-module.listening .dx-mod-ic { color: var(--c-listening); }
.dx-module.speaking .dx-mod-ic { color: var(--c-speaking); }
.dx-module.writing .dx-mod-ic { color: var(--c-writing); }
.dx-module .dx-mod-name { font-weight: 700; font-size: 0.88rem; }
.dx-module .dx-mod-sub { font-size: 0.76rem; color: var(--text-dim); }

/* --- Bottom split: performance table + activity --- */
.dx-grid-2-1 { display: grid; grid-template-columns: 1.9fr 1fr; gap: 16px; align-items: stretch; }
.dx-perf { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.dx-perf th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-faint); font-weight: 600; padding: 0 10px 12px; }
.dx-perf td { padding: 12px 10px; border-top: 1px solid var(--border); vertical-align: middle; }
.dx-perf .dx-perf-skill { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.dx-perf .dx-mini-ic svg { width: 18px; height: 18px; }
.dx-perf .reading .dx-mini-ic { color: var(--c-reading); }
.dx-status { font-size: 0.74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.dx-status.good { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-status.excellent { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-status.fair { background: var(--warn-soft); color: var(--warn); }
.dx-status.none { background: var(--surface-2); color: var(--text-faint); }
.dx-spark { width: 64px; height: 22px; display: block; }

/* Recent activity timeline */
.dx-activity { display: flex; flex-direction: column; }
.dx-act { display: flex; gap: 12px; padding: 11px 0; }
.dx-act + .dx-act { border-top: 1px solid var(--border); }
.dx-act-ic {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dx-act-ic svg { width: 17px; height: 17px; }
.dx-act-ic.success { background: var(--success-soft); color: var(--success); }
.dx-act-ic.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-act-ic.writing { background: var(--c-writing-soft); color: var(--c-writing); }
.dx-act-ic.streak { background: var(--warn-soft); color: var(--warn); }
.dx-act .dx-act-title { font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
.dx-act .dx-act-meta { font-size: 0.78rem; color: var(--text-faint); }

.dx-act-ic.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-act-ic.listening { background: var(--c-listening-soft); color: var(--c-listening); }

/* ===================================================================
   Practice Tests tab
   =================================================================== */
.dx-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dx-stat-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.dx-stat-ic { flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; }
.dx-stat-ic svg { width: 23px; height: 23px; }
.dx-stat-ic.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-stat-ic.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-stat-ic.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-stat-ic.writing { background: var(--c-writing-soft); color: var(--c-writing); }
.dx-stat-label { font-size: 0.82rem; color: var(--text-dim); }
.dx-stat-num { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 2px 0; }
.dx-stat-sub { font-size: 0.78rem; color: var(--text-faint); }

.dx-practice-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.dx-pmain-left, .dx-pmain-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Featured mock */
.dx-featured { display: flex; gap: 22px; background: linear-gradient(160deg, var(--primary-soft), var(--surface)); }
.dx-feat-art {
  flex: none; width: 120px; height: 120px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border); color: var(--primary);
}
.dx-feat-art svg { width: 56px; height: 56px; }
.dx-feat-body { min-width: 0; flex: 1; }
.dx-feat-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.dx-feat-ic { flex: none; color: var(--text-faint); display: inline-flex; }
.dx-feat-ic svg { width: 18px; height: 18px; }
.dx-feat-k { font-size: 0.78rem; color: var(--text-faint); }
.dx-feat-v { font-size: 0.9rem; font-weight: 600; }

/* Section tests */
.dx-section-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dx-sectest { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.dx-sectest .dx-bar { width: 100%; }
.dx-sectest-foot { font-size: 0.78rem; }

.dx-attempts tr td { cursor: pointer; }
.dx-attempts tbody tr:hover td { background: var(--surface-2); }
.dx-attempts td:last-child svg { width: 16px; height: 16px; }

/* Right column: schedule */
.dx-sched { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.dx-sched + .dx-sched { border-top: 1px solid var(--border); }
.dx-sched-date {
  flex: none; width: 46px; text-align: center; border-radius: 10px;
  background: var(--surface-2); padding: 6px 0; line-height: 1.1;
  display: flex; flex-direction: column;
}
.dx-sched-date span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-faint); }
.dx-sched-date b { font-size: 1rem; }

/* Right column: recommended */
.dx-reco { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; }
.dx-reco + .dx-reco { border-top: 1px solid var(--border); }
.dx-reco:hover .dx-act-title { color: var(--primary); }
.dx-reco .faint svg { width: 16px; height: 16px; }

/* Right column: tips */
.dx-tip { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.88rem; }
.dx-tip-ic { flex: none; color: var(--success); display: inline-flex; }
.dx-tip-ic svg { width: 18px; height: 18px; }

/* ===================================================================
   Reading Practice tab
   =================================================================== */
.dx-rstat { padding: 16px 18px; }
.dx-rstat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dx-rstat-label { font-size: 0.85rem; color: var(--text-dim); font-weight: 500; }
.dx-rstat-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.dx-rstat-num { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.dx-rstat-delta { font-size: 0.74rem; font-weight: 600; margin-top: 3px; }
.dx-rstat-delta.up { color: var(--success); }
.dx-rstat-delta.down { color: var(--danger); }
.dx-rstat-delta.flat { color: var(--text-faint); font-weight: 500; }
.dx-rstat-spark { flex: none; }

.dx-reading-top { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: stretch; }
.dx-reading-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }

/* Featured passages */
/* Icons carry no width/height attribute — an unsized svg falls back to the CSS
   default 300x150 and detonates its row. Base size here; the nested overrides
   below still win where a smaller chevron is wanted. */
.dx-chev { display: inline-flex; flex: none; color: var(--text-faint); }
.dx-chev svg { width: 18px; height: 18px; }
.dx-passage { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); cursor: pointer; }
.dx-passage:first-of-type { border-top: none; }
.dx-pass-thumb {
  flex: none; width: 84px; height: 66px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dx-pass-thumb svg { width: 28px; height: 28px; }
.dx-pass-thumb.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-pass-thumb.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-pass-thumb.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-pass-thumb.writing { background: var(--c-writing-soft); color: var(--c-writing); }
.dx-pass-body { flex: 1; min-width: 0; }
.dx-pass-desc { font-size: 0.85rem; color: var(--text-dim); margin-top: 3px; line-height: 1.45; }
.dx-pass-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; min-width: 110px; }
/* Phone: the row was built for a desktop panel — an 84px thumb plus a 110px
   meta column (holding only a chevron) left 96px for the title, so it wrapped
   to three lines and the badges stacked. Shrink the fixed costs instead. */
@media (max-width: 640px) {
  .dx-passage { gap: 12px; align-items: center; padding: 12px 0; }
  .dx-pass-thumb { width: 46px; height: 46px; border-radius: 10px; }
  .dx-pass-thumb svg { width: 22px; height: 22px; }
  .dx-pass-meta { min-width: 0; flex-direction: row; gap: 4px; }
  .dx-pass-body .dx-pc-title { font-size: 0.95rem; line-height: 1.3; }
}
.dx-pass-q { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-dim); }
.dx-pass-q .dx-chev { color: var(--text-faint); display: inline-flex; }
.dx-pass-q .dx-chev svg { width: 15px; height: 15px; }
.dx-pass-diff { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-faint); }
.dx-pass-diff svg { width: 14px; height: 14px; }

/* Recent passages table */
.dx-rtable td { cursor: pointer; }
.dx-rtable tbody tr:hover td { background: var(--surface-2); }
.dx-rtable td:first-child { font-weight: 600; }
.dx-score { font-weight: 700; font-size: 0.85rem; }
.dx-score.good { color: var(--success); }
.dx-score.fair { color: var(--warn); }
.dx-score.low { color: var(--danger); }
.dx-score.none { color: var(--text-faint); }
.dx-rtable td:last-child svg { width: 15px; height: 15px; }

/* Question type breakdown */
.dx-qtype { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.dx-qtype .dx-mini-ic { width: 20px; flex: none; display: inline-flex; }
.dx-qtype .dx-mini-ic svg { width: 17px; height: 17px; }
.dx-qt-name { font-size: 0.82rem; font-weight: 500; width: 92px; flex: none; line-height: 1.2; }
.dx-qtype .dx-bar { flex: 1; }
.dx-qt-pct { font-size: 0.8rem; font-weight: 700; width: 34px; text-align: right; flex: none; }
.dx-qt-delta { font-size: 0.72rem; font-weight: 600; width: 44px; text-align: right; flex: none; }
.dx-qt-delta.up { color: var(--success); }
.dx-qt-delta.down { color: var(--danger); }

/* Performance chart */
.dx-range { font-size: 0.78rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; }
.dx-legend2 { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 6px; }
.dx-legend2 span { display: inline-flex; align-items: center; gap: 6px; }
.dx-led2 { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dx-chart { margin: 4px 0; }

/* ===================================================================
   Listening Lab tab
   =================================================================== */
.dx-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dx-head-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dx-head-btn svg { width: 17px; height: 17px; color: var(--primary); }
.dx-rstat-bar { display: block; width: 100%; margin-top: 14px; }

/* Featured practice (with audio player) */
.dx-lfeat { display: flex; gap: 22px; align-items: stretch; }
.dx-lfeat-art {
  flex: none; width: 196px; border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(155deg, var(--c-listening-soft), #fff); color: var(--c-listening);
  border: 1px solid var(--border);
}
.dx-lfeat-art > span:first-child svg { width: 54px; height: 54px; }
.dx-lfeat-art-label { font-size: 0.8rem; font-weight: 700; color: var(--c-listening); }
.dx-lfeat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dx-lfeat-title { font-size: 1.1rem; font-weight: 700; }
.dx-lfeat-desc { font-size: 0.88rem; color: var(--text-dim); margin-top: 4px; line-height: 1.45; }
.dx-lfeat-side {
  flex: none; width: 232px; border-left: 1px solid var(--border); padding-left: 22px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
}
.dx-lfeat-side .dx-feat-row { justify-content: space-between; }

.dx-audio {
  display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.dx-audio-play {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.dx-audio-play svg { width: 18px; height: 18px; margin-left: 2px; }
.dx-audio-btn { flex: none; background: none; border: none; cursor: pointer; color: var(--text-dim); display: inline-flex; padding: 2px; }
.dx-audio-btn svg { width: 18px; height: 18px; }
.dx-audio-time { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dx-audio-track { flex: 1; height: 5px; min-width: 40px; border-radius: 999px; background: var(--dx-track); position: relative; }
.dx-audio-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: var(--primary); }
.dx-audio-fill::after {
  content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: var(--primary);
}
.dx-audio-speed { font-size: 0.76rem; font-weight: 600; color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }

/* Lecture / conversation lists */
.dx-audio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.dx-aset, .dx-aset-cols { display: grid; grid-template-columns: 34px minmax(0, 1fr) 54px 104px 16px; gap: 12px; align-items: center; }
.dx-aset-cols { padding: 0 0 8px; }
.dx-aset-cols span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); font-weight: 600; text-align: center; }
.dx-aset-cols span:first-child { grid-column: 3; }
.dx-aset-cols span:last-child { grid-column: 4; }
.dx-aset { padding: 12px 0; border-top: 1px solid var(--border); cursor: pointer; }
.dx-aset:hover .dx-aset-title { color: var(--primary); }
.dx-aset-ic { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.dx-aset-ic svg { width: 17px; height: 17px; }
.dx-aset-ic.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-aset-body { min-width: 0; }
.dx-aset-title { font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-aset-topic { font-size: 0.76rem; color: var(--text-faint); }
.dx-aset-dur { font-size: 0.8rem; color: var(--text-dim); text-align: center; font-variant-numeric: tabular-nums; }
.dx-aset-comp { display: flex; flex-direction: column; gap: 4px; }
.dx-aset-score { font-size: 0.74rem; font-weight: 700; }
.dx-aset-score.good { color: var(--success); }
.dx-aset-score.fair { color: var(--warn); }
.dx-aset-chev { color: var(--text-faint); display: inline-flex; }
.dx-aset-chev svg { width: 15px; height: 15px; }

/* Listening skills breakdown */
.dx-skills-split { display: flex; align-items: center; gap: 14px; }
.dx-skills-list { flex: 1; min-width: 0; }
.dx-skline { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.dx-skline-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dx-skline-name { font-size: 0.84rem; font-weight: 500; flex: 1; min-width: 0; }
.dx-skline-band { font-size: 0.78rem; color: var(--text-faint); font-weight: 600; }
.dx-skline-pct { font-size: 0.82rem; font-weight: 700; width: 38px; text-align: right; flex: none; }

/* Recommended "weak area" badge */
.dx-weak { display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.03em;
  color: #db2777; background: #fce7f3; padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; }

/* ===================================================================
   Speaking Practice tab
   =================================================================== */
.dx-stat-ic.round { border-radius: 50%; }
.dx-quality { font-size: 0.74rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.dx-quality.good { background: var(--success-soft); color: var(--success); }
.dx-quality.avg { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-quality.low { background: var(--warn-soft); color: var(--warn); }
.dx-quality.none { background: var(--surface-2); color: var(--text-faint); }
.dx-stat-sub.up { color: var(--success); font-weight: 600; }

.badge-speaking { background: var(--c-speaking-soft); color: var(--c-speaking); font-weight: 600; }

/* Recorder panel */
.dx-recorder { padding: 24px 26px; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.3fr) 236px; gap: 26px; align-items: center; }
.dx-rec-titlerow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dx-rec-task { font-size: 1.05rem; font-weight: 700; }
.dx-rec-prompt { font-size: 0.9rem; color: var(--text-dim); line-height: 1.5; margin: 6px 0 16px; }
.dx-rec-time { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dx-rec-time svg { width: 16px; height: 16px; color: var(--text-faint); }

.dx-rec-center { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dx-rec-wavewrap { display: flex; align-items: center; gap: 14px; }
.dx-wave { display: inline-flex; }
.dx-rec-ring {
  flex: none; padding: 9px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--c-speaking) 45%, transparent);
  background: none; cursor: pointer; display: inline-flex; transition: transform 0.15s;
}
.dx-rec-ring:hover { transform: scale(1.04); }
.dx-rec-btn {
  width: 84px; height: 84px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #a855f7, var(--c-speaking)); color: #fff;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--c-speaking) 70%, transparent);
}
.dx-rec-btn svg { width: 34px; height: 34px; }
.dx-rec-caption { font-size: 0.85rem; color: var(--text-faint); }

.dx-rec-tips { background: var(--surface-2); border-radius: 14px; padding: 16px 18px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.dx-rec-tips-h { font-size: 0.92rem; font-weight: 700; margin-bottom: 12px; }
.dx-rec-tip { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 0.84rem; color: var(--text-dim); line-height: 1.4; }
.dx-rec-tip-ic { flex: none; color: var(--c-speaking); display: inline-flex; margin-top: 1px; }
.dx-rec-tip-ic svg { width: 17px; height: 17px; }

/* Task cards */
.dx-task-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.dx-taskcard { display: flex; flex-direction: column; gap: 12px; padding: 16px; cursor: pointer; }
.dx-taskcard:hover { border-color: var(--primary); }
.dx-tc-head { display: flex; gap: 11px; align-items: flex-start; }
.dx-tc-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.dx-tc-ic svg { width: 19px; height: 19px; }
.dx-tc-ic.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-tc-ic.writing { background: var(--c-writing-soft); color: var(--c-writing); }
.dx-tc-title { font-size: 0.9rem; font-weight: 700; }
.dx-tc-sub { font-size: 0.78rem; color: var(--text-faint); }
.dx-tc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; }
.dx-tc-status svg { width: 16px; height: 16px; }
.dx-tc-status.completed { color: var(--success); }
.dx-tc-status.progress { color: var(--warn); }
.dx-tc-status.none { color: var(--text-faint); }
.dx-tc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-dim); }
.dx-tc-foot .dx-chev { color: var(--text-faint); display: inline-flex; }
.dx-tc-foot .dx-chev svg { width: 16px; height: 16px; }

/* Bottom split: recordings + feedback insights */
.dx-speaking-bottom { display: grid; grid-template-columns: 1.12fr 1fr; gap: 16px; align-items: stretch; }
.dx-rectable td { cursor: pointer; }
.dx-rectable tbody tr:hover td { background: var(--surface-2); }
.dx-rectable th, .dx-rectable td { padding: 11px 8px; }
.dx-rec-tasklbl { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.dx-rec-tasklbl .dx-mini-ic { color: var(--c-speaking); display: inline-flex; }
.dx-rec-tasklbl .dx-mini-ic svg { width: 16px; height: 16px; }
.dx-rectable td:last-child { text-align: right; }

.dx-fi-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.dx-fi-label { font-size: 0.88rem; font-weight: 700; margin-bottom: 10px; }
.dx-fi-item { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.dx-fi-item + .dx-fi-item { border-top: 1px solid var(--border); }
.dx-fi-trend-head { display: flex; align-items: center; justify-content: space-between; }
.dx-fi-delta { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--text-dim); margin-top: 6px; }
.dx-fi-delta svg { width: 16px; height: 16px; color: var(--text-faint); }
.dx-fi-delta.up svg { color: var(--success); }
.dx-fi-delta.up b { color: var(--success); }

/* ===================================================================
   Writing Practice tab
   =================================================================== */
.dx-wstat { gap: 16px; }
.dx-wstat-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.82rem; color: var(--text-dim); }
.dx-wstat-info { color: var(--text-faint); display: inline-flex; flex: none; }
.dx-wstat-info svg { width: 14px; height: 14px; }
.dx-stat-quality { font-size: 0.82rem; font-weight: 700; margin: 1px 0 3px; }
.dx-stat-quality.writing { color: var(--c-writing); }
.dx-stat-quality.speaking { color: var(--c-speaking); }
.dx-stat-quality.listening { color: var(--success); }
.dx-stat-quality.reading { color: var(--c-reading); }

.dx-writing-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: stretch; }

/* Today's prompt */
.dx-wp-timer { font-size: 0.76rem; color: var(--text-dim); background: var(--surface-2); padding: 5px 12px; border-radius: 999px; }
.dx-wp-body { display: flex; gap: 16px; }
.dx-wp-thumb { flex: none; width: 64px; height: 64px; border-radius: 14px; background: var(--c-speaking-soft); color: var(--c-speaking); display: inline-flex; align-items: center; justify-content: center; }
.dx-wp-thumb svg { width: 28px; height: 28px; }
.dx-wp-text { font-size: 0.92rem; color: var(--text-dim); line-height: 1.55; margin: 10px 0 0; }
.dx-wp-info { display: flex; gap: 26px; flex-wrap: wrap; margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dx-wp-info-item { display: flex; gap: 10px; align-items: flex-start; }
.dx-wp-info-ic { flex: none; color: var(--text-faint); display: inline-flex; margin-top: 1px; }
.dx-wp-info-ic svg { width: 18px; height: 18px; }
.dx-wp-info-k { font-size: 0.76rem; color: var(--text-faint); }
.dx-wp-info-v { font-size: 0.86rem; font-weight: 600; }
.dx-wp-actions { display: flex; gap: 12px; margin-top: auto; }

/* Rubric breakdown */
.dx-rubric-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.dx-rubric-ic { width: 24px; flex: none; display: inline-flex; }
.dx-rubric-ic svg { width: 19px; height: 19px; }
.dx-rubric-name { width: 108px; flex: none; font-size: 0.85rem; font-weight: 500; }
.dx-rubric-row .dx-bar { flex: 1; }
.dx-rubric-score { width: 52px; flex: none; text-align: right; font-size: 0.82rem; font-weight: 700; }
.dx-rubric-overall { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.9rem; font-weight: 600; }
.dx-rubric-pill { background: var(--c-writing-soft); color: var(--c-writing); font-weight: 700; padding: 5px 14px; border-radius: 999px; }

/* Bottom: recent essays + feedback/progress stack */
.dx-writing-bottom { display: grid; grid-template-columns: 1.32fr 1fr; gap: 16px; align-items: stretch; }
.dx-wb-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dx-esstable td { cursor: pointer; }
.dx-esstable tbody tr:hover td { background: var(--surface-2); }
.dx-esstable td:first-child { font-weight: 600; }
.dx-esstable td:last-child svg { width: 15px; height: 15px; }
.dx-etype { font-size: 0.74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.dx-etype.discussion { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-etype.integrated { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-escore { font-size: 0.74rem; font-weight: 700; padding: 3px 9px; border-radius: 8px; }
.dx-escore.good { background: var(--success-soft); color: var(--success); }
.dx-escore.fair { background: var(--warn-soft); color: var(--warn); }
.dx-escore.none { background: var(--surface-2); color: var(--text-faint); }

/* Feedback suggestions */
.dx-suggest { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.dx-suggest-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.dx-suggest-ic svg { width: 16px; height: 16px; }
.dx-suggest-ic.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-suggest-ic.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-suggest-ic.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-suggest-ic.writing { background: var(--c-writing-soft); color: var(--c-writing); }
.dx-suggest-name { font-size: 0.86rem; font-weight: 500; flex: 1; min-width: 0; }
.dx-suggest-count { font-size: 0.9rem; font-weight: 700; color: var(--text-dim); }

/* Writing progress */
.dx-wprog-sub { font-size: 0.8rem; color: var(--text-faint); margin-bottom: 6px; }
.dx-wprog-body { display: flex; gap: 16px; align-items: center; }
.dx-wprog-side { flex: none; text-align: right; }
.dx-wprog-score { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.dx-wprog-of { font-size: 0.95rem; font-weight: 700; color: var(--text-faint); }
.dx-wprog-delta { font-size: 0.76rem; color: var(--text-faint); margin-top: 2px; }

/* ===================================================================
   Vocabulary Builder tab
   =================================================================== */
.dx-vocab-main { display: grid; grid-template-columns: 1.62fr 1fr; gap: 16px; align-items: stretch; }
.dx-vocab-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Word of the day */
.dx-wotd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dx-wotd-title { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 600; }
.dx-wotd-star { color: #f59e0b; display: inline-flex; }
.dx-wotd-star svg { width: 17px; height: 17px; fill: #f59e0b; }
.dx-wotd-tools { display: flex; align-items: center; gap: 8px; }
.dx-wotd-fav { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 7px 12px; cursor: pointer; }
.dx-wotd-fav svg { width: 15px; height: 15px; }
.dx-wotd-fav.on { color: #d97706; border-color: #f3c97a; background: #fff8eb; }
.dx-wotd-fav.on svg { fill: #f59e0b; color: #f59e0b; }
.dx-wotd-menu { background: none; border: none; cursor: pointer; color: var(--text-faint); display: inline-flex; padding: 4px; }
.dx-wotd-menu svg { width: 18px; height: 18px; }
.dx-wotd-body { display: flex; gap: 20px; }
.dx-wotd-wordrow { display: flex; align-items: center; gap: 12px; }
.dx-wotd-word { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); line-height: 1.1; }
.dx-wotd-speak { background: none; border: none; cursor: pointer; color: var(--primary); display: inline-flex; padding: 2px; }
.dx-wotd-speak svg { width: 20px; height: 20px; }
.dx-wotd-sub { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.dx-wotd-ipa { color: var(--text-dim); font-size: 0.95rem; }
.dx-wotd-sec-label { font-size: 0.88rem; font-weight: 700; margin: 16px 0 4px; }
.dx-wotd-text { font-size: 0.92rem; color: var(--text-dim); line-height: 1.55; }
.dx-wotd-illus { flex: none; width: 168px; border-radius: 14px; background: var(--c-reading-soft); color: var(--c-reading); display: inline-flex; align-items: center; justify-content: center; }
.dx-wotd-illus svg { width: 64px; height: 64px; }
.dx-wotd-actions { display: flex; gap: 12px; margin-top: 20px; }

/* Vocabulary goal */
.dx-goal-body { display: flex; align-items: center; gap: 16px; }
.dx-goal-stats { flex: 1; min-width: 0; }
.dx-goal-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 0.88rem; }
.dx-goal-row span { color: var(--text-dim); }
.dx-goal-row b { font-weight: 700; }
.dx-goal-hl { color: var(--primary); }
.dx-ring .dx-ring-of { line-height: 1.25; }

/* Spaced repetition schedule */
.dx-srs-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.dx-srs-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dx-srs-name { flex: 1; min-width: 0; font-size: 0.86rem; color: var(--text-dim); }
.dx-srs-count { font-size: 0.86rem; font-weight: 700; }
.dx-srs-total { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.88rem; font-weight: 600; }
.dx-srs-total b { color: var(--primary); font-weight: 800; }

/* Bottom: decks / categories / difficult / sessions */
.dx-vocab-decks { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 16px; align-items: stretch; }
.dx-deck-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; }
.dx-deck-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.dx-deck-ic svg { width: 17px; height: 17px; }
.dx-deck-ic.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-deck-ic.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-deck-ic.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-deck-name { font-size: 0.86rem; font-weight: 600; }
.dx-deck-due { font-size: 0.76rem; color: var(--text-faint); }
.dx-deck-total { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.84rem; font-weight: 600; }

.dx-cat-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.dx-cat-name { width: 92px; flex: none; font-size: 0.82rem; font-weight: 500; }
.dx-cat-row .dx-bar { flex: 1; }
.dx-cat-count { width: 66px; flex: none; text-align: right; font-size: 0.76rem; color: var(--text-faint); font-weight: 600; }

.dx-diff-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.dx-diff-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--danger-soft, #fde8e8); color: var(--danger); display: inline-flex; align-items: center; justify-content: center; }
.dx-diff-ic svg { width: 16px; height: 16px; }
.dx-diff-word { font-size: 0.86rem; font-weight: 600; }
.dx-diff-fails { font-size: 0.74rem; color: var(--text-faint); }
.dx-diff-mini { color: var(--danger); display: inline-flex; opacity: 0.7; }
.dx-diff-mini svg { width: 14px; height: 14px; }

.dx-sesstable th, .dx-sesstable td { padding: 10px 8px; }
.dx-sesstable td:first-child { font-weight: 600; }

/* Study tip banner */
.dx-studytip { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: linear-gradient(120deg, var(--primary-soft), var(--surface)); }
.dx-studytip-ic { flex: none; color: var(--primary); display: inline-flex; }
.dx-studytip-ic svg { width: 18px; height: 18px; }
.dx-studytip-label { font-weight: 700; color: var(--primary); font-size: 0.9rem; }
.dx-studytip-text { font-size: 0.9rem; color: var(--text-dim); }
.dx-studytip-x { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-faint); display: inline-flex; padding: 4px; }
.dx-studytip-x svg { width: 16px; height: 16px; }

/* ===================================================================
   Resources tab
   =================================================================== */
.dx-resource-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.dx-res-stat {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
}
.dx-res-stat-ic {
  flex: none; width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dx-res-stat-ic svg { width: 22px; height: 22px; }
.dx-res-stat-ic.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-res-stat-ic.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-res-stat-ic.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-res-stat-ic.writing { background: var(--warn-soft); color: var(--c-writing); }
.dx-res-stat-label { font-size: 0.88rem; font-weight: 700; color: var(--text-dim); }
.dx-res-stat-line { display: flex; align-items: baseline; gap: 9px; margin-top: 2px; }
.dx-res-stat-num { font-size: 1.65rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.dx-res-stat-delta { font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.dx-res-stat-delta.reading { color: var(--c-reading); }
.dx-res-stat-delta.listening { color: var(--success); }
.dx-res-stat-delta.speaking { color: var(--c-speaking); }
.dx-res-stat-delta.writing { color: var(--c-writing); }

.dx-feature-resource {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 280px;
  gap: 22px;
  align-items: center;
  padding: 22px 24px;
  background: linear-gradient(105deg, var(--primary-soft), #fff);
  border-color: #bfdbfe;
}
.dx-guide-cover {
  width: 112px; height: 128px;
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.18) 0 26%, transparent 26%),
    linear-gradient(145deg, #0f4f9f, #08356f);
  box-shadow: 0 10px 24px rgba(15, 79, 159, 0.22);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.dx-guide-badge {
  align-self: flex-start;
  font-size: 0.58rem; font-weight: 800;
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 999px; padding: 1px 5px;
}
.dx-guide-cover strong {
  font-size: 0.82rem; line-height: 1.12; letter-spacing: 0;
}
.dx-guide-cover > span:last-child {
  font-size: 0.65rem; font-weight: 700; opacity: 0.85;
}
.dx-feature-kicker {
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.dx-feature-copy h2 { margin: 0 0 6px; font-size: 1.2rem; }
.dx-feature-copy p {
  margin: 0 0 14px;
  color: var(--text-dim);
  max-width: 72ch;
  line-height: 1.5;
}
.dx-feature-meta { display: flex; flex-wrap: wrap; gap: 18px; }
.dx-feature-meta span {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
}
.dx-feature-meta svg { width: 15px; height: 15px; color: var(--text-faint); }
.dx-feature-actions {
  display: flex; flex-direction: column; gap: 12px;
}
.dx-feature-actions .btn { width: 100%; }
.dx-feature-actions svg { width: 17px; height: 17px; }

.dx-resource-toolbar {
  display: flex; align-items: center; gap: 12px;
}
.dx-filter-group, .dx-sort-group {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.dx-filter-group label, .dx-sort-group label {
  color: var(--text-faint);
  font-size: 0.8rem;
  font-weight: 600;
}
.dx-filter-group button, .dx-sort-group button {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; color: var(--text-dim);
  font: inherit; font-size: 0.82rem; font-weight: 700;
  cursor: pointer;
}
.dx-filter-group svg, .dx-sort-group svg { width: 14px; height: 14px; }
.dx-sort-group { margin-left: auto; }
.dx-view-toggle {
  display: inline-flex; gap: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
}
.dx-view-toggle button {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--text-faint);
  cursor: pointer;
}
.dx-view-toggle button.active { background: var(--primary-soft); color: var(--primary); }
.dx-view-toggle svg { width: 16px; height: 16px; }

.dx-resource-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.dx-resource-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dx-resource-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 12px;
}
.dx-resource-ic {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dx-resource-ic svg { width: 22px; height: 22px; }
.dx-resource-ic.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-resource-ic.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-resource-ic.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-resource-ic.writing { background: var(--warn-soft); color: var(--c-writing); }
.dx-bookmark-btn {
  border: 0; background: transparent; color: var(--text-faint);
  cursor: pointer; display: inline-flex; padding: 2px;
}
.dx-bookmark-btn:hover { color: var(--primary); }
.dx-bookmark-btn svg { width: 18px; height: 18px; }
.dx-resource-cat {
  font-size: 0.74rem;
  font-weight: 800;
  margin-bottom: 5px;
}
.dx-resource-cat.reading { color: var(--c-reading); }
.dx-resource-cat.listening { color: var(--success); }
.dx-resource-cat.speaking { color: var(--c-speaking); }
.dx-resource-cat.writing { color: var(--c-writing); }
.dx-resource-card h2 {
  font-size: 0.95rem;
  margin: 0 0 8px;
  line-height: 1.28;
}
.dx-resource-card p {
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0 0 14px;
}
.dx-resource-meta {
  margin-top: auto;
  color: var(--text-faint);
  font-size: 0.76rem;
  font-weight: 700;
}
.dx-view-btn {
  margin-top: 14px;
  padding: 7px 12px;
  font-size: 0.82rem;
}
.dx-view-btn svg { width: 15px; height: 15px; }

.dx-resource-bottom {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.dx-download-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0;
}
.dx-download-row + .dx-download-row { border-top: 1px solid var(--border); }
.dx-pdf-ic {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fee2e2; color: var(--danger);
}
.dx-pdf-ic svg { width: 15px; height: 15px; }
.dx-download-main { flex: 1; min-width: 0; }
.dx-download-title {
  font-size: 0.86rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dx-download-meta { color: var(--text-faint); font-size: 0.76rem; }
.dx-download-date {
  flex: none; color: var(--text-dim); font-size: 0.82rem;
}
.dx-download-btn {
  flex: none; border: 0; background: transparent; color: var(--primary);
  cursor: pointer; display: inline-flex; padding: 4px;
}
.dx-download-btn svg { width: 17px; height: 17px; }

.dx-resource-rec {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
}
.dx-resource-rec + .dx-resource-rec { border-top: 1px solid var(--border); }
.dx-rec-thumb {
  flex: none; width: 58px; height: 40px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--primary);
  overflow: hidden;
}
.dx-rec-thumb.video {
  background:
    linear-gradient(rgba(15,23,42,0.18), rgba(15,23,42,0.18)),
    linear-gradient(135deg, #60a5fa, #0f766e);
  color: #fff;
}
.dx-rec-thumb svg { width: 20px; height: 20px; }
.dx-resource-rec .dx-rec-main { flex: 1; min-width: 0; }
.dx-rec-action {
  flex: none;
  border: 0; border-radius: 8px;
  padding: 6px 12px;
  font: inherit; font-size: 0.78rem; font-weight: 800;
  cursor: pointer;
}
.dx-rec-action.watch { background: var(--success-soft); color: var(--success); }
.dx-rec-action.read { background: var(--primary-soft); color: var(--primary); }

/* ===================================================================
   Study Plan tab
   =================================================================== */
/* Stat cards (small inline icon + label, big number, varied body) */
.dx-pstat { display: flex; flex-direction: column; padding: 18px 20px; }
.dx-pstat-head { display: flex; align-items: center; gap: 9px; }
.dx-pstat-ic { display: inline-flex; }
.dx-pstat-ic svg { width: 18px; height: 18px; }
.dx-pstat-ic.reading { color: var(--c-reading); }
.dx-pstat-ic.listening { color: var(--c-listening); }
.dx-pstat-ic.speaking { color: var(--c-speaking); }
.dx-pstat-ic.writing { color: var(--c-writing); }
.dx-pstat-label { font-size: 0.86rem; font-weight: 600; color: var(--text-dim); }
.dx-pstat-num { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 10px 0 0; }
.dx-pstat-unit { font-size: 1rem; font-weight: 700; color: var(--text-faint); }
.dx-pstat-body { margin-top: auto; padding-top: 14px; }
.dx-pstat-body .dx-bar { margin-bottom: 10px; }
.dx-pstat-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 0.78rem; color: var(--text-faint); }
.dx-pstat-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text-faint); }
.dx-pstat-delta svg { width: 14px; height: 14px; }
.dx-pstat-delta.up { color: var(--success); }
.dx-pstat-note { font-size: 0.84rem; color: var(--text-faint); margin-bottom: 10px; }
.dx-pstat-accent { color: var(--c-speaking); font-weight: 600; }
.dx-pstat-btn { padding: 6px 14px; font-size: 0.82rem; align-self: flex-start; }
.dx-flames { display: flex; gap: 6px; }
.dx-flame { display: inline-flex; color: var(--dx-track); }
.dx-flame svg { width: 18px; height: 18px; }
.dx-flame.on { color: var(--c-writing); }
.dx-flame.on svg { fill: var(--c-writing); }

/* Main split: weekly plan + today's agenda */
.dx-plan-main { display: grid; grid-template-columns: minmax(0, 1.95fr) 1fr; gap: 16px; align-items: stretch; }
.dx-wk-range { font-size: 0.84rem; color: var(--text-faint); margin-left: 10px; font-weight: 500; }
.dx-wk-nav { display: flex; align-items: center; gap: 8px; }
.dx-wk-thisweek { padding: 6px 13px; font-size: 0.82rem; }
.dx-wk-arrow { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dx-wk-arrow svg { width: 16px; height: 16px; }

.dx-wk-scroll { overflow-x: auto; }
.dx-wktable { width: 100%; border-collapse: collapse; }
.dx-wktable th { padding: 4px 6px 12px; text-align: center; vertical-align: bottom; }
.dx-wktable th.today { background: var(--c-reading-soft); border-radius: 10px 10px 0 0; }
.dx-wk-dow { display: block; font-size: 0.78rem; color: var(--text-faint); }
.dx-wktable th.today .dx-wk-dow { color: var(--c-reading); font-weight: 700; }
.dx-wk-date { display: block; font-size: 0.78rem; color: var(--text-dim); font-weight: 600; }
.dx-wk-skill { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; font-weight: 600; white-space: nowrap; padding: 9px 14px 9px 0; }
.dx-wk-skic { display: inline-flex; }
.dx-wk-skic svg { width: 17px; height: 17px; }
.dx-wk-skill .reading { color: var(--c-reading); }
.dx-wk-skill .listening { color: var(--c-listening); }
.dx-wk-skill .speaking { color: var(--c-speaking); }
.dx-wk-skill .writing { color: var(--c-writing); }
.dx-wktable .dx-aa { font-weight: 800; font-size: 0.9rem; width: 17px; text-align: center; flex: none; color: var(--text-dim); }
.dx-wk-cell { text-align: center; padding: 9px 6px; font-size: 0.82rem; color: var(--text-dim); position: relative; }
.dx-wk-cell.today { background: var(--c-reading-soft); }
.dx-wk-cell.today .dx-wk-min { color: var(--c-reading); font-weight: 700; }
.dx-wk-check { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--success); }
.dx-wk-check svg { width: 13px; height: 13px; }
.dx-wk-totalrow td { border-top: 1px solid var(--border); padding-top: 12px; font-size: 0.82rem; }
.dx-wk-totalrow .dx-wk-cell { color: var(--text); }
.dx-wk-totalrow .dx-wk-cell.today { border-radius: 0 0 10px 10px; }
.dx-wk-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.dx-wk-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-dim); }
.dx-wk-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-faint); }
.dx-wk-leg-dot.ring { background: transparent; border: 2px solid var(--text-faint); }

/* Today's agenda */
.dx-agenda { display: flex; flex-direction: column; }
.dx-ag-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.dx-ag-row + .dx-ag-row { border-top: 1px solid var(--border); }
.dx-ag-check { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.dx-ag-check svg { width: 13px; height: 13px; }
.dx-ag-check.progress { color: #fff; }
.dx-ag-main { flex: 1; min-width: 0; }
.dx-ag-title { font-size: 0.88rem; }
.dx-ag-title b { font-weight: 700; }
.dx-ag-barrow { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.dx-ag-mins { font-size: 0.76rem; color: var(--text-faint); width: 46px; flex: none; }
.dx-ag-barrow .dx-bar { flex: 1; }
.dx-ag-pct { font-size: 0.82rem; font-weight: 700; color: var(--text-dim); width: 40px; text-align: right; flex: none; }
.dx-ag-chev { color: var(--text-faint); display: inline-flex; flex: none; }
.dx-ag-chev svg { width: 16px; height: 16px; }
.dx-ag-foot { display: flex; align-items: center; gap: 12px; }
.dx-ag-foot > span:first-child { font-size: 0.86rem; font-weight: 600; }
.dx-ag-count { font-size: 0.84rem; color: var(--primary); white-space: nowrap; }
.dx-ag-foot .dx-bar { flex: 1; }
.dx-ag-pcttot { font-size: 0.86rem; color: var(--primary); flex: none; }

/* Bottom: roadmap / recommendations / priorities */
.dx-plan-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }

.dx-roadmap { display: flex; flex-direction: column; }
.dx-rm-row { display: flex; gap: 13px; }
.dx-rm-rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.dx-rm-node { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; border: 2px solid var(--border); background: var(--surface); }
.dx-rm-node svg { width: 13px; height: 13px; }
.dx-rm-node.done { background: var(--c-reading); border-color: var(--c-reading); }
.dx-rm-node.active { border-color: var(--c-reading); box-shadow: inset 0 0 0 3px var(--c-reading); }
.dx-rm-line { width: 2px; flex: 1; background: var(--border); margin: 2px 0; min-height: 18px; }
.dx-rm-line.filled { background: var(--c-reading); }
.dx-rm-body { flex: 1; min-width: 0; padding-bottom: 16px; }
.dx-rm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dx-rm-title { font-size: 0.86rem; font-weight: 600; }
.dx-rm-row.active .dx-rm-title { color: var(--c-reading); }
.dx-rm-range { font-size: 0.78rem; color: var(--text-faint); margin-top: 2px; }
.dx-rm-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: none; }
.dx-rm-badge.done { background: var(--success-soft); color: var(--success); }
.dx-rm-badge.active { background: var(--primary-soft); color: var(--primary); }
.dx-rm-badge.upcoming { background: var(--surface-2); color: var(--text-faint); }

.dx-rec-sub { font-size: 0.82rem; color: var(--text-faint); margin: -6px 0 8px; }
.dx-rec-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; }
.dx-rec-row + .dx-rec-row { border-top: 1px solid var(--border); }
.dx-rec-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.dx-rec-ic svg { width: 19px; height: 19px; }
.dx-rec-ic.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-rec-ic.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-rec-ic.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-rec-ic.writing { background: var(--c-writing-soft); color: var(--c-writing); }
.dx-rec-main { flex: 1; min-width: 0; }
.dx-rec-title { font-size: 0.88rem; font-weight: 700; }
.dx-rec-text { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; line-height: 1.45; }
.dx-rec-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: none; }
.dx-rec-badge.good { background: var(--success-soft); color: var(--success); }
.dx-rec-badge.warn { background: var(--warn-soft); color: var(--warn); }

.dx-resched { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.dx-resched:hover { border-color: var(--primary); }
.dx-resched-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.dx-resched-ic svg { width: 19px; height: 19px; }
.dx-resched-main { flex: 1; min-width: 0; }
.dx-resched-title { font-size: 0.88rem; font-weight: 700; }
.dx-resched-text { font-size: 0.78rem; color: var(--text-faint); margin-top: 2px; }
.dx-resched-chev { color: var(--text-faint); display: inline-flex; }
.dx-resched-chev svg { width: 18px; height: 18px; }
.dx-prio-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.dx-prio-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.dx-prio-ic svg { width: 16px; height: 16px; }
.dx-prio-ic.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-prio-ic.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-prio-ic.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-prio-ic.writing { background: var(--c-writing-soft); color: var(--c-writing); }
.dx-prio-title { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 600; }
.dx-prio-time { font-size: 0.78rem; color: var(--text-faint); flex: none; }
.dx-prio-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: none; }
.dx-prio-badge.high { background: var(--danger-soft, #fde8e8); color: var(--danger); }
.dx-prio-badge.medium { background: var(--warn-soft); color: var(--warn); }

/* ===================================================================
   Progress Analytics tab
   =================================================================== */
.dx-daterange { gap: 8px; }
.dx-daterange svg { width: 16px; height: 16px; }
.dx-daterange svg:last-child { width: 14px; height: 14px; color: var(--text-faint); }

/* Top stat cards */
.dx-pgcard { display: flex; flex-direction: column; padding: 18px 20px; }
.dx-pgcard-label { font-size: 0.84rem; color: var(--text-dim); font-weight: 500; }
.dx-pgcard-score { display: flex; align-items: baseline; gap: 3px; margin-top: 8px; }
.dx-pgcard-score .num { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); line-height: 1; }
.dx-score-pair { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px; min-width: 0; }
.dx-score-pair small { color: var(--text-faint); font-size: 0.7rem; font-weight: 650; line-height: 1.25; }
.dx-pgcard-score.dx-score-pair .num { font-size: 1.45rem; line-height: 1.15; }
.dx-pgcard-score .num.pos { color: var(--success); }
.dx-pgcard-score .max { font-size: 1.05rem; font-weight: 700; color: var(--text-faint); }
.dx-pgcard-arrow { display: inline-flex; color: var(--success); }
.dx-pgcard-arrow svg { width: 18px; height: 18px; }
.dx-pgcard-quality { font-size: 0.86rem; font-weight: 600; margin-top: 6px; }
.dx-pgcard-quality.reading { color: var(--primary); }
.dx-pgcard-spark { margin-top: auto; padding-top: 10px; }
.dx-pgcard-spark svg { width: 100%; height: 38px; }
.dx-pgcard-sub { font-size: 0.82rem; color: var(--text-dim); margin-top: 8px; }
.dx-pgcard-imp { font-size: 0.8rem; font-weight: 600; margin-top: auto; padding-top: 8px; }
.dx-pgcard-imp.pos { color: var(--success); }
.dx-pgcard-imp.listening { color: var(--c-listening); }
.dx-pgcard-strong { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.dx-pgcard-strongic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.dx-pgcard-strongic svg { width: 22px; height: 22px; }
.dx-pgcard-strongic.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-pgcard-strongic.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-pgcard-strongic.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-pgcard-strongic.writing { background: var(--c-writing-soft); color: var(--c-writing); }
.dx-pgcard-strongname { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.dx-pgcard-strongscore { font-size: 0.82rem; color: var(--text-dim); font-weight: 600; }
.dx-pgcard-target { flex-direction: row; align-items: center; gap: 14px; }
.dx-pgcard-targetscore { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 6px 0 2px; }
.dx-pgcard-targetscore .dx-score-pair b { font-size: 0.92rem; line-height: 1.2; }
.dx-pgcard-targetscore .dx-score-pair small { font-size: 0.66rem; }
.dx-target-arrow { color: var(--text-faint); font-size: 0.72rem; line-height: 1; }
.dx-pgcard-target .dx-link { margin-top: 8px; font-size: 0.76rem; white-space: nowrap; }
.dx-pgcard-target .dx-pgcard-sub { font-size: 0.76rem; }
.dx-pgring { position: relative; flex: none; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
.dx-pgring svg { width: 100px; height: 100px; transform: rotate(-90deg); }
.dx-pgring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; color: var(--c-listening); }

/* Charts row */
.dx-pg-charts { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 16px; align-items: stretch; }
.dx-pg-charts > *, .dx-pg-bottom > * { min-width: 0; }
.dx-pg-legendrow { display: flex; gap: 16px; margin-top: 6px; }
.dx-pg-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-dim); }
.dx-pg-leg-line { width: 16px; height: 3px; border-radius: 2px; background: var(--c-reading); }
.dx-pg-leg-sq { width: 12px; height: 12px; border-radius: 3px; background: var(--text-faint); }
.dx-pg-leg-sq.dash { background: transparent; border: 1.5px dashed var(--text-faint); }
.dx-seg { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 9px; padding: 3px; }
.dx-seg-btn { border: none; background: none; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); padding: 5px 12px; border-radius: 7px; }
.dx-seg-btn.on { background: var(--surface); color: var(--primary); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.dx-pg-cmplegend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 6px; }
.dx-pg-cmpitem { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-dim); font-weight: 500; }
.dx-pg-cmpic { display: inline-flex; }
.dx-pg-cmpic svg { width: 16px; height: 16px; }
.dx-pg-cmpic.reading { color: var(--c-reading); }
.dx-pg-cmpic.listening { color: var(--c-listening); }
.dx-pg-cmpic.speaking { color: var(--c-speaking); }
.dx-pg-cmpic.writing { color: var(--c-writing); }

/* Bottom: table + goals/milestones */
.dx-pg-bottom { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.dx-pg-right { display: flex; flex-direction: column; align-self: start; gap: 16px; min-width: 0; }
.dx-pg-right > .dx-panel { flex: 0 0 auto; }
.dx-perf-skill.reading .dx-mini-ic { color: var(--c-reading); }
.dx-perf-skill.listening .dx-mini-ic { color: var(--c-listening); }
.dx-perf-skill.speaking .dx-mini-ic { color: var(--c-speaking); }
.dx-perf-skill.writing .dx-mini-ic { color: var(--c-writing); }
.dx-pgtable td { font-size: 0.88rem; }
.dx-pgtable-overall td { border-top: 2px solid var(--border); background: var(--surface-2); }
.dx-pg-overallscore { color: var(--primary); }
.dx-pg-trend { display: inline-flex; align-items: center; gap: 8px; }
.dx-pg-trend-spark svg { width: 60px; height: 26px; vertical-align: middle; }
.dx-pg-delta { font-size: 0.74rem; font-weight: 700; color: var(--success); background: var(--success-soft); padding: 2px 8px; border-radius: 999px; }

.dx-goals-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dx-goals-k { font-size: 0.8rem; color: var(--text-faint); }
.dx-goals-row > div { flex: 1; min-width: 0; }
.dx-goals-cur { font-weight: 800; letter-spacing: -0.02em; color: var(--primary); line-height: 1.1; margin-top: 2px; }
.dx-goals-of { font-size: 0.95rem; font-weight: 700; color: var(--text-faint); }
.dx-goals-tgt { justify-content: flex-end; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-top: 2px; }
.dx-goals-cur b, .dx-goals-tgt b { font-size: 1.08rem; }
.dx-goals-cur small, .dx-goals-tgt small { flex-basis: 100%; font-size: 0.66rem; }
.dx-goals-bar { height: 10px; }
.dx-goals-bar > span { background: var(--success); }
.dx-goals-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 8px; padding-bottom: 1px; font-size: 0.8rem; }
.dx-goals-foot .pos { color: var(--success); font-weight: 600; }

.dx-ms-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.dx-ms-row + .dx-ms-row { border-top: 1px solid var(--border); }
.dx-ms-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.dx-ms-ic svg { width: 18px; height: 18px; }
.dx-ms-ic.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.dx-ms-ic.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.dx-ms-ic.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.dx-ms-ic.writing { background: var(--c-writing-soft); color: var(--c-writing); }
.dx-ms-main { flex: 1; min-width: 0; }
.dx-ms-title { font-size: 0.87rem; font-weight: 700; }
.dx-ms-text { font-size: 0.78rem; color: var(--text-faint); margin-top: 1px; }
.dx-ms-when { font-size: 0.76rem; color: var(--text-faint); white-space: nowrap; flex: none; }

/* --- Responsive --- */
@media (max-width: 1100px) {
  .dx-pg-charts { grid-template-columns: 1fr; }
  .dx-pg-bottom { grid-template-columns: 1fr; }
  .dx-plan-main { grid-template-columns: 1fr; }
  .dx-plan-bottom { grid-template-columns: 1fr; }
  .dx-audio-grid { grid-template-columns: 1fr; }
  .dx-recorder { grid-template-columns: 1fr; }
  .dx-task-grid { grid-template-columns: 1fr 1fr; }
  .dx-speaking-bottom { grid-template-columns: 1fr; }
  .dx-writing-top { grid-template-columns: 1fr; }
  .dx-writing-bottom { grid-template-columns: 1fr; }
  .dx-vocab-main { grid-template-columns: 1fr; }
  .dx-vocab-decks { grid-template-columns: 1fr 1fr; }
  .dx-resource-stats { grid-template-columns: 1fr 1fr; }
  .dx-feature-resource { grid-template-columns: 112px minmax(0, 1fr); }
  .dx-feature-actions { grid-column: 1 / -1; flex-direction: row; }
  .dx-resource-grid { grid-template-columns: repeat(3, 1fr); }
  .dx-resource-bottom { grid-template-columns: 1fr; }
  .dx-grid-4 { grid-template-columns: 1fr 1fr; }
  .dx-practice-grid { grid-template-columns: 1fr 1fr; }
  .dx-grid-2-1 { grid-template-columns: 1fr; }
  .dx-statgrid { grid-template-columns: 1fr 1fr; }
  .dx-practice-main { grid-template-columns: 1fr; }
  .dx-section-grid { grid-template-columns: 1fr 1fr; }
  .dx-reading-top { grid-template-columns: 1fr; }
  .dx-reading-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .progress-page { width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; }
  .progress-page .app-layout,
  .progress-page .app-main,
  .progress-page .app-content,
  .progress-page .stack { min-width: 0; max-width: 100%; }
  .progress-page .dx-page-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .progress-page .dx-page-head h1 { font-size: 1.75rem; line-height: 1.15; }
  .progress-page .dx-daterange { width: 100%; justify-content: center; }
  .progress-page .dx-pgcard,
  .progress-page .dx-panel { padding: 16px; }
  .progress-page .dx-pgcard-target { gap: 10px; }
  .progress-page .dx-pgring,
  .progress-page .dx-pgring svg { width: 84px; height: 84px; }
  .progress-page .dx-pgring-num { font-size: 0.96rem; }
  .progress-page .dx-pg-charts,
  .progress-page .dx-pg-bottom { grid-template-columns: minmax(0, 1fr); }
  .progress-page .dx-panel-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .progress-page .dx-panel-head .dx-seg { width: 100%; }
  .progress-page .dx-seg-btn { flex: 1 1 0; min-width: 0; padding-inline: 6px; }
  .progress-page .dx-pg-legendrow { flex-wrap: wrap; gap: 8px 14px; }
  .progress-page .dx-chart { width: 100%; min-width: 0; overflow: hidden; }
  .progress-page .dx-chart svg { display: block; width: 100%; max-width: 100%; height: auto; }
  .progress-page .dx-pg-cmplegend { gap: 10px 14px; }

  /* The desktop five-column table cannot shrink to a phone viewport. Present
     each section as a compact two-column metric card while keeping table
     semantics and the complete data set. */
  .progress-page .dx-pgtable,
  .progress-page .dx-pgtable tbody { display: block; width: 100%; }
  .progress-page .dx-pgtable thead { display: none; }
  .progress-page .dx-pgtable tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px; border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden; background: var(--surface);
  }
  .progress-page .dx-pgtable tr:first-child { margin-top: 0; }
  .progress-page .dx-pgtable td {
    min-width: 0; padding: 10px 12px; border: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  }
  .progress-page .dx-pgtable td::before {
    content: attr(data-label); color: var(--text-faint); font-size: 0.64rem;
    font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .progress-page .dx-pgtable td:first-child {
    grid-column: 1 / -1; flex-direction: row; align-items: center;
    border-bottom: 1px solid var(--border); background: var(--surface-2);
  }
  .progress-page .dx-pgtable td:first-child::before { display: none; }
  .progress-page .dx-pgtable-overall td { background: var(--surface); border-top: 0; }
  .progress-page .dx-pgtable-overall td:first-child { background: var(--primary-soft); }
  .progress-page .dx-pg-trend { max-width: 100%; gap: 5px; }
  .progress-page .dx-pg-trend-spark { min-width: 0; }
  .progress-page .dx-pg-trend-spark svg { width: 50px; max-width: 100%; }
  .progress-page .dx-pg-delta { padding-inline: 6px; }
  .progress-page .dx-ms-row { align-items: flex-start; }
  .progress-page .dx-ms-when { white-space: normal; text-align: right; }

  .dx-grid-4, .dx-practice-grid { grid-template-columns: 1fr; }
  .dx-search kbd { display: none; }
  .dx-bars, .dx-legend { grid-template-columns: 1fr 1fr; }
  .dx-statgrid, .dx-section-grid { grid-template-columns: 1fr; }
  .dx-featured { flex-direction: column; }
  .dx-feat-art { width: 80px; height: 80px; }
  .dx-feat-art svg { width: 40px; height: 40px; }
  .dx-lfeat { flex-direction: column; }
  .dx-lfeat-art { width: 100%; }
  .dx-lfeat-side { width: 100%; border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 16px; }
  .dx-task-grid { grid-template-columns: 1fr; }
  .dx-fi-split { grid-template-columns: 1fr; }
  .dx-vocab-decks { grid-template-columns: 1fr; }
  .dx-resource-stats { grid-template-columns: 1fr; }
  .dx-feature-resource { grid-template-columns: 1fr; }
  .dx-guide-cover { width: 104px; height: 120px; }
  .dx-feature-actions { flex-direction: column; }
  .dx-resource-toolbar { flex-wrap: wrap; }
  .dx-filter-group, .dx-sort-group { flex: 1 1 100%; justify-content: space-between; }
  .dx-sort-group { margin-left: 0; }
  .dx-resource-grid { grid-template-columns: 1fr; }
  .dx-download-date { display: none; }
}

/* ===================================================================
   Recommended-next-action home
   =================================================================== */
.dx-simple-foot {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dx-foot-link {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: 0.9rem; font-weight: 500; text-align: left; cursor: pointer;
}
.dx-foot-link:hover, .dx-foot-link.active {
  background: var(--surface-2); color: var(--text); text-decoration: none;
}
.dx-foot-link.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.dx-foot-link svg { width: 18px; height: 18px; flex: none; }
.dx-simple-foot button { color: var(--text-faint); }

.dx-home { max-width: 1120px; padding-top: 48px; }
.next-welcome { margin-bottom: 24px; }
.next-welcome .next-eyebrow {
  margin: 0 0 4px; color: var(--text-dim); font-size: 0.95rem; font-weight: 600;
}
.next-welcome h1 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.035em; }
.onboard-subtitle { margin: 8px 0 0; color: var(--text-dim); font-size: 1rem; }

.next-hero {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.8fr);
  gap: 48px; align-items: center; padding: 38px 40px;
  border: 0; border-radius: 22px; overflow: hidden;
  background: linear-gradient(130deg, #172554 0%, #1e3a8a 52%, #1d4ed8 100%);
  color: #fff; box-shadow: 0 18px 45px rgba(30, 58, 138, 0.2);
}
.next-hero.is-diagnostic { background: linear-gradient(130deg, #172554 0%, #312e81 58%, #4338ca 100%); }
.next-label {
  display: block; color: var(--primary); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.11em; text-transform: uppercase;
}
.next-hero .next-label { color: #bfdbfe; }
.next-hero h2 { margin: 10px 0 10px; max-width: 620px; font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -0.035em; }
.next-hero h2 span { color: #fde68a; }
.next-hero-copy > div > p { max-width: 640px; margin: 0 0 24px; color: rgba(255,255,255,0.78); font-size: 1rem; }
.next-hero-copy > div > p strong { color: #fff; }
.next-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 20px; border: 0;
  background: #fff; color: #1e3a8a !important; box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}
.next-primary:hover:not(:disabled) { background: #eff6ff; color: #1d4ed8 !important; }
.next-primary svg { width: 18px; height: 18px; }
.next-action-meta { display: inline-block; margin-left: 12px; color: rgba(255,255,255,0.62); font-size: 0.82rem; }

.next-flow { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 0; }
.next-flow-step { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.55); }
.next-flow-step > span:last-child { display: flex; flex-direction: column; }
.next-flow-step b { font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.next-flow-step small { font-size: 0.75rem; }
.next-flow-step.active b, .next-flow-step.done b { color: #fff; }
.next-step-num {
  width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; font-size: 0.82rem; font-weight: 800;
}
.next-flow-step.active .next-step-num { border-color: #fff; background: #fff; color: #1e3a8a; }
.next-flow-step.done .next-step-num { border-color: #6ee7b7; background: #059669; color: #fff; }
.next-flow-line { width: 1px; height: 20px; margin: 3px 0 3px 15px; background: rgba(255,255,255,0.2); }
.next-flow-line.done { background: #6ee7b7; }

/* --- New-user calibration state --- */
.mobile-calibration-onboarding { display: block; height: 100%; min-height: 0; overflow: hidden; }
.cal-intro { max-width: 760px; margin: 0 auto; padding: 28px 0 18px; }
.cal-intro-welcome { margin-bottom: 26px; }
.cal-intro-welcome > p { margin: 0 0 8px; color: var(--text-dim); font-size: 1rem; font-weight: 650; }
.cal-intro-welcome h1 {
  max-width: 680px; margin: 0; font-size: clamp(2.2rem, 6vw, 3.25rem);
  line-height: 1.08; letter-spacing: -0.045em;
}
.cal-intro-welcome > span {
  display: block; max-width: 680px; margin-top: 16px;
  color: var(--text-dim); font-size: 1.05rem; line-height: 1.55;
}
.cal-intro-hero {
  padding: 34px; border-radius: 22px; text-align: center;
  background:
    radial-gradient(circle at 50% 8%, rgba(219,234,254,0.9), transparent 30%),
    linear-gradient(145deg, #f8fbff, #fff 55%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.cal-intro-target {
  width: 106px; height: 106px; margin: 0 auto 18px; display: grid; place-items: center;
  border: 2px solid #fff; border-radius: 50%; background: rgba(239,246,255,0.9);
  color: var(--primary); box-shadow: 0 10px 28px rgba(37, 99, 235, 0.12);
}
.cal-intro-target > span { width: 58px; height: 58px; display: inline-flex; }
.cal-intro-target svg { width: 58px; height: 58px; stroke-width: 1.8; }
.cal-intro-hero h2 { margin: 0 0 20px; font-size: 1.55rem; letter-spacing: -0.025em; }
.cal-intro-skills { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.cal-intro-skills > span {
  min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 8px; border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255,255,255,0.8); font-size: 0.88rem; font-weight: 650;
}
.cal-intro-skills i { width: 20px; height: 20px; display: inline-flex; flex: none; font-style: normal; }
.cal-intro-skills svg { width: 20px; height: 20px; }
.cal-intro-skills .reading i { color: var(--c-reading); }
.cal-intro-skills .listening i { color: var(--c-listening); }
.cal-intro-skills .speaking i { color: var(--c-speaking); }
.cal-intro-skills .writing i { color: var(--c-writing); }
.cal-intro-meta {
  display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0;
  padding-top: 20px; border-top: 1px solid var(--border);
}
.cal-intro-meta > span { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-dim); }
.cal-intro-meta > span + span { border-left: 1px solid var(--border); }
.cal-intro-meta i { width: 25px; height: 25px; display: inline-flex; color: var(--primary); font-style: normal; }
.cal-intro-meta svg { width: 25px; height: 25px; }
.cal-intro-meta b { font-size: 0.95rem; font-weight: 600; }
.cal-intro-start { width: 100%; min-height: 58px; border-radius: 14px; font-size: 1.05rem; }
.cal-intro-learn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 0.95rem; font-weight: 750;
}
.cal-intro-learn span { width: 18px; height: 18px; display: inline-flex; }
.cal-intro-learn svg { width: 18px; height: 18px; }
.cal-intro-next { margin-top: 20px; padding: 28px 32px; border-radius: 20px; }
.cal-intro-next h2 { margin: 0 0 10px; font-size: 1.35rem; letter-spacing: -0.025em; }
.cal-intro-next-row {
  display: grid; grid-template-columns: 44px 48px minmax(0,1fr) 20px; gap: 14px; align-items: center;
  padding: 18px 0; border-top: 1px solid var(--border);
}
.cal-intro-next-row:nth-of-type(1) { border-top: 0; }
.cal-intro-num, .cal-intro-next-row > i {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.1rem; font-weight: 800; font-style: normal;
}
.cal-intro-next-row > i { width: 48px; height: 48px; border-radius: 12px; }
.cal-intro-next-row > i svg { width: 24px; height: 24px; }
.cal-intro-num.blue, .cal-intro-next-row > i.blue { color: var(--primary); background: var(--primary-soft); }
.cal-intro-num.green, .cal-intro-next-row > i.green { color: var(--success); background: var(--success-soft); }
.cal-intro-num.amber, .cal-intro-next-row > i.amber { color: #d97706; background: #fff7ed; }
.cal-intro-next-row p { min-width: 0; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.cal-intro-next-row b { font-size: 0.98rem; }
.cal-intro-next-row small { color: var(--text-dim); font-size: 0.82rem; }
.cal-intro-chev { width: 20px; height: 20px; display: inline-flex; color: var(--text-dim); }
.cal-intro-chev svg { width: 20px; height: 20px; }
.app-layout.calibration-mode {
  /* min-height:0 is critical: the base .app-layout rule sets min-height:100vh
     (the LARGE, toolbar-retracted viewport), which otherwise forces this fixed
     box taller than the visible area — its bottom (the in-flow Continue CTA)
     then sits behind Safari's bottom bar on every iPhone. Anchor at the top and
     size with 100svh (smallest viewport, bars shown) so the CTA is always above
     the browser chrome; bottom:auto avoids over-constraining the height away. */
  position: fixed; top: 0; left: 0; right: 0; bottom: auto;
  width: 100%; min-height: 0; height: 100vh; height: 100svh;
  display: block; overflow: hidden; background: #fff;
}
.calibration-mode .app-sidebar,
.calibration-mode .app-topbar,
.calibration-mode .dx-topbar { display: none !important; }
.calibration-mode .app-main { display: block; height: 100%; overflow: hidden; }
.calibration-mode .app-content.dx-home {
  max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden;
}
.calibration-mode .dashboard-loaded-state,
.calibration-mode .cal-onboarding {
  height: 100%; min-height: 0; overflow: hidden;
}

.cal-setup {
  min-height: 100vh; min-height: 100dvh;
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
  background: #fff; color: var(--text);
}
.cal-setup-header {
  position: sticky; top: 0; z-index: 40;
  padding: max(14px, env(safe-area-inset-top)) 24px 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.cal-setup-titlebar {
  max-width: 780px; min-height: 44px; margin: 0 auto 12px;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
}
.cal-setup-titlebar h1 {
  margin: 0; text-align: center; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.02em;
}
.cal-setup-back {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text); font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.cal-setup-back:hover { background: var(--surface-2); }
.cal-setup-back.invisible { visibility: hidden; pointer-events: none; }
.cal-setup-progress {
  max-width: 780px; height: 7px; margin: 0 auto; overflow: hidden;
  border-radius: 999px; background: #e9edf5;
}
.cal-setup-progress span {
  display: block; height: 100%; border-radius: inherit; background: var(--primary);
  transition: width 0.25s ease;
}
.cal-setup-body { width: min(100% - 40px, 680px); margin: 0 auto; padding: 28px 0 36px; }
.cal-setup-step { margin: 0 0 40px; color: var(--text-dim); text-align: center; font-size: 0.98rem; }
.cal-setup-body h2 {
  margin: 0; font-size: clamp(2rem, 7vw, 3rem); line-height: 1.08; letter-spacing: -0.045em;
}
.cal-setup-intro { max-width: 620px; margin: 14px 0 28px; color: var(--text-dim); font-size: 1.05rem; line-height: 1.65; }
.cal-goals { display: grid; gap: 12px; }
.cal-goals button {
  width: 100%; min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; border: 1.5px solid var(--border); border-radius: 18px;
  background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.cal-goals button:hover { border-color: #93b4ff; background: #fbfdff; }
.cal-goals button.selected {
  border-color: var(--primary); background: linear-gradient(110deg, #f8fbff, #eef4ff);
  box-shadow: 0 0 0 1px var(--primary);
}
.cal-goal-score { font-size: 1.02rem; font-weight: 800; }
.cal-goals button.selected .cal-goal-score { color: var(--primary); }
.cal-goal-check {
  width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #aab4c4; border-radius: 50%; color: transparent;
}
.cal-goals button.selected .cal-goal-check { border-color: var(--primary); background: var(--primary); color: #fff; }
.cal-goal-check svg { width: 17px; height: 17px; }
.cal-setup-note {
  display: flex; align-items: center; gap: 12px; margin: 20px 0 0; padding: 16px 18px;
  border-radius: 14px; background: #f4f7ff; color: var(--text-dim); font-size: 0.9rem; line-height: 1.45;
}
.cal-setup-note > span { width: 24px; height: 24px; flex: none; display: inline-flex; color: var(--primary); }
.cal-setup-note svg { width: 24px; height: 24px; }
.cal-device-card {
  display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 16px;
  padding: 22px; border: 1.5px solid var(--border); border-radius: 18px; background: #fff;
}
.cal-device-icon {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 15px; background: var(--primary-soft); color: var(--primary);
}
.cal-device-icon svg { width: 25px; height: 25px; }
.cal-device-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cal-device-copy b { font-size: 1rem; }
.cal-device-copy small { color: var(--text-dim); font-size: 0.82rem; line-height: 1.45; }
.cal-device-state {
  padding: 6px 9px; border-radius: 999px; background: var(--surface-2);
  color: var(--text-dim); font-size: 0.72rem; font-weight: 800; white-space: nowrap;
}
.cal-device-state.ready { background: var(--success-soft); color: var(--success); }
.cal-device-state.blocked, .cal-device-state.unsupported { background: #fff7ed; color: #9a5b00; }
.cal-device-retry { margin-top: 14px; }
.cal-setup-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: rgba(255,255,255,0.97);
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.cal-setup-continue {
  width: min(100%, 680px); min-height: 58px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  border-radius: 15px; font-size: 1rem;
}

@media (max-width: 640px) {
  .app-dashboard-root,
  .app-dashboard-page {
    width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip;
    overscroll-behavior-x: none;
  }
  .app-dashboard-page { touch-action: pan-y; }
  .app-dashboard-page .app-layout,
  .app-dashboard-page .app-main,
  .app-dashboard-page .app-content,
  .app-dashboard-page .cal-onboarding,
  .app-dashboard-page .mobile-calibration-onboarding,
  .app-dashboard-page .cal-intro,
  .app-dashboard-page .cal-setup { min-width: 0; max-width: 100%; overflow-x: clip; }
  .app-dashboard-page input,
  .app-dashboard-page textarea,
  .app-dashboard-page select { font-size: 16px; }
  .mobile-calibration-onboarding { display: block; height: 100%; min-height: 0; overflow: hidden; }
  .cal-intro { padding-top: 6px; }
  .cal-intro-welcome { margin-bottom: 22px; }
  .cal-intro-welcome > p { font-size: 0.95rem; }
  .cal-intro-welcome h1 { font-size: 2.25rem; }
  .cal-intro-welcome > span { margin-top: 13px; font-size: 0.96rem; }
  .cal-intro-hero { padding: 26px 18px; border-radius: 18px; }
  .cal-intro-target { width: 88px; height: 88px; }
  .cal-intro-target > span, .cal-intro-target svg { width: 48px; height: 48px; }
  .cal-intro-hero h2 { font-size: 1.4rem; }
  .cal-intro-skills { gap: 6px; }
  .cal-intro-skills > span { flex-direction: column; gap: 5px; padding: 10px 3px; font-size: 0.7rem; }
  .cal-intro-meta { margin: 18px 0; padding-top: 17px; }
  .cal-intro-meta > span { gap: 7px; }
  .cal-intro-meta i, .cal-intro-meta svg { width: 21px; height: 21px; }
  .cal-intro-meta b { font-size: 0.8rem; }
  .cal-intro-next { padding: 22px 18px; border-radius: 18px; }
  .cal-intro-next-row { grid-template-columns: 38px 42px minmax(0,1fr) 16px; gap: 10px; padding: 16px 0; }
  .cal-intro-num { width: 38px; height: 38px; }
  .cal-intro-next-row > i { width: 42px; height: 42px; }
  .cal-intro-next-row b { font-size: 0.88rem; }
  .cal-intro-next-row small { font-size: 0.72rem; }
  .cal-setup-header { padding-left: 16px; padding-right: 16px; }
  .cal-setup-titlebar { margin-bottom: 10px; }
  .cal-setup-titlebar h1 { font-size: 1.08rem; }
  .cal-setup-body { width: min(100% - 32px, 680px); padding-top: 22px; }
  .cal-setup-step { margin-bottom: 28px; }
  .cal-setup-body h2 { font-size: 2.15rem; }
  .cal-setup-intro { margin-top: 12px; margin-bottom: 22px; font-size: 0.98rem; line-height: 1.55; }
  .cal-goals { gap: 10px; }
  .cal-goals button { min-height: 76px; padding: 17px 18px; border-radius: 15px; }
  .cal-goal-score { font-size: 0.93rem; }
  .cal-device-card { grid-template-columns: 44px minmax(0,1fr); padding: 18px; }
  .cal-device-icon { width: 44px; height: 44px; border-radius: 12px; }
  .cal-device-state { grid-column: 2; justify-self: start; }
  .cal-setup-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .cal-setup-continue { min-height: 54px; }
}

/* Mobile onboarding shell: sticky system header, scrolling page, fixed action tray. */
.mobile-cal-screen {
  height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: var(--text);
}
.mobile-cal-header {
  position: sticky; top: 0; z-index: 40; flex: none;
  padding: max(10px, env(safe-area-inset-top)) 22px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.75);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.mobile-cal-stepper {
  display: grid; grid-template-columns: 58px minmax(24px, 1fr) 82px minmax(24px, 1fr) 58px;
  align-items: start; gap: 8px; margin-top: 18px;
}
.mobile-cal-step {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-dim); text-align: center;
}
.mobile-cal-step > span {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1.5px solid #cbd5e1; border-radius: 50%; background: #fff;
  font-size: 1rem; font-weight: 750;
}
.mobile-cal-step > b { font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.mobile-cal-step.active { color: var(--primary); }
.mobile-cal-step.active > span {
  border-color: var(--primary); background: var(--primary); color: #fff;
  box-shadow: 0 7px 18px rgba(37, 99, 235, 0.23);
}
.mobile-cal-step.done { color: var(--primary); }
.mobile-cal-step.done > span { border-color: var(--primary); background: var(--primary); color: #fff; }
.mobile-cal-step.done svg { width: 20px; height: 20px; }
.mobile-cal-stepper > i {
  height: 1.5px; margin-top: 20px; background: #d7dde7; font-style: normal;
}
.mobile-cal-stepper > i.done { background: var(--primary); }
/* App-style screens scroll without a visible scrollbar track. */
.mobile-cal-body, .cal-skill-body, .cal-device-body, .mobile-task-pages,
.cal-result-build-body, .cal-flow-body, .cal-outcome-body { scrollbar-width: none; }
.mobile-cal-body::-webkit-scrollbar, .cal-skill-body::-webkit-scrollbar,
.cal-device-body::-webkit-scrollbar, .mobile-task-pages::-webkit-scrollbar,
.cal-result-build-body::-webkit-scrollbar, .cal-flow-body::-webkit-scrollbar,
.cal-outcome-body::-webkit-scrollbar { width: 0; height: 0; }
/* The stepper is the whole calibration header now — no titlebar above it. */
.mobile-cal-header .mobile-cal-stepper { margin-top: 4px; }
.mobile-cal-body {
  width: min(100% - 32px, 680px); min-height: 0; flex: 1; margin: 0 auto;
  padding: 30px 0 24px;
  overflow-x: clip; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
}
.mobile-cal-body h2 {
  max-width: 570px; margin: 0 0 26px; font-size: clamp(2.1rem, 9vw, 3.25rem);
  line-height: 1.08; letter-spacing: -0.05em;
}
.mobile-cal-substep {
  margin: 0 0 12px; color: var(--primary); font-size: 0.78rem;
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.mobile-cal-goals { display: grid; gap: 10px; }
.mobile-cal-goals > button {
  position: relative; width: 100%; min-height: 84px;
  display: grid; grid-template-columns: 100px minmax(0, 1fr) 28px; align-items: center; gap: 10px;
  padding: 16px 18px; border: 1.5px solid var(--border); border-radius: 16px;
  background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-cal-goals > button:active { background: #f8fafc; }
.mobile-cal-goals > button.selected {
  border-color: var(--primary); background: linear-gradient(110deg, #f8fbff, #eef4ff);
  box-shadow: inset 0 0 0 0.5px var(--primary);
}
.mobile-cal-goal-score { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mobile-cal-goal-score strong { font-size: 1.72rem; line-height: 1; letter-spacing: -0.045em; }
.mobile-cal-goal-score small { color: var(--text-dim); font-size: 0.72rem; font-weight: 650; }
.mobile-cal-goal-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.mobile-cal-goal-copy b { font-size: 0.98rem; line-height: 1.25; }
/* Daily equivalent: a quiet gloss on the weekly figure beside it. */
.mobile-cal-goal-copy small { color: var(--text-dim); font-size: 0.78rem; line-height: 1.2; }
.mobile-cal-goals > button.selected .mobile-cal-goal-score strong { color: var(--primary); }
.mobile-cal-check {
  width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #aeb8c7; border-radius: 50%; color: transparent;
}
.mobile-cal-goals > button.selected .mobile-cal-check {
  border-color: var(--primary); background: var(--primary); color: #fff;
}
.mobile-cal-check svg { width: 16px; height: 16px; }
/* ---- Funnel intake (the 8 questions before the diagnostic) ---------------
   Same option cards as the old goal stepper, minus the score column: these
   options are a sentence, not a number. */
.mobile-cal-goals.text-only > button {
  grid-template-columns: minmax(0, 1fr) 28px; min-height: 62px; padding: 15px 18px;
}
.mobile-cal-goals.text-only .mobile-cal-goal-copy b { font-size: 1rem; font-weight: 600; }
/* The same band said per day (Q8): sits beside the label, and wraps under it
   on a narrow phone rather than squeezing either half. The copy column is a
   flex COLUMN by default, so it has to go to a wrapping row here. */
.mobile-cal-goals.text-only .mobile-cal-goal-copy {
  flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
}
.mobile-cal-goals.text-only .intake-opt-hint {
  font-size: .78rem; font-weight: 500; line-height: 1.2; color: var(--text-dim);
}
/* Question prompts are full sentences, so they get a calmer size than the
   three-word headings the stepper used to show. */
.mobile-cal-body h2.intake-question {
  margin-bottom: 10px; font-size: clamp(1.45rem, 5.6vw, 2.1rem); line-height: 1.16;
}
.intake-hint { margin: 0 0 16px; color: var(--text-dim); font-size: 0.88rem; }
.mobile-cal-body h2.intake-question + .mobile-cal-goals { margin-top: 18px; }
/* Q5's "another exam" detail: free text, because every other exam has its own
   scale. Optional by design — it never gates the Continue button. */
.intake-detail {
  margin-top: 18px; padding: 16px 18px; border: 1.5px solid var(--border);
  border-radius: 16px; background: var(--surface-2);
}
.intake-field { display: grid; grid-template-columns: minmax(0, 1fr) 108px; align-items: center; gap: 10px; }
.intake-field > span { font-size: 0.95rem; }
.intake-field input {
  min-height: 46px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: 12px;
  background: #fff; color: var(--text); font: inherit; text-align: right;
}
.intake-field input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* iOS-style score wheel (Q5/Q6, on its own screen). One scroll-snap column per
   value: FIVE rows visible, the centred one selected under the highlight band,
   and the spacers let the first and last row reach that centre. Every row shows
   both scales side by side — band left, old score right — so there is one list
   and no format to choose.
   --cal-wheel-item must match WHEEL_ITEM_HEIGHT in dashboard.js. */
.cal-wheel-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 8px; margin-top: 10px;
}
.cal-wheel-grid.single { grid-template-columns: minmax(0, 1fr); }
/* Four wheels on one screen: five rows each does not fit a phone, three does. */
.cal-wheel-grid:not(.single) .cal-wheels { --cal-wheel-rows: 3; }
.cal-wheel-label {
  margin: 0 0 2px; color: var(--text-dim); font-size: 0.8rem;
  font-weight: 700; text-align: center;
}
/* Names the two columns where they actually sit, so no caption is needed below.
   Padding + grid must match .cal-wheel-item or the headings drift off centre. */
.cal-wheel-head {
  margin: 0 0 6px; padding: 0 6px;
  color: var(--text-dim); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.cal-wheels {
  --cal-wheel-item: 44px; --cal-wheel-rows: 5;
  position: relative; padding: 0 6px;
}
/* Borderless: the centred band is the only chrome, iOS-style. */
.cal-wheel-band {
  position: absolute; left: 0; right: 0; top: 50%; height: var(--cal-wheel-item);
  transform: translateY(-50%); border-radius: 12px; background: var(--surface-2);
  pointer-events: none;
}
.cal-wheel {
  position: relative; height: calc(var(--cal-wheel-item) * var(--cal-wheel-rows));
  overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  /* The outer rows fade with distance from the centre — the depth cue an iOS
     wheel gets from its cylinder, without per-row transforms during scroll. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0,
    #000 calc(var(--cal-wheel-item) * 0.8), #000 calc(100% - var(--cal-wheel-item) * 0.8), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0,
    #000 calc(var(--cal-wheel-item) * 0.8), #000 calc(100% - var(--cal-wheel-item) * 0.8), transparent 100%);
}
.cal-wheel::-webkit-scrollbar { width: 0; height: 0; }
.cal-wheel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 14px; }
.cal-wheel::before, .cal-wheel::after {
  content: ''; display: block;
  height: calc(var(--cal-wheel-item) * (var(--cal-wheel-rows) - 1) / 2);
}
/* Two columns, so band and old score line up down the wheel instead of the pair
   drifting with each row's width. Same grid as .cal-wheel-head. */
.cal-wheel-head, .cal-wheel-item {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; column-gap: 14px;
}
.cal-wheel-head > :first-child, .cal-wheel-item > span { text-align: right; }
.cal-wheel-head > :last-child, .cal-wheel-item > small { text-align: left; }
/* Exam names are words, not two-digit numbers: keep a long one on its own row
   rather than letting it wrap and break the 44px row height the wheel counts on. */
.cal-wheel-item > span, .cal-wheel-item > small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Four columns on one phone screen: half the width, so half the gutter. */
.cal-wheel-grid:not(.single) .cal-wheel-item { column-gap: 8px; }
.cal-wheel-item {
  height: var(--cal-wheel-item);
  scroll-snap-align: center; scroll-snap-stop: always;
  color: var(--text-dim); font-size: 1.02rem; cursor: pointer;
  transition: color 0.15s, font-weight 0.15s;
  -webkit-tap-highlight-color: transparent;
}
/* A wheel whose rows carry no second column (an exam's own score scale) centres
   its one value instead of hanging it on the left half's inner edge. */
.cal-wheel.plain .cal-wheel-item { grid-template-columns: minmax(0, 1fr); }
.cal-wheel.plain .cal-wheel-item > span { text-align: center; }
.cal-wheel-item small { font-size: 0.82em; }
.cal-wheel-item.on { color: var(--text); font-size: 1.12rem; font-weight: 700; }
.cal-wheel-item.on small { color: var(--text-dim); font-weight: 600; }
/* The escape under the Q6 wheel: deliberately a text link, quieter than any
   option card, so the wheel + Continue stays the obvious path. Still a real tap
   target (44px) — it is on the phone critical path. */
.intake-skip {
  display: block; width: 100%; min-height: 44px; margin: 14px auto 0; padding: 0 8px;
  border: 0; background: none; color: var(--text-dim);
  font: inherit; font-size: 0.9rem; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.intake-skip:hover { color: var(--text); }
.intake-skip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 10px; }

/* Back sits beside the primary CTA so a mistyped answer is always correctable —
   8 questions with no way back is a trap, not a funnel. */
.mobile-cal-actions { display: flex; align-items: center; gap: 10px; }
.intake-back { flex: none; min-height: 56px; padding: 0 16px; border-radius: 14px; }

/* In-flow (not fixed) so the scrolling body gets exactly the space left over:
   content that fits the screen does not scroll. Same shape as .cal-flow-footer. */
.mobile-cal-footer {
  position: relative; z-index: 45; flex: none;
  padding: 12px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.mobile-cal-cta {
  width: min(100%, 680px); min-height: 56px; margin: 0 auto; display: flex;
  align-items: center; justify-content: center; border-radius: 14px; font-size: 1.02rem;
}

/* Ad-landing intro — the first mobile onboarding screen on /start. Same
   flex-column shell as .mobile-cal-screen (scroll body + fixed footer CTA), but
   a marketing landing rather than the goal-setup stepper. */
.mobile-cal-intro {
  height: 100%; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden; background: #fff; color: var(--text);
}
.mobile-cal-intro-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 20px 10px;
}
.mobile-cal-intro-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em;
}
.mobile-cal-intro-brand i { width: 30px; height: 30px; display: inline-flex; color: var(--primary); }
.mobile-cal-intro-brand svg { width: 30px; height: 30px; }
.mobile-cal-intro-signin { font-size: 1rem; font-weight: 650; color: var(--primary); }
.mobile-cal-intro-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none;
  width: min(100% - 40px, 680px); margin: 0 auto; padding: 6px 0 20px;
}
.mobile-cal-intro-body::-webkit-scrollbar { width: 0; height: 0; }
.mobile-cal-intro-title {
  margin: 6px 0 12px; font-size: clamp(2.05rem, 8.5vw, 2.9rem);
  line-height: 1.06; letter-spacing: -0.05em;
}
.mobile-cal-intro-sub {
  margin: 0 0 22px; color: var(--text-dim); font-size: 1.05rem; line-height: 1.5;
}
.mobile-cal-preview {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 16px;
  align-items: center; padding: 18px 16px; margin: 0 0 22px;
  border: 1px solid var(--border); border-radius: 18px; background: #f8fafc;
}
.mobile-cal-preview-gauge { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mobile-cal-preview-gauge .dash-ring { width: 128px; height: 128px; margin: 0; }
.mobile-cal-preview-gauge .dash-ring-mid > strong { font-size: 2rem; }
.mobile-cal-preview-cap { font-size: 0.85rem; font-weight: 750; line-height: 1.3; }
.mobile-cal-preview-skills { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.mobile-cal-preview-skills > .mobile-cal-preview-cap { margin-bottom: 3px; }
.mobile-cal-preview-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 8px;
}
.mobile-cal-preview-row > span { font-size: 0.9rem; font-weight: 600; }
.mobile-cal-preview-row > em { font-style: normal; font-weight: 750; font-size: 0.95rem; }
.mobile-cal-preview-row > .dash-skill-bar { grid-column: 1 / -1; height: 7px; }
.mobile-cal-intro-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.mobile-cal-intro-points > li {
  display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 12px;
  font-size: 1rem; line-height: 1.4;
}
.mobile-cal-intro-points > li:not(:last-child) { padding-bottom: 15px; border-bottom: 1px solid rgba(226, 232, 240, 0.7); }
.mobile-cal-tick {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--primary); color: #fff;
}
.mobile-cal-tick svg { width: 15px; height: 15px; }
.mobile-cal-intro-foot { margin: 12px 0 0; text-align: center; color: var(--text-dim); font-size: 0.9rem; line-height: 1.4; }

/* Short phones (iPhone 8/SE, ~667px tall): reclaim vertical space on the goal
   setup so the whole screen — including the fixed CTA — fits without the button
   falling below the fold. Scoped to max-height:700px so taller phones (iPhone
   12/13/14/15/16, ~844-932px) are untouched. */
@media (max-width: 640px) and (max-height: 700px) {
  .mobile-cal-header { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 10px; }
  .mobile-cal-header .mobile-cal-stepper { margin-top: 2px; }
  .mobile-cal-step > span { width: 34px; height: 34px; font-size: 0.92rem; }
  .mobile-cal-step > b { font-size: 0.76rem; }
  .mobile-cal-body { padding-top: 16px; padding-bottom: 14px; }
  .mobile-cal-body h2 { margin-bottom: 16px; font-size: clamp(1.55rem, 7vw, 2.05rem); }
  .mobile-cal-substep { margin-bottom: 8px; }
  .mobile-cal-goals { gap: 8px; }
  .mobile-cal-goals > button { min-height: 66px; padding: 12px 14px; }
  .mobile-cal-goal-score strong { font-size: 1.45rem; }
  /* The single wheel keeps its five rows even here — the body scrolls, the CTA
     is in the flex footer below it, so nothing is pushed off screen. The 2×2
     section wheels stay at three rows (see .cal-wheel-grid:not(.single)). */
  .mobile-cal-footer { padding-top: 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .mobile-cal-cta { min-height: 50px; }
}

/* App-style checkpoints between diagnostic skills at every viewport width. */
@media all {
  .attempt-root,
  .attempt-page {
    width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip;
    overscroll-behavior-x: none;
  }
  .attempt-page { touch-action: pan-y; }
  .attempt-page.calibration-transition-active {
    position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #fff;
  }
  .calibration-transition-active .runner-bar { display: none !important; }
  .calibration-transition-active > main.container {
    width: 100%; max-width: none !important; height: 100%; min-width: 0; min-height: 0;
    margin: 0; padding: 0 !important; overflow: hidden;
  }
  .calibration-transition-active #runner,
  .calibration-transition-active .calibration-skill-transition,
  .calibration-transition-active .cal-skill-screen,
  .calibration-transition-active .cal-device-screen {
    width: 100%; max-width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden;
  }
  .cal-skill-screen,
  .cal-device-screen {
    height: 100%; min-height: 0; display: flex; flex-direction: column;
    overflow: hidden; background: #fff;
  }
  .cal-skill-header { flex: none; padding-top: max(7px, env(safe-area-inset-top)); padding-bottom: 10px; border-bottom: 0; }
  .cal-skill-header .mobile-cal-stepper { margin-top: 4px; }
  .cal-skill-header .mobile-cal-step { gap: 5px; }
  .cal-skill-header .mobile-cal-step > span { width: 36px; height: 36px; }
  .cal-skill-header .mobile-cal-stepper > i { margin-top: 18px; }
  .cal-skill-body {
    width: min(100% - 32px, 680px); min-height: 0; flex: 1; margin: 0 auto;
    padding: 24px 0; text-align: center;
    overflow-x: clip; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; touch-action: pan-y;
  }
  .cal-skill-success {
    width: 62px; height: 62px; margin: 0 auto 13px;
    display: grid; place-items: center; border: 3px solid #16a34a;
    border-radius: 50%; color: #16a34a;
  }
  .cal-skill-success svg { width: 32px; height: 32px; stroke-width: 2; }
  .cal-skill-body > h2 {
    margin: 0; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.08; letter-spacing: -0.045em;
  }
  .cal-skill-count { margin: 7px 0 18px; color: var(--text-dim); font-size: 0.96rem; }
  .cal-skill-list {
    overflow: hidden; border: 1.5px solid var(--border); border-radius: 17px;
    background: #fff; text-align: left;
  }
  .cal-skill-row {
    min-height: 64px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center; gap: 10px; margin: 0 10px; padding: 9px 2px;
    border-top: 1px solid var(--border);
  }
  .cal-skill-row:first-child { border-top: 0; }
  .cal-skill-row.next {
    margin: 0; padding: 9px 12px; border: 1px solid #dbe5ff; border-radius: 13px;
    background: #f8faff;
  }
  .cal-skill-row-icon {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  }
  .cal-skill-row-icon svg { width: 22px; height: 22px; }
  .cal-skill-row-icon.reading { background: #e8f8ef; color: #16a34a; }
  .cal-skill-row-icon.listening { background: #eef4ff; color: #2563eb; }
  .cal-skill-row-icon.speaking { background: #f4ebff; color: #7e22ce; }
  .cal-skill-row-icon.writing { background: #fff4e7; color: #ea7800; }
  .cal-skill-row > b { min-width: 0; font-size: 1rem; }
  .cal-skill-status {
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px;
    color: var(--text-dim); font-size: 0.88rem; white-space: nowrap;
  }
  .cal-skill-status i { width: 24px; height: 24px; display: inline-flex; font-style: normal; }
  .cal-skill-status i svg { width: 24px; height: 24px; }
  .cal-skill-status.complete { color: #16a34a; }
  .cal-skill-status.complete i {
    align-items: center; justify-content: center; border-radius: 50%; background: #16a34a; color: #fff;
  }
  .cal-skill-status.complete i svg { width: 15px; height: 15px; }
  .cal-skill-status.next {
    padding: 0; border-radius: 0; background: transparent; color: var(--primary);
    font-size: 0.88rem; font-weight: 750;
  }
  .cal-skill-status.skipped { color: #7c3aed; font-weight: 700; }
  .cal-skill-success.skipped { border-color: #7c3aed; color: #7c3aed; }
  .cal-skill-next-copy { margin-top: 20px; color: var(--text-dim); }
  .cal-skill-next-copy > b { display: block; margin-bottom: 8px; color: var(--primary); font-size: 1rem; }
  .cal-skill-next-copy > p { margin: 0; font-size: 0.94rem; line-height: 1.55; }
  .cal-skill-footer {
    position: relative; z-index: 45; flex: none;
    padding: 12px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .cal-skill-continue {
    width: min(100%, 680px); min-height: 56px; margin: 0 auto; display: flex;
    align-items: center; justify-content: center; border-radius: 14px; font-size: 1.02rem;
  }
  .cal-device-body {
    width: min(100% - 32px, 680px); min-height: 0; flex: 1; margin: 0 auto;
    padding: 62px 0 24px; text-align: center;
    overflow-x: clip; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; touch-action: pan-y;
  }
  .cal-device-screen.microphone .cal-device-body { padding-top: 76px; }
  .cal-device-hero-icon {
    width: 72px; height: 72px; margin: 0 auto 24px;
    display: grid; place-items: center; border-radius: 50%;
  }
  .cal-device-hero-icon svg { width: 46px; height: 46px; }
  .cal-device-hero-icon.listening { background: #eef4ff; color: #155eef; }
  .cal-device-hero-icon.speaking { background: #f2eaff; color: #6d20d2; }
  .cal-device-body > h2 {
    margin: 0; font-size: clamp(2rem, 8.5vw, 2.8rem); line-height: 1.1; letter-spacing: -0.045em;
  }
  .cal-device-intro {
    margin: 16px 0 26px; color: var(--text-dim); font-size: 1rem; line-height: 1.55;
  }
  .cal-sound-card {
    position: relative; min-height: 160px; margin-top: 34px;
    display: grid; place-items: center; overflow: hidden;
    border: 1.5px solid #bcd0ff; border-radius: 18px; background: #fbfdff;
  }
  .cal-sound-wave {
    position: absolute; left: 18px; right: 18px; top: 50%;
    display: flex; align-items: center; justify-content: space-between;
    transform: translateY(-50%); opacity: 0.72;
  }
  .cal-sound-wave i {
    width: 2px; height: var(--wave); border-radius: 999px; background: #79a2ff;
    font-style: normal;
  }
  .cal-sound-play {
    position: relative; z-index: 1; min-width: 112px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer;
  }
  .cal-sound-play > span {
    width: 72px; height: 72px; display: grid; place-items: center;
    border-radius: 50%; background: var(--primary); color: #fff;
    box-shadow: 0 9px 24px rgba(37, 99, 235, 0.25);
  }
  .cal-sound-play > span svg { width: 34px; height: 34px; }
  .cal-sound-play > b { padding: 2px 8px; background: rgba(251, 253, 255, 0.92); font-size: 0.94rem; }
  .cal-sound-play.playing > span { animation: calSoundPulse 1s ease-in-out infinite alternate; }
  @keyframes calSoundPulse { to { transform: scale(1.06); box-shadow: 0 11px 30px rgba(37, 99, 235, 0.38); } }
  .cal-device-help,
  .cal-device-status {
    margin: 18px 0 0; padding: 13px 15px; border-radius: 12px;
    background: #f5f7fb; color: var(--text-dim); font-size: 0.86rem; line-height: 1.5;
  }
  .cal-device-help[hidden] { display: none; }
  .cal-device-permission-note {
    display: flex; align-items: center; gap: 13px; margin-top: 22px; padding: 17px 18px;
    border-radius: 15px; background: #f7f3ff; color: var(--text-dim); text-align: left;
  }
  .cal-device-permission-note > span {
    width: 30px; height: 30px; flex: none; display: inline-flex; color: #6d20d2;
  }
  .cal-device-permission-note svg { width: 30px; height: 30px; }
  .cal-device-permission-note p { margin: 0; font-size: 0.92rem; line-height: 1.45; }
  .cal-device-status:empty { display: none; }
  .cal-device-footer {
    position: relative; z-index: 45; flex: none;
    padding: 12px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .cal-device-primary {
    width: min(100%, 680px); min-height: 56px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    border-radius: 14px; font-size: 1.02rem;
  }
  .cal-device-primary > span { width: 25px; height: 25px; display: inline-flex; }
  .cal-device-primary svg { width: 25px; height: 25px; }
  .cal-device-primary > b { font: inherit; font-weight: 700; }
  .cal-device-link {
    width: 100%; min-height: 34px; margin-top: 3px; padding: 4px 12px;
    border: 0; background: transparent; color: var(--primary);
    font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
  }
  .cal-device-footer.microphone { padding-top: 14px; }
  .cal-device-skip { min-height: 42px; margin-top: 6px; font-size: 0.96rem; }

}

@media (max-width: 640px) and (max-height: 720px) {
  .cal-device-body { padding-top: 34px; }
  .cal-device-screen.microphone .cal-device-body { padding-top: 42px; }
  .cal-device-hero-icon { width: 62px; height: 62px; margin-bottom: 16px; }
  .cal-device-hero-icon svg { width: 39px; height: 39px; }
  .cal-sound-card { min-height: 140px; margin-top: 22px; }
}

/* App-style diagnostic question pages: app header, paged content, fixed actions. */
@media all {
  .attempt-page.calibration-question-active {
    position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #fff;
  }
  .calibration-question-active .runner-bar { display: none !important; }
  .calibration-question-active > main.container {
    width: 100%; max-width: none !important; height: 100%; min-width: 0; min-height: 0;
    margin: 0; padding: 0 !important; overflow: hidden;
  }
  .calibration-question-active #runner,
  .calibration-question-active .exam-stage,
  .calibration-question-active .mobile-calibration-questions,
  .calibration-question-active .mobile-task-screen {
    width: 100%; max-width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden;
  }
  .mobile-task-screen {
    height: 100%; min-height: 0; display: flex; flex-direction: column;
    overflow: hidden; background: #fff;
  }
  .mobile-task-header {
    position: sticky; top: 0; z-index: 35; flex: none;
    padding: max(7px, env(safe-area-inset-top)) 20px 12px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .mobile-task-titlebar {
    min-height: 48px; display: grid; grid-template-columns: 50px minmax(0, 1fr) 94px;
    align-items: center;
  }
  /* Calibration has no exit button, so the side columns must match for the
     title to sit centred rather than be pushed left by the timer. */
  .mobile-cal-task-header .mobile-task-titlebar { grid-template-columns: 94px minmax(0, 1fr) 94px; }
  .mobile-task-titlebar h1 {
    min-width: 0; margin: 0; overflow: hidden; color: var(--text);
    font-size: 1.18rem; line-height: 1.2; letter-spacing: -0.03em;
    text-align: center; text-overflow: ellipsis; white-space: nowrap;
  }
  .mobile-task-exit {
    width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--text);
    font: inherit; font-size: 2.3rem; font-weight: 350; line-height: 1; cursor: pointer;
  }
  .mobile-task-exit:active { background: var(--surface-2); }
  .mobile-task-timer {
    justify-self: end; min-height: 38px; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 11px; border: 1px solid #f4cf86; border-radius: 999px;
    background: #fff8e8; color: #ad6700; font-variant-numeric: tabular-nums;
  }
  .mobile-task-timer > span { width: 20px; height: 20px; display: inline-flex; }
  .mobile-task-timer svg { width: 20px; height: 20px; }
  .mobile-task-timer b { font-size: 0.91rem; font-weight: 750; }
  .mobile-task-timer.danger { border-color: #fecaca; background: #fff1f2; color: #be123c; }
  .mobile-task-stepper { margin-top: 10px; }
  .mobile-task-stepper .mobile-cal-step { gap: 5px; }
  .mobile-task-stepper .mobile-cal-step > span { width: 36px; height: 36px; }
  .mobile-task-stepper .mobile-cal-step > b { font-size: 0.78rem; }
  .mobile-task-stepper > i { margin-top: 18px; }
  .mobile-task-meta {
    min-height: 54px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 22px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    color: #334155; background: #fff; font-size: 0.9rem; font-variant-numeric: tabular-nums;
  }
  .mobile-task-meta span:last-child { text-align: right; }
  .mobile-task-pages {
    width: min(100% - 32px, 680px); min-height: 0; flex: 1; margin: 0 auto;
    padding: 25px 0 calc(122px + env(safe-area-inset-bottom) + var(--mobile-keyboard-inset, 0px));
    overflow-x: clip; overflow-y: auto; overscroll-behavior: contain;
    scroll-padding: 18px 0 calc(88px + var(--mobile-keyboard-inset, 0px));
    -webkit-overflow-scrolling: touch; touch-action: pan-y;
  }
  .mobile-task-question > h2 {
    margin: 0 0 22px; color: var(--text); font-size: clamp(1.75rem, 8vw, 2.45rem);
    line-height: 1.14; letter-spacing: -0.045em;
  }
  .mobile-reading-question > h2 { margin-bottom: 20px; }
  .mobile-reading-instruction {
    width: max-content; max-width: 100%; min-height: 46px;
    display: inline-flex; align-items: center; gap: 11px; margin-bottom: 22px;
    padding: 9px 13px; border-radius: 11px; background: #eef4ff; color: var(--primary);
  }
  .mobile-reading-instruction > span { width: 25px; height: 25px; flex: none; display: inline-flex; }
  .mobile-reading-instruction svg { width: 25px; height: 25px; }
  .mobile-reading-instruction b { font-size: 0.96rem; line-height: 1.3; }
  .mobile-reading-card {
    padding: 22px 20px; border: 1.5px solid #d4dbe7; border-radius: 17px;
    background: #fff;
  }
  .mobile-reading-passage {
    margin: 0; color: #0b1223; font-size: 1.18rem; line-height: 2.08;
    letter-spacing: -0.012em; overflow-wrap: break-word;
  }
  .mobile-reading-blank {
    display: inline-flex; align-items: baseline; max-width: 100%;
    border-bottom: 2px solid var(--primary); color: var(--primary);
    font-weight: 650; line-height: 1.25; vertical-align: baseline; white-space: nowrap; cursor: text;
  }
  .mobile-reading-prefix { display: inline; }
  input.mobile-reading-input {
    width: calc(var(--missing) * 0.72em + 0.32em); min-width: 1.05em; height: 1.28em;
    flex: none; padding: 0 1px; border: 0; border-radius: 0; outline: 0;
    background: transparent; box-shadow: none; color: var(--primary);
    font: inherit; font-size: 1em; font-weight: 650; line-height: 1.2;
    letter-spacing: 0.04em; caret-color: var(--primary);
  }
  input.mobile-reading-input:focus {
    border: 0; outline: 0; background: transparent; box-shadow: none;
  }
  .mobile-reading-help {
    display: flex; align-items: center; gap: 11px; margin: 18px 5px 0;
    color: #526079; font-size: 0.9rem;
  }
  .mobile-reading-help > span {
    width: 30px; height: 30px; display: grid; place-items: center;
    color: var(--primary); font-size: 1.55rem; line-height: 1;
  }
  .mobile-listen-card {
    position: relative; min-height: 92px; display: grid;
    grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 1fr auto;
    align-items: center; gap: 4px 12px; margin-bottom: 18px; padding: 13px;
    overflow: hidden; border: 1.5px solid #c9d8fa; border-radius: 17px; background: #fbfdff;
  }
  .mobile-listen-play {
    position: relative; z-index: 2; grid-row: 1 / 3; width: 54px; height: 54px;
    display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
    background: var(--primary); color: #fff; box-shadow: 0 9px 23px rgba(37, 99, 235, 0.25);
    font: inherit; cursor: pointer;
  }
  .mobile-listen-play:disabled { opacity: 1; cursor: default; }
  .mobile-listen-play-face { width: 26px; height: 26px; display: grid; place-items: center; font-size: 1.15rem; font-weight: 800; }
  .mobile-listen-play-face svg { width: 26px; height: 26px; }
  .mobile-listen-wave {
    min-width: 0; height: 36px; display: flex; align-items: center; justify-content: space-between;
    gap: 2px; overflow: hidden; color: #5b8cff;
  }
  .mobile-listen-wave i {
    width: 2px; height: var(--wave); flex: 0 0 2px; border-radius: 999px;
    background: currentColor; opacity: 0.74; font-style: normal;
  }
  .mobile-listen-card.playing .mobile-listen-wave i { animation: mobileListenWave 0.72s ease-in-out infinite alternate; }
  .mobile-listen-card.playing .mobile-listen-wave i:nth-child(3n) { animation-delay: -0.32s; }
  .mobile-listen-card.played .mobile-listen-wave { opacity: 0.48; }
  @keyframes mobileListenWave { to { transform: scaleY(0.42); opacity: 1; } }
  .mobile-listen-meta {
    min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: var(--text-dim); font-size: 0.78rem;
  }
  .mobile-listen-time { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mobile-listen-state { min-width: 0; color: var(--primary); text-align: right; }
  .mobile-task-options { display: grid; gap: 10px; }
  .mobile-task-option {
    position: relative; min-height: 74px; display: grid; grid-template-columns: 36px minmax(0, 1fr);
    align-items: center; gap: 13px; padding: 15px 17px; border: 1.5px solid var(--border);
    border-radius: 16px; background: #fff; color: var(--text); cursor: pointer;
    font-size: 1rem; line-height: 1.38; -webkit-tap-highlight-color: transparent;
  }
  .mobile-task-option:active { background: #f8fafc; }
  .mobile-task-option.checked {
    border-color: var(--primary); background: linear-gradient(110deg, #fbfdff, #eef4ff);
    box-shadow: inset 0 0 0 0.5px var(--primary);
  }
  .mobile-task-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .mobile-task-radio {
    width: 27px; height: 27px; display: grid; place-items: center;
    border: 1.7px solid #98a4b7; border-radius: 50%; background: #fff;
  }
  .mobile-task-option.checked .mobile-task-radio { border: 7px solid var(--primary); }
  /* Listening answers are shorter than a reading stem, so the cards do not need
     the full option height — scoped here so other MCQ screens keep theirs. */
  .mobile-listening-question .mobile-task-option {
    min-height: 56px; gap: 12px; padding: 11px 15px;
  }
  .mobile-listening-question .mobile-task-radio { width: 24px; height: 24px; }
  .mobile-listening-question .mobile-task-option.checked .mobile-task-radio { border-width: 6px; }
  .mobile-arrange-question > h2 { margin-bottom: 10px; }
  .mobile-arrange-intro {
    margin: 0 0 25px; color: var(--text-dim); font-size: 0.98rem; line-height: 1.5;
  }
  .mobile-arrange-answer {
    min-height: 92px; display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 3px 5px;
    padding: 15px 17px; border: 2px dashed #aeb9ca; border-radius: 16px; background: #fff;
  }
  .mobile-arrange-answer.empty::after {
    content: 'Your sentence will appear here'; align-self: center; width: 100%;
    color: #9aa5b5; font-size: 0.83rem; text-align: center;
  }
  .mobile-arrange-tools {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 2px 24px;
  }
  .mobile-arrange-tool {
    min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 4px;
    border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 0.94rem;
    font-weight: 650; cursor: pointer;
  }
  .mobile-arrange-tool:disabled { color: #aab3c1; cursor: default; }
  .mobile-arrange-bank { display: flex; flex-wrap: wrap; gap: 10px; }
  .mobile-arrange-chip {
    min-height: 54px; padding: 10px 20px; border: 1.5px solid #c7cfdb; border-radius: 13px;
    background: #fff; color: var(--text); font: inherit; font-size: 1.02rem; font-weight: 650;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mobile-arrange-chip:active { border-color: var(--primary); background: var(--primary-soft); }
  .mobile-arrange-chip.chosen { border-color: #a9c2ff; background: #eef4ff; }
  .mobile-arrange-answer .mobile-arrange-chip.chosen {
    min-height: 34px; padding: 3px 4px; border: 0; border-radius: 6px;
    background: transparent; color: var(--text); box-shadow: none;
    font-size: 0.98rem; font-weight: 600; line-height: 1.45;
  }
  .mobile-arrange-answer .mobile-arrange-chip.chosen:active {
    background: var(--primary-soft); color: var(--primary-dark);
  }
  .mobile-arrange-chip.used { opacity: 0.28; cursor: default; }
  .mobile-task-footer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: minmax(104px, 0.75fr) minmax(150px, 1.25fr); gap: 14px;
    padding: 12px 18px calc(11px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.97); box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .mobile-task-screen.keyboard-visible .mobile-task-footer {
    visibility: hidden; pointer-events: none;
  }
  .mobile-task-footer button {
    min-height: 56px; border-radius: 14px; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  }
  .mobile-task-back { border: 1.5px solid var(--primary); background: #fff; color: var(--primary); }
  .mobile-task-back:disabled { border-color: #d7dde7; color: #9aa5b5; cursor: default; }
  .mobile-task-next {
    border: 1px solid var(--primary); background: var(--primary); color: #fff;
    box-shadow: 0 9px 22px rgba(37, 99, 235, 0.2);
  }
  /* "Skip <Skill>" — the same link the Speaking mic check carries, for the
     auto-scored sections that have no device-check screen before them. Spans
     the whole footer as its own row under Back/Next, so it never competes with
     them for width and never looks like a third action of equal weight. */
  .mobile-task-footer .cal-device-skip {
    grid-column: 1 / -1; min-height: 40px; margin: -2px 0 0;
    border: 0; border-radius: 0; background: transparent; color: var(--primary);
    font-size: 0.96rem; font-weight: 700;
  }
}

@media (max-width: 360px) {
  .mobile-task-header { padding-left: 14px; padding-right: 14px; }
  .mobile-task-titlebar { grid-template-columns: 44px minmax(0, 1fr) 88px; }
  .mobile-cal-task-header .mobile-task-titlebar { grid-template-columns: 88px minmax(0, 1fr) 88px; }
  .mobile-task-titlebar h1 { font-size: 1.05rem; }
  .mobile-task-timer { gap: 5px; padding: 6px 9px; }
  .mobile-task-timer b { font-size: 0.82rem; }
  .mobile-task-meta { padding-left: 16px; padding-right: 16px; font-size: 0.8rem; }
  .mobile-task-pages { width: min(100% - 24px, 680px); }
  .mobile-reading-card { padding: 18px 15px; }
  .mobile-reading-passage { font-size: 1.08rem; line-height: 2; }
  .mobile-listen-card { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 10px; padding: 11px; }
  .mobile-listen-play { width: 48px; height: 48px; }
  .mobile-listen-state { font-size: 0.7rem; }
  .mobile-task-option { grid-template-columns: 31px minmax(0, 1fr); padding: 13px 14px; font-size: 0.94rem; }
  .mobile-listening-question .mobile-task-option { grid-template-columns: 28px minmax(0, 1fr); padding: 10px 13px; }
  .mobile-task-footer { gap: 10px; padding-left: 12px; padding-right: 12px; }
}

/* Paid diagnostic report: lock to the viewport with the primary CTA
   pinned in a footer so the long score+feedback scroll never buries the action.
   Same fixed-.app-layout shape as the building/paywall screens (div, not body). */
@media all {
  .calibration-report-locked .app-sidebar,
  .calibration-report-locked .app-topbar,
  .calibration-report-locked .dx-topbar { display: none !important; }
  .calibration-report-locked .app-layout {
    position: fixed; top: 0; left: 0; right: 0; bottom: auto;
    width: 100%; min-height: 0; height: 100vh; height: 100svh;
    display: block; overflow: hidden; background: #fff;
  }
  .calibration-report-locked .app-main { display: block; height: 100%; overflow: hidden; }
  .calibration-report-locked .app-content.dx-content {
    width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden;
  }
  .calibration-report-locked #results {
    width: 100%; max-width: none !important; height: 100%; min-width: 0; min-height: 0;
    margin: 0 !important; overflow: hidden;
  }
  .res-locked { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
  .res-locked-body {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: clip;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
    padding: 16px 16px 20px;
  }
  .res-locked-body .res-page { max-width: 680px; margin: 0 auto; }
  .res-locked-footer {
    flex: none; display: grid; gap: 8px; justify-items: center;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -7px 25px rgba(15, 23, 42, 0.05);
  }
  .res-locked-footer > .btn { width: min(100%, 680px); min-height: 52px; }
  .res-locked-secondary { min-height: 40px; }
}

/* Diagnostic result-building screen. Progress is time-driven in JS. */
@media all {
  .results-root,
  .results-page {
    width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip;
    overscroll-behavior-x: none;
  }
  .results-page { touch-action: pan-y; }
  /* The fixed, viewport-sized element must be a <div> (.app-layout), never the
     <body> — position:fixed on <body> is unreliable on iOS Safari and left this
     screen unscrollable/cut off. Mirrors the working .app-layout.calibration-mode:
     min-height:0 drops the base 100vh floor; 100svh keeps content above the bar. */
  .results-page.calibration-results-building { overflow: hidden; }
  .calibration-results-building .app-layout {
    position: fixed; top: 0; left: 0; right: 0; bottom: auto;
    width: 100%; min-height: 0; height: 100vh; height: 100svh;
    display: block; overflow: hidden; background: #fff;
  }
  .calibration-results-building .app-sidebar,
  .calibration-results-building .app-topbar,
  .calibration-results-building .dx-topbar { display: none !important; }
  .calibration-results-building .app-main { display: block; height: 100%; overflow: hidden; }
  .calibration-results-building .app-content.dx-content {
    width: 100%; max-width: none; height: 100%; min-height: 0;
    margin: 0; padding: 0; overflow: hidden;
  }
  .calibration-results-building #results {
    width: 100%; max-width: none !important; height: 100%; min-width: 0; min-height: 0;
    margin: 0 !important; gap: 0; overflow: hidden;
  }
  .cal-result-build-screen {
    height: 100%; min-height: 0; display: flex; flex-direction: column;
    overflow: hidden; background: #fff;
  }
  .cal-result-build-header {
    position: sticky; top: 0; z-index: 40; flex: none;
    padding: max(15px, env(safe-area-inset-top)) 22px 12px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .cal-result-build-header h1 {
    margin: 0; text-align: center; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.025em;
  }
  .cal-result-build-header .mobile-cal-stepper { margin-top: 20px; }
  /* Full-bleed. The 16px side inset this used to carry moved onto the text
     children below, because the review rail must reach the REAL screen edges:
     with the inset here, the track's own overflow clipped each card 16px in
     from the edge, so a card in transit was sliced against white page instead
     of running off the side of the screen. */
  .cal-result-build-body {
    width: 100%; max-width: 680px; min-height: 0; flex: 1; margin: 0 auto;
    padding: 28px 0 34px; text-align: center;
    overflow-x: clip; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; touch-action: pan-y;
  }
  .cal-result-ring {
    --progress: 0;
    position: relative; width: 220px; height: 220px; margin: 0 auto 26px;
    display: flex; align-items: center; justify-content: center;
    border: 8px solid #f2f6ff; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--primary) calc(var(--progress) * 1%), #dce7ff 0);
    box-shadow: 0 0 0 5px #f7faff, 0 11px 35px rgba(37, 99, 235, 0.13);
    isolation: isolate;
  }
  .cal-result-ring::before {
    content: ""; position: absolute; inset: 13px; z-index: -1;
    border-radius: 50%; background: #fff;
  }
  .cal-result-ring strong {
    color: var(--primary); font-size: 4.1rem; line-height: 1; letter-spacing: -0.07em;
  }
  .cal-result-ring > span { margin: 23px 0 0 5px; color: var(--primary); font-size: 1.9rem; font-weight: 800; }
  /* Grading is still outstanding, so the ring has stopped at 90 rather than
     filling and then sitting there for another 50 seconds. A slow breathing
     halo says "alive, still working" — the ARC does not move, because there is
     no progress behind it to draw. */
  .cal-result-ring.is-holding { animation: cal-ring-breathe 2.4s ease-in-out infinite; }
  @keyframes cal-ring-breathe {
    0%, 100% { box-shadow: 0 0 0 5px #f7faff, 0 11px 35px rgba(37, 99, 235, 0.13); }
    50% { box-shadow: 0 0 0 12px #eaf1ff, 0 11px 35px rgba(37, 99, 235, 0.22); }
  }
  @media (prefers-reduced-motion: reduce) {
    .cal-result-ring.is-holding { animation: none; }
  }
  /* The side inset the body gave up: on the copy only, never on the rail. */
  .cal-result-build-body > h2 {
    margin: 0; padding: 0 16px; font-size: 1.65rem; line-height: 1.2; letter-spacing: -0.035em;
  }
  .cal-result-build-copy {
    max-width: 362px; margin: 12px auto 24px; padding: 0 16px;
    color: var(--text-dim); font-size: 0.97rem; line-height: 1.55;
  }
  /* Internal preview only: the reviewer's "this is where the real screen leaves"
     marker, so a finished preview never reads as a stuck one. */
  .cal-result-build-copy.preview-end { color: var(--primary); font-weight: 700; }
  /* Paired with the ring's hold: says WHY it stopped, so 90% does not read as
     a stall. #3d55a8 on #fff is 7.4:1 — AA at this size and well past it. */
  .cal-result-build-copy.is-holding { color: #3d55a8; font-weight: 600; }
  /* Waiting-state testimonials: the paywall's review cards, one at a time, on a
     horizontal scroll-snap rail. Fixed height so a short quote and a long one
     leave the ring and the copy above at exactly the same place — the height is
     sized to the LONGEST quote in OUTCOME_REVIEWS, not the average.
     The rail itself paints nothing: the cards sit on the page's white. */
  .cal-result-reviews { height: 310px; text-align: left; background: transparent; }
  .cal-result-reviews-track {
    height: 100%; display: flex; gap: 20px; background: transparent;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* The rail is as wide as the screen (the build body is full-bleed), so a
       card only ever clips at the screen edge — never against page margin.
       The padding is the room the card shadow needs to fade out BEFORE this
       scroller's overflow clip (a shadow cut at the clip edge reads as a grey
       band behind the rail) and, with scroll-snap-align:center, it is also the
       gutter on each side of the card that is showing. It stays SMALLER than
       the 20px gap, which is what keeps the next card fully off-screen while
       the current one is snapped rather than peeking at the edge. */
    margin: 0; padding: 4px 14px 18px;
  }
  .cal-result-reviews-track::-webkit-scrollbar { display: none; }
  /* Same card as the paywall (.cal-flow-review), one per screen here — but
     reproportioned for this surface only: here the card is the ONLY thing on
     screen and the quote is the persuasive part, so the score ring and the
     points block give room back to it. The paywall card is unchanged. */
  .cal-result-reviews .cal-flow-review {
    flex: 0 0 calc(100% - 28px); max-width: none; height: 100%;
    scroll-snap-align: center; overflow: hidden; gap: 8px;
    /* Tight enough that what leaks past the track padding is invisible. */
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
  }
  /* 42px, not 40: the ≤360px breakpoint grows the avatar and this column must
     not be narrower than it. Only the ring column gives width back. */
  .cal-result-reviews .cal-flow-review-top { grid-template-columns: 42px minmax(0, 1fr) 58px; }
  .cal-result-reviews .cal-flow-review-ring { width: 58px; height: 58px; }
  .cal-result-reviews .cal-flow-review-ring::before { inset: 5px; }
  .cal-result-reviews .cal-flow-review-ring strong { font-size: 1.05rem; }
  .cal-result-reviews .cal-flow-review-delta > div { padding: 6px 9px; }
  .cal-result-reviews .cal-flow-review-delta .prev b,
  .cal-result-reviews .cal-flow-review-delta .gain-num b { font-size: 0.95rem; }
  .cal-result-reviews .cal-flow-review-delta .gain .up { font-size: 0.85rem; }
  /* The quote gets the weight: bigger type, and four lines of room — enough for
     the longest review in the list even on the narrowest phone. */
  .cal-result-reviews .cal-flow-review > p {
    flex: 1; min-height: 0; font-size: 0.92rem; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    .cal-result-reviews-track { scroll-behavior: auto; }
  }
}

/* Three-step diagnostic outcome: Results → Your plan → Start. */
@media all {
  .cal-flow-screen { background: #fff; color: #0a1535; }
  .cal-flow-chrome {
    position: relative; z-index: 40; flex: none; border-bottom: 1px solid #e0e5ef;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .cal-flow-header {
    min-height: 62px; display: grid; grid-template-columns: minmax(0, 1fr);
    align-items: center; padding: max(8px, env(safe-area-inset-top)) 15px 8px;
  }
  .cal-flow-header h1 {
    min-width: 0; margin: 0; overflow: hidden; text-align: center; text-overflow: ellipsis;
    font-size: 1.16rem; line-height: 1.2; letter-spacing: -0.025em; white-space: nowrap;
  }

  .cal-flow-body {
    width: 100%; min-height: 0; flex: 1; overflow-x: clip; overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  }
  .cal-flow-page { width: min(100% - 32px, 680px); margin: 0 auto; padding: 22px 0 28px; }
  /* With no card around it, the score block is framed by its own whitespace:
     the gap above it (this padding) and the gap below it (the tiles' margin)
     are ONE value, so it sits optically centred between header and tiles. */
  .cal-flow-results-page { --cal-score-gap: 16px; padding-top: var(--cal-score-gap); }
  /* Dev preview only: leave a strip at the end of the scroll for the floating
     DEV button, so it sits over empty space rather than over a row. */
  .dev-navigator-on .cal-flow-page { padding-bottom: 84px; }
  .cal-flow-page > h1 {
    margin: 0; color: #081431; font-size: clamp(2rem, 8vw, 2.75rem);
    line-height: 1.08; letter-spacing: -0.052em;
  }
  .cal-flow-page .card { border: 1.5px solid #dce3ee; border-radius: 16px; background: #fff; box-shadow: none; }
  /* The gap the learner tapped, restated under the plan headline. */
  .cal-flow-plan-lead {
    margin: 10px 0 0; font-size: 1rem; font-weight: 650; line-height: 1.35;
    letter-spacing: -0.02em; color: #1a49c4;
  }
  .cal-flow-footer {
    position: relative; z-index: 45; flex: none; display: grid; justify-items: center;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    border-top: 1px solid #e0e5ef; background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -7px 25px rgba(15, 23, 42, 0.05);
  }
  .cal-flow-footer > .btn { width: min(100%, 680px); min-height: 55px; border-radius: 12px; font-size: 1rem; }

  /* The score block carries no card of its own: it sits straight on the page
     background, directly under the header. The section tiles below keep their
     own boxes, which is the only framing left here. */
  .cal-flow-score-top {
    display: grid; grid-template-columns: minmax(0, 1fr) 130px; align-items: center; gap: 8px;
  }
  .cal-flow-score-copy > h2 {
    margin: 0; font-size: 1.62rem; line-height: 1.12; letter-spacing: -0.045em; color: #081431;
  }
  /* "band 4.5" never breaks; the old-scale label after it may drop to its own
     line on a narrow phone rather than overflow. */
  .cal-flow-score-band { display: block; }
  .cal-flow-score-bandnum { white-space: nowrap; }
  .cal-flow-score-band b { color: var(--primary); }
  .cal-flow-score-copy > p { margin: 8px 0 0; color: #56627a; font-size: 0.78rem; }
  /* The old-scale anchor, inline next to the band. Small and muted — it is the
     familiar number, not the headline. Fades in when the count-up lands, so it
     never sits next to a number still climbing. */
  .cal-flow-score-legacy {
    margin-left: 8px; color: #56627a; font-size: 0.72rem; font-weight: 600;
    letter-spacing: -0.01em; white-space: nowrap; transition: opacity 200ms ease;
  }
  .cal-flow-score-legacy.is-counting { opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .cal-flow-score-legacy { transition: none; }
  }
  /* With the "Partial" pill gone, this line is the only thing saying the number
     is an average of some of the sections — so it carries the weight. */
  .cal-flow-score-partial { color: #6b4708 !important; font-size: 0.82rem !important; font-weight: 600; }

  /* Band gauge: a 270° track on the 1.0–6.0 scale with the sweep and dot at the
     learner's band. The number is repeated as text in the middle, so the arc is
     never the only carrier. */
  .cal-flow-band-gauge { position: relative; width: 130px; height: 118px; justify-self: end; }
  .cal-flow-band-gauge-svg { position: absolute; inset: 0; display: block; }
  .cal-flow-band-gauge svg { width: 100%; height: 100%; overflow: visible; }
  .cal-flow-band-gauge path { fill: none; stroke-width: 11; stroke-linecap: round; }
  .cal-flow-band-gauge path.track { stroke: #dfe4ee; }
  .cal-flow-band-gauge path.value { stroke: var(--primary); }
  .cal-flow-band-gauge circle { fill: var(--primary); stroke: #fff; stroke-width: 2.5; }
  .cal-flow-band-gauge .ticks text { fill: #55617c; font-size: 8.5px; font-weight: 600; }
  .cal-flow-band-gauge-mid {
    position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  }
  .cal-flow-band-gauge-mid > b {
    display: block; color: var(--primary); font-size: 1.5rem; line-height: 1; letter-spacing: -0.04em;
  }
  .cal-flow-band-gauge-mid > i { font-style: normal; font-size: 0.72rem; color: #56627a; }

  /* Four section tiles — every section the diagnostic covered, always all of
     them, so a skipped one cannot quietly disappear. */
  .cal-flow-tiles {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
    margin-top: var(--cal-score-gap, 16px);
    border: 1px solid #dce3ee; border-radius: 14px; background: #fff;
  }
  /* `align-content: start` stops the tile's four rows from being stretched to
     fill the tallest tile — that stretch is what left each chip's label sitting
     at the top of an over-tall chip. */
  .cal-flow-tile {
    display: grid; align-content: start; justify-items: center; gap: 5px;
    padding: 13px 3px 12px; text-align: center;
    border-left: 1px solid #e6ebf4;
  }
  .cal-flow-tile:first-child { border-left: 0; }
  .cal-flow-tile-name { font-size: 0.78rem; font-weight: 700; color: #0a1535; }
  /* One short label per state ("Band 4.5", "Skipped", "Scoring"), centred, and
     the same height in every state. */
  .cal-flow-tile-pill {
    display: grid; place-content: center; min-height: 22px; padding: 3px 7px;
    border-radius: 8px; font-size: 0.68rem; font-weight: 700; line-height: 1.15;
    white-space: nowrap; background: #eef2f7; color: #3a465e;
  }
  .cal-flow-tile.reading .cal-flow-tile-pill.scored { background: #eaf1ff; color: #1a49c4; }
  .cal-flow-tile.writing .cal-flow-tile-pill.scored { background: #fff1df; color: #8a4b04; }
  .cal-flow-tile.listening .cal-flow-tile-pill.scored { background: #e8f8ed; color: #0f6b33; }
  .cal-flow-tile.speaking .cal-flow-tile-pill.scored { background: #f3eaff; color: #5b21b6; }
  .cal-flow-tile-pill.none { background: #f3eaff; color: #5b21b6; }
  .cal-flow-tile-pill.pending { background: #eef2f7; color: #3a465e; }
  .cal-flow-tile-count { font-size: 0.68rem; color: #56627a; }
  .cal-flow-screen .cal-flow-tile .cal-outcome-skill-icon { width: 34px; height: 34px; }
  .cal-flow-screen .cal-flow-tile .cal-outcome-skill-icon svg { width: 19px; height: 19px; }

  .cal-flow-focus { margin-top: 30px; }
  .cal-flow-focus > h2 {
    margin: 0 2px 12px; display: flex; align-items: center; gap: 7px;
    font-size: 1.32rem; letter-spacing: -0.035em;
  }
  .cal-flow-info { display: inline-flex; color: #8190aa; }
  .cal-flow-info svg { width: 17px; height: 17px; }
  .cal-flow-focus-empty { margin: 0 2px; font-size: 0.9rem; color: #55617c; }
  .cal-flow-issue-list { display: grid; gap: 9px; }
  /* One tappable row per section. The severity is a word, the deficit is a
     spelled-out count, and the colours only reinforce them. */
  .cal-flow-issue {
    width: 100%; min-height: 78px; display: grid;
    grid-template-columns: 30px 42px minmax(0, 1fr) auto 14px;
    align-items: center; gap: 9px; padding: 12px 12px 12px 11px; text-align: left;
    border: 1px solid #dce3ee; border-left: 4px solid #dce3ee; border-radius: 14px;
    background: #fff; color: inherit; font: inherit; cursor: pointer;
  }
  .cal-flow-issue:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
  .cal-flow-issue-rank {
    width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
    background: #eef2f7; color: #3a465e; font-size: 0.82rem; font-weight: 800;
  }
  .cal-flow-issue-text { min-width: 0; display: grid; gap: 2px; }
  .cal-flow-issue-text > b { font-size: 0.95rem; line-height: 1.25; }
  .cal-flow-issue-gap { font-size: 0.88rem; line-height: 1.25; font-weight: 700; color: #3a465e; }
  .cal-flow-issue-note { font-size: 0.76rem; line-height: 1.32; color: #55617c; }
  .cal-flow-issue-chev { display: inline-flex; color: #8190aa; }
  .cal-flow-issue-chev svg { width: 18px; height: 18px; }
  .cal-flow-sev {
    padding: 6px 9px; border-radius: 9px; font-size: 0.74rem; font-weight: 700; white-space: nowrap;
    background: #eef2f7; color: #3a465e;
  }
  /* Contrast on white: #b42318 6.5:1 · #8a4b04 6.4:1 · #5b21b6 8.2:1 · #0f6b33 5.6:1. */
  .cal-flow-issue.sev-severe { border-left-color: #b42318; border-color: #f3c9c4; }
  .cal-flow-issue.sev-severe .cal-flow-issue-gap { color: #b42318; }
  .cal-flow-issue.sev-severe .cal-flow-sev { background: #fdecea; color: #b42318; }
  .cal-flow-issue.sev-severe .cal-flow-issue-rank { background: #fdecea; color: #b42318; }
  .cal-flow-issue.sev-moderate { border-left-color: #d97706; border-color: #f6ddb8; }
  .cal-flow-issue.sev-moderate .cal-flow-issue-gap { color: #8a4b04; }
  .cal-flow-issue.sev-moderate .cal-flow-sev { background: #fff4e2; color: #8a4b04; }
  .cal-flow-issue.sev-moderate .cal-flow-issue-rank { background: #fff4e2; color: #8a4b04; }
  .cal-flow-issue.sev-action { border-left-color: #7c3aed; border-color: #ddd3f7; }
  .cal-flow-issue.sev-action .cal-flow-issue-gap { color: #5b21b6; }
  .cal-flow-issue.sev-action .cal-flow-sev { background: #f1ebfe; color: #5b21b6; }
  .cal-flow-issue.sev-action .cal-flow-issue-rank { background: #f1ebfe; color: #5b21b6; }
  .cal-flow-issue.sev-ontrack { border-left-color: #16a34a; border-color: #c7ead4; }
  .cal-flow-issue.sev-ontrack .cal-flow-issue-gap { color: #0f6b33; }
  .cal-flow-issue.sev-ontrack .cal-flow-sev { background: #e8f8ed; color: #0f6b33; }
  .cal-flow-issue.sev-ontrack .cal-flow-issue-rank { background: #e8f8ed; color: #0f6b33; }
  .cal-flow-focus-strip {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px;
    padding: 11px 12px; border: 1px solid #dce3ee; border-radius: 14px; background: #fbfcfe;
  }
  .cal-flow-focus-strip-ic { display: inline-flex; color: #0f6b33; }
  .cal-flow-focus-strip-ic svg { width: 19px; height: 19px; }
  .cal-flow-focus-strip-label { font-size: 0.82rem; font-weight: 700; }
  .cal-flow-focus-chips { display: contents; }
  .cal-flow-chip {
    padding: 5px 10px; border: 1px solid #cfe0d6; border-radius: 999px;
    background: #fff; color: #0f6b33; font-size: 0.74rem; font-weight: 600;
  }
  .cal-flow-chip.reading { border-color: #cddcff; color: #1a49c4; }
  .cal-flow-chip.writing { border-color: #f6ddb8; color: #8a4b04; }
  .cal-flow-chip.speaking { border-color: #ddd3f7; color: #5b21b6; }
  .cal-flow-next-ic { display: inline-flex; margin-right: 8px; }
  .cal-flow-next-ic svg { width: 19px; height: 19px; }

  /* Header: back chevron · title · spacer (nothing on the right). */
  .cal-flow-header { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 6px; }
  .cal-flow-back {
    width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 10px; background: none; color: #0a1535; cursor: pointer;
  }
  .cal-flow-back svg { width: 22px; height: 22px; }
  .cal-flow-back:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
  .cal-flow-brand-spacer { width: 34px; }

  /* ---- per-skill detail page ---- */
  .cal-detail-hero {
    display: grid; grid-template-columns: 54px minmax(0, 1fr) 74px; align-items: center; gap: 12px;
    padding: 16px 14px; border: 1px solid #c4d7ff; border-radius: 16px;
    background: linear-gradient(120deg, #fff, #f5f8ff);
  }
  .cal-detail-hero-ic {
    width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px;
    background: #eaf1ff; color: #155eef;
  }
  .cal-detail-hero-ic svg { width: 28px; height: 28px; }
  .cal-detail-hero.listening .cal-detail-hero-ic { background: #e8f8ed; color: #159447; }
  .cal-detail-hero.speaking .cal-detail-hero-ic { background: #f3eaff; color: #7022c7; }
  .cal-detail-hero.writing .cal-detail-hero-ic { background: #fff1df; color: #df7c0b; }
  .cal-detail-hero-copy { min-width: 0; }
  .cal-detail-hero-copy > h2 { margin: 0; font-size: 1.05rem; letter-spacing: -0.03em; }
  .cal-detail-band { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.045em; color: #0a1535; }
  .cal-detail-band > b { color: var(--primary); }
  .cal-detail-band.none { font-size: 1.05rem; color: #5b21b6; }
  .cal-detail-hero-copy > p { margin: 2px 0 0; font-size: 0.8rem; color: #56627a; }
  .cal-detail-ring { position: relative; width: 74px; height: 74px; }
  .cal-detail-ring-svg { position: absolute; inset: 0; }
  .cal-detail-ring svg { width: 100%; height: 100%; }
  .cal-detail-ring circle { fill: none; stroke-width: 7; }
  .cal-detail-ring circle.track { stroke: #e3e8f1; }
  .cal-detail-ring circle.value { stroke: var(--primary); stroke-linecap: round; }
  .cal-detail-ring-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
  .cal-detail-ring-mid > b { display: block; font-size: 0.95rem; line-height: 1; color: #0a1535; }
  .cal-detail-ring-mid > i { font-style: normal; font-size: 0.6rem; color: #56627a; }

  .cal-detail-block { margin-top: 26px; }
  .cal-detail-block > h3 { margin: 0; font-size: 1.16rem; letter-spacing: -0.03em; }
  .cal-detail-sub { margin: 4px 0 12px; font-size: 0.82rem; color: #55617c; }
  .cal-detail-empty { margin: 8px 0 0; font-size: 0.85rem; color: #55617c; }
  /* The full sentence the results row's short "Main issue" phrase came from. */
  .cal-detail-mainissue {
    margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
    background: #f2f6ff; color: #24304a; font-size: 0.85rem; line-height: 1.42;
  }
  .cal-detail-mainissue > b { color: #0a1535; }
  .cal-detail-patterns { display: grid; gap: 9px; }
  .cal-detail-pattern { border: 1px solid #dce3ee; border-radius: 14px; background: #f7faff; }
  .cal-detail-pattern > summary {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: center; gap: 10px;
    padding: 12px 12px; cursor: pointer; list-style: none;
  }
  .cal-detail-pattern > summary::-webkit-details-marker { display: none; }
  .cal-detail-pattern > summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 14px; }
  .cal-detail-pattern-ic {
    width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px;
    background: #e4edff; color: #1a49c4;
  }
  .cal-detail-pattern-ic svg { width: 19px; height: 19px; }
  .cal-detail-pattern-copy { min-width: 0; display: grid; gap: 2px; }
  .cal-detail-pattern-copy > b { font-size: 0.92rem; }
  .cal-detail-pattern-copy > span { font-size: 0.78rem; line-height: 1.35; color: #55617c; }
  .cal-detail-pattern-chev { display: inline-flex; color: #8190aa; }
  .cal-detail-pattern-chev svg { width: 16px; height: 16px; }
  .cal-detail-pattern[open] .cal-detail-pattern-chev { transform: rotate(90deg); }
  .cal-detail-pattern-body {
    padding: 0 12px 12px 58px; display: grid; gap: 4px; font-size: 0.78rem; color: #3a465e;
  }
  .cal-detail-pattern-body > p { margin: 0; line-height: 1.4; }

  .cal-detail-question { padding: 14px; }
  .cal-detail-qtype {
    display: inline-block; margin-bottom: 10px; padding: 4px 9px; border-radius: 8px;
    background: #e4edff; color: #1a49c4; font-size: 0.72rem; font-weight: 700;
  }
  .cal-detail-question h4 { margin: 12px 0 5px; font-size: 0.86rem; }
  .cal-detail-question h4:first-of-type { margin-top: 0; }
  .cal-detail-qtext { margin: 0; font-size: 0.88rem; line-height: 1.45; color: #1b2746; }
  .cal-detail-qblank { margin: 5px 0 0; font-size: 0.74rem; color: #56627a; }
  .cal-detail-answer {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 10px;
    font-size: 0.85rem; font-weight: 600;
  }
  .cal-detail-answer.wrong { background: #fdecea; color: #b42318; }
  .cal-detail-answer.right { background: #e8f8ed; color: #0f6b33; }
  .cal-detail-answer-letter { font-weight: 800; }
  .cal-detail-answer-mark { display: inline-flex; }
  .cal-detail-answer-mark svg { width: 15px; height: 15px; }
  .cal-detail-why { margin-top: 12px; }
  .cal-detail-why > p { margin: 0; font-size: 0.82rem; line-height: 1.45; color: #3a465e; }
  .cal-detail-actions { margin-top: 24px; display: grid; gap: 10px; }
  .cal-detail-actions .btn { min-height: 52px; border-radius: 12px; }
  .cal-detail-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .cal-detail-cta-chev { display: inline-flex; }
  .cal-detail-cta-chev svg { width: 17px; height: 17px; }
  .cal-detail-reviewall > summary {
    list-style: none; cursor: pointer; display: grid; place-items: center; min-height: 52px;
    border-radius: 12px;
  }
  .cal-detail-reviewall > summary::-webkit-details-marker { display: none; }
  .cal-detail-reviewall .review-list { margin-top: 10px; display: grid; gap: 8px; }
  .cal-flow-screen .cal-outcome-skill-icon { width: 42px; height: 42px; }
  .cal-flow-screen .cal-outcome-skill-icon svg { width: 24px; height: 24px; }
  .cal-flow-screen .cal-outcome-skill-icon.reading { background: #eaf1ff; color: #155eef; }
  .cal-flow-screen .cal-outcome-skill-icon.listening { background: #e8f8ed; color: #159447; }
  .cal-flow-screen .cal-outcome-skill-icon.speaking { background: #f3eaff; color: #7022c7; }
  .cal-flow-screen .cal-outcome-skill-icon.writing { background: #fff1df; color: #df7c0b; }

  .cal-flow-chart { padding: 4px 0 0; }
  .cal-flow-chart-svg { display: block; width: 100%; }
  .cal-flow-chart-svg svg { width: 100%; height: auto; display: block; overflow: visible; }
  .cal-flow-chart-svg .grid { fill: none; stroke: #dce3ee; stroke-width: 1; stroke-dasharray: 3 3; }
  .cal-flow-chart-svg .axis { fill: none; stroke: #8190aa; stroke-width: 1; }
  .cal-flow-chart-svg .forecast-line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  /* Draw-on: the dash covers the whole path, then the offset unwinds to 0.
     --line-len is the sampled path length, set inline by results.js. */
  .cal-flow-chart-svg .forecast-line {
    stroke-dasharray: var(--line-len); stroke-dashoffset: var(--line-len);
    animation: cal-flow-draw 1.25s cubic-bezier(0.33, 0, 0.2, 1) 0.15s forwards;
  }
  @keyframes cal-flow-draw { to { stroke-dashoffset: 0; } }
  .cal-flow-chart-svg .dot,
  .cal-flow-chart-svg .value-label {
    opacity: 0; animation: cal-flow-pop 0.32s ease-out forwards;
  }
  @keyframes cal-flow-pop { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .cal-flow-chart-svg .forecast-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
    .cal-flow-chart-svg .dot,
    .cal-flow-chart-svg .value-label { opacity: 1; animation: none; }
  }
  .cal-flow-chart-svg .dot { fill: var(--primary); stroke: #fff; stroke-width: 2; }
  .cal-flow-chart-svg .dot.goal { fill: #16a34a; }
  .cal-flow-chart-svg text { font-family: inherit; }
  .cal-flow-chart-svg .axis-label { fill: #536078; font-size: 10px; text-anchor: end; }
  .cal-flow-chart-svg .value-label { fill: var(--primary); font-size: 12px; font-weight: 800; text-anchor: middle; }
  .cal-flow-chart-svg .value-label.goal { fill: #15932f; }
  .cal-flow-chart-svg .week-label { fill: #2d3953; font-size: 10px; text-anchor: middle; }
  .cal-flow-help { margin-top: 20px; }
  .cal-flow-help > h2 { margin: 0 4px 13px; font-size: 1.28rem; letter-spacing: -0.035em; }
  /* Everything under the chart rises in behind it, once the line has drawn. */
  .cal-flow-help > h2,
  .cal-flow-help-card {
    opacity: 0; animation: cal-flow-rise 0.6s ease-out forwards;
  }
  .cal-flow-help > h2 { animation-delay: 1.25s; }
  .cal-flow-help-card:nth-child(1) { animation-delay: 1.45s; }
  .cal-flow-help-card:nth-child(2) { animation-delay: 1.65s; }
  .cal-flow-help-card:nth-child(3) { animation-delay: 1.85s; }
  /* The list is now the learner's own gap list, so it can be four long. */
  .cal-flow-help-card:nth-child(4) { animation-delay: 2.05s; }
  @keyframes cal-flow-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cal-flow-help > h2,
    .cal-flow-help-card { opacity: 1; animation: none; }
  }
  .cal-flow-help-list { display: grid; gap: 12px; }
  /* Each card is themed by its own section. --acc / --acc-bg are the ONLY place
     the per-skill colour is named below; the accents on the accents (icon tile,
     divider, bullet icons) all read from them. Text colours are the darkened
     members of the existing palette so every one clears AA on its own tint
     (measured: reading 6.15, listening 4.94, speaking 6.57, writing 5.10). */
  .cal-flow-help-card { --acc: #1450c8; --acc-bg: #eaf1ff; }
  .cal-flow-help-card.listening { --acc: #0f7a39; --acc-bg: #e8f8ed; }
  .cal-flow-help-card.speaking { --acc: #7022c7; --acc-bg: #f3eaff; }
  .cal-flow-help-card.writing { --acc: #9a5600; --acc-bg: #fff1df; }
  .cal-flow-help-card {
    display: grid; grid-template-columns: 62px minmax(0, 1fr);
    align-items: start; gap: 14px; padding: 15px 14px 16px;
    border: 1px solid #e3e9f3; border-radius: 16px; background: #fff;
  }
  /* Scoped to .cal-flow-screen to out-specify the generic per-skill tile colours
     above, so the tile uses this card's AA-checked accent rather than theirs. */
  .cal-flow-screen .cal-flow-help-card > .cal-outcome-skill-icon {
    width: 62px; height: 62px; border-radius: 15px;
    background: var(--acc-bg); color: var(--acc);
  }
  .cal-flow-screen .cal-flow-help-card > .cal-outcome-skill-icon svg { width: 32px; height: 32px; }
  .cal-flow-help-body { min-width: 0; }
  /* "Best for you" on the worst gap, "Recommended" below it — the badge tone is
     fixed (amber / green), not per skill, so the ranking reads at a glance. */
  .cal-flow-help-badge {
    display: inline-flex; align-items: center; gap: 5px;
    margin-bottom: 7px; padding: 4px 9px 4px 7px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em;
  }
  .cal-flow-help-badge.best { background: #fff1df; color: #9a5600; }
  .cal-flow-help-badge.recommended { background: #e8f8ed; color: #0f7a39; }
  .cal-flow-help-badge i { display: inline-flex; }
  .cal-flow-help-badge svg { width: 13px; height: 13px; }
  .cal-flow-help-card h3 {
    margin: 0; color: #101a2e; font-size: 1.08rem; line-height: 1.22; letter-spacing: -0.03em;
  }
  .cal-flow-help-card p { margin: 4px 0 0; color: #5b6780; font-size: 0.83rem; line-height: 1.4; }
  /* The deficit, in the same words the results row used for it. */
  .cal-flow-help-card p.cal-flow-help-gap {
    margin: 6px 0 0; color: #3a465e; font-size: 0.76rem; font-weight: 700;
  }
  /* The capability list. The rule above it is the mock's divider; it is tinted
     with the card's own accent so the theming reads without colouring text. */
  .cal-flow-help-points {
    margin: 12px 0 0; padding: 12px 0 0; list-style: none;
    border-top: 1px solid color-mix(in srgb, var(--acc) 22%, #e3e9f3);
    display: grid; gap: 9px;
  }
  .cal-flow-help-points li {
    display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px;
    color: #24314b; font-size: 0.82rem; line-height: 1.3;
  }
  .cal-flow-help-points i { display: inline-flex; color: var(--acc); }
  .cal-flow-help-points svg { width: 21px; height: 21px; }
  .cal-flow-help-empty { margin: 0 4px; color: #55617c; font-size: 0.9rem; line-height: 1.45; }
  .cal-flow-benefit > span {
    width: 43px; height: 43px; flex: none; display: grid; place-items: center; border-radius: 50%;
  }
  .cal-flow-benefit > span svg { width: 24px; height: 24px; }
  .cal-flow-benefit > span.blue { background: #eaf1ff; color: #155eef; }
  .cal-flow-benefit > span.purple { background: #f3eaff; color: #7022c7; }
  .cal-flow-benefit > span.green { background: #e8f8ed; color: #159447; }
  .cal-flow-benefit > span.orange { background: #fff1df; color: #e87800; }

  .cal-flow-start-page { padding-top: 22px; text-align: center; }
  .cal-flow-start-check { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; background: #dcf5e3; display: flex; align-items: center; justify-content: center; }
  .cal-flow-start-check i { display: inline-flex; color: #159447; }
  .cal-flow-start-check svg { width: 32px; height: 32px; stroke-width: 2.6; }
  .cal-flow-start-page > h1 { margin-bottom: 20px; font-size: clamp(2.15rem, 9vw, 3rem); }
  /* Same rise-in as the plan page. Nothing draws first here, so it starts at
     once. The footer price card + CTA are deliberately excluded: the offer
     should never fade in under the learner. */
  .cal-flow-start-page > .cal-flow-start-check,
  .cal-flow-start-page > h1,
  .cal-flow-benefit,
  .cal-flow-testimonials > .cal-flow-rating,
  .cal-flow-testimonials > h2,
  .cal-flow-testimonials > .cal-flow-reviews,
  .cal-flow-start-page > .cal-flow-legal {
    opacity: 0; animation: cal-flow-rise 0.55s ease-out forwards;
  }
  .cal-flow-start-page > .cal-flow-start-check { animation-delay: 0.05s; }
  .cal-flow-start-page > h1 { animation-delay: 0.15s; }
  .cal-flow-benefit:nth-child(1) { animation-delay: 0.32s; }
  .cal-flow-benefit:nth-child(2) { animation-delay: 0.44s; }
  .cal-flow-benefit:nth-child(3) { animation-delay: 0.56s; }
  .cal-flow-benefit:nth-child(4) { animation-delay: 0.68s; }
  .cal-flow-testimonials > .cal-flow-rating { animation-delay: 0.84s; }
  .cal-flow-testimonials > h2 { animation-delay: 0.96s; }
  .cal-flow-testimonials > .cal-flow-reviews { animation-delay: 1.06s; }
  .cal-flow-start-page > .cal-flow-legal { animation-delay: 1.16s; }
  @media (prefers-reduced-motion: reduce) {
    .cal-flow-start-page > .cal-flow-start-check,
    .cal-flow-start-page > h1,
    .cal-flow-benefit,
    .cal-flow-testimonials > .cal-flow-rating,
    .cal-flow-testimonials > h2,
    .cal-flow-testimonials > .cal-flow-reviews,
    .cal-flow-start-page > .cal-flow-legal { opacity: 1; animation: none; }
  }
  .cal-flow-benefits { padding: 0 4px; text-align: left; }
  .cal-flow-benefit { min-height: 68px; display: flex; align-items: center; gap: 13px; padding: 10px 0; border-bottom: 1px solid #dfe5ef; }
  .cal-flow-benefit:last-child { border-bottom: 0; }
  .cal-flow-benefit > b { font-size: 0.9rem; }
  /* App-style laurel rating above the reviews. */
  .cal-flow-rating {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 24px 0 14px; color: #2d3953;
  }
  .cal-flow-laurel { width: 30px; height: 76px; flex: none; display: block; color: #b0b9c8; }
  .cal-flow-laurel.flip { transform: scaleX(-1); }
  .cal-flow-laurel svg { width: 100%; height: 100%; display: block; fill: currentColor; }
  .cal-flow-laurel .stem { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .cal-flow-rating-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .cal-flow-rating-stars { color: #f0a91b; font-size: 0.92rem; letter-spacing: 2px; }
  .cal-flow-rating-mid > strong { font-size: 2.05rem; line-height: 1.05; letter-spacing: -0.04em; }
  .cal-flow-rating-mid > small { color: #5b6780; font-size: 0.76rem; font-weight: 600; }
  .cal-flow-testimonials { margin-top: 22px; text-align: left; }
  .cal-flow-testimonials > h2 { margin: 0 0 12px; font-size: 1.18rem; }
  .cal-flow-stars { color: #f6b700; font-size: 1.05rem; letter-spacing: 0.1em; text-align: center; }
  /* Horizontally scrollable learner reviews: avatar, score ring, before/after gain. */
  .cal-flow-reviews {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scroll-padding: 0 16px;
    margin: 0 -16px; padding: 2px 16px 10px;
  }
  .cal-flow-reviews::-webkit-scrollbar { display: none; }
  .cal-flow-review {
    flex: 0 0 75%; max-width: 320px; scroll-snap-align: center;
    display: flex; flex-direction: column; gap: 10px;
    padding: 13px 14px; border: 1px solid #eaeef4; border-radius: 20px; background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
  }
  .cal-flow-review-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) 74px; align-items: center; gap: 7px; }
  .cal-flow-review-avatar {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center;
    border-radius: 50%; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.01em;
    box-shadow: inset 0 0 0 1px rgba(21, 94, 239, 0.12);
  }
  img.cal-flow-review-avatar { display: block; object-fit: cover; }
  .cal-flow-review-avatar.blue { background: #e9f0ff; color: #2560eb; }
  .cal-flow-review-avatar.purple { background: #f3eaff; color: #7022c7; }
  .cal-flow-review-avatar.green { background: #e8f8ed; color: #159447; }
  .cal-flow-review-avatar.orange { background: #fff1df; color: #e87800; }
  .cal-flow-review-id { min-width: 0; }
  .cal-flow-review-id > b { display: block; color: #101a33; font-size: 0.96rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cal-flow-review-verify { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: #2560eb; font-size: 0.68rem; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; }
  .cal-flow-review-verify i { width: 12px; height: 12px; flex: none; display: inline-flex; color: #2560eb; font-style: normal; }
  .cal-flow-review-verify svg { width: 12px; height: 12px; }
  /* Circular TOEFL score gauge (green arc = score/120). */
  .cal-flow-review-ring {
    position: relative; width: 74px; height: 74px; flex: none; border-radius: 50%;
    background: conic-gradient(#2ba24f calc(var(--pct, 0) * 1%), #e7edf3 0);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  }
  .cal-flow-review-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
  .cal-flow-review-ring > * { position: relative; z-index: 1; line-height: 1; }
  .cal-flow-review-ring small { color: #67718a; font-size: 0.54rem; font-weight: 700; letter-spacing: 0.04em; }
  .cal-flow-review-ring strong { display: block; margin: 1px 0; color: #159447; font-size: 1.35rem; font-weight: 800; }
  .cal-flow-review-ring em { color: #67718a; font-size: 0.56rem; font-weight: 600; font-style: normal; }
  .cal-flow-review-delta { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); align-items: stretch; gap: 5px; }
  .cal-flow-review-delta > div { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 8px 10px; border-radius: 12px; }
  .cal-flow-review-delta .prev { background: #f1f3f8; }
  .cal-flow-review-delta .prev small { color: #6f7889; font-size: 0.6rem; font-weight: 600; white-space: nowrap; }
  .cal-flow-review-delta .prev b { color: #3d4759; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
  .cal-flow-review-delta .gain { flex-direction: row; align-items: center; justify-content: center; gap: 4px; background: #e4f4e9; }
  .cal-flow-review-delta .gain .up { color: #2ba24f; font-size: 0.95rem; font-weight: 800; line-height: 1; }
  .cal-flow-review-delta .gain-num { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
  .cal-flow-review-delta .gain-num b { color: #1f9147; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
  .cal-flow-review-delta .gain-num small { margin-top: 1px; color: #2f9256; font-size: 0.6rem; font-weight: 600; }
  .cal-flow-review-arrow { align-self: center; width: 16px; height: 16px; display: inline-flex; color: #2b3547; font-style: normal; }
  .cal-flow-review-arrow svg { width: 16px; height: 16px; }
  .cal-flow-review-rule { width: 100%; height: 1px; margin: 0; border: 0; background: #e9edf3; }
  .cal-flow-review > p { margin: 0; color: #16223f; font-size: 0.82rem; line-height: 1.4; text-align: center; }
  .cal-flow-price {
    display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center;
    gap: 12px; padding: 17px 18px; text-align: left;
  }
  .cal-flow-price > div > strong { font-size: 2.85rem; line-height: 1; letter-spacing: -0.055em; }
  .cal-flow-price > div > span { margin-left: 6px; font-size: 1rem; }
  .cal-flow-price > div > p { margin: 6px 0 0; color: #59657d; font-size: 0.76rem; }
  .cal-flow-price > div > .cal-flow-price-saving { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; }
  .cal-flow-price-saving s { color: #7b8497; font-size: 0.8rem; font-weight: 700; }
  .cal-flow-price-saving b { padding: 3px 7px; border-radius: 999px; background: #e7f8ef; color: #138a55; font-size: 0.68rem; font-weight: 850; }
  .cal-flow-price > b {
    min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 8px; border: 1px solid #bfd4ff; border-radius: 12px; background: #f3f7ff; text-align: center;
  }
  .cal-flow-price > b strong { font-size: 1.1rem; }
  .cal-flow-price > b span { margin-top: 4px; font-size: 0.76rem; font-weight: 500; }
  .cal-flow-footer.step-3 { gap: 4px; padding-top: 10px; }
  .cal-flow-footer.step-3 > .cal-flow-price {
    width: min(100%, 680px); margin: 0 0 6px; padding: 13px 16px;
    border: 1px solid #dce3ee; border-radius: 14px; background: #fff;
  }
  .cal-flow-footer.step-3 > .cal-flow-price > div > strong { font-size: 2.4rem; }
  .cal-flow-footer.step-3 > .cal-flow-price > b { min-height: 62px; }
  .cal-flow-checkout { box-shadow: 0 9px 22px rgba(37, 99, 235, 0.2); }
  .cal-normal-paywall { width: 100%; min-height: 100%; padding: 0 0 28px; background: #fff; }
  .cal-normal-timer {
    position: sticky; top: 0; z-index: 55; min-height: 72px; display: flex; align-items: center; gap: 12px;
    padding: max(11px, env(safe-area-inset-top)) 64px 11px max(18px, calc((100% - 680px) / 2));
    border-bottom: 1px solid #e5e8ef; background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .cal-normal-timer-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff0ef; color: #eb4747; }
  .cal-normal-timer-icon svg { width: 22px; height: 22px; }
  .cal-normal-timer > span:last-child { display: flex; flex-direction: column; align-items: flex-start; }
  .cal-normal-timer small { color: #30394e; font-size: 0.76rem; font-weight: 650; }
  .cal-normal-countdown { color: #10182b; font-size: 1.12rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
  .cal-normal-discount {
    width: min(calc(100% - 32px), 620px); margin: 24px auto 0; padding: 20px;
    border: 1px solid #a9e8c3; border-radius: 24px; background: #dff8e9; color: #153629;
  }
  .cal-normal-discount > p { margin: 0 0 11px; font-size: 0.92rem; font-weight: 750; }
  .cal-normal-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px 10px 17px; border-radius: 999px; background: #fff; box-shadow: 0 3px 9px rgba(22, 101, 52, 0.1); }
  .cal-normal-code strong { color: #10182b; font-size: 1rem; letter-spacing: 0.025em; }
  .cal-normal-code span { padding: 7px 12px; border-radius: 999px; background: #16b968; color: #fff; font-size: 0.76rem; font-weight: 850; white-space: nowrap; }
  .cal-normal-paywall > h1 { margin: 28px 16px 23px; color: #09142d; font-size: clamp(1.8rem, 7vw, 2.45rem); line-height: 1.08; letter-spacing: -0.045em; text-align: center; }
  .cal-normal-plans { width: min(calc(100% - 32px), 620px); margin: 0 auto; display: grid; gap: 16px; }
  .cal-normal-plan {
    position: relative; width: 100%; min-height: 112px; display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 112px; align-items: center; gap: 12px;
    padding: 21px 13px 14px 17px; border: 2px solid #e0e3e9; border-radius: 22px;
    background: #fff; color: #121a2e; font: inherit; text-align: left; cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  }
  .cal-normal-plan:hover { border-color: #a9bce9; }
  .cal-normal-plan.selected { border-color: #5878c8; background: #fbfcff; box-shadow: 0 7px 22px rgba(49, 82, 160, 0.1); }
  .cal-normal-radio { width: 24px; height: 24px; border: 2px solid #cfd4df; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 5px #fff; }
  .cal-normal-plan.selected .cal-normal-radio { border-color: #5878c8; background: #5878c8; }
  .cal-normal-plan-copy { min-width: 0; display: flex; flex-direction: column; }
  .cal-normal-plan-copy > b { color: #10182b; font-size: 1.12rem; line-height: 1.2; }
  .cal-normal-plan-copy > span { margin-top: 7px; color: #6c7381; font-size: 0.82rem; }
  .cal-normal-plan-copy s { margin-right: 2px; }
  .cal-normal-plan-copy strong { color: #303b54; }
  .cal-normal-plan-copy > small { margin-top: 4px; color: #89909d; font-size: 0.67rem; }
  .cal-normal-daily { min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 18px; background: #f1f3f7; text-align: center; }
  .cal-normal-plan.selected .cal-normal-daily { background: #5878c8; color: #fff; }
  .cal-normal-daily strong { font-size: 1.5rem; line-height: 1; letter-spacing: -0.04em; }
  .cal-normal-daily small { margin-top: 6px; font-size: 0.69rem; font-weight: 750; }
  .cal-normal-plan-badge { position: absolute; top: -12px; left: 29px; padding: 4px 10px; border-radius: 999px; background: #e5e7eb; color: #4b5260; font-size: 0.64rem; font-weight: 850; text-transform: uppercase; }
  .cal-normal-plan.selected .cal-normal-plan-badge { background: #5878c8; color: #fff; }
  .cal-normal-saving { position: absolute; right: 20px; bottom: -12px; padding: 4px 10px; border-radius: 999px; background: #e8f8ef; color: #138a55; font-size: 0.64rem; font-weight: 850; }
  .cal-normal-trust, .cal-normal-faq { width: min(calc(100% - 32px), 620px); margin: 28px auto 0; }
  .cal-normal-secure { padding: 22px 18px 19px; border: 1px solid #dde3ee; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 8px 24px rgba(29, 44, 78, 0.06); }
  .cal-normal-trust-icon { width: 44px; height: 44px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: #eaf1ff; color: #2a5bc7; }
  .cal-normal-trust-icon svg { width: 23px; height: 23px; }
  .cal-normal-trust h2, .cal-normal-faq h2 { margin: 0; color: #0d1831; font-size: 1.32rem; line-height: 1.15; letter-spacing: -0.035em; }
  .cal-normal-payment-methods { margin: 17px 0 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .cal-payment-mark { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 1px solid #dce1ea; border-radius: 10px; background: #fff; color: #172033; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05); }
  .cal-payment-mark b { font-size: 0.71rem; font-weight: 850; letter-spacing: -0.02em; }
  .cal-payment-mark.google b, .cal-payment-mark.apple b { font-size: 0.77rem; }
  .cal-paymark-google-g { font-style: normal; font-size: 1.12rem; font-weight: 900; line-height: 1; background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 43%, #fbbc05 0 67%, #ea4335 0 82%, #4285f4 0); color: transparent; background-clip: text; -webkit-background-clip: text; }
  .cal-paymark-apple { width: 18px; height: 20px; display: inline-flex; color: #0b0c0f; font-style: normal; }
  .cal-paymark-apple svg { width: 100%; height: 100%; }
  .cal-payment-mark.visa b { color: #163a91; font-size: 0.88rem; font-style: italic; letter-spacing: -0.06em; }
  .cal-paymark-mastercard { position: relative; width: 27px; height: 17px; display: inline-flex; font-style: normal; }
  .cal-paymark-mastercard span { position: absolute; top: 0; width: 17px; height: 17px; border-radius: 50%; background: #ea001b; }
  .cal-paymark-mastercard span:first-child { left: 0; }
  .cal-paymark-mastercard span:last-child { right: 0; background: #ff9900; opacity: 0.88; }
  .cal-payment-mark.amex { background: #1976c9; border-color: #1976c9; }
  .cal-payment-mark.amex b { color: #fff; font-size: 0.7rem; letter-spacing: -0.03em; }
  .cal-normal-secure > p { margin: 0; color: #36435c; font-size: 0.78rem; line-height: 1.45; }
  .cal-normal-secure > small { display: block; margin-top: 7px; color: #81899a; font-size: 0.65rem; line-height: 1.4; }
  .cal-normal-proof { width: min(calc(100% - 32px), 620px); margin: 30px auto 0; padding: 22px 18px 20px; border: 1px solid #e1e6ef; border-radius: 22px; background: #fbfcff; }
  .cal-normal-proof > h2 { margin: 0 0 8px; color: #0d1831; font-size: 1.32rem; line-height: 1.15; letter-spacing: -0.035em; text-align: center; }
  .cal-normal-proof .cal-flow-benefits { padding: 0; }
  .cal-normal-proof .cal-flow-testimonials { margin-top: 18px; }
  .cal-normal-proof .cal-flow-rating { margin-top: 0; }
  .cal-normal-guarantee { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; padding: 22px 20px; border: 1px solid #c9d7fb; border-radius: 22px; background: linear-gradient(135deg, #eef4ff, #f7f3ff); }
  .cal-normal-guarantee-seal { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: #5b68d8; color: #fff; box-shadow: 0 0 0 7px rgba(91, 104, 216, 0.12); }
  .cal-normal-guarantee-seal svg { width: 34px; height: 34px; }
  .cal-normal-trust-kicker { margin: 0 0 5px; color: #5968c7; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
  .cal-normal-guarantee h2 { font-size: 1.45rem; }
  .cal-normal-guarantee div > p:not(.cal-normal-trust-kicker) { margin: 9px 0 0; color: #36435c; font-size: 0.8rem; line-height: 1.48; }
  .cal-normal-guarantee div > small { display: block; margin-top: 10px; color: #737d92; font-size: 0.66rem; line-height: 1.45; }
  .cal-normal-guarantee a { color: #3d55bb; font-weight: 750; text-decoration: none; }
  .cal-normal-faq { padding-top: 3px; }
  .cal-normal-faq > .cal-normal-trust-kicker, .cal-normal-faq > h2 { text-align: center; }
  .cal-normal-faq > div { margin-top: 17px; display: grid; gap: 10px; }
  .cal-normal-faq details { overflow: hidden; border: 1px solid #e1e5ec; border-radius: 17px; background: #f6f7f9; }
  .cal-normal-faq summary { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; color: #172139; cursor: pointer; list-style: none; font-size: 0.86rem; font-weight: 800; }
  .cal-normal-faq summary::-webkit-details-marker { display: none; }
  .cal-normal-faq summary i { position: relative; width: 18px; height: 18px; flex: none; }
  .cal-normal-faq summary i::before, .cal-normal-faq summary i::after { content: ""; position: absolute; top: 8px; left: 2px; width: 14px; height: 2px; border-radius: 2px; background: #697386; transition: transform 0.16s ease; }
  .cal-normal-faq summary i::after { transform: rotate(90deg); }
  .cal-normal-faq details[open] summary i::after { transform: rotate(0); }
  .cal-normal-faq details > p { margin: 0; padding: 0 17px 17px; color: #59657b; font-size: 0.77rem; line-height: 1.5; }
  .cal-normal-legal { width: min(calc(100% - 42px), 600px); margin: 13px auto 0; color: #7b8495; font-size: 0.68rem; line-height: 1.5; text-align: center; }
  .cal-normal-legal a { color: var(--primary); text-decoration: none; }
  .cal-flow-footer.step-3 > .cal-flow-checkout { width: min(100%, 620px); }
  .cal-flow-paywall-close {
    position: fixed; z-index: 70; top: max(12px, env(safe-area-inset-top)); right: 14px;
    width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
    border: 1px solid #dde3ed; border-radius: 50%; background: rgba(255, 255, 255, 0.96);
    color: #34405a; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08); cursor: pointer;
  }
  .cal-flow-paywall-close svg { width: 20px; height: 20px; }
  .cal-exclusive-offer {
    position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 0;
    display: flex; flex-direction: column; align-items: stretch;
    background: radial-gradient(circle at 50% 0, #eef4ff 0, #fff 48%);
  }
  .cal-exclusive-top-timer { width: 100%; flex: none; animation: cal-flow-rise 0.4s ease-out both; }
  .cal-exclusive-card { width: min(100%, 520px); margin: auto; padding: 34px 16px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
  .cal-exclusive-card > * { opacity: 0; animation: cal-flow-rise 0.65s ease-out forwards; }
  .cal-exclusive-card > :nth-child(1) { animation-delay: 0.15s; }
  .cal-exclusive-card > :nth-child(2) { animation-delay: 0.3s; }
  .cal-exclusive-card > :nth-child(3) { animation-delay: 0.48s; }
  .cal-exclusive-card > :nth-child(4) { animation-delay: 0.66s; }
  .cal-exclusive-card > :nth-child(5) { animation-delay: 0.84s; }
  .cal-exclusive-card > :nth-child(6) { animation-delay: 0.98s; }
  .cal-exclusive-card > :nth-child(7) { animation-delay: 1.1s; }
  .cal-exclusive-card > :nth-child(8) { animation-delay: 1.2s; }
  .cal-exclusive-kicker { margin: 0; color: #d05f00; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
  .cal-exclusive-card h1 { margin: 8px 0 0; color: #081431; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.04; letter-spacing: -0.055em; }
  .cal-exclusive-price { margin-top: 22px; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 8px; }
  .cal-exclusive-price s { color: #818a9c; font-size: 1.05rem; font-weight: 750; }
  .cal-exclusive-price strong { color: var(--primary); font-size: clamp(2.6rem, 12vw, 4.5rem); line-height: 0.95; letter-spacing: -0.065em; }
  .cal-exclusive-price span { color: #59657d; font-size: 0.82rem; font-weight: 650; }
  .cal-exclusive-daily { margin: 18px auto 0; display: flex; flex-direction: column; align-items: center; }
  .cal-exclusive-daily strong { color: #0d8b52; font-size: clamp(3rem, 15vw, 5.2rem); line-height: 0.9; letter-spacing: -0.07em; }
  .cal-exclusive-daily span { margin-top: 8px; color: #38725c; font-size: 0.88rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
  .cal-exclusive-checkout { width: 100%; min-height: 56px; margin-top: 24px; border-radius: 13px; font-size: 1rem; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22); }
  .cal-exclusive-caption { margin: 10px 0 0; color: #283650; font-size: 0.82rem; font-weight: 750; }
  .cal-exclusive-card .cal-flow-status { margin-top: 8px; }
  .cal-exclusive-terms { margin: 13px auto 0; color: #7b8598; font-size: 0.7rem; line-height: 1.45; }
  @media (prefers-reduced-motion: reduce) {
    .cal-exclusive-top-timer, .cal-exclusive-card > * { opacity: 1; animation: none; }
  }
  .cal-flow-status { min-height: 0; margin: 3px 0 0; color: #b42318; text-align: center; font-size: 0.7rem; }
  .cal-flow-status:empty { display: none; }
  .cal-flow-legal {
    margin: 20px 4px 0; color: #7b8598; font-size: 0.72rem; line-height: 1.55; text-align: center;
  }
  .cal-flow-legal a { color: var(--primary); text-decoration: none; }
}

@media (max-width: 350px) {
  .cal-result-build-header { padding-left: 14px; padding-right: 14px; }
  /* The body stays full-bleed here too — only the copy tightens its inset. */
  .cal-result-build-body > h2, .cal-result-build-copy { padding-left: 12px; padding-right: 12px; }
  .cal-result-ring { width: 194px; height: 194px; }
  .cal-result-ring strong { font-size: 3.55rem; }
  /* Narrower card → the longest quote needs all four lines, so a little more. */
  .cal-result-reviews { height: 322px; }
  .cal-result-reviews .cal-flow-review-top { grid-template-columns: 42px minmax(0, 1fr) 52px; }
  .cal-result-reviews .cal-flow-review-ring { width: 52px; height: 52px; }
  .cal-result-reviews .cal-flow-review > p { font-size: 0.86rem; }
}

/* Diagnostic outcome + subscription offer at every viewport width. */
@media all {
  /* Fixed sizing on the .app-layout <div>, not the <body> — see building above. */
  .results-page.calibration-results-paywall { overflow: hidden; }
  .calibration-results-paywall .app-layout {
    position: fixed; top: 0; left: 0; right: 0; bottom: auto;
    width: 100%; min-height: 0; height: 100vh; height: 100svh;
    display: block; overflow: hidden; background: #fff;
  }
  .calibration-results-paywall .app-sidebar,
  .calibration-results-paywall .app-topbar,
  .calibration-results-paywall .dx-topbar { display: none !important; }
  .calibration-results-paywall .app-main { display: block; height: 100%; overflow: hidden; }
  .calibration-results-paywall .app-content.dx-content {
    width: 100%; max-width: none; height: 100%; min-height: 0;
    margin: 0; padding: 0; overflow: hidden;
  }
  .calibration-results-paywall #results {
    width: 100%; max-width: none !important; min-width: 0; height: 100%;
    margin: 0 !important; gap: 0; overflow: hidden;
  }
  .cal-outcome-screen {
    width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column;
    overflow: hidden; background: #fff; color: #0b1530;
  }
  .cal-outcome-header {
    position: sticky; top: 0; z-index: 40; flex: none;
    min-height: 62px; display: grid; grid-template-columns: 42px 1fr 42px;
    align-items: center; padding: max(9px, env(safe-area-inset-top)) 14px 9px;
    border-bottom: 1px solid rgba(224, 229, 239, 0.78);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .cal-outcome-header h1 {
    margin: 0; text-align: center; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.025em;
  }
  .cal-outcome-nav {
    width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
    border: 0; background: transparent; color: #0b1530; text-decoration: none;
    font: 400 2.25rem/1 system-ui, sans-serif; cursor: pointer;
  }
  .cal-outcome-nav.share svg { width: 25px; height: 25px; }
  .cal-outcome-body {
    width: min(100% - 28px, 680px); min-height: 0; flex: 1; margin: 0 auto;
    padding: 14px 0 calc(232px + env(safe-area-inset-bottom));
    overflow-x: clip; overflow-y: auto; overscroll-behavior: none;
    -webkit-overflow-scrolling: touch; touch-action: pan-y;
  }
  .cal-outcome-body .card {
    border: 1.5px solid #dfe5ef; border-radius: 16px; box-shadow: none; background: #fff;
  }
  .cal-outcome-start {
    display: grid; grid-template-columns: minmax(0, 1fr) 142px; align-items: center;
    gap: 10px; padding: 17px 18px;
  }
  .cal-outcome-eyebrow {
    display: block; margin-bottom: 6px; color: #4c5973; font-size: 0.74rem;
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .cal-outcome-start-copy h2 {
    margin: 0; font-size: 2.35rem; line-height: 1; letter-spacing: -0.055em;
  }
  .cal-outcome-start-copy > p { margin: 8px 0 10px; color: #56627b; font-size: 0.86rem; line-height: 1.35; }
  .cal-outcome-start-copy > em {
    width: max-content; max-width: 100%; display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 8px; border-radius: 7px; background: #edf3ff; color: #223352;
    font-size: 0.72rem; font-style: normal; line-height: 1.25;
  }
  .cal-outcome-start-copy > em span { width: 17px; height: 17px; display: inline-flex; color: var(--primary); }
  .cal-outcome-start-copy > em svg { width: 17px; height: 17px; }
  .cal-outcome-gauge { position: relative; height: 104px; text-align: center; }
  .cal-outcome-gauge-svg { position: absolute; inset: 0; display: block; }
  .cal-outcome-gauge-svg svg { width: 100%; height: 100%; overflow: visible; }
  .cal-outcome-gauge-svg path { fill: none; stroke-width: 13; stroke-linecap: round; }
  .cal-outcome-gauge-svg .track { stroke: #e4e8f1; }
  .cal-outcome-gauge-svg .value { stroke: var(--primary); }
  .cal-outcome-gauge strong {
    position: relative; display: block; padding-top: 47px; font-size: 1.32rem; line-height: 1;
  }
  .cal-outcome-gauge small { position: relative; display: block; margin-top: 6px; color: #536078; font-size: 0.68rem; }

  .cal-outcome-forecast { padding: 17px 16px 15px; }
  .cal-outcome-forecast > h2 { margin: 0 0 11px; font-size: 1rem; letter-spacing: -0.02em; }
  .cal-forecast-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-bottom: 15px; border-bottom: 1px solid #dfe5ef;
  }
  .cal-forecast-score {
    min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap;
  }
  .cal-forecast-score > strong {
    font-size: 2.25rem; line-height: 1; letter-spacing: -0.055em;
  }
  .cal-forecast-score > i { color: #a4adbd; font-size: 1.2rem; font-style: normal; font-weight: 400; }
  .cal-forecast-score > b { color: #45516a; font-size: 1rem; font-weight: 750; }
  .cal-forecast-goal {
    flex: none; padding: 10px 11px; border: 1px solid #b9e3c2; border-radius: 10px;
    background: #f0fbf2; color: #15932f; font-size: 0.75rem; font-weight: 800; text-align: center;
  }
  .cal-forecast-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
  .cal-forecast-skill {
    min-width: 0; min-height: 67px; display: flex; align-items: center; gap: 9px;
    padding: 10px; border: 1px solid #dfe5ef; border-radius: 12px; background: #fff;
  }
  .cal-forecast-skill.reading { border-color: #cddcff; }
  .cal-forecast-skill.listening { border-color: #cce8d5; }
  .cal-forecast-skill.speaking { border-color: #ddd0f7; }
  .cal-forecast-skill.writing { border-color: #f2dcc1; }
  .cal-forecast-skill > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .cal-forecast-skill b { font-size: 0.78rem; }
  .cal-forecast-skill.reading b { color: #155eef; }
  .cal-forecast-skill.listening b { color: #159447; }
  .cal-forecast-skill.speaking b { color: #7022c7; }
  .cal-forecast-skill.writing b { color: #df7c0b; }
  .cal-forecast-skill div > span { color: #34405a; font-size: 0.59rem; line-height: 1.3; white-space: nowrap; }
  .cal-forecast-skill.missing div > span { color: #7b8598; font-weight: 650; }

  .cal-outcome-chart { margin-top: 12px; padding: 15px 12px 12px; }
  .cal-outcome-chart h2 { margin: 0 5px 2px; color: #3f4c65; font-size: 0.82rem; font-weight: 700; }
  .cal-outcome-chart-svg { display: block; width: 100%; }
  .cal-outcome-chart-svg svg { width: 100%; height: auto; display: block; overflow: visible; }
  .cal-outcome-chart-svg .baseline { fill: none; stroke: #9aa6ba; stroke-width: 1; }
  .cal-outcome-chart-svg .guide { fill: none; stroke: #b9cff8; stroke-width: 1; stroke-dasharray: 3 3; }
  .cal-outcome-chart-svg .area { fill: url(#forecast-fill); }
  .cal-outcome-chart-svg .forecast-line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .cal-outcome-chart-svg .dot { fill: var(--primary); stroke: #fff; stroke-width: 2; }
  .cal-outcome-chart-svg .dot.goal { fill: #16a34a; }
  .cal-outcome-chart-svg text { font-family: inherit; text-anchor: middle; }
  .cal-outcome-chart-svg .value-label { fill: #13213e; font-size: 11px; font-weight: 800; }
  .cal-outcome-chart-svg .week-label { fill: #58657b; font-size: 9px; }
  .cal-outcome-chart > p { margin: 0; color: #647086; text-align: center; font-size: 0.7rem; }

  .cal-outcome-goal { padding: 20px 4px 18px; border-bottom: 1px solid #e2e7f0; }
  .cal-outcome-goal h2 { margin: 0 0 17px; font-size: 1.18rem; letter-spacing: -0.025em; }
  .cal-outcome-goal h2 strong { color: var(--primary); }
  .cal-outcome-goal-track {
    display: grid; grid-template-columns: 78px minmax(20px, 1fr) 78px; align-items: start; padding: 0 5px;
  }
  .cal-outcome-goal-line { margin-top: 10px; border-top: 2px dashed #76a5ff; }
  .cal-outcome-goal-end { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .cal-outcome-goal-end i {
    width: 24px; height: 24px; display: block; margin-bottom: 7px;
    border: 5px solid #e9f1ff; border-radius: 50%; background: var(--primary);
    box-shadow: 0 0 0 1px #cfe0ff;
  }
  .cal-outcome-goal-end.target i { background: #7da3f1; }
  .cal-outcome-goal-end b { color: #102047; font-size: 0.78rem; }
  .cal-outcome-goal-end.current b { color: var(--primary); }
  .cal-outcome-goal-end span { margin-top: 3px; color: #59667d; font-size: 0.66rem; line-height: 1.25; }
  .cal-outcome-goal > p { margin: 15px 0 0; color: #57637a; text-align: center; font-size: 0.78rem; line-height: 1.4; }

  .cal-outcome-profile { padding: 18px 0 8px; }
  .cal-outcome-profile > h2 { margin: 0 4px 8px; font-size: 1.28rem; letter-spacing: -0.03em; }
  .cal-outcome-skill-row {
    min-height: 48px; display: grid; grid-template-columns: 38px 78px minmax(36px, 1fr) minmax(112px, auto);
    align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid #e3e8f0;
  }
  .cal-outcome-skill-row:last-child { border-bottom: 0; }
  .cal-outcome-skill-row > b { font-size: 0.85rem; }
  .cal-outcome-skill-row > i { height: 7px; overflow: hidden; border-radius: 10px; background: #e5e9f1; }
  .cal-outcome-skill-row > i > span { height: 100%; display: block; border-radius: inherit; background: var(--primary); }
  .cal-outcome-skill-row > span:last-child { color: #23304a; font-size: 0.65rem; text-align: right; white-space: nowrap; }
  .cal-outcome-skill-row.estimated > span:last-child { color: #6b768a; }
  .cal-outcome-skill-icon {
    width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  }
  .cal-outcome-skill-icon svg { width: 21px; height: 21px; }
  .cal-outcome-skill-icon.reading,
  .cal-outcome-skill-icon.listening { background: #e7f8ed; color: #16a34a; }
  .cal-outcome-skill-icon.speaking { background: #edf3ff; color: #2563eb; }
  .cal-outcome-skill-icon.writing { background: #f3eaff; color: #7e22ce; }

  .cal-outcome-focus {
    display: grid; grid-template-columns: 54px minmax(0, 1fr) 24px; align-items: center;
    gap: 11px; margin-top: 10px; padding: 16px; color: inherit; text-decoration: none;
  }
  .cal-outcome-focus-icon {
    width: 52px; height: 52px; display: grid; place-items: center;
    border-radius: 50%; background: #f1eaff; color: #6d20d2;
  }
  .cal-outcome-focus-icon svg { width: 31px; height: 31px; }
  .cal-outcome-focus em {
    display: block; margin-bottom: 3px; color: #6d20d2; font-size: 0.67rem;
    font-weight: 800; font-style: normal; letter-spacing: 0.05em; text-transform: uppercase;
  }
  .cal-outcome-focus h2 { margin: 0; font-size: 1.1rem; letter-spacing: -0.025em; }
  .cal-outcome-focus p { margin: 6px 0 8px; color: #59657a; font-size: 0.76rem; line-height: 1.38; }
  .cal-outcome-focus div > b { color: var(--primary); font-size: 0.75rem; }
  .cal-outcome-chevron { width: 24px; height: 24px; display: inline-flex; color: #526079; }

  .cal-outcome-plan {
    margin-top: 12px; padding: 17px 16px; border-color: #c6d8ff !important;
    background: linear-gradient(145deg, #f7faff 0%, #fff 70%) !important;
  }
  .cal-outcome-plan > header { display: flex; align-items: flex-start; gap: 12px; }
  .cal-outcome-plan > header > span { width: 40px; height: 40px; flex: none; display: inline-flex; color: var(--primary); }
  .cal-outcome-plan > header svg { width: 40px; height: 40px; }
  .cal-outcome-plan h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; letter-spacing: -0.03em; }
  .cal-outcome-plan header p { margin: 4px 0 0; color: #59657a; font-size: 0.75rem; }
  .cal-outcome-days { margin: 13px 0 10px; }
  .cal-outcome-day { min-height: 38px; display: grid; grid-template-columns: 30px 42px 8px 1fr; align-items: center; gap: 5px; }
  .cal-outcome-day .cal-outcome-skill-icon.small { width: 29px; height: 29px; }
  .cal-outcome-day .cal-outcome-skill-icon.small svg { width: 17px; height: 17px; }
  .cal-outcome-day b, .cal-outcome-day p, .cal-outcome-day > span { font-size: 0.77rem; }
  .cal-outcome-day p { margin: 0; }
  .cal-outcome-locked {
    min-height: 43px; display: flex; align-items: center; gap: 10px; padding: 9px 11px;
    border-radius: 10px; background: linear-gradient(90deg, #edf3ff, #f8faff); color: #152443;
  }
  .cal-outcome-locked span { width: 23px; height: 23px; display: inline-flex; color: #65738c; }
  .cal-outcome-locked svg { width: 23px; height: 23px; }
  .cal-outcome-locked b { font-size: 0.78rem; }
  .cal-outcome-plan ul { display: grid; gap: 7px; margin: 12px 0 0; padding: 11px 0 0; border-top: 1px solid #dce5f5; list-style: none; }
  .cal-outcome-plan li { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; }
  .cal-outcome-plan li span { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; }
  .cal-outcome-plan li svg { width: 11px; height: 11px; }

  .cal-outcome-offer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; justify-items: center;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #dfe5ef;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .cal-outcome-offer > * { width: min(100%, 680px); }
  .cal-outcome-plan-choice {
    min-height: 68px; display: flex; align-items: center; gap: 14px; padding: 10px 17px;
    border: 2px solid var(--primary); border-radius: 15px; background: #fff;
  }
  .cal-outcome-radio { width: 27px; height: 27px; flex: none; border: 3px solid var(--primary); border-radius: 50%; box-shadow: inset 0 0 0 5px #fff; background: var(--primary); }
  .cal-outcome-plan-choice h2 { margin: 0; font-size: 1.08rem; }
  .cal-outcome-plan-choice p { margin: 4px 0 0; color: #556278; font-size: 0.73rem; }
  .cal-outcome-price { text-align: center; }
  .cal-outcome-price > div { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
  .cal-outcome-price strong { font-size: 2.35rem; line-height: 1; letter-spacing: -0.045em; }
  .cal-outcome-price span { color: #27334d; font-size: 1rem; }
  .cal-outcome-price p { margin: 4px 0 0; color: #58657b; font-size: 0.72rem; }
  .cal-outcome-checkout { min-height: 54px; margin-top: 9px; border-radius: 12px; font-size: 1rem; }
  .cal-outcome-checkout-status { min-height: 18px; margin: 5px 0 0; color: #b42318; text-align: center; font-size: 0.72rem; }
  .cal-outcome-checkout-status:empty { min-height: 0; margin: 0; }
  .cal-outcome-secure {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 7px 0 0; color: #58657b; font-size: 0.72rem;
  }
  .cal-outcome-secure span { width: 16px; height: 16px; display: inline-flex; }
  .cal-outcome-secure svg { width: 16px; height: 16px; }
  .cal-outcome-legal { display: flex; justify-content: center; gap: 28px; margin-top: 7px; }
  .cal-outcome-legal a { color: var(--primary); font-size: 0.72rem; text-decoration: none; }
}

@media (max-width: 350px) {
  .cal-outcome-body { width: min(100% - 20px, 680px); padding-bottom: calc(236px + env(safe-area-inset-bottom)); }
  .cal-outcome-start { grid-template-columns: minmax(0, 1fr) 118px; padding: 15px 13px; }
  .cal-outcome-start-copy h2 { font-size: 2rem; }
  .cal-outcome-start-copy > em { font-size: 0.65rem; }
  .cal-outcome-skill-row { grid-template-columns: 34px 62px minmax(28px, 1fr) minmax(104px, auto); gap: 6px; }
  .cal-outcome-skill-icon { width: 32px; height: 32px; }
  .cal-outcome-skill-row > b { font-size: 0.78rem; }
  .cal-outcome-skill-row > span:last-child { font-size: 0.59rem; }
  .cal-outcome-focus { grid-template-columns: 46px minmax(0, 1fr) 20px; padding: 14px 12px; }
  .cal-outcome-focus-icon { width: 44px; height: 44px; }
  .cal-outcome-forecast { padding-left: 12px; padding-right: 12px; }
  .cal-forecast-score > strong { font-size: 1.85rem; }
  .cal-forecast-score > b { font-size: 0.86rem; }
  .cal-forecast-goal { padding: 8px; font-size: 0.66rem; }
  .cal-forecast-skill { gap: 6px; padding: 8px 7px; }
  .cal-forecast-skill .cal-outcome-skill-icon { width: 29px; height: 29px; }
  .cal-forecast-skill .cal-outcome-skill-icon svg { width: 17px; height: 17px; }
  .cal-forecast-skill b { font-size: 0.7rem; }
  .cal-forecast-skill div > span { font-size: 0.52rem; line-height: 1.2; white-space: normal; }
}

@media (max-width: 640px) {
  .app-dashboard-page .mobile-cal-screen,
  .app-dashboard-page .mobile-cal-header,
  .app-dashboard-page .mobile-cal-body,
  .app-dashboard-page .mobile-cal-footer { min-width: 0; max-width: 100%; overflow-x: clip; }
}

/* Keep the app-style diagnostic comfortably phone-sized inside wide screens. */
@media (min-width: 641px) {
  .mobile-cal-stepper { width: min(100%, 680px); margin-left: auto; margin-right: auto; }
  .mobile-task-titlebar { width: min(100%, 680px); margin-left: auto; margin-right: auto; }
}

@media (max-width: 350px) {
  .mobile-cal-header { padding-left: 14px; padding-right: 14px; }
  .mobile-cal-stepper { grid-template-columns: 50px minmax(14px, 1fr) 72px minmax(14px, 1fr) 50px; gap: 5px; }
  .mobile-cal-body { width: min(100% - 24px, 680px); }
  .mobile-cal-body h2 { font-size: 2rem; }
  .mobile-cal-goals > button { grid-template-columns: 82px minmax(0, 1fr) 26px; gap: 8px; padding: 14px; }
  .mobile-cal-goal-score strong { font-size: 1.5rem; }
  .mobile-cal-goal-copy b { font-size: 0.9rem; }
}

.onboard-body { display: flex; flex-direction: column; gap: 18px; }
.onboard-hero {
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
  padding: 36px 34px;
  background:
    radial-gradient(circle at 78% 20%, rgba(59,130,246,0.65), transparent 35%),
    linear-gradient(130deg, #172554 0%, #173b98 58%, #155eef 100%);
}
.onboard-hero-heading { display: flex; align-items: center; gap: 14px; }
.onboard-hero-heading h2 { margin: 0; font-size: clamp(1.55rem, 2.7vw, 2rem); }
.onboard-spark {
  width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: rgba(59,130,246,0.3); color: #fff;
}
.onboard-spark svg { width: 25px; height: 25px; }
.onboard-hero .next-hero-copy > p {
  max-width: 600px; margin: 16px 0 20px; color: rgba(255,255,255,0.82); font-size: 0.98rem;
}
.onboard-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.onboard-actions > a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 0.9rem; font-weight: 700; }
.onboard-actions > a:hover { color: #dbeafe; text-decoration: none; }
.onboard-actions > a svg { width: 16px; height: 16px; }
.onboard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 20px; color: rgba(255,255,255,0.78); font-size: 0.76rem; }
.onboard-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.onboard-meta > span + span::before { content: "•"; margin-right: 8px; color: rgba(255,255,255,0.48); }
.onboard-meta i { display: inline-flex; font-style: normal; }
.onboard-meta i svg { width: 15px; height: 15px; }
.onboard-meta b { color: inherit; }
.onboard-flow { padding-left: 18px; }
.onboard-flow .next-flow-step { gap: 14px; }
.onboard-flow .next-flow-step b { font-size: 0.95rem; }
.onboard-flow .next-flow-step small { margin-top: 2px; font-size: 0.76rem; }
.onboard-flow .next-step-num { width: 38px; height: 38px; font-size: 0.9rem; }
.onboard-flow .next-flow-line { height: 24px; margin-left: 19px; }

.onboard-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 18px; scroll-margin-top: 24px; }
.onboard-info-card, .onboard-goal-card, .onboard-coverage { padding: 22px 24px; border-radius: 16px; }
.onboard-info-card h2, .onboard-goal-card h2, .onboard-coverage h2 { margin: 0 0 16px; font-size: 1rem; }
.onboard-benefits { display: flex; flex-direction: column; gap: 13px; }
.onboard-benefits > div { display: flex; align-items: center; gap: 12px; }
.onboard-benefits p, .onboard-skill-grid p { display: flex; flex-direction: column; margin: 0; line-height: 1.3; }
.onboard-benefits b, .onboard-skill-grid b { font-size: 0.82rem; }
.onboard-benefits small, .onboard-skill-grid small { color: var(--text-faint); font-size: 0.72rem; }
.onboard-mini {
  width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
}
.onboard-mini svg { width: 18px; height: 18px; }
.onboard-mini.blue { color: var(--c-reading); background: var(--c-reading-soft); }
.onboard-mini.green { color: var(--c-listening); background: var(--c-listening-soft); }
.onboard-mini.purple { color: var(--c-speaking); background: var(--c-speaking-soft); }

.onboard-goals { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow); }
.onboard-goals button {
  position: relative; min-height: 68px; border: 0; border-left: 1px solid var(--border);
  background: #fff; color: var(--text-dim); font: inherit; font-weight: 800; cursor: pointer;
}
.onboard-goals button:first-child { border-left: 0; }
.onboard-goals button:hover:not(:disabled) { color: var(--primary); background: var(--primary-soft); }
.onboard-goals button.selected {
  z-index: 1; margin: -1px; border: 2px solid var(--primary); border-radius: 13px;
  color: var(--primary); background: #f8fbff;
}
.onboard-goals button i {
  position: absolute; top: 50%; right: 14px; width: 21px; height: 21px;
  display: inline-flex; align-items: center; justify-content: center; transform: translateY(-50%);
  border-radius: 50%; background: var(--primary); color: #fff; font-style: normal;
}
.onboard-goals button i svg { width: 13px; height: 13px; }
.onboard-goal-card > p { margin: 17px 0 0; color: var(--text-dim); font-size: 0.82rem; }

.onboard-skill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.onboard-skill-grid > div { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; }
.onboard-skill-icon { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; }
.onboard-skill-icon svg { width: 22px; height: 22px; }
.onboard-skill-icon.reading { color: var(--c-reading); background: var(--c-reading-soft); }
.onboard-skill-icon.listening { color: var(--c-listening); background: var(--c-listening-soft); }
.onboard-skill-icon.speaking { color: var(--c-speaking); background: var(--c-speaking-soft); }
.onboard-skill-icon.writing { color: var(--c-writing); background: var(--c-writing-soft); }

/* --- How the diagnostic works page --- */
.how-page { max-width: 1180px; padding-top: 34px; }
.how-welcome { margin-bottom: 18px; }
.how-hero { grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.9fr); padding: 28px 32px; gap: 42px; }
.how-hero h2 { margin: 0 0 8px; font-size: clamp(1.55rem, 2.5vw, 2rem); }
.how-hero .next-hero-copy > p { margin: 0 0 20px; color: rgba(255,255,255,0.8); max-width: 570px; }
.how-flow { padding-left: 4px; }
.how-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.how-step-card { min-width: 0; padding: 20px; border-radius: 16px; }
.how-step-card > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 0.98rem; }
.how-step-card > h2 > span {
  width: 25px; height: 25px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.75rem;
}
.how-step-card > p { min-height: 44px; margin: 0 0 14px; color: var(--text-dim); font-size: 0.8rem; line-height: 1.4; }
.how-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.how-pills > span {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px;
  border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); font-size: 0.63rem;
}
.how-pills i { display: inline-flex; color: var(--text-dim); }
.how-pills svg { width: 13px; height: 13px; }
.how-icon-row, .how-icon-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; text-align: center; }
.how-icon-row > span {
  width: 42px; height: 42px; margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
}
.how-icon-row svg { width: 21px; height: 21px; }
.how-icon-row .reading { background: var(--c-reading-soft); color: var(--c-reading); }
.how-icon-row .listening { background: var(--c-listening-soft); color: var(--c-listening); }
.how-icon-row .speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.how-icon-row .writing { background: var(--c-writing-soft); color: var(--c-writing); }
.how-icon-labels { margin-top: 5px; color: var(--text-dim); font-size: 0.64rem; }

.how-estimate { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; }
.how-estimate-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; background: linear-gradient(110deg, #f8fafc, #eef2ff); font-size: 0.75rem; }
.how-estimate-head strong { font-size: 1.15rem; }
.how-estimate-skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 12px; }
.how-estimate-skills > div { min-width: 0; display: flex; flex-direction: column; gap: 7px; font-size: 0.62rem; text-align: center; }
.how-estimate-skills i { height: 5px; overflow: hidden; border-radius: 999px; background: var(--dx-track); }
.how-estimate-skills i b { display: block; height: 100%; border-radius: inherit; transition: width 0.4s; }
.how-estimate-skills b.reading { background: var(--c-reading); }
.how-estimate-skills b.listening { background: var(--c-listening); }
.how-estimate-skills b.speaking { background: var(--c-speaking); }
.how-estimate-skills b.writing { background: var(--c-writing); }

.how-plan-preview { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; }
.how-plan-preview > div { display: grid; grid-template-columns: 30px 1fr auto 14px; gap: 8px; align-items: center; padding: 9px 10px; border-top: 1px solid var(--border); }
.how-plan-preview > div:first-child { border-top: 0; }
.how-plan-preview > div > span { width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.how-plan-preview > div > span svg { width: 15px; height: 15px; }
.how-plan-preview span.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.how-plan-preview span.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.how-plan-preview span.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.how-plan-preview b { font-size: 0.7rem; }
.how-plan-preview small { color: var(--text-faint); font-size: 0.6rem; }
.how-plan-preview i { display: inline-flex; color: var(--text-faint); }
.how-plan-preview i svg { width: 13px; height: 13px; }

.how-coverage { margin-top: 16px; padding: 18px 20px; border-radius: 16px; }
.how-coverage > h2, .how-why > h2, .how-faq > h2 { margin: 0 0 14px; font-size: 0.95rem; }
.how-bottom { display: grid; grid-template-columns: 0.9fr 1.15fr; gap: 16px; margin-top: 16px; }
.how-why, .how-faq { position: relative; min-width: 0; padding: 20px; border-radius: 16px; }
.how-why > div { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.how-why > div > span { display: inline-flex; color: var(--primary); }
.how-why > div svg { width: 17px; height: 17px; }
.how-why p { margin: 0; color: var(--text-dim); font-size: 0.78rem; }
.how-target { position: absolute; right: 34px; bottom: 28px; width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); opacity: 0.8; }
.how-target svg { width: 42px; height: 42px; }
.how-faq details { border: 1px solid var(--border); border-bottom: 0; }
.how-faq details:first-of-type { border-radius: 11px 11px 0 0; }
.how-faq details:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 11px 11px; }
.how-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.how-faq summary::-webkit-details-marker { display: none; }
.how-faq summary > span { display: inline-flex; align-items: center; gap: 9px; }
.how-faq summary i { width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.62rem; font-style: normal; }
.how-faq summary b { font-size: 0.72rem; }
.how-faq summary small { color: var(--text-dim); font-size: 0.68rem; }
.how-faq details > p { margin: 0; padding: 0 40px 10px; color: var(--text-dim); font-size: 0.72rem; }

.next-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.75fr); gap: 20px; margin-top: 22px; align-items: start; }
.next-session, .next-progress-card { padding: 26px; border-radius: 18px; }
.next-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.next-section-head h2 { margin: 4px 0 0; font-size: 1.25rem; }
.next-section-head.compact { margin-bottom: 12px; }
.next-section-head a { font-size: 0.84rem; font-weight: 700; }
.next-duration { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 0.82rem; white-space: nowrap; }
.next-duration svg { width: 16px; height: 16px; }
.next-task-list { display: flex; flex-direction: column; }
.next-task {
  width: 100%; display: grid; grid-template-columns: 30px 42px minmax(0, 1fr) auto 18px;
  gap: 12px; align-items: center; padding: 15px 2px;
  border: 0; border-top: 1px solid var(--border); background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.next-task:first-child { border-top: 0; }
.next-task:hover:not(:disabled) .next-task-copy b { color: var(--primary); }
.next-task:disabled { cursor: default; }
.next-task-status {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%; color: var(--text-dim); font-size: 0.78rem; font-weight: 800;
}
.next-task.current .next-task-status { background: var(--primary); border-color: var(--primary); color: #fff; }
.next-task.done .next-task-status { background: var(--success-soft); border-color: transparent; color: var(--success); }
.next-task-status svg { width: 14px; height: 14px; }
.next-task-icon {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px;
}
.next-task-icon svg { width: 20px; height: 20px; }
.next-task-icon.reading { background: var(--c-reading-soft); color: var(--c-reading); }
.next-task-icon.listening { background: var(--c-listening-soft); color: var(--c-listening); }
.next-task-icon.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); }
.next-task-icon.writing { background: var(--c-writing-soft); color: var(--c-writing); }
.next-task-copy { display: flex; min-width: 0; flex-direction: column; }
.next-task-copy b { font-size: 0.92rem; transition: color 0.15s; }
.next-task-copy small { overflow: hidden; color: var(--text-faint); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.next-task-time { color: var(--text-dim); font-size: 0.78rem; white-space: nowrap; }
.next-task-arrow { display: inline-flex; color: var(--text-faint); }
.next-task-arrow svg { width: 17px; height: 17px; }
.next-task.done { opacity: 0.62; }
.next-task.done .next-task-copy b { text-decoration: line-through; }
.next-session-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: 0.8rem;
}
.next-session-foot a { font-weight: 700; }

.next-score { display: flex; align-items: baseline; gap: 4px; margin: 14px 0 22px; }
.next-score .num { color: var(--primary); font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.next-score .max { color: var(--text-faint); font-size: 0.84rem; font-weight: 700; }
.next-skill-list { display: flex; flex-direction: column; gap: 12px; }
.next-skill-row { display: grid; grid-template-columns: 9px 1fr auto; gap: 9px; align-items: center; color: var(--text-dim); font-size: 0.84rem; }
.next-skill-row b { color: var(--text); font-size: 0.78rem; }
.next-skill-dot { width: 8px; height: 8px; border-radius: 50%; }
.next-skill-dot.reading { background: var(--c-reading); }
.next-skill-dot.listening { background: var(--c-listening); }
.next-skill-dot.speaking { background: var(--c-speaking); }
.next-skill-dot.writing { background: var(--c-writing); }
.next-progress-link { display: flex; align-items: center; gap: 6px; margin-top: 22px; font-size: 0.84rem; font-weight: 700; }
.next-progress-link svg { width: 15px; height: 15px; }

.next-reassurance {
  max-width: 720px; display: flex; align-items: flex-start; gap: 14px; margin: 28px auto 0; padding: 0 20px;
}
.next-reassurance > span { display: inline-flex; color: var(--success); }
.next-reassurance svg { width: 24px; height: 24px; }
.next-reassurance b { font-size: 0.9rem; }
.next-reassurance p { margin: 2px 0 0; color: var(--text-dim); font-size: 0.84rem; }

@media (max-width: 980px) {
  .next-hero { grid-template-columns: 1fr; gap: 30px; }
  .next-flow { flex-direction: row; align-items: flex-start; }
  .next-flow-step { flex: 1; align-items: flex-start; }
  .next-flow-line { width: 24px; height: 1px; margin: 15px 5px 0; }
  .next-layout { grid-template-columns: 1fr; }
  .next-side { max-width: none; }
  .onboard-flow { padding-left: 0; }
  .onboard-flow .next-flow-line { width: 24px; height: 1px; margin: 19px 5px 0; }
  .onboard-grid { grid-template-columns: 1fr; }
  .onboard-skill-grid { grid-template-columns: 1fr 1fr; }
  .how-hero { grid-template-columns: 1fr; }
  .how-three { grid-template-columns: 1fr; }
  .how-step-card > p { min-height: 0; }
  .how-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dx-home { padding-top: 28px; }
  .next-welcome { margin-bottom: 18px; }
  .next-hero { padding: 28px 22px; border-radius: 18px; }
  .next-action-meta { display: block; margin: 10px 0 0; }
  .next-primary { width: 100%; }
  .next-flow { flex-direction: column; }
  .next-flow-step { width: 100%; }
  .next-flow-line { width: 1px; height: 14px; margin: 3px 0 3px 15px; }
  .next-session, .next-progress-card { padding: 20px 16px; }
  .next-task { grid-template-columns: 26px 38px minmax(0, 1fr) 16px; gap: 9px; }
  .next-task-time { display: none; }
  .next-task-copy small { white-space: normal; line-height: 1.3; margin-top: 2px; }
  .next-session-foot { align-items: flex-start; flex-direction: column; }
  .onboard-subtitle { font-size: 0.9rem; }
  .onboard-hero-heading { align-items: flex-start; }
  .onboard-spark { width: 42px; height: 42px; }
  .onboard-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .onboard-actions > a { justify-content: center; }
  .onboard-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
  .onboard-meta > span + span::before { display: none; }
  .onboard-flow .next-flow-line { width: 1px; height: 14px; margin: 3px 0 3px 19px; }
  .onboard-info-card, .onboard-goal-card, .onboard-coverage { padding: 20px 16px; }
  .onboard-goals button { min-height: 62px; }
  .onboard-goals button i { right: 7px; width: 18px; height: 18px; }
  .onboard-skill-grid { grid-template-columns: 1fr; }
  .how-page { padding-top: 24px; }
  .how-hero { padding: 26px 20px; }
  .how-target { display: none; }
  .how-faq summary { align-items: flex-start; }
  .how-faq summary small { text-align: right; }
}

@media (max-width: 360px) {
  .cal-flow-page { width: min(100% - 24px, 680px); }
  .cal-flow-score-top { grid-template-columns: minmax(0, 1fr) 112px; gap: 6px; }
  .cal-flow-score-copy > h2 { font-size: 1.4rem; }
  .cal-flow-score-copy > p { font-size: 0.73rem; }
  .cal-flow-band-gauge { width: 112px; height: 104px; }
  .cal-flow-band-gauge-mid > b { font-size: 1.3rem; }
  .cal-flow-tile { padding: 11px 2px; }
  .cal-flow-tile-name { font-size: 0.72rem; }
  .cal-flow-tile-pill { font-size: 0.62rem; padding: 3px 5px; }
  .cal-flow-tile-count { font-size: 0.62rem; }
  .cal-flow-issue { grid-template-columns: 26px 36px minmax(0, 1fr) auto 12px; gap: 6px; padding: 10px; }
  .cal-flow-issue-rank { width: 23px; height: 23px; font-size: 0.76rem; }
  .cal-flow-screen .cal-outcome-skill-icon { width: 37px; height: 37px; }
  .cal-flow-issue-text > b { font-size: 0.86rem; }
  .cal-flow-issue-gap { font-size: 0.8rem; }
  .cal-flow-issue-note { font-size: 0.72rem; }
  .cal-flow-sev { font-size: 0.68rem; padding: 5px 7px; }
  .cal-detail-hero { grid-template-columns: 46px minmax(0, 1fr) 64px; gap: 9px; padding: 13px 11px; }
  .cal-detail-hero-ic { width: 46px; height: 46px; }
  .cal-detail-ring { width: 64px; height: 64px; }
  .cal-flow-review { flex-basis: 78%; }
  .cal-flow-review-top { grid-template-columns: 42px minmax(0, 1fr) 56px; }
  .cal-flow-review-avatar { width: 42px; height: 42px; font-size: 0.86rem; }
  .cal-flow-review-id > b { font-size: 0.94rem; }
  .cal-flow-review-verify { font-size: 0.68rem; }
  .cal-flow-review-ring { width: 56px; height: 56px; }
  .cal-flow-review-ring strong { font-size: 1rem; }
  .cal-flow-review-delta .prev b { font-size: 1.2rem; }
  .cal-flow-review-delta .gain-num b { font-size: 1.2rem; }
  .cal-flow-review-delta .gain .up { font-size: 1rem; }
  .cal-flow-review > p { font-size: 0.78rem; }
  .cal-normal-discount, .cal-normal-plans { width: calc(100% - 24px); }
  .cal-normal-plan { grid-template-columns: 26px minmax(0, 1fr) 96px; gap: 8px; padding-left: 12px; padding-right: 9px; }
  .cal-normal-plan-copy > b { font-size: 1rem; }
  .cal-normal-plan-copy > span { font-size: 0.73rem; }
  .cal-normal-daily strong { font-size: 1.3rem; }
  .cal-flow-price { grid-template-columns: minmax(0, 1fr) 98px; padding: 15px 13px; }
  .cal-flow-price > div > strong { font-size: 2.45rem; }
  .cal-flow-footer.step-3 > .cal-flow-price { grid-template-columns: minmax(0, 1fr) 92px; padding: 11px 12px; }
  .cal-flow-footer.step-3 > .cal-flow-price > div > strong { font-size: 2.15rem; }
  .cal-flow-footer.step-3 > .cal-flow-price > b { min-height: 56px; }
}

/* ---- Mobile normal-test runner (practice drills + mocks, <=640px) ---------
   Reuses the onboarding .mobile-task-* / .cal-* screens with a plain test
   header (title + timer + progress) instead of the calibration stepper. */
@media (max-width: 640px) {
  /* Host fills the locked viewport under either takeover body class. */
  .calibration-question-active .mobile-test-stage,
  .calibration-transition-active .mobile-test-stage {
    width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden;
  }
  .mobile-test-stage { display: flex; flex-direction: column; height: 100%; background: #fff; }
  .mobile-test-stage > section { flex: 1; min-height: 0; }

  /* Header: drop the stepper, add a thin progress bar under the title bar. */
  .mobile-test-header { padding-bottom: 0; }
  .mobile-test-header.no-progress { padding-bottom: 12px; }
  .mobile-task-timer-spacer { width: 44px; justify-self: end; }
  .mobile-test-progress {
    height: 3px; margin: 10px -20px 0; background: var(--surface-2, #f1f5f9);
    overflow: hidden;
  }
  .mobile-test-progress-fill {
    display: block; height: 100%; width: 4%; border-radius: 0 3px 3px 0;
    background: var(--primary, #2563eb); transition: width 0.28s ease;
  }

  /* Generic MCQ card. */
  .mobile-mcq-question > h2,
  .mobile-passage-prompt,
  .mobile-complete-question > h2,
  .mobile-lecture-question > h2 { margin: 0 0 16px; }
  .mobile-task-hint {
    margin: -8px 0 14px; color: var(--primary-dark, #1d4ed8);
    font-size: 0.9rem; font-weight: 650;
  }
  .mobile-task-radio.check { border-radius: 7px; }
  .mobile-task-option input:checked ~ .mobile-task-radio.check {
    background: var(--primary, #2563eb); border-color: var(--primary, #2563eb);
  }

  /* Reading passage card. */
  .mobile-passage-badge {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
    padding: 7px 12px; border-radius: 999px; background: #eef4ff; color: #155eef;
  }
  .mobile-passage-badge span { width: 18px; height: 18px; display: inline-flex; }
  .mobile-passage-badge svg { width: 18px; height: 18px; }
  .mobile-passage-badge b { font-size: 0.86rem; font-weight: 700; }
  .mobile-passage-card {
    margin: 0 0 20px; padding: 18px; border: 1px solid var(--border, #e5e7eb);
    border-radius: 16px; background: #fbfcfe;
  }
  .mobile-passage-card p { margin: 0 0 12px; color: #1f2937; font-size: 1.02rem; line-height: 1.62; }
  .mobile-passage-card p:last-child { margin-bottom: 0; }
  .mobile-passage-prompt { font-size: 1.14rem; }

  /* Complete-the-Words (masked) card. */
  .mobile-complete-masked {
    margin: 0 0 16px; padding: 16px; border-radius: 14px; background: #f8fafc;
    border: 1px solid var(--border, #e5e7eb); text-align: center;
    font-size: 1.5rem; font-weight: 700; letter-spacing: 0.14em; color: var(--text, #111827);
  }
  .mobile-complete-field { display: block; }
  .mobile-complete-input {
    width: 100%; padding: 15px 16px; border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 14px; font-size: 16px; background: #fff; color: var(--text, #111827);
  }
  .mobile-complete-input:focus { outline: none; border-color: var(--primary, #2563eb); }

  /* Lecture "listen to the recording" card sits in the normal flow. */
  .mobile-lecture-hint { margin: -8px 0 18px; color: var(--text-dim, #4b5563); font-size: 0.95rem; }

  /* Essay stage — style the reused exam writing widgets for phones. The stage
     is a flex column so the textarea fills and the submit tray pins to the
     bottom even when the prompt is short. */
  /* Essay/speaking bodies keep their action row in-flow, so drop the tall
     footer reserve the paged screens use. */
  .mobile-essay-body, .mobile-speak-body { padding-bottom: var(--mobile-keyboard-inset, 0px); }
  .mobile-essay-body { display: flex; flex-direction: column; }
  .mobile-essay-body .exam-task { padding: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .mobile-essay-body .exam-task > div:last-child { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .mobile-essay-body .exam-task > div:last-child > div:first-child { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .mobile-essay-body .q-prompt,
  .mobile-essay-body .q-prompt.big {
    margin: 0 0 16px; padding: 0; font-size: 1.06rem; font-weight: 600;
    line-height: 1.45; color: var(--text, #111827); letter-spacing: -0.01em;
  }
  .mobile-essay-body .q-prompt .q-num { display: none; }
  .mobile-essay-body .reading-passage {
    flex: none; margin: 0 0 16px; padding: 16px; border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px; background: #fbfcfe;
  }
  .mobile-essay-body .reading-passage .passage-label {
    margin: 0 0 8px; color: #155eef; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .mobile-essay-body .essay-input {
    flex: 1; width: 100%; min-height: 160px; padding: 15px; border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 14px; font-size: 16px; line-height: 1.55; background: #fff; resize: none;
  }
  .mobile-essay-body .essay-input:focus { outline: none; border-color: var(--primary, #2563eb); }
  .mobile-essay-body .word-counter { flex: none; margin: 10px 2px 0; color: var(--text-dim, #64748b); font-size: 0.88rem; }
  .mobile-essay-body .word-counter.met { color: var(--success, #059669); font-weight: 650; }
  .mobile-essay-body .word-counter.under { color: #b45309; }
  .mobile-essay-body .exam-nav {
    flex: none; margin-top: auto; display: flex; align-items: center;
    gap: 12px; margin: 16px 0 0;
    padding: 14px 0 calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border, #e5e7eb); background: #fff;
  }
  .mobile-essay-body .exam-nav .btn { flex: 1; padding: 15px; border-radius: 14px; font-size: 1rem; font-weight: 700; }
  .mobile-essay-body .exam-nav .faint { display: none; }

  /* Speaking stage — style the reused exam recorder for phones. */
  .mobile-speak-body .exam-task { padding: 0; }
  .mobile-speak-body .q-prompt,
  .mobile-speak-body .q-prompt.big {
    margin: 0 0 20px; padding: 0; font-size: 1.28rem; font-weight: 750; line-height: 1.34;
    color: var(--text, #111827); letter-spacing: -0.01em;
  }
  .mobile-speak-body .q-prompt .q-num { display: none; }
  .mobile-speak-body .reading-passage {
    margin: 0 0 18px; padding: 16px; border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px; background: #fbfcfe; font-size: 1.02rem; line-height: 1.6;
  }
  .mobile-speak-body .recorder { display: flex; flex-direction: column; gap: 18px; }
  .mobile-speak-body .rec-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 20px; border: 1px solid var(--border, #e5e7eb); border-radius: 18px; background: #f8fafc;
  }
  .mobile-speak-body .rec-status { font-size: 1.05rem; font-weight: 700; }
  .mobile-speak-body .rec-status.rec { color: #be123c; }
  .mobile-speak-body .rec-status.prep { color: var(--primary-dark, #1d4ed8); }
  .mobile-speak-body .rec-status.done { color: var(--success, #059669); }
  .mobile-speak-body .rec-clock { font-size: 1.6rem; font-weight: 750; font-variant-numeric: tabular-nums; }
  .mobile-speak-body .recorder .btn,
  .mobile-speak-body .listening-clip .btn {
    width: 100%; padding: 16px; border-radius: 15px; font-size: 1.05rem; font-weight: 750;
  }
  .mobile-speak-body .ttsclip, .mobile-speak-body .listening-clip { margin: 0 0 6px; }
}

/* Mock section-break screen (centered directions). */
@media (max-width: 640px) {
  .mobile-break-body {
    display: flex; flex-direction: column; justify-content: center;
    text-align: center; padding-top: 0; padding-bottom: calc(140px + env(safe-area-inset-bottom));
  }
  .mobile-break-hero { margin: 0 auto 18px; }
  .mobile-break-title { font-size: 1.6rem; line-height: 1.2; }
  .mobile-break-copy { max-width: 340px; margin: 12px auto 0; }
  .mobile-break-screen .cal-skill-continue {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
   Support panel (js/support.js) — floating launcher + write-to-us box, injected
   on signed-in /app pages only. Desktop-only: hidden under 640px, where the
   mobile pages' fixed bottom action bar occupies this corner.
   --------------------------------------------------------------------------- */
.sup-root {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.sup-launcher {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary); color: #fff; box-shadow: 0 8px 24px var(--primary-glow);
  display: grid; place-items: center; transition: transform .15s ease, background .15s ease;
}
.sup-launcher svg { width: 26px; height: 26px; }
.sup-launcher:hover { background: var(--primary-dark); transform: translateY(-2px); }
.sup-launcher:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }

.sup-panel {
  width: 360px; max-width: calc(100vw - 48px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(17, 24, 39, .16); overflow: hidden;
}
.sup-panel[hidden] { display: none; }
.sup-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: var(--primary-soft); border-bottom: 1px solid var(--border);
}
.sup-head-copy { display: flex; flex-direction: column; }
.sup-head-copy b { font-size: 1rem; color: var(--text); }
.sup-head-copy small { color: var(--text-dim); }
.sup-x {
  border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
  padding: 4px; border-radius: var(--radius-sm); display: grid; place-items: center;
}
.sup-x svg { width: 18px; height: 18px; }
.sup-x:hover { background: rgba(17, 24, 39, .06); color: var(--text); }

.sup-body { padding: 16px; }
.sup-intro { margin: 0 0 12px; font-size: .875rem; color: var(--text-dim); line-height: 1.5; }
.sup-intro b { color: var(--text); overflow-wrap: anywhere; }
.sup-form { display: flex; flex-direction: column; gap: 10px; }
.sup-input {
  width: 100%; resize: vertical; min-height: 110px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: .9rem; color: var(--text); background: var(--surface);
}
.sup-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.sup-send { width: 100%; }
.sup-status { margin: 0; font-size: .825rem; color: var(--text-dim); }
.sup-status.err { color: var(--danger); }

.sup-done { text-align: center; padding: 8px 0 4px; }
.sup-done-icon { color: var(--success); display: block; margin: 0 auto 8px; }
.sup-done-icon svg { width: 34px; height: 34px; }
.sup-done b { display: block; color: var(--text); }
.sup-done p { margin: 6px 0 14px; font-size: .85rem; color: var(--text-dim); line-height: 1.5; overflow-wrap: anywhere; }
.sup-again { width: 100%; }

@media (max-width: 640px) { .sup-root { display: none; } }