/* api.cc 转售站 —— 全站样式 */

:root {
  /* ── 底色 ──
     比原来（GitHub 的 #0d1117 蓝灰）更深一档，并去掉蓝灰偏。
     卡片改用**亮度差**分层，而不是靠一圈描边 —— 深色界面上描边一多就显脏。 */
  --bg:        #08090c;
  --bg-2:      #101319;
  --bg-3:      #171c25;
  --line:      #232a36;
  --line-2:    #1a2029;

  /* ── 文字 ── */
  --fg:        #e8edf5;
  --fg-2:      #93a0b4;
  --fg-3:      #8b97a9;

  /* ── 强调色 ──
     ★ 原来用的是 #2f81f7 —— 那正是 GitHub 的主色，整站看起来像 GitHub 截图。
       这是「不好看」最直接的来源：不是丑，是**没有自己的样子**。
       换成更饱和的靛蓝，与绿色（钱）、琥珀色（警告）分得开。 */
  --pri:       #4f7cff;
  --pri-d:     #3a63e0;
  /* 默认态与 hover 各用一个更深的档位：
     白字压在 #4f7cff 上只有 3.71:1（低于 4.5 的达标线），压在 #3a63e0 上是 5.20:1。
     按钮多是「确认下单 / 充值」这类关键操作，对比度必须够。 */
  --pri-d2:    #2f52c4;
  --pri-soft:  rgba(79,124,255,.12);
  --pri-line:  rgba(79,124,255,.34);

  --ok:        #2fd07a;
  --warn:      #f0a92e;
  --err:       #ff5f56;

  /* 深色底上**当文字用**的浅色调。
     直接用 --ok/--warn/--err 当文字色对比度不够，在户外或低亮度屏上发闷，
     所以正文语义色单独给一组更亮的取值。 */
  --ok-txt:    #5ee39b;
  --warn-txt:  #f5c26b;
  --err-txt:   #ff8b82;
  --pri-txt:   #8fb0ff;

  --radius:    12px;
  --radius-sm: 9px;

  /* ★ 等宽不是装饰，是功能：这个站卖的就是「号码」和「金额」，
     它们必须一眼可读、不能有歧义（0/O、1/l 分不清就会转错账）。 */
  --mono:      ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --shadow:    0 10px 30px rgba(0,0,0,.45);

  /* 移动端底部导航的高度。主体与页脚都要给它让位，否则最后一行会被压住。 */
  --tabbar-h:  58px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  /* ★ 中文字体顺序按「用户实际在用的手机」排：
     PingFang（iOS/macOS）→ HarmonyOS Sans（华为/荣耀，装机量很大）
     → Noto Sans SC（原生安卓）→ 微软雅黑（Windows）。
     没有引入网络字体：中文字体动辄几 MB，而且 Google Fonts 在国内经常
     连不上 —— 为了一点字形差异让整站变慢甚至白屏，不划算。
     这一版的设计感主要来自配色、层次和数字排版，不依赖下载字体。 */
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
        "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* iOS 横屏时会自作主张放大正文，深色界面下尤其突兀 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 顶部一层极淡的光晕。
   纯黑背景不加任何处理会「死平」，这一层让吸顶导航和内容之间有个自然过渡。
   z-index:-1 让它落在 body 背景之上、正文之下（负 z-index 子元素的绘制顺序）。 */
body::before {
  content: '';
  position: fixed; inset: 0 0 auto; height: 320px;
  pointer-events: none; z-index: -1;
  background: radial-gradient(120% 100% at 50% 0%, rgba(79,124,255,.10), transparent 68%);
}

a { color: var(--pri); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ═══════════ 顶栏 ═══════════ */
.hdr {
  background: rgba(8,9,12,.86);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hdr-in { display: flex; align-items: center; gap: 20px; height: 62px; }

.brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 16px; color: var(--fg);
  letter-spacing: -.2px;
}
.brand:hover { text-decoration: none; }
.brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 10px var(--ok);
}

.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
  padding: 6px 12px; border-radius: 8px;
  color: var(--fg-2); font-size: 14px; white-space: nowrap;
  transition: background .14s, color .14s;
}
.nav a:hover { background: var(--bg-2); color: var(--fg); text-decoration: none; }
.nav a.on { background: var(--pri-soft); color: var(--fg); }

.hdr-right { display: flex; align-items: center; gap: 10px; }

/* ═══════════ 底部导航（手机专用） ═══════════
   ★ 为什么要有它：
     原来手机上所有入口都挤在顶栏横排，想「回首页」只能点左上角那个 Logo ——
     技术上能点，但没有客户知道那能点。在取码页想回首页，只能按浏览器返回键。
     底部 Tab 是手机上唯一**不需要学习**的导航位置，顺带把「首页」补上。

   ★ 只在 ≤860px 出现；桌面端仍然用顶栏，两边不重复。 */
.tabbar { display: none; }

.tabbar a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: var(--fg-3); font-size: 10.5px; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .14s;
}
.tabbar a:hover { text-decoration: none; color: var(--fg-2); }
.tabbar a.on { color: var(--pri); }
.tabbar a svg { width: 21px; height: 21px; display: block; }
/* 选中态再加一根短横线：只靠颜色区分，在阳光下或低亮度屏上不够明显 */
.tabbar a.on::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px; border-radius: 0 0 2px 2px;
  background: var(--pri);
}

.bal {
  display: flex; align-items: baseline; gap: 5px;
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 5px 12px; border-radius: 20px;
  color: var(--ok); font-size: 13px; font-weight: 500;
}
.bal:hover { text-decoration: none; border-color: var(--ok); }
.bal-num { font-family: var(--mono); font-size: 15px; }

.menu { position: relative; }
.menu-btn {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--fg);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px;
  font-family: inherit;
}
.menu-btn:hover { border-color: var(--fg-3); }
.menu-pop {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); min-width: 150px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.menu.open .menu-pop { display: block; }
.menu-pop a { display: block; padding: 9px 14px; color: var(--fg-2); font-size: 14px; }
.menu-pop a:hover { background: var(--bg-3); color: var(--fg); text-decoration: none; }
.menu-pop a.danger { color: var(--err); }

/* ═══════════ 主体 ═══════════ */
.main { padding-top: 28px; padding-bottom: 60px; min-height: calc(100vh - 160px); }

.ftr {
  border-top: 1px solid var(--line-2);
  padding: 20px 0; color: var(--fg-3); font-size: 13px;
}
.ftr .sep { margin: 0 8px; color: var(--line); }

/* ═══════════ 通用组件 ═══════════ */
.card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
}
.card h2, .card h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.card h2:last-child, .card h3:last-child { margin-bottom: 0; }

.page-title { font-size: 22px; font-weight: 600; margin: 0 0 18px; }
.page-sub { color: var(--fg-2); font-size: 14px; margin: -10px 0 20px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  padding: 9px 16px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-family: inherit; white-space: nowrap;
  transition: .15s;
}
.btn:hover { border-color: var(--fg-3); text-decoration: none; }
.btn-pri { background: var(--pri-d); border-color: var(--pri-d); color: #fff; font-weight: 500; }
.btn-pri:hover { background: var(--pri-d2); border-color: var(--pri-d2); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #08130a; font-weight: 500; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 12px 26px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  color: var(--fg); padding: 10px 12px; border-radius: 8px;
  font-size: 14px; font-family: inherit;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pri); }

label { display: block; font-size: 13px; color: var(--fg-2); margin-bottom: 6px; }
.field { margin-bottom: 14px; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ═══════════ 统计块 ═══════════ */
.stat {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.stat-k { color: var(--fg-2); font-size: 13px; margin-bottom: 6px; }
.stat-v { font-size: 22px; font-weight: 600; font-family: var(--mono); }
.stat-v.ok { color: var(--ok); }
.stat-v.warn { color: var(--warn); }
.stat-v.err { color: var(--err); }
.stat-sub { color: var(--fg-3); font-size: 12px; margin-top: 4px; }

/* ═══════════ 表格 ═══════════ */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; padding: 10px 12px; color: var(--fg-2);
  font-weight: 500; font-size: 13px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: rgba(255,255,255,.02); }
.tbl .num { font-family: var(--mono); }
.tbl-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }

/* ═══════════ 徽标 ═══════════ */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.tag-ok   { background: rgba(47,208,122,.15);  color: var(--ok); }
.tag-warn { background: rgba(240,169,46,.15); color: var(--warn); }
.tag-err  { background: rgba(255,95,86,.15);  color: var(--err); }
.tag-grey { background: var(--bg-3); color: var(--fg-2); }
.tag-pri  { background: rgba(79,124,255,.15); color: var(--pri); }

/* ═══════════ 号码卡 ═══════════ */
.num-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
}
.num-phone {
  font-family: var(--mono); font-size: 24px; font-weight: 600;
  letter-spacing: .5px; margin: 8px 0 14px; word-break: break-all;
}
.num-code {
  font-family: var(--mono); font-size: 30px; font-weight: 700;
  color: var(--ok); letter-spacing: 3px; margin: 10px 0;
  word-break: break-all;
}
.num-code.empty { color: var(--fg-3); font-size: 15px; letter-spacing: 0; font-weight: 400; }

.copy-btn {
  background: none; border: 1px solid var(--line); color: var(--fg-2);
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-family: inherit;
}
.copy-btn:hover { border-color: var(--pri); color: var(--pri); }

/* ═══════════ 提示条 ═══════════ */
.alert { padding: 11px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.alert-err  { background: rgba(255,95,86,.1);  border: 1px solid rgba(255,95,86,.3);  color: var(--err-txt); }
.alert-warn { background: rgba(240,169,46,.1); border: 1px solid rgba(240,169,46,.3); color: var(--warn-txt); }
.alert-ok   { background: rgba(47,208,122,.1);  border: 1px solid rgba(47,208,122,.3);  color: var(--ok-txt); }
.alert-info { background: rgba(79,124,255,.1); border: 1px solid rgba(79,124,255,.3); color: var(--pri-txt); }

/* ═══════════ 空状态 ═══════════ */
.empty { text-align: center; padding: 50px 20px; color: var(--fg-3); }
.empty p { margin: 0 0 16px; }

/* ═══════════ 分页 ═══════════ */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.pager a, .pager span {
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line);
  color: var(--fg-2); font-size: 14px;
}
.pager a:hover { border-color: var(--pri); color: var(--pri); text-decoration: none; }
.pager .cur { background: var(--pri); border-color: var(--pri); color: #fff; }

/* ═══════════ Toast ═══════════ */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 20px);
  background: var(--bg-3); border: 1px solid var(--line);
  padding: 11px 20px; border-radius: 9px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: .22s; z-index: 999;
  max-width: 90vw; box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok  { border-color: var(--ok);  color: var(--ok-txt); }
.toast.err { border-color: var(--err); color: var(--err-txt); }

/* ═══════════ 登录/注册 独立页 ═══════════ */
body.plain {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}
.plain-box { width: 100%; max-width: 380px; }
.plain-box .logo {
  text-align: center; font-size: 20px; font-weight: 600; margin-bottom: 22px;
}
.plain-box .logo span { color: var(--ok); }
.plain-box .sub { text-align: center; color: var(--fg-2); font-size: 13px; margin-top: 18px; }

/* ═══════════ 筛选栏 ═══════════ */
.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 18px;
}
.filters .field { margin-bottom: 0; min-width: 110px; }
.filters .grow { flex: 1; min-width: 160px; }

.catalog-filter-bar, .catalog-stock-label { display:none; }
.catalog-list { border-top:1px solid var(--line); margin-bottom:20px; }
.catalog-list .tbl-scroll { margin:0; padding:0; }
.catalog-name { max-width:420px; overflow-wrap:anywhere; }
.catalog-actions { white-space:nowrap; }

@media (max-width:860px) {
  .hdr-in { padding:10px 16px; }
  .hdr-right { width:100%; min-width:0; gap:8px; }
  .hdr-right .bal { margin-right:auto; min-width:0; background:none; border:0; padding:0; border-radius:0; }
  .hdr-right .bal-num { font-size:16px; }
  .hdr-right > .btn { min-height:40px; }
  .hdr-right .menu { min-width:0; max-width:112px; }
  .hdr-right .menu-btn { min-height:40px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .catalog-filter-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .catalog-filter-bar > span { color:var(--fg-2); font-size:12px; }
  .catalog-filter-bar .btn { min-height:40px; min-width:72px; }
  .catalog-filters.is-collapsed { display:none; }
  .catalog-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:8px; padding:14px; }
  .catalog-filters .field, .catalog-filters .grow { min-width:0; }
  .catalog-filters .grow { grid-column:1 / -1; }
  .catalog-filters input, .catalog-filters select { font-size:16px; }
  .catalog-filters .btn { width:100%; min-height:44px; }
  .catalog-list .tbl-scroll { overflow:visible; margin:0; padding:0; }
  .catalog-table, .catalog-table tbody { display:block; width:100%; }
  .catalog-table thead { display:none; }
  .catalog-table tr { display:grid; grid-template-columns:minmax(0,1fr) 104px; column-gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }
  .catalog-table td { padding:0; border:0; min-width:0; }
  .catalog-table tr:hover td { background:none; }
  .catalog-table .catalog-name { grid-column:1; grid-row:1; max-width:none; padding-bottom:8px; font-size:15px; line-height:1.5; font-weight:500; }
  .catalog-region { grid-column:1; grid-row:2; font-size:12px; }
  .catalog-stock { grid-column:1; grid-row:3; padding-top:2px !important; }
  .catalog-stock-label { display:inline; font-family:inherit; }
  .catalog-table .catalog-price { grid-column:2; grid-row:1; text-align:right; font-size:18px; color:var(--ok-txt) !important; }
  .catalog-table .catalog-help { display:none; }
  .catalog-actions { grid-column:2; grid-row:2 / 4; display:flex; align-items:flex-end; justify-content:flex-end; gap:6px; }
  .catalog-actions .btn { min-width:49px; min-height:40px; padding:7px 6px; font-size:12px; border-radius:6px; }
}
@media (max-width:540px) {
  .wrap { padding-left:16px; padding-right:16px; }
  .main { padding-top:20px; }
  .page-title { font-size:22px; }
  .page-sub { font-size:12px; }
  .hdr-right .menu { max-width:90px; }
  .hdr-right .menu-btn { padding:6px 8px; font-size:12px; }
  .hdr-right .bal { font-size:11px; gap:4px; }
}

/* ═══════════ 响应式 ═══════════ */
@media (max-width: 860px) {
  .hdr-in { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 10px; }
  /* ★ 手机端把顶栏那排横排导航**收起来**，由底部 Tab 接管。
     两处都放等于重复，而且横排塞 6 个链接要么换行要么横向滚动，
     在手机上都是一团。收起来之后顶栏只剩品牌 + 余额 + 充值，清爽得多。 */
  .nav { display: none; }
  .hdr-right { margin-left: auto; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .num-phone { font-size: 19px; }
  .num-code { font-size: 24px; }
  .tbl-scroll { margin: 0 -16px; padding: 0 16px; }

  /* ── 底部导航 ── */
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    /* 刘海屏/小白条：不加 env() 的话，最后一行图标会被 iPhone 的
       底部横条压住，点不准 */
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(8,9,12,.94);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  /* 页脚要给底部导航让位，否则页面最后一行永远压在里面看不见 */
  .ftr { padding-bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom, 0px)); }
  /* Toast 固定在 bottom:34px，手机上正好被导航挡住 */
  .toast { bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
  .grid-2 { grid-template-columns: 1fr; }
  .stat-v { font-size: 19px; }
}

/* ═══════════ 首页 Hero 与说明块 ═══════════ */
.hero {
  /* 首屏主视觉：一层从左上打过来的靛蓝光 + 极深的底。
     原来是 135° 的双色线性渐变（#12203a → #0d1117），平铺感很强，
     而且用的还是 GitHub 的底色 —— 换成径向光斑后有了方向感和纵深。 */
  background:
    radial-gradient(125% 135% at 10% 0%, rgba(79,124,255,.22) 0%, rgba(79,124,255,0) 62%),
    linear-gradient(180deg, #121722 0%, #0c0f16 100%);
  border-color: rgba(79,124,255,.42);
}
.hero-h1 {
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: -.4px;
}
.hero-sub {
  color: var(--fg-2);
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
}
.hero-sub b { color: var(--fg); }

/* 买的是什么的说明块 —— 这是新客户最需要、以前完全缺失的一环 */
.hero-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(79,124,255,.08);
  border: 1px solid rgba(79,124,255,.32);
  border-radius: 8px;
  padding: 13px 15px;
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--fg-2);
}
.hero-note b { color: var(--fg); }
.hero-note-ico {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--pri);
  color: #fff;
  font-size: 13px; font-weight: 700;
  text-align: center; line-height: 20px;
  margin-top: 2px;
}
.hero-actions {
  margin-top: 20px;
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center;
}
.card-sub {
  color: var(--fg-3);
  font-size: 13px;
  margin: -6px 0 14px;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .hero-h1 { font-size: 22px; }
  .hero-sub { font-size: 14px; }
  .hero-note { font-size: 13px; padding: 11px 12px; }
  .hero-actions .btn { flex: 1 1 auto; text-align: center; }

  /* ★★ 数据卡在手机上排 2 列，不要压成 1 列。
     上面 ≤860px 那条把 grid-3/grid-4 全压成单列，于是首页 4 个数字
     各占一整行 —— 页面实测 4211px 高，客户要滑过 4 屏才看到「看全部号码」。
     这些卡片只有一个标签 + 一个数字，两列完全放得下，横着还更好对比。
     （grid-4/grid-3 全站只用于 .stat 数据卡，见各视图的用法。） */
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 .stat, .grid-4 .stat { padding: 13px 14px; }
  .grid-3 .stat-v, .grid-4 .stat-v { font-size: 20px; }
}

/* ═══════════ 号段选择 / 面包屑 ═══════════ */
.crumbs { margin: 0 0 12px; font-size: 13px; }
.crumbs a { color: var(--fg-2); }
.crumbs a:hover { color: var(--pri); }

.prefix-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.prefix-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--fg); font-size: 13px; font-family: var(--mono);
  transition: border-color .12s, background .12s;
}
.prefix-chip:hover { border-color: var(--pri); }
.prefix-chip.on {
  border-color: var(--pri);
  background: rgba(79,124,255,.15);
  color: #fff;
}
.prefix-chip span { color: var(--fg-3); font-size: 11px; font-family: inherit; }
.prefix-chip.on span { color: var(--fg-2); }

/* ═══════════ 充值：支付方式选择 + 精确金额面板 ═══════════ */
.pay-methods { display: grid; gap: 8px; }
.pay-method {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--fg); font-size: 14px; font-family: inherit;
  transition: border-color .12s, background .12s;
}
.pay-method:hover { border-color: var(--pri); }
.pay-method.on { border-color: var(--pri); background: rgba(79,124,255,.14); }
.pay-method b { display: block; margin-bottom: 3px; }
.pay-method span { color: var(--fg-3); font-size: 12px; }

/* ★ 精确金额面板：这是单地址充值的核心，
   金额必须做得足够大、足够显眼 —— 用户转错一分钱就认不出来。 */
.paybox {
  border: 1px solid var(--pri); border-radius: 10px;
  background: linear-gradient(160deg, rgba(79,124,255,.10), rgba(79,124,255,.02));
  padding: 18px; text-align: center;
}
.paybox-k { color: var(--fg-3); font-size: 12px; margin-bottom: 6px; }
.paybox-amt {
  font-family: var(--mono); font-size: 38px; font-weight: 700;
  color: var(--ok); line-height: 1.15; margin-bottom: 10px;
  letter-spacing: -.5px; word-break: break-all;
}
.paybox-amt span { font-size: 15px; color: var(--fg-3); margin-left: 6px; font-weight: 400; }
.paybox-warn {
  margin-top: 10px; padding: 8px 10px; border-radius: 6px;
  background: rgba(240,169,46,.12); color: var(--warn); font-size: 12.5px;
}
.paybox-addr {
  font-family: var(--mono); font-size: 13.5px; word-break: break-all;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px; margin-bottom: 10px; color: var(--fg);
}
.paybox-foot { margin-top: 12px; color: var(--fg-3); font-size: 12px; }

@media (max-width: 480px) {
  .paybox-amt { font-size: 30px; }
  .paybox-addr { font-size: 12px; }
}

/* ══════════════ 客服联系块 ══════════════ */
.support {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(79,124,255,.08); border: 1px solid rgba(79,124,255,.25);
  border-radius: 8px; padding: 12px 14px; margin: 14px 0; font-size: 14px;
  color: var(--fg-2); line-height: 1.7;
}
.support-compact { margin: 10px 0; padding: 9px 12px; font-size: 13px; }
.support-icon { flex-shrink: 0; }
.support a { color: var(--pri); }
.support-hours { color: var(--fg-3); font-size: 12.5px; }
.support-tip { color: var(--fg-3); font-size: 12.5px; margin-top: 4px; }

/* ══════════════ 在线客服浮窗 ══════════════ */
.support-chat { position: fixed; right: 24px; bottom: 22px; z-index: 80; }
.support-chat-fab {
  min-width: 48px; height: 48px; border: 0; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 15px; color: #fff; background: var(--pri); cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; box-shadow: 0 12px 28px rgba(18,47,135,.42);
  transition: background .16s, transform .16s;
}
.support-chat-fab:hover { background: var(--pri-d); transform: translateY(-1px); }
.support-chat-fab:focus-visible, .support-chat-close:focus-visible { outline: 2px solid var(--pri-txt); outline-offset: 3px; }
.support-chat-fab svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.support-chat-panel {
  position: absolute; right: 0; bottom: 60px; width: min(340px, calc(100vw - 24px));
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-2); box-shadow: var(--shadow);
  max-height: calc(100dvh - 100px); overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.support-chat-open .support-chat-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.support-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; background: var(--pri); color: #fff; }
.support-chat-title { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; }
.support-chat-state { margin-top: 2px; font-size: 11px; opacity: .82; }
.support-chat-close { width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; font: 27px/1 sans-serif; }
.support-chat-close:hover { background: rgba(255,255,255,.16); }
.support-chat-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line-2); color: var(--fg-3); font-size: 11.5px; overflow-wrap: anywhere; }
.support-chat-meta b { color: var(--fg-2); font-weight: 600; }
.support-chat-meta a { color: var(--pri-txt); white-space: nowrap; }
.support-chat-messages { min-height: 80px; height: 240px; flex: 1 1 240px; max-height: 300px; overflow-y: auto; padding: 14px 12px; background: var(--bg); }
.support-chat-head, .support-chat-meta, .support-chat-form { flex-shrink: 0; }
.support-chat-message { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 11px; font-size: 13px; line-height: 1.55; }
.support-chat-message > div { max-width: 245px; padding: 8px 10px; border-radius: 7px; background: var(--bg-3); color: var(--fg-2); overflow-wrap: anywhere; white-space: pre-wrap; }
.support-chat-avatar { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; align-items: center; justify-content: center; border-radius: 6px; background: var(--pri-soft); color: var(--pri-txt); font-size: 11px; font-weight: 700; }
.support-chat-user { justify-content: flex-end; }
.support-chat-user > div { background: var(--pri); color: #fff; }
.support-chat-form { padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.support-chat-form textarea { width: 100%; min-height: 68px; max-height: 120px; resize: none; border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; background: var(--bg); color: var(--fg); font-family: inherit; font-size: 16px; line-height: 1.5; }
.support-chat-form textarea:focus { border-color: var(--pri); outline: none; }
.support-chat-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--fg-3); font-size: 11px; }
.support-chat-message small { display:block; margin-top:5px; font-size:10px; opacity:.7; }
.support-chat-welcome { color:var(--fg-3); font-size:13px; line-height:1.8; }
.support-chat-history { border:0; padding:8px; color:var(--pri-txt); background:var(--bg-2); cursor:pointer; font:inherit; font-size:12px; }
.support-chat-error { color:var(--err-txt); }
.support-fab-unread { position:absolute; top:-6px; right:-5px; border:2px solid var(--bg); border-radius:20px; background:var(--err); color:white; font-size:11px; min-width:22px; padding:4px; }
.support-unread { display:inline-block; margin-left:8px; background:var(--err); color:white; border-radius:12px; padding:1px 7px; font-size:11px; }
.support-chat [hidden], .support-inbox-layout [hidden], .support-unread[hidden], .support-fab-unread[hidden] { display:none!important; }
.support-admin-heading { display:flex; gap:16px; justify-content:space-between; align-items:center; margin-bottom:18px; }
.support-admin-heading h1 { margin:0 0 7px; font-size:22px; }
.support-admin-heading p { margin:0; color:var(--fg-3); font-size:13px; }
.support-inbox-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; align-items:start; }
.support-inbox, .support-admin-chat, .support-admin-placeholder { border:1px solid var(--line); border-radius:10px; background:var(--bg-2); overflow:hidden; }
.support-inbox-search { padding:14px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; border-bottom:1px solid var(--line); font-size:12px; }
.support-inbox-search > label:first-of-type { width:100%; font-weight:600; color:var(--fg-2); }
.support-inbox-search > input:not([type=hidden]) { width:100%; }
.support-inbox-list { max-height:calc(100dvh - 330px); min-height:100px; overflow:auto; }
.support-inbox-item { display:block; padding:14px; border-bottom:1px solid var(--line-2); color:var(--fg-2); }
.support-inbox-item:hover, .support-inbox-item.selected { background:var(--pri-soft); text-decoration:none; }
.support-inbox-item.selected { box-shadow:inset 3px 0 var(--pri); }
.support-inbox-item > div { display:flex; justify-content:space-between; align-items:center; }
.support-inbox-item > div b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-inbox-item > div .support-unread { flex-shrink:0; }
.support-switch-conversation { display:none; }
.support-inbox-item p { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:6px 0; font-size:13px; color:var(--fg-3); }
.support-inbox-item small, .support-inbox-pagination, [data-inbox-status] { color:var(--fg-3); font-size:11px; }
.support-inbox-pagination { display:flex; justify-content:space-between; gap:8px; padding:12px; }
[data-inbox-status] { display:block; padding:0 12px 12px; }
.support-inbox-empty { margin:0; padding:22px 14px; color:var(--fg-3); font-size:13px; }
.support-admin-chat .support-chat-meta h2 { font-size:16px; margin:5px 0; }
.support-admin-chat .support-chat-messages { height:calc(100dvh - 350px); max-height:none; min-height:220px; }
.support-admin-chat .support-chat-message > div { max-width:min(80%,550px); }
.support-admin-placeholder { text-align:center; padding:80px 20px; color:var(--fg-3); }
.support-admin-placeholder > span { font-size:32px; }
.support-admin-placeholder h2 { font-size:18px; color:var(--fg-2); }
@media(max-width:1000px) { .support-inbox-layout { grid-template-columns:240px minmax(0,1fr); } }
@media(max-width:700px) {
  .support-inbox-layout { grid-template-columns:1fr; }
  .support-switch-conversation { display:block; width:100%; text-align:left; }
  .support-has-selection:not(.support-inbox-expanded) .support-inbox { display:none; }
  .support-inbox-list { max-height:220px; }
  .support-admin-heading { align-items:flex-start; }
  .support-admin-chat .support-chat-messages { height:320px; }
}

@media (max-width: 860px) {
  .support-chat { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100% - 24px); display: flex; justify-content: flex-end; pointer-events: none; }
  .support-chat-fab { pointer-events: auto; }
  .support-chat-panel { width: 100%; bottom: 58px; max-height: calc(100dvh - 150px - env(safe-area-inset-bottom)); }
  .support-chat-fab { width: 48px; min-width: 48px; padding: 0; border-radius: 50%; }
  .support-chat-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}

/* ══════════════ 帮助 / 售后页 ══════════════ */
.wrap-narrow { max-width: 760px; margin: 0 auto; }

.help-ol { margin: 0; padding-left: 22px; line-height: 2; color: var(--fg-2); font-size: 14px; }
.help-ol li { margin-bottom: 2px; }
.help-ol b { color: var(--fg); }

.faq { font-size: 14px; }
.faq-q {
  font-weight: 600; color: var(--fg); margin: 16px 0 6px;
  padding-left: 12px; border-left: 3px solid var(--pri);
}
.faq-q:first-child { margin-top: 0; }
.faq-a { color: var(--fg-2); line-height: 1.85; padding-left: 15px; }
.faq-a b { color: var(--fg); }

.terms { font-size: 13.5px; color: var(--fg-2); line-height: 1.85; }
.terms p { margin: 0 0 10px; }
.terms b { color: var(--fg); }

/* ══════════════ 首页充值入口 ══════════════ */
.recharge-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  border: 1px solid rgba(79,124,255,.35);
  background: linear-gradient(180deg, rgba(79,124,255,.09), rgba(79,124,255,.03));
}
/* 余额不足时换成警示色 —— 这是要用户马上行动的状态 */
.recharge-cta.recharge-need {
  border-color: rgba(240,169,46,.45);
  background: linear-gradient(180deg, rgba(240,169,46,.10), rgba(240,169,46,.03));
}
.rc-left { flex: 1; min-width: 240px; }
.rc-title { font-size: 17px; font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.rc-sub { font-size: 13.5px; color: var(--fg-2); line-height: 1.7; }
.rc-sub b { color: var(--fg); }
.rc-bal { font-family: var(--mono); font-size: 16px; color: var(--ok); }
.recharge-need .rc-bal { color: var(--warn); }
.rc-right { display: flex; gap: 10px; flex-wrap: wrap; }

/* 顶栏余额块：余额为 0 时标红，提示需要充值 */
.bal.bal-zero {
  border-color: rgba(240,169,46,.5) !important;
  background: rgba(240,169,46,.12) !important;
}
.bal.bal-zero .bal-num { color: var(--warn); }

@media (max-width: 560px) {
  .recharge-cta { flex-direction: column; align-items: stretch; }
  .rc-right { justify-content: stretch; }
  .rc-right .btn { flex: 1; text-align: center; }
}

/* ══════════════ 充值页：金额选择 ══════════════ */
/* 预设按钮：选中态必须一眼看得出来（用户点完要看得到变化） */
.presets { display: flex; gap: 10px; flex-wrap: wrap; }
.presets .btn { transition: background .12s, border-color .12s; }
.presets .btn.btn-pri {
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(79,124,255,.28);
}

/* 金额回显：紧贴输入框，用户视线不用离开就能看到「已选多少」 */
.amt-hint {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; margin-top: 7px; font-size: 12.5px;
}
.amt-hint #amt-echo { color: var(--fg-2); }
.amt-hint #amt-echo b { color: var(--ok); font-family: var(--mono); font-size: 14px; }
.amt-limit { color: var(--fg-3); }

/* 充值单有效期倒计时：转错金额会被匹配到别人订单上，所以这个提示很重要 */
.paybox-count {
  margin-top: 12px; padding: 9px 12px; border-radius: 7px; font-size: 13.5px;
  background: rgba(240,169,46,.10); border: 1px solid rgba(240,169,46,.30);
  color: var(--warn-txt); text-align: center;
}
.paybox-count b { color: #fff; font-family: var(--mono); }
.paybox-count.urgent {
  background: rgba(255,95,86,.12); border-color: rgba(255,95,86,.4); color: var(--err-txt);
}
.paybox-count.expired {
  background: rgba(255,95,86,.16); border-color: rgba(255,95,86,.5);
  color: var(--err-txt); font-weight: 600;
}

/* ══════════════ 取码页：短信原文 ══════════════ */
/* 上游返回的是整条短信，提取失败时原文就是唯一的线索 */
.num-raw {
  margin: 14px 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  text-align: left;
}
.num-raw-k {
  color: var(--fg-3); font-size: 12px; margin-bottom: 6px;
}
.num-raw #raw-text {
  color: var(--fg-2); font-size: 13px; line-height: 1.75;
  word-break: break-word; white-space: pre-wrap;
}

/* ══════════════ 购买弹窗（选数量） ══════════════ */
.buy-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.68);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.buy-modal-box {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px; width: 100%; max-width: 420px;
  max-height: 90vh; overflow: auto;
}
.buy-modal-box h2 { margin: 0 0 16px; font-size: 17px; }

.buy-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; font-size: 14px;
}
.buy-k { color: var(--fg-3); }
.buy-v { color: var(--fg); }
.buy-v b { font-family: var(--mono); color: var(--ok); font-size: 16px; }

.qty-row { display: flex; align-items: center; gap: 8px; }
.qty-row input {
  width: 90px; text-align: center; font-family: var(--mono); font-size: 16px;
}
.qty-hint { color: var(--fg-3); font-size: 12.5px; }

.buy-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 16px 0 8px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; color: var(--fg-2);
}
.buy-total b { font-family: var(--mono); font-size: 20px; color: var(--ok); }

.buy-tip { color: var(--fg-3); font-size: 12.5px; margin-top: 10px; }
.buy-tip a { color: var(--pri); }

/* ══════════════ 下单成功面板 ══════════════ */
.or-box {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px; width: 100%; max-width: 520px;
  max-height: 90vh; overflow: auto;
}
.or-box h2 { margin: 0 0 14px; font-size: 18px; color: var(--ok); }
.or-line { color: var(--fg-2); font-size: 13.5px; margin-bottom: 6px; }
.or-line code { font-family: var(--mono); color: var(--fg); }
.or-line b { color: var(--fg); font-family: var(--mono); }

.or-nums { margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.or-nums code {
  font-family: var(--mono); font-size: 13px; padding: 4px 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  color: var(--fg);
}

/* 集合 API 区块：下单后最该被看到的东西 */
.or-api {
  margin: 14px 0; padding: 12px 14px; border-radius: 9px;
  background: rgba(79,124,255,.08); border: 1px solid rgba(79,124,255,.30);
}
.or-api-k { font-size: 13px; color: var(--pri); font-weight: 600; margin-bottom: 8px; }
.or-api-u {
  font-family: var(--mono); font-size: 12px; color: var(--fg);
  word-break: break-all; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 9px 10px; margin-bottom: 8px;
}
.or-api-tip { font-size: 12px; color: var(--fg-3); line-height: 1.75; margin-top: 8px; }
.or-api-tip a { color: var(--pri); }
.or-api-tip b { color: var(--warn); }
.or-number-link { display:flex; gap:8px; align-items:center; margin:7px 0; }
.or-number-link code { flex:1; min-width:0; color:var(--fg); font-family:var(--mono); font-size:12px; word-break:break-all; }

/* ══════════════ 号码页：取码链接卡片 ══════════════
   客户要接进自己程序的那条网址。网址必须等宽 + 可换行，
   否则长 key 会把卡片撑破或看不全。 */
.api-card { border-color: var(--pri-line); }
.api-card h2 { color: var(--pri-txt); }
.api-url {
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  color: var(--fg); word-break: break-all;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 11px;
}
.api-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.api-warn {
  margin: 12px 0 0; font-size: 12px; line-height: 1.7;
  color: var(--warn-txt);
  background: rgba(240,169,46,.09);
  border: 1px solid rgba(240,169,46,.28);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
}

/* ══════════════ 充值页：支付流程三步条 ══════════════
   摆在「生成充值单」按钮**上方**。
   客户在点按钮之前最需要知道「接下来会发生什么」，
   所以它必须在不用滚动就能看到的位置 —— 这是本次改版的重点之一。 */
.pay-steps {
  counter-reset: ps;
  list-style: none;
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 0;
}
.pay-steps li {
  counter-increment: ps;
  flex: 1 1 30%; min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  font-size: 12.5px; line-height: 1.5; color: var(--fg-2);
}
/* 序号用 CSS 计数器画。
   ★ 不能写在 HTML 里：JS 会整段改写 #step3 的 innerHTML
     （按所选通道换文案），写在里面的序号会被一起冲掉。 */
.pay-steps li::before {
  content: counter(ps);
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--pri-soft); color: var(--pri-txt);
  font-size: 11px; font-weight: 700; font-family: var(--mono);
  margin-right: 7px; vertical-align: 1px;
}
.pay-steps li b { color: var(--fg); }

@media (max-width: 640px) {
  /* ★ 手机上**保持三列横排**，不要竖排。
     实测竖排时整条占 134px，把它下面的「生成充值单」按钮直接推到首屏之外 ——
     而这条存在的意义正是「让客户在点按钮之前就知道接下来会发生什么」，
     被推到屏幕外就等于白做。三列 + 缩短文案后约 60px，能连按钮一起看到。 */
  .pay-steps { gap: 6px; }
  .pay-steps li { flex: 1 1 0; padding: 8px 9px; font-size: 11.5px; line-height: 1.45; }
  .pay-steps li::before {
    width: 15px; height: 15px; font-size: 10px; margin-right: 4px;
  }
}

/* ══════════════ 折叠块（details） ══════════════
   用于「必须注意」这类**重要但不必常驻**的内容。
   默认收起能省下近一屏，需要的人点开即可。 */
.fold {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
}
.fold > summary {
  cursor: pointer; list-style: none;
  padding: 13px 16px;
  font-size: 14px; font-weight: 500; color: var(--warn-txt);
  -webkit-tap-highlight-color: transparent;
  transition: background .14s;
}
.fold > summary::-webkit-details-marker { display: none; }
/* 收起时 ▸、展开时 ▾ —— 用 CSS 画，不再引图标 */
.fold > summary::after {
  content: '▾';
  float: right; color: var(--fg-3); font-size: 12px;
  transition: transform .16s;
}
.fold:not([open]) > summary::after { transform: rotate(-90deg); }
.fold > summary:hover { background: var(--bg-3); }
.fold > ul {
  margin: 0; padding: 0 16px 15px 34px;
  color: var(--fg-2); font-size: 13.5px; line-height: 1.85;
}
.fold > ul li { margin-bottom: 8px; }
.fold > ul li:last-child { margin-bottom: 0; }
.fold > ul b { color: var(--fg); }
/* 只有第一条（金额必须一分不差）用警示色 —— 全篇标黄等于全篇不标 */
.fold > ul li:first-child b { color: var(--warn-txt); }

/* Catalog and payment review surfaces. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none !important; }
.shop-intro { padding:12px 0 24px; border-bottom:1px solid var(--line); }
.shop-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:22px; }
.shop-heading h1 { font-size:28px; line-height:1.3; margin:0 0 8px; letter-spacing:0; }
.shop-heading p { color:var(--fg-2); margin:0; font-size:14px; }
.shop-price { color:var(--fg-2); font-size:13px; white-space:nowrap; }
.shop-price strong { color:var(--ok-txt); font:600 28px/1.3 var(--mono); }
.shop-search { display:flex; gap:10px; max-width:720px; margin-bottom:18px; }
.shop-search input { flex:1; min-width:0; height:48px; font-size:15px; font-family:inherit; border-radius:8px; background:var(--bg-2); border:1px solid var(--line); color:var(--fg); padding:10px 12px; }
.shop-search input::placeholder { color:var(--fg-3); }
.shop-search .btn { flex-shrink:0; border-radius:8px; }
.shop-regions { display:flex; flex-wrap:wrap; gap:6px 20px; font-size:13px; }
.shop-regions a { color:var(--fg-2); padding:3px 0; }
.shop-regions a.on { color:var(--ok-txt); border-bottom:2px solid var(--ok); }
.shop-catalog { padding:26px 0 10px; }
.shop-section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.shop-section-head h2 { font-size:18px; margin:0; }
.shop-section-head h2 span { font-size:12px; font-weight:400; color:var(--fg-3); margin-left:10px; }
.shop-section-head > a { font-size:13px; white-space:nowrap; }
.shop-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.shop-product { padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); transition:border-color .15s; min-width:0; }
.shop-product:hover { border-color:var(--ok); }
.shop-product-head { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.shop-product-head > div { min-width:0; }
.app-mark { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:8px; flex-shrink:0; font-size:20px; font-weight:600; }
.mark-0 { background:#173b31; color:#82ebbd; }
.mark-1 { background:#363016; color:#efcc72; }
.mark-2 { background:#35232f; color:#f1a9ce; }
.mark-3 { background:#202f42; color:#9bcfff; }
.shop-product h3 { font-size:16px; line-height:1.4; margin:0 0 4px; overflow-wrap:anywhere; }
.shop-product h3 a { color:var(--fg); }
.shop-product p { font-size:12px; color:var(--fg-2); margin:0; }
.shop-product p span { color:var(--fg-3); }
.shop-product-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.shop-product-price { font:600 22px/1.3 var(--mono); color:var(--ok-txt); }
.shop-product-price span { font-size:12px; line-height:1.5; color:var(--fg-3); display:block; margin-top:2px; }
.shop-product-foot .btn { flex-shrink:0; }
.shop-bottom { display:flex; justify-content:space-between; gap:16px; font-size:12px; color:var(--fg-3); margin-top:24px; }
.recharge-page { max-width:560px; margin:0 auto; }
.recharge-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.recharge-heading h1 { margin:0; font-size:24px; }
.recharge-heading > span { font-size:12px; color:var(--fg-2); white-space:nowrap; }
.recharge-heading b { color:var(--ok-txt); }
.recharge-page .page-sub { margin:4px 0 22px; font-size:13px; }
.recharge-form .presets { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.recharge-form .presets .btn { flex:1 0 64px; padding:8px; font-size:13px; }
.recharge-form #amount { font:600 24px/1.3 var(--mono); height:54px; }
.recharge-form .pay-methods { grid-template-columns:repeat(2,minmax(0,1fr)); }
.recharge-form .pay-method { text-align:center; font-size:13px; min-height:44px; }
.recharge-error { color:var(--err-txt); font-size:13px; }
.recharge-pending, .recharge-notes { padding:14px 0; border-top:1px solid var(--line); margin-top:20px; font-size:13px; color:var(--fg-2); }
.recharge-notes { margin-top:0; }
.recharge-pending summary, .recharge-notes summary { cursor:pointer; }
.recharge-notes ul { padding-left:20px; margin-bottom:0; }
.pending-payment { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; }
.pending-payment small { display:block; font:11px var(--mono); overflow-wrap:anywhere; margin-top:4px; }
.pending-payment > div { min-width:0; }
.pending-payment .btn { flex-shrink:0; }
.recharge-result { outline:none; }
.recharge-result .paybox { border:1px solid var(--line); border-radius:8px; background:var(--bg-2); padding:20px; }
.recharge-result .paybox-amt { font-size:36px; letter-spacing:0; color:var(--ok-txt); }
.recharge-result .paybox-warn { color:var(--warn-txt); font-size:13px; }
.pay-address-label { margin-top:16px; }
.recharge-result #manual-check { margin-top:12px; }
.recharge-result .paybox-count { margin:12px 0 0; padding:0; background:none; border:0; font-size:12px; }
.recharge-result .paybox-foot { font-size:11px; overflow-wrap:anywhere; }
.recharge-back { display:inline-block; margin-top:16px; font-size:13px; }
.collect-reader { max-width:640px; padding:28px 20px; margin:0 auto; }
.collect-reader-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.collect-reader-head h1 { font-size:24px; line-height:1.3; margin:0 0 6px; }
.collect-reader-head p { color:var(--fg-2); font-size:13px; margin:0; overflow-wrap:anywhere; }
.collect-reader-head > div { min-width:0; }
.collect-reader-head form { flex-shrink:0; }
.collect-reader-head button { font-size:13px; }
.collect-reader-summary { font-size:12px; color:var(--fg-3); margin:24px 0 12px; }
.collect-code-item { border:1px solid var(--line); border-radius:8px; background:var(--bg-2); padding:20px; margin-bottom:14px; }
.collect-phone span { font-size:12px; color:var(--fg-3); display:block; }
.collect-phone strong { font:500 18px var(--mono); overflow-wrap:anywhere; }
.collect-code-label { font-size:12px; color:var(--fg-2); margin-top:18px; display:flex; justify-content:space-between; gap:8px; }
.collect-code-label span { color:var(--fg-3); }
.collect-code-value { font:600 36px/1.4 var(--mono); color:var(--ok-txt); margin:6px 0 12px; overflow-wrap:anywhere; }
.collect-wait { color:var(--fg-2); margin:10px 0; }
.collect-expiry { font-size:11px; color:var(--fg-3); margin-top:16px; }
@media (max-width:860px) {
  .shop-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:540px) {
  .shop-intro { padding-top:0; padding-bottom:20px; }
  .shop-heading { align-items:flex-start; gap:12px; margin-bottom:18px; }
  .shop-heading h1 { font-size:22px; }
  .shop-heading p { font-size:12px; max-width:235px; }
  .shop-price { font-size:10px; text-align:right; padding-top:2px; }
  .shop-price strong { display:block; font-size:24px; }
  .shop-search { gap:8px; }
  .shop-search input { height:44px; font-size:13px; }
  .shop-search .btn { font-size:13px; padding:8px 12px; }
  .shop-regions { gap:6px 16px; font-size:12px; }
  .shop-section-head h2 { font-size:16px; }
  .shop-section-head h2 span { display:block; margin:3px 0 0; }
  .shop-products { grid-template-columns:minmax(0,1fr); gap:12px; }
  .shop-product { padding:16px; }
  .shop-product-head { margin-bottom:16px; }
  .shop-bottom { flex-wrap:wrap; gap:6px; }
  .recharge-result .paybox { padding:16px; }
  .recharge-result .paybox-amt { font-size:32px; }
  .recharge-result .paybox-addr { font-size:12px; }
  .buy-modal { padding:12px; }
  .buy-modal-box, .or-box { padding:18px; border-radius:8px; max-height:calc(100dvh - 24px); }
  .qty-row { flex-wrap:wrap; }
  .qty-hint { flex-basis:100%; }
  .buy-modal-box h2 { overflow-wrap:anywhere; }
}

/* ═══════════════════════════════════════════════════════════════
   移动端与可达性修复（2026-10-18）
   ─────────────────────────────────────────────────────────────
   这一块统一放在文件末尾，靠「后写的规则覆盖前面的」生效。
   目的：不去改动散落在上千行里、被多页面共用的原规则，
   把回归风险压到最低。
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* ★ iOS 在输入框字号 < 16px 时会自动放大整页且不缩回。
     原来全局输入框是 14px（首页搜索框甚至 13px），
     每点一次输入框页面就跳一下、布局错位 ——
     这是国内手机用户最容易感知为「网站很糙」的细节。 */
  input[type=text], input[type=password], input[type=number],
  select, textarea,
  .shop-search input, .catalog-filters input {
    font-size: 16px;
  }

  /* ★ 底部导航按实际项数均分。
     原规则写死 repeat(5, 1fr)，而游客态只有 4 个 Tab（首页/帮助/登录/注册），
     于是右侧空掉一格、四个图标挤在左边，第一眼就像没做完。 */
  .tabbar {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  /* ★ 触控目标最小尺寸。
     表格里的「复制 / 取码」原本只有 29–35px 高，
     拇指误触率很高 —— 而复制错号码比点不到更糟。 */
  .btn, .menu-btn, .pager a, .pager span { min-height: 44px; }
  .btn-sm { min-height: 40px; padding: 8px 12px; }
  .copy-btn { min-height: 36px; padding: 8px 12px; }
  .support-chat-close { width: 44px; height: 44px; }
}

/* ★ 键盘可达性：不能只靠 outline:none 把焦点环彻底抹掉。
   鼠标用户看不出差别，但键盘/读屏用户会完全迷路。 */
input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--pri-txt);
  outline-offset: 2px;
}

/* ★ 尊重系统「减少动态效果」设置（前庭功能敏感用户） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}