/* ============================================================================
   MaxMind 控制台 · 用户端主题层（dm.css?v=4）—— Google AI Studio 风
   ----------------------------------------------------------------------------
   设计方向（站长 2026-10-04 定，参照 Google AI Studio 控制台的 Material 3 视觉）：
     · 浅色：纯白画布 + 浅蓝灰侧栏 #F8FAFD + 浅蓝灰输入区 #F0F4F9
     · 蓝色主强调 #0B57D0（Material 3 primary），浅蓝容器 #D3E3FD 做次级填充
     · 文字阶梯 #1F1F1F / #444746 / #747775（M3 on-surface 三阶灰）
     · 描边 rgba(31,31,31,0.14)，层级靠 1px 描边 + 极轻投影，无渐变
     · 按钮 = M3 药丸形（全圆角），主按钮蓝底白字、次级白底描边
     · 暗色：AI Studio 深色面板 #131314 / #1E1F20，主按钮 #A8C7FA 深蓝字

   ⚠️ 隔离机制（照抄 mm.css 的既有设计，勿破坏）：
     本文件所有规则都写在 body:not(.adm-mode) 上——后台 .adm-mode 挂上后
     本层全部失效，回落 admin.css 原值 → 后台零影响。
     不碰任何 .adm-* 类名；不碰 --u-* / --cx-* 家族。

   加载顺序：排在 mm.css / mobile.css 之后（最后加载，同名令牌后者胜）。
   动效纪律：本层不新增动画；过渡只动 color/background/transform/border-color，
   ≤160ms ease-out；hover 包 (hover:hover) and (pointer:fine)；
   带 prefers-reduced-motion 降级。
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════════
   0. GS 正文字体（站长 2026-10-04 提供 ttf，文件名白标化）——用户端全站启用
      单一字重文件 → 声明 100-900 全区间，粗体由浏览器合成（无单独字重文件）
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "GS Sans";
  src: url("/fonts/gssans-regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. 浅色令牌（默认主题）—— Google AI Studio Material 3 色板
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] body:not(.adm-mode) {
  --bg-body: #ffffff;
  --bg-body-rgb: 255, 255, 255;
  --bg-sidebar: #f8fafd;
  --bg-card: #ffffff;
  --bg-input: #f0f4f9;
  --bg-hover: #e9eef6;
  --bg-user-msg: #f0f4f9;
  --bg-ai-msg: #ffffff;
  --border: rgba(31, 31, 31, 0.14);
  --text-primary: #1f1f1f;
  --text-secondary: #444746;
  --text-muted: #747775;
  --accent: #0b57d0;               /* M3 primary：蓝底白字主按钮 */
  --on-accent: #ffffff;
  --accent-soft: #d3e3fd;          /* M3 次级容器：浅蓝填充 */
  --accent-glow: rgba(11, 87, 208, 0.16);
  --danger: #b3261e;
  --success: #188038;
  --warning: #995400;
  --shadow-sm: 0 1px 2px rgba(31, 31, 31, 0.05);
  --shadow-md: 0 4px 14px -6px rgba(31, 31, 31, 0.10);
  --shadow-lg: 0 12px 36px -12px rgba(31, 31, 31, 0.16);

  /* M3 圆角：控件 8 / 卡 12 / 大面板 20，按钮药丸见组件段 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. 暗色主题 —— AI Studio 深色面板（#131314 画布 / #1E1F20 侧栏与卡）
   ═══════════════════════════════════════════════════════════════════════════ */

body:not(.adm-mode) {
  --bg-body: #131314;
  --bg-body-rgb: 19, 19, 20;
  --bg-sidebar: #1e1f20;
  --bg-card: #1e1f20;
  --bg-input: #282a2c;
  --bg-hover: #2d2f31;
  --bg-user-msg: #282a2c;
  --bg-ai-msg: #1e1f20;
  --border: rgba(227, 227, 227, 0.14);
  --text-primary: #e3e3e3;
  --text-secondary: #c4c7c5;
  --text-muted: #8e9194;
  --accent: #a8c7fa;               /* M3 dark primary：浅蓝底深蓝字 */
  --on-accent: #062e6f;
  --accent-soft: rgba(168, 199, 250, 0.14);
  --accent-glow: rgba(168, 199, 250, 0.20);
  --danger: #f2b8b5;
  --success: #6dd58c;
  --warning: #fdd663;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 10px 32px -10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 72px -18px rgba(0, 0, 0, 0.66);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* 字体栈：GS Sans（西文/数字，站长提供的 ttf）→ Noto Sans SC → 系统中文。
     浅色分支同栈，用重复声明避免影响 mm.css 的浅色块结构。 */
  font-family: "GS Sans", "Noto Sans SC", "PingFang SC", -apple-system,
    BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

[data-theme="light"] body:not(.adm-mode) {
  font-family: "GS Sans", "Noto Sans SC", "PingFang SC", -apple-system,
    BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. 组件对齐（只动视觉属性，不动布局；后台不生效）
   ═══════════════════════════════════════════════════════════════════════════ */

/* 装饰性光晕：AI Studio 风不要渐变光斑 */
[data-theme="light"] body:not(.adm-mode) .bg-glow {
  opacity: 0;
}

/* 主按钮：M3 filled —— 药丸形，蓝底白字（暗色浅蓝底深蓝字），按下轻缩 */
body:not(.adm-mode) .btn-primary {
  background-color: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 999px;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 140ms ease, box-shadow 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .btn-primary:hover {
    background-color: var(--accent);
    box-shadow: 0 1px 3px rgba(11, 87, 208, 0.30);
    filter: brightness(1.08);
  }

  [data-theme="dark"] body:not(.adm-mode) .btn-primary:hover {
    box-shadow: none;
  }
}

body:not(.adm-mode) .btn-primary:active {
  transform: scale(0.97);
}

/* 次级按钮：M3 outlined —— 药丸形，白底 + 描边，hover 加深描边并染浅蓝 */
[data-theme="light"] body:not(.adm-mode) .btn-ghost {
  background-color: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background-color 140ms ease, border-color 140ms ease,
    transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="light"] body:not(.adm-mode) .btn-ghost:hover {
    background-color: #f0f4f9;
    border-color: rgba(31, 31, 31, 0.28);
  }
}

[data-theme="light"] body:not(.adm-mode) .btn-ghost:active {
  transform: scale(0.97);
}

/* 输入框聚焦：M3 用主色描边（浅色蓝 / 暗色浅蓝） */
[data-theme="light"] body:not(.adm-mode) .input-wrapper:focus-within {
  border-color: #0b57d0;
  box-shadow: inset 0 0 0 1px #0b57d0;
}

body:not(.adm-mode) .input-wrapper:focus-within {
  border-color: #a8c7fa;
  box-shadow: inset 0 0 0 1px #a8c7fa;
}

/* 滚动条：M3 中性灰 */
[data-theme="light"] body:not(.adm-mode) ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="light"] body:not(.adm-mode) ::-webkit-scrollbar-thumb {
  background-color: rgba(31, 31, 31, 0.20);
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.adm-mode) .btn-primary,
  body:not(.adm-mode) .btn-ghost {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. v4 追加（第五十五轮 · AI Studio 高亮描边按钮 + 侧栏选中高亮）
      选择器镜像 mm.css 的上下文（.u-page/.up-page/.mm-page/.modal/.modal-overlay）
      并加 body:not(.adm-mode) 前缀 → 恒压 mm.css 一头，且后台隔离不破。
   ═══════════════════════════════════════════════════════════════════════════ */

/* M3 outlined：非主非危按钮 = 蓝字 + 蓝描边药丸（克制：描边 45% 透明度） */
body:not(.adm-mode) .u-page .btn:not(.btn-primary):not(.btn-danger),
body:not(.adm-mode) .up-page .btn:not(.btn-primary):not(.btn-danger),
body:not(.adm-mode) .mm-page .btn:not(.btn-primary):not(.btn-danger),
body:not(.adm-mode) .modal .btn:not(.btn-primary):not(.btn-danger),
body:not(.adm-mode) .modal-overlay .btn:not(.btn-primary):not(.btn-danger) {
  background-color: transparent;
  color: #0b57d0;
  border: 1px solid rgba(11, 87, 208, 0.45);
  border-radius: 999px;
  font-weight: 500;
  transition: background-color 140ms ease, border-color 140ms ease,
    transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .u-page .btn:not(.btn-primary):not(.btn-danger):hover,
  body:not(.adm-mode) .up-page .btn:not(.btn-primary):not(.btn-danger):hover,
  body:not(.adm-mode) .mm-page .btn:not(.btn-primary):not(.btn-danger):hover,
  body:not(.adm-mode) .modal .btn:not(.btn-primary):not(.btn-danger):hover,
  body:not(.adm-mode) .modal-overlay .btn:not(.btn-primary):not(.btn-danger):hover {
    background-color: rgba(11, 87, 208, 0.06);
    border-color: rgba(11, 87, 208, 0.70);
  }
}

body:not(.adm-mode) .u-page .btn:not(.btn-primary):not(.btn-danger):active,
body:not(.adm-mode) .up-page .btn:not(.btn-primary):not(.btn-danger):active,
body:not(.adm-mode) .mm-page .btn:not(.btn-primary):not(.btn-danger):active,
body:not(.adm-mode) .modal .btn:not(.btn-primary):not(.btn-danger):active,
body:not(.adm-mode) .modal-overlay .btn:not(.btn-primary):not(.btn-danger):active {
  transform: scale(0.97);
}

/* 暗色：浅蓝字 + 浅蓝描边 */
[data-theme="dark"] body:not(.adm-mode) .u-page .btn:not(.btn-primary):not(.btn-danger),
[data-theme="dark"] body:not(.adm-mode) .up-page .btn:not(.btn-primary):not(.btn-danger),
[data-theme="dark"] body:not(.adm-mode) .mm-page .btn:not(.btn-primary):not(.btn-danger),
[data-theme="dark"] body:not(.adm-mode) .modal .btn:not(.btn-primary):not(.btn-danger),
[data-theme="dark"] body:not(.adm-mode) .modal-overlay .btn:not(.btn-primary):not(.btn-danger) {
  color: #a8c7fa;
  border-color: rgba(168, 199, 250, 0.50);
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] body:not(.adm-mode) .u-page .btn:not(.btn-primary):not(.btn-danger):hover,
  [data-theme="dark"] body:not(.adm-mode) .up-page .btn:not(.btn-primary):not(.btn-danger):hover,
  [data-theme="dark"] body:not(.adm-mode) .mm-page .btn:not(.btn-primary):not(.btn-danger):hover,
  [data-theme="dark"] body:not(.adm-mode) .modal .btn:not(.btn-primary):not(.btn-danger):hover,
  [data-theme="dark"] body:not(.adm-mode) .modal-overlay .btn:not(.btn-primary):not(.btn-danger):hover {
    background-color: rgba(168, 199, 250, 0.10);
    border-color: rgba(168, 199, 250, 0.75);
  }
}

/* 侧栏 / 会话列表选中项：AI Studio 同款浅蓝填充高亮（tint，不透明） */
[data-theme="light"] body:not(.adm-mode) .sidebar-item.is-active,
[data-theme="light"] body:not(.adm-mode) .sidebar-item.active {
  background-color: #d3e3fd;
  color: #0b57d0;
  font-weight: 500;
}

[data-theme="dark"] body:not(.adm-mode) .sidebar-item.is-active,
[data-theme="dark"] body:not(.adm-mode) .sidebar-item.active {
  background-color: rgba(168, 199, 250, 0.16);
  color: #a8c7fa;
  font-weight: 500;
}

/* 主导航选中（左侧功能栏）：同样的浅蓝 tint，图标文字一起染蓝 */
[data-theme="light"] body:not(.adm-mode) .nav-item.is-active,
[data-theme="light"] body:not(.adm-mode) .nav-item.active {
  background-color: #d3e3fd;
  color: #0b57d0;
  font-weight: 500;
}

[data-theme="dark"] body:not(.adm-mode) .nav-item.is-active,
[data-theme="dark"] body:not(.adm-mode) .nav-item.active {
  background-color: rgba(168, 199, 250, 0.16);
  color: #a8c7fa;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.adm-mode) .u-page .btn,
  body:not(.adm-mode) .up-page .btn,
  body:not(.adm-mode) .mm-page .btn,
  body:not(.adm-mode) .modal .btn,
  body:not(.adm-mode) .modal-overlay .btn {
    transition: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   60 轮（2026-10-06）：API Key 页去容器 + 用量页全宽（站长指示）
   ─────────────────────────────────────────────────────────────────────────
   站长原话：「API key 页面有些有圆角有些没有，容器全删掉；用量页覆盖全屏，
   桌面端宽度那么大不要小气地搞那么小；实时检测/适配都写好。」

   病因一（API 页方角盒子）：mm.css:616 本来就把 API 页 u-card 去卡化
   （transparent / 无圆角），但 mm.css:1159 在 @media (prefers-reduced-transparency:
   reduce)（Windows 关透明效果时命中）里给 .u-page .u-card 回填了
   background: var(--bg-card) 却没带圆角 → 整页出现无圆角的实底方块，
   与 code-box 的圆角同屏混杂。修法：同媒体查询里再声明一次 transparent
   （本文件排在 mm.css 之后，后来者胜）。
   病因二（用量页窄列）：mm.css:333 把 .u-page 写死 max-width:660px 居中，
   桌面宽屏两侧全空。修法：本层放开到 none；三根限额横条在 ≥1100px
   改成三列各带 Google surface 的圆角卡，宽屏不再是一条拉伸的扁长条。
   隔离照旧：全部锁在 body:not(.adm-mode)，不碰 .adm-* 与后台。
   动效：本层零新增动画；hover 只动 background-color，≤160ms ease-out，
   包 (hover:hover) and (pointer:fine)。
   ============================================================================ */

/* ── 1. API Key 页：u-card 一律裸排（任何主题 / 任何系统透明度设置） ─────── */
body:not(.adm-mode) .u-page .u-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce) {
  body:not(.adm-mode) .u-page .u-card {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* 模型状态行的 hover：原先是贴边的方形淡底（styles.css），与钥匙行的
   圆角胶囊 hover 不同框。改成同样的圆角胶囊：内边距补进左右 12px、
   外边距拉回 -12px，底色圆了但文字位置一像素不动。 */
body:not(.adm-mode) .model-status-row {
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
  border-radius: 12px;
}
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .model-status-row:hover { background: var(--accent-soft, var(--u-border-soft)); }
}

/* ── 2. 用户端页面列放开全宽（API Key + 用量两页共用 .u-page） ───────────── */
body:not(.adm-mode) .u-page { max-width: none; }

/* 「我的重置卡」容器对齐第 63 轮新版用量页（.qu-page：840px 居中 + 28px 留白）：
   user-extras.js 运行时注入的 .uxe-reset-wrap 规则（类特异性）压不过这里的选择器（id）。
   ≤720px 同步收到 18px 留白。 */
body:not(.adm-mode) #uxe-reset-wrap {
  max-width: 896px;          /* 840 + 28×2：与 .qu-page 内容区外沿对齐 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
  box-sizing: border-box;
}
@media (max-width: 720px) {
  body:not(.adm-mode) #uxe-reset-wrap { padding-left: 18px; padding-right: 18px; }
}

/* ── 60 轮补（同日，站长再反馈「还是只占中间一坨」）─────────────────────────
   真凶是 #content-inner 自己的 max-width: var(--content-max-width)（900px，
   styles.css:288）——上一轮放开的 .u-page 只是它的子元素，壳没放开等于没放。
   对话页安全：消息列有自己的 760px/720px 内限（chat.css .cx-page / 气泡），
   输入框用的是 --content-max-width 变量本身，这里不动变量、只放开壳。
   ── 3 的三列拆分已按站长口径撤销：5 小时 / 24 小时 / 7 天各占一整排。 */
body:not(.adm-mode) .cx-scroll > .content-inner { max-width: none; }



/* ═══════════════════════════════════════════════════════════════════════════
   61 轮（2026-10-07）：浅色真白画布 + 全站 Google 字体（站长指示）
   ─────────────────────────────────────────────────────────────────────────
   站长原话：「一调成白色全都显示出来了，它就不是白色了，还是有一个东西
   被框住了」「全部使用谷歌的字体，服务器上不是已经有了吗」。

   病因一（白不了）：用量页 usage-google.css 给 .uz-page 整块铺
   --g-bg: #f8fafd（淡蓝灰），页面全宽之后整屏是一块非白色的「框」。
   修法：浅色主题下把 --g-bg 提到纯白；深色不动（#131314 是 AI Studio 深色）。
   病因二（字体不全是 Google）：GS Sans 只挂在 body 上，凡是【自己声明
   字体栈】的元素就绕过去了——
     · admin.css :root 的 --adm-font（'Inter' 优先）被 chat 输入区等引用；
     · --adm-mono 与 .mono / code / .code-box 等是系统等宽（ui-monospace）。
   修法：用户端接管这两个变量；等宽一律 Roboto Mono（Google，自托管，
   字体文件从官网目录补进 public/fonts/roboto-mono/）；中文继续落
   Noto Sans SC（noto-sans-sc.css 已挂载，404 切片按需下载）。
   ============================================================================ */

/* ── 1. 浅色用量页画布：#f8fafd → 纯白 ──────────────────────────────────── */
[data-theme="light"] body:not(.adm-mode) .uz-page { --g-bg: #ffffff; }

/* ── 2. 字体变量接管（只影响用户端；后台 .adm-mode 仍用 admin.css 原值）── */
body:not(.adm-mode) {
  --adm-font: "GS Sans", "Noto Sans SC", "PingFang SC", -apple-system,
    BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --adm-mono: "Roboto Mono", "Noto Sans SC", ui-monospace, SFMono-Regular,
    "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ── 3. Roboto Mono 自托管（Google 字体，OFL 许可）───────────────────────── */
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/fonts/roboto-mono/roboto-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/fonts/roboto-mono/roboto-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 4. 等宽兜底：自己声明了系统等宽栈的元素统一拉回 Roboto Mono ────────── */
body:not(.adm-mode) .mono,
body:not(.adm-mode) code,
body:not(.adm-mode) pre,
body:not(.adm-mode) kbd,
body:not(.adm-mode) .code-box,
body:not(.adm-mode) .uxe-input {
  font-family: "Roboto Mono", "Noto Sans SC", ui-monospace, SFMono-Regular,
    "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}