/* 英语水平引导诊断 · 专用样式
 * 复用 site.css 的 CSS 变量，保持视觉一致性
 */

/* ====== 开始页 ====== */
.test-start{padding:60px 0 40px}
.test-hero{text-align:center;margin-bottom:40px}
.test-hero h1{font-family:var(--serif);font-size:clamp(28px,3.6vw,40px);color:var(--ink);margin-bottom:14px;letter-spacing:1px}
.test-hero p{color:var(--ink-soft);font-size:16px;max-width:540px;margin:0 auto}
.test-meta{display:flex;justify-content:center;gap:28px;margin-top:18px;font-size:13px;color:var(--ink-faint)}
.test-meta span{display:inline-flex;align-items:center;gap:6px}
.test-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);opacity:.7}

.test-grade-wrap{margin-top:40px}
.test-grade-title{text-align:center;font-size:14px;color:var(--ink-faint);letter-spacing:2px;margin-bottom:20px}
.test-grade-title::before,.test-grade-title::after{content:"";display:inline-block;width:40px;height:1px;background:var(--line-strong);margin:0 14px;vertical-align:middle}

.grade-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grade-card{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:28px 22px;text-align:left;cursor:pointer;transition:all .25s;
  font-family:var(--sans);
}
.grade-card:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--shadow)}
.grade-card.selected{border-color:var(--amber);background:var(--amber-bg);box-shadow:var(--shadow);transform:translateY(-3px)}
.grade-age{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:1px;margin-bottom:6px}
.grade-years{font-size:14px;color:var(--amber-deep);font-weight:600;margin-bottom:12px}
.grade-focus{font-size:13px;color:var(--ink-soft);line-height:1.6}

.test-start-cta{text-align:center;margin-top:36px}
.test-start-cta .btn{min-width:240px;justify-content:center;font-size:16px;padding:16px 32px}
.test-start-cta .btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ====== 答题页 ====== */
.test-quiz{padding:40px 0 40px}
.quiz-progress{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 16px;margin-bottom:26px}
.quiz-progress-bar{height:4px;background:var(--paper-deep);border-radius:3px;overflow:hidden;margin-bottom:8px}
.quiz-progress-fill{height:100%;background:linear-gradient(90deg,var(--amber),var(--teal));border-radius:3px;transition:width .4s ease}
.quiz-progress-info{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-faint)}
.dim-tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600}
.dim-vocab{background:var(--amber-bg);color:var(--amber-deep)}
.dim-grammar{background:var(--teal-bg);color:var(--teal-deep)}

.quiz-card{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:36px 32px;box-shadow:var(--shadow);
}
.quiz-q{font-family:var(--serif);font-size:clamp(18px,2.4vw,22px);color:var(--ink);margin-bottom:28px;line-height:1.55}

.quiz-opts{display:flex;flex-direction:column;gap:12px}
.opt{
  display:flex;align-items:flex-start;gap:14px;text-align:left;
  background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
  padding:16px 18px;cursor:pointer;transition:all .2s;font-family:var(--sans);
}
.opt:hover:not(.correct):not(.wrong){border-color:var(--amber);background:var(--amber-bg)}
.opt.correct{border-color:var(--teal);background:var(--teal-bg)}
.opt.wrong{border-color:var(--red);background:rgba(196,85,59,.08)}
.opt-letter{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:var(--paper-deep);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;
}
.opt.correct .opt-letter{background:var(--teal);color:#fff}
.opt.wrong .opt-letter{background:var(--red);color:#fff}
.opt-text{flex:1;font-size:15.5px;color:var(--ink);line-height:1.55}

/* ====== 结果页 ====== */
.test-result{padding:40px 0 60px}
.result-head{text-align:center;margin-bottom:36px}
.result-head .test-eyebrow{display:inline-block;font-size:13px;color:var(--ink-faint);letter-spacing:2px;margin-bottom:10px}
.result-head .test-eyebrow::before{content:"";display:inline-block;width:30px;height:1px;background:var(--amber);vertical-align:middle;margin-right:10px}
.result-head h2{font-family:var(--serif);font-size:clamp(24px,3vw,34px);color:var(--ink);margin-bottom:8px}
.result-head .result-meta{font-size:14px;color:var(--ink-faint)}

.result-scores{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px}
.score-card{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:28px;position:relative;overflow:hidden;
}
.score-card.card-vocab{border-top:3px solid var(--amber)}
.score-card.card-grammar{border-top:3px solid var(--teal)}
.score-label{font-size:14px;color:var(--ink-faint);font-weight:600;letter-spacing:1px}
.score-num{font-family:var(--serif);font-size:56px;font-weight:700;color:var(--ink);line-height:1;margin:8px 0 4px}
.score-num .score-suffix{font-size:28px;color:var(--ink-faint);font-weight:400;margin-left:2px}
.score-count{font-size:13px;color:var(--ink-faint)}
.score-bar{height:6px;background:var(--paper-deep);border-radius:3px;margin-top:16px;overflow:hidden}
.score-bar-fill{height:100%;border-radius:3px;transition:width .8s ease}
.card-vocab .score-bar-fill{background:linear-gradient(90deg,var(--amber),var(--amber-deep))}
.card-grammar .score-bar-fill{background:linear-gradient(90deg,var(--teal),var(--teal-deep))}

/* 双维度对比条 */
.result-compare{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:24px;margin-bottom:28px;
}
.compare-title{font-size:14px;color:var(--ink-faint);font-weight:600;margin-bottom:14px}
.compare-bar-row{margin-bottom:12px}
.compare-bar-label{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);margin-bottom:6px}
.compare-bar{height:22px;background:var(--paper);border-radius:11px;overflow:hidden;position:relative}
.compare-bar-fill{height:100%;border-radius:11px;transition:width .9s ease;display:flex;align-items:center;padding-left:12px;font-size:12px;color:rgba(255,255,255,.95);font-weight:600}
.fill-vocab{background:linear-gradient(90deg,var(--amber),var(--amber-deep))}
.fill-grammar{background:linear-gradient(90deg,var(--teal),var(--teal-deep))}

/* 薄弱点 */
.weak-section{margin-bottom:28px}
.weak-title{font-size:14px;color:var(--ink-faint);font-weight:600;margin-bottom:14px}
.weak-tags{display:flex;flex-wrap:wrap;gap:10px}
.weak-tag{padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600}
.wt-vocab{background:var(--amber-bg);color:var(--amber-deep)}
.wt-grammar{background:var(--teal-bg);color:var(--teal-deep)}
.wt-good{background:rgba(15,118,110,.08);color:var(--teal-deep)}

/* 推荐卡 */
.recommend-card{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:32px;margin-bottom:28px;box-shadow:var(--shadow);
}
.rec-flag{display:inline-block;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:14px}
.flag-vocab{background:var(--amber-bg);color:var(--amber-deep)}
.flag-grammar{background:var(--teal-bg);color:var(--teal-deep)}
.flag-balanced{background:var(--blue-bg);color:var(--blue-deep)}
.rec-reason{font-size:15px;color:var(--ink-soft);margin-bottom:22px;line-height:1.7}
.rec-product{padding-top:18px;border-top:1px dashed var(--line)}
.rec-prod-name{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ink);margin-bottom:6px}
.rec-prod-desc{font-size:14px;color:var(--ink-soft);margin-bottom:20px;line-height:1.7}
.rec-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rec-product-grid > div{padding:16px;background:var(--paper);border-radius:10px;text-align:center}
.rec-product-grid .rec-prod-name{font-size:18px;margin-bottom:14px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.dot.amber{background:var(--amber)}
.dot.teal{background:var(--teal)}
.btn-ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink);padding:12px 22px;border-radius:10px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:all .2s}
.btn-ghost:hover{background:var(--ink);color:#F7EFDF;transform:translateY(-1px)}

/* 历史 */
.history-section{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:24px;margin-bottom:24px;
}
.history-title{font-size:14px;color:var(--ink-faint);font-weight:600;margin-bottom:14px}
.hist-row{display:flex;gap:18px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13px}
.hist-row:last-child{border-bottom:none}
.hist-time{color:var(--ink-faint);width:110px;flex-shrink:0}
.hist-grade{color:var(--ink-soft);width:120px;flex-shrink:0}
.hist-score{flex:1;color:var(--ink)}
.hist-rec{width:70px;text-align:right;font-weight:600}
.hist-row:nth-child(1) .hist-rec{color:var(--amber-deep)}
.hist-row:nth-child(2) .hist-rec{color:var(--blue-deep)}
.hist-row:nth-child(3) .hist-rec{color:var(--teal-deep)}

.test-disclaimer{
  font-size:12.5px;color:var(--ink-faint);text-align:center;padding:20px 0 0;
  max-width:520px;margin:0 auto;line-height:1.8;
}
.test-disclaimer::before{content:"";display:block;width:40px;height:1px;background:var(--line-strong);margin:0 auto 16px}

/* ====== 响应式 ====== */
@media(max-width:720px){
  .grade-cards{grid-template-columns:1fr}
  .result-scores{grid-template-columns:1fr}
  .rec-product-grid{grid-template-columns:1fr}
  .hist-row{flex-wrap:wrap;gap:6px 14px}
  .hist-time{width:auto}
  .hist-grade{width:auto}
  .hist-rec{width:auto}
  .quiz-card{padding:24px 20px}
  .score-num{font-size:44px}
}