/* 心源课程商城 · 展示版
   视觉唯一权威：docs/设计交接/设计稿.html + 02-前端规范.md
   白底 · 墨色 · 宋体 · 一点金 */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #FFFFFF;
  color: #191510;
}

button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.app {
  max-width: 430px;
  margin: 0 auto;
  background: #FFFFFF;
  min-height: 100vh;
  position: relative;
}

.p-serif { font-family: "Songti SC", "STSong", "STZhongsong", "SimSun", serif; }
.p-sans  { font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", sans-serif; }

/* ============ 品牌顶栏 ============ */
.p-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px 13px;
  border-bottom: 0.75px solid #ECE8E0;
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 5;
}
.p-top img { width: 52px; height: auto; display: block; }
.p-top .no {
  margin-left: auto;
  font-size: 9.5px;
  color: #B7AEA0;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1.7;
}

.p-body { padding: 24px 22px 16px; }

/* ============ 眉题 / 标题 ============ */
.eyebrow { display: flex; align-items: baseline; gap: 9px; margin-bottom: 16px; }
.eyebrow .num { font-family: "Songti SC", serif; font-size: 13px; color: #965B08; font-variant-numeric: tabular-nums; }
.eyebrow .lab { font-size: 10px; color: #8B8378; letter-spacing: 0.34em; }
.eyebrow::after { content: ""; flex: 1; height: 0.75px; background: #ECE8E0; }

.h-display { font-size: 27px; line-height: 1.36; color: #191510; font-weight: 500; margin: 0 0 8px; letter-spacing: 0.02em; }
.h-sub { font-size: 11.5px; color: #8B8378; line-height: 1.9; letter-spacing: 0.04em; margin: 0; }

/* ============ 价格 ============ */
.price-moment { padding: 30px 0 26px; }
.price-moment .cap { font-size: 9.5px; color: #B7AEA0; letter-spacing: 0.36em; margin-bottom: 10px; }
.price-moment .val { font-size: 46px; line-height: 1.05; color: #191510; font-weight: 500; font-variant-numeric: tabular-nums; }
.price-moment .val .cur { font-size: 21px; color: #965B08; margin-right: 5px; }
.price-moment .val .fen { font-size: 20px; color: #B7AEA0; }

.hairline { height: 0.75px; background: #E4DFD5; }
.hairline-dash { height: 0.75px; background-image: linear-gradient(90deg, #CFC8BA 42%, transparent 42%); background-size: 7px 1px; }

/* ============ 占位底纹（对应设计稿 ph-1/2/3，真实素材替换后不再出现） ============ */
.ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ph-1 { background: linear-gradient(150deg, #F6F1E6 0%, #EFE7D4 55%, #F9F5EC 100%); }
.ph-2 { background: linear-gradient(150deg, #F2F0EA 0%, #E9E5D9 55%, #F7F5EF 100%); }
.ph-3 { background: linear-gradient(150deg, #F5EEE9 0%, #EBE1D8 55%, #F9F4F0 100%); }
.ph .t { font-family: "Songti SC", serif; font-size: 19px; color: #4A4234; letter-spacing: 0.14em; }
.ph .e { font-size: 8px; color: #A79A83; letter-spacing: 0.3em; }
.ph::after { content: ""; position: absolute; inset: 9px; border: 0.75px solid rgba(150, 91, 8, 0.22); border-radius: 8px; pointer-events: none; }

.img-real { width: 100%; display: block; }

/* ============ ① 课程列表 ============ */
.idx-item { display: block; padding: 0 0 26px; margin: 0 0 26px; border-bottom: 0.75px solid #EFEBE3; cursor: pointer; }
.idx-item:last-of-type { border-bottom: none; margin-bottom: 6px; }
/* T-1050 三石裁决：真实主图为 1080x1080 方形，前端适配素材不裁切；设计令牌（圆角/发丝线/留白）不变 */
.idx-cover { width: 100%; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; position: relative; border: 0.75px solid #E7E1D4; }
.idx-cover img.img-real { height: 100%; object-fit: contain; }
.idx-tag { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(255, 255, 255, 0.92); border: 0.75px solid #E4DFD5; border-radius: 99px; font-size: 9px; color: #6E6455; letter-spacing: 0.14em; padding: 3px 9px; }
.idx-tag.gold { color: #965B08; border-color: rgba(150, 91, 8, 0.35); }
.idx-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 13px; }
.idx-title .t { font-family: "Songti SC", serif; font-size: 17px; color: #191510; letter-spacing: 0.03em; }
.idx-title .p { font-size: 16px; color: #191510; font-variant-numeric: tabular-nums; white-space: nowrap; }
.idx-title .p small { font-size: 10px; color: #B7AEA0; margin-right: 2px; }
.idx-meta { font-size: 10.5px; color: #8B8378; letter-spacing: 0.05em; margin-top: 6px; line-height: 1.7; }

.idx-more { display: block; text-align: center; font-size: 10.5px; color: #B7AEA0; letter-spacing: 0.2em; padding: 18px 0 2px; cursor: pointer; }
.idx-more:hover { color: #8B8378; }

/* 空态：无在售商品（02 规范） */
.empty-ed { text-align: center; padding: 64px 24px 56px; }
.empty-ed .t { font-family: "Songti SC", serif; font-size: 19px; color: #191510; letter-spacing: 0.1em; margin-bottom: 12px; }
.empty-ed .s { font-size: 11px; color: #8B8378; line-height: 2; letter-spacing: 0.04em; margin: 0; }

/* ============ ② 课程详情 ============ */
/* T-1050：hero 同裁决改 1:1 方形呈现，1:1 素材完整显示不裁字 */
.hero-cover { position: relative; aspect-ratio: 1/1; overflow: hidden; border-bottom: 0.75px solid #E7E1D4; }
.hero-cover img.img-real { height: 100%; object-fit: contain; }
.hero-cover .ph { gap: 8px; }
.hero-cover .ph .t { font-size: 26px; letter-spacing: 0.18em; }
.hero-cover .ph .e { font-size: 9px; letter-spacing: 0.34em; }
.back-pill { position: absolute; top: 12px; left: 12px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); border: 0.75px solid #E4DFD5; color: #191510; font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

.d-imgs { line-height: 0; }
.d-img { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-bottom: 0.75px solid #EFEBE3; }
.d-img:last-child { border-bottom: none; }
.d-img.r-1 { aspect-ratio: 16/13; }
.d-img.r-2 { aspect-ratio: 16/18; }
.d-img.r-3 { aspect-ratio: 16/10; }
.d-img .t { font-size: 15px; color: #8A8175; letter-spacing: 0.14em; }
.d-img .e { font-size: 8px; color: #B7AEA0; letter-spacing: 0.3em; }

/* ============ ③ 确认订单：渠道 / 表单 / 协议 ============ */
.rcpt .r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; font-size: 12px; }
.rcpt .r + .r { border-top: 0.75px solid #F1EEE7; }
.rcpt .k { color: #8B8378; letter-spacing: 0.08em; flex: 0 0 auto; }
.rcpt .v { color: #191510; text-align: right; font-variant-numeric: tabular-nums; }
.rcpt .v .sm { display: block; font-size: 10px; color: #B7AEA0; margin-top: 2px; }
.st-ok { color: #2E7D4F !important; }
.st-wait { color: #B07414 !important; }

.ch-row { display: flex; align-items: center; gap: 12px; padding: 14px 2px; cursor: pointer; border-bottom: 0.75px solid #EFEBE3; transition: opacity .15s ease; }
.ch-row:first-of-type { border-top: 0.75px solid #EFEBE3; }
.ch-row.dim { opacity: 0.42; }
.ch-mark { width: 30px; height: 30px; border-radius: 8px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.ch-mark.wx { background: #07C160; }
.ch-mark.zfb { background: #1677FF; }
.ch-row .t { font-size: 14px; color: #191510; letter-spacing: 0.02em; }
.seal-dot { margin-left: auto; width: 17px; height: 17px; border-radius: 50%; border: 1px solid #C9C2B4; position: relative; flex: 0 0 auto; transition: border-color .15s ease; }
.ch-row.sel .seal-dot { border-color: #191510; }
.ch-row.sel .seal-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #191510; }

.f-ed { padding: 10px 0 4px; }
.f-ed label { display: block; font-size: 9.5px; color: #B7AEA0; letter-spacing: 0.26em; margin-bottom: 7px; }
.f-ed input { width: 100%; border: none; border-bottom: 0.75px solid #D8D2C6; background: transparent; padding: 6px 0 9px; font-size: 15px; color: #191510; outline: none; transition: border-color .2s ease; border-radius: 0; }
.f-ed input:focus { border-bottom-color: #191510; }

.agree { display: flex; gap: 7px; align-items: flex-start; font-size: 10.5px; color: #8B8378; line-height: 1.8; padding-top: 16px; }
.agree input { accent-color: #191510; margin-top: 3px; }
.agree a { color: #191510; text-decoration: none; border-bottom: 0.75px solid #C9C2B4; }

.form-hint { display: none; font-size: 10.5px; color: #965B08; letter-spacing: 0.06em; padding: 12px 0 0; }
.form-hint.on { display: block; }

/* ============ 底部付款条 / 按钮 ============ */
.paybar { position: sticky; bottom: 0; padding: 12px 22px 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94) 32%); z-index: 5; }
.btn-hero { display: flex; align-items: center; width: 100%; background: #965B08; color: #FFF6E3; border: none; border-radius: 12px; padding: 14px 18px; cursor: pointer; transition: background .18s ease; }
.btn-hero:active { background: #6F4000; }
.btn-hero .l { text-align: left; }
.btn-hero .l .a { display: block; font-size: 13px; letter-spacing: 0.1em; }
.btn-hero .l .b { display: block; font-size: 8.5px; letter-spacing: 0.26em; opacity: 0.68; margin-top: 3px; }
.btn-hero .amt { margin-left: auto; font-size: 17px; font-variant-numeric: tabular-nums; }
.btn-hero .go { margin-left: 12px; font-family: "Songti SC", serif; font-size: 16px; }
.btn-ghost { display: block; width: 100%; background: transparent; color: #191510; border: 0.75px solid #C9C2B4; font-size: 12px; letter-spacing: 0.2em; padding: 12px; border-radius: 12px; cursor: pointer; margin-top: 12px; text-align: center; }
.btn-ghost:active { background: #F5F1E8; }

/* ============ ④ 微信内引导 ============ */
.wx-bar { background: rgba(237, 237, 237, 0.94); padding: 9px 14px; display: flex; align-items: center; font-size: 12.5px; color: #111; border-bottom: 0.75px solid #DCDCDC; }
.wx-dots { margin-left: auto; border: 0.75px solid #C9C9C9; border-radius: 12px; padding: 2px 10px; font-size: 12px; letter-spacing: 1px; background: #fff; position: relative; }
.wx-dots::after { content: "点这里"; position: absolute; top: 120%; right: 0; font-size: 9.5px; color: #fff; background: #191510; border-radius: 4px; padding: 2px 7px; letter-spacing: 0.1em; white-space: nowrap; }
.guide-head { padding: 34px 24px 6px; }
.steps-ed { padding: 18px 24px 4px; }
.step-ed { display: flex; gap: 16px; padding: 13px 0; border-top: 0.75px solid #EFEBE3; align-items: baseline; }
.step-ed:first-child { border-top: none; }
.step-ed .n { font-family: "Songti SC", serif; font-size: 22px; color: #C9C2B4; line-height: 1; flex: 0 0 24px; }
.step-ed .t { font-size: 13.5px; color: #191510; line-height: 1.6; }
.step-ed .t small { display: block; font-size: 10.5px; color: #8B8378; margin-top: 2px; }
.link-back { display: block; text-align: center; font-size: 10.5px; color: #B7AEA0; letter-spacing: 0.12em; padding: 14px 0 2px; cursor: pointer; }

/* ============ ⑤⑥ 过渡态 / 支付结果 ============ */
.ok-moment { text-align: center; padding: 42px 24px 10px; }
.ok-seal { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; border: 1px solid #965B08; display: flex; align-items: center; justify-content: center; color: #965B08; font-family: "Songti SC", serif; font-size: 23px; }
.ok-seal.plain { border-color: #C9C2B4; color: #191510; }
.ok-pill { display: inline-block; margin-top: 12px; font-size: 10px; letter-spacing: 0.2em; color: #2E7D4F; background: rgba(46, 125, 79, 0.07); border: 0.75px solid rgba(46, 125, 79, 0.28); padding: 3px 12px; border-radius: 99px; }
.ok-pill.plain { color: #191510; background: rgba(25, 21, 16, 0.04); border-color: #C9C2B4; }

.notice-ed { margin-top: 14px; padding: 12px 14px; background: #FAF8F3; border: 0.75px solid #E7E1D4; border-radius: 10px; font-size: 11.5px; color: #6E6455; line-height: 1.9; }
.notice-ed b { color: #191510; font-weight: 500; }
.notice-ed a { color: #191510; border-bottom: 0.75px solid #C9C2B4; }

.safe-ed { text-align: center; font-size: 10px; color: #B7AEA0; letter-spacing: 0.12em; padding: 14px 0 4px; }
.soon-ed { display: none; }
.soon-ed.on { display: block; }

/* ============ 页脚 ============ */
.foot-mark { text-align: center; padding: 22px 0 8px; font-size: 8.5px; color: #D3CBBD; letter-spacing: 0.36em; }
.foot-legal { text-align: center; padding: 0 20px 20px; font-size: 8.5px; color: #D3CBBD; letter-spacing: 0.14em; line-height: 2.1; }
.foot-legal a { color: inherit; text-decoration: none; border-bottom: 0.75px solid #E4DFD5; }