:root{
  --bg: #f5f8f6;
  --panel: #ffffff;
  --card: rgba(0,0,0,.03);
  --card2: rgba(0,0,0,.035);
  --text: rgba(0,0,0,.90);
  --muted: rgba(0,0,0,.56);
  --border: rgba(0,0,0,.08);
  --accent: #3f6e55;        /* 参考图的墨绿按钮 */
  --accentSoft: rgba(63,110,85,.12);
  --accent2: #22c55e;
  --warn: #f59e0b;
  --danger:#ef4444;
  --shadow: 0 16px 40px rgba(0,0,0,.08);
  --shadow2: 0 10px 24px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Microsoft YaHei", Arial, sans-serif;
  background:
    radial-gradient(900px 700px at 18% 6%, rgba(34,197,94,.12), transparent 55%),
    radial-gradient(900px 700px at 86% 8%, rgba(63,110,85,.12), transparent 55%),
    var(--bg);
  color: var(--text);
}

code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.container{max-width: 520px; margin: 0 auto; padding: 10px 14px 40px}
.nav{
  display:grid;
  grid-template-columns: 40px 1fr auto;
  align-items:center;
  gap: 8px;
  padding: 10px 4px 14px;
}
.nav__title{
  text-align:center;
  font-weight: 800;
  letter-spacing:.2px;
}
.nav__right{display:flex; gap: 8px; align-items:center}
.iconBtn{
  appearance:none;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(0,0,0,.72);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.iconBtn:hover{background: rgba(0,0,0,.035); border-color: rgba(0,0,0,.06)}
.iconBtn:active{transform: translateY(1px)}

.app{display:flex; flex-direction:column; gap: 14px}
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow2);
}
.card--outer{
  border-radius: 24px;
  padding: 18px;
}
.card--inner{box-shadow:none; background: var(--card); border-radius: 18px}
.card__title{font-weight: 750; font-size: 16px; margin-bottom: 10px}
.muted{color: var(--muted)}
.hidden{display:none !important}
.mt4{margin-top:4px}
.mt8{margin-top:8px}
.mt16{margin-top:16px}

.btn{
  appearance:none;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.02);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 16px;
  cursor:pointer;
  font-weight: 650;
}
.btn:hover{border-color: rgba(0,0,0,.14)}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: var(--accent);
  border-color: rgba(63,110,85,.75);
  color: #fff;
}
.btn--primary:hover{filter: brightness(1.02)}
.btn--ghost{background: transparent}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}
.btn--xl{padding: 14px 18px; border-radius: 18px; min-width: 160px}

.row{display:flex; align-items:center}
.row--gap{gap:10px}
.row--between{justify-content:space-between}
.row--end{justify-content:flex-end}

.prose{line-height:1.7}
.prose p{margin: 0 0 10px}
.prose ul{margin: 8px 0 0 18px}

.callout{
  border: 1px solid var(--border);
  background: var(--card2);
  border-radius: 18px;
  padding: 12px;
}
.callout--warn{border-color: rgba(245,158,11,.35)}
.callout__title{font-weight:750; margin-bottom: 8px}
.list{margin:0; padding-left: 18px; line-height: 1.7}

.quizHeader{display:flex; align-items:center; justify-content:space-between; gap: 12px}
.progressBar{height: 10px; width: 320px; max-width: 56vw; border-radius: 999px; background: rgba(0,0,0,.06); border:1px solid var(--border); overflow:hidden}
.progressBar__fill{height:100%; width:0%; background: linear-gradient(90deg, rgba(63,110,85,.95), rgba(34,197,94,.75))}

.question__stem{font-size: 16px; font-weight: 750; line-height: 1.55; margin-top: 14px}
.options{display:flex; flex-direction:column; gap: 10px; margin-top: 14px}
.opt{
  display:flex; gap: 10px; align-items:flex-start;
  padding: 12px 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.018);
  border-radius: 18px;
  cursor:pointer;
}
.opt:hover{border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.028)}
.opt input{margin-top: 2px}
.opt__label{line-height:1.55}
.opt--selected{border-color: rgba(63,110,85,.45); background: var(--accentSoft)}

.hero{
  padding: 8px 4px 6px;
  text-align:center;
}
.hero__title{
  font-weight: 900;
  font-size: 30px;
  letter-spacing: .2px;
  line-height: 1.15;
}
.hero__subtitle{margin-top: 10px}
.hero__meta{line-height:1.6}

.resultHero{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 8px 6px 2px;
  align-items:center;
}
.resultHero__type{
  font-weight: 900;
  font-size: 34px;
  letter-spacing:.3px;
  color: var(--accent);
  margin-top: 4px;
}
.resultHero__match{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.72);
  font-weight: 700;
}
.imageCard{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(63,110,85,.06), rgba(34,197,94,.04));
  border-radius: 18px;
  padding: 10px;
}
.resultImage{
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  display:block;
  border-radius: 14px;
  background: #fff;
}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
@media (max-width: 820px){ .grid2{grid-template-columns: 1fr} }

.dimList{display:flex; flex-direction:column; gap: 10px}
.dimItem{
  display:flex; flex-direction:column; gap: 6px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.dimItem__top{display:flex; align-items:baseline; justify-content:space-between; gap: 10px}
.dimItem__name{font-weight: 800}
.dimItem__code{color: var(--muted); font-weight: 700}
.dimItem__desc{color: var(--muted)}

.dimBars{display:flex; flex-direction:column; gap: 12px; margin-top: 12px}
.barRow{display:grid; grid-template-columns: 260px 1fr 72px; gap: 12px; align-items:center}
@media (max-width: 820px){ .barRow{grid-template-columns: 1fr; gap: 6px} }
.barRow__name{font-weight: 750}
.bar{
  position:relative;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(63,110,85,.18), rgba(63,110,85,.22) 35%, rgba(0,0,0,.10) 50%, rgba(34,197,94,.22) 65%, rgba(34,197,94,.28));
  border: 1px solid var(--border);
}
.bar__ticks{
  position:absolute; inset:0;
  background-image: linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 20% 100%;
  opacity: .35;
  border-radius: 999px;
  pointer-events:none;
}
.bar__marker{
  position:absolute;
  top: 50%;
  width: 10px; height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.10);
}
.barRow__val{color: var(--muted); text-align:right; font-variant-numeric: tabular-nums}

.skeleton{
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,.07), rgba(0,0,0,.03));
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
  margin-top: 10px;
}
@keyframes shimmer{0%{background-position: 0% 0%}100%{background-position: 200% 0%}}

.dlg{border:none; padding:0; background: transparent}
.dlg::backdrop{background: rgba(0,0,0,.45)}
.dlg__panel{
  width: min(820px, calc(100vw - 24px));
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow2);
  padding: 14px;
}
.dlg__header{display:flex; align-items:center; justify-content:space-between; gap: 10px}
.dlg__title{font-weight: 850}
.dlg__body{margin-top: 10px}
.jumpGrid{display:grid; grid-template-columns: repeat(10, 1fr); gap: 8px}
@media (max-width: 820px){ .jumpGrid{grid-template-columns: repeat(6, 1fr)} }
.jumpBtn{
  padding: 10px 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  font-weight: 750;
}
.jumpBtn:hover{background: rgba(255,255,255,.06)}
.jumpBtn--done{border-color: rgba(34,197,94,.40); background: rgba(34,197,94,.10)}
.jumpBtn--cur{border-color: rgba(63,110,85,.45); background: rgba(63,110,85,.10)}

.footer{padding: 14px 14px 0}

.tagRow{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.tag{
  border: 1px solid var(--border);
  background: rgba(63,110,85,.08);
  color: rgba(0,0,0,.78);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 750;
  font-size: 13px;
}
.tag--strong{
  background: rgba(63,110,85,.14);
  border-color: rgba(63,110,85,.22);
}