/* ===========================================================
   性张力原型测评 · 素雅纸感皮肤
   米白纸底 / 墨色正文 / 单一赭石点缀 / 大留白
   =========================================================== */
:root{
  --paper:#F7F4EE;
  --paper-2:#FCFAF5;
  --surface:#FFFDF9;
  --ink:#1F1C19;
  --ink-2:#3D3831;
  --body:#4E4840;
  --muted:#877F73;
  --faint:#ADA598;
  --line:rgba(31,28,25,.13);
  --line-soft:rgba(31,28,25,.07);
  --accent:#A84E35;
  --accent-soft:rgba(168,78,53,.07);

  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",Georgia,"SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html{height:100%}
body{
  min-height:100%;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* 纸面：极淡的两处暖光，制造纸的呼吸感 */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 460px at 18% -6%, rgba(168,78,53,.06), transparent 68%),
    radial-gradient(620px 520px at 92% 8%, rgba(120,110,92,.055), transparent 70%);
}

.shell{
  position:relative;z-index:1;
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  padding:0 26px calc(34px + env(safe-area-inset-bottom));
}

.screen{display:none}
.screen.is-active{display:block;animation:rise .5s cubic-bezier(.22,.8,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .screen.is-active{animation:none}
  *{transition-duration:.01ms !important}
}

/* ---------------- 通用排版 ---------------- */
.eyebrow{
  font-size:10.5px;letter-spacing:.24em;
  color:var(--faint);
  margin-bottom:20px;
}
.display{
  font-family:var(--serif);
  font-size:clamp(48px,15vw,66px);
  line-height:1.05;
  font-weight:400;
  letter-spacing:.01em;
  color:var(--ink);
}
.display em{font-style:normal;color:var(--accent)}
.display.sm{font-size:clamp(36px,10.5vw,46px);line-height:1.2}

.lede{margin-top:26px;font-size:15.5px;line-height:1.95;color:var(--body)}
.lede-sm{margin-top:20px;font-size:14px;line-height:1.95;color:var(--body)}
.hl{color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:1px}

/* ---------------- 按钮 ---------------- */
.btn-primary{
  display:block;width:100%;
  padding:16px 24px;
  background:var(--ink);
  color:#FBF8F2;
  border:1px solid var(--ink);
  border-radius:3px;
  font-family:var(--sans);
  font-size:14.5px;font-weight:500;letter-spacing:.14em;
  cursor:pointer;
  transition:opacity .2s ease,transform .2s ease;
}
.btn-primary:hover{opacity:.86}
.btn-primary:active{transform:scale(.99)}
.btn-primary:disabled{opacity:.4;cursor:default;transform:none}

.btn-outline{
  display:block;width:100%;
  padding:15px 24px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--ink);
  font-family:var(--sans);font-size:14px;letter-spacing:.1em;
  cursor:pointer;text-align:center;text-decoration:none;
  transition:border-color .2s ease,background .2s ease;
}
.btn-outline:hover{border-color:rgba(31,28,25,.34);background:rgba(31,28,25,.02)}
.btn-outline:active{transform:scale(.99)}

.btn-ghost{
  background:transparent;border:none;color:var(--muted);
  font-family:var(--sans);font-size:13px;letter-spacing:.08em;
  padding:14px 0;cursor:pointer;transition:color .2s;
}
.btn-ghost:hover{color:var(--ink)}
.btn-ghost:disabled{opacity:.3;cursor:default}
.btn-ghost.wide{width:100%;text-align:center;margin-top:6px}

.disclaimer{margin-top:26px;font-size:11.5px;line-height:1.9;color:var(--faint)}
.disclaimer.center{text-align:center;padding:0 4px 8px}

/* ---------------- 密码门禁 ---------------- */
.login-inner{padding-top:clamp(72px,17vh,150px);padding-bottom:40px}
.code-input{
  display:block;width:100%;margin-top:34px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:3px;
  padding:17px 16px;
  color:var(--ink);
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:19px;letter-spacing:.3em;text-align:center;
  outline:none;
  -webkit-appearance:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.code-input::placeholder{
  letter-spacing:.08em;font-size:14px;color:var(--faint);
  font-family:var(--sans);
}
.code-input:focus{border-color:rgba(31,28,25,.45);box-shadow:0 0 0 3px rgba(31,28,25,.035)}
.code-input.bad{border-color:#B4544A;box-shadow:0 0 0 3px rgba(180,84,74,.07)}
.err{
  min-height:22px;margin-top:9px;font-size:12.5px;color:#A84E35;
  text-align:center;letter-spacing:.02em;
}
.login-inner .btn-primary{margin-top:6px}
.remain-line{
  margin-top:18px;text-align:center;
  font-size:12px;color:var(--muted);letter-spacing:.08em;
}
.remain-line b{color:var(--accent);font-weight:500}

/* ---------------- 开场 ---------------- */
.intro-inner{padding-top:clamp(58px,14vh,120px);padding-bottom:40px}
.stat-row{
  display:flex;
  margin:40px 0 36px;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:20px 0;
}
.stat{flex:1;text-align:center;border-right:1px solid var(--line-soft)}
.stat:last-child{border-right:none}
.stat b{
  display:block;font-family:var(--serif);
  font-size:27px;font-weight:400;letter-spacing:.01em;color:var(--ink);
}
.stat span{display:block;font-size:10.5px;color:var(--faint);margin-top:5px;letter-spacing:.1em}

.link-btn{
  display:block;width:100%;margin-top:16px;
  background:none;border:none;padding:6px 0;
  color:var(--muted);font-family:var(--sans);
  font-size:12.5px;letter-spacing:.06em;
  cursor:pointer;text-align:center;
  transition:color .2s;
}
.link-btn:hover{color:var(--accent)}

/* ---------------- 答题 ---------------- */
#screen-quiz{padding-top:calc(20px + env(safe-area-inset-top))}
.quiz-head{display:flex;align-items:center;gap:16px;padding-bottom:26px}
.bar{flex:1;height:1px;background:rgba(31,28,25,.10);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .42s cubic-bezier(.3,.9,.3,1)}
.counter{
  font-size:11px;color:var(--faint);letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}
.counter b{color:var(--ink);font-weight:500}

.quiz-body{padding-top:clamp(16px,5vh,46px);min-height:58vh}
.q-scene{
  font-size:10.5px;letter-spacing:.22em;color:var(--accent);
  margin-bottom:16px;
}
.q-text{
  font-family:var(--serif);
  font-size:clamp(21px,5.7vw,25px);
  font-weight:400;line-height:1.6;
  color:var(--ink);
  margin-bottom:32px;
  letter-spacing:.01em;
}
.options{display:flex;flex-direction:column;gap:10px}
.opt{
  width:100%;text-align:left;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:3px;
  padding:16px 17px;
  color:var(--body);
  font-family:var(--sans);font-size:14.5px;line-height:1.6;
  cursor:pointer;
  display:flex;gap:13px;align-items:flex-start;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.opt:hover{border-color:var(--line);background:var(--paper-2)}
.opt .k{
  font-size:10px;color:var(--faint);letter-spacing:.1em;
  padding-top:4px;min-width:11px;font-variant-numeric:tabular-nums;
}
.opt.sel{border-color:rgba(168,78,53,.55);background:var(--accent-soft);color:var(--ink)}
.opt.sel .k{color:var(--accent)}

.quiz-foot{padding-top:26px}

/* ---------------- 结果页 ---------------- */
#screen-result{padding-top:calc(44px + env(safe-area-inset-top));padding-bottom:34px}
.result-meta{
  font-size:10.5px;letter-spacing:.18em;color:var(--faint);
  margin-bottom:22px;
}
.result-head{margin-bottom:34px}
.archetype-name{
  font-family:var(--serif);
  font-size:clamp(46px,14vw,64px);
  font-weight:400;line-height:1.08;
  letter-spacing:.06em;
  color:var(--ink);
}
.archetype-en{
  font-size:10px;letter-spacing:.34em;color:var(--faint);
  margin-top:12px;text-transform:uppercase;
}
.tagline{
  margin-top:24px;
  font-family:var(--serif);
  font-size:17px;line-height:1.85;
  color:var(--ink-2);
  padding-left:15px;
  border-left:2px solid var(--accent);
}
.badge-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.badge{
  font-size:10.5px;letter-spacing:.05em;
  padding:5px 11px;border:1px solid var(--line);border-radius:100px;
  color:var(--muted);background:rgba(255,253,249,.6);
}
.badge strong{color:var(--ink);font-weight:500}

.card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:3px;
  padding:24px 21px;
  margin-bottom:11px;
}
.card-dark{background:rgba(168,78,53,.055);border-color:rgba(168,78,53,.18)}
.card-label{
  font-size:10px;letter-spacing:.22em;color:var(--faint);
  margin-bottom:16px;
}
.card-label.light{color:rgba(168,78,53,.9)}

.radar-wrap{display:flex;justify-content:center;margin:0 -8px}
.radar-wrap svg{width:100%;max-width:330px;height:auto;overflow:visible}
.radar-note{
  margin-top:16px;font-size:12.5px;line-height:1.9;color:var(--muted);
  text-align:center;
}
.source-line{font-family:var(--serif);font-size:16px;line-height:1.9;color:var(--ink-2)}

.list-trait,.list-good,.list-poison{list-style:none;display:flex;flex-direction:column;gap:14px}
.list-trait li,.list-good li,.list-poison li{
  font-size:14px;line-height:1.8;color:var(--body);
  padding-left:18px;position:relative;
}
.list-trait li::before{
  content:"";position:absolute;left:0;top:11px;
  width:7px;height:1px;background:var(--accent);
}
.list-good li::before{
  content:"";position:absolute;left:1px;top:9px;
  width:5px;height:5px;border-radius:50%;border:1px solid rgba(168,78,53,.45);
}
.list-poison li{color:var(--ink-2)}
.list-poison li::before{
  content:"";position:absolute;left:1px;top:10px;
  width:5px;height:5px;background:rgba(168,78,53,.7);
}

.grav{display:flex;flex-direction:column}
.grav-item{padding:2px 0}
.grav-tag{
  font-size:10px;letter-spacing:.16em;color:var(--accent);
  margin-bottom:8px;
}
.grav-item p{font-size:13.5px;line-height:1.8;color:var(--body)}
.grav-line{height:1px;background:var(--line-soft);margin:18px 0}

.theory-card{background:var(--paper-2);border-color:var(--line-soft)}
.theory-name{
  font-family:var(--serif);font-size:19px;font-weight:400;line-height:1.55;
  color:var(--ink);margin-bottom:6px;
}
.theory-from{font-size:11px;color:var(--faint);letter-spacing:.04em;margin-bottom:14px}
.theory-text{font-size:13.5px;line-height:1.9;color:var(--body)}

.second-card{background:transparent;border-style:dashed}
.second-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.second-name{font-family:var(--serif);font-size:20px;color:var(--ink)}
.second-dist{font-size:11px;color:var(--faint);letter-spacing:.06em}
.second-note{margin-top:12px;font-size:13px;line-height:1.85;color:var(--muted)}

.advice-card{border-left:2px solid var(--accent);background:var(--surface)}
.advice{font-family:var(--serif);font-size:16.5px;line-height:1.85;color:var(--ink-2)}

.action-row{margin-top:28px}
.action-row .btn-outline{margin-top:10px}

/* ---------------- 长图弹层 ---------------- */
.modal{
  position:fixed;inset:0;z-index:50;
  background:rgba(26,23,20,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:none;
  align-items:flex-start;justify-content:center;
  padding:calc(22px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.modal.open{display:flex}
.modal-inner{
  width:100%;max-width:340px;margin:auto;
  display:flex;flex-direction:column;gap:14px;
}
.modal-hint{
  text-align:center;font-size:11.5px;color:rgba(251,248,242,.6);
  letter-spacing:.08em;line-height:1.7;
}
.canvas-wrap{
  border:1px solid rgba(251,248,242,.14);
  border-radius:3px;overflow:hidden;
  background:#F7F4EE;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
#shareImg{display:block;width:100%;height:auto}
.modal-actions{display:flex;flex-direction:column;gap:9px}
.modal-actions .btn-primary{
  background:#FBF8F2;color:var(--ink);border-color:#FBF8F2;text-align:center;
}
.modal-actions .btn-outline{
  border-color:rgba(251,248,242,.28);color:#FBF8F2;background:transparent;
}
.modal-actions .btn-outline:hover{border-color:rgba(251,248,242,.6);background:rgba(251,248,242,.06)}
.modal-actions .btn-ghost{color:rgba(251,248,242,.55);padding:10px 0}
.modal-actions .btn-ghost:hover{color:#FBF8F2}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:clamp(30px,8vh,66px);
  transform:translate(-50%,12px);
  background:rgba(31,28,25,.94);
  color:#FBF8F2;
  padding:11px 20px;border-radius:100px;
  font-size:12.5px;letter-spacing:.04em;line-height:1.4;
  opacity:0;pointer-events:none;
  transition:opacity .24s ease,transform .24s ease;
  z-index:80;max-width:88vw;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------------- 落地页 / 收银台 ---------------- */
.shop-inner{padding-top:clamp(52px,12vh,104px);padding-bottom:44px}
.shop-inner .display{font-size:clamp(40px,12vw,56px);line-height:1.14}

.selling{
  list-style:none;
  margin:34px 0 30px;
  border-top:1px solid var(--line-soft);
}
.selling li{
  display:flex;align-items:baseline;gap:16px;
  padding:15px 0;
  border-bottom:1px solid var(--line-soft);
}
.selling b{
  font-family:var(--serif);font-size:24px;font-weight:400;
  color:var(--accent);min-width:38px;letter-spacing:.02em;
}
.selling span{font-size:13.5px;line-height:1.65;color:var(--body)}

.price-block{
  margin-top:8px;
  padding:22px 0 4px;
  border-top:1px solid var(--line);
}
.price-line{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.price{
  font-family:var(--serif);
  font-size:40px;line-height:1;letter-spacing:.01em;color:var(--ink);
}
.price-note{font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.pay-hint{
  margin-top:12px;text-align:center;
  font-size:11.5px;color:var(--faint);letter-spacing:.04em;
}

.pay-inner{padding-top:clamp(56px,13vh,110px);padding-bottom:40px}
.order-line{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:30px;padding:13px 0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  font-size:12px;color:var(--muted);letter-spacing:.04em;
}
.order-line span:last-child{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:11.5px;color:var(--ink-2);letter-spacing:.02em;
}

.code-box{
  margin-top:26px;
  padding:26px 20px 22px;
  background:var(--surface);
  border:1px solid rgba(168,78,53,.22);
  border-radius:3px;
  text-align:center;
}

/* 人工发码：收款码 + 步骤 */
.manual-box{
  margin-top:26px;padding:24px 20px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:3px;
  text-align:center;
}
.qr-wrap{
  display:inline-flex;padding:9px;
  border:1px solid var(--line);border-radius:4px;
  background:#fff;margin-bottom:18px;
}
.qr-wrap img{display:block;width:190px;height:190px;object-fit:contain}

/* 扫码支付：二维码 + 自动到账 */
.scan-box{
  margin-top:26px;padding:26px 20px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:3px;
  text-align:center;
}
.scan-qr{
  display:inline-flex;padding:10px;
  background:#fff;border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.scan-qr img{display:block;width:228px;height:228px}
.scan-amount{
  margin-top:16px;
  font-family:var(--serif,Georgia,serif);
  font-size:26px;color:var(--ink);letter-spacing:.02em;
}
.scan-tip{
  margin-top:8px;font-size:12.5px;line-height:1.8;color:var(--body);
  letter-spacing:.02em;
}
.scan-alt{
  display:inline-block;margin-top:4px;
  font-size:11px;color:var(--faint);
}
.scan-wait{
  margin-top:16px;padding-top:14px;
  border-top:1px dashed var(--line);
  font-size:11.5px;color:var(--faint);
  display:inline-flex;align-items:center;gap:7px;
  letter-spacing:.01em;
}
.dot-pulse{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:dotPulse 1.3s ease-in-out infinite;
}
.dot-ok{
  width:6px;height:6px;border-radius:50%;background:#5a8a5f;
}
@keyframes dotPulse{
  0%,100%{opacity:.25;transform:scale(.85)}
  50%{opacity:1;transform:scale(1)}
}
@media (max-width:360px){
  .scan-qr img{width:200px;height:200px}
}
.manual-steps{text-align:left;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.manual-step{
  display:flex;align-items:flex-start;gap:9px;
  font-size:12.5px;line-height:1.7;color:var(--body);
}
.manual-step b{color:var(--ink);font-weight:600;letter-spacing:.04em}
.step-no{
  flex:none;width:17px;height:17px;margin-top:2px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--accent-soft);color:var(--accent);
  font-size:10px;font-weight:600;
}
.code-label{
  font-size:10.5px;letter-spacing:.22em;color:var(--faint);
  margin-bottom:14px;
}
.code-val{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:32px;letter-spacing:.18em;color:var(--ink);
  margin-bottom:8px;line-height:1.2;
}
.code-box .btn-ghost{padding:8px 0;color:var(--accent)}
.code-tip{
  margin-top:10px;font-size:11.5px;line-height:1.8;color:var(--faint);
  letter-spacing:.01em;
}

.pay-actions{margin-top:26px}
.pay-actions .btn-outline{margin-top:10px}

/* 模拟支付提示条 */
.mock-flag{
  margin-top:22px;padding:12px 16px;
  background:rgba(168,78,53,.055);
  border-left:2px solid var(--accent);
  font-size:11.5px;line-height:1.8;color:var(--muted);
}

/* ---------------- 小屏微调 ---------------- */
@media (max-width:360px){
  .shell{padding:0 18px calc(28px + env(safe-area-inset-bottom))}
  .opt{padding:14px 15px;font-size:14px}
  .archetype-name{font-size:42px}
  .card{padding:20px 17px}
  .code-input{font-size:17px;letter-spacing:.24em}
}

/* 大屏：保持阅读栏宽度，不放大也好看 */
@media (min-width:560px){
  .shell{max-width:560px;padding:0 40px 60px}
  .display{font-size:72px}
  .q-text{font-size:26px}
  .archetype-name{font-size:68px}
}