/* ─────────────────────────────────────────────
   Multigate · 设计令牌

   主题口径：极简黑白。全站只有「黑 / 白 / 灰」三档中性色，
   语义色只保留极低饱和度的一点点色相，用来区分状态而不抢主视觉。
   品牌色（--primary）在浅色下是近黑、深色下是近白 —— 按钮、选中态、
   焦点环都跟着它翻转，因此不要在任何地方写死 #fff / #000 作为主色前景，
   一律用 --primary-on。

   全站统一使用 oklch 色板，浅色 / 深色两套变量都在这里定义。
   组件与页面只引用变量，不再各自写死颜色。
   ───────────────────────────────────────────── */

:root {
  color-scheme: light;

  --font-sans: "Segoe UI", "Microsoft YaHei", "Microsoft YaHei UI", system-ui, sans-serif;
  --font-mono: Consolas, "Cascadia Mono", "Courier New", monospace;

  /* 导航、工作区、内容表面分别配色；表格不再单独压暗。 */
  /* --bg 是工作区画布（body）：比内容卡片浅一档，卡片靠描边与投影浮在上面 */
  --bg: oklch(0.972 0 0);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0 0);
  --surface-3: oklch(0.935 0 0);
  /* 浮层（下拉、菜单、提示气泡）：坐在控件之上，取承载面同色 + 大投影 */
  --surface-raised: oklch(1 0 0);
  /* 内嵌凹槽：卡片里那些「凹下去」的小块（表单块、切换卡、代码块、明细面板）。
     它是卡内的一小块，不是整块内容表面，所以仍比卡片深一档。 */
  --surface-inset: oklch(0.952 0 0);
  /* 列表区底：与所在卡片同色（表格不再自成一层暗底）。
     行与行靠 1px 分隔线区分，不再靠明度反差。 */
  --table-bg: var(--surface);
  /* 表头必须不透明（行要从它下面滚过），但只与表体同色 ——
     它与表体的分界交给底部那条 1px 描边，不另起一条色带。 */
  --table-head-bg: var(--surface);
  /* 行悬浮：比表面深（浅色）/ 亮（深色）一档的薄底，同一表达式两套主题都成立 */
  --row-hover: var(--surface-2);
  --border: oklch(0 0 0 / 9%);
  --border-strong: oklch(0 0 0 / 18%);
  --hairline: oklch(0 0 0 / 7%);

  /* 控件填充与描边：与承载面分开，于是表面提亮后按钮、输入框依然立得住，
     不必再靠压暗整块内容来衬托它们。 */
  --control-bg: oklch(0.958 0 0);
  --control-hover: oklch(0.925 0 0);
  --control-border: oklch(0 0 0 / 13%);
  --control-border-hover: oklch(0 0 0 / 24%);

  /* 侧栏：全站唯一「退后一层」的大面积底色，深浅两套都取中性灰。 */
  --sidebar-bg: oklch(0.958 0 0);
  /* 「模型管理」页左栏（.prov-rail）：比侧栏浅一档 —— 它是面板内的一段
     内嵌导航，不是侧栏的延伸（与侧栏同色会被读成同一块区域）。 */
  --rail-bg: oklch(0.985 0 0);
  --sidebar-border: oklch(0 0 0 / 11%);
  --sidebar-fg: oklch(0.32 0 0);
  --sidebar-muted: oklch(0.5 0 0);
  --nav-hover: oklch(0 0 0 / 5%);
  --nav-selected-bg: oklch(0.9 0 0);
  --nav-selected-border: oklch(0 0 0 / 12%);
  --nav-selected-fg: oklch(0.13 0 0);
  --nav-count-bg: oklch(0.84 0 0);

  /* 文本三档 */
  --text: oklch(0.14 0 0);
  --text-2: oklch(0.38 0 0);
  --text-3: oklch(0.5 0 0);

  /* 品牌：浅色主题 = 近黑，深色主题 = 近白。 */
  --primary: oklch(0.18 0 0);
  --primary-hover: oklch(0.29 0 0);
  --primary-soft: color-mix(in srgb, var(--primary) 8%, white);
  --primary-bd: color-mix(in srgb, var(--primary) 22%, white);
  --primary-fg: oklch(0.2 0 0);
  /* 主色实底上的前景：与 --primary 相反的一档。所有「主色底 + 文字」
     都必须用它，不能写死白色（深色主题下主色是近白）。 */
  --primary-on: oklch(1 0 0);

  /* 语义色：保留极低饱和度，只做状态区分，不与黑白主视觉抢戏 */
  --ok: oklch(0.5 0.08 160);
  --ok-soft: color-mix(in srgb, var(--ok) 9%, white);
  --ok-bd: color-mix(in srgb, var(--ok) 26%, white);
  --warn: oklch(0.6 0.09 75);
  --warn-soft: color-mix(in srgb, var(--warn) 9%, white);
  --warn-bd: color-mix(in srgb, var(--warn) 26%, white);
  --danger: oklch(0.55 0.18 25);
  --danger-soft: color-mix(in srgb, var(--danger) 9%, white);
  --danger-bd: color-mix(in srgb, var(--danger) 26%, white);
  --info: oklch(0.48 0.06 250);
  --info-soft: color-mix(in srgb, var(--info) 9%, white);
  --info-bd: color-mix(in srgb, var(--info) 26%, white);

  /* 版本标签：黑白主题下退成中性灰，用明度区分国内 / 国际版 */
  --cn: oklch(0.3 0 0);
  --cn-soft: color-mix(in srgb, var(--cn) 9%, white);
  --cn-bd: color-mix(in srgb, var(--cn) 24%, white);
  --intl: oklch(0.52 0 0);
  --intl-soft: color-mix(in srgb, var(--intl) 9%, white);
  --intl-bd: color-mix(in srgb, var(--intl) 24%, white);

  /* 兼容旧页面里的短名（免费模型聚合等岛用 --line / --bg-1 / --bg-2 / --bad） */
  --line: var(--border);
  --bg-1: var(--surface);
  --bg-2: var(--surface-2);
  --bad: var(--danger);

  /* 形状：所有圆角都由 --radius 派生，改一个值即可整体缩放。
     黑白极简风取更克制的 8px 基准，比原先的 16px 更利落。 */
  --radius: 0.5rem;
  --r-xs: calc(var(--radius) * 0.5);
  --r-sm: calc(var(--radius) * 0.6);
  --r-md: calc(var(--radius) * 0.8);
  --r-lg: var(--radius);
  --r-xl: calc(var(--radius) * 1.4);
  --r-pill: 999px;

  /* 阴影：极简主题下只保留很轻的一层，靠描边而不是投影分层 */
  --shadow-1: 0 1px 2px oklch(0 0 0 / 5%);
  --shadow-2: 0 1px 2px oklch(0 0 0 / 5%), 0 8px 20px -14px oklch(0 0 0 / 18%);
  --shadow-3: 0 2px 6px oklch(0 0 0 / 6%), 0 20px 44px -22px oklch(0 0 0 / 22%);
  --glow: 0 1px 2px oklch(0 0 0 / 6%), 0 8px 18px -14px oklch(0 0 0 / 30%);
  --ring: 0 0 0 3px oklch(0 0 0 / 12%);

  /* 尺寸 */
  --sidebar-w: 224px;
  --topbar-h: 52px;
  /* 自定义标题栏高度（桌面端）：主窗口去掉了系统装饰（src-tauri 建窗处
     decorations(false)），界面自绘 32px 标题条补上三键与拖动区（titlebar.js）。
     网页端不创建标题栏，该变量只在 body.has-titlebar 的规则里被引用。 */
  --titlebar-h: 32px;
  --pad: 24px;
  /* 内容区最大宽度（不含侧边栏）。用 vw 而不是 %：
     % 相对的是「已排除侧边栏和内边距」的可用宽度，那样任何窗口下都会被限制成 80%，
     内容永远占不满；vw 相对整个窗口，于是窗口 ≤1280px 时内容占满、
     更宽时才收在这个值上并居中。
     值不要往 90vw 以上调：侧边栏吃掉约 13% 的窗口宽度后，92vw 在 3200px 以下
     永远碰不到，限宽等于失效 —— 宽屏上各页直接铺到窗口边，版心就没了。80vw 才是
     「各页都收在版心里、左右都有留白」的那个口径。
     这个变量只描述内容区的限宽，全站所有页面一律用它，不存在按页面的覆盖
     （账号页曾自带一条 max-width: 1400px，已删：它比那张表自身的下限还窄，
     只换来「横滚条常驻 + 比别的页窄一截」，见 page-accounts.css）。 */
  --content-max: 80vw;
  --sb-w: 11px;          /* 滚动条宽度：表头对齐要靠它补偿 */
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: oklch(0.09 0 0);
  --surface: oklch(0.16 0 0);
  --surface-2: oklch(0.21 0 0);
  --surface-3: oklch(0.25 0 0);
  --surface-raised: oklch(0.22 0 0);
  --surface-inset: oklch(0.13 0 0);
  --table-bg: var(--surface);
  --table-head-bg: var(--surface);
  --row-hover: var(--surface-2);
  --border: oklch(1 0 0 / 10%);
  --border-strong: oklch(1 0 0 / 20%);
  --hairline: oklch(1 0 0 / 8%);

  --control-bg: oklch(0.22 0 0);
  --control-hover: oklch(0.26 0 0);
  --control-border: oklch(1 0 0 / 14%);
  --control-border-hover: oklch(1 0 0 / 26%);

  --sidebar-bg: oklch(0.13 0 0);
  --rail-bg: oklch(0.17 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-fg: oklch(0.82 0 0);
  --sidebar-muted: oklch(0.62 0 0);
  --nav-hover: oklch(1 0 0 / 6%);
  --nav-selected-bg: oklch(1 0 0 / 10%);
  --nav-selected-border: oklch(1 0 0 / 18%);
  --nav-selected-fg: oklch(0.98 0 0);
  --nav-count-bg: oklch(1 0 0 / 14%);

  --text: oklch(0.96 0 0);
  --text-2: oklch(0.82 0 0);
  --text-3: oklch(0.66 0 0);

  /* 深色主题下品牌色翻转成近白：按钮、选中态、焦点环随之反相。 */
  --primary: oklch(0.93 0 0);
  --primary-hover: oklch(0.85 0 0);
  --primary-soft: oklch(1 0 0 / 12%);
  --primary-bd: oklch(1 0 0 / 28%);
  --primary-fg: oklch(0.92 0 0);
  --primary-on: oklch(0.13 0 0);

  --ok: oklch(0.72 0.07 160);
  --ok-soft: oklch(0.72 0.07 160 / 14%);
  --ok-bd: oklch(0.72 0.07 160 / 30%);
  --warn: oklch(0.78 0.08 75);
  --warn-soft: oklch(0.78 0.08 75 / 14%);
  --warn-bd: oklch(0.78 0.08 75 / 30%);
  --danger: oklch(0.68 0.14 25);
  --danger-soft: oklch(0.68 0.14 25 / 14%);
  --danger-bd: oklch(0.68 0.14 25 / 30%);
  --info: oklch(0.72 0.05 250);
  --info-soft: oklch(0.72 0.05 250 / 14%);
  --info-bd: oklch(0.72 0.05 250 / 30%);

  --cn: oklch(0.85 0 0);
  --cn-soft: oklch(0.85 0 0 / 14%);
  --cn-bd: oklch(0.85 0 0 / 30%);
  --intl: oklch(0.7 0 0);
  --intl-soft: oklch(0.7 0 0 / 14%);
  --intl-bd: oklch(0.7 0 0 / 30%);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 40%);
  --shadow-2: 0 1px 2px oklch(0 0 0 / 40%), 0 10px 24px -18px oklch(0 0 0 / 80%);
  --shadow-3: 0 2px 8px oklch(0 0 0 / 45%), 0 24px 54px -24px oklch(0 0 0 / 85%);
  --glow: 0 1px 2px oklch(0 0 0 / 40%), 0 8px 18px -14px oklch(0 0 0 / 70%);
  --ring: 0 0 0 3px oklch(1 0 0 / 22%);
}

/* system 模式跟随系统深浅 */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;

    --bg: oklch(0.09 0 0);
    --surface: oklch(0.16 0 0);
    --surface-2: oklch(0.21 0 0);
    --surface-3: oklch(0.25 0 0);
    --surface-raised: oklch(0.22 0 0);
    --surface-inset: oklch(0.13 0 0);
    --table-bg: var(--surface);
    --table-head-bg: var(--surface);
    --row-hover: var(--surface-2);
    --border: oklch(1 0 0 / 10%);
    --border-strong: oklch(1 0 0 / 20%);
    --hairline: oklch(1 0 0 / 8%);

    --control-bg: oklch(0.22 0 0);
    --control-hover: oklch(0.26 0 0);
    --control-border: oklch(1 0 0 / 14%);
    --control-border-hover: oklch(1 0 0 / 26%);

    --sidebar-bg: oklch(0.13 0 0);
    --rail-bg: oklch(0.17 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-fg: oklch(0.82 0 0);
    --sidebar-muted: oklch(0.62 0 0);
    --nav-hover: oklch(1 0 0 / 6%);
    --nav-selected-bg: oklch(1 0 0 / 10%);
    --nav-selected-border: oklch(1 0 0 / 18%);
    --nav-selected-fg: oklch(0.98 0 0);
    --nav-count-bg: oklch(1 0 0 / 14%);

    --text: oklch(0.96 0 0);
    --text-2: oklch(0.82 0 0);
    --text-3: oklch(0.66 0 0);

    --primary: oklch(0.93 0 0);
    --primary-hover: oklch(0.85 0 0);
    --primary-soft: oklch(1 0 0 / 12%);
    --primary-bd: oklch(1 0 0 / 28%);
    --primary-fg: oklch(0.92 0 0);
    --primary-on: oklch(0.13 0 0);

    --ok: oklch(0.72 0.07 160);
    --ok-soft: oklch(0.72 0.07 160 / 14%);
    --ok-bd: oklch(0.72 0.07 160 / 30%);
    --warn: oklch(0.78 0.08 75);
    --warn-soft: oklch(0.78 0.08 75 / 14%);
    --warn-bd: oklch(0.78 0.08 75 / 30%);
    --danger: oklch(0.68 0.14 25);
    --danger-soft: oklch(0.68 0.14 25 / 14%);
    --danger-bd: oklch(0.68 0.14 25 / 30%);
    --info: oklch(0.72 0.05 250);
    --info-soft: oklch(0.72 0.05 250 / 14%);
    --info-bd: oklch(0.72 0.05 250 / 30%);

    --cn: oklch(0.85 0 0);
    --cn-soft: oklch(0.85 0 0 / 14%);
    --cn-bd: oklch(0.85 0 0 / 30%);
    --intl: oklch(0.7 0 0);
    --intl-soft: oklch(0.7 0 0 / 14%);
    --intl-bd: oklch(0.7 0 0 / 30%);

    --shadow-1: 0 1px 2px oklch(0 0 0 / 40%);
    --shadow-2: 0 1px 2px oklch(0 0 0 / 40%), 0 10px 24px -18px oklch(0 0 0 / 80%);
    --shadow-3: 0 2px 8px oklch(0 0 0 / 45%), 0 24px 54px -24px oklch(0 0 0 / 85%);
    --glow: 0 1px 2px oklch(0 0 0 / 40%), 0 8px 18px -14px oklch(0 0 0 / 70%);
    --ring: 0 0 0 3px oklch(1 0 0 / 22%);
  }
}

/* ─── 基础重置 ─── */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-width: 720px;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* 720px 是桌面 Tauri 窗口的最小宽度下限（窗口不允许再拖窄）。手机上照抄会
   把整个文档撑到 720px 宽：375px 的视口里只露出中间 375px 的一段，左右两边
   各被裁掉 172px —— 用户看到的「页面看不全」就是这一条造成的，而且它发生在
   任何媒体查询之外，光靠 @media (max-width:767px) 覆盖不掉级联。
   真机视口按浏览器给的实际宽度走，窗口最小宽度由 Tauri 自己管（Web 端没有
   窗口这个概念，body 不该替它设下限）。 */
@media (max-width: 767px) {
  body { min-width: 0; }
}

/* ─── 移动端：从「app-shell 固定视口」切成「正常文档流」───
   桌面端 body 不滚（height:100% + overflow:hidden），滚动发生在 .page.active 里；
   但这个结构在手机上会把用户困在容器里 —— 滚到底后惯性滚动被 .content 的
   overflow:hidden 截断，外面的页脚 / 顶栏永远滑不到。改成正常文档流后 body
   自己滚，所有页面内容按内容高度自然生长，用户想滑多远就滑多远。
   侧栏 / 顶栏 / 面板头保持原样（侧栏本来就是 position:fixed，不受影响）。 */
@media (max-width: 767px) {
  html, body { height: auto; overflow: visible; }
  body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

h1, h2, h3, h4, p { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd { font-family: var(--font-mono); font-size: .93em; }

/* hidden 属性必须压过组件自身 display，否则弹窗 / 进度块会默认露出来。
   注意：组件库产物（islands/ui.css）的工具类是分层 + !important 的，分层里的
   重要声明反压未分层的重要声明 —— 那里需要同层压制的规则写在组件库自己的
   globals.css（见 [data-slot='dialog-content'][hidden]）。 */
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

::selection { background: var(--primary-soft); color: var(--text); }

/* ─── 滚动条 ─── */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

::-webkit-scrollbar { width: var(--sb-w); height: var(--sb-w); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ─── 工具类 ─── */
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-3); }
.spacer { flex: 1 1 auto; }