/* ============================================================================
   心道疗愈音频站 —— 手机优先样式
   与奇门工作台（桌面优先）不同：这个站的主入口是微信里的手机，
   所以整份样式按 **min-width 逐级加宽** 写，不写 max-width 查询。
   ========================================================================== */

:root{
  --bg:#F6F3EE;
  --bg-2:#EFEAE2;
  --card:#FFFFFF;
  --ink:#2A2723;
  --ink-2:#55504A;
  --muted:#8C857B;
  --line:#E7E1D8;
  --gold:#A8834A;
  --gold-d:#8A6A38;
  --gold-l:#E4D5BA;
  --gold-bg:#FBF6EC;
  --green:#3E6B52;
  --green-bg:#EDF5EF;
  --amber:#9A6B1F;
  --amber-bg:#FBF2E2;
  --radius:16px;
  --radius-s:10px;
  --shadow:0 1px 2px rgba(42,39,35,.04),0 8px 24px rgba(42,39,35,.05);
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
         "Microsoft YaHei",system-ui,sans-serif;
  --pad:18px;
  --wrap:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.35;margin:0 0 .5em;font-weight:600}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin:.35em 0}
code{background:var(--bg-2);padding:1px 5px;border-radius:5px;font-size:.9em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.muted{color:var(--muted)}
.small{font-size:14px}
.center{text-align:center}
.br-m{display:none}

/* ---------- 顶栏 ---------- */
.top{
  position:sticky;top:0;z-index:20;
  background:rgba(246,243,238,.86);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 34% 30%,#D9C29A 0%,var(--gold) 58%,var(--gold-d) 100%);
  box-shadow:0 0 0 3px rgba(168,131,74,.13);
}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt b{font-size:16px;font-weight:600;letter-spacing:.5px}
.brand-txt i{font-style:normal;font-size:11px;color:var(--muted)}
.top-nav{display:flex;gap:16px;font-size:15px}
.top-nav a{color:var(--ink-2)}
.top-nav a.on{color:var(--gold-d);font-weight:600}

/* ---------- 首页 ---------- */
.hero{padding:30px 0 22px}
.hero h1{font-size:25px;letter-spacing:.2px;margin-bottom:12px}
.hero-sub{color:var(--ink-2);font-size:15px;margin-bottom:10px}
.hero-note{color:var(--muted);font-size:13.5px;margin:0}

.grid{display:grid;grid-template-columns:1fr;gap:14px;padding:6px 0 26px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
}
.theme{display:flex;flex-direction:column;color:var(--ink);transition:transform .16s,border-color .16s}
.theme:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--gold-l)}
.theme-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.theme-min{font-size:13px;color:var(--muted)}
.theme-title{font-size:20px;margin:0 0 4px}
.theme-sub{color:var(--ink-2);font-size:14.5px;margin:0 0 12px}
.theme-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
/* 徽章必须 nowrap —— 在 390px 的窄屏表格里，「已支付」会被折成「已支/付」两行，
   把行高顶起来，看着像排版坏了。inline-block 才能让 padding 正确生效。 */
.tag{display:inline-block;font-size:12.5px;color:var(--muted);background:var(--bg-2);
     padding:2px 9px;border-radius:20px;white-space:nowrap}
.theme-go{margin-top:auto;font-size:14.5px;color:var(--gold-d);font-weight:600}
.theme-go i{font-style:normal}
.theme.soon{background:linear-gradient(180deg,#FBFAF7,var(--card));opacity:.85}

.pill{display:inline-block;font-size:12.5px;font-weight:600;
      padding:2.5px 10px;border-radius:20px}
.bg-safe{background:var(--green-bg);color:var(--green)}
.bg-warn{background:var(--amber-bg);color:var(--amber)}
.bg-soon{background:var(--bg-2);color:var(--muted)}

.note-card{background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--gold-l);border-radius:var(--radius);
  padding:18px;margin:0 0 30px}
.note-card h3{font-size:16px}
.plain{list-style:none;padding-left:0}
.plain li{position:relative;padding-left:16px;font-size:14.5px;color:var(--ink-2)}
.plain li::before{content:"";position:absolute;left:2px;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--gold-l)}
.plain b{color:var(--ink)}

/* ---------- 播放页 ---------- */
.backline{padding:16px 0 10px;font-size:14.5px}
.play-grid{display:grid;grid-template-columns:1fr;gap:16px;padding-bottom:30px}

.player{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:22px 18px 20px}
.p-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.p-min{font-size:13px;color:var(--muted)}
.p-title{font-size:23px;margin:0 0 4px}
.p-sub{color:var(--muted);font-size:14px;margin:0 0 22px}

.orb{
  position:relative;width:150px;height:150px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:radial-gradient(circle at 36% 30%,#F3E7D3 0%,#DCC59C 45%,var(--gold) 100%);
  box-shadow:0 10px 30px rgba(168,131,74,.28),inset 0 -6px 18px rgba(138,106,56,.25);
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s;
}
.orb:active{transform:scale(.97)}
.orb-ring{
  position:absolute;inset:-9px;border-radius:50%;
  border:1px solid var(--gold-l);opacity:0;transition:opacity .3s;
}
.player.on .orb-ring{opacity:1;animation:breath 4.2s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.07);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .player.on .orb-ring{animation:none}
}
.orb-icon{width:0;height:0;border-style:solid;margin-left:8px;
  border-width:19px 0 19px 31px;border-color:transparent transparent transparent #fff}
.player.on .orb-icon{
  width:26px;height:30px;border:none;margin-left:0;
  background:linear-gradient(#fff,#fff) left/9px 100% no-repeat,
             linear-gradient(#fff,#fff) right/9px 100% no-repeat;
}

.bar{position:relative;width:100%;max-width:420px;height:26px;margin:26px 0 2px;
  display:flex;align-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.bar::before{content:"";position:absolute;left:0;right:0;height:5px;
  border-radius:3px;background:var(--bg-2)}
.bar-buf,.bar-fill{position:absolute;left:0;height:5px;border-radius:3px}
.bar-buf{background:#E2DCD2;width:0}
.bar-fill{background:linear-gradient(90deg,var(--gold-l),var(--gold));width:0}
.bar-dot{position:absolute;left:0;width:15px;height:15px;border-radius:50%;
  background:#fff;border:2.5px solid var(--gold);transform:translateX(-50%);
  box-shadow:0 1px 4px rgba(138,106,56,.35)}
.times{display:flex;justify-content:space-between;align-items:center;
  width:100%;max-width:420px;font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.t-tip{color:var(--gold-d);font-size:12.5px}

.ctrls{display:flex;gap:10px;margin:20px 0 4px}
.ctrl{
  flex:1 1 0;min-width:74px;max-width:120px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:9px 4px;font-family:inherit;font-size:12px;color:var(--ink-2);cursor:pointer;
}
.ctrl b{font-size:15px;color:var(--ink)}
.ctrl i{font-style:normal;font-size:11.5px;color:var(--muted)}
.ctrl:active{background:var(--gold-bg);border-color:var(--gold-l)}

.listen-tip{margin:18px 0 0;font-size:13.5px;color:var(--muted);
  max-width:420px;line-height:1.7}

.side{display:grid;grid-template-columns:1fr;gap:14px;align-content:start}
.side .card h3{font-size:15.5px;margin-bottom:10px}
.side .card p{font-size:14.5px;color:var(--ink-2);margin-bottom:0}
.side .card.warm{background:var(--gold-bg);border-color:var(--gold-l)}
.side .card.warm p{color:var(--ink-2)}
.steps{padding-left:1.1em;font-size:14.5px;color:var(--ink-2)}
.steps li{margin:.4em 0}

/* ---------- 说明页 ---------- */
.prose{max-width:760px;margin:0 auto 30px}
.prose h1{font-size:24px}
.prose h2{font-size:17.5px;margin-top:1.6em;padding-top:.2em;color:var(--gold-d)}
.prose p,.prose li{font-size:15px;color:var(--ink-2)}
.lead{font-size:15.5px;color:var(--ink);background:var(--gold-bg);
  border-left:3px solid var(--gold-l);padding:12px 14px;border-radius:0 var(--radius-s) var(--radius-s) 0}
.big-code{font-size:52px;color:var(--gold-l);margin:0 0 .1em}
.btn-line{display:inline-block;margin-top:8px;padding:9px 20px;border-radius:24px;
  background:var(--gold);color:#fff;font-size:15px}
.btn-line:hover{text-decoration:none;background:var(--gold-d)}

.kv{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:1.4em}
.kv th{text-align:left;font-weight:600;color:var(--ink);padding:8px 12px 8px 0;
  border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:top}
.kv td{padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink-2);
  word-break:break-all}
.kv td.ok{color:var(--green);font-weight:600}

/* ---------- 页脚 ---------- */
.foot{border-top:1px solid var(--line);margin-top:14px;
  padding:20px 0 calc(24px + env(safe-area-inset-bottom));background:var(--bg-2)}
.foot-line{font-size:12.5px;color:var(--muted);margin:0 0 6px;line-height:1.7}
.foot-line.muted{margin-bottom:0}

/* ---------- 购买 / 次卡 ---------- */
.plan{margin-bottom:16px}
.plan-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin-bottom:14px}
.plan-title{font-size:18px;margin:0 0 3px}
.plan-note{font-size:13px;color:var(--muted);margin:0}
.plan-price{white-space:nowrap;color:var(--gold-d);line-height:1}
.plan-price .cur{font-size:15px;font-weight:600;vertical-align:top;
  position:relative;top:3px}
.plan-price .num{font-size:31px;font-weight:700;letter-spacing:-.02em}
.plan-list{list-style:none;padding:0;margin:0 0 16px;
  border-top:1px solid var(--line);padding-top:12px}
.plan-list li{position:relative;padding-left:16px;font-size:14.5px;
  color:var(--ink-2);margin:.3em 0}
.plan-list li::before{content:"";position:absolute;left:2px;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--gold-l)}
.plan-list b{color:var(--ink)}

.btn-primary{display:block;width:100%;border:0;cursor:pointer;
  background:linear-gradient(180deg,#B8924F,var(--gold-d));color:#fff;
  font-family:inherit;font-size:16.5px;font-weight:600;letter-spacing:.02em;
  padding:14px 18px;border-radius:26px;
  box-shadow:0 6px 16px rgba(138,106,56,.26);
  -webkit-tap-highlight-color:transparent;transition:transform .14s,opacity .14s}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.5;box-shadow:none;cursor:default}
.pay-tip{margin:10px 0 0}

/* 支付状态条：三种语气 —— 进行中(默认)、成功、被拒/取消。
   它是**卡片内、紧跟按钮**的：网页端点完「立即购买」会立刻在下面展开一个
   二维码（三百多像素高），状态条要是还挂在页面底部，就被顶出首屏了。 */
.pay-status{margin:12px 0 0;padding:12px 15px;border-radius:var(--radius-s);
  font-size:14.5px;line-height:1.7;background:var(--gold-bg);color:var(--gold-d);
  border:1px solid var(--gold-l)}
.pay-status.ok{background:var(--green-bg);color:var(--green);border-color:#CFE3D5}
.pay-status.warn{background:var(--amber-bg);color:var(--amber);border-color:#EBD9B8}
.pay-status.err{background:#FBF0EE;color:#9A3B2E;border-color:#EFD3CD}

/* 余额卡 */
.bal{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.bal-num{display:flex;align-items:baseline;gap:3px;color:var(--gold-d);
  line-height:1}
.bal-num .num{font-size:44px;font-weight:700;letter-spacing:-.03em}
.bal-num .unit{font-size:15px;font-weight:600}
.bal-txt{flex:1;min-width:130px}
.bal-txt p{margin:0}
.bal .btn-line{margin-top:0;flex-shrink:0}

.sec-h{font-size:16px;margin:26px 0 12px;color:var(--ink)}

/* 表格：窄屏只显示必要列，别让四列挤成看不清 */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font-weight:600;font-size:13px;color:var(--muted);
  padding:0 10px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);
  color:var(--ink-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right;padding-right:0}
/* 时间和金额都别折行 —— 一折行商品名就没地方了，四列会在 390px 上挤成一团。
   让「商品」列去做唯一那个可以换行的列（它换行读起来也自然）。 */
.tbl td:first-child,.tbl td.r{white-space:nowrap}
.tag.ok{background:var(--green-bg);color:var(--green)}
.tag.wait{background:var(--amber-bg);color:var(--amber)}

/* 明细列表 */
.led{list-style:none;padding:0;margin:0}
.led li{display:flex;align-items:baseline;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.led li:last-child{border-bottom:0}
.led-k{font-size:14.5px;flex-shrink:0}
.led-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.led-v{font-weight:700;flex-shrink:0}
.led-v.plus{color:var(--green)}
.led-v.minus{color:var(--amber)}
.led-t{flex-shrink:0}

/* 支付结果页的圆球 */
.pd-orb{width:76px;height:76px;border-radius:50%;margin:4px auto 16px;
  background:radial-gradient(circle at 36% 30%,#F3E7D3,#DCC59C 55%,var(--gold));
  box-shadow:0 8px 22px rgba(168,131,74,.24);
  animation:pd-breathe 2.4s ease-in-out infinite}
.pd-orb.ok{background:radial-gradient(circle at 36% 30%,#DCEFE2,#9DC7AD 55%,var(--green));
  animation:none}
@keyframes pd-breathe{0%,100%{transform:scale(1);opacity:.92}
  50%{transform:scale(1.06);opacity:1}}

/* ---------- 扫码支付（网页端 Native）----------
   两条通路共用同一张商品卡与状态条，只有「怎么付」这一段不一样。
   窄屏（手机上的第三方浏览器）**不摆二维码** —— 扫自己屏幕上的码没有意义，
   只留一个「唤起微信」的按钮；宽屏才把码摆出来。
   `.w-only` / `.n-only` 这一对就是干这个的，规则写在下面的加宽断点里。 */
.pay-qr{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  text-align:center}
.qr-frame{width:210px;height:210px;margin:0 auto 12px;padding:10px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);
  box-shadow:var(--shadow)}
.qr-box,.qr-box svg{display:block;width:100%;height:100%}
.qr-raw{font-size:11px;word-break:break-all;text-align:left;color:var(--ink-2)}
.qr-tip{margin:0 0 12px;font-size:14px;color:var(--ink)}
.qr-alt{margin:10px 0 0;line-height:1.7}
.qr-jump{display:inline-block;padding:12px 24px;border-radius:26px;
  background:linear-gradient(180deg,#B8924F,var(--gold-d));color:#fff;
  font-size:15.5px;font-weight:600;
  box-shadow:0 6px 16px rgba(138,106,56,.26);
  -webkit-tap-highlight-color:transparent}
.qr-jump:hover{text-decoration:none;background:var(--gold-d);color:#fff}
.w-only{display:none}
/* 后端把微信的错误码翻成了「下一步该做什么」，附在错误提示下面一行 */
.pay-hint{display:block;margin-top:6px;font-size:13.5px;opacity:.92}

/* ============================================================================
   加宽断点（手机优先 → 逐级变宽）
   ========================================================================== */
@media (min-width:640px){
  .wrap{padding:0 24px}
  .grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .hero{padding:40px 0 26px}
  .hero h1{font-size:32px}
  .br-m{display:inline}
  .orb{width:168px;height:168px}
  /* 够宽才摆二维码；同时把「唤起微信」从大按钮降级成一行小链接
     （电脑前面的人用的是手机扫，不需要这个按钮抢注意力）。 */
  .w-only{display:block}
  .n-only{display:none}
  .qr-jump{padding:0;border-radius:0;background:none;box-shadow:none;
    color:var(--gold-d);font-size:14.5px;font-weight:400}
  .qr-jump:hover{background:none;text-decoration:underline}
}

@media (min-width:900px){
  :root{--pad:28px}
  .hero h1{font-size:38px}
  .hero-sub{font-size:16px;max-width:620px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .top-in{height:66px}
  .brand-txt b{font-size:17px}
  .card{padding:22px}
}

@media (min-width:1020px){
  /* 播放页在宽屏变成「左边播放器 + 右边说明」，不再是竖着堆一长条 */
  .play-grid{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
    gap:22px;align-items:start;padding-bottom:44px}
  .player{padding:30px 28px 26px}
  .p-title{font-size:26px}
  .orb{width:184px;height:184px}
  .side{position:sticky;top:88px}
}