:root{
  --bg:#fdfaf3;   /* 全站背景改成米黄色 */
  --paper:#fff;
  --line:#e9eef5;
  --ink:#17212b;
  --muted:#6b7384;
  --accent:#0e7c66;
  --accent2:#14a384;
  --soft:#e9f5f1;
  --max:1200px;
  --stage:760px;
  --side:340px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:56px;
  --radius-1:10px;
  --radius-2:14px;
  --radius-3:16px;
  --radius-4:18px;
}


*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}

h1,h2,h3{
  font-family:"Source Serif 4",Georgia,serif;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--space-6);
}

.hidden{display:none}
.center{text-align:center}
.mt{margin-top:var(--space-7)}
.fine{font-size:13px}

.h2{font-size:28px;margin:.2rem 0 .6rem}
.h3{font-size:22px;margin:.2rem 0 .4rem}
.display{font-size:44px;line-height:1.15;margin:.2rem 0 .6rem}
.lead{font-size:18px;color:#2a3646;margin:0 0 var(--space-4)}
.muted{color:var(--muted)}

/* 顶部导航 */
.topbar{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--line);
  z-index:50;
}
.topbar .wrap{
  display:grid;
  grid-template-columns:240px 1fr 80px;
  align-items:center;
  gap:var(--space-6);
  padding:var(--space-3) 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  text-decoration:none;
  color:inherit;
}
.mark{
  width:40px;
  height:40px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
}
.b1{font-weight:700}
.b2{font-size:12px;color:var(--muted)}

.progress{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding:0 var(--space-8);
}
.stepper{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--space-2);
}
.stepper .step{
  height:24px;
  border-radius:999px;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--muted);
  background:#fff;
}
.stepper .step.active{
  border-color:var(--accent);
  color:var(--accent);
  font-weight:700;
}
.bar{
  height:10px;
  background:#f1f4fa;
  border-radius:6px;
  border:1px solid var(--line);
  overflow:hidden;
}
.fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .25s;
}
.link{
  appearance:none;
  background:none;
  border:none;
  color:var(--muted);
  cursor:pointer;
  justify-self:end;
}

/* 首页 Hero */
.hero{
  padding:var(--space-9) 0 var(--space-8);
  background:linear-gradient(180deg,#fff,#f7faf9);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--space-8);
  align-items:stretch;
}
.hero-aside{
  display:flex;
  flex-direction:column;
  justify-content:space-between;  /* 头尾自然撑开，中间正文占据 */
}
.hero-cta{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  margin-top:var(--space-4);
}
.hero-eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  color:var(--accent);
  font-weight:600;
  margin-bottom:6px;
}

/* 通用卡片 */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-3);
  box-shadow:0 10px 36px rgba(14,25,38,.06);
  padding:var(--space-6);
}

/* Hero 右侧预览卡 */
.hero-aside .hero-aside-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
}
.hero-pill{
  padding:4px 10px;
  border-radius:999px;
  background:#eef3f8;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#4b5563;
}
.hero-score-tag{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:#ecfdf5;
  color:#047857;
}
.hero-aside-title{
  font-size:18px;
  margin:.2rem 0 .4rem;
}
.hero-aside-text{
  font-size:14px;
  color:#4b5563;
  margin:0 0 var(--space-4);
}
.hero-mini-grid{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 14px;
  font-size:13px;
}
.hero-aside-foot{
  margin-top:var(--space-3);
}

/* 引用（“论文脚注”风格） */
.refs{
  margin-top:var(--space-8);
  padding:var(--space-6);
  border-radius:var(--radius-3);
  border:1px solid var(--line);
  background:#fdf6eb;          /* 更贴近全站米黄色，但略深一点，形成块状区域 */
  font-size:12px;              /* 整块参考文献整体用更小字号 */
  line-height:1.6;
}
/* references on quiz page (lighter, smaller) */
.refs-quiz{
  max-width:1200px;      /* 与首页 wrap 一致 */
  margin:32px auto 0;
  background:#fdf6eb;
  border-color:#e8e1d2;
  font-size:12px;
  padding:24px 28px;
  border-radius:14px;
  line-height:1.7;
}
/* === Unified reference typography === */
.refs,
.refs-quiz{
  line-height:1.7;
  letter-spacing:0.01em;
  word-break:keep-all;
}

.refs-list li{
  margin-bottom:6px;
}
.refs-title{
  font-size:14px;              /* 标题比正文稍大一点点 */
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
  margin:.1rem 0 .5rem;
}
.refs-list{
  margin:0 0 .6rem;
  padding-left:20px;
}
.refs-list li{
  margin-bottom:4px;
}
.refs-label{
  font-weight:600;
  font-style:italic;           /* 标签部分斜体，更像论文引用 */
  color:#4b5563;
}

.refs-title{
  font-size:18px;
  margin:.1rem 0 .5rem;
}
.refs-list{
  margin:0 0 .6rem;
  padding-left:20px;
}
.refs-label{
  font-weight:600;
}

/* 题目区 */
.quiz{
  padding:var(--space-8) 0;
}
.quiz-frame{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--space-8);
  justify-content:center;
}
.stage{
  padding:var(--space-7);
}
.stage-dark{
  background:radial-gradient(circle at top left,#0f172a,#020617);
  color:#e5e7eb;
  border:none;
}
.stage-dark .qtitle{
  color:#f9fafb;
}
.stage-dark .qindex{
  color:#a5b4fc;
}
.stage-dark .fine.muted.inverse{
  color:#9ca3af;
  margin-top:var(--space-4);
}
.stage-dark .tile{
  background:rgba(15,23,42,0.6);
  border-color:rgba(148,163,184,0.5);
  color:#e5e7eb;
}
.stage-dark .tile:hover{
  border-color:#a5b4fc;
}
.stage-dark .btn-ghost{
  background:rgba(15,23,42,0.9);
  color:#e5e7eb;
}

/* 问题头部 */
.qhead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-4);
}
.qindex{
  font-weight:700;
  color:var(--accent);
}
.qtitle{
  margin:.2rem 0 .6rem;
}
.qwrap{
  display:grid;
  gap:var(--space-3);
}

/* 选项 tile */
.tile{
  display:flex;
  gap:var(--space-3);
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius:12px;
  padding:var(--space-4);
  background:#fff;
  cursor:pointer;
}
.tile:hover{
  border-color:var(--accent);
}
.tile input{
  margin-top:3px;
}

.nav{
  display:flex;
  justify-content:space-between;
  margin-top:var(--space-5);
}

/* 右侧 side-note 卡 */
.side .side-title{
  font-weight:700;
  margin-bottom:var(--space-3);
}
.side-note{
  background:#fdfaf3;
}
.side-overline{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#9a7b31;
  margin-bottom:4px;
}
.side-section{
  margin-bottom:var(--space-4);
}
.side-section p{
  margin:.1rem 0;
  font-size:13px;
  color:#4b5563;
}

/* track dots（首页 / 结果共用） */
.tracks{list-style:none;padding:0;margin:0}
.tracks li{margin:var(--space-2) 0}
.dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:6px;
}
.dot-aga{background:#6bd1ff}
.dot-te{background:#7bdcff}
.dot-aa{background:#f8b8e1}
.dot-tr{background:#ffb4b4}
.dot-th{background:#ffe38a}
.dot-ir{background:#b4ffd5}

hr{
  border:none;
  border-top:1px solid var(--line);
  margin:var(--space-4) 0;
}

/* 结果区 */
.results{
  padding:var(--space-9) 0;
}
.result-head{
  margin-bottom:var(--space-4);
}
.result-grid{
  display:grid;
  grid-template-columns:minmax(0,var(--stage)) minmax(0,var(--side));
  gap:var(--space-8);
  justify-content:center;
}
.track{
  padding:var(--space-4);
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.track .bar{
  height:8px;
  background:#eef3f8;
  border-radius:999px;
  overflow:hidden;
  margin-top:var(--space-3);
  border:1px solid var(--line);
}
.track .fill{
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:12px;
  color:#465164;
  margin-left:8px;
  background:#fff;
}
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
}
.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  margin-top:var(--space-6);
}

/* 按钮 */
.btn{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  transition:.2s;
  font-weight:600;
}
.btn:hover{
  border-color:var(--accent);
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  border:none;
}
.btn-outline{
  background:#fff;
  border-color:var(--accent);
  color:var(--accent);
  font-weight:700;
}
.btn-ghost{
  background:#fff;
}
.btn-lg{
  padding:14px 18px;
  border-radius:14px;
}
.btn-xl{
  padding:18px 24px;
  font-size:20px;
  font-weight:700;
  border-radius:16px;
}
.w-full{width:100%}

/* footer */
.footer{
  padding:var(--space-6) 0;
  border-top:1px solid var(--line);
  background:#fff;
  margin-top:var(--space-8);
}

/* 智能推荐广告区 */
.smart-rec {margin-top: var(--space-7);}
.smart-rec .grid3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--space-4);
}
.smart-rec .rec-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:var(--space-5);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.smart-rec .rec-eyebrow{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.smart-rec .rec-title{font-weight:700}
.smart-rec .rec-bullets{
  margin:6px 0 0 0;
  padding-left:18px;
}
.smart-rec .rec-cta{
  margin-top:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* 邮件浮动捕获 */
.email-cap {margin-top: var(--space-7);}
.email-cap .cap-wrap{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:var(--space-6);
  align-items:center;
}
.email-cap .cap-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:var(--space-6);
}
.email-cap .input-row{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.email-cap input[type="email"]{
  flex:1;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  font-size:16px;
}
/* Base note style */
.email-cap .note{
  font-size:13px;
  margin-top:6px;
}
/* Success / error states */
.email-cap .note-success{
  color:#047857;
  font-weight:600;
  background:#ecfdf5;
  border-radius:6px;
  padding:4px 8px;
  margin-top:10px;
}
.email-cap .note-error{
  color:#b91c1c;
  font-weight:600;
  background:#fef2f2;
  border-radius:6px;
  padding:4px 8px;
  margin-top:10px;
}

/* 浮动样式 */
.email-cap.email-cap-float{margin-top:0;}
.email-cap-float{
  position:fixed;
  right:24px;
  bottom:24px;
  max-width:420px;
  z-index:40;
}
.email-cap-float .cap-wrap{
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(15,23,42,0.18);
  padding:16px 18px 14px;
  border:1px solid var(--line);
}
.email-cap-float .cap-panel{
  border:none;
  padding:0;
}
.email-cap-float .cap-wrap{
  display:none;
}
.email-cap-float.open .cap-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
}
.email-cap-toggle{
  width:100%;
  border-radius:999px;
  border:none;
  background:#111827;
  color:#f9fafb;
  padding:8px 14px;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(15,23,42,0.35);
  margin-bottom:8px;
}
.email-cap-toggle-label{font-weight:600;}
.email-cap-toggle-chevron{
  font-size:11px;
  opacity:.8;
  transform:translateY(1px);
}
.email-cap-float.open .email-cap-toggle-chevron{
  transform:translateY(1px) rotate(180deg);
}
@media (max-width: 768px){
  .email-cap-float{
    left:12px;
    right:12px;
    bottom:16px;
    max-width:none;
  }
}

.badge-soft{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#eef3f8;
  border:1px solid var(--line);
  font-size:12px;
  color:#465164;
}

/* 响应式布局 */
@media (max-width: 1000px){
  :root{--max:100%}
  .topbar .wrap{grid-template-columns:1fr}
  .progress{padding:0}
  .quiz-frame,.result-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width: 768px){
  :root{--space-6:20px}
  .btn,.tile{padding:14px 16px}
  .display{font-size:36px}
  .lead{font-size:17px}
  .quiz,.results{padding:32px 0}
  .hero{padding:40px 0}
  .grid2{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:stretch}
  .btn-lg,.w-full,.cta .btn{width:100%}
  .topbar .wrap{padding:10px 20px}
  .smart-rec .grid3{grid-template-columns:1fr}
  .refs{padding:var(--space-5)}
}
@media (max-width: 480px){
  .display{font-size:30px}
  .h2{font-size:24px}
  .h3{font-size:18px}
  body{line-height:1.8}
  .tile{gap:12px}
  .qhead{flex-direction:column;align-items:flex-start;gap:6px}
  .progress .bar{height:8px}
  .stepper .step{height:20px;font-size:11px}
}