/* ============================================================================
   MaxMind 控制台 · 用户端新视觉层（mm.css）
   ----------------------------------------------------------------------------
   设计方向（站长 2026-09-23 定）：
     · 深色沉浸 · 高级感（Linear / Vercel 那一路）：近黑灰画布、发丝线分隔、
       层级靠 1~3 阶灰度差表达，不靠卡片底色把内容"托"起来；
     · 混一点苹果的克制毛玻璃：只有悬浮的铬件（导航栏 / 底部 Tab / 弹层）
       才用 backdrop-filter，内容区永远是一块安静的画布；
     · 去容器感：正文不装卡片，靠 留白 + 发丝线 + 字重 分层。
   参考系：Linear（rgb(8,9,10) 画布 / rgba(255,255,255,.08) 发丝线 /
   510-590 中间字重）· Vercel（Geist 单色按钮）· iOS（材质与动效曲线）。

   ⚠️ 隔离机制（本轮最重要的设计）：
     后台管理打开时 body 会挂 .adm-mode（admin.js:689）。
     所以本文件所有令牌重映射都写在 body:not(.adm-mode) 上——
       · 用户端（含对话页外壳 / 用量 / API / 设置 / 订阅 / 弹层）：继承新值；
       · 后台 .adm-mode 挂上后，body 级覆盖失效，一切回落到 admin.css 的
         :root 原值 → 后台一根汗毛都不动。
     组件级覆盖一律不碰 .adm-* 类名；.btn/.modal 这类共享类只写在
     用户页面容器（.u-page / .up-page / .mm-page / .modal）作用域内。

   动效令牌（skill 硬值，优先于习惯）：
     --mm-ease-out    cubic-bezier(0.23, 1, 0.32, 1)   进场
     --mm-ease-inout  cubic-bezier(0.77, 0, 0.175, 1)   屏上移动
     --mm-ease-drawer cubic-bezier(0.32, 0.72, 0, 1)    抽屉/浮层
     只动 transform / opacity；UI 过渡 ≤300ms；进场慢退场快；
     绝不 scale(0)；hover 包 (hover:hover) and (pointer:fine)。
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. 令牌重映射 —— 用户端整体换血（后台 adm-mode 时自动失效）
   ═══════════════════════════════════════════════════════════════════════════ */

body:not(.adm-mode) {
  /* ── 画布与表面（styles.css 家族）────────────────────────────────
     层级：侧栏 #0B0C0E < 画布 #0E0F12 < 面 #17191D < 输入 #1F2227。
     灰阶差刻意压在个位数——「远处星光下的房间」，一层比一层亮一点点。 */
  --bg-body: #0e0f12;
  --bg-body-rgb: 14, 15, 18;
  --bg-sidebar: #0b0c0e;
  --bg-card: #17191d;
  --bg-input: #1f2227;
  --bg-hover: #262930;
  --bg-user-msg: #1f2227;
  --bg-ai-msg: #17191d;
  --border: rgba(255, 255, 255, 0.09);
  --text-primary: #f1f2f4;
  --text-secondary: #9aa1ab;
  --text-muted: #6b7078;
  --accent: #f1f2f4;               /* 单色墨水：主按钮 = 白底黑字（Vercel 式） */
  --on-accent: #0b0c0e;
  --accent-soft: rgba(255, 255, 255, 0.07);
  --accent-glow: rgba(255, 255, 255, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 8px 28px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.62);

  /* ── 用量 / 页面家族（styles.css --u-*）──────────────────────── */
  --u-muted: #9aa1ab;
  --u-faint: #6b7078;
  --u-hover: rgba(255, 255, 255, 0.06);
  /* 状态色（fill 用亮值；文字档另在 --u-*-text 保证 ≥4.5:1） */
  --u-ok: #3d9df6;
  --u-warn: #e8a33d;
  --u-risk: #ef7f45;
  --u-crit: #ef5350;
  --u-ok-text: #6cb8ff;
  --u-warn-text: #f0b45c;
  --u-risk-text: #f79b6d;
  --u-crit-text: #f47a77;

  /* ── 外壳家族（admin.css --adm-*，仅用户端作用域重映射）──────── */
  --adm-bg: #0e0f12;
  --adm-bg-a: rgba(14, 15, 18, 0.86);
  --adm-surface: #17191d;
  --adm-surface-2: #23262c;
  --adm-surface-3: #33373f;
  --adm-glass: rgba(15, 17, 21, 0.66);
  --adm-glass-strong: rgba(11, 12, 15, 0.82);
  --adm-label: #f1f2f4;
  --adm-label-2: rgba(241, 242, 244, 0.62);
  --adm-label-3: rgba(241, 242, 244, 0.38);
  --adm-label-4: rgba(241, 242, 244, 0.20);
  --adm-sep: rgba(255, 255, 255, 0.10);
  --adm-sep-soft: rgba(255, 255, 255, 0.055);
  --adm-fill: rgba(148, 154, 165, 0.30);
  --adm-fill-2: rgba(148, 154, 165, 0.20);
  --adm-fill-3: rgba(148, 154, 165, 0.12);
  --adm-accent: #f1f2f4;
  --adm-on-accent: #0b0c0e;
  --adm-accent-soft: rgba(255, 255, 255, 0.09);

  /* ── 新组件令牌（--mm-*，只在本文件及新标记里用）────────────────── */
  --mm-blue: #4d9eff;              /* 品牌「冷光蓝」：链接 / 进度 / 焦点 */
  --mm-blue-deep: #2f7fe8;
  --mm-blue-soft: rgba(77, 158, 255, 0.14);
  --mm-hair: rgba(255, 255, 255, 0.08);
  --mm-hair-strong: rgba(255, 255, 255, 0.14);
  --mm-track: rgba(255, 255, 255, 0.07);
  --mm-frost: rgba(13, 15, 18, 0.6);
  --mm-frost-strong: rgba(10, 11, 14, 0.78);
  --mm-danger: #ef5350;
  --mm-radius: 10px;
  --mm-radius-lg: 14px;
  --mm-shadow-pop:
    0 0 0 0.5px rgba(255, 255, 255, 0.07) inset,
    0 24px 64px -20px rgba(0, 0, 0, 0.78),
    0 4px 14px -6px rgba(0, 0, 0, 0.55);
  --mm-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --mm-ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --mm-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* 进场专用：比 --mm-ease-out 更收尾绵长的 easeOutQuint，大块内容落位用 */
  --mm-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  /* 数字字体：与全站同一口径（站长 2026-10-01：安卓侧改用 Noto Sans SC）——
     苹方在前，苹果设备上就是真苹方（配合 font-variant-numeric: tabular-nums，
     数字照样等宽对齐）；安卓由自托管的 Noto Sans SC 顶上。
     原来这里优先 -apple-system/SF Pro Display，那是"数字要 SF 的重量感"的老口径，
     与现在的统一字体要求冲突，已按新口径调整。 */
  --mm-num: "PingFang SC", "Noto Sans SC", -apple-system, "SF Pro Display",
            "Segoe UI Variable Display", "Segoe UI", "MiSans", system-ui, sans-serif;
  /* 日常卡片（非弹层）的静息投影：比 --mm-shadow-pop 轻一整档。
     玻璃面 + 发丝描边已经有边界，投影只给「厚度」，不给「悬浮」。 */
  --mm-shadow-card:
    0 0 0 0.5px rgba(255, 255, 255, 0.04) inset,
    0 8px 24px -12px rgba(0, 0, 0, 0.55);
}

/* 浅色主题：同一套结构，反过来调。 */
[data-theme="light"] body:not(.adm-mode) {
  --bg-body: #f6f7f9;
  --bg-body-rgb: 246, 247, 249;
  --bg-sidebar: #eff1f4;
  --bg-card: #ffffff;
  --bg-input: #eef0f3;
  --bg-hover: #e7eaee;
  --bg-user-msg: #eef0f3;
  --bg-ai-msg: #ffffff;
  --border: rgba(0, 0, 0, 0.09);
  --text-primary: #17191e;
  --text-secondary: #5d6470;
  --text-muted: #8a909b;
  --accent: #17191e;
  --on-accent: #ffffff;
  --accent-soft: rgba(0, 0, 0, 0.05);
  --accent-glow: rgba(0, 0, 0, 0.10);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 28px -10px rgba(15, 20, 30, 0.14);
  --shadow-lg: 0 24px 64px -20px rgba(15, 20, 30, 0.18);

  --u-muted: #5d6470;
  --u-faint: #8a909b;
  --u-hover: rgba(0, 0, 0, 0.045);
  --u-ok: #2f7fe8;
  --u-warn: #c07c1a;
  --u-risk: #cf5f1e;
  --u-crit: #d3453f;
  --u-ok-text: #0069e0;
  --u-warn-text: #9a6212;
  --u-risk-text: #ad4c14;
  --u-crit-text: #b93a34;

  --adm-bg: #f6f7f9;
  --adm-bg-a: rgba(246, 247, 249, 0.9);
  --adm-surface: #ffffff;
  --adm-surface-2: #eceef1;
  --adm-surface-3: #dfe3e8;
  --adm-glass: rgba(252, 252, 253, 0.66);
  --adm-glass-strong: rgba(250, 250, 251, 0.85);
  --adm-label: #17191e;
  --adm-label-2: rgba(23, 25, 30, 0.60);
  --adm-label-3: rgba(23, 25, 30, 0.38);
  --adm-label-4: rgba(23, 25, 30, 0.20);
  --adm-sep: rgba(0, 0, 0, 0.10);
  --adm-sep-soft: rgba(0, 0, 0, 0.055);
  --adm-fill: rgba(60, 66, 76, 0.16);
  --adm-fill-2: rgba(60, 66, 76, 0.10);
  --adm-fill-3: rgba(60, 66, 76, 0.06);
  --adm-accent: #17191e;
  --adm-on-accent: #ffffff;
  --adm-accent-soft: rgba(0, 0, 0, 0.06);

  --mm-blue: #0069e0;
  --mm-blue-deep: #0057bd;
  --mm-blue-soft: rgba(0, 105, 224, 0.10);
  --mm-hair: rgba(0, 0, 0, 0.08);
  --mm-hair-strong: rgba(0, 0, 0, 0.14);
  --mm-track: rgba(0, 0, 0, 0.07);
  --mm-frost: rgba(252, 252, 253, 0.6);
  --mm-frost-strong: rgba(250, 250, 251, 0.8);
  --mm-danger: #d3453f;
  --mm-shadow-pop:
    0 0 0 0.5px rgba(0, 0, 0, 0.04) inset,
    0 24px 64px -24px rgba(15, 20, 30, 0.25),
    0 4px 14px -6px rgba(15, 20, 30, 0.10);
  --mm-shadow-card:
    0 0 0 0.5px rgba(0, 0, 0, 0.03) inset,
    0 8px 24px -14px rgba(15, 20, 30, 0.16);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. 画布
   ═══════════════════════════════════════════════════════════════════════════ */

body:not(.adm-mode) {
  background: var(--bg-body);
  color: var(--text-primary);
  /* 大标题在 iOS 上有负字距；正文贴 0。只对全局标题类逐个给，不在 body 上乱来。 */
}

/* 内容在画布上滚动时的细滚动条（桌面才有意义） */
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) ::-webkit-scrollbar { width: 8px; height: 8px; }
  body:not(.adm-mode) ::-webkit-scrollbar-thumb {
    background: var(--adm-fill-2);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  body:not(.adm-mode) ::-webkit-scrollbar-thumb:hover { background-color: var(--adm-fill); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. 外壳细修（侧栏 / 导航 / 底部 Tab / 大标题）
      结构与几何全部沿用 chat.css，这里只换材质与细节。
   ═══════════════════════════════════════════════════════════════════════════ */

/* 侧栏：比画布深一档，右缘一根发丝线。 */
body:not(.adm-mode) .cx-rail {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--mm-hair);
}

/* 顶部导航：滚动后才浮出一层克制的毛玻璃 + 发丝线（原 box-shadow 换成发丝线）。 */
body:not(.adm-mode) .cx-nav.is-scrolled {
  background: var(--mm-frost);
  box-shadow: 0 0.5px 0 var(--mm-hair) inset;
}

/* 底部胶囊 Tab：毛玻璃 + 发丝内描边，投影收短（克制）。 */
body:not(.adm-mode) .cx-tabbar {
  background: var(--mm-frost-strong);
  box-shadow:
    0 0 0 0.5px var(--mm-hair) inset,
    0 12px 32px -14px rgba(0, 0, 0, 0.55);
}

/* 大标题：Linear 式收字距 */
body:not(.adm-mode) .cx-largetitle {
  letter-spacing: -0.02em;
  font-weight: 640;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. 按钮 / 弹层 / 轻提示（只作用于用户端容器）
   ═══════════════════════════════════════════════════════════════════════════ */

.u-page .btn, .up-page .btn, .mm-page .btn, .modal .btn, .modal-overlay .btn {
  border-radius: 8px;
  font-weight: 520;
  transition: transform 140ms var(--mm-ease-out), background-color 140ms ease,
              border-color 140ms ease, color 140ms ease, opacity 140ms ease;
}
.u-page .btn:active, .up-page .btn:active, .mm-page .btn:active,
.modal .btn:active, .modal-overlay .btn:active {
  transform: scale(0.97);
}
/* 主按钮：单色墨水（深色=白底黑字 / 浅色=黑底白字） */
.u-page .btn-primary, .up-page .btn-primary, .mm-page .btn-primary,
.modal .btn-primary, .modal-overlay .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
}
@media (hover: hover) and (pointer: fine) {
  .u-page .btn-primary:hover, .up-page .btn-primary:hover, .mm-page .btn-primary:hover,
  .modal .btn-primary:hover, .modal-overlay .btn-primary:hover {
    background: var(--accent);
    opacity: 0.88;
  }
}
/* 次级按钮：透明底 + 发丝线，幽灵态 */
.u-page .btn:not(.btn-primary):not(.btn-danger), .up-page .btn:not(.btn-primary):not(.btn-danger),
.mm-page .btn:not(.btn-primary):not(.btn-danger),
.modal .btn:not(.btn-primary):not(.btn-danger),
.modal-overlay .btn:not(.btn-primary):not(.btn-danger) {
  background: transparent;
  border: 1px solid var(--mm-hair-strong);
  color: var(--text-secondary);
}
@media (hover: hover) and (pointer: fine) {
  .u-page .btn:not(.btn-primary):not(.btn-danger):hover,
  .up-page .btn:not(.btn-primary):not(.btn-danger):hover,
  .mm-page .btn:not(.btn-primary):not(.btn-danger):hover,
  .modal .btn:not(.btn-primary):not(.btn-danger):hover,
  .modal-overlay .btn:not(.btn-primary):not(.btn-danger):hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
    background: var(--accent-soft);
  }
}
/* 键盘焦点环：冷光蓝 */
.u-page .btn:focus-visible, .up-page .btn:focus-visible, .mm-page .btn:focus-visible,
.modal .btn:focus-visible, .modal-overlay .btn:focus-visible {
  outline: 2px solid var(--mm-blue);
  outline-offset: 2px;
}

/* 弹层：深色面板 + 发丝内描边 + 大而柔的投影；遮罩加一点 blur（苹果"材料到货"）。 */
body:not(.adm-mode) .modal-overlay {
  background: rgba(0, 0, 0, 0.48);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body:not(.adm-mode) .modal {
  background: var(--bg-card);
  border: 1px solid var(--mm-hair);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-pop);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. 用量页（本轮重点）
   ───────────────────────────────────────────────────────────────────────────
   结构（每窗口一行，全宽，行与行之间一根发丝线，没有任何卡片底色）：
     ① q-head    窗口名（小、字重 520）+ 右侧节奏标签
     ② q-val     巨大剩余百分比（数字滚动）+「剩余」+ 右侧刷新时刻
     ③ q-bar     发丝凹槽轨道 + 状态色进度 + 「节奏刻度」竖线
     ④ q-cr      已用 / 总量 Credits（等宽数字小灰字）
   大数字永远保持主文字色（充足时安静），紧张时才让状态色上数字；
   进度条永远带状态色——颜色只出现在「需要被看见」的地方。
   ═══════════════════════════════════════════════════════════════════════════ */

body:not(.adm-mode) .u-page {
  max-width: 660px;
  margin: 0 auto;
  padding-top: 6px;
  padding-bottom: 110px;
  color: var(--text-primary);
}

/* 页头：大标题 + 一句辅助（不写结论句——那是要被删掉的二手信息） */
body:not(.adm-mode) .u-title {
  font-size: 1.875rem;
  font-weight: 640;
  letter-spacing: -0.022em;
  color: var(--text-primary);
}

/* 三行窗口：行距拉开，行间发丝线 */
body:not(.adm-mode) .u-quota { margin-top: 10px; }
body:not(.adm-mode) .q-item { padding: 24px 0 26px; }
body:not(.adm-mode) .q-item + .q-item { border-top: 1px solid var(--mm-hair); }

/* ① 头行：窗口名 + 节奏标签 */
body:not(.adm-mode) .q-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
body:not(.adm-mode) .q-name {
  font-size: 0.8125rem;
  font-weight: 560;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ② 主数字行：大数字 + 剩余 + 刷新时刻（右侧对齐） */
body:not(.adm-mode) .q-val {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}
body:not(.adm-mode) .q-pct {
  font-family: var(--mm-num);
  font-size: 2rem;
  font-weight: 640;
  letter-spacing: -0.033em;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
body:not(.adm-mode) .q-pct.is-warn { color: var(--u-warn-text); }
body:not(.adm-mode) .q-pct.is-risk { color: var(--u-risk-text); }
body:not(.adm-mode) .q-pct.is-crit { color: var(--u-crit-text); }
body:not(.adm-mode) .q-rem {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-secondary);
}
body:not(.adm-mode) .q-reset {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
body:not(.adm-mode) .q-reset .q-ic { display: inline-flex; }
body:not(.adm-mode) .q-reset .q-ic svg { width: 12px; height: 12px; }

/* ③ 进度条：凹槽轨道（上暗下亮的内影）+ 状态色填充 + 节奏刻度 */
body:not(.adm-mode) .q-bar {
  position: relative;
  height: 6px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--mm-track);
  box-shadow: inset 0 0.5px 0 rgba(0, 0, 0, 0.22), inset 0 -0.5px 0 rgba(255, 255, 255, 0.045);
  overflow: visible;              /* 刻度竖线要探出轨道一点 */
}
body:not(.adm-mode) .q-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scaleX(var(--q-ratio, 1));
  transform-origin: 0 50%;
  /* 进场「从 0 涨到位」+ 每秒轮询的跟随都走这一条：easeOutQuint 起步快、
     收尾绵长，跟手但不生硬（第三十四轮从 420ms ease-out 调来） */
  transition: transform 560ms var(--mm-ease-soft);
  background: var(--u-ok);
}
body:not(.adm-mode) .q-fill.is-warn { background: var(--u-warn); }
body:not(.adm-mode) .q-fill.is-risk { background: var(--u-risk); }
body:not(.adm-mode) .q-fill.is-crit { background: var(--u-crit); }
/* 冷光：只在光标可悬停的设备给一点点；crit 时才允许呼吸 */
body:not(.adm-mode) .q-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .q-item:hover .q-fill::after {
    opacity: 1;
    box-shadow: 0 0 14px -2px var(--u-ok);
  }
  body:not(.adm-mode) .q-item:hover .q-fill.is-warn::after { box-shadow: 0 0 14px -2px var(--u-warn); }
  body:not(.adm-mode) .q-item:hover .q-fill.is-risk::after { box-shadow: 0 0 14px -2px var(--u-risk); }
  body:not(.adm-mode) .q-item:hover .q-fill.is-crit::after { box-shadow: 0 0 14px -2px var(--u-crit); }
}
/* 节奏刻度：按时间均匀消耗「此刻应剩多少」的那条竖线 */
body:not(.adm-mode) .q-pace {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: calc(var(--q-expected, 0) * 100%);
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--adm-label-3);
  pointer-events: none;
}

/* ④ 明细行：已用 / 总量 Credits（站长 2026-09-23：小灰字一行糊在一起看不清，拆开层次）
   已用亮一档 + 数字字重压住；总量和单位灰一档；全部走数字字体 + 等宽数字对齐 */
body:not(.adm-mode) .q-cr {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--mm-num);
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
body:not(.adm-mode) .q-cr-label { font-size: 0.75rem; margin-right: 3px; }
body:not(.adm-mode) .q-cr-used {
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: -0.01em;
}
body:not(.adm-mode) .q-cr-sep { opacity: 0.55; }
body:not(.adm-mode) .q-cr-total { letter-spacing: -0.01em; }
body:not(.adm-mode) .q-cr-unit {
  font-size: 0.6875rem;
  margin-left: 3px;
  letter-spacing: 0.02em;
}

/* 节奏标签（图标 + 文字的小胶囊）：发丝线幽灵胶囊，状态只在文字色上 */
body:not(.adm-mode) .q-tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--mm-hair);
  font-size: 0.6875rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
body:not(.adm-mode) .q-tag .q-ic { display: inline-flex; }
body:not(.adm-mode) .q-tag .q-ic svg { width: 11px; height: 11px; }
body:not(.adm-mode) .q-tag.lv-ok .q-ic { color: var(--u-ok-text); }
body:not(.adm-mode) .q-tag.lv-warn { color: var(--u-warn-text); border-color: transparent; }
body:not(.adm-mode) .q-tag.lv-risk, body:not(.adm-mode) .q-tag.lv-crit { color: var(--u-risk-text); border-color: transparent; }

/* 「i」说明钮：安静圆钮，触摸热区用绝对定位 ::after 撑到 44px（老规矩） */
body:not(.adm-mode) .u-info {
  color: var(--text-muted);
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  cursor: pointer;
  transition: color 140ms ease;
}
body:not(.adm-mode) .u-info svg { width: 14px; height: 14px; }
body:not(.adm-mode) .u-info::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .u-info:hover { color: var(--text-secondary); }
}

/* ── 按钥匙占比（uk-*）：同样是裸列表 + 发丝线 ──────────────────────── */
body:not(.adm-mode) .u-keys { margin-top: 8px; }
body:not(.adm-mode) .u-keys-head { padding: 18px 0 4px; border-top: 1px solid var(--mm-hair); }
body:not(.adm-mode) .u-keys-title {
  font-size: 0.8125rem;
  font-weight: 560;
  color: var(--text-secondary);
}
body:not(.adm-mode) .u-keys-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
body:not(.adm-mode) .uk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
}
body:not(.adm-mode) .uk-item + .uk-item { border-top: 1px solid var(--adm-sep-soft); }
body:not(.adm-mode) .uk-name { font-size: 0.875rem; font-weight: 480; color: var(--text-primary); }
body:not(.adm-mode) .uk-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }
body:not(.adm-mode) .uk-pct {
  margin-left: auto;
  font-family: var(--mm-num);
  font-size: 0.9375rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
body:not(.adm-mode) .uk-sign { font-size: 0.6875rem; font-weight: 400; color: var(--text-muted); margin-left: 1px; }
body:not(.adm-mode) .uk-empty { padding: 12px 0; font-size: 0.8125rem; color: var(--text-muted); }

/* ── 当前套餐行：裸行 + 发丝线（第三十四轮去玻璃卡——裸排的页面中间
   浮着唯一一块磨砂圆角，就是整页「说不上哪里怪」的来源） ── */
body:not(.adm-mode) .u-plan {
  margin-top: 14px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--mm-hair);
  display: flex;
  align-items: center;
  gap: 14px;
}
body:not(.adm-mode) .u-plan-k { font-size: 0.75rem; color: var(--text-muted); }
body:not(.adm-mode) .u-plan-name {
  font-family: var(--mm-num);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-top: 2px;
}
body:not(.adm-mode) .u-plan-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
body:not(.adm-mode) .u-plan .btn { margin-left: auto; }

/* ── 额度说明：收成窄栏小字，不再是一块底色 ─────────────────────────── */
body:not(.adm-mode) .u-help {
  margin-top: 8px;
  padding: 18px 0 0;
  border-top: 1px solid var(--mm-hair);
}
body:not(.adm-mode) .u-help-title { font-size: 0.8125rem; font-weight: 560; color: var(--text-secondary); }
body:not(.adm-mode) .u-help-list { margin: 8px 0 0; padding: 0; list-style: none; }
body:not(.adm-mode) .u-help-list li {
  position: relative;
  padding: 5px 0 5px 16px;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text-muted);
}
body:not(.adm-mode) .u-help-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.95em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. API 接入页（u-card → 发丝线分区，去卡片）
   ═══════════════════════════════════════════════════════════════════════════ */

/* API 接入页（站长 2026-09-23：这页不要圆角容器托住——玻璃只给设置页那种
   「表单卡片」，本页是「资料陈列」，回归裸内容 + 发丝线分区） */
body:not(.adm-mode) .u-page .u-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 18px 0;
  position: relative;
}
/* 分区分隔：站长 2026-09-23 拍板「不要做那个线了」——打光线/扫光整体下架，
   回归与用量页同一根安静的 1px 发丝线（只画在栏目之间，首个栏目不画）。 */
body:not(.adm-mode) .u-page .u-card + .u-card {
  border-top: 1px solid var(--mm-hair);
}
/* 栏目标题：小一号 + 字距，序号不要了（站长 2026-09-23） */
body:not(.adm-mode) .u-card-head { padding: 0 0 10px; }
body:not(.adm-mode) .u-card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
body:not(.adm-mode) .u-count { font-size: 0.6875rem; color: var(--text-muted); }
body:not(.adm-mode) .u-page .code-box {
  background: var(--bg-card);
  border: 1px solid var(--mm-hair);
  border-radius: var(--mm-radius);
}
/* 接入地址那根 base-url 条：等宽数字 + 复制钮的行内排布维持原结构，只换皮 */
body:not(.adm-mode) .api-key-row, body:not(.adm-mode) .ak-left, body:not(.adm-mode) .ak-meta {
  border-color: var(--mm-hair);
}
/* 钥匙行的 hover 淡底：垫在 ::before 上（isolate 隔离出 stacking context，
   z-index:-1 压到文字底下），左右各探出 10px —— 底有呼吸感，文字不挪窝 */
body:not(.adm-mode) .api-key-row {
  position: relative;
  isolation: isolate;
}
body:not(.adm-mode) .api-key-row::before {
  content: "";
  position: absolute;
  inset: 0 -10px;
  border-radius: var(--mm-radius);
  background: var(--accent-soft);
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .api-key-row:hover::before { opacity: 1; }
}
body:not(.adm-mode) .api-jump { margin-top: 4px; }
/* 跳转文档的入口：同样是裸行，不做圆角容器；hover 时的淡底是临时反馈，
   不是常驻边界（圆角只出现在 hover 那一瞬间） */
body:not(.adm-mode) .api-jump-card {
  border: 0;
  border-radius: var(--mm-radius);
  background: transparent;
  transition: background-color 160ms ease, transform 160ms var(--mm-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .api-jump-card:hover {
    background: var(--accent-soft);
  }
}
body:not(.adm-mode) .api-jump-card:active { transform: scale(0.985); }

/* ═══════════════════════════════════════════════════════════════════════════
   7. 设置页（app.js 已包上 .mm-page；glass-card 去卡化）
   ═══════════════════════════════════════════════════════════════════════════ */

/* 居中列：显式 width + auto 外边距，不依赖任何父级的对齐方式。
   padding-inline 是必须的：去卡化之后卡片没有自身内边距（见下），若列自身不留边，
   文字会直接顶到列的最左缘——手机上等于贴住屏幕边。clamp 让窄屏 20px、宽屏最多 36px。 */
body:not(.adm-mode) .mm-page {
  width: 100%;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  padding-inline: clamp(20px, 4vw, 36px);
  padding-bottom: 110px;   /* 手机浮动 Tab 栏的让位；桌面在下面收到 64px */
}
@media (min-width: 768px) {
  body:not(.adm-mode) .mm-page { padding-bottom: 64px; }
}

/* ── 导航式设置中心（stx-*）：第三十四轮整体重构，与旧版（大头像头区 +
   纵向小标题裸分区 + 打光线）零共用。桌面 = 左栏（身份 + 分区导航 + 退出）
   + 右侧内容面板；手机 = 身份行 + 横排导航 + 面板。
   不用圆角容器托底：层级全靠发丝线、留白、字重与灰阶。 ── */

body:not(.adm-mode) .stx-wrap {
  display: flex;
  align-items: stretch;   /* 左栏通高：右缘那根发丝竖线从页顶贯到页底 */
  gap: 36px;
  padding-top: 8px;
}

/* 左栏：与内容区之间一根发丝竖线，构成真正的双栏版面（不是两块内容并排）。
   导航组整体吸附在视口顶部附近，长面板滚动时导航永远在场。 */
body:not(.adm-mode) .stx-rail {
  flex: 0 0 216px;
  align-self: stretch;
  border-right: 1px solid var(--mm-hair);
  padding-right: 28px;
}
body:not(.adm-mode) .stx-rail-in {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 6px 0 24px;
}
body:not(.adm-mode) .stx-nav-cap {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
body:not(.adm-mode) .stx-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
body:not(.adm-mode) .stx-avatar {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mm-num);
  font-size: 1.125rem;
  font-weight: 650;
  color: var(--on-accent);
  background: var(--accent);
}
body:not(.adm-mode) .stx-id-txt { min-width: 0; }
body:not(.adm-mode) .stx-id-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
body:not(.adm-mode) .stx-id-meta {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* 分区导航。指示条（stx-nav-ind）绝对定位，JS 只写 transform ——
   从当前项滑到目标项（--mm-ease-drawer，iOS 抽屉同款曲线）。 */
body:not(.adm-mode) .stx-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body:not(.adm-mode) .stx-nav-ind {
  position: absolute;
  left: -14px;
  top: 0;
  width: 2px;
  height: 36px;
  border-radius: 1px;
  background: var(--mm-blue);   /* 指示条用品牌蓝：当前分区一眼可辨 */
  transform: translateY(0);
  transition: transform 320ms var(--mm-ease-drawer);
  pointer-events: none;
}
body:not(.adm-mode) .stx-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  border: 0;
  background: transparent;
  border-radius: var(--mm-radius);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 520;
  text-align: left;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, transform 140ms var(--mm-ease-out);
}
body:not(.adm-mode) .stx-nav-btn svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
body:not(.adm-mode) .stx-nav-btn:active { transform: scale(0.98); }
body:not(.adm-mode) .stx-nav-btn.is-active { color: var(--text-primary); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .stx-nav-btn:hover { background: var(--accent-soft); color: var(--text-primary); }
}

/* 左栏底部退出（桌面）；手机上这颗隐藏，退出改在「账户」面板的操作行里 */
body:not(.adm-mode) .stx-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 2px 0 0 -10px;
  border: 0;
  background: transparent;
  border-radius: var(--mm-radius);
  font: inherit;
  font-size: 0.8125rem;
  color: var(--mm-danger);
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms var(--mm-ease-out);
}
body:not(.adm-mode) .stx-logout svg { width: 15px; height: 15px; }
body:not(.adm-mode) .stx-logout:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .stx-logout:hover { background: var(--accent-soft); }
}

/* 右侧内容面板。非当前分区 display:none；
   进场 = stx-switching 打一帧再撤，子项 .stx-in 按 --i 错峰浮现（可打断）。
   max-width 收住行长度（编辑式排版：一行文字过长就没有版面感）。 */
body:not(.adm-mode) .stx-panels { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
body:not(.adm-mode) .stx-panel { display: none; max-width: 620px; }
body:not(.adm-mode) .stx-panel.is-active { display: block; }
body:not(.adm-mode) .stx-panel.is-active .stx-in {
  transition: opacity 260ms ease, transform 380ms var(--mm-ease-soft);
  transition-delay: calc(var(--i, 0) * 40ms);
}
body:not(.adm-mode) .stx-panel.is-active.stx-switching .stx-in {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

/* 分区大标题：每个面板的开场白 —— 大字 + 负字距 + 一句副题，
   这是「重构过」与「普通设置列表」在观感上的最大分野 */
body:not(.adm-mode) .stx-head { padding: 2px 0 20px; }
body:not(.adm-mode) .stx-title {
  margin: 0;
  font-family: var(--mm-num);
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: var(--text-primary);
}
body:not(.adm-mode) .stx-sub {
  margin: 6px 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* 面板内容：行列表。行与行之间一根发丝线；可点的行 hover 淡底外扩、
   箭头右移 2px —— 反馈都在「离手指最近的地方」。 */
body:not(.adm-mode) .stx-rows { display: flex; flex-direction: column; }
body:not(.adm-mode) .stx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 14px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms var(--mm-ease-out);
}
body:not(.adm-mode) .stx-row + .stx-row { border-top: 1px solid var(--mm-hair); }
body:not(.adm-mode) .stx-row.is-static { cursor: default; }
body:not(.adm-mode) .stx-row.is-danger .stx-row-title,
body:not(.adm-mode) .stx-row.is-danger .stx-row-ic { color: var(--mm-danger); }
body:not(.adm-mode) .stx-row:active { transform: scale(0.99); }
body:not(.adm-mode) .stx-row-main { flex: 1 1 220px; min-width: 0; }
body:not(.adm-mode) .stx-row-title { font-size: 0.9375rem; font-weight: 520; color: var(--text-primary); }
body:not(.adm-mode) .stx-row-desc { margin-top: 3px; font-size: 0.8125rem; line-height: 1.6; color: var(--text-muted); }
body:not(.adm-mode) .stx-row-ic { display: inline-flex; color: var(--text-secondary); }
body:not(.adm-mode) .stx-row-ic svg { width: 16px; height: 16px; }
body:not(.adm-mode) .stx-row-arrow {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 160ms var(--mm-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) button.stx-row:hover { background: var(--accent-soft); }
  body:not(.adm-mode) button.stx-row:hover .stx-row-arrow { transform: translateX(2px); }
}

/* 「账户」分区：两个大数字直接躺在画布上，中间一根发丝竖线 */
body:not(.adm-mode) .stx-stats {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  padding: 4px 0 24px;
}
body:not(.adm-mode) .stx-stat-num {
  font-family: var(--mm-num);
  font-size: 2.375rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
body:not(.adm-mode) .stx-stat-label { margin-top: 6px; font-size: 0.75rem; color: var(--text-muted); }
body:not(.adm-mode) .stx-stat-sep { width: 1px; align-self: stretch; background: var(--mm-hair); }
/* 「今日剩余」下面的额度细进度线已在第三十五轮整体下架（站长反馈：
   设置页不该出现进度条）——数字本身 + mm-num-in 落位动画已经够了。 */

/* 「安全」分区：修改密码收进弹层（stx-pw-modal），面板里只留行式入口 */
body:not(.adm-mode) .stx-form { display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
body:not(.adm-mode) .stx-form .btn { align-self: flex-start; }
body:not(.adm-mode) .stx-pw-modal { max-width: none; padding-top: 2px; }

/* 「更多」分区底部的关于 */
body:not(.adm-mode) .stx-about { padding-top: 20px; }
body:not(.adm-mode) .stx-about-name { font-size: 0.875rem; font-weight: 560; color: var(--text-secondary); }
body:not(.adm-mode) .stx-about-desc { margin-top: 4px; font-size: 0.75rem; color: var(--text-muted); line-height: 1.7; }

/* 数据落位微动效：注册时间 / 两个大数字从「…」变成真值那一刻，
   轻微上浮 + 3px 模糊收清（一次性，由 JS 加 .mm-num-in 触发） */
@keyframes mmNumIn {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
body:not(.adm-mode) .mm-num-in { animation: mmNumIn 360ms var(--mm-ease-soft) both; }

/* 手机（<900px）：左栏变成顶部块，导航横排、指示条变下划线 */
@media (max-width: 899px) {
  body:not(.adm-mode) .stx-wrap { flex-direction: column; gap: 10px; padding-top: 2px; }
  body:not(.adm-mode) .stx-rail { flex: none; width: 100%; border-right: 0; padding-right: 0; }
  body:not(.adm-mode) .stx-rail-in { position: static; padding: 0; gap: 12px; }
  body:not(.adm-mode) .stx-nav {
    flex-direction: row;
    gap: 0;
    border-bottom: 1px solid var(--mm-hair);
    margin: 0 -4px;
  }
  body:not(.adm-mode) .stx-nav-ind { left: 0; top: auto; bottom: -1px; height: 2px; }
  body:not(.adm-mode) .stx-nav-btn { flex: 1 1 0; justify-content: center; padding: 10px 4px; margin: 0; }
  body:not(.adm-mode) .stx-nav-cap { display: none; }
  body:not(.adm-mode) .stx-logout { display: none; }
  body:not(.adm-mode) .stx-panels { padding-top: 8px; }
  body:not(.adm-mode) .stx-head { padding-bottom: 16px; }
  body:not(.adm-mode) .stx-title { font-size: 1.5rem; }
  body:not(.adm-mode) .stx-stats { gap: 22px; }
  body:not(.adm-mode) .stx-stat-num { font-size: 2rem; }
}
@media (min-width: 900px) {
  body:not(.adm-mode) .stx-mob-only { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. 订阅页（upx-*：第三十七轮——GLM 智谱开放平台式定价卡）
      居中窄容器 + 顶部品牌渐变背景；档位做成大卡片（不满铺屏宽）：
      档名 → 大字价格 → 额度倍数 → 支持能力打勾清单 → 卡内直购按钮。
      点谁买谁，没有「选中」中间态；卡片外的一切仍走裸排版 + 发丝线。
   ═══════════════════════════════════════════════════════════════════════════ */
body:not(.adm-mode) .upx-page { position: relative; max-width: 780px; margin: 0 auto; padding: 0 28px 48px; color: var(--text-primary); }
/* 顶部渐变背景：品牌紫 + 蓝（light 主题自动变淡，因为色值都带低透明度） */
body:not(.adm-mode) .upx-bg {
  position: absolute; top: -48px; left: 50%; transform: translateX(-50%);
  width: min(860px, 100%); height: 460px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(420px 260px at 24% 12%, rgba(110, 91, 232, 0.16), transparent 70%),
    radial-gradient(460px 280px at 76% 18%, rgba(59, 130, 246, 0.12), transparent 70%),
    radial-gradient(300px 200px at 52% 4%, rgba(110, 91, 232, 0.08), transparent 70%);
}
body:not(.adm-mode) .upx-page > *:not(.upx-bg) { position: relative; z-index: 1; }
/* 状态条 / 通用清单 / 脚注收在窄栏里，卡片区域才放开宽度 */
body:not(.adm-mode) .upx-narrow { max-width: 640px; margin-left: auto; margin-right: auto; }

/* hero：居中编辑式开场 */
body:not(.adm-mode) .upx-hero { text-align: center; padding-top: 8px; margin-bottom: 24px; }
body:not(.adm-mode) .upx-cap { margin: 0 0 10px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; color: var(--text-muted); }
body:not(.adm-mode) .upx-title { margin: 0; font-size: 2.125rem; font-weight: 650; letter-spacing: -0.028em; line-height: 1.08; color: var(--text-primary); }
body:not(.adm-mode) .upx-sub { margin: 10px auto 0; max-width: 480px; font-size: 0.9375rem; line-height: 1.7; color: var(--text-secondary); }
body:not(.adm-mode) .upx-cur { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 16px; padding: 6px 14px; border: 1px solid var(--mm-hair); border-radius: 999px; }
body:not(.adm-mode) .upx-cur-label { font-size: 0.75rem; color: var(--text-muted); }
body:not(.adm-mode) .upx-cur-name { font-size: 0.875rem; font-weight: 640; color: var(--text-primary); }
body:not(.adm-mode) .upx-cur-meta { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
body:not(.adm-mode) .upx-cur-meta.is-expired { color: var(--mm-danger); }

/* 状态条：裸行 + 发丝线（待审 / 到期共用一套骨架，语义色只落在图标与标题上） */
body:not(.adm-mode) .upx-notice { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border: 1px solid var(--mm-hair); border-radius: 12px; }
body:not(.adm-mode) .upx-notice + .upx-notice { margin-top: 8px; }
body:not(.adm-mode) .upx-notice-ic { display: inline-flex; flex: none; margin-top: 3px; color: var(--u-warn); }
body:not(.adm-mode) .upx-notice.is-hard .upx-notice-ic { color: var(--mm-danger); }
body:not(.adm-mode) .upx-notice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body:not(.adm-mode) .upx-notice-title { font-size: 0.875rem; font-weight: 560; color: var(--text-primary); }
body:not(.adm-mode) .upx-notice.is-hard .upx-notice-title { color: var(--mm-danger); }
body:not(.adm-mode) .upx-notice-desc { font-size: 0.75rem; line-height: 1.6; color: var(--text-muted); }
body:not(.adm-mode) .upx-notice-act { flex: none; border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 0.8125rem; font-weight: 560; color: var(--mm-blue); cursor: pointer; }
body:not(.adm-mode) .upx-notice-act:active { transform: scale(0.97); }

/* 计费周期：居中文字段选 + 滑动指示条（与设置页同一根品牌蓝） */
body:not(.adm-mode) .upx-cycle { position: relative; display: flex; width: max-content; gap: 22px; margin: 0 auto 22px; }
body:not(.adm-mode) .upx-cycle-btn { position: relative; border: 0; background: none; padding: 6px 0 12px; font: inherit; font-size: 0.9375rem; font-weight: 560; color: var(--text-muted); cursor: pointer; transition: color 180ms ease; }
body:not(.adm-mode) .upx-cycle-btn.active { color: var(--text-primary); }
body:not(.adm-mode) .upx-cycle-save { margin-left: 5px; font-style: normal; font-size: 0.6875rem; font-weight: 600; color: var(--mm-blue); }
body:not(.adm-mode) .upx-cycle-ind { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--mm-blue); transition: transform 320ms var(--mm-ease-drawer); }

/* 定价卡网格：不满铺屏宽，居中；每张卡片自己就是一个完整报价单 */
body:not(.adm-mode) .upx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 14px; align-items: stretch; }
body:not(.adm-mode) .upx-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 22px 20px;
  background: var(--bg-card);
  border: 1px solid var(--mm-hair); border-radius: 14px;
  transition: transform 200ms var(--mm-ease-out), border-color 180ms ease, box-shadow 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .upx-card:hover { transform: translateY(-3px); border-color: var(--mm-hair-strong); box-shadow: var(--mm-shadow-pop); }
}
/* 推荐档：品牌蓝描边立住；当前档：只加一枚「当前」徽标，不抢戏 */
body:not(.adm-mode) .upx-card.is-hot { border-color: var(--mm-blue); box-shadow: 0 0 0 1px var(--mm-blue-soft); }
body:not(.adm-mode) .upx-card.is-cur { background: var(--mm-blue-soft); }
body:not(.adm-mode) .upx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body:not(.adm-mode) .upx-card-name { font-size: 1rem; font-weight: 640; letter-spacing: 0.01em; color: var(--text-primary); }
body:not(.adm-mode) .upx-card-name b { margin-left: 3px; font-size: 0.75rem; font-weight: 560; color: var(--text-secondary); }
body:not(.adm-mode) .upx-col-tags { display: flex; gap: 8px; }
body:not(.adm-mode) .upx-tag { font-style: normal; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px; color: var(--text-muted); background: var(--bg-input); }
body:not(.adm-mode) .upx-tag.is-hot { color: #fff; background: var(--mm-blue); }
body:not(.adm-mode) .upx-tag.is-hot { color: var(--mm-blue); }
body:not(.adm-mode) .upx-tag.is-cur { color: var(--u-ok); background: transparent; border: 1px solid var(--u-ok); }
body:not(.adm-mode) .upx-card-price { display: flex; align-items: baseline; gap: 6px; }
body:not(.adm-mode) .upx-card-price b { font-family: var(--mm-num); font-size: 2rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
body:not(.adm-mode) .upx-card-price i { font-style: normal; font-size: 0.8125rem; color: var(--text-muted); }
body:not(.adm-mode) .upx-card-quota { padding-bottom: 12px; border-bottom: 1px solid var(--mm-hair); font-size: 0.8125rem; color: var(--text-secondary); }
body:not(.adm-mode) .upx-card-quota b { color: var(--text-primary); font-weight: 640; }
/* 月总额度：额度行下的第二行小字，数字略亮（2026-09-24 窗口口径轮） */
body:not(.adm-mode) .upx-card-month { display: block; margin-top: 5px; font-size: 0.75rem; color: var(--text-muted); }
body:not(.adm-mode) .upx-card-month b { color: var(--text-secondary); font-weight: 640; font-variant-numeric: tabular-nums; }
/* 能力打勾清单：勾 = 支持；横杠灰 = 不含（不藏着掖着） */
body:not(.adm-mode) .upx-card-feats { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
body:not(.adm-mode) .upx-card-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.8125rem; line-height: 1.55; color: var(--text-secondary); }
body:not(.adm-mode) .upx-feat-ic { display: inline-flex; flex: none; margin-top: 2px; color: var(--u-ok); }
body:not(.adm-mode) .upx-card-feats li.is-off { color: var(--text-muted); }
body:not(.adm-mode) .upx-card-feats li.is-off .upx-feat-ic { color: var(--text-muted); opacity: 0.55; }
/* 卡内直购：点谁买谁 */
body:not(.adm-mode) .upx-card-cta {
  margin-top: auto; width: 100%; min-height: 44px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mm-blue); color: #fff;
  font-family: inherit; font-size: 0.9375rem; font-weight: 600;
  transition: transform 160ms var(--mm-ease-out), opacity 160ms ease;
}
body:not(.adm-mode) .upx-card-cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .upx-card-cta:hover { opacity: 0.9; }
}
body:not(.adm-mode) .upx-card-cta.is-quiet { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--mm-hair); }
body:not(.adm-mode) .upx-card-cta.is-disabled { background: var(--bg-input); color: var(--text-muted); cursor: default; }
body:not(.adm-mode) .upx-card-cta.is-disabled:active { transform: none; }

/* 通用清单：裸行 + 发丝线，勾在最左 */
body:not(.adm-mode) .upx-common { margin-top: 40px; }
body:not(.adm-mode) .upx-sec-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 620; letter-spacing: -0.015em; color: var(--text-primary); }
body:not(.adm-mode) .upx-common-list { list-style: none; margin: 0; padding: 0; }
body:not(.adm-mode) .upx-common-list li { display: flex; gap: 10px; padding: 12px 0; font-size: 0.875rem; line-height: 1.65; color: var(--text-secondary); border-bottom: 1px solid var(--mm-hair); }
body:not(.adm-mode) .upx-common-list li:last-child { border-bottom: 0; }
body:not(.adm-mode) .upx-check { display: inline-flex; flex: none; margin-top: 3px; color: var(--u-ok); }
body:not(.adm-mode) .upx-foot { margin: 28px 0 0; font-size: 0.75rem; line-height: 1.7; color: var(--text-muted); text-align: center; }

/* 手机：卡片单列仍不满铺（容器留边），文字收紧 */
@media (max-width: 899px) {
  body:not(.adm-mode) .upx-title { font-size: 1.625rem; }
  body:not(.adm-mode) .upx-page { padding-left: 18px; padding-right: 18px; }
  body:not(.adm-mode) .upx-grid { gap: 10px; }
  body:not(.adm-mode) .upx-card { padding: 18px 16px 16px; }
  body:not(.adm-mode) .upx-card-price b { font-size: 1.625rem; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   9. 进场编排（页面切换 / 用量行错峰）
      页面级：body 进入新板块时由 JS 给 #content-inner 挂 .mm-enter，
      子元素带 .mm-reveal 按 --i 错峰。UI 过渡 ≤300ms；错峰 40ms。
   ═══════════════════════════════════════════════════════════════════════════ */

/* 待揭示态只在 .mm-io 下生效——这个类由 JS 在「确认 IntersectionObserver 可用、
   用户没开减少动态」之后才挂到 #content-inner 上。
   所以任何一环缺失（老浏览器 / 减少动态 / JS 异常），内容都是直接显示的，
   绝不会出现「动画没跑内容也看不见」的事故。 */
.mm-io .mm-reveal {
  opacity: 0;
  transform: translateY(10px);
}
.mm-io .mm-reveal.is-in {
  opacity: 1;
  transform: none;
  /* 用 transition 而不是 keyframes：transition 从当前值出发、可被打断，
     is-in 由滚动触发、时机不定，keyframes 那种「从头重放」会显得机械。
     第三十四轮：位移收到 10px、transform 换 --mm-ease-soft（easeOutQuint，
     起步快收尾绵长），错峰 45ms → 40ms —— 整体更轻、更连贯。 */
  transition:
    opacity 280ms ease,
    transform 460ms var(--mm-ease-soft);
  transition-delay: calc(var(--i, 0) * 40ms);
}
/* 首屏渲染（无 JS 参与差值）也要有同理的进场：给 .u-page/.mm-page/.up-page 首屏子块 */
body:not(.adm-mode) .u-page > .mm-reveal,
body:not(.adm-mode) .mm-page > .mm-reveal,
body:not(.adm-mode) .up-page > .mm-reveal { will-change: opacity, transform; }

/* 用户手动「减弱动效」（设置页 → 偏好 → 动效，写 localStorage，JS 挂 html.mm-anim-lite）。
   与系统 reduced-motion 同一套退化路径：位移全关、淡入保留——
   减少动效 ≠ 没有反馈。 */
html.mm-anim-lite .mm-io .mm-reveal { opacity: 1; transform: none; transition: none; }
html.mm-anim-lite body:not(.adm-mode) .stx-nav-ind { transition: none; }
html.mm-anim-lite body:not(.adm-mode) .mm-num-in { animation: none; }
html.mm-anim-lite body:not(.adm-mode) .stx-panel.is-active .stx-in { transition: opacity 160ms ease; transition-delay: 0ms; }
html.mm-anim-lite body:not(.adm-mode) .stx-panel.is-active.stx-switching .stx-in { transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   10. 三档兜底（reduced-motion / reduced-transparency / contrast）
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .mm-reveal {
    animation: mmFade 160ms ease backwards;
  }
  @keyframes mmFade { from { opacity: 0; } to { opacity: 1; } }
  body:not(.adm-mode) .q-fill { transition: none; }
  .u-page .btn, .up-page .btn, .mm-page .btn, .modal .btn { transition-duration: 0ms; }
  .u-page .btn:active, .up-page .btn:active, .mm-page .btn:active { transform: none; }
  /* 第三十四轮新增的动效在减少动态下全部退化为淡入/瞬移 */
  body:not(.adm-mode) .mm-num-in { animation: mmFade 160ms ease backwards; }
  body:not(.adm-mode) .stx-nav-ind { transition: none; }
  body:not(.adm-mode) .stx-panel.is-active .stx-in { transition: opacity 160ms ease; transition-delay: 0ms; }
  body:not(.adm-mode) .stx-panel.is-active.stx-switching .stx-in { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  body:not(.adm-mode) .cx-nav.is-scrolled { background: var(--adm-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body:not(.adm-mode) .cx-tabbar { background: var(--bg-sidebar); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body:not(.adm-mode) .modal-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, 0.6); }
  [data-theme="light"] body:not(.adm-mode) .modal-overlay { background: rgba(0, 0, 0, 0.32); }
  /* 玻璃卡片家族：去模糊、给实底（站长可关的透明度，不能只做一半） */
  body:not(.adm-mode) .mm-page .glass-card,
  body:not(.adm-mode) .u-page .u-card { background: var(--bg-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  body:not(.adm-mode) { --mm-hair: rgba(255, 255, 255, 0.22); --mm-hair-strong: rgba(255, 255, 255, 0.34); }
  [data-theme="light"] body:not(.adm-mode) { --mm-hair: rgba(0, 0, 0, 0.22); --mm-hair-strong: rgba(0, 0, 0, 0.34); }
  body:not(.adm-mode) .q-cr, body:not(.adm-mode) .q-reset, body:not(.adm-mode) .q-rem { color: var(--text-secondary); }
  body:not(.adm-mode) .u-help-list li { color: var(--text-secondary); }
}