/*
 * 星辰外观方案 —— 三套并列皮肤，默认版另有五套配色
 *
 *   [data-skin="default"] + [data-palette="stellar|rouge|azure|sunlit|mint"]
 *   [data-skin="mist"]    柔雾版（浅粉、大圆角、厚留白）
 *   [data-skin="night"]   夜间版（炭黑分层、降饱和）
 *
 * ★ 改皮肤要同时改 core-src/src/styles/stellar-skins.css（管理区 iframe 的同名皮肤），
 *   否则外壳变了、管理区还是旧配色。
 *
 * ★ 全部通过重定义 styles.css 的 token 实现，不新增/不改动任何选择器。
 *   这是三套皮肤能共存的前提：布局只有一套，改动只会影响一处。
 *
 * ★ 不挂 data-skin 时完全等于现网外观 —— 本文件即便被误发布也不改变观感。
 *
 * token 分组（共 63 个，见 styles.css 的 :root）：
 *   面/线/字   canvas surface surface-soft surface-strong ink muted faint line line-strong
 *   深色块     night night-soft sidebar-deep-rgb panel-deep-rgb activity-deep-rgb sidebar-ink
 *   深块前景   on-dark-fg1..10-rgb / fill1 / line1..2   ← 柔雾要把这些从白系换成深玫瑰系
 *   强调       gold gold-pale gold-strong cyan cyan-soft cyan-strong cyan-deep + 对应 -rgb
 *   语义       green amber danger coral
 *   圆角       radius radius-2/4/5/6/7/8/10
 */

/* ══ 默认版 · 星际青金（= 现网现状，显式写出便于对照） ════════ */
[data-skin="default"][data-palette="stellar"] {
  color-scheme: light;
  --membership-stage-bg: #070b11;
  --membership-stage-caption: rgba(var(--on-dark-fg3-rgb), 0.62);
}

/* ══ 默认版 · 胭脂粉 ═══════════════════════════════════════════
   骨架完全不动，只把冷青金换成玫瑰墨 + 胭脂红。 */
[data-skin="default"][data-palette="rouge"] {
  color-scheme: light;
  --canvas: #f7f0f3;
  --surface: #ffffff;
  --surface-soft: #fdf7f9;
  --surface-strong: #f2e4ea;
  --ink: #2b1a21;
  --muted: #63404e;
  --faint: #6b4553;
  --line: #ecdde3;
  --line-strong: #dcc4ce;
  --night: #32161f;
  --night-soft: #43202c;
  --night-line: rgba(247, 233, 238, 0.15);
  --sidebar-deep-rgb: 45, 19, 27;
  --panel-deep-rgb: 38, 15, 22;
  --activity-deep-rgb: 40, 17, 24;
  --sidebar-ink: #f9ecf1;
  --canvas-rgb: 247, 240, 243;
  --night-rgb: 50, 22, 31;
  /* 强调：金→玫瑰金，青→胭脂红 */
  --gold: #c9857a;
  --gold-pale: #efc3cf;
  --gold-strong: #8f4a4a;
  --gold-rgb: 201, 133, 122;
  --gold-pale-rgb: 239, 195, 207;
  --cyan: #c4436c;
  --cyan-soft: #fae2ea;
  --cyan-strong: #a83a5f;
  --cyan-deep: #8f2f50;
  --cyan-rgb: 196, 67, 108;
  --coral: #d9605c;
  --chart-1: #e3839a;
  --chart-2: #b695cf;
  --chart-3: #e88f87;
  --chart-4: #73b8a5;
  --chart-5: #d29f6d;
  --chart-6: #cb8eb6;
  --chart-7: #88aad7;
  --chart-8: #de94b7;
  --chart-9: #c29f8c;
  --chart-10: #d78e8d;
  --chart-other: #c0a9ba;
}

/* ══ 默认版 · 晴空蓝 ═══════════════════════════════════════════
   浅蓝 + 白，不压暗：侧栏改成浅蓝底深字（原本是深色底），
   所以深块前景要跟着翻深 —— 这点和柔雾同理。 */
[data-skin="default"][data-palette="azure"] {
  color-scheme: light;
  --canvas: #f2f7fc;
  --surface: #ffffff;
  --surface-soft: #f6fafd;
  --surface-strong: #e6f0f9;
  --ink: #16242f;
  --muted: #3d5265;
  --faint: #475c70;
  --line: #e0ecf6;
  --line-strong: #c6dced;
  /* 深色块 → 浅蓝块 */
  --night: #e4f0fa;
  --night-soft: #d7e9f7;
  --night-line: rgba(20, 60, 90, 0.14);
  --sidebar-deep-rgb: 235, 244, 252;
  --panel-deep-rgb: 228, 240, 250;
  --activity-deep-rgb: 225, 238, 249;
  --sidebar-ink: #143a52;
  --canvas-rgb: 242, 247, 252;
  --night-rgb: 228, 240, 250;
  /* 浅底上前景必须翻深，否则白字漏在浅蓝上 */
  --on-dark-fg1-rgb: 20, 58, 82;
  --on-dark-fg2-rgb: 20, 58, 82;
  --on-dark-fg3-rgb: 20, 58, 82;
  --on-dark-fg4-rgb: 20, 58, 82;
  --on-dark-fg5-rgb: 32, 72, 96;
  --on-dark-fg6-rgb: 20, 58, 82;
  --on-dark-fg7-rgb: 20, 58, 82;
  --on-dark-fg8-rgb: 32, 72, 96;
  --on-dark-fg9-rgb: 20, 58, 82;
  --on-dark-fg10-rgb: 32, 72, 96;
  --on-dark-fill1-rgb: 24, 84, 120;
  --on-dark-line1-rgb: 24, 84, 120;
  --on-dark-line2-rgb: 24, 84, 120;
  --on-dark-solid1: #143a52;
  --on-dark-solid2: #143a52;
  --on-dark-solid3: #143a52;
  --on-dark-solid4: #143a52;
  --on-dark-solid5: #143a52;
  --on-dark-solid6: #143a52;
  --on-dark-solid7: #1d5170;
  --gold: #5aa7cf;
  --gold-pale: #9fd0ea;
  --gold-strong: #1f5d7d;
  --gold-rgb: 90, 167, 207;
  --gold-pale-rgb: 159, 208, 234;
  --cyan: #2b87b8;
  --cyan-soft: #dcf0fa;
  --cyan-strong: #1d6c96;
  --cyan-deep: #175a7e;
  --cyan-rgb: 43, 135, 184;
  --series-3: #7fb2d9;
  --series-alt: #8fd0e8;
  --chart-1: #63ade0;
  --chart-2: #90a2db;
  --chart-3: #64b9af;
  --chart-4: #b197d0;
  --chart-5: #e08e8e;
  --chart-6: #8ab58b;
  --chart-7: #6abad9;
  --chart-8: #9f9ed5;
  --chart-9: #c2a76f;
  --chart-10: #c696bb;
  --chart-other: #a8b1c8;
}

/* ══ 默认版 · 暖阳黄 ═══════════════════════════════════════════ */
[data-skin="default"][data-palette="sunlit"] {
  color-scheme: light;
  --canvas: #fdf8ed;
  --surface: #ffffff;
  --surface-soft: #fdfaf2;
  --surface-strong: #f6ecd7;
  --ink: #2e2413;
  --muted: #5d4a24;
  --faint: #66522a;
  --line: #f3e8d2;
  --line-strong: #e3d0aa;
  --night: #f7ecd4;
  --night-soft: #f2e2c2;
  --night-line: rgba(82, 62, 20, 0.15);
  --sidebar-deep-rgb: 250, 242, 226;
  --panel-deep-rgb: 247, 236, 212;
  --activity-deep-rgb: 245, 234, 208;
  --sidebar-ink: #4a3712;
  --canvas-rgb: 253, 248, 237;
  --night-rgb: 247, 236, 212;
  --on-dark-fg1-rgb: 74, 55, 18;
  --on-dark-fg2-rgb: 74, 55, 18;
  --on-dark-fg3-rgb: 74, 55, 18;
  --on-dark-fg4-rgb: 74, 55, 18;
  --on-dark-fg5-rgb: 90, 70, 28;
  --on-dark-fg6-rgb: 74, 55, 18;
  --on-dark-fg7-rgb: 74, 55, 18;
  --on-dark-fg8-rgb: 90, 70, 28;
  --on-dark-fg9-rgb: 74, 55, 18;
  --on-dark-fg10-rgb: 90, 70, 28;
  --on-dark-fill1-rgb: 120, 90, 24;
  --on-dark-line1-rgb: 120, 90, 24;
  --on-dark-line2-rgb: 120, 90, 24;
  --on-dark-solid1: #4a3712;
  --on-dark-solid2: #4a3712;
  --on-dark-solid3: #4a3712;
  --on-dark-solid4: #4a3712;
  --on-dark-solid5: #4a3712;
  --on-dark-solid6: #4a3712;
  --on-dark-solid7: #6b5019;
  --gold: #c79430;
  --gold-pale: #f0d896;
  --gold-strong: #7d5a10;
  --gold-rgb: 199, 148, 48;
  --gold-pale-rgb: 240, 216, 150;
  --cyan: #b8821f;
  --cyan-soft: #fbf0d6;
  --cyan-strong: #8f6413;
  --cyan-deep: #75510f;
  --cyan-rgb: 184, 130, 31;
  --series-3: #c49a3e;
  --series-alt: #d4b160;
  --chart-1: #d09d53;
  --chart-2: #e48e78;
  --chart-3: #98ae73;
  --chart-4: #69b4af;
  --chart-5: #a099d1;
  --chart-6: #dc8a90;
  --chart-7: #d6a270;
  --chart-8: #85a7d3;
  --chart-9: #c49a83;
  --chart-10: #87b496;
  --chart-other: #b1a9c1;
}

/* ══ 默认版 · 薄荷绿 ═══════════════════════════════════════════ */
[data-skin="default"][data-palette="mint"] {
  color-scheme: light;
  --canvas: #f1faf6;
  --surface: #ffffff;
  --surface-soft: #f5fbf8;
  --surface-strong: #e2f2ec;
  --ink: #13291f;
  --muted: #335646;
  --faint: #3b6052;
  --line: #ddefe7;
  --line-strong: #c0dfd2;
  --night: #e0f2ea;
  --night-soft: #d1ebe0;
  --night-line: rgba(18, 66, 48, 0.14);
  --sidebar-deep-rgb: 232, 246, 240;
  --panel-deep-rgb: 224, 242, 234;
  --activity-deep-rgb: 220, 240, 231;
  --sidebar-ink: #12432f;
  --canvas-rgb: 241, 250, 246;
  --night-rgb: 224, 242, 234;
  --on-dark-fg1-rgb: 18, 67, 47;
  --on-dark-fg2-rgb: 18, 67, 47;
  --on-dark-fg3-rgb: 18, 67, 47;
  --on-dark-fg4-rgb: 18, 67, 47;
  --on-dark-fg5-rgb: 30, 82, 60;
  --on-dark-fg6-rgb: 18, 67, 47;
  --on-dark-fg7-rgb: 18, 67, 47;
  --on-dark-fg8-rgb: 30, 82, 60;
  --on-dark-fg9-rgb: 18, 67, 47;
  --on-dark-fg10-rgb: 30, 82, 60;
  --on-dark-fill1-rgb: 22, 94, 66;
  --on-dark-line1-rgb: 22, 94, 66;
  --on-dark-line2-rgb: 22, 94, 66;
  --on-dark-solid1: #12432f;
  --on-dark-solid2: #12432f;
  --on-dark-solid3: #12432f;
  --on-dark-solid4: #12432f;
  --on-dark-solid5: #12432f;
  --on-dark-solid6: #12432f;
  --on-dark-solid7: #1c5c42;
  --gold: #4faf8a;
  --gold-pale: #9cd9c0;
  --gold-strong: #1c6347;
  --gold-rgb: 79, 175, 138;
  --gold-pale-rgb: 156, 217, 192;
  --cyan: #1f8f68;
  --cyan-soft: #dcf3ea;
  --cyan-strong: #17714f;
  --cyan-deep: #125c41;
  --cyan-rgb: 31, 143, 104;
  --series-3: #5fb392;
  --series-alt: #7ec7a9;
  --chart-1: #70b691;
  --chart-2: #68b1c7;
  --chart-3: #9c9bd2;
  --chart-4: #d0a260;
  --chart-5: #dc8b8b;
  --chart-6: #69b8ae;
  --chart-7: #91bb91;
  --chart-8: #85a7d3;
  --chart-9: #b99bc6;
  --chart-10: #cc9b80;
  --chart-other: #9cb8b5;
}

/* ══ 柔雾版 ════════════════════════════════════════════════════
   彻底浅粉：深色块全部换成浅粉渐变，所以"深块上的前景色"必须从
   白系翻成深玫瑰系 —— 否则白字漏在浅粉上看不见。
   这是三套皮肤里唯一需要翻转前景明度的一套。 */
[data-skin="mist"] {
  color-scheme: light;
  --canvas: #fdf4f7;
  --surface: #ffffff;
  --surface-soft: #fdeef3;
  --surface-strong: #f9dfe8;
  --ink: #3a2530;
  --muted: #63404e;
  --faint: #6b4553;
  --line: #f6e6ec;
  --line-strong: #edd0da;

  /* 深色块 → 浅粉块 */
  --night: #fbe4ec;
  --night-soft: #f8d8e3;
  --night-line: rgba(122, 36, 71, 0.16);
  --sidebar-deep-rgb: 253, 238, 243;
  --panel-deep-rgb: 251, 228, 236;
  --activity-deep-rgb: 250, 224, 233;
  --sidebar-ink: #5e1c36;
  --canvas-rgb: 253, 244, 247;
  --night-rgb: 251, 228, 236;

  /* ★ 深块前景全部翻成深玫瑰：原本是 rgba(白, .84) 这类，
     底变浅后必须变深字。alpha 保持不变，只换基色。 */
  --on-dark-fg1-rgb: 94, 28, 54;
  --on-dark-fg2-rgb: 94, 28, 54;
  --on-dark-fg3-rgb: 94, 28, 54;
  --on-dark-fg4-rgb: 94, 28, 54;
  --on-dark-fg5-rgb: 108, 40, 66;
  --on-dark-fg6-rgb: 94, 28, 54;
  --on-dark-fg7-rgb: 94, 28, 54;
  --on-dark-fg8-rgb: 108, 40, 66;
  --on-dark-fg9-rgb: 94, 28, 54;
  --on-dark-fg10-rgb: 108, 40, 66;
  --on-dark-fill1-rgb: 143, 44, 82;
  --on-dark-line1-rgb: 143, 44, 82;
  --on-dark-line2-rgb: 143, 44, 82;

  /* 实色亮前景同样要翻深：原本是 #fff / #fff8e8 这类写死的白，
     底变浅粉后必须变深玫瑰，否则侧栏菜单、余额数字、主按钮全都看不见
     （实测未翻转时分别只有 1.29:1 / 1.08:1 / 1.21:1）。 */
  --on-dark-solid1: #5e1c36;
  --on-dark-solid2: #5e1c36;
  --on-dark-solid3: #5e1c36;
  --on-dark-solid4: #5e1c36;
  --on-dark-solid5: #5e1c36;
  --on-dark-solid6: #5e1c36;
  --on-dark-solid7: #7a2447;

  /* 强调：不用深粉压场，主色偏玫瑰但填充保持浅 */
  --gold: #c98aa0;
  --gold-pale: #f7b9d0;
  --gold-strong: #8c4a3c;
  --gold-rgb: 201, 138, 160;
  --gold-pale-rgb: 247, 185, 208;
  --brand-mark-ink: #b8446f;
  --brand-mark-border: #c45f84;
  --brand-mark-shadow-rgb: 184, 68, 111;
  --brand-mark-bg: rgba(255, 255, 255, 0.58);
  --cyan: #d9628c;
  --cyan-soft: #fbe4ec;
  --cyan-strong: #b8446f;
  --cyan-deep: #9c3559;
  --cyan-rgb: 217, 98, 140;

  /* 圆角整体放大，这是柔雾和默认版最直观的结构差异 */
  --radius: 20px;
  --radius-2: 6px;
  --radius-4: 10px;
  --radius-5: 12px;
  --radius-6: 14px;
  --radius-7: 16px;
  --radius-8: 20px;
  --radius-10: 22px;

  --shadow-float: 0 8px 28px rgba(199, 80, 124, 0.13);

  /* 图表系列：覆盖最多的第一系列(--cyan)最粉，其余降饱和区分。
     刻意不用青/紫，否则粉色页面里会跳出两根异色柱子。 */
  --series-3: #b98aae;
  --series-alt: #dd8fb4;
  --chart-1: #e38ab5;
  --chart-2: #b998d2;
  --chart-3: #eb9191;
  --chart-4: #7ebdab;
  --chart-5: #cc96c6;
  --chart-6: #e0a07d;
  --chart-7: #8dadd7;
  --chart-8: #d28da7;
  --chart-9: #b9ae87;
  --chart-10: #b997c0;
  --chart-other: #c6afc0;

  /* 状态标签：浅粉底 + 深玫瑰字，和整体一致 */
  --state-success-bg: #e8f5ef;
  --state-success-ink: #1f7d5c;
  --state-success-ink-strong: #176b49;
  --state-success-line: #bfe0d1;
  --state-warning-bg: #fdf0e2;
  --state-warning-ink: #8a5a1b;
  --state-warning-line: #ecd2ab;
  --state-danger-bg: #fbe4e8;
  --state-danger-ink: #a83a52;
  --state-danger-line: #eec0c9;
  --state-disabled-bg: #f7e8ee;
  --state-disabled-ink: #7a5464;
  --state-disabled-line: #e6cfd8;
  /* 行状态：浅粉分层，保持整体浅透 */
  --row-disabled-bg: #f7eef2;
  --row-disabled-bg-hover: #f3e6ec;
  --row-disabled-ink: #7a5a68;
  --row-disabled-bar: #c4a3b2;
  --row-expired-bg: #fdeeee;
  --row-expired-bg-hover: #fae4e4;
  --row-expired-bar: #c96a68;
  --row-exhausted-bg: #fdf4e8;
  --row-exhausted-bg-hover: #faecda;
  --row-exhausted-bar: #c99248;
  --row-active-bar: #63b895;
  --surface-track: #f7e6ed;
  --surface-subtle: #fdf8fa;
  --surface-info: #fbeef4;
  --surface-muted: #f6e8ee;
  --surface-alert: #fdeef0;
  --surface-highlight: #fdf0d8;
}

/* ══ 夜间版 ════════════════════════════════════════════════════
   炭黑分层（非纯黑：纯黑对比过硬、OLED 上易拖影）。
   深色块本来就是深的，所以前景保持白系不用翻转 ——
   只需把"浅色面"整体压暗。 */
[data-skin="night"] {
  color-scheme: dark;
  --canvas: #0d1117;
  --surface: #161b22;
  --surface-soft: #1c232d;
  --surface-strong: #222b36;
  --ink: #e6edf3;
  --muted: #a9b6c4;
  --faint: #9aa8b7;
  --line: #262d38;
  --line-strong: #333d4a;
  --night: #0a0e14;
  --night-soft: #111821;
  --night-line: rgba(230, 237, 243, 0.14);
  --sidebar-deep-rgb: 8, 12, 18;
  --panel-deep-rgb: 6, 10, 15;
  --activity-deep-rgb: 7, 11, 17;
  --sidebar-ink: #e6edf3;
  --canvas-rgb: 13, 17, 23;
  --night-rgb: 10, 14, 20;
  --gold: #d4a05a;
  --gold-pale: #7fcfe4;
  --gold-strong: #e0b048;
  --gold-rgb: 212, 160, 90;
  --gold-pale-rgb: 127, 207, 228;
  --cyan: #58b6d0;
  --cyan-soft: rgba(88, 182, 208, 0.16);
  --cyan-strong: #7fcfe4;
  --cyan-deep: #9bdcec;
  --cyan-rgb: 88, 182, 208;
  /* 语义色提亮：深底上原色太闷读不清 */
  --green: #3fb97a;
  --amber: #e0b048;
  --danger: #e8636f;
  --coral: #e87a68;
  --shadow-float: 0 8px 26px rgba(0, 0, 0, 0.5);

  /* ★ 状态标签必须换成半透明深底 + 提亮文字。
     默认值是"浅底深字"，夜间下会变成刺眼白块，里面的深灰字
     在白底上反而看不清 —— 已禁用的密钥就是这个问题。 */
  --state-success-bg: rgba(63, 185, 122, 0.16);
  --state-success-ink: #5fd694;
  --state-success-ink-strong: #6fe0a1;
  --state-success-line: rgba(63, 185, 122, 0.38);
  --state-warning-bg: rgba(224, 176, 72, 0.16);
  --state-warning-ink: #e8bf62;
  --state-warning-line: rgba(224, 176, 72, 0.38);
  --state-danger-bg: rgba(232, 99, 111, 0.16);
  --state-danger-ink: #f0838d;
  --state-danger-line: rgba(232, 99, 111, 0.38);
  --state-disabled-bg: rgba(230, 237, 243, 0.08);
  --state-disabled-ink: #a9b6c4;
  --state-disabled-line: rgba(230, 237, 243, 0.2);

  --series-3: #9b93d6;
  --series-alt: #6fb8cf;
  --chart-1: #57c0e6;
  --chart-2: #a7a5eb;
  --chart-3: #75c291;
  --chart-4: #ddaa60;
  --chart-5: #f08e8e;
  --chart-6: #d696c7;
  --chart-7: #64c3c3;
  --chart-8: #8aace4;
  --chart-9: #acbe78;
  --chart-10: #e79d7b;
  --chart-other: #9ca4bb;
  /* ★ 行状态底色：默认是浅色（#f4f5f7 等），夜间下会在深色页面里
     出现一条刺眼的浅色行，行内浅灰字反而读不出来 —— 这正是
     "已禁用的密钥全白、字看不清"的根因。改为深色分层 + 提亮文字。 */
  --row-disabled-bg: #1a212b;
  --row-disabled-bg-hover: #1f2732;
  --row-disabled-ink: #8b99a8;
  --row-disabled-bar: #4a5765;
  --row-expired-bg: #241a1d;
  --row-expired-bg-hover: #2a1e22;
  --row-expired-bar: #a85048;
  --row-exhausted-bg: #241f17;
  --row-exhausted-bg-hover: #2a241a;
  --row-exhausted-bar: #a8792c;
  --row-active-bar: #3fb97a;
  --surface-track: #232b36;
  --surface-subtle: #1a202a;
  --surface-info: #16252e;
  --surface-muted: #202833;
  --surface-alert: #261a1c;
  --surface-highlight: #3a3218;
}

/* 夜间版下几处需要反转的明暗关系 —— 这些靠 token 覆盖不到，
   因为原设计假定"浅底深字"。数量刻意保持极少。 */
[data-skin="night"] .topbar { background: rgba(13, 17, 23, 0.92); }
[data-skin="night"] img:not([src*=".svg"]) { filter: brightness(0.92); }
[data-skin="night"] .provider-mark img[src$="/openai.svg"],
[data-skin="night"] .provider-mark img[src$="/xai.svg"],
[data-skin="night"] .provider-mark img[src$="/ollama.svg"],
[data-skin="night"] .provider-mark img[src$="/groq.svg"],
[data-skin="night"] .provider-mark img[src$="/midjourney.svg"] {
  filter: invert(1) brightness(0.92);
}