/* ═══════════════════════════════════════════════════
   主题工坊 · 统一设计系统
   index.html 与 pay.html 共用，改这里两页同步生效
   ═══════════════════════════════════════════════════ */

/* ── 设计令牌 ── */
:root{
  /* 品牌色 */
  --primary:#3482FF;
  --primary-2:#5B8DEF;
  --primary-subtle:#E8F0FF;
  --primary-ring:rgba(52,130,255,.16);

  /* 中性 */
  --ink:#0B1220;
  --bg:#F2F3F5;
  --surface:#FFFFFF;
  --surface-2:#F7F9FB;
  --stroke:#E6E8EB;
  --stroke-2:#DDE1E6;

  /* 文字 */
  --t1:#1A1A1A;
  --t2:#666666;
  --t3:#9AA0A6;

  /* 语义 */
  --ok:#30A46C;
  --ok-bg:#E6F6EE;
  --warn:#B26A00;
  --warn-bg:#FFF7E8;
  --wx:#07C160;
  --ali:#1677FF;

  /* 安全区 */
  --sb:env(safe-area-inset-bottom,0px);
  --st:env(safe-area-inset-top,0px);

  /* 圆角档位：小→大 */
  --r-sm:12px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:22px;

  /* 间距档位 */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;

  /* 阴影 */
  --sh-1:0 2px 8px rgba(17,24,39,.06);
  --sh-2:0 6px 18px rgba(17,24,39,.08);
  --sh-3:0 10px 30px rgba(17,24,39,.14);
  --sh-brand:0 8px 22px rgba(52,130,255,.32);

  /* 动效：统一时长与曲线 */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.5,.6,1);
  --d-fast:.18s;
  --d-base:.28s;
  --d-slow:.42s;

  --r:var(--r-lg); /* 兼容旧写法 */
}

/* ── 基础重置 ── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--t1);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;font-size:inherit}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* ═══════════ 通用组件 ═══════════ */

/* 卡片 */
.card{
  background:var(--surface);
  border:.5px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:var(--s-4);
  box-shadow:var(--sh-1);
}
.card.flat{box-shadow:none}

/* 区块标题 */
.sec-h{
  display:flex;align-items:baseline;gap:var(--s-2);
  margin:var(--s-6) 2px var(--s-3);
}
.sec-h h2{font-size:17px;font-weight:700;letter-spacing:-.2px}
.sec-h em{font-style:normal;font-size:12px;color:var(--t3)}
.sec-h:first-child{margin-top:6px}

/* 内容容器 */
.wrap{padding:var(--s-5) 18px 0}

/* ── 按钮：三档 ── */
/* 主按钮（页面唯一的落地动作，大） */
.btn{
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  width:100%;padding:var(--s-4);
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;font-size:15.5px;font-weight:700;
  box-shadow:var(--sh-brand);
  transition:transform var(--d-fast) var(--ease);
}
.btn:active{transform:scale(.975)}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}

/* 次按钮（描边/浅底，中） */
.btn-sec{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px var(--s-4);border-radius:var(--r-md);
  background:var(--surface);border:.5px solid var(--stroke);
  color:var(--t1);font-size:14px;font-weight:600;
  box-shadow:var(--sh-1);
  transition:transform var(--d-fast) var(--ease),background var(--d-fast);
}
.btn-sec:active{transform:scale(.96);background:var(--surface-2)}
.btn-sec.brand{background:var(--primary-subtle);color:var(--primary);border-color:transparent}

/* 行内小按钮（列表里，不抢焦点） */
.btn-sm{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 14px;border-radius:999px;
  background:var(--primary);color:#fff;
  font-size:12.5px;font-weight:600;line-height:1;
  transition:transform var(--d-fast) var(--ease),background var(--d-fast),color var(--d-fast);
}
.btn-sm:active{transform:scale(.94)}
.btn-sm svg{width:14px;height:14px;fill:currentColor}
.btn-sm.ghost{background:var(--primary-subtle);color:var(--primary)}
/* 复制成功的即时反馈态 */
.btn-sm.done{background:var(--ok);color:#fff}
.btn-sm.done svg{display:none}

/* ── 分段控件 ── */
.seg{
  display:flex;gap:var(--s-1);padding:var(--s-1);
  margin:0 0 var(--s-3);
  background:#EAECF0;border-radius:var(--r-md);
}
.seg button{
  flex:1;padding:10px var(--s-1);border-radius:10px;
  font-size:13.5px;color:var(--t2);font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all var(--d-base) var(--ease);
}
.seg button svg{width:17px;height:17px;flex:none}
.seg button.on{
  background:var(--surface);font-weight:700;
  box-shadow:0 2px 7px rgba(0,0,0,.09);
}
.seg button[data-p="wx"].on{color:var(--wx)}
.seg button[data-p="ali"].on{color:var(--ali)}

/* ── 徽章 ── */
.pill{
  display:inline-block;font-size:10.5px;font-weight:700;
  padding:3px 9px;border-radius:999px;
}
.pill.brand{background:var(--primary-subtle);color:var(--primary)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.mute{background:#F2F3F5;color:var(--t3)}
.pill.n{background:var(--ok-bg);color:var(--ok)}
.pill.c{background:var(--primary-subtle);color:var(--primary)}

/* ── 条目列表（权益 / 用法 / 步骤通用） ── */
.rows{
  background:var(--surface);border:.5px solid var(--stroke);
  border-radius:var(--r-lg);overflow:hidden;
}
.row{display:flex;gap:var(--s-3);padding:var(--s-4) 15px;align-items:flex-start}
.row+.row{border-top:.5px solid var(--stroke)}
.row-n{
  flex:none;width:25px;height:25px;border-radius:50%;
  background:var(--primary-subtle);color:var(--primary);
  font-size:12.5px;font-weight:800;
  display:grid;place-items:center;margin-top:1px;
}
.row-ic{
  flex:none;width:22px;height:22px;border-radius:50%;margin-top:2px;
  background:var(--ok-bg);display:grid;place-items:center;
}
.row-ic svg{width:12px;height:12px;fill:var(--ok)}
.row-b{flex:1;min-width:0}
.row-b b{display:block;font-size:14px;font-weight:700;margin-bottom:2px}
.row-b span{font-size:12.5px;color:var(--t2);line-height:1.62;display:block}
.row-b p{font-size:13.5px;color:var(--t2);line-height:1.65}
.row-b p b{color:var(--t1);font-weight:600}

/* 步骤组容器 */
.steps{margin-top:var(--s-1)}

/* ── FAQ 手风琴 ── */
.qa{
  background:var(--surface);border:.5px solid var(--stroke);
  border-radius:var(--r-md);margin-bottom:var(--s-2);overflow:hidden;
}
.qa-q{
  padding:15px;font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:10px;line-height:1.5;
}
.qa-q::after{
  content:"+";margin-left:auto;color:var(--primary);
  font-size:19px;font-weight:400;flex:none;
  transition:transform var(--d-base) var(--ease);
}
.qa.open .qa-q::after{transform:rotate(45deg)}
/* 高度 + 内容淡入，避免文字突然蹦出 */
.qa-a{max-height:0;overflow:hidden;transition:max-height var(--d-slow) var(--ease)}
.qa.open .qa-a{max-height:460px}
.qa-a>div{
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--d-base) var(--ease) .08s,transform var(--d-base) var(--ease) .08s;
}
.qa.open .qa-a>div{opacity:1;transform:none}
.qa-a p{padding:0 15px 15px;font-size:13px;color:var(--t2);line-height:1.72}
.qa-a p b{color:var(--t1)}

/* ── 悬浮玻璃胶囊（导航 / 返回 共用同一套质感） ── */
.glass{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:.5px solid rgba(255,255,255,.42);
  box-shadow:
    0 10px 30px rgba(17,24,39,.16),
    0 4px 10px rgba(17,24,39,.1),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* 返回首页的悬浮胶囊 */
.fab-back{
  position:fixed;left:16px;bottom:calc(18px + var(--sb));
  display:flex;align-items:center;gap:6px;
  padding:11px 16px;border-radius:999px;z-index:120;
  font-size:13.5px;font-weight:700;color:var(--primary);
  transition:transform var(--d-fast) var(--ease),opacity var(--d-base);
}
.fab-back svg{width:15px;height:15px;fill:currentColor}
.fab-back:active{transform:scale(.94)}

/* ── Toast ── */
.toast{
  position:fixed;left:50%;bottom:calc(30px + var(--sb));
  transform:translate(-50%,20px);
  background:rgba(11,18,32,.9);color:#fff;
  font-size:13.5px;padding:11px 20px;border-radius:999px;
  opacity:0;pointer-events:none;z-index:200;
  backdrop-filter:blur(8px);
  transition:opacity var(--d-base) var(--ease),transform var(--d-base) var(--ease);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 语义修饰类：样式由基类（.card / .rows）提供 */
.cs,.use{}

/* ── 滚动淡入 ── */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ── 页脚 ── */
.foot{
  text-align:center;font-size:11.5px;color:var(--t3);
  padding:var(--s-6) 18px 6px;line-height:1.8;
}
.foot .notice{
  font-size:11.5px;color:var(--t3);line-height:1.75;
  margin-bottom:10px;padding:0 6px;
}

/* ── 深色模式：只调底色与玻璃，品牌色不变 ── */
@media(prefers-color-scheme: dark){
  body{background:#1c1c1e}
  .glass{
    background:rgba(44,44,46,.68);
    border:.5px solid rgba(255,255,255,.12);
    box-shadow:
      0 10px 30px rgba(0,0,0,.35),
      0 4px 10px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.1);
  }
}

/* ── 降低动效偏好 ── */
@media(prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ════ 底部抽屉弹窗（各页共用） ════ */
/* ── 收款码弹窗 ── */
.mask{
  position:fixed;inset:0;z-index:200;
  background:rgba(11,18,32,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity var(--d-base) var(--ease);
}
.mask.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:201;
  background:var(--surface);
  border-radius:22px 22px 0 0;
  padding:8px 18px calc(20px + var(--sb));
  transform:translateY(100%);
  transition:transform var(--d-slow) var(--ease);
  max-height:88vh;overflow-y:auto;
  box-shadow:0 -8px 30px rgba(11,18,32,.2);
}
.sheet.on{transform:translateY(0)}
.sheet-grip{
  width:36px;height:4px;border-radius:999px;
  background:var(--stroke);margin:0 auto 14px;
}
.sheet h3{
  text-align:center;font-size:16px;font-weight:800;margin-bottom:3px;
}
.sheet .sh-sub{
  text-align:center;font-size:12.5px;color:var(--t3);margin-bottom:15px;
}
.sheet .seg{margin-bottom:15px}
.sheet-close{
  display:block;width:100%;margin-top:15px;padding:13px;
  border-radius:14px;background:var(--surface-2);
  font-size:14px;font-weight:600;color:var(--t2);
}
.sheet-close:active{background:var(--stroke)}

/* ════ 工具箱：列表式工具（本站自有风格） ════ */
.tlist{
  background:var(--surface);border:.5px solid var(--stroke);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);
}
.titem{
  display:flex;align-items:center;gap:11px;
  padding:14px 15px;
  transition:background var(--d-fast) var(--ease);
}
.titem + .titem{border-top:.5px solid var(--stroke)}
.titem:active{background:var(--surface-2)}
.tl-dot{flex:none;width:9px;height:9px;border-radius:50%}
.tl-dot.tag-mi{background:#FF9500}
.tl-dot.tag-oppo{background:#34C759}
.tl-dot.tag-vivo{background:#4C8DFF}
.tl-dot.tag-icon{background:#FF2D55}
.tl-dot.tag-font{background:#AF52DE}
.tl-dot.tag-hw{background:#FF3B30}
.tl-dot.tag-honor{background:#8E8E93}
.tl-dot.tag-safe{background:#34C759}
.tl-main{flex:1;min-width:0}
.tl-main b{
  display:block;font-size:14px;font-weight:700;
  letter-spacing:-.2px;line-height:1.4;
}
.tl-lock{
  display:inline-block;margin-left:6px;vertical-align:1px;
  font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:999px;
  background:var(--primary-subtle);color:var(--primary);
}
.tl-sub{
  display:block;margin-top:3px;
  font-size:11.5px;color:var(--t3);line-height:1.45;
}
.tl-go{flex:none;width:16px;height:16px;fill:var(--t3)}

/* ════ 兼容提示条 ════ */
.compat{
  display:flex;align-items:center;gap:10px;
  background:#FFF6E5;border:.5px solid #FFE0B5;
  border-radius:var(--r-md);padding:11px 13px;margin-bottom:4px;
  font-size:11.5px;line-height:1.55;color:#C45C00;
}
.compat .x{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;color:#C45C00;
}
.compat .x:active{background:rgba(0,0,0,.06)}