/* ============================================================================
   套餐/用量页 —— 视觉基线取自交接文档 AIP/Usage.html，
   2026-10-01 按站长指定新设计稿（index(1).html）调整排版后保留全部质感。
   ----------------------------------------------------------------------------
   移植原则：
   1) 只搬视觉，不搬命名。原文件用的是 .title / .section / .bar / .track 这类
      极通用的类名，直接拿进来会和全站样式互相污染 —— 所以全部加 uz- 前缀，
      并且只在 body:not(.adm-mode) 下生效（后台管理页面绝不套这套皮肤）。
   2) 主题跟随本站机制（html[data-theme]），不是原文件的 prefers-color-scheme：
      本站有手动深浅色切换，跟随系统会导致「用户点了浅色但卡片还是深色」。
   3) 进度条用 transform: scaleX 驱动，不用 width。原文件是 width + transition：
      每秒轮询改一次 width 会触发整条链路的 layout，手机上白掉电；scaleX 只走
      合成层。视觉完全一致（圆角留在轨道上，见 .uz-track 的 overflow）。
   4) 数字滚动沿用站内已有的 NumberFlow 实例（见 app.js 的 pctInit / crInit），
      这里只负责给它的宿主元素定尺寸与字体。宿主的 display 必须是 inline-block，
      否则数字分组与 % 会被拆开、视觉上"散架"。
   ========================================================================== */

/* ── 页面底色：原文件那层极淡的环境光 ───────────────────────────────────────
   原文件铺在 body 上；这里铺在 .uz-page 上，避免影响聊天页与其它板块。 */
body:not(.adm-mode) .uz-page {
  position: relative;
  /* 站内统一的强 ease-out（技能规定值）。定义在这里而不是 :root，
     是为了让这套皮肤的所有元素都能继承到，同时不污染全局。 */
  --uz-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* .u-page 自带 gap:18px。这里必须清零：原设计的间距是「页头下 18 / 分区上 27 /
     卡片间 10」这样一套完整节奏，再叠一层 18px 会让分区之间空出一大块（27+18=45px），
     整页看着松散。间距统一由本文件的 margin 负责。 */
  gap: 0;
  background:
    radial-gradient(500px 300px at 0% -10%, rgba(139, 143, 255, .13), transparent 70%),
    radial-gradient(450px 280px at 100% 15%, rgba(102, 177, 220, .09), transparent 70%);
}

/* ── 页头 ────────────────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

/* 面包屑：控制台 › 用量与配额（取自新设计稿）。
   分隔符用小箭头图标，比文字「/」在窄屏下更省空间、也更接近系统观感。 */
body:not(.adm-mode) .uz-crumb {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 9px;
  font-size: 11px;
  color: var(--text-muted);
}
body:not(.adm-mode) .uz-crumb-here { color: var(--text-secondary); }
body:not(.adm-mode) .uz-crumb svg { width: 12px; height: 12px; opacity: .55; }

body:not(.adm-mode) .uz-title {
  font-size: 25px;
  font-weight: 720;
  letter-spacing: -.7px;
  color: var(--u-head, var(--text-primary));
}
body:not(.adm-mode) .uz-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
/* 原文件这里是一颗「···」圆钮。本站的对应动作是「看套餐 / 升级」，
   与其留一个什么都不做的装饰按钮，不如把它做成真正的入口 —— 位置、
   尺寸、玻璃质感都与原设计一致。 */
body:not(.adm-mode) .uz-menu {
  flex: none;
  min-width: 36px;
  height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .045), inset 0 1px 0 rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: #55565c;
  font-size: 12px;
  font-weight: 620;
  font-family: inherit;
  cursor: pointer;
  transition: transform 160ms var(--uz-ease), background-color 200ms ease;
}
body:not(.adm-mode) .uz-menu:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .uz-menu:hover { background: rgba(255, 255, 255, .78); }
}

/* ── 套餐卡（玻璃 + 流体） ────────────────────────────────────────────────
   新设计稿把它改成【左右两栏】：左边档位与动作、右边本周 Credit 摘要。
   卡片高度因此从固定值改为自适应 —— 两栏内容在窄屏会堆叠，写死高度必被裁。 */
body:not(.adm-mode) .uz-plan-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 29px;
  background: rgba(255, 255, 255, .50);
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .085), 0 5px 18px rgba(0, 0, 0, .035),
    inset 0 1px 0 rgba(255, 255, 255, .98);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  backdrop-filter: blur(30px) saturate(140%);
}
body:not(.adm-mode) .uz-plan-split {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
}

/* 流体 1 —— 主体（紫蓝） */
body:not(.adm-mode) .uz-fluid-1 {
  position: absolute;
  width: 310px; height: 270px;
  right: -70px; top: -120px;
  border-radius: 58% 42% 55% 45% / 44% 55% 45% 56%;
  background: radial-gradient(ellipse at 38% 45%,
    rgba(92, 94, 215, .30) 0%, rgba(117, 130, 224, .22) 26%,
    rgba(107, 168, 218, .13) 48%, rgba(255, 255, 255, 0) 72%);
  filter: blur(3px);
  transform: rotate(14deg);
  opacity: .95;
  pointer-events: none;
}
/* 流体 2 —— 蓝色 */
body:not(.adm-mode) .uz-fluid-2 {
  position: absolute;
  width: 270px; height: 190px;
  left: -105px; bottom: -105px;
  border-radius: 44% 56% 42% 58% / 59% 43% 57% 41%;
  background: radial-gradient(ellipse at 58% 45%,
    rgba(62, 160, 206, .23), rgba(107, 135, 221, .13) 38%, transparent 72%);
  filter: blur(5px);
  transform: rotate(-12deg);
  pointer-events: none;
}
/* 流体 3 —— 中间柔光 */
body:not(.adm-mode) .uz-fluid-3 {
  position: absolute;
  width: 190px; height: 190px;
  right: 70px; bottom: -105px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(179, 138, 225, .18), rgba(123, 147, 225, .08) 42%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}
/* 流体高光 —— 一道斜向扫光 */
body:not(.adm-mode) .uz-fluid-highlight {
  position: absolute;
  width: 210px; height: 100px;
  right: 5px; top: 20px;
  border-radius: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .28), transparent);
  filter: blur(12px);
  transform: rotate(-18deg);
  opacity: .8;
  pointer-events: none;
}
body:not(.adm-mode) .uz-orb {
  position: absolute;
  width: 115px; height: 115px;
  right: 18px; bottom: -53px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 15px 30px rgba(0, 0, 0, .025);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: .8;
  pointer-events: none;
}

body:not(.adm-mode) .uz-plan-content { position: relative; z-index: 5; min-width: 0; }
body:not(.adm-mode) .uz-plan-label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .65px;
  color: var(--text-secondary);
}
/* 档位名与状态徽标同一行：名字很长时徽标跟着名字走，不换到下一行孤零零待着 */
body:not(.adm-mode) .uz-plan-name-row {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 10px;
}
body:not(.adm-mode) .uz-plan-name {
  font-size: 44px;
  font-weight: 760;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--u-head, var(--text-primary));
}
body:not(.adm-mode) .uz-plan-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .40);
  border: 1px solid rgba(255, 255, 255, .62);
  color: #62636a;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body:not(.adm-mode) .uz-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4da878;
  box-shadow: 0 0 8px rgba(77, 168, 120, .28);
}
/* 已到期：圆点转红。颜色是信号，正常时不出现 —— 与进度条同一套口径。 */
body:not(.adm-mode) .uz-plan-status.is-exp .uz-status-dot {
  background: var(--u-crit, #ff453a);
  box-shadow: 0 0 8px rgba(255, 69, 58, .3);
}
body:not(.adm-mode) .uz-plan-status.is-exp { color: var(--u-crit-text, #d70015); }

/* 档位信息（计费方式 / 有效期至）：新设计稿那排 dl。
   dt 小字做标签、dd 稍大做值，两列在窄屏自动堆成一列。 */
body:not(.adm-mode) .uz-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 20px 0 0;
}
body:not(.adm-mode) .uz-plan-meta dt {
  font-size: 10px;
  color: var(--text-muted);
}
body:not(.adm-mode) .uz-plan-meta dd {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--u-head, var(--text-primary));
}

/* 右侧摘要栏：本周 Credit 大字 + 进度条 + 脚注。
   宽度写死 260px 而不是 flex:1 —— 它是配角，不该跟左边的档位名抢空间。 */
body:not(.adm-mode) .uz-plan-summary {
  position: relative;
  z-index: 5;
  flex: none;
  width: 260px;
}
body:not(.adm-mode) .uz-plan-credit-label {
  font-size: 10px;
  color: var(--text-secondary);
}
body:not(.adm-mode) .uz-plan-credit-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 6px;
  font-size: 26px;
  font-weight: 730;
  letter-spacing: -.8px;
  color: var(--u-head, var(--text-primary));
  font-variant-numeric: tabular-nums;
}
body:not(.adm-mode) .uz-plan-credit-unit {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-secondary);
}
body:not(.adm-mode) .uz-summary-track {
  height: 5px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, .065);
}
body:not(.adm-mode) .uz-summary-track .uz-bar {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(var(--uz-ratio, 0));
  background: linear-gradient(90deg, #55565d, #25262a);
  transition: transform 460ms var(--uz-ease), background-color 200ms ease;
}
body:not(.adm-mode) .uz-summary-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
}
body:not(.adm-mode) .uz-summary-foot strong {
  font-weight: 620;
  color: var(--u-head, var(--text-primary));
  font-variant-numeric: tabular-nums;
}
body:not(.adm-mode) .uz-summary-pct { font-weight: 650; }

/* ── 分区标题 ───────────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-section { margin-top: 27px; }
/* mm.css 给 .u-quota 定了 margin-top:10px（那是给"无卡片版"补的间距）。
   新版这一块已经有 .uz-section-header 的 11px，再加 10px 会把首张卡推得离标题太远。 */
body:not(.adm-mode) .uz-section #u-quota { margin-top: 0; }
body:not(.adm-mode) .uz-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 3px 11px;
}
body:not(.adm-mode) .uz-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--u-head, var(--text-primary));
}
body:not(.adm-mode) .uz-section-right {
  font-size: 9px;
  color: var(--text-muted);
}

/* ── 额度卡 ─────────────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-limit-card {
  position: relative;
  overflow: hidden;
  padding: 17px;
  margin-bottom: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .53);
  border: 1px solid rgba(255, 255, 255, .76);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .045), inset 0 1px 0 rgba(255, 255, 255, .91);
  -webkit-backdrop-filter: blur(23px) saturate(125%);
  backdrop-filter: blur(23px) saturate(125%);
}
/* 小型环境光：右上角一点冷色，让卡片不是纯平面 */
body:not(.adm-mode) .uz-limit-card::before {
  content: "";
  position: absolute;
  width: 130px; height: 100px;
  right: -70px; top: -45px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 113, 210, .09), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
body:not(.adm-mode) .uz-limit-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
body:not(.adm-mode) .uz-limit-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 680;
  color: var(--u-head, var(--text-primary));
}
body:not(.adm-mode) .uz-limit-desc {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-muted);
}

/* 百分比：字号取自原设计（21px）。数字滚动由 NumberFlow 负责，
   宿主必须是 inline-block —— 数字分组与 % 尾缀都挂在它内部，
   换成 block 会让它们各占一行、视觉上散开。 */
body:not(.adm-mode) .uz-percent { text-align: right; }
body:not(.adm-mode) .uz-percent-number {
  font-size: 21px;
  font-weight: 730;
  letter-spacing: -.6px;
  line-height: 1;
  color: var(--u-head, var(--text-primary));
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease;
}
body:not(.adm-mode) .uz-percent-number number-flow {
  display: inline-block;
  vertical-align: baseline;
  /* 滚动遮罩高度：库默认 0.25em 太浅，滚动时几乎看不出来（站内既有约定） */
  --number-flow-mask-height: 0.6em;
}
body:not(.adm-mode) .uz-percent-label {
  margin-top: 4px;
  font-size: 9px;
  color: var(--text-muted);
}

/* ── 进度条 ─────────────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-progress {
  position: relative;
  z-index: 2;
  margin-top: 16px;
}
body:not(.adm-mode) .uz-track {
  width: 100%;
  height: 7px;
  overflow: hidden;              /* 圆角留在轨道上：scaleX 会把填充的圆角压扁 */
  border-radius: 999px;
  background: rgba(0, 0, 0, .065);
}
body:not(.adm-mode) .uz-bar {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(var(--uz-ratio, 1));
  background: linear-gradient(90deg, #55565d, #25262a);
  /* 460ms 缓出：比原设计的 450ms 略长一点点，是为了让每秒一次的小步进
     看起来是「跟着时间走」而不是「一下一下跳」。缓动曲线用站内统一的
     ease-out，不用 ease —— 有位移的动画需要起步的冲劲。 */
  transition: transform 460ms var(--uz-ease), background-color 200ms ease;
}
body:not(.adm-mode) .uz-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
}
body:not(.adm-mode) .uz-progress-info strong {
  color: var(--u-head, var(--text-primary));
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
/* 数字滚动的宿主（剩余 / 总量 / 套餐 Credit）：同一套 NumberFlow 规则 */
body:not(.adm-mode) .uz-num { font-variant-numeric: tabular-nums; }
body:not(.adm-mode) .uz-num number-flow {
  display: inline-block;
  vertical-align: baseline;
  --number-flow-mask-height: 0.6em;
}

/* ── 重置行 ─────────────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-reset {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, .065);
}
body:not(.adm-mode) .uz-reset-label { font-size: 10px; color: var(--text-muted); }
body:not(.adm-mode) .uz-reset-time {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── 收尾两块（按钥匙 / 额度说明） ────────────────────────────────────────
   这两块沿用站内既有样式，只是把间距接回本页的节奏（gap 已清零，得显式给）。 */
body:not(.adm-mode) .uz-page .u-keys { margin-top: 6px; }
body:not(.adm-mode) .uz-page .u-help { margin-top: 22px; }

/* ── 状态分档 ─────────────────────────────────────────────────────────────
   原设计里进度条只有一条深灰渐变（没有健康度配色）。这里保留「充足时就用原设计的
   那条渐变」，只在额度转紧/危险时才染色 —— 颜色是信号，不该在 96% 的时候也出现。
   这同时守住了站内既有口径：默认中性，需要用户注意时才上色。 */
body:not(.adm-mode) .uz-bar.is-warn { background: var(--u-warn, #e0a53c); }
body:not(.adm-mode) .uz-bar.is-risk { background: var(--u-risk, #f08a3c); }
body:not(.adm-mode) .uz-bar.is-crit { background: var(--u-crit, #ff453a); }
/* 文字用 -text 档（站内为「文字对比度 ≥4.5:1」另开的一组亮值），
   填充用基色档 —— 两套值在浅/深色下各有一份，跟随主题。 */
body:not(.adm-mode) .uz-percent-number.is-warn { color: var(--u-warn-text, var(--u-warn, #e0a53c)); }
body:not(.adm-mode) .uz-percent-number.is-risk { color: var(--u-risk-text, var(--u-risk, #f08a3c)); }
body:not(.adm-mode) .uz-percent-number.is-crit { color: var(--u-crit-text, var(--u-crit, #ff453a)); }

/* ── 深色主题 ─────────────────────────────────────────────────────────────
   原文件用 prefers-color-scheme；本站是手动切换（html[data-theme]），
   所以这里跟着 data-theme 走。 */
[data-theme="dark"] body:not(.adm-mode) .uz-page {
  background:
    radial-gradient(500px 320px at 0% -10%, rgba(93, 98, 203, .17), transparent 70%),
    radial-gradient(420px 280px at 100% 15%, rgba(68, 137, 171, .12), transparent 70%);
}
[data-theme="dark"] body:not(.adm-mode) .uz-menu {
  background: rgba(35, 35, 38, .68);
  border-color: rgba(255, 255, 255, .1);
  color: #d1d1d6;
}
[data-theme="dark"] body:not(.adm-mode) .uz-plan-card {
  background: rgba(30, 30, 34, .66);
  border-color: rgba(255, 255, 255, .11);
  box-shadow: 0 25px 65px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07);
}
[data-theme="dark"] body:not(.adm-mode) .uz-plan-status {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .09);
  color: #bfc0c5;
}
[data-theme="dark"] body:not(.adm-mode) .uz-plan-status.is-exp { color: var(--u-crit-text, #ff6961); }
[data-theme="dark"] body:not(.adm-mode) .uz-summary-track { background: rgba(255, 255, 255, .09); }
[data-theme="dark"] body:not(.adm-mode) .uz-summary-track .uz-bar { background: linear-gradient(90deg, #c5c6ca, #f2f2f4); }
[data-theme="dark"] body:not(.adm-mode) .uz-limit-card {
  background: rgba(28, 28, 31, .66);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .05);
}
[data-theme="dark"] body:not(.adm-mode) .uz-track { background: rgba(255, 255, 255, .09); }
[data-theme="dark"] body:not(.adm-mode) .uz-bar { background: linear-gradient(90deg, #c5c6ca, #f2f2f4); }
[data-theme="dark"] body:not(.adm-mode) .uz-reset { border-color: rgba(255, 255, 255, .065); }

/* ── 窄屏 ─────────────────────────────────────────────────────────────────
   两栏在窄屏堆成一栏（摘要栏宽度取消，否则 260px 会把页面撑出横向滚动）。
   360px 以下的手机，「Pro」这种 44px 的大字加右侧按钮会挤，缩到 38px。 */
@media (max-width: 620px) {
  body:not(.adm-mode) .uz-plan-split { flex-direction: column; align-items: stretch; gap: 20px; }
  body:not(.adm-mode) .uz-plan-summary { width: 100%; }
}
@media (max-width: 360px) {
  body:not(.adm-mode) .uz-plan-card { padding: 18px; }
  body:not(.adm-mode) .uz-plan-name { font-size: 38px; letter-spacing: -1.6px; }
  body:not(.adm-mode) .uz-limit-card { padding: 15px; }
}

/* ── 无障碍：减弱动效 ─────────────────────────────────────────────────────
   减弱 ≠ 全关。数字滚动这种"位置变化"去掉，颜色过渡保留（它帮助理解状态）。 */
@media (prefers-reduced-motion: reduce) {
  body:not(.adm-mode) .uz-bar,
  body:not(.adm-mode) .uz-summary-track .uz-bar { transition: none; }
  body:not(.adm-mode) .uz-menu { transition: none; }
}