/* ─────────────────────────────────────────────────────────────
 * 界面语言 · Token
 *
 * 唯一的调色方式：**语义名**。任何地方写死颜色都是违规
 * （判据：换一套色，应该只改这一个文件）。
 *
 * 两套主题共用**同一组语义名** —— 是"同一份 token 的两个值"，
 * 不是两套 token：
 *   theme-console  事务（亮）：管理台 —— 读与决定，长扫表格
 *   theme-canvas   内容（暗）：创作台 —— 看内容，暗底不抢画面
 *
 * 详见《界面语言 v1》。
 * ───────────────────────────────────────────────────────────── */

/* ── 复位：`hidden` 必须真的隐藏 ──────────────────────────────────────────
 *
 * 为什么需要这一条（2026-09-18 实测踩到）：
 *   HTML 的 `hidden` 属性靠**UA 样式表的 `display:none`** 生效，
 *   而元素**自己的 `display` 优先级更高** —— 于是
 *     <div hidden style="display:flex">   ⇒  **仍然显示**
 *   组织管理的两个弹窗（邀请 / API key）都这么写 ⇒ **每次加载都盖在整页上**，
 *   而且内容还是空的（它们的 JS 在 `hidden=false` 时才填）。
 *
 * 这是一条**正确的全局规则**：`hidden` 的意思就是隐藏，任何地方都不该例外。
 * 加在 tokens.css（三个台共享）⇒ 一次修好全部，并防住以后同样的写法。
 */
/* ── 复位：`box-sizing` ────────────────────────────────────────────────────
 *
 * 为什么需要这一条（2026-09-19 实测踩到）：
 *   三个台各自在自己的 `<style>` 里写了 `*{box-sizing:border-box}`（web 9 处、
 *   其余各 1 处），**而 tokens.css 里 0 处** —— 于是凡是"只加载 tokens.css"的
 *   页面就拿不到它。
 *
 *   唯一这样做的页面是 **identity 的 OIDC 登录页**（HTML 内联在
 *   identity/identity/src/routes.rs 的 login_form_html 里，只 `<link>` 了 tokens.css）。
 *   实测：`.ui-input` 写 `style="width:100%"`，容器 360px，
 *     360 + padding 16 + border 2 = **378px** ⇒ 比容器宽 18px
 *     ⇒ 输入框的右边缘比 label 和按钮**多出 18px，三者对不齐**。
 *   而创作台同一个 `.ui-input` 量到 326 = 326，完全对齐 —— 差别只在这一条。
 *
 * 这是**设计系统该有的复位**，不是某一个页面的补丁：
 *   `width:100%` 的含义就应该是"占满容器"，而不是"占满容器再溢出 padding 与边框"。
 * 放在 tokens.css（三个台 + 登录页共享）⇒ 一处修好全部，并防住以后同样的写法。
 */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
 * 外观（scheme）· 浅色 / 深色 —— 与「面」正交的第二个维度（2026-09-22）
 *
 * 此前"明暗"被绑死在「面」上（.theme-console 亮 / .theme-canvas 暗；09-19 又按
 * 所有者要求把三台与画布统一成一族全暗）⇒ 用户对这一层**没有选择**。
 * 但这是两个正交的维度，混在一起就表达不了"管理台也想用亮色"：
 *   面（surface）  = theme-canvas / theme-console —— 产品结构，用户不切
 *   外观（scheme） = light / dark —— **用户可切**，落在 <html data-scheme>
 *
 * 写法：两条规则，**每个值只写一次**：
 *   :root, :root[data-scheme="light"]                         ← 浅色（默认/兜底）
 *   :root[data-scheme="dark"], .theme-canvas, .theme-console   ← 深色（面的默认）
 * 深色那条写在后面 ⇒「有面 class、没 data-scheme」时按面的默认（深色），
 * **与改动前逐像素一致**；一旦 <html> 显式标了 data-scheme，
 * 它（特异性 0,2,0）就压过面 class（0,1,0），切换生效。
 *
 * 浅色不是新设计的一套配色：就是本文件原本为亮底写的那套暖白值
 * （#f7f6f3 暖白 / #22201d 暖黑 / #7d5f2c 深金）—— 被 09-19 的全暗覆盖埋掉了，
 * 这里把它请回来。**换外观 = 换这一层，不动任何一处组件样式。**
 * ══════════════════════════════════════════════════════════════════════ */
:root, :root[data-scheme="light"] {
  /* color-scheme：让原生控件（number 箭头/select 面板/滚动条…）跟随浅色。一处真相。 */
  color-scheme: light;

  /* ── 语义色（每义一色，不得混用）──────────────────────────────────
   * ★★ 2026-09-27 视觉语言收口：浅色主题从「暖纸 + 暖棕」**整体转为小云雀语言** ——
   *   冷中性浅底 + 白卡片 + **单一紫强调**；界面去饱和，**内容（封面/成片）才是彩色**。
   *   像素取证（小云雀首页，2938×1610）：
   *   · 界面里**唯一的彩色**是右上角一枚紫 #9d73ff（hue≈240）；
   *   · 青蓝/红粉/暖黄等高饱和像素**全部只出现在 y>1040 的底部封面缩略图** = 内容，非界面；
   *   · 页面底冷浅灰 #f2f2f4，顶部一抹极淡紫雾 #eae0fe。
   *   纪律（沿用 2026-09-19）：**只换色相、不改视觉重量** —— 底仍近白、正文仍近黑、
   *   各对比度档位（正文≥4.5 · 控件边界≥3 · 主按钮≥4.5）一律不变。 */
  --accent: #6d5ae6;        /* 品牌主行动 = 紫（与 --agent 统一：一屏只有一种强调色）*/
  --accent-ink: #ffffff;
  --danger: #b8322a;        /* 破坏性：移除/撤销/停用。不用于"取消" */
  --warn: #8f6512;          /* 需要注意：缺口/未定价/余额将尽 */
  --ok: #0f7a4e;            /* 已完成/通过：绿是**状态色**，不与品牌紫混用 */

  /* ── 中性（冷调排版与结构）──────────────────────────────── */
  --bg: #f5f5f7;            /* 页面底（冷浅灰；与原暖底同明度）*/
  --card: #ffffff;          /* 卡片/表面 */
  --ink: #1f2023;           /* 正文（冷近黑）*/
  --muted: #5f6368;         /* 次要：时间/归属/说明，≥4.5:1 */
  --line: #e4e5e9;          /* 装饰行线/容器描边 */
  --line-strong: #898d96;   /* 控件边界：输入框/按钮，≥3:1 */
  --chip: #eef0f3;          /* 状态标签底 */
  --chip-ink: #585d66;

  /* ── 状态色的淡底与描边（同一语义成对出现；冷调）────────────── */
  --warn-bg: #fbf3df;   --warn-line: #e8d6a0;
  --ok-bg: #e6f5ed;     --ok-line: #aedcc6;
  --danger-bg: #fcebea; --danger-line: #f0c1bc;
  /* 主色悬停淡底/线 = 紫（与 AI 表面统一，hover 不再出现暖雾）*/
  --accent-bg: #f1eefd;  --accent-line: #d9d2f8;

  /* ── AI 助手身份色 = 品牌紫（与 accent 统一）────────────────── */
  --agent: #6d5ae6;
  --agent-bright: #5b48d6;
  --agent-soft: #7a68ea;
  --agent-faint: #b9aef5;
  --agent-bg: #f1eefd;
  --agent-line: rgba(109, 90, 230, .28);

  /* ── 表面第三档 / 弱文字 / 卡内弱分隔线（冷）────────────────── */
  --panel3: #e7e8ec;                 /* 悬停/嵌套表面 */
  --dim: #8b8f96;                    /* 正文级以下弱文字 */
  --label: #5d6168;                  /* 微标签（10.5px），≥4.5:1 */
  --line-soft: rgba(0, 0, 0, .055);  /* 卡内弱分隔线 */

  /* ── 叠色三档：亮底靠"压暗"分层（黑叠，冷底通用）────────────── */
  --raise-1: rgba(0, 0, 0, .02);
  --raise-2: rgba(0, 0, 0, .04);
  --raise-3: rgba(0, 0, 0, .06);

  /* ── 遮罩：弹层压暗背后 ──────────────────────────────────── */
  --scrim: rgba(20, 20, 28, .45);

  /* ── 悬停"升起"（亮底靠阴影表达浮起）──────────────────────── */
  --shadow-lift: 0 6px 20px rgba(0, 0, 0, .13);
  --lift-surface: #ffffff;
  --lift-line: #d9dbdf;

  /* 表面边框悬停档（比 --line 深一档）*/
  --line-hover: #d2d4d9;

  /* 「运行中 / info」冷蓝 */
  --blue: #2f7fb0;
}

/* ── 常量：与明暗无关（排版 / 间距 / 圆角 / 动效）────────────────
 * 这一层放这儿：它们不随 scheme 变，也不随面变。 */
:root {
  /* ── 排版 ──────────────────────────────────────────── */
  /* ⚠️ **中文字形必须显式列全平台**（Lark Design 是唯一把中文当第一公民的那家）。
     此前只有苹方(macOS) + 微软雅黑(Windows) ⇒ **Linux/Android 会落到 system-ui，
     而那里可能没有中文字形** ⇒ 整片界面变成方框。加上 Noto Sans SC（Android/多数
     Linux 发行版的中文默认）作为第三顺位，四个平台才都有中文字。 */
  --font: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
          "Source Han Sans SC", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* **字号只有五档**（多一档就多一次犹豫，结果是九个近似值） */
  /* ── 规范字号阶（9 档）────────────────────────────────────────────
     ✅ 2026-09-22 对齐竞品（小云雀 xyq.jianying.com，实测）：**小字号段本来就对得上**
     （它 10/11/12/13/14 与我们 2xs/micro/small/body/md 逐档相同），差的是**大字号段** ——
     它有 34px 的页面主标题与 39px 的 hero，而我们最大只到 26px 且**从未使用**（使用次数 0），
     于是整个界面的字高都挤在 11–14px 之间 ⇒ 观感"不够大气"。
     这一轮把上面四档放大，**小字号段一动不改**（正文密度是工作台的命，动它会把表格与列表挤坏）。

     命名纪律：**按语义命名，不按尺寸命名** —— `--fs-2xl` 回答不了
     "这里该用哪一档"；`--fs-title` 可以。所以没有 xs/sm/lg 这套尺寸名。

     取整纪律：**相邻档至少差 1px**。差 0.5px（12 / 12.5）在 10–16 区间
     人眼无法稳定分辨，只会让作者在两档之间随意挑，最终又长出新值。 */
  --fs-2xs:     10px;  /* 角标：数字徽标、极小标记（**不放正文**） */
  --fs-micro:   11px;  /* 标注：chip·kicker（**不放正文**） */
  --fs-small:   12px;  /* 佐证：时间·归属·说明 */
  --fs-body:    13px;  /* **默认**：正文·表格·表单 */
  --fs-md:      14px;  /* 正文强调：表格小标题·次级标题 */
  --fs-title:   18px;  /* 区块/页面标题（16→18：与小云雀同段） */
  --fs-xl:      22px;  /* 大区块标题（19→22） */
  --fs-display: 28px;  /* 一个数：每屏至多一处（22→28） */
  --fs-hero:    34px;  /* 主视觉：空态标题·封面标题（26→34，对齐小云雀的页面主标题） */
  --lh: 1.6;           /* 正文（中文比英文宽一档） */
  --lh-tight: 1.25;    /* 标题（**单行**）：中文单行用紧的没问题 */
  /* 多行中文的紧凑档（Lark Design 的中文本地化要点：中文行距需求高于拉丁）。
     名字取创作台已有的叫法，避免同一个概念出现两种名字。 */
  --lh-snug: 1.45;
  /* **字重只有三档**，且必须落在系统字体真正有的值上（不许 650/700 —— 会被合成或取整，
     同一份 CSS 在不同机器上字重不同） */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-strong: 600;

  /* ── 间距 / 圆角 / 阴影 ─────────────────────────────── */
  /* **4 的倍数**；奇数一律不许（对齐会变成巧合） */
  --sp-1: 4px;    /* 同组内：文字与图标 */
  --sp-2: 8px;
  --sp-3: 12px;   /* 组与组 */
  --sp-4: 16px;
  --sp-5: 24px;   /* 区块之间 */
  --sp-6: 32px;
  --r-sm: 6px;    /* 内联小件：标签、徽章、表格单元格 */
  --r-md: 10px;   /* 控件：按钮、输入框、下拉 */
  --r-lg: 16px;   /* 容器：卡片、面板、浮层（2026-09-22 上提——它此前只被创作台私藏在
                     页面 :root 里，其余三面拿不到；尺寸同时对齐竞品卡片的 16px） */
  --r-pill: 999px;/* 胶囊：分段控件、状态点、提交键 */
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);

  /* ── 动效 / 层级（elevation）───────────────────────────────────
   * ⚠️ 这五个 token 原先因一处补丁错位落在 `[hidden]` 选择器里（2026-09-20 修正）——
   *    它们于是只对**隐藏元素**存在 ⇒ 凡是用到"悬停升起"的地方全部静默失效：
   *    `--dur / --ease` 拿不到值 ⇒ 过渡变成 `unset`（瞬间跳变，没有动效）；
   *    `--lift-surface / --lift-line` 拿不到值 ⇒ `background` 变透明、描边不出现。
   *    动效与层级和间距/圆角是同一类东西：**全局常量，只能住在 `:root`**。 */
  /* 时长与曲线也是一处定义（Material：动效必须有含义，一条 durations 常量表
     比在每个组件里各写一个 0.15s 更能保证含义一致）。 */
  --dur: 150ms;
  --ease: cubic-bezier(.2, 0, 0, 1);   /* Material 的标准缓出 */
}
/* ⚠️ `--shadow-lift` / `--lift-surface` / `--lift-line` 三个**不在这一层**
   （2026-09-22 移入明暗层）：暗底上阴影几乎看不见、靠"表面提亮 + 描边提亮"分层，
   亮底上则相反。它们本来就是明暗的函数，放在"与明暗无关"的常量层是错位。 */

/* ── 外观 · 深色 —— **面的默认**；也是 <html data-scheme="dark"> 的显式深色 ──
 *
 * ⚠️ **三个后台与画布共用同一族暗色**（2026-09-19 按所有者要求改）。
   此前后台是暖白底 + 深绿主色 —— 那是"企业后台"的谱系，与画布的
   （#0a0a0a 近黑 + #c4b08a 暖金）像两个产品。

   2026-09-22：`.theme-console` 与 `.theme-canvas` **合并为同一条规则**。
   两者此前的差异只是 4 处同色相不同明度的状态色 + `--line-strong`，而
   管理台的 `--line-strong: #3a3a42` **本身就违规** —— 该值对卡片 #1a1a1e
   的对比度约 1.7:1，而本文件自己的约定是"控件边界必须 ≥3:1（WCAG 1.4.11）"。
   合并取达标的那支（#6b6b74）。同一个产品不该有两种红、两种琥珀。

   对比度已逐项核对（暗底上）：
     ink 16.43 · muted 7.5 · accent 9.36 · ok 11.36 · warn 11.86 · danger 7.16
   （--line 1.39 —— 它是装饰性描边，按本文件既有约定无 3:1 要求） */
:root[data-scheme="dark"], .theme-canvas, .theme-console {
  /* color-scheme：原生件（滚动条/select 面板/number 箭头）跟随深色。一处真相。 */
  color-scheme: dark;

  /* ── 小云雀深色语言（2026-09-27 像素取证，2938×1596）──────────────────
   * 实测面阶（**不用纯黑**，层级靠小步提亮）：
   *   页面底 #111111 → 左栏 #161616 → 图标容器 #1c1c1c → 顶部 pill #242424；
   * 文字：正文 #d8d8d8，强调/标题 #f8f8f8；
   * 紫更克制：顶部一枚暗紫底 #5a428a，亮紫 #9c72fc 只作小点缀；
   * 高饱和的青蓝/红粉/暖黄仍只出现在封面缩略图 = 内容，非界面。
   * 语言归纳：深灰底 + 小步面阶 + 高亮中性文字 + **克制的紫** + 内容才是彩色。
   * 纪律：只换色相/面阶，不改对比度档位（正文≥4.5 · 控件边界≥3 · 主按钮≥4.5）。 */
  --accent: #9c72fc;        /* 品牌主行动 = 亮紫（深色下比浅色主题更克制）*/
  --accent-ink: #15101f;
  --danger: #f05349;        /* 破坏性 */
  --warn: #e0b341;          /* 需要注意 */
  --ok: #48c774;            /* 已完成/通过：状态色 */

  /* ── 中性（冷调深灰）──────────────────────────────────── */
  --bg: #111111;            /* 页面底（非纯黑）*/
  --card: #181818;          /* 卡片/表面（底 → card → panel3 小步提亮）*/
  --ink: #e6e6e6;           /* 正文 */
  --muted: #a6a6a6;         /* 次要：时间/归属/说明，≥4.5:1 */
  --line: #262626;          /* 装饰行线/容器描边 */
  --line-strong: #6c6c6c;   /* 控件边界，≥3:1 */
  --chip: #242424;          /* 状态标签底 */
  --chip-ink: #d8d8d8;

  /* ── 状态色淡底/描边（成对；暗底）────────────────────────── */
  --warn-bg: #2a2210;   --warn-line: #4a3c16;
  --ok-bg: #10261a;     --ok-line: #1c422b;
  --danger-bg: #2a1414; --danger-line: #4a2020;
  --accent-bg: #241a3d;  --accent-line: #4a3578;

  /* ── 表面第三档 / 弱文字 / 卡内弱分隔线 ──────────────────── */
  --panel3: #242424;                 /* 悬停/嵌套表面/pill */
  --dim: #8c8c8c;                    /* 正文级以下弱文字 */
  --label: #a0a0a0;                  /* 微标签 */
  --line-soft: rgba(255, 255, 255, .06);

  /* ── 叠色三档：暗底靠"提亮"分层 ─────────────────────────── */
  --raise-1: rgba(255, 255, 255, .02);
  --raise-2: rgba(255, 255, 255, .045);
  --raise-3: rgba(255, 255, 255, .08);

  /* 表面边框悬停档 */
  --line-hover: #343434;

  /* 「运行中 / info」冷蓝 */
  --blue: #5b9ac9;

  /* 遮罩：暗底要厚 */
  --scrim: rgba(0, 0, 0, .70);

  /* 悬停"升起"：暗底靠表面提亮 + 描边提亮 */
  --shadow-lift: 0 6px 20px rgba(0, 0, 0, .40);
  --lift-surface: #232323;
  --lift-line: #3a3a3a;

  /* ── AI 身份色 = 克制的紫 ─────────────────────────────────
   * 亮紫 #9c72fc 用于标签/图标/「问 AI」；暗紫底 #241a3d 用于 AI 表面。
   * 与 --accent 统一为同一支紫：深色下品牌色即 AI 色，但面积小、不喧宾夺主。 */
  --agent: #9c72fc;
  --agent-bright: #b79bff;
  --agent-soft: #a98efd;
  --agent-faint: #c9b6ff;
  --agent-bg: #241a3d;
  --agent-line: rgba(156, 114, 252, .38);
}

/* ── 密度 ────────────────────────────────────────────────── *
 * 管理台默认「平衡」；表格页可切「紧凑」。 */
.density-compact { --sp-2: 6px; --sp-3: 10px; --sp-4: 14px; --fs-body: 12px; }
.density-cozy    { --sp-2: 12px; --sp-3: 18px; --sp-4: 26px; }

/* ── 基础元素（三个界面共用同一套写法）─────────────────────── */
.ui-body {
  margin: 0;
  font: var(--fs-body) / var(--lh) var(--font);
  background: var(--bg);
  color: var(--ink);
}
.ui-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
}
.ui-title { font-size: var(--fs-title); font-weight: 600; margin: 0; }
.ui-display { font-size: var(--fs-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-muted { color: var(--muted); }
/* **数字**：等宽 + 右对齐 + 单位紧跟 —— 见《界面语言 §3.4》 */
.ui-num { font-variant-numeric: tabular-nums; }

.ui-chip {
  background: var(--chip);
  color: var(--chip-ink);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  font-size: var(--fs-small);
}
.ui-btn {
  font: inherit;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
/* **主操作**：每屏至多一个 */
.ui-btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* **破坏性**：动词 + 宾语，不是"确定" */
.ui-btn--danger { color: var(--danger); }
.ui-input {
  font: inherit;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
}
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th, .ui-table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
}
.ui-table th { color: var(--muted); font-weight: 500; }
.ui-table tr:last-child td { border-bottom: 0; }
/* 数字列右对齐（§3.4）*/
.ui-table .ui-num { text-align: right; }

/* **空态**：必须回答"为什么空 + 怎么开始"（§4.3）*/
.ui-empty { color: var(--muted); padding: var(--sp-4); text-align: center; }
/* **错误**：必须给出下一步（§4.3）*/
.ui-err { color: var(--danger); font-size: var(--fs-small); min-height: 20px; }
.ui-hint { color: var(--muted); font-size: var(--fs-small); }
