/* ============================================================
   自动生成，别手改 —— 由 app/themes.py 从 web/themes/*.css 拼装
   生成时间：2026-10-28 17:13:47
   改皮肤请改 web/themes/<id>.css；改清单请改 web/themes/_meta.json
   ============================================================ */

/* ---------- cloud.css ---------- */
/* ============================================================================
   cloud · 云盘白（默认，兜底主题）
   ---------------------------------------------------------------------------
   大圆角白卡 + 大数字 + 大留白，参考「云空间」面板。

   ⚠️ 这是**兜底主题**：theme-init.js 在没有记录、或记录的主题已被删掉时会落到
      它身上，所以 `cloud.css` 不许删、`html[data-theme="cloud"]` 这个选择器
      也不许改名。其余皮肤随便增删。
   ============================================================================ */
html[data-theme="cloud"] {
  --brand: #2f7ff0; --brand-hover: #1f6ae0; --brand-soft: #eaf2fe; --brand-fg: #1a56c4;
  --page: #f1f4f9; --surface: #fff; --surface-2: #f7f9fc; --surface-3: #f0f3f8;
  --line: #e9edf4; --line-2: #dfe5ee; --line-in: #ced6e0; --row-line: #f0f3f7;
  --text: #1b2430; --text-2: #5b6675; --text-3: #8a94a3; --text-4: #aab3bf;
  --hdr-bg: #fff; --hdr-fg: #1b2430; --hdr-fg-2: #5b6675; --hdr-3: #8a94a3;
  --hdr-line: #e9edf4;
  --r: 12px; --r-sm: 8px; --r-xs: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 16px rgba(16, 24, 40, .05);
}

/* ---------- cockpit.css ---------- */
/* ============================================================================
   cockpit · 驾驶舱（展示档）
   ---------------------------------------------------------------------------
   深青黑底 + 青色霓虹 + 玻璃拟态面板 + 背景光晕与网格地面。
   **只给总览看板/大屏用**：挂在库存表和报价单上连读三行就眼花。

   本文件里有三类东西，都属于「装饰」，不碰布局：
     1. 变量（配色、圆角、阴影）
     2. body 的背景（光晕 + 网格）—— 背景归皮肤管，这是唯一允许动 body 的地方
     3. 卡片的边框与辉光（box-shadow / border）
   ============================================================================ */
html[data-theme="cockpit"] {
  color-scheme: dark;

  --brand: #22d3ee; --brand-hover: #67e8f9; --brand-soft: #0a2a33; --brand-fg: #67e8f9;
  --on-brand: #02181d;

  --hdr-bg: #04070b; --hdr-fg: #dff3ff; --hdr-fg-2: #8fb3cc; --hdr-3: #5f7f96;
  --hdr-line: #14212e;

  --page: #05080d; --surface: #0c141d; --surface-2: #0f1a25; --surface-3: #13202c;
  --line: #1b2a3a; --line-2: #24384c; --line-in: #2d4459; --row-line: #101b26;

  --text: #dff3ff; --text-2: #8fb3cc; --text-3: #5f7f96; --text-4: #4a6579;

  --ok-bg: #0d2a22; --ok-fg: #34d399;
  --warn-bg: #2e1219; --warn-fg: #fb7185;
  --mid-bg: #2a2210; --mid-line: #4a3a18; --mid-fg: #fbbf24;
  --info-bg: #0d2130; --info-fg: #38bdf8;
  --ok-line: #1c5344; --warn-line: #63273a; --info-line: #1f4a63;
  --gray-bg: #13202c; --gray-fg: #7d94a8;
  --gold: #fbbf24;
  --good: #34d399; --bad: #fb7185;

  --r: 12px; --r-sm: 8px; --r-xs: 6px;
  --shadow: 0 0 0 1px rgba(34, 211, 238, .12), 0 0 44px -14px rgba(34, 211, 238, .28);
}

/* —— 背景：两团光晕 + 一层网格地面（纯背景，不影响任何元素的位置）—— */
html[data-theme="cockpit"] body {
  background-image:
    radial-gradient(900px 420px at 15% -10%, rgba(34, 211, 238, .10), transparent 60%),
    radial-gradient(700px 380px at 92% 8%, rgba(99, 102, 241, .09), transparent 60%),
    linear-gradient(rgba(34, 211, 238, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .035) 1px, transparent 1px);
  background-size: auto, auto, 100% 34px, 34px 100%;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* —— 卡片：霓虹细边 + 外辉光，代替阴影 —— */
html[data-theme="cockpit"] .card {
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .13), 0 0 48px -16px rgba(34, 211, 238, .32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* —— 顶栏也用一点玻璃感，不然在大屏上像贴了一条黑胶带 —— */
html[data-theme="cockpit"] header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(34, 211, 238, .16);
}

/* ---------- dark.css ---------- */
/* ============================================================================
   dark · 深色专业
   ---------------------------------------------------------------------------
   深灰底 + 深卡。状态色全部换成深底版本，否则浅绿浅红在深底上会发光。

   ⚠️ `color-scheme: dark` 必须留着 —— 否则浏览器原生表单控件（下拉、滚动条、
      日期选择器）还是白底，在深色页面上像打补丁。
   ⚠️ `--good/--bad`（财务页涨跌）必须提亮：#0a9a5b 在深底上发闷看不清。
   ============================================================================ */
html[data-theme="dark"] {
  color-scheme: dark;
  --brand: #3d8bfd; --brand-hover: #5b9fff; --brand-soft: #16273c; --brand-fg: #6cb2ff;
  --on-brand: #fff;
  --page: #12161c; --surface: #1b222b; --surface-2: #1e2630; --surface-3: #232c37;
  --line: #2a3340; --line-2: #37424f; --line-in: #3d4a59; --row-line: #232c37;
  --text: #e5ebf3; --text-2: #a9b6c5; --text-3: #8b98a8; --text-4: #6f7c8c;
  --hdr-bg: #0d1117; --hdr-fg: #e5ebf3; --hdr-fg-2: #a9b6c5; --hdr-3: #78899c;
  --hdr-line: #222b36;
  --ok-bg: #12301f;   --ok-fg: #5fd39b;
  --warn-bg: #3a1b1b; --warn-fg: #f08a8a;
  --mid-bg: #33270f;
  --mid-line: #5a4520;  --mid-fg: #e3b355;
  --info-bg: #12283f;
  --ok-line: #2b6d4c; --warn-line: #7a3b3b; --info-line: #2f5a8a; --info-fg: #6cb2ff;
  --gray-bg: #232c37; --gray-fg: #98a6b6;
  --gold: #e0a020;
  --good: #34d399;            /* 深底上要提亮，否则 #0a9a5b 发闷 */
  --bad: #f87171;
  --r: 12px; --r-sm: 8px; --r-xs: 6px;
  --shadow: none;
}

/* ---------- ink.css ---------- */
/* ============================================================================
   ink · 墨韵
   ---------------------------------------------------------------------------
   宣纸暖白底 + 墨黑正文 + 朱砂做强调。中式、暖调、长时间录单不刺眼。

   为什么主色选朱砂而不是墨黑：墨黑当主色会让按钮和正文一样黑，分不出「能点」
   和「只是字」；朱砂（#9c3b2e）在白纸底上对比度约 6:1，够点也够读。
   ============================================================================ */
html[data-theme="ink"] {
  --brand: #9c3b2e; --brand-hover: #8a3327; --brand-soft: #f7e9e3; --brand-fg: #8a3327;
  --on-brand: #fff;

  --hdr-bg: #fffdf7; --hdr-fg: #221f1a; --hdr-fg-2: #5c554a; --hdr-3: #918878;
  --hdr-line: #e3dbcc;

  --page: #f6f2ea; --surface: #fffdf7; --surface-2: #fbf7ef; --surface-3: #f4eee2;
  --line: #e3dbcc; --line-2: #d6cbb8; --line-in: #c9bda6; --row-line: #f0eade;

  --text: #221f1a; --text-2: #5c554a; --text-3: #918878; --text-4: #b3a996;

  --ok-bg: #e9f2e6; --ok-fg: #3f6b3a;
  --warn-bg: #f9e6e1; --warn-fg: #a5341f;
  --mid-bg: #faf0d8; --mid-line: #ddc9a3; --mid-fg: #8a6320;
  --info-bg: #e8eef4; --info-fg: #3c5a75;
  --ok-line: #b9d2b2; --warn-line: #e6bdb2; --info-line: #b3c7d6;
  --gray-bg: #f0ece3; --gray-fg: #6b6459;
  --gold: #b8862b;
  --good: #2f7d4f; --bad: #b03a28;

  --r: 8px; --r-sm: 5px; --r-xs: 3px;
  --shadow: 0 1px 2px rgba(60, 45, 25, .05), 0 12px 28px -20px rgba(60, 45, 25, .28);
}

/* ---------- line.css ---------- */
/* ============================================================================
   line · 极简线性
   ---------------------------------------------------------------------------
   去掉卡片阴影，只用细线 + 留白分区；标签只留一个色点（不铺底色）。

   ⚠️ 这套主题除了变量，还有**结构上的覆盖**（下面那几条 `.card` / `.tag`
      规则）—— 新皮肤如果需要这类「不只是换色」的小动作，就写在同一个文件里，
      但**只许改装饰属性**（阴影、边框、内边距、伪元素），
      不许动布局（display / position / 宽高 / 顺序）。
   ============================================================================ */
html[data-theme="line"] {
  --brand: #111; --brand-hover: #333; --brand-soft: #f4f4f4; --brand-fg: #111;
  --on-brand: #fff;
  --page: #fff; --surface: #fff; --surface-2: #fff; --surface-3: #fafafa;
  --line: #ececec; --line-2: #e2e2e2; --line-in: #dcdcdc; --row-line: #f2f2f2;
  --text: #111; --text-2: #555; --text-3: #8a8a8a; --text-4: #aaa;
  --hdr-bg: #fff; --hdr-fg: #111; --hdr-fg-2: #555; --hdr-3: #9a9a9a;
  --hdr-line: #ececec;
  --ok-bg: #fff; --ok-fg: #0f7b52;
  --warn-bg: #fff; --warn-fg: #c0392b;
  --mid-bg: #fff;
  --mid-line: #ddd8cc; --mid-fg: #b57a00;
  --info-bg: #fff;
  --ok-line: #e4e4e4; --warn-line: #e4e4e4; --info-line: #e4e4e4; --info-fg: #2f6fd0;
  --gray-bg: #fff; --gray-fg: #8a8a8a;
  --gold: #e0a020;
  --r: 6px; --r-sm: 4px; --r-xs: 3px;
  --shadow: none;
}

/* —— 本主题专属的装饰性覆盖（不含任何布局属性）—— */
html[data-theme="line"] .card,
html[data-theme="line"] table { box-shadow: none; }
html[data-theme="line"] .card { border: 1px solid var(--line); }
html[data-theme="line"] .tag { padding-left: 0; padding-right: 0; }
html[data-theme="line"] .tag::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin-right: 5px; vertical-align: middle;
}

/* ---------- mist.css ---------- */
/* ============================================================================
   mist · 雾青
   ---------------------------------------------------------------------------
   青灰底 + 墨绿主色的冷调浅色。比云盘白冷静、比极简有颜色，适合白天满屏表格。

   主色 #0f766e 在浅底上对比度约 5.6:1 —— 当文字用也够，所以 --brand-fg 略压深
   一档到 #0d655e，小字链接才不吃力。
   ============================================================================ */
html[data-theme="mist"] {
  --brand: #0f766e; --brand-hover: #0d655e; --brand-soft: #e0f2ef; --brand-fg: #0d655e;
  --on-brand: #fff;

  --hdr-bg: #ffffff; --hdr-fg: #16211f; --hdr-fg-2: #4d605c; --hdr-3: #8ba09b;
  --hdr-line: #dfe9e7;

  --page: #eef3f2; --surface: #ffffff; --surface-2: #f6faf9; --surface-3: #e8f1ef;
  --line: #dfe9e7; --line-2: #d0dedb; --line-in: #c2d5d1; --row-line: #eef4f3;

  --text: #16211f; --text-2: #4d605c; --text-3: #8ba09b; --text-4: #aabcb8;

  --ok-bg: #e3f4e9; --ok-fg: #1a7f4b;
  --warn-bg: #fdeceb; --warn-fg: #c0392b;
  --mid-bg: #fdf3e0; --mid-line: #e6cfa8; --mid-fg: #96660f;
  --info-bg: #e6f1fb; --info-fg: #1d64ad;
  --ok-line: #a8d8c0; --warn-line: #f0c6c6; --info-line: #9cc4e8;
  --gray-bg: #eaf1ef; --gray-fg: #5c6b67;
  --gold: #bf8f2e;
  --good: #0a8a52; --bad: #cc3b2f;

  --r: 12px; --r-sm: 7px; --r-xs: 5px;
  --shadow: 0 1px 2px rgba(10, 40, 35, .04), 0 10px 26px -14px rgba(10, 40, 35, .16);
}

/* ---------- navy.css ---------- */
/* ============================================================================
   navy · 藏青
   ---------------------------------------------------------------------------
   深藏青顶栏 + 收敛的圆角与字号，偏「老派办公系统」那种稳重感。
   ============================================================================ */
html[data-theme="navy"] {
  --brand: #1f3a5f; --brand-hover: #2a4d7a; --brand-soft: #eef4fb; --brand-fg: #1f3a5f;
  --on-brand: #fff;
  --page: #f5f6f8; --surface: #fff; --surface-2: #fafbfc; --surface-3: #f2f4f7;
  --line: #e3e6ea; --line-2: #e3e6ea; --line-in: #d5d9de; --row-line: #f0f1f3;
  --text: #333; --text-2: #556; --text-3: #9099a3; --text-4: #aab;
  --hdr-bg: #1f3a5f; --hdr-fg: #fff; --hdr-fg-2: #dce6f2; --hdr-3: #9db4d0;
  --hdr-line: transparent;
  --ok-bg: #e6f4ea; --warn-bg: #fdecea; --mid-bg: #fff3e0; --mid-line: #e8cfa8;
  --info-bg: #e8f0fe; --gray-bg: #eef1f6; --gray-fg: #556;
  --r: 10px; --r-sm: 6px; --r-xs: 4px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .06);
}