/* =========================================================================
 * 超级问心 · 用户端页面皮肤 v1（女性向 / 牛油果绿 + 珊瑚粉）
 * 加载顺序：styles.css → logo.css → theme.css → user.css（本文件最后）
 * 作用域：只被 miniapp/index.html（用户端）引用，达人中心 / 管理后台不受影响。
 * 原则：
 *   1) 颜色 / 圆角 / 阴影 / 间距 / 字号一律走 theme.css 的 :root 令牌，
 *      本文件只做「组合」——不引入新的品牌色值；
 *   2) 不改 styles.css 里任何业务结构（类名 / 文案 / 断言依赖的属性全保留）；
 *   3) 0 图片 / 0 外部字体 / 0 网络请求，装饰全部由 CSS 渐变与伪元素完成。
 *
 * 视觉语言：
 *   · 底色奶油白 + 绿色/粉色柔光，避免大面积纯白；
 *   · 主流程用牛油果绿（前进/确认/品牌），轻交互与情绪用珊瑚粉（场景/徽章/装饰）；
 *   · 圆角走 pill / r-l / r-xl 三档，阴影只用 sh-1 / sh-2 / sh-brand；
 *   · 页面层级：大标题（深绿 800）→ 说明（ink-2）→ 弱信息（muted 11–12px）。
 * ========================================================================= */

/* =========================================================================
 * 0. 基础件覆盖（按钮 / 面板 / 弹层 / 提示）
 *    只改用户端：达人中心与后台不加载本文件。
 * ========================================================================= */

/* ---------------------------------------------------------- 0.1 按钮 */
.btn {
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: var(--fs-l);
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .14s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

.btn:active { transform: translateY(1px) scale(.994); }

/* 主按钮：牛油果绿渐变 + 绿色柔光（替换 styles.css 里旧的紫色主按钮） */
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: var(--surface);
  box-shadow: var(--sh-brand);
}

.btn-primary:hover { box-shadow: 0 16px 30px -16px var(--brand-deep); }

/* 次按钮：白底绿描边，留白多、亲和 */
.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  box-shadow: var(--sh-1);
}

.btn-ghost:hover {
  background: var(--brand-mist);
  border-color: var(--brand);
  color: var(--brand-deep);
}

.btn:disabled {
  opacity: .48;
  box-shadow: none;
}

/* ---------------------------------------------------------- 0.2 面板 */
.panel:not(.panel-merged) {
  margin: 14px;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

/* 卡内一级标题：左侧绿→粉短竖条 */
.panel:not(.panel-merged) > h3 {
  position: relative;
  margin: 0 0 12px;
  padding-left: 13px;
  font-size: var(--fs-l);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink);
}

.panel:not(.panel-merged) > h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}

.tc-intro {
  margin: 0 0 6px;
  font-size: var(--fs-s);
  line-height: 1.8;
  color: var(--ink-2);
}

/* ---------------------------------------------------- 0.3 弹层 / 提示 */
.sheet {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 18px 16px 24px;
  box-shadow: var(--sh-2);
}

.sheet h4 {
  margin: 0 0 4px;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--brand-deep);
}

.sheet .sheet-sub { color: var(--muted); }

.pay-method {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--sh-1);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.pay-method.active {
  border-color: var(--brand);
  background: var(--brand-mist);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.pay-method .pm-name { color: var(--ink); font-weight: 700; }
.pay-method .pm-tip { color: var(--muted); }

.sheet-total b {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-deep);
}

.toast {
  background: var(--brand-deep);
  color: var(--surface);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: var(--fs-m);
  box-shadow: var(--sh-2);
}

/* =========================================================================
 * 1. 首页（品牌 hero + 类目圆标条 + 测评卡）
 * ========================================================================= */

#screen-home { padding-top: 2px; }

/* ------------------------------------------------------- 1.1 品牌 hero */
/* 2026-10-19 第四次改版（客户反馈「整体不协调」）：旧版是「标题在最上 / 插画在右 /
   搜索框浮出卡外下方」三条互不相干的横带，且插画自带的白色圆角卡片嵌在 hero 里
   形成双层画框。本版改为「单层满幅构图」：
   · 插画铺满整张 hero（right bottom），自带的卡片边/圆角被裁到 hero 之外，全卡只剩一层框；
   · 文案叠在插画左侧留白区，压一层从左到右的白色 scrim 保对比度；
   · 搜索框收回 hero 内部底部，作为构图的收尾一行；hero 高度压到 270px。
   零外部资源：插画仍是 logo.css 的 --hero-illus（内联 data-URI，构建时随 CSS 内联）。 */
.home-hero {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 200px;
  margin: 8px 14px 0;
  padding: 18px 18px 24px;
  border: 0;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: none;
}

/* 插画层（单层满幅）：铺满整张 hero（right bottom），并向右/下/上各多铺 12px，
   把插画自带的浅绿卡片边与圆角裁到 hero 之外 —— 全卡只剩 hero 自己的一层画框。
   同一背景栈里压两层 scrim（不额外加装饰元素）：
   · 左→右白色渐变：文案压在左侧留白区时的对比度；
   · 底部白色渐变：让搜索框这一行落在干净的白底上，插画从搜索框上沿自然收住。 */
/* 满幅 banner：插画 cover 铺满 hero（右对齐），左半部分本来就是留白，
   再叠一层左→右白色渐变 scrim，让文案永远落在干净的白底上。 */
.home-illus {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 24px;
  background: var(--hero-illus) right center / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%);
  background-size: auto 100%;
  pointer-events: none;
}

/* 主张标题：24/800 两行，落在插画左侧留白区（约 9 字/行） */
.home-hero .home-title {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 212px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: .01em;
  color: var(--brand-deep);
}

/* 信任点 chips：白色药丸 + 5px 绿点，紧跟标题成组，不再单独成一条横带 */
.home-hero .home-trust {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  max-width: 252px;
}

.home-hero .home-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  backdrop-filter: blur(2px);
}

.home-hero .home-chip i {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

/* 搜索框：回到 hero 内部，margin-top:auto 钉在卡底，作为构图收尾的一行；
   左右与文案对齐（hero 的 20px 内边距），白底药丸 46px，聚焦绿描边 */
.home-search {
  position: relative;
  z-index: 3;
  margin: -18px 28px 10px;
}

.home-search .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  height: 46px;
  padding: 0 8px 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 22px -16px rgba(45, 70, 45, .5), var(--sh-1);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.home-search .search-box:focus-within {
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 4px var(--brand-mist), 0 10px 22px -16px rgba(45, 70, 45, .5);
}

.home-search .search-box .search-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-mist);
  font-size: 13px;
  line-height: 1;
}

.home-search .search-box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--fs-m);
  outline: none;
}

.home-search .search-box input::placeholder { color: var(--muted); }


/* --------------------------------------------------- 1.2 区块标题 */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 16px 10px;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink);
}

.section-title .sec-bar {
  flex: none;
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}

.section-title small {
  margin-left: 2px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--muted);
}

/* -------------------------------------------------- 1.3 类目圆标条 */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 14px;
}

.cat-item {
  position: relative;
  overflow: hidden;
  padding: 13px 8px 11px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform .14s ease, border-color .16s ease, box-shadow .18s ease;
}

/* 选中态：整卡铺一层雾绿，边框与光影换成品牌绿 */
.cat-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--brand-mist) 0%, transparent 68%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}

.cat-item:active { transform: scale(.97); }

.cat-item.active {
  border-color: var(--brand);
  box-shadow: var(--sh-brand);
}

.cat-item.active::after { opacity: 1; }

/* 圆形图标托底：默认浅绿，选中后换品牌绿渐变（emoji 仍是彩色，不挑底色） */
.cat-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 7px;
  border-radius: 50%;
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--surface), var(--sh-1);
  font-size: 20px;
  line-height: 1;
}

.cat-item.active .cat-icon {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
}

.cat-name {
  position: relative;
  z-index: 1;
  display: block;
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.cat-item.active .cat-name { color: var(--brand-deep); }

.cat-desc {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ----------------------------------------------------- 1.4 测评卡片 */
.test-list { padding: 0 14px; }

.test-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  padding: 14px 30px 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}

.test-card:active {
  transform: scale(.988);
  border-color: var(--brand);
}

/* 左侧绿→粉细饰条，卡片像一页彩色索引卡 */
.test-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand), var(--accent));
  opacity: .6;
}

/* 右侧「可点击」箭头（纯 CSS 描边，不是文案） */
.test-card::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-top: 2px solid var(--line-strong);
  border-right: 2px solid var(--line-strong);
  transform: rotate(45deg);
}

.tc-cover {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--brand-soft) 0%, var(--accent-soft) 100%);
  box-shadow: inset 0 0 0 1px var(--surface), var(--sh-1);
  font-size: 25px;
}

/* 卡片之间轮换三种柔和底色，列表不呆板 */
.test-card:nth-child(3n + 2) .tc-cover {
  background: linear-gradient(150deg, var(--accent-soft) 0%, var(--violet-soft) 100%);
}

.test-card:nth-child(3n + 3) .tc-cover {
  background: linear-gradient(150deg, var(--brand-mist) 0%, var(--brand-soft) 100%);
}

.tc-body {
  flex: 1;
  min-width: 0;
}

.tc-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
}

.test-card .tc-intro {
  display: -webkit-box;
  margin: 4px 0 8px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--fs-s);
  line-height: 1.7;
  color: var(--ink-2);
}

.tc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 10.5px;
  color: var(--muted);
}

.tc-meta span {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--brand-mist);
  white-space: nowrap;
}

/* 最后一项是类目名：用粉色 differentiate 内容标签与元信息 */
.tc-meta span:last-child {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.badge-hot {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
}

.badge-new {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
}

.empty {
  padding: 34px 0;
  text-align: center;
  font-size: var(--fs-m);
  color: var(--muted);
}

/* =========================================================================
 * 2. 封面 / 详情页（hero + 说明卡 + 信息条 + 大按钮 + 结果预览网格）
 * ========================================================================= */

#screen-detail { padding-top: 2px; }

/* ------------------------------------------------ 2.1 标题区 hero */
.detail-hero {
  position: relative;
  overflow: hidden;
  margin: 12px 14px 10px;
  padding: 22px 20px 20px;
  border-radius: var(--r-xl);
  color: var(--surface);
  background:
    radial-gradient(84% 72% at 108% -16%, var(--accent) 0%, transparent 56%),
    linear-gradient(156deg, var(--brand-deep) 0%, var(--brand) 74%, var(--brand-deep) 100%);
  box-shadow: var(--sh-2);
}

/* 左下角一层雾绿，避免整块绿发闷 */
.detail-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 64% at -4% 110%, var(--brand-mist) 0%, transparent 60%);
  opacity: .28;
  pointer-events: none;
}

.detail-hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.detail-kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--surface);
  opacity: .82;
}

.detail-emoji {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--sh-2);
  font-size: 26px;
}

.detail-title {
  position: relative;
  z-index: 1;
  margin: 14px 0 8px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: .01em;
  color: var(--surface);
  text-shadow: 0 2px 10px var(--brand-deep);
}

.detail-sub {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--fs-m);
  line-height: 1.8;
  color: var(--surface);
  opacity: .92;
}

/* 题量 / 轴数 / 结果数 / 用时：白描边的小药丸，像徽章一样排开 */
.detail-facts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--brand-soft);
  font-size: 11.5px;
  color: var(--surface);
}

.detail-facts span {
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand-soft);
  white-space: nowrap;
}

.detail-facts i {
  font-style: normal;
  opacity: .4;
}

/* ------------------------------------------------- 2.2 虚线说明卡 */
.detail-brief {
  margin: 0 14px;
  padding: 18px 16px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-l);
  background: linear-gradient(168deg, var(--brand-mist) 0%, var(--surface) 62%);
  box-shadow: var(--sh-1);
}

.detail-brief p {
  margin: 0 0 10px;
  font-size: var(--fs-m);
  line-height: 1.9;
  color: var(--ink-2);
}

.detail-brief p:last-child { margin-bottom: 0; }

.detail-brief b { color: var(--brand-deep); }

.detail-brief em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent-deep);
}

.detail-warn {
  padding-top: 10px;
  border-top: 1px dashed var(--line-strong);
  color: var(--warn) !important;
  font-size: var(--fs-s) !important;
}

/* 两条轴的 chip：白底绿字，柔和但清晰 */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 14px;
}

.chip {
  padding: 4px 11px;
  border: 1px solid var(--brand-soft);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--brand-deep);
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: var(--sh-1);
}

/* ----------------------------------------- 2.3 题量 / 用时 / 参与 */
.detail-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 14px;
  font-size: 10.5px;
  color: var(--muted);
}

.detail-meta span {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--sh-1);
  text-align: center;
}

.detail-meta b {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--brand-deep);
}

.notice {
  margin: 12px 14px;
  padding: 11px 13px;
  border-radius: var(--r-m);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--fs-s);
  line-height: 1.7;
}

/* -------------------------------------------------- 2.4 开始按钮 */
.detail-cta { margin: 16px 14px 0; }

.detail-cta .btn {
  min-height: 54px;
  padding: 15px 18px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
}

.detail-cta-sub {
  margin-top: 9px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--muted);
}

.detail-sep {
  margin: 20px 0 6px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 6px;
  color: var(--brand-soft);
}

/* ------------------------------------------- 2.5 结果预览网格 */
.detail-tiers { margin: 0 14px 26px; }

.detail-tiers-h {
  margin: 0;
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--brand-deep);
}

.detail-tiers-sub {
  margin: 7px 0 14px;
  text-align: center;
  font-size: var(--fs-s);
  color: var(--muted);
}

.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tier-card {
  position: relative;
  overflow: hidden;
  padding: 16px 13px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}

/* 彩色顶条：4 种结果各一个色相，全部来自品牌令牌 */
.tier-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
}

.tier-card[data-tone="1"]::before { background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
.tier-card[data-tone="2"]::before { background: linear-gradient(90deg, var(--violet), var(--accent)); }
.tier-card[data-tone="3"]::before { background: linear-gradient(90deg, var(--brand), var(--accent)); }

.tier-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
}

.tier-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.tier-card[data-tone="1"] .tier-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tier-card[data-tone="2"] .tier-dot { background: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.tier-card[data-tone="3"] .tier-dot { background: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-soft); }

.tier-name {
  margin: 8px 0 4px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}

.tier-line {
  font-size: var(--fs-s);
  line-height: 1.7;
  color: var(--ink-2);
}

.tier-open {
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-deep);
  letter-spacing: .02em;
}

.tier-open b {
  display: inline-block;
  transition: transform .18s ease;
}

.tier-card.is-open .tier-open b { transform: translateY(1px); }

.tier-expand {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed var(--line-strong);
}

.tier-barnum {
  margin: 0;
  font-size: var(--fs-s);
  line-height: 1.9;
  color: var(--ink-2);
}

.tier-hint {
  margin-top: 9px;
  padding: 7px 10px;
  border-radius: var(--r-s);
  background: var(--brand-mist);
  font-size: 11px;
  line-height: 1.65;
  color: var(--brand-deep);
}

/* 展开态：横跨两列，边框与阴影切到品牌绿 */
.tier-card.is-open {
  grid-column: 1 / -1;
  border-color: var(--brand);
  box-shadow: var(--sh-2);
}

.tier-card.is-open .tier-open { color: var(--accent-deep); }

.detail-cta-bottom { margin: 14px 0 0; }

.detail-cta-bottom .btn {
  min-height: 46px;
  font-size: var(--fs-m);
  font-weight: 700;
  border-radius: var(--r-pill);
}

/* =========================================================================
 * 3. 答题页（进度 + 场景卡 + 题卡 + 选项选中态）
 * ========================================================================= */

#screen-quiz { padding-top: 2px; }

.quiz-head { padding: 12px 16px 0; }

.quiz-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .02em;
}

/* 题号：把当前序号做成品牌绿的超大数字 */
.quiz-line #quiz-index b {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-deep);
}

/* 完成度：粉色胶囊 */
.quiz-line #quiz-pct {
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 700;
  white-space: nowrap;
}

/* 进度条：绿→粉渐变，末端一颗小白珠，像小灯泡走到哪亮到哪 */
.progress {
  position: relative;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  box-shadow: inset 0 1px 2px var(--line-strong);
  overflow: visible;
}

.progress-fill {
  position: relative;
  height: 100%;
  min-width: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  box-shadow: var(--sh-brand);
  transition: width .25s ease;
}

/* 进度为 0 时不画末端小珠，避免第一题看起来像「已经答过一点」 */
.progress-fill[style*="width:0%"]::after { display: none; }

.progress-fill::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--sh-1);
}

/* ------------------------------------------------------- 3.1 题卡 */
.q-card {
  position: relative;
  overflow: hidden;
  margin: 16px 14px;
  padding: 20px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 106% -10%, var(--accent-soft) 0%, transparent 52%),
    var(--surface);
  box-shadow: var(--sh-2);
}

/* 场景卡：珊瑚粉底 + 小圆点，先给情绪、再给题干 */
.q-scene {
  position: relative;
  padding: 11px 14px 11px 32px;
  border: 0;
  border-radius: var(--r-m);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: var(--fs-m);
  line-height: 1.75;
}

.q-scene::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--surface);
}

.q-text {
  margin: 14px 0 4px;
  font-size: 18.5px;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink);
}

.q-hint {
  display: inline-flex;
  margin: 8px 0 2px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-mist);
  color: var(--brand-deep);
  font-size: 11.5px;
  font-weight: 600;
}

/* ----------------------------------------------------- 3.2 选项 */
.opts { margin-top: 14px; }

.opt {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--sh-1);
  font-size: var(--fs-l);
  line-height: 1.55;
  color: var(--ink);
  cursor: pointer;
  transition: transform .12s ease, border-color .14s ease, background-color .14s ease, box-shadow .16s ease;
}

.opt:last-child { margin-bottom: 0; }

.opt:active { transform: scale(.988); }

/* 字母圆标：默认浅绿底深绿字 */
.opt .key {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 800;
}

.opt-label {
  flex: 1;
  min-width: 0;
}

/* 右侧勾选圈：选中后填充品牌绿 + 白色对勾 */
.opt-ico {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  transition: background-color .14s ease, border-color .14s ease;
}

/* 选中态：品牌绿描边 + 雾绿底 + 外圈柔光 */
.opt.selected {
  border-color: var(--brand);
  background: linear-gradient(160deg, var(--brand-mist) 0%, var(--surface) 72%);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.opt.selected .key {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: var(--surface);
  box-shadow: var(--sh-brand);
}

.opt.selected .opt-ico {
  border-color: var(--brand);
  background: var(--brand);
}

.opt.selected .opt-ico::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3.5px;
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--surface);
  border-bottom: 2px solid var(--surface);
  transform: rotate(42deg);
}

.quiz-nav { gap: 12px; }

.quiz-nav .btn {
  min-height: 46px;
  font-size: var(--fs-m);
}

/* =========================================================================
 * 4. 结果页（卡 1 揭晓头 / 付费块 / 完整报告卡 + 真锁马赛克）
 *    结构、顺序、文案一律不动，只换皮肤。
 * ========================================================================= */

/* ------------------------------------------------- 4.1 卡 1 揭晓头 */
.panel-merged {
  margin: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}

.panel-merged .result-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 24px 30px;
  text-align: center;
  color: var(--surface);
  background: linear-gradient(156deg, var(--brand-deep) 0%, var(--brand) 70%, var(--brand-deep) 100%);
}

/* 右上角一团珊瑚粉柔光：绿底上开一朵粉云，女性向的关键一笔 */
.hero-glow {
  position: absolute;
  top: -28%;
  right: -26%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 62%);
  opacity: .62;
  pointer-events: none;
}

.panel-merged .tier-label {
  position: relative;
  z-index: 1;
  font-size: 26px;
  /* 老 webview 不认 clamp 时保留上一行；窄屏自动收一档，9 字长标签也不顶边 */
  font-size: clamp(23px, 6.1vw, 28px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: 3px;
  text-indent: 3px;
  text-shadow: 0 2px 12px var(--brand-deep);
}

/* 标签与一句话之间的饰线：珊瑚粉两端渐隐 */
.panel-merged .hero-orn {
  position: relative;
  z-index: 1;
  display: block;
  width: 52px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, var(--accent-soft) 50%, transparent);
}

.panel-merged .tier-line {
  position: relative;
  z-index: 1;
  max-width: 330px;
  margin: 15px auto 0;
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--surface);
  opacity: .93;
}

/* 正文层：白底 + 右上角一点雾绿；与头部之间一条渐隐细线 */
.panel-merged .merged-sec {
  position: relative;
  padding: 26px 22px 30px;
  background:
    radial-gradient(160px 160px at 104% -8%, var(--brand-soft) 0%, transparent 72%),
    var(--surface);
}

.panel-merged .merged-sec::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-soft) 22%, var(--brand-soft) 78%, transparent);
}

.panel-merged .merged-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: var(--fs-s);
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--ink-2);
}

.panel-merged .merged-h::before {
  content: "";
  flex: none;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}

.panel-merged .merged-h::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-left: 2px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* 巴纳姆段：编辑级正文排版（首行缩进 + 两端对齐 + 1.95 行高） */
.panel-merged .merged-body .report-section { margin: 0; }

.panel-merged .merged-body .report-section p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.95;
  letter-spacing: .2px;
  color: var(--ink-2);
  text-align: justify;
  text-indent: 2em;
}

/* --------------------------------------------------- 4.2 付费解锁块 */
.paywall {
  position: relative;
  overflow: hidden;
  margin: 14px;
  padding: 20px 18px 18px;
  border-radius: var(--r-xl);
  color: var(--surface);
  background: linear-gradient(152deg, var(--brand-deep) 0%, var(--brand) 100%);
  box-shadow: var(--sh-2);
}

.pay-glow {
  position: absolute;
  right: -46px;
  top: -46px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 66%);
  opacity: .52;
  pointer-events: none;
}

.paywall h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--surface);
}

.paywall p {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  font-size: var(--fs-s);
  line-height: 1.85;
  color: var(--surface);
  opacity: .9;
}

/* 说明文案（pay-note）：左侧一道粉色饰条，强调但不抢价 */
.paywall .pay-note {
  margin-bottom: 10px;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--accent);
  opacity: 1;
}

.price-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0 14px;
}

.paywall .price {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-soft);
}

.paywall .price-old {
  font-size: var(--fs-s);
  color: var(--surface);
  opacity: .6;
  text-decoration: line-through;
}

.paywall .price-row > span:last-child {
  font-size: 11px;
  color: var(--surface);
  opacity: .82;
}

/* 解锁按钮：绿卡上放一颗珊瑚粉按钮，整个页面唯一的高饱和点 */
#btn-unlock {
  position: relative;
  z-index: 1;
  min-height: 50px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: var(--surface);
  font-size: var(--fs-l);
  font-weight: 800;
  box-shadow: 0 14px 28px -18px var(--accent-deep);
}

#btn-unlock:active { transform: translateY(1px) scale(.994); }

/* 已解锁提示卡：雾绿底 + 绿色对勾圆标 */
#unlocked-panel {
  overflow: hidden;
  border-color: var(--brand-soft);
  background: linear-gradient(160deg, var(--brand-mist) 0%, var(--surface) 72%);
}

#unlocked-panel h3 {
  position: relative;
  padding-left: 28px;
  color: var(--brand-deep);
}

#unlocked-panel h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: var(--sh-brand);
}

#unlocked-panel h3::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 4px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--surface);
  border-bottom: 2px solid var(--surface);
  transform: rotate(42deg);
}

/* 付费降级提示（抖音 iOS）：沿用 notice，但给一层虚线框更像「说明」 */
#pay-degraded { border: 1px dashed var(--warn); }

/* ----------------------------------------- 4.3 完整报告卡（真锁） */
.panel-report > h3 { margin-bottom: 14px; }

.lock-card {
  margin: 0 0 12px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--sh-1);
  cursor: pointer;
}

.lock-card:last-child { margin-bottom: 0; }

.lock-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-m);
  font-weight: 800;
  line-height: 1.5;
  color: var(--brand-deep);
}

/* 报告标题前的粉色小圆点：5 份报告一眼数得清 */
.lock-title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.lock-teaser {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* 每段：小标题 + 马赛克正文（未解锁时 DOM 里没有任何真实正文） */
.lock-sec {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-m);
  background: var(--brand-mist);
}

.lock-sec-h {
  margin: 0 0 7px;
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-2);
}

.lock-mask { display: block; }

.mask-line {
  display: block;
  height: 12px;
  margin: 6px 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--line-strong) 0%, var(--line) 46%, var(--line-strong) 100%);
  filter: blur(1.2px);
}

.mask-line:last-child { margin-bottom: 0; }

.lock-flag {
  display: inline-flex;
  margin-top: 10px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 700;
}

/* 已解锁正文 / 报告详情页共用：小标题带绿→粉竖条 */
.report-body { margin-top: 4px; }

.report-section { margin: 0 0 14px; }

.report-section:last-child { margin-bottom: 0; }

.report-section h3 {
  position: relative;
  margin: 0 0 6px;
  padding-left: 12px;
  font-size: var(--fs-m);
  font-weight: 800;
  line-height: 1.55;
  color: var(--brand-deep);
}

.report-section h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 12px;
  margin-top: -6px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}

.report-section p {
  margin: 0;
  font-size: var(--fs-m);
  line-height: 1.95;
  color: var(--ink-2);
}

/* =========================================================================
 * 5. 分享海报页（海报托盘 + 模板切换 + 文案卡）
 * ========================================================================= */

#screen-share { padding-top: 4px; }

.share-box {
  margin: 14px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 80% at 110% -10%, var(--accent-soft) 0%, transparent 55%),
    linear-gradient(170deg, var(--brand-mist) 0%, var(--surface) 62%);
  box-shadow: var(--sh-2);
}

.poster-wrap {
  display: inline-block;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--sh-2);
}

.poster-wrap canvas {
  display: block;
  width: 270px;
  height: 390px;
}

/* 三组文案模板：浅绿托盘里放三颗药丸，选中的浮起来 */
.tpl-list {
  display: flex;
  gap: 4px;
  margin: 16px 14px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
}

.tpl-btn {
  flex: 1;
  padding: 9px 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--brand-deep);
  font-family: var(--font-head);
  font-size: var(--fs-s);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.tpl-btn.active {
  background: var(--surface);
  color: var(--accent-deep);
  box-shadow: var(--sh-1);
}

.tpl-text {
  margin: 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--sh-1);
  font-size: var(--fs-m);
  line-height: 1.9;
  color: var(--ink-2);
}

/* =========================================================================
 * 6. 个人中心（报告 / 订单 / 账号）
 * ========================================================================= */

#screen-mine { padding-top: 4px; }

.mine-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform .14s ease, border-color .16s ease;
}

.mine-item:last-child { margin-bottom: 0; }

.mine-item:active { transform: scale(.992); }

/* 报告行左侧的绿/粉双色小圆标（纯装饰） */
.mi-dot {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--brand-soft) 0%, var(--accent-soft) 100%);
  box-shadow: inset 0 0 0 1px var(--surface), var(--sh-1);
}

.mi-dot::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--brand);
}

.mi-main {
  flex: 1;
  min-width: 0;
}

.mi-title {
  overflow: hidden;
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-sub {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-tag {
  flex: none;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.mi-side { flex: none; text-align: right; }

.mi-amount {
  font-size: var(--fs-m);
  font-weight: 800;
  color: var(--accent-deep);
}

/* =========================================================================
 * 7. 计算中（转圈换成绿→粉）
 * ========================================================================= */

.calc {
  padding: 90px 30px;
  text-align: center;
  font-size: var(--fs-m);
  color: var(--muted);
}

.calc-ring {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border: 4px solid var(--brand-soft);
  border-top-color: var(--brand);
  border-right-color: var(--accent);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}

/* =========================================================================
 * 8. 响应式（窄屏 360–400 收一档）与动效偏好
 * ========================================================================= */
@media (max-width: 400px) {
  .home-hero {
    height: 262px;
    margin: 8px 12px 0;
    padding: 20px 16px 16px;
    border-radius: 20px;
  }

  .home-hero .home-title {
    font-size: 22px;
    max-width: 208px;
  }

  .home-hero .home-trust { margin-top: 12px; max-width: 226px; }

  /* 窄屏插画按高度铺满，画面里的人物更靠左，文案 scrim 提前收住，避免把人像刷白 */
  .home-illus {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .85) 80%, #fff 86%),
      linear-gradient(90deg, var(--surface) 0%, rgba(255, 255, 255, .9) 26%, rgba(255, 255, 255, 0) 40%),
      var(--hero-illus);
  }

  .cat-grid { gap: 8px; padding: 0 12px; }
  .cat-item { padding: 11px 6px 9px; border-radius: var(--r-m); }
  .cat-icon { width: 38px; height: 38px; font-size: 18px; }
  .cat-desc { font-size: 10px; }
  .test-list { padding: 0 12px; }
  .test-card { padding: 13px 28px 13px 14px; }
  .tc-cover { width: 50px; height: 50px; border-radius: 16px; font-size: 23px; }
  .section-title { margin: 18px 14px 8px; }

  .detail-hero,
  .detail-brief,
  .detail-meta,
  .detail-cta,
  .detail-tiers,
  .chip-row,
  .notice { margin-left: 12px; margin-right: 12px; }

  .detail-title { font-size: 20px; }
  .detail-emoji { width: 46px; height: 46px; font-size: 23px; }
  .detail-facts { font-size: 10.5px; }
  .detail-facts span { padding: 2px 8px; }

  .tier-grid { gap: 8px; }
  .tier-card { padding: 14px 11px 11px; }
  .tier-name { font-size: 14px; }
  .tier-line { font-size: 11.5px; }

  .q-card { margin: 14px 12px; padding: 18px 14px 16px; }
  .q-text { font-size: 17px; }
  .opt { padding: 12px; font-size: var(--fs-m); }

  .panel-merged,
  .paywall,
  .panel:not(.panel-merged),
  .share-box,
  .tpl-list,
  .tpl-text { margin-left: 12px; margin-right: 12px; }

  .panel-merged .result-hero { padding: 30px 20px 26px; }
  .panel-merged .merged-sec { padding: 22px 18px 26px; }
  .paywall { padding: 18px 16px 16px; }
  .poster-wrap canvas { width: 244px; height: 352px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .cat-item,
  .test-card,
  .opt,
  .tier-card,
  .progress-fill,
  .tpl-btn,
  .mine-item,
  .calc-ring {
    transition: none;
    animation: none;
  }
}