/* ============================================================
   奶系人格测试专属
   ------------------------------------------------------------
   原版是一张奶油色软卡片；这里保留「先凭第一反应选」的节奏，
   但把表面收回站点体系：纸白卡片 + 3px 墨线 + 硬投影。
   页面 CSS 只写 .pt-*，不覆盖共享层已有的 .wrap / .btn / .card。
   动态条用 SVG 的 width/x 属性，不写 style 属性，严格 CSP 可用。
   ============================================================ */
.pt-stage{ padding:calc(var(--nav-h) + clamp(32px,5vw,64px)) 0 clamp(56px,8vw,96px); }
.pt-shell{ width:min(100%,760px); margin:0 auto; }
.pt-screen{ min-width:0; }

/* ---------- 开始页 ---------- */
.pt-intro{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(240px,.92fr);
  gap:clamp(24px,4vw,56px); align-items:center;
}
.pt-title{
  font-family:var(--serif-display); font-size:var(--fs-3xl);
  line-height:1.06; letter-spacing:0; margin:0; text-wrap:balance;
}
.pt-title span{
  display:inline-block; padding:0 .08em;
  background:var(--yellow); border:2px solid var(--ink);
  box-shadow:var(--sd-1); border-radius:var(--r-sm);
}
.pt-lede{
  margin:var(--sp-5) 0 0; max-width:28em;
  color:var(--text-2); font-size:var(--fs-md); line-height:1.85;
}
.pt-facts{
  list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-2);
  padding:0; margin:var(--sp-6) 0 var(--sp-5);
}
.pt-facts li{
  padding:.42em .9em; border:2px solid var(--ink); border-radius:var(--r-pill);
  background:var(--paper); box-shadow:var(--sd-1);
  font-size:var(--fs-xs); font-weight:800;
}
.pt-start{ width:100%; justify-content:center; margin-top:var(--sp-2); font-size:var(--fs-md); }
.pt-note{
  margin:var(--sp-5) 0 0; padding:var(--sp-4) var(--sp-5);
  border:2px solid var(--ink); border-radius:var(--r-md);
  background:rgba(255,253,246,.78); color:var(--text-2);
  font-size:var(--fs-xs); line-height:1.85;
}
.pt-intro-art{
  margin:0; padding:var(--sp-4); display:flex; flex-direction:column;
  align-items:center; gap:var(--sp-3);
  background:var(--paper); border:var(--bw) solid var(--ink);
  box-shadow:var(--sd-3); border-radius:var(--r-lg);
}
.pt-intro-art img{ display:block; width:min(100%,240px); height:auto; }
.pt-intro-art figcaption{
  color:var(--text-2); font-size:var(--fs-xs); line-height:1.6; text-align:center;
}

/* ---------- 答题页 ---------- */
.pt-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); margin-bottom:var(--sp-4);
}
.pt-count{ margin:0; font-size:var(--fs-sm); font-weight:800; }
.pt-count b{ font-size:var(--fs-lg); }
.pt-progress{
  appearance:none; -webkit-appearance:none;
  display:block; width:100%; height:14px; margin:0 0 var(--sp-5);
  border:2px solid var(--ink); border-radius:var(--r-pill);
  background:var(--paper); overflow:hidden;
}
.pt-progress::-webkit-progress-bar{ background:var(--paper); }
.pt-progress::-webkit-progress-value{ background:var(--yellow); }
.pt-progress::-moz-progress-bar{ background:var(--yellow); }
.pt-card{
  padding:clamp(22px,4vw,34px); background:var(--paper);
  border:var(--bw) solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--sd-3);
}
.pt-q{
  display:flex; align-items:center; justify-content:center;
  min-height:2.8em; margin:var(--sp-1) 0 var(--sp-6);
  font-family:var(--sans); font-size:var(--fs-xl); font-weight:900;
  line-height:1.45; text-align:center;
}
.pt-ends{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.pt-end{ flex:1; max-width:47%; font-size:var(--fs-sm); font-weight:800; line-height:1.5; }
.pt-end-right{ text-align:right; }
.pt-tiny{ display:block; margin-top:var(--sp-1); color:var(--text-2); font-size:var(--fs-xs); font-weight:600; }
.pt-scale{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--sp-2); }
.pt-scale button{
  min-height:46px; aspect-ratio:1/1;
  border:2px solid var(--ink); border-radius:50%;
  background:var(--paper); color:var(--ink);
  font-family:inherit; font-size:var(--fs-md); font-weight:900;
  box-shadow:var(--sd-1); cursor:pointer;
  transition:background var(--dur-ui) var(--ease-soft);
}
.pt-scale button:hover{ background:var(--cream); }
.pt-scale button.is-sel{ background:var(--yellow); box-shadow:var(--sd-2); }
.pt-scale button:focus-visible{ outline:3px solid var(--pink-d); outline-offset:2px; }
.pt-hint{ margin:var(--sp-4) 0 0; color:var(--text-2); font-size:var(--fs-xs); line-height:1.6; text-align:center; }
.pt-quiz-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); margin-top:var(--sp-5); }
.pt-quiz-foot .pt-hint{ margin:0; text-align:right; }

/* ---------- 结果页 ---------- */
.pt-result-card{
  padding:clamp(24px,4vw,38px); text-align:center;
  background:var(--paper); border:var(--bw) solid var(--ink);
  border-radius:var(--r-lg); box-shadow:var(--sd-3);
}
.pt-result-card img{
  display:block; width:min(72vw,280px); height:min(72vw,280px);
  margin:0 auto; object-fit:contain;
  background:var(--paper); border:2px solid var(--ink);
  border-radius:var(--r-md); box-shadow:var(--sd-1);
}
.pt-lead{ margin:var(--sp-5) 0 0; color:var(--text-2); font-size:var(--fs-sm); font-weight:700; letter-spacing:.12em; }
.pt-name{ margin:var(--sp-1) 0 0; font-family:var(--serif-display); font-size:var(--fs-2xl); font-weight:900; line-height:1.15; }
.pt-tag{ margin:var(--sp-3) 0 0; color:var(--text-2); font-size:var(--fs-md); line-height:1.7; }
.pt-divider{
  display:flex; align-items:center; gap:var(--sp-3);
  margin:var(--sp-6) 0 var(--sp-4);
  color:var(--text-2); font-size:var(--fs-xs); font-weight:800; letter-spacing:.16em;
}
.pt-divider::before,.pt-divider::after{ content:""; flex:1; height:2px; background:var(--ink); }
.pt-real{
  padding:clamp(18px,3vw,28px); background:var(--cream);
  border:2px solid var(--ink); border-radius:var(--r-md);
  box-shadow:var(--sd-1);
}
.pt-who{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-2); }
.pt-code{ font-family:var(--mono); font-size:var(--fs-xl); font-weight:900; letter-spacing:.06em; }
.pt-zh{ color:var(--text-2); font-size:var(--fs-md); font-weight:800; }
.pt-desc{ margin:0 0 var(--sp-5); color:var(--text-2); font-size:var(--fs-sm); line-height:1.8; }
.pt-dim{ margin:0 0 var(--sp-5); }
.pt-dim:last-child{ margin-bottom:0; }
.pt-dim-head{ display:flex; justify-content:space-between; gap:var(--sp-2); margin-bottom:var(--sp-2); color:var(--text-2); font-size:var(--fs-xs); font-weight:700; }
.pt-dim-head .pt-win{ color:var(--ink); font-weight:900; }
.pt-dim-name{ color:var(--text-2); font-weight:600; }
.pt-track{ height:14px; overflow:hidden; background:var(--paper); border:2px solid var(--ink); border-radius:var(--r-pill); }
.pt-track svg{ display:block; width:100%; height:100%; }
.pt-bar-win{ fill:var(--yellow); }
.pt-bar-lose{ fill:var(--cream); }
.pt-dim-foot{ display:flex; justify-content:space-between; gap:var(--sp-2); margin-top:var(--sp-1); color:var(--text-2); font-size:var(--fs-xs); }
.pt-clearnote{ margin:var(--sp-5) 0 0; color:var(--text-2); font-size:var(--fs-xs); line-height:1.8; }
.pt-clearnote b{ color:var(--ink); }
.pt-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5); }
.pt-actions .btn{ flex:1 1 160px; justify-content:center; }

/* ---------- 题库来源（始终可见） ---------- */
.pt-credit{
  margin:var(--sp-6) 0 0; color:var(--text-2);
  font-size:var(--fs-xs); line-height:1.85; text-align:center;
}
.pt-credit a{ color:var(--ink); }

/* ---------- 复制兜底面板 ---------- */
.pt-modal{
  position:fixed; inset:0; z-index:900; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(26,23,18,.55);
}
.pt-modal.is-open{ display:flex; }
.pt-modal-box{
  width:min(100%,460px); padding:clamp(18px,4vw,28px);
  background:var(--paper); border:var(--bw) solid var(--ink);
  border-radius:var(--r-lg); box-shadow:var(--sd-3);
}
.pt-modal-box h2{ margin:0 0 var(--sp-3); font-size:var(--fs-xl); }
.pt-modal-box p{ margin:0 0 var(--sp-3); color:var(--text-2); font-size:var(--fs-sm); line-height:1.7; }
.pt-copy{
  width:100%; min-height:130px; padding:var(--sp-3);
  border:2px solid var(--ink); border-radius:var(--r-sm);
  background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-sm); line-height:1.75; resize:vertical;
}
.pt-copy:focus{ outline:3px solid var(--pink-d); outline-offset:2px; }
.pt-modal-close{ width:100%; justify-content:center; margin-top:var(--sp-3); }
.pt-toast{
  position:fixed; left:50%; bottom:32px; z-index:950;
  max-width:calc(100vw - 32px); transform:translateX(-50%);
  padding:.7em 1.2em; border:2px solid var(--yellow); border-radius:var(--r-pill);
  background:var(--ink); color:var(--yellow);
  font-size:var(--fs-sm); font-weight:700; text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-ui) var(--ease-soft);
}
.pt-toast.is-on{ opacity:1; }

@media (max-width:760px){
  .pt-intro{ grid-template-columns:1fr; }
  .pt-intro-art img{ width:min(100%,200px); }
}
@media (max-width:560px){
  .pt-q{ font-size:var(--fs-lg); }
  .pt-scale button{ min-height:44px; }
  .pt-quiz-foot{ align-items:flex-start; flex-direction:column; }
  .pt-quiz-foot .pt-hint{ text-align:left; }
}
@media (prefers-reduced-motion:reduce){
  .pt-scale button,.pt-toast{ transition:none; }
}