/* ================================================================
 * styles.css — 「人味检测」H5 移植合并样式
 * 由小程序 wxss 合并转换：app.wxss + index/test/result 三页
 * 转换规则：1 设计单位 = 0.01rem（N → (N/100)rem）；page → #app
 * 顺序：先全局(app)，再 index / test / result
 * ================================================================ */

/* ---------- body 复位 ---------- */
body { margin: 0; background: #F3F1EA; }

/* ================================================================
 * app.wxss — 全局设计系统（检测报告风）
 * ================================================================ */

#app {
  /* —— 色板 —— */
  --paper:    #F3F1EA;   /* 纸张底 */
  --card:     #FFFFFF;   /* 报告卡 */
  --ink:      #1C1C1C;   /* 正文 / 大字 */
  --ink-2:    #5A5650;   /* 次要文字 */
  --faint:    #9C978B;   /* 编号 / 弱信息 */
  --line:     #E5E1D7;   /* 细线 */
  --line-2:   #D6D1C4;   /* 稍重的线 */
  --stamp:    #C0463B;   /* 印章红（编号/检测标识） */
  --human:    #2F9E6B;   /* 人味·达标 绿 */
  --warn:     #C8902B;   /* 中间档 琥珀 */
  --machine:  #5C6B78;   /* 人机·冷蓝灰 */

  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 0.28rem;
  line-height: 1.6;

  max-width: 7.5rem;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

/* 等宽：编号、数值、英文标识用，营造仪器感 */
.mono {
  font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, "Courier New", monospace;
  font-feature-settings: "tnum";
  letter-spacing: 0.005rem;
}

/* —— 布局 —— */
.page { min-height: 100vh; box-sizing: border-box; }
.pad   { padding-left: 0.4rem; padding-right: 0.4rem; }
.col   { display: flex; flex-direction: column; }
.row   { display: flex; flex-direction: row; align-items: center; }
.between { justify-content: space-between; }
.center  { align-items: center; justify-content: center; }
.grow  { flex: 1; }
.gap-s { gap: 0.12rem; }
.gap   { gap: 0.24rem; }
.gap-l { gap: 0.4rem; }

/* —— 文字 —— */
.t-faint  { color: var(--faint); }
.t-sub    { color: var(--ink-2); }
.t-stamp  { color: var(--stamp); }
.t-human  { color: var(--human); }
.t-machine{ color: var(--machine); }
.label {
  font-size: 0.22rem; color: var(--faint); letter-spacing: 0.04rem;
  text-transform: uppercase;
}
.h-title { font-size: 0.4rem; font-weight: 700; letter-spacing: 0.01rem; }
.h-big   { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.01rem; }

/* —— 报告卡 —— */
.report {
  background: var(--card);
  border: 0.02rem solid var(--line-2);
  border-radius: 0.1rem;
  box-shadow: 0 0.02rem 0 var(--line);
}
.report-pad { padding: 0.36rem 0.36rem; }

/* 报告头：左标题 + 右编号 */
.rpt-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 0.2rem; border-bottom: 0.02rem solid var(--line);
}
.rpt-head__no { font-size: 0.22rem; color: var(--stamp); }

/* 章节标号：  01 · 综合判定  ——————————— */
.sec { display: flex; align-items: center; gap: 0.16rem; margin: 0.36rem 0 0.22rem; }
.sec__no { font-size: 0.22rem; color: var(--stamp); font-weight: 700; }
.sec__t  { font-size: 0.24rem; color: var(--ink-2); letter-spacing: 0.02rem; white-space: nowrap; }
.sec__line { flex: 1; height: 0.02rem; background: var(--line); }

/* 细线分隔 */
.hair { height: 0.02rem; background: var(--line); }
.hair-dash {
  height: 0; border-top: 0.02rem dashed var(--line-2);
}

/* 键值行 */
.kv { display: flex; align-items: baseline; justify-content: space-between; padding: 0.14rem 0; }
.kv + .kv { border-top: 0.02rem solid var(--line); }
.kv__k { color: var(--ink-2); font-size: 0.26rem; }
.kv__v { font-size: 0.26rem; }

/* —— 仪表条（维度检测） —— */
.bar { position: relative; height: 0.12rem; background: #EEEAE0; border-radius: 9.99rem; overflow: hidden; }
.bar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9.99rem; transition: width .6s ease; }
.bar--human   .bar__fill { background: var(--human); }
.bar--warn    .bar__fill { background: var(--warn); }
.bar--machine .bar__fill { background: var(--machine); }
.bar--alert   .bar__fill { background: var(--stamp); }

/* —— 印章 —— */
.stamp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.08rem 0.18rem;
  color: var(--stamp);
  border: 0.03rem solid var(--stamp);
  border-radius: 0.08rem;
  font-size: 0.26rem; font-weight: 800; letter-spacing: 0.04rem;
  transform: rotate(-7deg);
  opacity: 0.92;
}

/* —— 标签 pill —— */
.tag {
  display: inline-block;
  padding: 0.06rem 0.18rem;
  font-size: 0.22rem; color: var(--ink-2);
  border: 0.02rem solid var(--line-2); border-radius: 9.99rem;
  background: #FAF8F3;
}

/* —— 处方 checkbox 项 —— */
.rx { display: flex; align-items: flex-start; gap: 0.18rem; padding: 0.2rem 0; }
.rx + .rx { border-top: 0.02rem dashed var(--line-2); }
.rx__box {
  flex: none; width: 0.34rem; height: 0.34rem; margin-top: 0.04rem;
  border: 0.03rem solid var(--ink); border-radius: 0.06rem;
}
.rx__txt { flex: 1; font-size: 0.28rem; color: var(--ink); line-height: 1.5; }

/* —— 按钮 —— */
.btn {
  display: flex; align-items: center; justify-content: center;
  height: 0.96rem; border-radius: 0.12rem;
  font-size: 0.3rem; font-weight: 600; letter-spacing: 0.02rem;
  box-sizing: border-box;
}
.btn::after { border: none; }
.btn--ink   { background: var(--ink); color: #FFF; }
.btn--ghost { background: transparent; color: var(--ink); border: 0.02rem solid var(--ink); }
.btn--ghost-faint { background: transparent; color: var(--ink-2); border: 0.02rem solid var(--line-2); }
.btn--block { width: 100%; }
.btn:active { opacity: 0.86; }

/* 角标装饰：报告四角的小直角刻度 */
.ticks { position: relative; }
.ticks::before, .ticks::after {
  content: ''; position: absolute; width: 0.22rem; height: 0.22rem;
  border-color: var(--line-2); border-style: solid;
}
.ticks::before { left: 0; top: 0; border-width: 0.03rem 0 0 0.03rem; }
.ticks::after  { right: 0; bottom: 0; border-width: 0 0.03rem 0.03rem 0; }

/* 工具 */
.full { width: 100%; }
.tac { text-align: center; }
.mt-s { margin-top: 0.16rem; } .mt { margin-top: 0.32rem; } .mt-l { margin-top: 0.56rem; }
.mb-s { margin-bottom: 0.16rem; } .mb { margin-bottom: 0.32rem; }
.safe-b { padding-bottom: calc(0.4rem + constant(safe-area-inset-bottom)); padding-bottom: calc(0.4rem + env(safe-area-inset-bottom)); }

/* ================================================================
 * index.wxss — 首页特有布局
 * ================================================================ */

/* meta 行的分隔点稍微提亮，避免和数字抢视线 */
.dot { color: var(--line-2); }

/* 维度标签换行兜底（窄屏不挤压） */
.tags-wrap { flex-wrap: wrap; }

/* 测评依据：低调的专业背书 */
.basis { line-height: 1.5; color: var(--faint); letter-spacing: 0.01rem; }

/* —— 合拍邀请横幅 —— */
.peer-banner { border-color: var(--stamp); background: #FCF4F2; }
.peer-stamp { font-size: 0.22rem; transform: rotate(-6deg); }
.peer-line { font-size: 0.3rem; font-weight: 700; color: var(--ink); line-height: 1.5; }

/* —— 上次检测卡 —— */
.last-card { margin-bottom: 0.08rem; }
.last-num-row { align-items: baseline; }
.last-num {
  font-size: 0.64rem; font-weight: 800; color: var(--ink);
  line-height: 1;
}
.last-unit { font-size: 0.24rem; }
.last-title { font-size: 0.3rem; font-weight: 700; color: var(--ink); }
.last-meta { align-items: flex-end; }
.last-date { font-size: 0.24rem; }
.last-replay { font-size: 0.22rem; }
.last-card:active { opacity: 0.88; }

/* —— teaser 灰态卡（不可点） —— */
.teaser { opacity: 0.5; }
.teaser-name { color: var(--ink-2); font-weight: 700; }

/* footer 与 teaser 拉开距离 */
.foot { margin-top: 0.56rem; }

/* ================================================================
 * test.wxss — 答题页特有样式
 * ================================================================ */

/* 题干：行高更舒展 */
.q-stem {
  line-height: 1.5;
}

/* 选项行：复用 .report 的白卡描边，这里只调内边距与排布 */
.opt {
  align-items: center;
  gap: 0.24rem;
  padding: 0.28rem 0.32rem;
  transition: border-color .15s ease, background .15s ease;
}

/* 选中态：描边变主墨色 + 背景微染 */
.opt--on {
  border-color: var(--ink);
  background: #FBF6EC;
}

/* 字母方框 */
.opt__k {
  flex: none;
  width: 0.52rem;
  height: 0.52rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.26rem;
  font-weight: 700;
  color: var(--ink-2);
  border: 0.02rem solid var(--line-2);
  border-radius: 0.06rem;
}
.opt__k--on {
  color: var(--card);
  background: var(--ink);
  border-color: var(--ink);
}

/* 选项文案 */
.opt__txt {
  font-size: 0.3rem;
  line-height: 1.45;
  color: var(--ink);
}

/* 底部上一题按钮：紧凑尺寸，不占满 */
.opt-prev {
  height: 0.72rem;
  padding: 0 0.32rem;
  font-size: 0.26rem;
}

/* 底部提示文字：右对齐收尾 */
.tip {
  text-align: right;
}

/* ================================================================
 * result.wxss — 结果页特有布局
 * ================================================================ */

.rpt-wrap { padding-top: 0.32rem; }

/* ===== Hero ===== */
.hero { align-items: flex-start; }
.hero-num { display: flex; align-items: baseline; }
.hero-num .h-big {
  font-size: 1.2rem; line-height: 1; color: var(--ink);
}
.hero-pct { font-size: 0.4rem; font-weight: 700; color: var(--ink-2); margin-left: 0.06rem; }
.hero-title { margin-top: 0.08rem; }
.hero-stamp { margin-top: 0.12rem; flex: none; }

/* ===== 主仪表（覆写高度，比维度条粗） ===== */
.bar-main { height: 0.18rem; }
.gauge-meta { font-size: 0.22rem; }

/* ===== 01 综合判定 ===== */
.verdict {
  position: relative;
  font-size: 0.32rem; font-weight: 600; line-height: 1.5;
  color: var(--ink);
  padding-left: 0.24rem;
  font-style: italic;
}
.verdict::before {
  content: ''; position: absolute; left: 0; top: 0.04rem; bottom: 0.04rem;
  width: 0.06rem; background: var(--stamp); border-radius: 0.04rem;
}
.analysis { line-height: 1.6; }
.tag-row { flex-wrap: wrap; }

/* ===== 02 维度检测 ===== */
.dims { display: flex; flex-direction: column; gap: 0.32rem; }
.dim { display: flex; flex-direction: column; }
.dim-desc { letter-spacing: 0.02rem; }

/* ===== 03 诊断 ===== */
.dx-head { margin-top: 0.04rem; }
.dx-stamp { transform: rotate(-4deg); }

/* ===== 04 处方 ===== */
.rx-hint { letter-spacing: 0.03rem; }
.rx-list { }

/* ===== 操作区 ===== */
.ops { display: flex; flex-direction: column; }
.share-btn {
  font-size: 0.3rem; font-weight: 600; letter-spacing: 0.02rem;
  line-height: normal; padding: 0;
}
.share-btn::after { border: none; }
.btn-busy { opacity: 0.7; }

/* ===== loading 态 ===== */
.probe-card { width: 100%; }
.probe-main { font-size: 0.4rem; letter-spacing: 0.04rem; color: var(--ink); }
.probe-line { font-size: 0.24rem; letter-spacing: 0.01rem; }
.probe-line--dim { opacity: 0.6; margin-top: 0.06rem; }

.probe-dots { display: flex; gap: 0.14rem; }
.probe-dot {
  width: 0.14rem; height: 0.14rem; border-radius: 9.99rem;
  background: var(--stamp);
  animation: probe-blink 1s infinite ease-in-out;
}
.probe-dot:nth-child(2) { animation-delay: 0.2s; }
.probe-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes probe-blink {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* ===== error 态 ===== */
.err-stamp { font-size: 0.28rem; }
.err-msg { font-size: 0.28rem; line-height: 1.6; }

/* ===== 离屏 canvas（移出可视区，含人量卡 5 维） ===== */
.card-canvas {
  position: fixed;
  left: -99.99rem; top: -99.99rem;
  width: 600px; height: 1040px;
}

/* ===== 合拍度报告 ===== */
.match-card { border-color: var(--stamp); }
.match-who { align-items: flex-start; }
.match-who .tar { align-items: flex-end; }
.who-name { font-size: 0.3rem; font-weight: 700; color: var(--ink); margin-top: 0.04rem; }
.who-h { font-size: 0.22rem; margin-top: 0.02rem; }
.who-x { font-size: 0.4rem; color: var(--line-2); align-self: center; padding: 0 0.12rem; }
.match-hero { padding: 0.08rem 0; }
.match-num .h-big { color: var(--stamp); }
.match-stamp { margin-top: 0.14rem; }
.match-title { text-align: center; }

.mrows { display: flex; flex-direction: column; gap: 0.28rem; }
.mrow { display: flex; flex-direction: column; gap: 0.1rem; }
.mrow-head { align-items: center; }
.mline { display: flex; align-items: center; gap: 0.14rem; }
.mlabel { flex: none; width: 0.52rem; font-size: 0.22rem; color: var(--machine); }
.mlabel--me { color: var(--stamp); }
.mval { flex: none; width: 0.48rem; text-align: right; font-size: 0.22rem; color: var(--ink-2); }
.mfill-a { background: var(--machine); }
.mfill-b { background: var(--stamp); }

.mtag { font-size: 0.2rem; padding: 0.02rem 0.14rem; border-radius: 9.99rem; border: 0.02rem solid var(--line-2); color: var(--ink-2); }
.mtag--same { color: var(--human); border-color: var(--human); }
.mtag--comp { color: var(--stamp); border-color: var(--stamp); }

.match-divider { display: flex; justify-content: center; padding: 0.4rem 0 0.08rem; }

/* ===== 分享卡浮层 ===== */
.mask {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(28, 28, 28, 0.66);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 0 0.6rem;
}
.card-pop { width: 100%; }
.card-img {
  width: 78%;
  border-radius: 0.12rem;
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.35);
}
.card-tip { color: #E8E4D8; letter-spacing: 0.02rem; text-align: center; }
.card-pop .full { width: 78%; }