:root {
  --navy: #0b2c4d;
  --navy-2: #123f6a;
  --blue: #1677b8;
  --sky: #eaf5fb;
  --paper: #ffffff;
  --ink: #15202b;
  --muted: #5e6c78;
  --line: #cdd6df;
  --soft: #f4f7fa;
  --green: #168447;
  --green-bg: #e8f7ee;
  --red: #c73535;
  --red-bg: #fdecec;
  --amber: #9a6700;
  --shadow: 0 18px 50px rgba(9, 35, 58, .14);
  --radius: 18px;
  font-family: Calibri, Aptos, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #edf3f7; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(30, 143, 200, .12), transparent 28rem),
    linear-gradient(180deg, #f7fbfd 0%, #edf3f7 100%);
}
button, select, input { font: inherit; }
button, select { touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid rgba(22, 119, 184, .32);
  outline-offset: 2px;
}
.hidden { display: none !important; }

.app-shell { min-height: 100vh; }
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px max(18px, env(safe-area-inset-left)) 12px max(18px, env(safe-area-inset-right));
  color: #fff;
  background: linear-gradient(110deg, var(--navy), var(--navy-2));
  box-shadow: 0 6px 24px rgba(5, 30, 50, .16);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .7px;
  background: rgba(255,255,255,.12);
}
.brand-copy { min-width: 0; }
.brand-copy h1 { margin: 0; font-size: clamp(1.05rem, 2.5vw, 1.45rem); line-height: 1.1; }
.brand-copy p { margin: 4px 0 0; color: #d8ecf8; font-size: .9rem; }
.app-header .icon-btn { margin-left: auto; }

main { width: min(1180px, calc(100% - 24px)); margin: 0 auto; padding: 26px 0 54px; }
.screen { animation: screenIn .28s ease-out; }
@keyframes screenIn { from { opacity: .25; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.welcome-screen { min-height: calc(100vh - 135px); display: grid; place-items: center; }
.welcome-card {
  width: min(720px, 100%);
  padding: clamp(26px, 5vw, 48px);
  text-align: center;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(112, 145, 169, .24);
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.eyebrow { color: var(--blue); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.welcome-card h2, .selector-head h2 { margin: 9px 0 10px; color: var(--navy); font-size: clamp(1.65rem, 4vw, 2.35rem); }
.lead { margin: 0 auto 26px; max-width: 610px; color: var(--muted); font-size: 1.05rem; line-height: 1.58; }
.start-select-label { display: block; margin-bottom: 8px; font-weight: 700; text-align: left; }
.start-select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid #aabac7;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}
.start-btn { width: 100%; margin-top: 16px; min-height: 58px; font-size: 1.08rem; }
.play-icon { margin-right: 8px; }
.start-note { margin: 15px 0 0; color: var(--muted); font-size: .88rem; }

.primary-btn, .secondary-btn, .ghost-btn, .icon-btn {
  border: 0;
  border-radius: 11px;
  min-height: 44px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.primary-btn { padding: 10px 18px; color: #fff; background: linear-gradient(135deg, #1167a1, #1688c8); font-weight: 800; box-shadow: 0 7px 16px rgba(19,105,158,.22); }
.secondary-btn { padding: 9px 14px; color: var(--navy); background: #eef5fa; border: 1px solid #c7d8e4; font-weight: 700; }
.ghost-btn { padding: 9px 13px; color: var(--navy); background: transparent; border: 1px solid #cbd6df; font-weight: 700; }
.ghost-btn.danger { color: #a52929; border-color: #e0b8b8; }
.ghost-btn.small { min-height: 38px; padding: 6px 11px; font-size: .86rem; }
.icon-btn { width: 46px; min-width: 46px; padding: 0; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); font-size: 1.35rem; }
.icon-btn.text-icon { color: var(--navy); background: #fff; border-color: #c9d6df; }
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0); }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.selector-screen { width: 100%; }
.selector-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #d9e2e9;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(14, 48, 74, .08);
}
.selector-head p { margin: 0; color: var(--muted); }
.overall-progress { min-width: 132px; padding: 12px 14px; text-align: center; border-radius: 14px; background: var(--sky); color: var(--navy); }
.overall-progress span { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1; }
.overall-progress small { display: block; margin-top: 4px; }
.selector-tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 16px 0; padding: 12px 14px; background: rgba(255,255,255,.72); border: 1px solid #d9e2e9; border-radius: 14px; }
.selector-tools label { font-weight: 700; }
.compact-select { min-height: 44px; padding: 0 38px 0 12px; border: 1px solid #bccbd6; border-radius: 10px; background: #fff; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 12px; }
.task-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 11px;
  align-items: center;
  min-height: 82px;
  padding: 12px;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d6e0e7;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(13, 46, 70, .055);
}
.task-card:hover { border-color: #9fc5dd; box-shadow: 0 8px 20px rgba(13, 64, 97, .10); }
.task-card-number { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #edf5fa; color: var(--navy); font-weight: 900; font-size: 1.08rem; }
.task-card-copy strong { display: block; line-height: 1.2; }
.task-card-score { display: block; margin-top: 6px; color: var(--muted); font-size: .82rem; }
.task-card.complete { border-color: #98cfaf; background: #fbfffc; }
.task-card.complete .task-card-number { color: #fff; background: var(--green); }
.task-card.started .task-card-number { color: #6d4d00; background: #fff3c4; }

.task-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.task-nav { display: flex; align-items: center; gap: 7px; }
.exam-paper {
  width: min(940px, 100%);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 48px);
  background: var(--paper);
  border: 1px solid #c9d1d8;
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.exam-head { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: start; gap: 10px; margin-bottom: 20px; }
.exam-part { font-weight: 900; letter-spacing: .04em; font-size: 1.02rem; }
.exam-title { text-align: center; font-weight: 900; letter-spacing: .03em; font-size: 1.07rem; }
.score-box { justify-self: end; display: flex; align-items: baseline; gap: 4px; min-width: 128px; padding: 10px 12px; border: 1.5px solid #1b1b1b; text-align: center; }
.score-box strong { font-size: 1.22rem; }
.score-box span { font-weight: 700; font-size: .92rem; }
.task-number-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 13px; color: var(--muted); font-size: .88rem; font-weight: 700; }
.completion-label { color: var(--navy); }
.instructions { margin: 0 auto 22px; max-width: 760px; text-align: center; line-height: 1.45; font-size: .96rem; }
.story-title { margin: 0 0 18px; text-align: center; color: #1b1b1b; font-size: 1.08rem; }
.story-text { font-family: Arial, Helvetica, sans-serif; font-size: clamp(.97rem, 1.5vw, 1.05rem); line-height: 2.15; text-align: left; }
.cue { white-space: nowrap; font-size: .82em; font-weight: 800; letter-spacing: .01em; color: #303942; }
.gap-wrap { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; vertical-align: baseline; margin: 0 1px; }
.gap-input {
  width: max(112px, var(--w));
  max-width: min(260px, 48vw);
  height: 35px;
  padding: 4px 8px 3px;
  color: #0f1a22;
  background: #fff;
  border: 0;
  border-bottom: 1.8px solid #58636b;
  border-radius: 6px 6px 2px 2px;
  outline: none;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.gap-input:focus { border-bottom-color: var(--blue); box-shadow: 0 2px 0 var(--blue); }
.gap-input.correct { color: #0c5f32; background: var(--green-bg); border-color: var(--green); box-shadow: inset 0 0 0 1px rgba(22,132,71,.18); font-weight: 700; }
.gap-input.incorrect { color: #8f2424; background: var(--red-bg); border-color: var(--red); box-shadow: inset 0 0 0 1px rgba(199,53,53,.15); }
.point-mark { display: inline-block; min-width: 34px; font-size: .73rem; font-weight: 800; color: #66737e; }
.gap-wrap.correct .point-mark { color: var(--green); }
.gap-wrap.incorrect .point-mark { color: var(--red); }
.example-answer { display: inline-block; min-width: 95px; padding: 0 8px 1px; text-align: center; font-style: italic; font-weight: 700; border-bottom: 1.8px solid #58636b; }
.example-tag { font-size: .72rem; color: var(--muted); font-weight: 700; }
.perfect-banner { margin: 28px auto 0; padding: 14px 16px; text-align: center; color: #0c6033; background: var(--green-bg); border: 1px solid #9fd2b2; border-radius: 12px; font-weight: 800; }
.task-bottom-actions { display: flex; justify-content: space-between; gap: 12px; width: min(940px, 100%); margin: 14px auto 0; }

.intro-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(5, 20, 32, .86); backdrop-filter: blur(8px); }
.intro-card { width: min(360px, 94vw); padding: 18px; text-align: center; background: #fff; border-radius: 20px; box-shadow: 0 28px 80px rgba(0,0,0,.34); }
.intro-video-frame { width: min(300px, 78vw); aspect-ratio: 1 / 1; margin: 0 auto; overflow: hidden; border-radius: 14px; background: #08a9d0; box-shadow: 0 7px 20px rgba(7, 62, 88, .18); }
.intro-video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-progress { height: 5px; margin: 14px 0 8px; overflow: hidden; background: #dde6ec; border-radius: 999px; }
.intro-progress span { display: block; width: 0%; height: 100%; background: var(--blue); transition: width .08s linear; }
.intro-status { margin: 7px 0 10px; color: var(--muted); font-size: .88rem; }
.intro-card button + button { margin-left: 6px; }

.toast { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 120; transform: translateX(-50%); padding: 11px 15px; color: #fff; background: rgba(11,44,77,.94); border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.2); font-weight: 700; }

@media (max-width: 700px) {
  main { width: min(100% - 14px, 1180px); padding-top: 12px; }
  .app-header { min-height: 66px; padding-top: max(9px, env(safe-area-inset-top)); }
  .brand-mark { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; font-size: .9rem; }
  .brand-copy p { display: none; }
  .welcome-card { border-radius: 18px; padding: 24px 18px; }
  .selector-head { align-items: flex-start; padding: 18px; }
  .overall-progress { min-width: 104px; }
  .selector-tools { align-items: stretch; }
  .selector-tools label { width: 100%; }
  .selector-tools .compact-select { flex: 1 1 130px; }
  .task-grid { grid-template-columns: 1fr; }
  .task-toolbar { align-items: stretch; flex-direction: column; }
  .task-nav { width: 100%; }
  .task-nav .compact-select { flex: 1; min-width: 0; }
  .exam-paper { padding: 20px 14px 26px; border-radius: 4px; }
  .exam-head { grid-template-columns: 1fr 1fr; }
  .exam-title { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4px; }
  .exam-part { grid-column: 1; grid-row: 2; }
  .score-box { grid-column: 2; grid-row: 2; min-width: 116px; }
  .instructions { font-size: .88rem; }
  .story-text { line-height: 2.25; }
  .gap-wrap { max-width: 100%; white-space: normal; flex-wrap: wrap; row-gap: 2px; }
  .gap-wrap .cue { white-space: normal; overflow-wrap: anywhere; }
  .gap-input { max-width: 44vw; min-width: 105px; }
  .point-mark { min-width: 27px; }
  .task-bottom-actions { flex-direction: column-reverse; }
  .task-bottom-actions button { width: 100%; }
}

@media (max-width: 430px) {
  .selector-head { flex-direction: column; }
  .overall-progress { width: 100%; display: flex; justify-content: center; align-items: baseline; gap: 5px; }
  .overall-progress span { display: inline; }
  .overall-progress small { display: inline; }
  .story-text { font-size: .95rem; line-height: 2.32; }
  .cue { font-size: .78em; }
  .gap-input { width: max(100px, var(--w)); max-width: 42vw; }
  .score-box { padding: 8px; }
}

@media print {
  body { background: #fff; }
  .app-header, .task-toolbar, .task-bottom-actions, .perfect-banner { display: none !important; }
  main { width: 100%; padding: 0; }
  .exam-paper { width: 100%; box-shadow: none; border: 0; padding: 18mm 15mm; }
}

/* M10 exam-style refinements */
.story-text { line-height: 2.25; }
.gap-wrap { margin-inline: 3px; }
@media (max-width: 620px) {
  .story-text { line-height: 2.05; font-size: .98rem; }
  .gap-wrap { max-width: 100%; flex-wrap: wrap; white-space: normal; gap: 3px 5px; vertical-align: middle; }
  .gap-input { max-width: 68vw; min-width: 126px; }
  .cue { white-space: nowrap; }
  .point-mark { min-width: 30px; }
}

.word-bank{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 0;margin:14px auto 7px;padding:12px 14px;max-width:880px;border:1.5px solid #222;background:#fff;line-height:1.45}.bank-option{appearance:none;border:0;background:transparent;padding:2px 4px;color:#111;font-weight:700;cursor:pointer;border-radius:5px;line-height:1.25}.bank-option::after{content:' ◆';font-size:.68em;vertical-align:.12em;margin-left:5px}.bank-option:last-child::after{content:''}.bank-option:hover,.bank-option.selected{background:#eaf5fb;color:#075b8c;outline:1px solid #89bddb}.bank-option.example-used{opacity:.68;text-decoration:line-through;text-decoration-thickness:2px;background:#eee;cursor:default}.bank-option.used-correct{color:#0c6937;background:#e9f8ef;text-decoration:line-through}.bank-hint{margin:4px auto 0;max-width:880px;text-align:center;color:#667785;font-size:.76rem}.gap-number{font-size:.82em;font-weight:800;color:#303942}.example-number{font-size:.82em;font-weight:800}.example-answer{display:inline-block;min-width:108px;padding:0 8px 1px;text-align:center;font-style:italic;font-weight:800;border-bottom:1.8px solid #58636b;background:#f2f2f2}@media(max-width:700px){.word-bank{justify-content:flex-start;padding:9px 7px}.bank-option{font-size:.82rem}.bank-hint{font-size:.7rem}}