/* ============================================================================
   usage-google.css —— 控制台「用量与配额」页皮肤 · v2（2026-10-09 改版）
   ----------------------------------------------------------------------------
   本轮改版（相对 v1 的玻璃/Google 行式布局）：
     · 三个窗口从「一张卡里的三行」→【各自一张大卡片】
     · 大号百分比（64px）；% 与「剩余」缩小、并排
     · 新增「节奏刻度」：条上竖线 = 均匀消耗到此刻「应剩」的位置，配节奏标签
     · 套餐卡去掉与「7 天窗口」重复的摘要块
     · 桌面端：页头横向、套餐卡横向、三张窗口卡全宽堆叠
   做法：只换皮 —— app.js 的 renderUsage / patchUsage / 800ms 轮询 / NumberFlow
        全部沿用。patchUsage 依赖的类名（.uz-limit-card / .uz-percent-number /
        .uz-bar / .uz-track / .uz-reset-time）与 id（#u-plan-*）一律保留。
   加载顺序：必须排在 usage-card.css 与 mm.css 之后（同名后来者胜）。
   主题：跟随本站 html[data-theme]（浅色为默认）。
   后台管理页不套：全部规则带 body:not(.adm-mode)。
   ========================================================================== */

/* ── 令牌 ─────────────────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-page {
  --g-ease:      cubic-bezier(0.23, 1, 0.32, 1);
  --g-bg:        #ffffff;
  --g-surface:   #ffffff;
  --g-line:      #e8eaed;
  --g-line-2:    #f1f3f4;
  --g-ink:       #1f1f1f;
  --g-ink2:      #5f6368;
  --g-ink3:      #80868b;
  --g-blue:      #0b57d0;
  --g-blue-deep: #0842a0;
  --g-blue-soft: #d3e3fd;
  --g-track:     #e8eaed;
  --g-amber:     #f29900;
  --g-amber-bg:  #fef7e0;
  --g-amber-ink: #b06000;
  --g-red:       #d93025;
  --g-red-bg:    #fce8e6;
  --g-red-ink:   #c5221f;
  --g-green-bg:  #e6f4ea;
  --g-green-ink: #137333;
  --g-dot:       #188038;
  --g-hover:     #f8f9fa;
  --g-btn-bg:    #0b57d0;
  --g-btn-fg:    #ffffff;
  --g-r:         20px;
}
[data-theme="dark"] body:not(.adm-mode) .uz-page {
  --g-bg:        #131314;
  --g-surface:   #1e1f20;
  --g-line:      #2e2f31;
  --g-line-2:    #262729;
  --g-ink:       #e3e3e3;
  --g-ink2:      #9aa0a6;
  --g-ink3:      #80868b;
  --g-blue:      #a8c7fa;
  --g-blue-deep: #c2d7fc;
  --g-blue-soft: #0842a0;
  --g-track:     #3c4043;
  --g-amber:     #fdd663;
  --g-amber-bg:  #3d2f00;
  --g-amber-ink: #fdd663;
  --g-red:       #f28b82;
  --g-red-bg:    #3b1210;
  --g-red-ink:   #f28b82;
  --g-green-bg:  #0d522c;
  --g-green-ink: #6dd58c;
  --g-dot:       #34a853;
  --g-hover:     #282a2c;
  --g-btn-bg:    #a8c7fa;
  --g-btn-fg:    #062e6f;
}

/* ── 玻璃全家桶：直接掐死 ─────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-plan-card,
body:not(.adm-mode) .uz-limit-card,
body:not(.adm-mode) .uz-menu,
body:not(.adm-mode) .uz-plan-status {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body:not(.adm-mode) .uz-fluid-1,
body:not(.adm-mode) .uz-fluid-2,
body:not(.adm-mode) .uz-fluid-3,
body:not(.adm-mode) .uz-fluid-highlight,
body:not(.adm-mode) .uz-orb,
body:not(.adm-mode) .uz-limit-card::before { display: none !important; }

/* ── 页面 ─────────────────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-page { gap: 0; background: var(--g-bg); }
[data-theme="dark"] body:not(.adm-mode) .uz-page { background: var(--g-bg); }

/* ── 页头 ─────────────────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
body:not(.adm-mode) .uz-crumb { font-size: 12px; color: var(--g-ink3); margin-bottom: 8px; }
body:not(.adm-mode) .uz-crumb-here { color: var(--g-ink2); }
body:not(.adm-mode) .uz-title {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--g-ink);
}
body:not(.adm-mode) .uz-subtitle { margin-top: 10px; font-size: 15px; color: var(--g-ink2); }

body:not(.adm-mode) .uz-menu {
  flex: none;
  height: 40px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  background: var(--g-btn-bg);
  color: var(--g-btn-fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 130ms var(--g-ease), background-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .uz-menu:hover { background: var(--g-blue-deep); }
}
body:not(.adm-mode) .uz-menu:active { transform: scale(0.97); }
[data-theme="dark"] body:not(.adm-mode) .uz-menu { background: var(--g-btn-bg); border: 0; color: var(--g-btn-fg); }
[data-theme="dark"] body:not(.adm-mode) .uz-menu:hover { background: var(--g-blue-deep); }

/* ── 套餐卡 ───────────────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-plan-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border-radius: var(--g-r);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  box-shadow: none;
}
body:not(.adm-mode) .uz-plan-split { position: relative; z-index: 5; display: block; }
body:not(.adm-mode) .uz-plan-content { position: relative; z-index: 5; min-width: 0; }
body:not(.adm-mode) .uz-plan-label { font-size: 13px; font-weight: 400; color: var(--g-ink2); }
body:not(.adm-mode) .uz-plan-name-row { margin-top: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
body:not(.adm-mode) .uz-plan-name {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--g-ink);
}
body:not(.adm-mode) .uz-plan-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  background: var(--g-green-bg);
  color: var(--g-green-ink);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}
body:not(.adm-mode) .uz-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g-dot); box-shadow: none; }
body:not(.adm-mode) .uz-plan-status.is-exp { background: var(--g-red); color: #ffffff; }
[data-theme="dark"] body:not(.adm-mode) .uz-plan-status.is-exp { background: var(--g-red); color: #202124; }
body:not(.adm-mode) .uz-plan-status.is-exp .uz-status-dot { background: currentColor; }

body:not(.adm-mode) .uz-plan-meta { margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 48px; }
body:not(.adm-mode) .uz-plan-meta dt { font-size: 13px; color: var(--g-ink3); }
body:not(.adm-mode) .uz-plan-meta dd { margin: 5px 0 0; font-size: 14px; font-weight: 400; color: var(--g-ink2); }

/* 摘要块（本轮已从 DOM 移除）—— 留着兜底，万一有缓存旧 JS */
body:not(.adm-mode) .uz-plan-summary { display: none !important; }

@media (min-width: 880px) {
  body:not(.adm-mode) .uz-plan-card .uz-plan-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }
  body:not(.adm-mode) .uz-plan-meta { margin-top: 0; }
}

/* ── 分区标题 ─────────────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-section { margin-top: 48px; }
body:not(.adm-mode) .uz-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 2px 16px;
}
body:not(.adm-mode) .uz-section-title { font-size: 17px; font-weight: 400; color: var(--g-ink); }
body:not(.adm-mode) .uz-section-right { font-size: 13px; color: var(--g-ink3); }
body:not(.adm-mode) .uz-live {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--g-blue);
  animation: uz-breathe 2.6s ease-in-out infinite;
}
@keyframes uz-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ── 三张窗口大卡片 ───────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-section #u-quota {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
body:not(.adm-mode) #u-quota .uz-limit-card {
  padding: 32px;
  margin: 0;
  border: 1px solid var(--g-line);
  border-radius: var(--g-r);
  background: var(--g-surface);
  box-shadow: none;
  overflow: hidden;
}
body:not(.adm-mode) #u-quota .uz-limit-card + .uz-limit-card { border-top: 1px solid var(--g-line); }

/* 卡片标题（原 .uz-limit-header 的左右两栏 → 上下堆叠） */
body:not(.adm-mode) .uz-limit-header { display: block; }
body:not(.adm-mode) .uz-limit-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 400;
  color: var(--g-ink);
}
body:not(.adm-mode) .uz-limit-desc { display: none; }

/* 大号百分比：数字大、% 小、「剩余」更小，三者并排 */
body:not(.adm-mode) .uz-percent {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 20px;
}
body:not(.adm-mode) .uz-percent-number {
  display: inline-block;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--g-ink);
}
body:not(.adm-mode) .uz-percent-number number-flow {
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
}
body:not(.adm-mode) .uz-percent-sign { font-size: 26px; font-weight: 400; color: var(--g-ink2); }
body:not(.adm-mode) .uz-percent-label { font-size: 14px; color: var(--g-ink3); margin-left: 4px; }

/* ── 进度条 + 节奏刻度 ────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-progress { margin-top: 24px; }
body:not(.adm-mode) .uz-track {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: var(--g-track);
  overflow: visible;
}
[data-theme="dark"] body:not(.adm-mode) .uz-track { background: var(--g-track); }
body:not(.adm-mode) .uz-bar {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(var(--uz-ratio, 1));
  background: var(--g-blue);
  transition: transform 520ms var(--g-ease), background-color 220ms ease;
}
[data-theme="dark"] body:not(.adm-mode) .uz-bar { background: var(--g-blue); }
body:not(.adm-mode) .uz-bar.is-warn,
body:not(.adm-mode) .uz-bar.is-risk { background: var(--g-amber); }
body:not(.adm-mode) .uz-bar.is-crit { background: var(--g-red); }

/* 节奏刻度：竖线 = 按时间均匀消耗到此刻「应剩」的位置 */
body:not(.adm-mode) .uz-pace-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: calc(var(--uz-pace, 1) * 100%);
  width: 2px;
  border-radius: 2px;
  background: var(--g-ink3);
  opacity: 0.5;
  transform: translateX(-50%);
  pointer-events: none;
}
body:not(.adm-mode) .uz-pace-mark[hidden] { display: none; }

/* ── 底部：倒计时（左）+ 节奏标签（右） ───────────────────────────────────── */
body:not(.adm-mode) .uz-reset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 0;
  border-top: 0;
}
body:not(.adm-mode) .uz-reset-label { display: none; }
body:not(.adm-mode) .uz-reset-time { font-size: 14px; font-weight: 400; color: var(--g-ink2); }
body:not(.adm-mode) .uz-pace-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--g-ink3);
}
body:not(.adm-mode) .uz-pace-label:empty { display: none; }
body:not(.adm-mode) .uz-pace-label svg { width: 13px; height: 13px; flex: none; }
body:not(.adm-mode) .uz-pace-label.is-warn,
body:not(.adm-mode) .uz-pace-label.is-risk { color: var(--g-ink2); }

/* ── 按钥匙块 ─────────────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-page .u-keys {
  margin-top: 48px;
  padding: 32px;
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r);
  box-shadow: none;
}
body:not(.adm-mode) .u-keys-head { padding: 0 0 6px; border-top: 0; }
body:not(.adm-mode) .u-keys-title { font-size: 15px; font-weight: 400; color: var(--g-ink); }
body:not(.adm-mode) .u-keys-sub { font-size: 13px; color: var(--g-ink3); }
body:not(.adm-mode) .uk-item { padding: 14px 0; gap: 16px; }
body:not(.adm-mode) .uk-item + .uk-item { border-top: 1px solid var(--g-line-2); }
body:not(.adm-mode) .uk-name { font-size: 14px; font-weight: 400; color: var(--g-ink); }
body:not(.adm-mode) .uk-sub { font-size: 13px; color: var(--g-ink3); }
body:not(.adm-mode) .uk-pct { font-size: 15px; font-weight: 400; color: var(--g-ink2); }
body:not(.adm-mode) .uk-sign { font-size: 13px; color: var(--g-ink3); }
body:not(.adm-mode) .uk-empty { padding: 12px 0; font-size: 13px; color: var(--g-ink3); }
body:not(.adm-mode) .u-keys .u-plan { margin-top: 14px; padding: 16px 0 0; border-top: 1px solid var(--g-line-2); }
body:not(.adm-mode) .u-plan-k { font-size: 13px; color: var(--g-ink3); }
body:not(.adm-mode) .u-plan-name { font-size: 16px; font-weight: 400; color: var(--g-ink); }
body:not(.adm-mode) .u-plan-sub { font-size: 13px; color: var(--g-ink3); }

/* ── 额度说明 ─────────────────────────────────────────────────────────────── */
body:not(.adm-mode) .uz-page .u-help {
  margin-top: 48px;
  padding: 28px 32px;
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r);
  box-shadow: none;
}
body:not(.adm-mode) .u-help-title { font-size: 15px; font-weight: 400; color: var(--g-ink); }
body:not(.adm-mode) .u-help-list { margin-top: 8px; }
body:not(.adm-mode) .u-help-list li { padding: 6px 0 6px 18px; font-size: 13px; line-height: 1.85; color: var(--g-ink2); }

/* ── 窄屏 ─────────────────────────────────────────────────────────────────── */
@media (max-width: 559px) {
  body:not(.adm-mode) .uz-title { font-size: 26px; }
  body:not(.adm-mode) .uz-header { margin-bottom: 32px; }
  body:not(.adm-mode) .uz-plan-card,
  body:not(.adm-mode) #u-quota .uz-limit-card,
  body:not(.adm-mode) .uz-page .u-keys,
  body:not(.adm-mode) .uz-page .u-help { padding: 24px; }
  body:not(.adm-mode) .uz-percent-number { font-size: 52px; }
  body:not(.adm-mode) .uz-percent-sign { font-size: 22px; }
  body:not(.adm-mode) .uz-plan-name { font-size: 28px; }
  body:not(.adm-mode) .uz-section { margin-top: 40px; }
  body:not(.adm-mode) .uz-page .u-keys,
  body:not(.adm-mode) .uz-page .u-help { margin-top: 40px; }
}

/* ── 减弱动效 ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body:not(.adm-mode) .uz-bar,
  body:not(.adm-mode) .uz-menu { transition: none; }
  body:not(.adm-mode) .uz-live { animation: none; opacity: 0.6; }
}