/* ═══════════════════════════════════════════════════════════════════
   雅思教练 · F 层学习单元样式
   字号一律用全站令牌（--fs-1 ~ --fs-9）。
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════ 1. 导语条 ═══════ */
.ld-legend {
  padding: calc(11 * var(--u)) calc(14 * var(--u));
  border-radius: calc(11 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-3);
  line-height: calc(18 * var(--u));
  color: var(--ink-3);
}
.ld-legend b {
  color: var(--acc); font-weight: 800; margin-right: calc(8 * var(--u));
}
.ld-legend span { display: block; color: var(--ink-4); margin-top: calc(3 * var(--u)); }

/* ═══════ 2. 层级筛选 ═══════ */
.ld-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(150 * var(--u)), 1fr));
  gap: calc(8 * var(--u));
  margin-bottom: var(--sp-4);
}
.ld-lv {
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(2 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(10 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .16s var(--e-out), background .16s var(--e-out);
}
.ld-lv:hover { border-color: var(--glass-line-2); }
.ld-lv.on {
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  border-color: var(--acc);
}
.ld-lv b {
  font-size: var(--fs-6); font-weight: 800; color: var(--acc);
  letter-spacing: calc(-.2 * var(--u));
}
.ld-lv span { font-size: var(--fs-4); font-weight: 700; color: var(--ink-1); }
.ld-lv em {
  font-style: normal; font-size: var(--fs-2); color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ═══════ 3. 单元卡片 ═══════ */
.ld-list { display: flex; flex-direction: column; gap: calc(9 * var(--u)); }

.ld-unit {
  border: 1px solid var(--glass-line);
  border-radius: calc(12 * var(--u));
  background: var(--n-850);
  overflow: hidden;
  transition: border-color .18s var(--e-out);
}
.ld-unit.open { border-color: var(--glass-line-2); }
.ld-unit.done { border-left: 3px solid var(--acc); }

.ld-unit-h {
  display: flex; align-items: center; gap: calc(11 * var(--u));
  width: 100%;
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  background: none; cursor: pointer; text-align: left; font-family: inherit;
}
.ld-unit-h:hover { background: var(--hover); }
.ld-unit-lv {
  flex: 0 0 auto;
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(6 * var(--u));
  background: color-mix(in srgb, var(--acc) 16%, transparent);
  color: var(--acc);
  font-size: var(--fs-3); font-weight: 800;
  letter-spacing: calc(.3 * var(--u));
}
.ld-unit-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.ld-unit-n {
  font-size: var(--fs-5); font-weight: 800; color: var(--ink-1);
  letter-spacing: calc(-.2 * var(--u));
}
.ld-unit-d { font-size: var(--fs-2); color: var(--ink-4); }
.ld-unit-r {
  margin-left: auto; flex: 0 0 auto;
  display: flex; align-items: center; gap: calc(8 * var(--u));
}
.ld-unit-est { font-size: var(--fs-2); color: var(--ink-4); white-space: nowrap; }
.ld-unit-ck {
  padding: calc(1 * var(--u)) calc(7 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--n-800);
  border: 1px solid var(--glass-line);
  font-size: var(--fs-2); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ld-unit-ck.all {
  background: var(--acc); color: var(--acc-ink); border-color: var(--acc);
}
.ld-unit .vb-chev {
  width: calc(13 * var(--u)); height: calc(13 * var(--u));
  color: var(--ink-4); flex: 0 0 auto;
  transition: transform .3s var(--e-out);
}
.ld-unit.open .vb-chev { transform: rotate(90deg); }

.ld-unit-b { padding: 0 calc(14 * var(--u)) calc(14 * var(--u)); }

.ld-why {
  padding: calc(9 * var(--u)) calc(11 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--n-800);
  border: 1px solid var(--glass-line);
  border-left: 3px solid var(--acc);
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
.ld-why b {
  display: block; color: var(--acc); font-weight: 800;
  font-size: var(--fs-2); letter-spacing: calc(.4 * var(--u));
  margin-bottom: calc(3 * var(--u));
}

/* ═══════ 4. 单元内的小节标题 ═══════ */
.ld-sec-h {
  font-size: var(--fs-4); font-weight: 800; color: var(--ink-2);
  margin: var(--sp-4) 0 calc(8 * var(--u));
  padding-bottom: calc(5 * var(--u));
  border-bottom: 1px solid var(--glass-line);
}

/* ═══════ 5. 要点 ═══════ */
.ld-points { margin: 0; padding-left: calc(20 * var(--u)); }
.ld-points li {
  font-size: var(--fs-3); line-height: calc(19 * var(--u));
  color: var(--ink-2);
  margin-bottom: calc(6 * var(--u));
}
.ld-points li:last-child { margin-bottom: 0; }
.ld-points li::marker { color: var(--acc); font-weight: 800; }
.ld-points b { color: var(--ink-1); font-weight: 700; }

/* ═══════ 6. 正反例 ═══════ */
.ld-exs { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ld-ex {
  display: flex; gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--n-800);
  border: 1px solid var(--glass-line);
}
.ld-ex.ok { border-left: 3px solid var(--acc); }
.ld-ex.bad { border-left: 3px solid var(--c-rose); }
.ld-ex-tag {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: calc(1 * var(--u)) calc(7 * var(--u));
  border-radius: calc(5 * var(--u));
  font-size: var(--fs-1); font-weight: 800;
  letter-spacing: calc(.3 * var(--u));
}
.ld-ex.ok .ld-ex-tag { background: color-mix(in srgb, var(--acc) 20%, transparent); color: var(--acc); }
.ld-ex.bad .ld-ex-tag { background: color-mix(in srgb, var(--c-rose) 18%, transparent); color: var(--c-rose); }
.ld-ex-b { flex: 1 1 auto; min-width: 0; }
.ld-ex-en {
  font-size: var(--fs-4); line-height: calc(19 * var(--u));
  color: var(--ink-1); font-weight: 600;
}
.ld-ex-cn {
  font-size: var(--fs-3); color: var(--ink-3);
  margin-top: calc(3 * var(--u));
}
.ld-ex-note {
  font-size: var(--fs-2); line-height: calc(16 * var(--u));
  color: var(--ink-4);
  margin-top: calc(5 * var(--u));
  padding-top: calc(5 * var(--u));
  border-top: 1px solid var(--glass-line);
}
.ld-ex-note b { color: var(--ink-2); font-weight: 700; }

/* ═══════ 7. 练习 ═══════ */
.ld-drills { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ld-drill {
  display: flex; align-items: flex-start; gap: calc(10 * var(--u));
  padding: calc(9 * var(--u)) calc(11 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--n-800);
  border: 1px solid var(--glass-line);
}
.ld-drill-n {
  flex: 0 0 auto;
  width: calc(19 * var(--u)); height: calc(19 * var(--u));
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--n-750);
  color: var(--ink-3);
  font-size: var(--fs-2); font-weight: 800;
}
.ld-drill-b { flex: 1 1 auto; min-width: 0; }
.ld-drill-t {
  font-size: var(--fs-4); font-weight: 700; color: var(--ink-1);
  margin-bottom: calc(3 * var(--u));
}
.ld-drill-d {
  font-size: var(--fs-3); line-height: calc(17 * var(--u));
  color: var(--ink-3);
}
.ld-drill-d b { color: var(--ink-2); font-weight: 700; }

/* ═══════ 8. 过关标准 ═══════ */
.ld-pass {
  padding: calc(11 * var(--u)) calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  background: color-mix(in srgb, var(--acc) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent);
}
.ld-pass-i {
  display: flex; align-items: flex-start; gap: calc(9 * var(--u));
  padding: calc(6 * var(--u)) 0;
  cursor: pointer;
}
.ld-pass-i input { position: absolute; opacity: 0; width: 0; height: 0; }
.ld-pass-box {
  flex: 0 0 auto;
  width: calc(15 * var(--u)); height: calc(15 * var(--u));
  border-radius: calc(4 * var(--u));
  border: 1px solid var(--glass-line-2);
  background: var(--n-850);
  margin-top: calc(3 * var(--u));
  position: relative;
  transition: background .16s var(--e-out), border-color .16s var(--e-out);
}
.ld-pass-i.on .ld-pass-box {
  background: var(--acc); border-color: var(--acc);
}
.ld-pass-i.on .ld-pass-box::after {
  content: "";
  position: absolute; left: calc(4 * var(--u)); top: calc(1 * var(--u));
  width: calc(4 * var(--u)); height: calc(8 * var(--u));
  border: solid var(--acc-ink);
  border-width: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0;
  transform: rotate(45deg);
}
.ld-pass-t {
  font-size: var(--fs-3); line-height: calc(18 * var(--u));
  color: var(--ink-2);
}
.ld-pass-i.on .ld-pass-t { color: var(--ink-4); text-decoration: line-through; }
.ld-pass-t b { color: var(--ink-1); font-weight: 700; }
.ld-pass-note {
  margin-top: calc(9 * var(--u));
  padding-top: calc(8 * var(--u));
  border-top: 1px solid var(--glass-line);
  font-size: var(--fs-2); line-height: calc(16 * var(--u));
  color: var(--ink-4);
}

/* ═══════ 9. 关联 ═══════ */
.ld-links { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }
.ld-link {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(6 * var(--u)) calc(11 * var(--u));
  border-radius: calc(8 * var(--u));
  border: 1px solid var(--glass-line-2);
  background: var(--n-850);
  color: var(--ink-2);
  font-size: var(--fs-3); font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: background .16s var(--e-out), border-color .16s var(--e-out);
}
.ld-link:hover {
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  border-color: var(--acc); color: var(--ink-1);
}
.ld-link svg {
  width: calc(11 * var(--u)); height: calc(11 * var(--u));
  color: var(--ink-4); flex: 0 0 auto;
}

/* ═══════ 10. 上/下一单元 ═══════ */
.ld-nav {
  display: flex; gap: calc(9 * var(--u));
  margin-top: var(--sp-4);
  padding-top: calc(11 * var(--u));
  border-top: 1px solid var(--glass-line);
}
.ld-nav-b {
  flex: 1 1 0;
  display: flex; flex-direction: column; gap: calc(2 * var(--u));
  padding: calc(8 * var(--u)) calc(11 * var(--u));
  border-radius: calc(9 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-800);
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .16s var(--e-out), background .16s var(--e-out);
}
.ld-nav-b:hover:not(.disabled) {
  border-color: var(--acc);
  background: color-mix(in srgb, var(--acc) 8%, transparent);
}
.ld-nav-b span { font-size: var(--fs-1); color: var(--ink-4); }
.ld-nav-b b { font-size: var(--fs-3); color: var(--ink-1); font-weight: 700; }
.ld-nav-b.disabled { opacity: .4; cursor: default; }

.ld-empty {
  padding: calc(28 * var(--u));
  text-align: center; color: var(--ink-4);
  font-size: var(--fs-4);
}

/* ═══════ 12. 执行计划 ═══════ */
.ld-why-plan {
  border-color: color-mix(in srgb, var(--acc) 35%, var(--glass-line));
  background: color-mix(in srgb, var(--acc) 7%, var(--n-850));
}
.ld-why-plan b { color: var(--acc); }

.ld-not {
  margin-top: calc(8 * var(--u));
  padding: calc(9 * var(--u)) calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  border: 1px solid color-mix(in srgb, var(--c-rose) 30%, transparent);
  background: color-mix(in srgb, var(--c-rose) 7%, transparent);
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-2);
}
.ld-not b {
  display: block; margin-bottom: calc(3 * var(--u));
  color: var(--c-rose); font-weight: 800;
}
.ld-not b { font-size: var(--fs-3); }

/* 分批表 */
.ld-batches {
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  margin-top: calc(10 * var(--u));
}
.ld-batch {
  border: 1px solid var(--glass-line);
  border-radius: calc(10 * var(--u));
  background: var(--n-800);
  padding: calc(10 * var(--u)) calc(12 * var(--u));
}
.ld-batch-h {
  display: flex; align-items: baseline; gap: calc(8 * var(--u));
  flex-wrap: wrap;
}
.ld-batch-n {
  font-size: var(--fs-1); font-weight: 800;
  color: var(--acc); letter-spacing: calc(.2 * var(--u));
  white-space: nowrap;
}
.ld-batch-h b {
  font-size: var(--fs-4); font-weight: 800; color: var(--ink-1);
  letter-spacing: calc(-.2 * var(--u));
}
.ld-batch-span {
  font-size: var(--fs-2); color: var(--ink-4);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ld-batch-goal {
  margin-top: calc(5 * var(--u));
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-3);
}
.ld-batch-goal b { color: var(--ink-1); font-weight: 700; }

.ld-batch-list {
  list-style: none; margin: calc(8 * var(--u)) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: calc(4 * var(--u));
}
.ld-batch-list li {
  display: flex; align-items: baseline; gap: calc(7 * var(--u));
  flex-wrap: wrap;
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: calc(7 * var(--u));
  background: var(--n-850);
  border-left: 2px solid var(--glass-line-2);
}
.ld-batch-list li.core { border-left-color: var(--acc); }

/* 短标签型列表（音标 / 句型 / 时态名）—— 内联 chip，不占整行 */
.ld-batch-chips {
  list-style: none; margin: calc(8 * var(--u)) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: calc(5 * var(--u));
}
.ld-chip {
  display: inline-block;
  padding: calc(3 * var(--u)) calc(9 * var(--u));
  border-radius: calc(6 * var(--u));
  border: 1px solid var(--glass-line-2);
  background: var(--n-850);
  font-size: var(--fs-3); font-weight: 700;
  color: var(--ink-1);
  font-family: var(--font-en, inherit);
  white-space: nowrap;
}
.ld-batch-chips li:first-child { margin-left: 0; }
.ld-b-item {
  font-size: var(--fs-3); font-weight: 700; color: var(--ink-1);
  font-family: var(--font-en, inherit);
}
.ld-b-score {
  font-size: var(--fs-1); font-weight: 700;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ld-b-score em {
  font-style: normal; margin-left: calc(3 * var(--u));
  padding: 0 calc(4 * var(--u));
  border-radius: calc(4 * var(--u));
  background: color-mix(in srgb, var(--acc) 18%, transparent);
  color: var(--acc);
}
.ld-b-use {
  flex: 1 1 100%;
  font-size: var(--fs-2); color: var(--ink-4);
  line-height: calc(15 * var(--u));
}
.ld-b-use b { color: var(--ink-2); font-weight: 700; }
.ld-b-pit {
  flex: 1 1 100%;
  font-size: var(--fs-2); color: var(--ink-4);
  line-height: calc(15 * var(--u));
}
.ld-b-pit b { color: var(--ink-2); font-weight: 700; }

.ld-batch-check {
  margin-top: calc(8 * var(--u));
  padding-top: calc(7 * var(--u));
  border-top: 1px dashed var(--glass-line-2);
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-3);
}
.ld-batch-check b {
  display: inline-block; margin-right: calc(6 * var(--u));
  color: var(--c-amber); font-weight: 800;
}

/* 每日流程 */
.ld-routine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(210 * var(--u)), 1fr));
  gap: calc(8 * var(--u));
  margin-top: calc(10 * var(--u));
}
.ld-rt {
  padding: calc(9 * var(--u)) calc(11 * var(--u));
  border-radius: calc(9 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-800);
}
.ld-rt-t {
  display: flex; align-items: baseline; gap: calc(7 * var(--u));
  margin-bottom: calc(4 * var(--u));
}
.ld-rt-t b {
  font-size: var(--fs-4); font-weight: 700; color: var(--ink-1);
}
.ld-rt-t span {
  font-size: var(--fs-2); color: var(--acc);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: 0 calc(5 * var(--u));
  border-radius: calc(5 * var(--u));
  background: color-mix(in srgb, var(--acc) 14%, transparent);
}
.ld-rt-d {
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-3);
}
.ld-rt-d b { color: var(--ink-1); font-weight: 700; }

/* 最小对立对 */
.ld-pairs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(240 * var(--u)), 1fr));
  gap: calc(6 * var(--u));
  margin-top: calc(10 * var(--u));
}
.ld-pair {
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  border-radius: calc(8 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-800);
}
.ld-pair-words {
  display: flex; align-items: baseline; gap: calc(7 * var(--u));
  flex-wrap: wrap;
}
.ld-pair-w {
  font-size: var(--fs-4); font-weight: 700; color: var(--ink-1);
  font-family: var(--font-en, inherit);
}
.ld-pair-vs {
  font-size: var(--fs-2); color: var(--acc); font-weight: 700;
  white-space: nowrap;
}
.ld-pair-why {
  margin-top: calc(3 * var(--u));
  font-size: var(--fs-2); color: var(--ink-4);
  line-height: calc(15 * var(--u));
}
.ld-pair-why b { color: var(--ink-2); font-weight: 700; }

/* 检验方式 */
.ld-verify {
  margin-top: calc(10 * var(--u));
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(10 * var(--u));
  border: 1px solid color-mix(in srgb, var(--acc) 32%, var(--glass-line));
  background: color-mix(in srgb, var(--acc) 6%, var(--n-800));
}
.ld-verify-t {
  font-size: var(--fs-5); font-weight: 800; color: var(--acc);
  letter-spacing: calc(-.2 * var(--u));
  margin-bottom: calc(5 * var(--u));
}
.ld-verify-how {
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-3);
}
.ld-verify-how b { color: var(--ink-1); font-weight: 700; }
.ld-verify-pass {
  margin-top: calc(8 * var(--u));
  padding-top: calc(7 * var(--u));
  border-top: 1px solid var(--glass-line-2);
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-2);
}
.ld-verify-pass b {
  display: inline-block; margin-right: calc(6 * var(--u));
  color: var(--c-amber); font-weight: 800;
}

/* ═══════ 13. 窄屏 ═══════ */
@media (max-width: 760px) {
  .ld-unit-h { flex-wrap: wrap; }
  .ld-unit-r { margin-left: 0; width: 100%; }
  .ld-nav { flex-direction: column; }
  .ld-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-routine { grid-template-columns: 1fr; }
  .ld-pairs { grid-template-columns: 1fr; }
}