/* =============================================================================
   Band 7 Lab — the sliding exam surface (lab.css)
   "Warmed-up CD-IELTS": authentic IELTS-blue/grey exam shell (familiar, trusted)
   + smooth right-to-left frame slides + one alive score reveal. Feels like the
   real computer-delivered test, but wants you back.
   ============================================================================= */
:root{
  --cd-blue:#003057;        /* official IELTS dark blue */
  --cd-blue-2:#001f3a;
  --cd-blue-soft:#0a456f;
  --cd-bg:#eef1f4;          /* exam page grey, a touch warmer/brighter than f4f4f4 */
  --cd-panel:#ffffff;
  --cd-bg-soft:#e3e8ec;
  --cd-text:#2a2f36;
  --cd-muted:#5a6470;
  --cd-faint:#8a93a0;
  --cd-line:#cdd4db;
  --cd-line-strong:#aab2bc;
  --cd-accent:#0a9ec2;      /* the ONE accent — bright cyan, for "next" actions */
  --cd-accent-ink:#063a48;
  --cd-go:#1f9d57;          /* submit green, like the real Start button */
  --cd-go-2:#177a43;
  --cd-warn:#b87800;
  --cd-danger:#cf2e2e;
  --cd-good:#1f9d57;
  --cd-sans: Arial, Helvetica, "Liberation Sans", sans-serif;
  --cd-serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --bar-h:46px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--cd-blue-2); color:var(--cd-text);
  font-family:var(--cd-sans); -webkit-font-smoothing:antialiased;
  overflow:hidden;          /* the surface owns the screen */
}
button{font-family:inherit; cursor:pointer; color:inherit}
:focus-visible{outline:3px solid var(--cd-accent); outline-offset:2px}

/* ---- top bar (the exam chrome) ----------------------------------------- */
.exbar{
  position:fixed; top:0; left:0; right:0; height:var(--bar-h); z-index:40;
  display:flex; align-items:center; gap:14px;
  background:var(--cd-blue); color:#fff;
  padding:0 14px; border-bottom:2px solid var(--cd-blue-2);
}
.exbar-logo{display:flex; align-items:center; height:100%; cursor:pointer; border-radius:6px}
.exbar-logo:hover{opacity:.85}
.exbar-logo svg{height:22px; width:auto}
.exbar-title{font-size:14px; font-weight:700; letter-spacing:.2px; white-space:nowrap}
.exbar-sep{width:1px; height:22px; background:rgba(255,255,255,.25)}
.exbar-spacer{flex:1}
.exbar-step{display:flex; align-items:center; gap:7px; font-size:12.5px; color:#bcd4e6}
.exbar-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); transition:background .3s}
.exbar-dot.on{background:var(--cd-accent)}
/* inline destination buttons — the ONE nav, ALWAYS visible (labels on desktop, icons on mobile) */
.exbar-nav{display:flex; gap:3px}
.exbar-link{display:flex; align-items:center; gap:6px; background:transparent; border:1px solid transparent;
  color:#dbe9f4; border-radius:7px; padding:6px 10px; font-size:13px; font-weight:600; white-space:nowrap}
.exbar-link .ei{font-size:16px; line-height:1}
.exbar-link:hover{background:rgba(255,255,255,.12); color:#fff}
@media(max-width:780px){
  .exbar-title, .exbar-sep, .exbar-step{display:none}   /* free up room on phones */
  .exbar-link{padding:7px 9px}
  .exbar-link .el{display:none}                          /* icon-only on mobile */
}

/* ---- the sliding viewport --------------------------------------------- */
.viewport{position:fixed; top:var(--bar-h); left:0; right:0; bottom:0; overflow:hidden; background:var(--cd-bg)}
.frames{display:flex; height:100%; width:100%;
  transition:transform .44s cubic-bezier(.66,0,.2,1)}
.frame{flex:0 0 100%; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch}
@media (prefers-reduced-motion: reduce){
  .frames,.pp,.wb,.scrim,.exbar-dot{transition:none}
  .sc-band,.lmodal,.lmodal-scrim{animation:none}
  .sc-band{opacity:1; transform:none}
  .sc-meter>i{transition:width .01ms}
  /* .spin (marking status) intentionally keeps animating — it conveys progress */
}

/* =======================================================================
   FRAME 1 — WRITE (the exam writing screen)
   ======================================================================= */
.wr{display:flex; flex-direction:column; height:100%}
.wr-rubric{
  background:var(--cd-bg-soft); border-bottom:1px solid var(--cd-line);
  padding:8px 16px; font-size:13px; color:var(--cd-muted); display:flex; align-items:center; gap:12px;
}
.wr-rubric b{color:var(--cd-text)}
.wr-change{margin-left:auto; background:#fff; border:1px solid var(--cd-line-strong);
  border-radius:6px; padding:5px 11px; font-size:12.5px; color:var(--cd-blue); font-weight:700}
.wr-change:hover{background:var(--cd-bg)}
.wr-body{flex:1; display:grid; grid-template-columns:1fr 1fr; min-height:0}
.wr-q{background:#fff; border-right:1px solid var(--cd-line); padding:22px 24px; overflow-y:auto}
.wr-q-label{font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--cd-faint); font-weight:700; margin-bottom:10px}
.wr-q-text{font-family:var(--cd-serif); font-size:17px; line-height:1.6; color:var(--cd-text); max-width:62ch}
.wr-brag{margin-top:18px; padding-top:14px; border-top:1px dashed var(--cd-line);
  font-size:13px; color:var(--cd-muted); line-height:1.55}
.wr-brag b{color:var(--cd-blue)}

/* Task 1/2 toggle */
.tt-toggle{display:inline-flex; background:#fff; border:1px solid var(--cd-line-strong); border-radius:8px; overflow:hidden}
.tt-btn{background:#fff; border:none; padding:6px 13px; font-size:12.5px; font-weight:700; color:var(--cd-muted)}
.tt-btn.on{background:var(--cd-blue); color:#fff}
.wr-rubric-txt{font-size:13px; color:var(--cd-muted)}

/* Task 1 chart in the question panel */
.wr-chart{margin-top:16px; padding-top:14px; border-top:1px dashed var(--cd-line)}
.wr-chart .chart-svg{display:block; width:100%; height:auto; max-width:460px; margin:0 auto}
.wr-chart .chart-svg text{fill:var(--cd-muted)}
.wr-chart .chart-legend{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:8px; font-size:12px; color:var(--cd-muted)}
.wr-chart .legend-dot{width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px}
.wr-chart .data-table{width:100%; border-collapse:collapse; font-size:13px}
.wr-chart .data-table th{background:#e8edf5; color:var(--cd-text); border:1px solid var(--cd-line); padding:7px 9px; text-align:center}
.wr-chart .data-table td{border:1px solid var(--cd-line); padding:7px 9px; text-align:center; color:var(--cd-text)}
.wr-chart .data-table td:first-child, .wr-chart .data-table th:first-child{text-align:left}
.wr-chart .proc-steps{display:flex; flex-direction:column; gap:8px}
.wr-chart .proc-step{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--cd-text)}
.wr-chart .proc-num{flex:none; width:22px; height:22px; border-radius:50%; background:var(--cd-blue); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:700}
.wr-chart .proc-cyclic{font-size:12px; color:var(--cd-blue-2); text-align:center; margin-top:8px}
.wr-ans-wrap{background:#fff; padding:0; display:flex; flex-direction:column; min-height:0}
.wr-ans{flex:1; width:100%; border:none; resize:none; padding:22px 24px;
  font-family:var(--cd-serif); font-size:16px; line-height:1.75; color:var(--cd-text);
  background:#fff; transition:opacity .4s ease, filter .4s ease}
.wr-ans:focus{outline:none}
.wr-ans::placeholder{color:#aeb6c0}
.wr-ans.locked{opacity:.45; filter:grayscale(.4); background:var(--cd-bg); cursor:not-allowed}

/* ---- Pre-Flight Protocol (locked brainstorming canvas) ----------------- */
.preflight{overflow:hidden; padding:24px 24px 18px; border-bottom:1px solid var(--cd-line);
  background:linear-gradient(180deg,#fff, var(--cd-bg)); max-height:560px; opacity:1;
  transition:max-height .38s cubic-bezier(.66,0,.2,1), opacity .3s ease, padding .38s ease}
.preflight.collapsed{max-height:0; opacity:0; padding-top:0; padding-bottom:0; border-bottom-color:transparent}
.pf-k{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cd-accent-ink); background:rgba(10,158,194,.12); border-radius:99px; padding:4px 12px}
.pf-title{font-size:18px; font-weight:800; color:var(--cd-blue); margin:12px 0 4px; letter-spacing:-.01em}
.pf-sub{font-size:13px; color:var(--cd-muted); line-height:1.55; margin:0 0 16px; max-width:52ch}
.pf-grid{display:grid; gap:10px}
.pf-field{display:grid; grid-template-columns:74px 1fr; align-items:center; gap:12px}
.pf-field>span{font-size:12px; font-weight:800; color:var(--cd-blue); text-align:right; letter-spacing:.02em}
.pf-in{border:1px solid var(--cd-line-strong); border-radius:8px; padding:10px 13px; font-size:14px;
  font-family:var(--cd-sans); color:var(--cd-text); background:#fff; transition:border-color .12s, box-shadow .12s}
.pf-in:focus{outline:none; border-color:var(--cd-accent); box-shadow:0 0 0 3px rgba(10,158,194,.15)}
.pf-in:not(:placeholder-shown){border-color:var(--cd-good); background:rgba(31,157,87,.04)}
.pf-foot{display:flex; align-items:center; gap:12px; margin-top:14px}
.pf-prog{font-size:12px; font-weight:800; color:var(--cd-blue); font-variant-numeric:tabular-nums}
.pf-hint{font-size:12px; color:var(--cd-faint)}
.pf-done{margin-left:auto; background:var(--cd-go); color:#fff; border:none; border-radius:7px;
  padding:8px 16px; font-size:13px; font-weight:800; cursor:pointer}
.pf-done:hover{background:#23ab60}
.pf-skip{display:inline-block; margin-top:14px; font-size:12.5px; color:var(--cd-faint);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer; transition:color .12s}
.pf-skip:hover{color:var(--cd-blue)}

/* ---- sticky reference outline ------------------------------------------ */
.outline{flex:none; background:var(--cd-bg); border-bottom:1px solid var(--cd-line); padding:12px 18px}
.outline-h{display:flex; align-items:center; margin-bottom:8px}
.outline-t{font-size:12px; font-weight:800; color:var(--cd-blue); letter-spacing:.02em}
.outline-edit{margin-left:auto; background:none; border:none; color:var(--cd-accent-ink); font-size:12px; font-weight:700; cursor:pointer; text-decoration:underline}
.outline-edit:hover{color:var(--cd-blue)}
.outline-list{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.outline-list li{display:grid; grid-template-columns:66px 1fr; gap:10px; font-size:12.5px; line-height:1.45}
.ol-k{font-weight:800; color:var(--cd-muted); text-transform:uppercase; font-size:10.5px; letter-spacing:.04em; padding-top:1px}
.ol-v{color:var(--cd-text)}

/* ---- Focus Mode (Revise screen — anti-overload) ------------------------ */
.rv-focus-bar{display:flex; align-items:center; gap:12px; background:var(--cd-bg); border:1px solid var(--cd-line);
  border-radius:10px; padding:11px 14px; margin-bottom:14px}
.rv-focus-lbl{display:flex; flex-direction:column; line-height:1.2}
.rv-focus-lbl b{font-size:14px; color:var(--cd-text)}
.rv-focus-sub{font-size:11.5px; color:var(--cd-muted)}
.focus-toggle{margin-left:auto; flex:none; width:46px; height:26px; border-radius:99px; border:none;
  background:var(--cd-line-strong); position:relative; cursor:pointer; transition:background .2s}
.focus-toggle.on{background:var(--cd-accent)}
.ft-knob{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff;
  transition:left .2s cubic-bezier(.66,0,.2,1); box-shadow:0 1px 3px rgba(0,20,40,.3)}
.focus-toggle.on .ft-knob{left:23px}
.focus-card{background:#fff; border:1px solid var(--cd-line); border-left:4px solid var(--cd-accent);
  border-radius:10px; padding:16px 18px}
.focus-action{font-size:15px; line-height:1.5; color:var(--cd-text); margin-bottom:12px}
.focus-action b{color:var(--cd-blue)}
.focus-how{font-size:13.5px; color:var(--cd-text); line-height:1.55; margin-top:8px}
.focus-eg{font-family:var(--cd-serif); font-size:13.5px; color:var(--cd-muted); line-height:1.55; margin-top:6px}
.wr-foot{display:flex; align-items:center; gap:14px;
  background:var(--cd-bg-soft); border-top:1px solid var(--cd-line); padding:9px 16px}
.wr-words{font-size:13px; color:var(--cd-muted); font-variant-numeric:tabular-nums}
.wr-words b{color:var(--cd-text); font-weight:700}
.wr-words.short b{color:var(--cd-warn)}
.wr-submit{margin-left:auto; background:var(--cd-go); color:#fff; border:none;
  border-radius:7px; padding:11px 26px; font-size:15px; font-weight:800; letter-spacing:.2px;
  box-shadow:0 3px 0 var(--cd-go-2); transition:transform .08s, background .12s}
.wr-submit:hover:not(:disabled){background:#23ab60}
.wr-submit:active:not(:disabled){transform:translateY(3px); box-shadow:0 0 0 var(--cd-go-2)}
.wr-submit:disabled{opacity:.45; cursor:not-allowed; box-shadow:0 3px 0 var(--cd-go-2)}
@media(max-width:760px){
  .wr-body{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .wr-q{border-right:none; border-bottom:1px solid var(--cd-line); max-height:38vh}
}

/* ---- marking overlay --------------------------------------------------- */
.marking{position:absolute; inset:0; background:rgba(238,241,244,.92); z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  text-align:center; padding:30px}
.marking[hidden]{display:none}
.spin{width:46px; height:46px; border-radius:50%;
  border:4px solid var(--cd-line); border-top-color:var(--cd-accent); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.marking-main{font-size:18px; font-weight:800; color:var(--cd-blue)}
.marking-step{font-size:14px; color:var(--cd-muted); min-height:1.4em}

/* =======================================================================
   FRAME 2 — SCORE (the band reveal)
   ======================================================================= */
.sc{min-height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:40px 20px; background:
   radial-gradient(120% 80% at 50% 0%, #ffffff 0%, var(--cd-bg) 60%)}
.sc-in{width:100%; max-width:680px; text-align:center}
.sc-kicker{font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--cd-faint); font-weight:700}
.sc-band{font-size:96px; font-weight:800; line-height:1; color:var(--cd-blue);
  letter-spacing:-2px; margin:6px 0 2px; font-variant-numeric:tabular-nums;
  opacity:0; transform:scale(.7); animation:bandpop .6s cubic-bezier(.2,1.4,.4,1) .15s forwards}
@keyframes bandpop{to{opacity:1; transform:scale(1)}}
.sc-band small{font-size:26px; font-weight:700; color:var(--cd-muted); letter-spacing:0}
.sc-sub{font-size:15px; color:var(--cd-muted); max-width:46ch; margin:2px auto 24px; line-height:1.55}
.sc-crits{display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left; margin-bottom:14px}
.sc-crit{background:#fff; border:1px solid var(--cd-line); border-radius:10px; padding:13px 15px}
.sc-crit-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.sc-crit-name{font-size:13px; color:var(--cd-muted); font-weight:600}
.sc-crit-band{font-size:22px; font-weight:800; color:var(--cd-blue); font-variant-numeric:tabular-nums}
.sc-meter{height:7px; border-radius:99px; background:var(--cd-bg-soft); margin-top:9px; overflow:hidden}
.sc-meter>i{display:block; height:100%; background:linear-gradient(90deg,#0a9ec2,#003057);
  width:0; transition:width .8s cubic-bezier(.2,.8,.2,1) .4s}
.sc-brag{font-size:12.5px; color:var(--cd-faint); margin:6px 0 20px}
.sc-brag b{color:var(--cd-muted)}
.sc-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.btn-next{background:var(--cd-accent); color:#fff; border:none; border-radius:8px;
  padding:13px 26px; font-size:15px; font-weight:800;
  box-shadow:0 3px 0 #07798f; transition:transform .08s, background .12s}
.btn-next:hover{background:#0bb0d8}
.btn-next:active{transform:translateY(3px); box-shadow:0 0 0 #07798f}
.btn-ghost-cd{background:#fff; color:var(--cd-blue); border:1px solid var(--cd-line-strong);
  border-radius:8px; padding:13px 22px; font-size:14px; font-weight:700}
.btn-ghost-cd:hover{background:var(--cd-bg)}
@media(max-width:620px){ .sc-crits{grid-template-columns:1fr} .sc-band{font-size:74px} }

/* =======================================================================
   FRAME 3 — REVISE (essay + highlights + practise rail)
   ======================================================================= */
.rv{display:grid; grid-template-columns:1fr 320px; gap:0; min-height:100%}
.rv-main{padding:24px 28px; overflow-y:auto; background:var(--cd-bg)}
.rv-rail{background:#fff; border-left:1px solid var(--cd-line); padding:22px 20px; overflow-y:auto}
.rv-h{font-size:13px; letter-spacing:.5px; text-transform:uppercase; color:var(--cd-faint); font-weight:700; margin:0 0 12px}
.rv-essay{background:#fff; border:1px solid var(--cd-line); border-radius:12px;
  padding:24px 26px; font-family:var(--cd-serif); font-size:16px; line-height:1.9;
  color:var(--cd-text); white-space:pre-wrap}
.rv-essay mark{background:rgba(207,46,46,.14); border-bottom:2px solid #cf2e2e;
  border-radius:3px; padding:0 1px; cursor:pointer; transition:background .12s}
.rv-essay mark:hover, .rv-essay mark.active{background:rgba(207,46,46,.28)}
.rv-hint{font-size:12.5px; color:var(--cd-faint); margin:10px 2px 0}

/* fix popcards under the essay */
.rv-fixes{margin-top:22px}
.fixcard{background:#fff; border:1px solid var(--cd-line); border-left:4px solid var(--cd-accent);
  border-radius:10px; padding:14px 16px; margin-bottom:12px; scroll-margin-top:16px}
.fixcard.active{box-shadow:0 0 0 2px var(--cd-accent)}
.fixcard-tag{display:inline-block; font-size:10.5px; letter-spacing:.4px; text-transform:uppercase;
  font-weight:700; color:var(--cd-accent); background:rgba(10,158,194,.12);
  border:1px solid rgba(10,158,194,.28); border-radius:99px; padding:2px 9px; margin-bottom:9px}
.fix-before{font-family:var(--cd-serif); color:var(--cd-danger); text-decoration:line-through;
  text-decoration-color:rgba(207,46,46,.5); font-size:14.5px}
.fix-after{font-family:var(--cd-serif); color:var(--cd-good); font-size:14.5px; margin-top:6px}
.fix-why{font-size:12.5px; color:var(--cd-muted); margin-top:8px; line-height:1.5}

/* practise rail */
.rv-summary{background:var(--cd-bg); border:1px solid var(--cd-line); border-radius:10px;
  padding:13px 14px; font-size:13.5px; line-height:1.6; color:var(--cd-text); margin-bottom:18px}
.rv-summary b{color:var(--cd-blue)}
.prac{display:flex; flex-direction:column; gap:8px}
.prac-item{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:#fff; border:1px solid var(--cd-line); border-radius:10px; padding:12px 13px;
  transition:transform .1s, border-color .12s}
.prac-item:hover{transform:translateX(3px); border-color:var(--cd-accent)}
.prac-ic{width:34px; height:34px; flex:none; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:17px; background:var(--cd-bg)}
.prac-tx{flex:1; min-width:0}
.prac-name{display:block; font-size:14px; font-weight:700; color:var(--cd-text)}
.prac-meta{display:block; font-size:12px; color:var(--cd-muted); margin-top:1px}
.prac-cnt{flex:none; font-size:11px; font-weight:800; color:#fff; background:var(--cd-accent);
  border-radius:99px; padding:2px 8px; min-width:22px; text-align:center}
.prac-cnt.zero{background:var(--cd-good)}
.rv-actions{margin-top:20px; display:flex; gap:10px; flex-wrap:wrap}
@media(max-width:860px){
  .rv{grid-template-columns:1fr}
  .rv-rail{border-left:none; border-top:1px solid var(--cd-line)}
}

/* =======================================================================
   PRACTISE panel (slides in over revise) — grammar/spelling/intro/etc.
   ======================================================================= */
.pp{position:fixed; top:var(--bar-h); right:0; bottom:0; width:min(460px,92vw); z-index:45;
  background:#fff; border-left:1px solid var(--cd-line); box-shadow:-12px 0 40px rgba(0,20,40,.20);
  transform:translateX(100%); transition:transform .36s cubic-bezier(.66,0,.2,1);
  display:flex; flex-direction:column}
.pp.open{transform:translateX(0)}
.pp-head{display:flex; align-items:center; gap:12px; background:var(--cd-blue); color:#fff; padding:14px 18px}
.pp-head .pp-ic{font-size:20px}
.pp-head h3{margin:0; font-size:16px; font-weight:700}
.pp-close{margin-left:auto; background:transparent; border:none; color:#fff; font-size:20px; line-height:1}
.pp-body{flex:1; overflow-y:auto; padding:18px 20px}
.pp-lead{font-size:14px; line-height:1.6; color:var(--cd-text); margin:0 0 16px}
.pp-lead b{color:var(--cd-blue)}
.pp-row{border:1px solid var(--cd-line); border-radius:9px; padding:11px 13px; margin-bottom:10px; font-size:13.5px; line-height:1.55}
.pp-row .pp-wrong{color:var(--cd-danger); font-weight:700}
.pp-row .pp-right{color:var(--cd-good); font-weight:700}
.pp-row .pp-ctx{color:var(--cd-muted); font-style:italic; margin-top:4px; font-size:12.5px}
.pp-tip{background:var(--cd-bg); border-radius:9px; padding:12px 14px; font-size:13px; line-height:1.6; color:var(--cd-text)}
.pp-tip b{color:var(--cd-blue)}
.pp-empty{color:var(--cd-muted); font-size:13.5px; text-align:center; padding:24px 10px}
.scrim{position:fixed; inset:var(--bar-h) 0 0 0; background:rgba(0,20,40,.28); z-index:44; opacity:0; transition:opacity .3s}
.scrim[hidden]{display:none}
.scrim.show{opacity:1}

/* =======================================================================
   WORD BANK ("treasure") — full overlay, slides up
   ======================================================================= */
.wb{position:fixed; top:var(--bar-h); left:0; right:0; bottom:0; z-index:48; background:var(--cd-bg);
  transform:translateY(100%); transition:transform .4s cubic-bezier(.66,0,.2,1);
  display:flex; flex-direction:column}
.wb.open{transform:translateY(0)}
.wb-head{display:flex; align-items:center; gap:11px; background:var(--cd-blue); color:#fff; padding:13px 18px}
.wb-head h2{margin:0; font-size:17px; font-weight:700}
.wb-ic{font-size:21px}
.wb-prog{margin-left:6px; font-size:12px; color:#9fc0d8; font-weight:600}
.wb-close{margin-left:auto; background:transparent; border:none; color:#fff; font-size:21px; line-height:1}
.wb-tabs{display:flex; gap:2px; background:#fff; border-bottom:1px solid var(--cd-line); padding:0 12px; flex:none}
.wb-tab{background:none; border:none; padding:13px 15px; font-size:13.5px; font-weight:700; color:var(--cd-muted);
  border-bottom:3px solid transparent; margin-bottom:-1px}
.wb-tab.on{color:var(--cd-blue); border-bottom-color:var(--cd-accent)}
.wb-body{flex:1; overflow-y:auto; padding:20px 18px 50px}
.wb-inner{max-width:820px; margin:0 auto}
.wb-intro{font-size:13.5px; color:var(--cd-muted); line-height:1.6; margin:0 0 18px}
.wb-intro b{color:var(--cd-blue)}
.wb-sub{font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--cd-faint); font-weight:700; margin:20px 0 9px}

/* topic banks */
.tbank{background:#fff; border:1px solid var(--cd-line); border-radius:12px; margin-bottom:11px; overflow:hidden}
.tbank.locked{opacity:.92}
.tbank-head{display:flex; align-items:center; gap:13px; padding:15px 16px; cursor:pointer; width:100%; text-align:left; background:none; border:none}
.tbank-head:hover{background:var(--cd-bg)}
.tbank-ic{font-size:23px; flex:none}
.tbank-tt{flex:1; min-width:0}
.tbank-name{font-size:15px; font-weight:800; color:var(--cd-text)}
.tbank-blurb{font-size:12.5px; color:var(--cd-muted); margin-top:2px}
.tbank-state{font-size:11.5px; font-weight:700; flex:none; display:flex; align-items:center; gap:5px}
.tbank-state.lock{color:var(--cd-faint)}
.tbank-state.open{color:var(--cd-good)}
.tbank-body{padding:4px 16px 18px; border-top:1px solid var(--cd-line)}
.tbank-locked-msg{padding:0 16px 16px; font-size:13px; color:var(--cd-muted)}
.tbank-locked-msg b{color:var(--cd-blue)}

.colist{margin:6px 0 0}
.co{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; padding:8px 0; border-bottom:1px solid var(--cd-bg-soft)}
.co:last-child{border-bottom:none}
.co b{color:var(--cd-blue); font-size:14.5px; cursor:pointer}
.co b:hover{text-decoration:underline}
.co span{color:var(--cd-muted); font-size:12.5px}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:4px}
.chip{background:var(--cd-bg); border:1px solid var(--cd-line); border-radius:99px; padding:4px 12px; font-size:13.5px; color:var(--cd-text); cursor:pointer}
.chip:hover{border-color:var(--cd-accent); color:var(--cd-blue)}
.sentlist{margin:6px 0 0; padding:0; list-style:none}
.sentlist li{font-family:var(--cd-serif); font-size:14.5px; line-height:1.55; color:var(--cd-text);
  padding:9px 12px; background:var(--cd-bg); border-radius:8px; margin-bottom:7px; cursor:pointer}
.sentlist li:hover{background:#e7f6fb}

/* my words */
.mw{background:#fff; border:1px solid var(--cd-line); border-radius:10px; padding:12px 14px; margin-bottom:9px; font-size:14px}
.mw .mw-wrong{color:var(--cd-danger); font-weight:700; text-decoration:line-through; text-decoration-color:rgba(207,46,46,.5)}
.mw .mw-right{color:var(--cd-good); font-weight:700}
.mw .mw-tag{display:inline-block; font-size:10px; letter-spacing:.4px; text-transform:uppercase; font-weight:700;
  color:var(--cd-accent); background:rgba(10,158,194,.12); border-radius:99px; padding:1px 8px; margin-bottom:6px}
.mw .mw-ctx{color:var(--cd-muted); font-size:12px; font-style:italic; margin-top:4px}
.wb-empty{text-align:center; color:var(--cd-muted); font-size:14px; line-height:1.6; padding:40px 16px}
.wb-empty .em-ic{font-size:34px; display:block; margin-bottom:10px}

/* phrases */
.pgroup{background:#fff; border:1px solid var(--cd-line); border-radius:11px; padding:14px 15px; margin-bottom:11px}
.pgroup-h{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:800; color:var(--cd-blue); margin-bottom:9px}

/* =======================================================================
   MODALS — question chooser + email unlock
   ======================================================================= */
.lmodal-scrim{position:fixed; inset:0; z-index:55; background:rgba(0,20,40,.45);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:scrimfade .2s ease}
.lmodal-scrim[hidden]{display:none}
@keyframes scrimfade{from{opacity:0} to{opacity:1}}
.lmodal{background:#fff; border-radius:14px; width:100%; max-width:460px; overflow:hidden;
  display:flex; flex-direction:column; max-height:88vh;
  box-shadow:0 24px 60px rgba(0,20,40,.4); animation:popin .22s ease}
.lmodal .lmodal-body{overflow-y:auto}
.legal p{font-size:13px; line-height:1.6; color:var(--cd-text); margin:0 0 10px}
.legal a{color:var(--cd-accent)}
.wr-legal{margin-top:14px; font-size:12px; color:var(--cd-faint)}
.wr-legal a{color:var(--cd-muted); text-decoration:underline; cursor:pointer}
.wr-legal a:hover{color:var(--cd-blue)}
@keyframes popin{from{transform:scale(.95); opacity:0} to{transform:scale(1); opacity:1}}
.lmodal-head{display:flex; align-items:center; background:var(--cd-blue); color:#fff; padding:13px 18px}
.lmodal-head h3{margin:0; font-size:16px; font-weight:700}
.lmodal-x{margin-left:auto; background:transparent; border:none; color:#fff; font-size:19px; line-height:1}
.lmodal-body{padding:18px 18px 20px}
.lmodal-lead{font-size:13.5px; color:var(--cd-muted); line-height:1.6; margin:0 0 14px}
.lmodal-lead b{color:var(--cd-blue)}
.lmodal-input{width:100%; border:1px solid var(--cd-line-strong); border-radius:9px; padding:11px 13px;
  font-size:15px; font-family:var(--cd-sans); color:var(--cd-text)}
.lmodal-input:focus{outline:none; border-color:var(--cd-accent)}
.lmodal-msg{font-size:13px; margin:10px 0 0}
.lmodal-msg.err{color:var(--cd-danger)} .lmodal-msg.ok{color:var(--cd-good)}
.qopt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff;
  border:1px solid var(--cd-line); border-radius:11px; padding:13px 14px; margin-bottom:9px;
  transition:border-color .12s, transform .1s}
.qopt:hover{border-color:var(--cd-accent); transform:translateY(-1px)}
.qopt-tt{flex:1; min-width:0}
.qopt-tt b{display:block; font-size:14.5px; color:var(--cd-text)}
.qopt-tt span{display:block; font-size:12px; color:var(--cd-muted); margin-top:2px}
.qopt-tag{flex:none; font-size:11px; font-weight:800; border-radius:99px; padding:3px 10px}
.qopt-tag.free{color:var(--cd-go); background:rgba(31,157,87,.12)}
.qopt-tag.lock{color:var(--cd-muted); background:var(--cd-bg)}

/* account modal */
.auth-google{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; background:#fff;
  color:#1f2330; border:1px solid var(--cd-line-strong); border-radius:9px; padding:11px 14px; font-size:14.5px; font-weight:700}
.auth-google:hover{background:var(--cd-bg)}
.auth-g{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
  background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0 100%); color:#fff; font-size:11px; font-weight:800}
.auth-or{text-align:center; font-size:12px; color:var(--cd-faint); margin:14px 0 10px; position:relative}
.auth-field{display:block; font-size:12.5px; font-weight:700; color:var(--cd-text); margin:10px 0 5px}
.auth-row{display:flex; gap:8px; margin-top:14px}
.auth-row .btn-ghost-cd, .auth-row .btn-next{flex:1}
.auth-signed{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--cd-text); margin-bottom:6px}
.auth-signed .au-dot{width:34px;height:34px;border-radius:50%;background:var(--cd-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}

/* learn lessons */
.ln-item{display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:#fff;
  border:1px solid var(--cd-line); border-radius:12px; padding:15px 16px; margin-bottom:10px;
  transition:transform .1s, border-color .12s}
.ln-item:hover{transform:translateX(3px); border-color:var(--cd-accent)}
.ln-ic{font-size:23px; flex:none}
.ln-tt{flex:1; min-width:0}
.ln-name{display:block; font-size:15px; font-weight:800; color:var(--cd-text)}
.ln-sum{display:block; font-size:12.5px; color:var(--cd-muted); margin-top:2px}
.ln-go{flex:none; color:var(--cd-accent); font-weight:800; font-size:18px}
.ln-back{background:none; border:none; color:var(--cd-blue); font-weight:700; font-size:13.5px; padding:4px 0; margin-bottom:8px; cursor:pointer}
.ln-detail h3{font-size:19px; color:var(--cd-text); margin:6px 0 12px}
.ln-p{font-size:14.5px; line-height:1.65; color:var(--cd-text); margin:0 0 12px}
.ln-ul{margin:0 0 12px; padding-left:20px}
.ln-ul li{font-size:14.5px; line-height:1.6; color:var(--cd-text); margin-bottom:8px}
.ln-eg{font-family:var(--cd-serif); font-size:14.5px; line-height:1.6; color:var(--cd-text);
  background:var(--cd-bg); border-left:3px solid var(--cd-accent); border-radius:8px; padding:11px 14px; margin:0 0 10px}
.ln-eg.bad{border-left-color:var(--cd-danger)}
.ln-eg.good{border-left-color:var(--cd-good)}
.ln-tick{color:var(--cd-good); font-weight:800; margin-left:6px}

/* stepped teaching flow (teach → worked → your turn → check → apply) */
.ln-step{padding:18px 0; border-top:1px solid var(--cd-line)}
.ln-step:first-of-type{border-top:none; padding-top:6px}
.ln-step-k{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cd-accent-ink); background:rgba(10,158,194,.12); border-radius:99px; padding:3px 11px; margin-bottom:12px}
.ln-k-worked{color:#6a4a00; background:rgba(184,120,0,.12)}
.ln-k-guided{color:var(--cd-go-2); background:rgba(31,157,87,.12)}
.ln-k-apply{color:#fff; background:var(--cd-blue)}
.ln-worked-prompt{font-style:italic; font-family:var(--cd-serif); color:var(--cd-muted); font-size:14px; margin-bottom:10px}
.ln-moves-h{font-size:12.5px; font-weight:800; color:var(--cd-text); margin:4px 0 6px}
.ln-moves{margin:0 0 4px; padding-left:20px}
.ln-moves li{font-size:13.5px; line-height:1.55; color:var(--cd-text); margin-bottom:6px}
.ln-given{font-family:var(--cd-serif); font-size:14px; line-height:1.6; color:var(--cd-text);
  background:var(--cd-bg); border:1px solid var(--cd-line); border-radius:8px; padding:10px 13px; margin-bottom:10px}
.ln-apply{background:var(--cd-bg); border:1px solid var(--cd-line); border-radius:12px; padding:16px}
.ln-apply-tx{font-size:14px; line-height:1.55; color:var(--cd-text); margin:0 0 12px}
.ln-apply .btn-next{width:100%}

/* drill */
.ln-q{margin-bottom:8px}
.ln-q-text{font-weight:700; font-size:14.5px; color:var(--cd-text); margin-bottom:9px}
.ln-opt{display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--cd-line);
  border-radius:10px; padding:11px 13px; margin-bottom:8px; font-size:14px; color:var(--cd-text); transition:border-color .12s, background .12s}
.ln-opt:hover:not(:disabled){border-color:var(--cd-accent)}
.ln-opt:disabled{cursor:default}
.ln-opt.correct{border-color:var(--cd-good); background:rgba(31,157,87,.10); font-weight:700}
.ln-opt.wrong{border-color:var(--cd-danger); background:rgba(207,46,46,.08)}
.ln-why{font-size:12.5px; color:var(--cd-muted); line-height:1.55; margin-top:4px; padding-left:2px}
.ln-mastered{display:flex; align-items:center; gap:10px; background:rgba(31,157,87,.10); border:1px solid var(--cd-good);
  border-radius:10px; padding:13px 15px; margin-top:6px; color:var(--cd-good); font-weight:800; font-size:14.5px}

/* progress modal */
.pg-stats{display:flex; gap:10px; margin-bottom:6px}
.pg-stats>div{flex:1; background:var(--cd-bg); border:1px solid var(--cd-line); border-radius:10px; padding:12px; text-align:center}
.pg-stats b{display:block; font-size:26px; font-weight:800; color:var(--cd-blue); font-variant-numeric:tabular-nums}
.pg-stats span{display:block; font-size:11.5px; color:var(--cd-muted); margin-top:2px}
.pg-row{display:flex; align-items:center; gap:10px; padding:6px 0}
.pg-date{flex:none; width:52px; font-size:12px; color:var(--cd-muted)}
.pg-bar{flex:1; height:9px; background:var(--cd-bg-soft); border-radius:99px; overflow:hidden}
.pg-bar>i{display:block; height:100%; background:linear-gradient(90deg,#0a9ec2,#003057)}
.pg-band{flex:none; width:30px; text-align:right; font-size:13px; font-weight:800; color:var(--cd-blue); font-variant-numeric:tabular-nums}

/* crawlable SEO content (visually hidden, present for search engines) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Spaced-repetition review (Word Bank flashcards) */
.wb-review{width:100%; margin-bottom:14px}
.wb-allclear{background:rgba(31,157,87,.10); border:1px solid var(--cd-good); color:var(--cd-go-2);
  border-radius:10px; padding:12px 14px; font-size:13.5px; font-weight:700; margin-bottom:14px}
.srs{display:flex; flex-direction:column; align-items:center; padding:6px 0}
.srs-prog{font-size:12px; color:var(--cd-faint); font-weight:700; letter-spacing:.04em; margin-bottom:14px}
.srs-card{width:100%; max-width:440px; background:#fff; border:1px solid var(--cd-line); border-radius:14px;
  padding:24px 22px; box-shadow:0 6px 24px rgba(0,20,40,.08)}
.srs-cue{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--cd-accent-ink);
  background:rgba(10,158,194,.12); border-radius:99px; padding:4px 12px; display:inline-block; margin-bottom:14px}
.srs-ctx{font-family:var(--cd-serif); font-size:14.5px; color:var(--cd-muted); line-height:1.55; margin-bottom:14px}
.srs-front{font-family:var(--cd-serif); font-size:26px; font-weight:600; color:var(--cd-danger); text-align:center; margin:6px 0 4px}
.srs-back{margin:10px 0 4px}
.srs-ans{text-align:center; font-size:22px; font-family:var(--cd-serif)}
.srs-wrong{color:var(--cd-danger); text-decoration:line-through}
.srs-right{color:var(--cd-good); font-weight:700}
.srs-show{width:100%; margin-top:16px}
.srs-grade{display:flex; gap:10px; margin-top:16px}
.srs-grade .btn-ghost-cd, .srs-grade .btn-next{flex:1}
.srs-exit{margin-top:18px; background:none; border:none; color:var(--cd-faint); font-size:13px; font-weight:600; cursor:pointer}
.srs-exit:hover{color:var(--cd-blue)}
.srs-done{text-align:center; padding:34px 16px}
.srs-done-ic{width:52px; height:52px; border-radius:50%; background:rgba(31,157,87,.12); color:var(--cd-good);
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; margin:0 auto 14px}
.srs-done h3{font-size:19px; color:var(--cd-text); margin:0 0 8px}
.srs-done p{font-size:14px; color:var(--cd-muted); line-height:1.6; max-width:38ch; margin:0 auto 18px}

/* toast */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--cd-blue); color:#fff; padding:11px 18px; border-radius:8px; font-size:13.5px;
  z-index:60; box-shadow:0 8px 30px rgba(0,20,40,.3)}
.toast[hidden]{display:none}