/* ═══════════════════════════════════════════════════════════════════
   雅思教练 · 起步诊断样式
   ───────────────────────────────────────────────────────────────────
   这一页的视觉目标是「像体检报告」：
     · 结论在最上面（层级 + 瓶颈 + 处方）
     · 过程在下面（七项，逐项可填）
     · 每一步都给出「为什么这么判」的依据

   配色全部走 CSS 变量，跟随 5 套配色与明暗主题。
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════ 1. 汇总报告 ═══════ */
.dg-rep {
  border-radius: calc(14 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.dg-rep-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10 * var(--u)) calc(15 * var(--u));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acc) 12%, var(--n-850)), var(--n-850));
  border-bottom: 1px solid var(--glass-line);
}
.dg-rep-k {
  font-size: calc(10.5 * var(--u)); font-weight: 800;
  letter-spacing: calc(1 * var(--u)); text-transform: uppercase;
  color: var(--acc);
}
.dg-rep-c {
  font-size: var(--fs-3); font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.dg-rep-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.dg-level, .dg-bn {
  padding: calc(15 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
}
.dg-bn { border-left: 1px solid var(--glass-line); }

.dg-level-l {
  font-size: var(--fs-2); font-weight: 800;
  letter-spacing: calc(.8 * var(--u)); text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: calc(8 * var(--u));
}
.dg-level-v {
  font-size: var(--fs-9); font-weight: 800; line-height: calc(32 * var(--u));
  letter-spacing: calc(-1 * var(--u));
  color: var(--acc);
  display: flex; align-items: baseline; gap: calc(9 * var(--u));
}
.dg-level-v em {
  font-style: normal; font-size: var(--fs-7); font-weight: 700;
  color: var(--ink); letter-spacing: 0;
}
.dg-level-none { color: var(--ink-4); font-size: var(--fs-7); }
.dg-level-b {
  margin-top: calc(4 * var(--u));
  font-size: var(--fs-4); font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.dg-level-d {
  margin-top: calc(7 * var(--u));
  font-size: var(--fs-4); line-height: calc(19 * var(--u));
  color: var(--ink-3);
}
.dg-level-need {
  margin-top: calc(8 * var(--u));
  padding-top: calc(7 * var(--u));
  border-top: 1px solid var(--glass-line);
  font-size: var(--fs-3); line-height: calc(17 * var(--u));
  color: var(--ink-4);
}

.dg-bn-v {
  font-size: var(--fs-8); font-weight: 800; line-height: calc(27 * var(--u));
  color: var(--ink); letter-spacing: calc(-.4 * var(--u));
}
.dg-bn-k {
  margin-top: calc(2 * var(--u));
  font-size: var(--fs-2); font-weight: 800;
  letter-spacing: calc(1 * var(--u));
  color: var(--ink-4);
}
.dg-bn-e {
  margin-top: calc(8 * var(--u));
  font-size: var(--fs-3); line-height: calc(17 * var(--u));
  color: var(--ink-3);
}

/* ═══════ 2. 处方 ═══════ */
.dg-rx {
  margin: 0 calc(15 * var(--u)) calc(15 * var(--u));
  padding: calc(13 * var(--u)) calc(15 * var(--u)) calc(15 * var(--u));
  border-radius: calc(11 * var(--u));
  background: color-mix(in srgb, var(--acc) 8%, var(--n-800));
  border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent);
}
.dg-rx-k {
  font-size: var(--fs-5); font-weight: 800;
  color: var(--ink-1);
  margin-bottom: calc(6 * var(--u));
}
.dg-rx-w {
  font-size: var(--fs-4); line-height: calc(19 * var(--u));
  color: var(--ink-2);
}
.dg-rx-f {
  margin-top: calc(9 * var(--u));
  padding: calc(9 * var(--u)) calc(11 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--n-850);
  border: 1px solid var(--glass-line);
  font-size: var(--fs-4); line-height: calc(19 * var(--u));
  color: var(--ink-3);
}
.dg-rx-f b {
  display: block;
  font-size: var(--fs-2); font-weight: 800;
  letter-spacing: calc(.8 * var(--u)); text-transform: uppercase;
  color: var(--acc);
  margin-bottom: calc(4 * var(--u));
}
.dg-rx-go {
  margin-top: calc(11 * var(--u));
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  padding: calc(9 * var(--u)) calc(17 * var(--u));
  border-radius: calc(999 * var(--u));
  border: 1px solid var(--acc);
  background: var(--acc); color: var(--acc-ink);
  font-family: inherit; font-size: var(--fs-4); font-weight: 700;
  cursor: pointer;
  transition: filter .16s var(--e-out);
}
.dg-rx-go:hover { filter: brightness(1.1); }

/* ═══════ 3. 注意事项 + 依据 ═══════ */
.dg-caution {
  margin: 0 calc(15 * var(--u)) calc(14 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  border-left: 3px solid var(--c-amber);
  background: color-mix(in srgb, var(--c-amber) 9%, transparent);
  font-size: var(--fs-4); line-height: calc(19 * var(--u));
  color: var(--ink-2);
}
.dg-ev {
  margin: 0 calc(15 * var(--u)) calc(15 * var(--u));
  padding-top: calc(12 * var(--u));
  border-top: 1px solid var(--glass-line);
  font-size: var(--fs-3); line-height: calc(18 * var(--u));
  color: var(--ink-4);
}
.dg-ev-t {
  font-size: var(--fs-2); font-weight: 800;
  letter-spacing: calc(.8 * var(--u)); text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: calc(6 * var(--u));
}

/* 空报告 */
.dg-rep-empty { padding: calc(26 * var(--u)) calc(18 * var(--u)); text-align: center; }
.dg-rep-t {
  font-size: var(--fs-6); font-weight: 700; color: var(--ink-2);
  margin-bottom: calc(7 * var(--u));
}
.dg-rep-d {
  font-size: var(--fs-4); line-height: calc(19 * var(--u));
  color: var(--ink-3); max-width: var(--measure); margin: 0 auto;
}

/* ═══════ 4. 进度条 ═══════ */
.dg-progress {
  position: relative;
  margin-bottom: var(--sp-4);
  padding: calc(13 * var(--u)) calc(15 * var(--u));
  border-radius: calc(12 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
}
.dg-progress-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: calc(8 * var(--u));
}
.dg-progress-h b {
  font-size: var(--fs-4); font-weight: 700; color: var(--ink-1);
}
.dg-progress-h span {
  font-size: var(--fs-4); font-weight: 800; color: var(--acc);
  font-variant-numeric: tabular-nums;
}
.dg-bar {
  height: calc(5 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--n-750);
  overflow: hidden;
}
.dg-bar i {
  display: block; height: 100%;
  background: var(--acc);
  border-radius: calc(3 * var(--u));
  transition: width .3s var(--e-out);
}
.dg-progress-d {
  margin-top: calc(9 * var(--u));
  font-size: var(--fs-3); line-height: calc(17 * var(--u));
  color: var(--ink-4);
}
.dg-progress .g-btn { margin-top: calc(9 * var(--u)); }

/* ═══════ 5. 七项测试卡 ═══════ */
.dg-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(340 * var(--u)), 1fr));
  gap: var(--sp-3);
  align-items: start;
}
.dg-test {
  border-radius: calc(12 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
  overflow: hidden;
}
.dg-test.done {
  border-color: color-mix(in srgb, var(--acc) 40%, transparent);
}
.dg-test-h {
  display: flex; align-items: flex-start; gap: calc(9 * var(--u));
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-bottom: 1px solid var(--glass-line);
}
.dg-test-id {
  flex: 0 0 auto;
  min-width: calc(28 * var(--u));
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--n-800);
  border: 1px solid var(--glass-line);
  font-size: var(--fs-1); font-weight: 800;
  letter-spacing: calc(.6 * var(--u));
  color: var(--ink-4);
  text-align: center;
}
.dg-test.done .dg-test-id {
  background: var(--acc); border-color: var(--acc); color: var(--acc-ink);
}
.dg-test-t { flex: 1 1 auto; min-width: 0; }
.dg-test-n {
  font-size: var(--fs-5); font-weight: 700; color: var(--ink-1);
  line-height: calc(19 * var(--u));
  display: flex; align-items: center; gap: calc(7 * var(--u));
  flex-wrap: wrap;
}
.dg-soft {
  font-style: normal; font-size: var(--fs-1); font-weight: 700;
  padding: calc(1 * var(--u)) calc(6 * var(--u));
  border-radius: calc(999 * var(--u));
  border: 1px solid color-mix(in srgb, var(--c-amber) 40%, transparent);
  color: var(--c-amber);
}
.dg-test-m {
  margin-top: calc(3 * var(--u));
  font-size: var(--fs-3); line-height: calc(17 * var(--u));
  color: var(--ink-4);
}
.dg-test-p {
  flex: 0 0 auto;
  font-size: var(--fs-3); font-weight: 700;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.dg-test.done .dg-test-p { color: var(--acc); }

.dg-test-io {
  padding: calc(10 * var(--u)) calc(13 * var(--u)) 0;
}
.dg-io {
  font-size: var(--fs-3); line-height: calc(17 * var(--u));
  color: var(--ink-3);
  margin-bottom: calc(5 * var(--u));
}
.dg-io b {
  display: inline-block;
  min-width: calc(38 * var(--u));
  margin-right: calc(6 * var(--u));
  font-size: var(--fs-1); font-weight: 800;
  letter-spacing: calc(.6 * var(--u));
  color: var(--ink-4);
}

.dg-fields { padding: calc(9 * var(--u)) calc(13 * var(--u)) 0; }
.dg-field { margin-bottom: calc(11 * var(--u)); }
.dg-field-t {
  font-size: var(--fs-3); font-weight: 700;
  color: var(--ink-2);
  margin-bottom: calc(6 * var(--u));
  line-height: calc(17 * var(--u));
}

/* 选项按钮 */
.dg-opts { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.dg-opt {
  display: inline-flex; align-items: baseline; gap: calc(5 * var(--u));
  padding: calc(6 * var(--u)) calc(11 * var(--u));
  border-radius: calc(8 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-800);
  color: var(--ink-3);
  font-family: inherit; font-size: var(--fs-3);
  cursor: pointer; text-align: left;
  transition: border-color .14s var(--e-out), background .14s var(--e-out),
              color .14s var(--e-out);
}
.dg-opt:hover { border-color: var(--glass-line-2); color: var(--ink-1); }
.dg-opt.on {
  background: color-mix(in srgb, var(--acc) 16%, transparent);
  border-color: var(--acc);
  color: var(--ink-1); font-weight: 700;
}
.dg-opt em {
  font-style: normal; font-size: var(--fs-1); font-weight: 800;
  color: var(--acc); opacity: .85;
}

/* band 型（可自动取分） */
.dg-band {
  display: flex; align-items: center; gap: calc(9 * var(--u));
}
.dg-band-v {
  display: inline-grid; place-items: center;
  min-width: calc(44 * var(--u)); height: calc(28 * var(--u));
  padding: 0 calc(11 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--acc); color: var(--acc-ink);
  font-size: var(--fs-6); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.dg-band-none {
  display: inline-grid; place-items: center;
  min-width: calc(44 * var(--u)); height: calc(28 * var(--u));
  padding: 0 calc(11 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--n-800);
  border: 1px dashed var(--glass-line-2);
  color: var(--ink-4);
  font-size: var(--fs-3); font-weight: 700;
}

.dg-test-f {
  display: flex; align-items: center; gap: calc(9 * var(--u));
  flex-wrap: wrap;
  padding: calc(10 * var(--u)) calc(13 * var(--u)) calc(12 * var(--u));
  border-top: 1px solid var(--glass-line);
  background: var(--n-800);
}
.dg-hint {
  font-size: var(--fs-2); color: var(--ink-4);
}

/* ═══════ 6. 响应式 ═══════ */
@media (max-width: 860px) {
  .dg-rep-main { grid-template-columns: minmax(0, 1fr); }
  .dg-bn { border-left: none; border-top: 1px solid var(--glass-line); }
}
@media (max-width: 620px) {
  .dg-list { grid-template-columns: minmax(0, 1fr); }
  .dg-level-v { font-size: var(--fs-8); line-height: calc(27 * var(--u)); }
  .dg-rx { margin: 0 calc(11 * var(--u)) calc(13 * var(--u)); }
}