/* ============================================================================
   非对话页面的公共留白（升级会员 / 用量 / API 接入 / 我的）
   ----------------------------------------------------------------------------
   这个文件现在【只做一件事】：给这些页面留出屏幕两侧的余量。

   为什么需要它：外壳的滚动容器 .page-content 在窄屏上只有 10px 侧内边距
   （styles.css 的 @media (max-width:400px) { padding: 14px 10px 26px }），
   卡片几乎贴着屏幕边缘。用户原话：「这个卡片直接抵到两边屏幕了，我是要有余量的」。
   侧内边距不能直接改 .page-content —— 对话页共用同一个容器，
   而且对话页要的是通栏（气泡贴到边），所以必须只给这几个页面加。

   ⚠️ 这里【不要】再放视觉换皮（底色 / 圆角 / 描边 / 字号）。
      曾经我对 up-* / u-* 做了一整套 --adm-* 换皮，结果是：
        · 订阅页丢掉了原本的蓝色描边（用户原话：之前蓝色的描边也没了）
        · 卡片被压得贴边
        · 用量页的排版被改到用户不认识
      用户明确要求「还原到之前那样子」。所以视觉一律回到 styles.css 那套，
      本文件只补留白。要改视觉请先问。
   ============================================================================ */

/* 屏幕两侧的余量。
   ⚠️ 原来这里只补 6px（.page-content 的手机档给 10px，合计 16px），
   用户 2026-09-16 反馈「离边框太近了，看起来特别特别挤」。
   16px 是 iOS 列表的旧标准，但那些列表每行都有独立的背景色块把自己
   和屏幕边分开；用量页是**裸排版**（没有卡片、没有底色），文字直接贴着
   屏幕边缘，同样的 16px 看起来就只剩一半。所以这里加到 14px（合计 24px）。
   总宽度也要占住：padding 是在 .u-page 上，不会把 .content-inner 撑破
   （它是 max-width 限制，不是固定宽）。

   2026-09-16 第二次反馈「两边的距离还是太窄了，我宁愿这个中间的调短一点」——
   14px 还不够。用户的取舍很明确：【宁可正文窄一点，也要两侧留够】。
   第三次反馈「离屏幕两边还是太近了，要距离远一点」，再推到 26px
   （手机上合计 36px，390px 屏内容宽 318px —— 一屏三行数字完全够）。
   到这里已经比 iOS 标准页边距（16~20pt）宽出一半，
   再往上就该怀疑是缓存没刷新，而不是继续加数。 */
.up-page,
.u-page {
  padding-left: 26px;
  padding-right: 26px;
}

/* 很窄的屏幕（≤360px）收一点，但【不能收到 2px】——
   原来那条是「避免正文被挤得太窄」，结果窄屏反而是全场最贴边的一档，
   方向刚好反了。窄屏要收的是余量，不是收成正文字贴边。
   窄屏收到 18px（合计 28px），比默认档小但仍远大于任何"贴边"的读数。 */
@media (max-width: 360px) {
  .up-page,
  .u-page {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   尺寸总开关：卡片的留白与字号统一收敛
   ---------------------------------------------------------------------------
   用户 2026-09-14：「所有的卡片再放小一点吧，再缩小一点」。

   ⚠️ 之所以把这些全集中在这一个文件里（而不是去改 styles.css / admin.css）：
      · styles.css 是另一个窗口的文件，不动它，避免互相覆盖；
      · 本文件在三张表之后加载，同权重下自然胜出，包括 styles.css 里
        @media (max-width:520px) 那些窄屏覆盖（媒体查询不加权重，只比先后）；
      · 用户还会继续调（"再小一点"），集中成一处才好改 —— 改这里的数字就行。
   触摸目标一律保 ≥44px（只收留白，不收可点区域）。

   本轮收敛幅度约 25~30%。要更小就继续调下面这些值。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 订阅页 ───────────────────────────────────────────────────────── */
.up-page { gap: 22px; }                    /* 原 42 / 窄屏 34 */
.up-hero-title { font-size: 1.75rem; }     /* 34 → 28 */
.up-hero-sub { font-size: 1rem; margin-top: 8px; }
.up-block { gap: 12px; }                   /* 16 → 12 */
.up-block-title { font-size: 1.25rem; }    /* 22 → 20 */
.up-tiers { gap: 10px; }                   /* 14 → 10 */
.up-tier { padding: 16px 14px; gap: 12px; }        /* 窄屏原 22px 18px */
.up-tier-body { gap: 7px; }                /* 9 → 7 */
.up-tier-head { gap: 7px; }
.up-tier-name { font-size: 1.0625rem; }    /* 18 → 17 */
.up-tier-quota { font-size: 1rem; line-height: 1.45; }
.up-tier-quota em { font-size: 0.8125rem; }
.up-tier-caps { font-size: 0.8125rem; line-height: 1.6; }
.up-price-num { font-size: 1.25rem; }      /* 24 → 20 */
.up-price-per { font-size: 0.75rem; }
.up-common-row { padding: 13px 14px; gap: 10px; font-size: 0.9375rem; line-height: 1.55; }
.up-check { margin-top: 3px; }
.up-matrix th, .up-matrix td { padding: 12px 14px; font-size: 0.875rem; }
.up-note, .up-block-note { font-size: 0.75rem; }
/* 底部悬浮购买胶囊：高度由按钮自己撑，这里只收外圈留白 */
.up-dock { padding: 8px 8px 8px 15px; gap: 12px; }
.up-dock-name { font-size: 0.9375rem; }
.up-dock-price { font-size: 0.75rem; }
.up-dock-cta { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }

/* ── 用量页 / API 接入页 ──────────────────────────────────────────── */
.u-card { padding: 16px 16px 13px; }       /* 原 22px 22px 18px */
/* 每行四段（名称 / 百分比 / 进度条 / 重置时间），比原来的两段高不少。
   16px 是照两段式调的，四段式下相邻两行会粘在一起 —— 调到 20px。 */
.q-item { padding: 20px 0; }               /* 21 → 16 → 20 */
.q-name { font-size: 0.875rem; }             /* 13 → 14：手机上标签也要认得清 */
/* 百分比是这一页的主数字：放大到 32px、字重拉到 700。
   用户 2026-09-16：「［加大加粗］95%」。数字大了必须收紧字距，否则字与字之间
   显得松垮、读起来是一串孤立的字而不是一个数。styles.css 给的是 -0.02em，
   按字号缩放，正好落在「大号数字要负字距」的区间。 */
.q-pct { font-size: 1.5rem; font-weight: 700; }
/* 进度条贴到数字正下方：NumberFlow 组件内部自带较高的下伸部留白，
   数字又没有下伸笔画，所以用大负边距 -11px 把条顶进去。
   若出现条压到字，往回收这个数即可。 */
.q-bar { margin-top: -11px; }
/* 「已用 X / 总量 Y Credits」：12px 小灰字，紧跟在百分比下面。
   margin-top 从 2px 压成 -3px：跟着进度条一起上移。 */
.q-cr { font-size: 0.75rem; letter-spacing: 0.07px; color: var(--u-muted); margin-top: -3px; }
/* ── 百分比后面的「剩余」小字 ────────────────────────────────────────
   用户 2026-09-14：「在额度表那里，百分之多少的位置加一个非常小的灰色小字
   『剩余』，不要产生歧义 —— 就是剩余百分之多少」。
   这个数一直是【剩余】，但之前只有光秃秃一个「78%」，用的人只能猜是剩余还是已用。
   12px = 本页小字档（与 .q-sub 同档），颜色走次要文字（--u-muted），
   和 32px 的数字同一条基线，读起来是「95% 剩余」一个整体。
   顺序是【数字在前、小字在后】——小字在前会被读成「剩余」是标题的一部分；
   放在数字后面，它才是对数字的注解（也是用户给的版式）。 */
.q-val { display: flex; align-items: baseline; gap: 6px; }
.q-rem { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.07px; color: var(--u-muted); }
/* 原来的 9px 跟 styles.css 的 10px 是两套值，改一处不生效。统一走 6px。 */
.q-foot { margin-top: 6px; }
.q-sub, .q-tag { font-size: 0.75rem; }
.u-title { font-size: 1.75rem; }           /* 27 → 28（与订阅页页头同档） */

/* ── 「我的」页的玻璃卡 ───────────────────────────────────────────── */
.glass-card { padding: 18px; }             /* 26 → 18 */
.settings-row { padding: 7px 0; }          /* 8 → 7 */

/* ── 后台管理 ─────────────────────────────────────────────────────── */
/* min-height:44px 还在，所以收的只是留白，触摸目标不会变小 */
.adm-card { padding: 13px; }               /* 16 / 窄屏 14 → 13 */
.adm-row { padding: 9px 13px; }            /* 11px 16px → 9px 13px */
.adm-check-row { padding: 10px 13px; }