/* Med Voyage 健康自测 v0.1 预览 — tokens mirror website-deploy/assets/style.css */
:root{--navy:#0B2545;--teal:#2A9D8F;--teal-soft:#e6f3f1;--gold:#C9A227;--off:#F7F5F2;--white:#FFFFFF;--ink:#2b3a4f;--muted:#6b7686;--line:#e4e0d8;
--r:12px;--r-lg:16px;
--font:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--off)}
body{font-family:var(--font);color:var(--ink);line-height:1.65;font-size:16px;min-height:100vh;min-height:100dvh}
a{color:var(--teal);text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit}
.phone{max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--off)}
@media (min-width:520px){
  body{padding:28px 0}
  .phone{min-height:calc(100vh - 56px);background:var(--white);border-radius:28px;box-shadow:0 18px 48px rgba(11,37,69,.10),0 0 0 1px var(--line);overflow:hidden}
}
/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px 12px;background:inherit;position:sticky;top:0;z-index:4}
.wordmark{height:30px;display:block}
.progress{display:flex;align-items:center;gap:10px;flex:1;max-width:170px}
.progress[hidden]{display:none}
.bar{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--teal);border-radius:99px;transition:width .35s ease}
.count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
main{flex:1;display:flex;flex-direction:column;padding:4px 20px 20px;position:relative}
/* cover */
.cover-hero{padding:12px 4px 8px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.12em;color:var(--teal);margin-bottom:10px}
.eyebrow img{width:20px;height:20px}
.cover-hero h1{font-size:24px;line-height:1.4;color:var(--navy);font-weight:600;margin:0 0 10px}
.cover-hero p{margin:0;color:var(--muted);font-size:15px}
.notice{margin:18px 0 6px;padding:12px 14px;border-radius:var(--r);background:var(--teal-soft);color:var(--navy);font-size:14px;line-height:1.6;display:flex;gap:10px}
.notice::before{content:"";flex:none;width:4px;border-radius:4px;background:var(--teal)}
.tracks{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.track{display:block;text-align:left;width:100%;border:1px solid var(--line);background:var(--white);border-radius:var(--r-lg);padding:18px 18px 16px;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,border-color .2s;position:relative;overflow:hidden}
.track{background:radial-gradient(circle at 100% 0,var(--teal-soft) 0,var(--teal-soft) 64px,var(--white) 65px)}
.track.men{background:radial-gradient(circle at 100% 0,#e7ebf1 0,#e7ebf1 64px,var(--white) 65px)}
.track:hover{box-shadow:0 8px 24px rgba(11,37,69,.08);border-color:#cfd8d6}
.track:active{transform:scale(.985)}
.track .t-head{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.track .t-name{font-size:22px;font-weight:600;color:var(--navy)}
.track .t-go{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--white);background:var(--teal);padding:6px 14px;border-radius:99px}
.track.men .t-go{background:var(--navy)}
.track .t-sub{position:relative;z-index:1;margin:10px 0 0;font-size:14px;line-height:1.7;color:var(--ink)}
.track .t-meta{position:relative;z-index:1;margin-top:12px;font-size:12px;color:var(--muted);letter-spacing:.04em}
.cover-foot{margin-top:auto;padding-top:22px;font-size:12px;color:var(--muted);text-align:center;line-height:1.7}
/* question */
.stage{flex:1;display:flex;flex-direction:column;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 18px 18px;box-shadow:0 6px 20px rgba(11,37,69,.05);will-change:transform}
@media (min-width:520px){.card{box-shadow:none}}
.card.enter-next{animation:inR .28s ease}
.card.enter-prev{animation:inL .28s ease}
@keyframes inR{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes inL{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
.q-track{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--teal);letter-spacing:.08em;margin-bottom:8px}
.q-track .dot{width:6px;height:6px;border-radius:50%;background:var(--teal)}
.q-title{font-size:20px;line-height:1.5;color:var(--navy);font-weight:600;margin:0 0 4px}
.q-title .hint{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:4px}
.intro{margin:0 0 14px;padding:10px 12px;border-radius:var(--r);background:var(--off);font-size:13px;line-height:1.7;color:var(--ink)}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 14px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--white);cursor:pointer;font-size:15.5px;line-height:1.5;color:var(--ink);transition:border-color .15s,background .15s,transform .1s}
.opt:active{transform:scale(.99)}
.opt .box{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid #c4ccd3;display:grid;place-items:center;transition:all .15s}
.opt .box svg{width:14px;height:14px;opacity:0;transition:opacity .15s}
.opt[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-soft);color:var(--navy)}
.opt[aria-pressed="true"] .box{background:var(--teal);border-color:var(--teal)}
.opt[aria-pressed="true"] .box svg{opacity:1}
.opt.neutral{color:var(--muted);border-style:dashed}
.opt.neutral[aria-pressed="true"]{border-style:solid;background:#f1f2f4;border-color:#9aa4b1;color:var(--ink)}
.opt.neutral[aria-pressed="true"] .box{background:#9aa4b1;border-color:#9aa4b1}
.swipe-hint{text-align:center;font-size:12px;color:var(--muted);margin:12px 0 0}
.nav{position:sticky;bottom:0;display:grid;grid-template-columns:1fr auto 1.3fr;gap:10px;align-items:center;padding:14px 0 calc(6px + env(safe-area-inset-bottom));margin-top:auto;background:linear-gradient(to top,var(--off) 78%,rgba(247,245,242,0))}
@media (min-width:520px){.nav{background:linear-gradient(to top,var(--white) 78%,rgba(255,255,255,0))}}
.btn{appearance:none;border:0;cursor:pointer;border-radius:99px;padding:13px 18px;font-size:15px;font-weight:500;text-align:center;display:inline-flex;justify-content:center;align-items:center;gap:6px}
.btn.primary{background:var(--teal);color:var(--white)}
.btn.primary:active{background:#238679}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid #c9d0d8}
.btn.text{background:transparent;color:var(--muted);padding:13px 10px}
.btn.navy{background:var(--navy);color:var(--white)}
.spacer{height:8px}
/* results */
.res-head h1{font-size:23px;color:var(--navy);margin:8px 0 6px;line-height:1.4;font-weight:600}
.res-head p{margin:0 0 16px;color:var(--muted);font-size:14px}
.res-list{display:flex;flex-direction:column;gap:12px}
.theme{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 16px 14px;border-left:4px solid var(--teal);animation:inR .3s ease both}
.theme h2{font-size:17px;color:var(--navy);margin:0 0 8px;line-height:1.5}
.theme .num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--teal-soft);color:var(--teal);font-size:12px;font-weight:600;margin-right:8px;vertical-align:2px}
.theme .fact{margin:0;font-size:14.5px;line-height:1.75}
.picked{margin-top:10px}
.picked .lbl{font-size:12px;color:var(--muted);margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12.5px;line-height:1.45;padding:4px 10px;border-radius:99px;background:var(--off);color:var(--ink);border:1px solid var(--line)}
.src{font-size:12px;color:var(--muted);margin:14px 2px 0}
.links{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.links a{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:var(--r);background:var(--white);border:1px solid var(--line);color:var(--navy);font-size:15px}
.links a span{color:var(--teal)}
.links a.main{background:var(--navy);color:var(--white);border-color:var(--navy)}
.links a.main span{color:var(--white)}
.again{margin:14px 0 18px;width:100%}
.disclaimer{position:sticky;bottom:0;margin:auto -20px -20px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--navy);color:#dfe6ee;font-size:12.5px;line-height:1.65;z-index:3}
.disclaimer b{color:var(--gold);font-weight:500}
.empty{background:var(--white);border:1px dashed #c9d0d8;border-radius:var(--r-lg);padding:28px 20px;text-align:center}
.empty img{width:44px;height:44px;opacity:.9}
.empty h2{font-size:18px;color:var(--navy);margin:10px 0 6px}
.empty p{margin:0;color:var(--muted);font-size:14px}
.noscript{padding:20px;text-align:center}