/* ==========================================================================
   usage-qu.css · 第 63 轮:用量页「中性磨砂玻璃」皮肤(v1,2026-10-14)
   --------------------------------------------------------------------------
   设计:参照 Apple 材质语言(frostpane / liquid-glass 一类库的同款思路)——
        中性浅色/深色打底 + 白色半透明磨砂 + 发丝边 + 单一强调色。
   纪律:实色、不渐变、无彩色光斑;玻璃感来自 backdrop-blur 与 .qu-page
        底下的点阵纹理(点阵透过磨砂才看得出「这是玻璃」)。
   配套:app.js renderUsage / patchUsage 的 qu-* 结构(第 63 轮);
        分档沿用 bandOfUsed 四档:ok / warn / risk / crit。
   加载顺序:排在 usage-card.css、mm.css、usage-google.css 之后(同名后来者胜);
        本文件只认 qu-* 前缀,与 uz-* 旧皮肤互不干扰(旧 DOM 已不存在)。
   主题:跟随 html[data-theme](浅色默认,深色 AI Studio 面板色)。
   后台管理页不套:全部规则带 body:not(.adm-mode)。
   ========================================================================== */

/* ── 令牌 ─────────────────────────────────────────────────────────────────── */
body:not(.adm-mode) #content-inner.has-usage {
  --qu-ease: cubic-bezier(0.23, 1, 0.32, 1);       /* 强 ease-out(横条/进场) */
  --qu-m3: cubic-bezier(0.2, 0, 0, 1);             /* M3 emphasized(数字同款曲线) */
  --qu-bg: #f5f5f7;
  --qu-ink: #1d1d1f; --qu-ink2: #6e6e73; --qu-ink3: #86868b;
  --qu-glass: rgba(255,255,255,.62);
  --qu-glass-strong: rgba(255,255,255,.8);
  --qu-glass-line: rgba(255,255,255,.72);
  --qu-hairline: rgba(0,0,0,.07);
  --qu-track: rgba(0,0,0,.08);
  --qu-ok: #0b57d0;
  --qu-warn-fill: #f29900;  --qu-warn-ink: #b06000;
  --qu-risk-fill: #e8710a;  --qu-risk-ink: #c2500a;
  --qu-crit-fill: #d93025;  --qu-crit-ink: #c5221f;
  --qu-dot: #30a15a;
  --qu-btn-bg: #0b57d0; --qu-btn-fg: #ffffff;
  --qu-shadow: 0 10px 34px rgba(0,0,0,.07), 0 0 0 .5px rgba(0,0,0,.05);
  --qu-dotgrid: rgba(0,0,0,.075);
  --qu-topglow: rgba(255,255,255,.9);
  --qu-glass-inset: inset 0 1px 0 rgba(255,255,255,.35);
}
[data-theme="dark"] body:not(.adm-mode) #content-inner.has-usage {
  --qu-bg: #0e0e11;
  --qu-ink: #f5f5f7; --qu-ink2: #a1a1a6; --qu-ink3: #86868b;
  --qu-glass: rgba(32,32,37,.52);
  --qu-glass-strong: rgba(38,38,44,.7);
  --qu-glass-line: rgba(255,255,255,.09);
  --qu-hairline: rgba(255,255,255,.08);
  --qu-track: rgba(255,255,255,.11);
  --qu-ok: #a8c7fa;
  --qu-warn-fill: #fdd663;  --qu-warn-ink: #fdd663;
  --qu-risk-fill: #ffb056;  --qu-risk-ink: #ffb056;
  --qu-crit-fill: #f06058;  --qu-crit-ink: #f28b82;
  --qu-dot: #4cd97b;
  --qu-btn-bg: #a8c7fa; --qu-btn-fg: #062e6f;
  --qu-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 .5px rgba(255,255,255,.04);
  --qu-dotgrid: rgba(255,255,255,.05);
  --qu-topglow: rgba(255,255,255,.05);
  --qu-glass-inset: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── 页面:中性打底 + 点阵 + 顶部提亮(点阵是给磨砂玻璃「磨」的东西) ──
   2026-10-18：背景**不能**再画在 .qu-page 这个矩形上。
   原来 .qu-page 限宽 840px 并自带背景 —— 于是页面上出现
   「中间一条有点阵的窄带 + 四周纯白」的拼贴，站长原话：
   「明显分隔了、分层了，有些地方纯白、有些地方有点」。
   现在：背景铺在 #content-inner.has-usage（整个内容区，纵向也铺满），
        .qu-page 只负责内容列（居中，最大 1120px）。 */
/* max-width:none 本来是 dm.css 的活（.cx-scroll > .content-inner），
   但那边历史上被一个游离的 } 吞掉了。这里再声明一次做双保险：
   本选择器带 id，权重高于 styles.css 的 .content-inner。 */
body:not(.adm-mode) #content-inner.has-usage {
  max-width: none;
  width: 100%;
}

/* ── 2026-10-18 站长要求：其他页面也要「有颜色打底 + 点阵」─────────────
   原来这套背景只挂在 .has-usage（用量页特供），现在铺到**所有用户端页面**。
   颜色仍走 --qu-* 令牌；没有令牌的页面（对话 / API / 设置 / 升级…）用 var() 的
   兜底值，保证浅色深色都对。后台 body.adm-mode 不受影响。 */
body:not(.adm-mode) .cx-scroll > .content-inner {
  background-color: var(--qu-bg, #f5f5f7);
  background-image:
    radial-gradient(90% 42% at 50% -10%, var(--qu-topglow, rgba(255,255,255,.9)), transparent 62%),
    radial-gradient(var(--qu-dotgrid, rgba(0,0,0,.075)) 1px, transparent 1.2px);
  background-size: 100% 100%, 26px 26px;
  background-repeat: no-repeat, repeat;
  min-height: 100vh;
}
[data-theme="dark"] body:not(.adm-mode) .cx-scroll > .content-inner {
  background-color: var(--qu-bg, #0e0e11);
  background-image:
    radial-gradient(90% 42% at 50% -10%, var(--qu-topglow, rgba(255,255,255,.05)), transparent 62%),
    radial-gradient(var(--qu-dotgrid, rgba(255,255,255,.05)) 1px, transparent 1.2px);
}
body:not(.adm-mode) .qu-page {
  max-width: none;
  margin: 0 auto;
  padding: 36px max(24px, calc((100% - 1120px) / 2)) 20px;
  color: var(--qu-ink);
}
@media (max-width: 720px) {
  body:not(.adm-mode) .qu-page { padding: 24px 18px 16px; }
}

/* 重置卡是 .qu-page 的兄弟节点，吃不到上面的内边距 —— 单独对齐到同一列。
   dm.css 里还有一条给旧 840px 版式写的 `max-width:896px + margin:auto`，
   这里用「多带一个 id」的更高权重压掉它（否则宽屏上它会缩在中间）。 */
body:not(.adm-mode) #content-inner.has-usage #uxe-reset-wrap {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: max(24px, calc((100% - 1120px) / 2));
  padding-right: max(24px, calc((100% - 1120px) / 2));
}
@media (max-width: 720px) {
  body:not(.adm-mode) #uxe-reset-wrap { padding-left: 18px; padding-right: 18px; }
}

/* ── 磨砂玻璃基类(Apple 材质:高 blur + 高饱和 + 发丝双层边) ── */
body:not(.adm-mode) .qu-page .glass {
  background: var(--qu-glass);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  backdrop-filter: blur(32px) saturate(1.8);
  border: 1px solid var(--qu-glass-line);
  border-radius: 24px;
  box-shadow: var(--qu-shadow), var(--qu-glass-inset);
}

/* ── 进场:淡入 + 上移,交错 50ms;qu-on 由 renderUsage 双 rAF 后加,
      800ms 轮询走 patchUsage 增量更新,不会重放 ── */
body:not(.adm-mode) .qu-page .qu-reveal { opacity: 0; transform: translateY(10px); }
body:not(.adm-mode) #usage-details.qu-on .qu-reveal {
  animation: quIn 460ms var(--qu-ease) forwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes quIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  body:not(.adm-mode) .qu-page .qu-reveal { opacity: 1; transform: none; }
  body:not(.adm-mode) #usage-details.qu-on .qu-reveal { animation: none; }
}

/* ── 顶部:面包屑 + 标题 + 安静的套餐行 + CTA ── */
body:not(.adm-mode) .qu-page .qu-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
body:not(.adm-mode) .qu-page .qu-crumb { display: flex; align-items: center; gap: 6px; color: var(--qu-ink3); font-size: 12.5px; }
body:not(.adm-mode) .qu-page .qu-crumb svg { width: 13px; height: 13px; }
body:not(.adm-mode) .qu-page .qu-title { font-size: 26px; font-weight: 600; margin: 10px 0 4px; letter-spacing: -.01em; }
body:not(.adm-mode) .qu-page .qu-subtitle { color: var(--qu-ink3); font-size: 13.5px; margin: 0 0 8px; }
body:not(.adm-mode) .qu-page .qu-planline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--qu-ink2); font-size: 13px;
}
body:not(.adm-mode) .qu-page .qu-planline .sep { opacity: .4; }
body:not(.adm-mode) .qu-page .qu-planline b { font-weight: 600; color: var(--qu-ink); }
body:not(.adm-mode) .qu-page .qu-plan-status { display: inline-flex; align-items: center; gap: 6px; }
body:not(.adm-mode) .qu-page .qu-plan-status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--qu-dot); flex-shrink: 0;
  transition: background-color 250ms ease;
}
body:not(.adm-mode) .qu-page .qu-plan-status.is-exp .dot { background: var(--qu-crit-fill); }
body:not(.adm-mode) .qu-page .qu-plan-status.is-exp { color: var(--qu-crit-ink); }
body:not(.adm-mode) .qu-page .qu-cta {
  border: 0; border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 600;
  background: var(--qu-btn-bg); color: var(--qu-btn-fg); cursor: pointer;
  margin-top: 10px; flex-shrink: 0;
  transition: transform 120ms var(--qu-m3), filter 150ms ease;
}
body:not(.adm-mode) .qu-page .qu-cta:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .qu-page .qu-cta:hover { filter: brightness(1.07); }
}

/* ── 主表:5 小时窗口 ── */
body:not(.adm-mode) .qu-page .qu-hero { margin-top: 26px; padding: 28px 32px 26px; }
body:not(.adm-mode) .qu-page .qu-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body:not(.adm-mode) .qu-page .qu-win-name { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
body:not(.adm-mode) .qu-page .qu-info {
  border: 0; background: transparent; color: var(--qu-ink3); cursor: pointer; line-height: 0; padding: 3px;
  border-radius: 50%; display: inline-flex;
  transition: color 150ms ease, transform 120ms var(--qu-m3);
}
body:not(.adm-mode) .qu-page .qu-info svg { width: 15px; height: 15px; }
body:not(.adm-mode) .qu-page .qu-info:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .qu-page .qu-info:hover { color: var(--qu-ok); }
}
body:not(.adm-mode) .qu-page .qu-hero-cd { font-size: 13px; }

/* 大数字:实色、高对比、不渐变不发光;尺寸由 data-kind 驱动(patchUsage 整体重写
   className 也不会丢尺寸);跳动瞬间脉冲是纯包装,滚动参数在 pctInit。 */
body:not(.adm-mode) .qu-page .qu-num { font-variant-numeric: tabular-nums; transform-origin: left center; }
body:not(.adm-mode) .qu-page .qu-num[data-kind="hero"] {
  font-size: clamp(76px, 14vw, 112px); font-weight: 700; line-height: .95; letter-spacing: -.035em;
}
body:not(.adm-mode) .qu-page .qu-num[data-kind="sub"] {
  font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
}
body:not(.adm-mode) .qu-page .qu-num.is-warn { color: var(--qu-warn-ink); }
body:not(.adm-mode) .qu-page .qu-num.is-risk { color: var(--qu-risk-ink); }
body:not(.adm-mode) .qu-page .qu-num.is-crit { color: var(--qu-crit-ink); }
body:not(.adm-mode) .qu-page .qu-num.tick { animation: quTick 240ms var(--qu-m3); }
@keyframes quTick { 0% { transform: scale(1); } 35% { transform: scale(1.012); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  body:not(.adm-mode) .qu-page .qu-num.tick { animation: none; }
}
body:not(.adm-mode) .qu-page .qu-hero-numrow { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 20px; }
body:not(.adm-mode) .qu-page .qu-hero-unit { display: flex; flex-direction: column; gap: 3px; }
body:not(.adm-mode) .qu-page .qu-hero-unit .pct { font-size: 26px; color: var(--qu-ink2); font-weight: 500; }
body:not(.adm-mode) .qu-page .qu-hero-unit .lab { font-size: 13px; color: var(--qu-ink3); }

/* ── 直线横条:玻璃轨道 + 实色填充(无渐变、无分段、无环形) ── */
body:not(.adm-mode) .qu-page .qu-bar {
  position: relative; height: 12px; border-radius: 999px; background: var(--qu-track);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
[data-theme="dark"] body:not(.adm-mode) .qu-page .qu-bar { box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
body:not(.adm-mode) .qu-page .qu-bar .fill {
  position: absolute; inset: 0; border-radius: inherit; background: var(--qu-ok);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  transform-origin: left center; transform: scaleX(var(--ratio, 0));
  transition: transform 560ms var(--qu-ease), background-color 250ms ease;
}
body:not(.adm-mode) .qu-page .qu-bar .fill.is-warn { background: var(--qu-warn-fill); }
body:not(.adm-mode) .qu-page .qu-bar .fill.is-risk { background: var(--qu-risk-fill); }
body:not(.adm-mode) .qu-page .qu-bar .fill.is-crit { background: var(--qu-crit-fill); }
@media (prefers-reduced-motion: reduce) {
  body:not(.adm-mode) .qu-page .qu-bar .fill { transition: none; }
}
/* 节奏刻度:按时间匀速「应剩」位置 */
body:not(.adm-mode) .qu-page .qu-bar .pace {
  position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px;
  background: var(--qu-ink3); opacity: .55; left: calc(var(--pace, 0) * 100% - 1px);
}
body:not(.adm-mode) .qu-page .qu-hero-meta {
  display: flex; align-items: center; justify-content: space-between; margin-top: 14px;
}
body:not(.adm-mode) .qu-page .qu-reset-time { font-family: var(--qu-mono, "Roboto Mono","Cascadia Mono",Consolas,ui-monospace,monospace); color: var(--qu-ink2); }
body:not(.adm-mode) .qu-page .qu-sub-cd { font-size: 11.5px; }
body:not(.adm-mode) .qu-page .qu-pace-label {
  font-size: 12.5px; color: var(--qu-ink2); padding: 4px 12px; border-radius: 999px;
  background: var(--qu-glass); border: 1px solid var(--qu-hairline);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: inline-flex; align-items: center; gap: 5px;
}
body:not(.adm-mode) .qu-page .qu-pace-label.is-warn { color: var(--qu-warn-ink); }
body:not(.adm-mode) .qu-page .qu-pace-label.is-risk { color: var(--qu-risk-ink); }
body:not(.adm-mode) .qu-page .qu-live { display: inline-flex; align-items: center; gap: 7px; color: var(--qu-ink3); font-size: 12px; }
body:not(.adm-mode) .qu-page .qu-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--qu-dot);
  animation: quPulse 2.4s ease-in-out infinite;
}
@keyframes quPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  body:not(.adm-mode) .qu-page .qu-live i { animation: none; }
}

/* ── 副表:24h + 7d,一张玻璃卡两格,竖发丝线分隔 ── */
body:not(.adm-mode) .qu-page .qu-sub {
  margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; padding: 24px 32px;
}
body:not(.adm-mode) .qu-page .qu-sub-cell + .qu-sub-cell { border-left: 1px solid var(--qu-hairline); padding-left: 32px; }
body:not(.adm-mode) .qu-page .qu-sub-cell:first-child { padding-right: 32px; }
body:not(.adm-mode) .qu-page .qu-sub-numrow { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 14px; }
body:not(.adm-mode) .qu-page .qu-sub-unit { font-size: 15px; color: var(--qu-ink2); font-weight: 500; }
body:not(.adm-mode) .qu-page .qu-sub .qu-bar { height: 8px; }
body:not(.adm-mode) .qu-page .qu-sub .pace { top: -3px; bottom: -3px; }
body:not(.adm-mode) .qu-page .qu-sub-meta {
  display: flex; align-items: center; justify-content: space-between; margin-top: 12px;
}
@media (max-width: 720px) {
  body:not(.adm-mode) .qu-page .qu-sub { grid-template-columns: 1fr; padding: 20px 20px; }
  body:not(.adm-mode) .qu-page .qu-sub-cell { padding: 0 !important; border-left: 0 !important; }
  body:not(.adm-mode) .qu-page .qu-sub-cell + .qu-sub-cell {
    border-top: 1px solid var(--qu-hairline); margin-top: 18px; padding-top: 18px !important;
  }
}

/* ── 按钥匙:列表行 + 行内微型横条 ── */
body:not(.adm-mode) .qu-page .qu-keys { margin-top: 16px; padding: 20px 26px 12px; }
body:not(.adm-mode) .qu-page .qu-keys-head {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px;
}
body:not(.adm-mode) .qu-page .qu-keys-title { font-size: 15px; font-weight: 600; }
body:not(.adm-mode) .qu-page .qu-keys-sub { font-size: 12px; color: var(--qu-ink3); }
body:not(.adm-mode) .qu-page .qu-key-row {
  display: flex; align-items: center; gap: 18px; padding: 13px 12px; margin: 0 -12px;
  border-bottom: 1px solid var(--qu-hairline); border-radius: 14px;
}
body:not(.adm-mode) .qu-page .qu-key-row:last-child { border-bottom: 0; }
body:not(.adm-mode) .qu-page .qu-key-main { flex: 1; min-width: 0; }
body:not(.adm-mode) .qu-page .qu-key-name { font-size: 13.5px; font-weight: 600; }
body:not(.adm-mode) .qu-page .qu-key-sub { font-size: 12px; color: var(--qu-ink3); margin-top: 2px; }
body:not(.adm-mode) .qu-page .qu-key-bar {
  width: 120px; height: 5px; border-radius: 999px; background: var(--qu-track);
  flex-shrink: 0; position: relative; overflow: hidden;
}
body:not(.adm-mode) .qu-page .qu-key-bar i {
  position: absolute; inset: 0; background: var(--qu-ok);
  transform-origin: left; transform: scaleX(var(--r, 0)); border-radius: inherit;
}
body:not(.adm-mode) .qu-page .qu-key-pct { font-size: 20px; font-weight: 600; min-width: 58px; text-align: right; flex-shrink: 0; }
body:not(.adm-mode) .qu-page .qu-key-sign { font-size: 12px; color: var(--qu-ink3); font-weight: 400; margin-left: 1px; }
body:not(.adm-mode) .qu-page .qu-key-empty { font-size: 13px; color: var(--qu-ink3); padding: 10px 0; }
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .qu-page .qu-key-row:hover { background: var(--qu-glass-strong); }
}
@media (max-width: 720px) {
  body:not(.adm-mode) .qu-page .qu-key-bar { display: none; }
}

/* ── 额度说明(收起) ── */
body:not(.adm-mode) .qu-page .qu-notes { margin-top: 16px; padding: 16px 26px; }
body:not(.adm-mode) .qu-page .qu-notes summary {
  color: var(--qu-ink3); font-size: 13px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 6px;
}
body:not(.adm-mode) .qu-page .qu-notes summary::-webkit-details-marker { display: none; }
body:not(.adm-mode) .qu-page .qu-notes summary svg { width: 13px; height: 13px; transition: transform 200ms var(--qu-ease); }
body:not(.adm-mode) .qu-page .qu-notes[open] summary svg { transform: rotate(90deg); }
body:not(.adm-mode) .qu-page .qu-notes ul {
  margin: 12px 0 2px; padding: 0 0 0 2px; list-style: none;
  color: var(--qu-ink3); font-size: 12.5px; line-height: 2;
}
body:not(.adm-mode) .qu-page .qu-notes li::before { content: "·"; margin-right: 8px; }

/* ── 手机端主表内边距 ── */
@media (max-width: 720px) {
  body:not(.adm-mode) .qu-page .qu-hero { padding: 22px 20px 20px; }
  body:not(.adm-mode) .qu-page .qu-keys { padding: 18px 18px 10px; }
  body:not(.adm-mode) .qu-page .qu-notes { padding: 14px 18px; }
}