/* ==========================================================================
   BlazorServerControls —— 主题文件（亮 / 暗）
   --------------------------------------------------------------------------
   怎么用（两步，缺一不可）：

     1) 在 <head> 里引一次：
        <link rel="stylesheet" href="_content/BlazorServerControls/bsc-theme.css" />

     2) 在 <body> 上写 theme_light 或 theme_dark，**二选一**：
        <body class="theme_light">
        <body class="theme_dark">

   两个都不写 = 不套用本文件，控件用各自样式表里的内置值（亮色）。
   **本文件没有"默认主题"这个概念** —— 这是刻意的：暗色下没被覆盖到的地方
   （比如宿主页自己的背景）会亮得刺眼，与其半套不如由宿主明确表态。
   也不跟随 prefers-color-scheme：要不要跟随系统是宿主的决定，
   库不替宿主猜。宿主想跟随就自己写一小段 JS 改 body 的 class。

   切换就是把 body 的 class 换掉，不需要重新加载任何资源 ——
   本文件已经在页面里，变的只是选择器命中与否。

   ==========================================================================
   ⚠ 两条改这个文件前必须知道的规则
   --------------------------------------------------------------------------

   【规则一】只覆盖"调色板"和"细节"两类令牌，**不要覆盖派生令牌**。

   控件样式表里同一个令牌常常既声明在根元素、又被变体类重写，例如：

       .bsc-button            { --bsc-btn-bg: var(--bsc-accent); }   ← 根
       .bsc-button--success   { --bsc-btn-bg: #166534; }             ← 变体

   如果本文件在根级写 --bsc-btn-bg，它的特异度**高于**变体那条
   （见规则二），success 按钮就会变成和 primary 一个颜色 ——
   而且构建不报错、测试不报错，只有肉眼看得出不对。

   所以这里的策略是：
     · 调色板令牌（--bsc-accent / --bsc-bg / --bsc-border …）
       在根级覆盖，派生关系（var(--bsc-accent)）自动跟着变；
     · 派生令牌（--bsc-btn-bg / --bsc-switch-on / --bsc-icon-badge-bg …）
       逐个变体单独覆盖，放在文件末尾"变体档"一节。

   【规则二】本文件的特异度必须严格高于组件样式表，否则覆盖不生效。

   组件样式表里的规则都带 CSS 隔离的 scope 属性：

       .bsc-button[b-4pz86gtx6p]                  → (0,2,0)

   本文件在前面加了一个元素选择器 body 和一个 class：

       body.theme_dark .bsc-button                 → (0,2,1)   胜出

   差这一级不是巧合：它让本文件**与 <link> 的先后顺序无关**。
   放前面、后面都赢，宿主就不必纠结该把 link 放在哪一行。

   ========================================================================== */

/* ==========================================================================
   一、亮色（theme_light）
   --------------------------------------------------------------------------
   取值与各控件样式表里的内置值**逐字一致**，所以加上 theme_light
   之后观感零变化 —— 它的作用是把这套配色显式钉住，而不是改变它。
   ========================================================================== */

body.theme_light .bsc-button {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-hover: #eef2f7;
    --bsc-border: #e3e6ea;
    --bsc-border-strong: #c8cdd4;
    --bsc-accent: #2b6cb0;
    --bsc-accent-contrast: #ffffff;
    --bsc-danger: #b91c1c;
    --bsc-btn-link-fg: #2b6cb0;
}

body.theme_light .bsc-checkbox {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-border: #c8cdd4;
    --bsc-border-focus: #2b6cb0;
    --bsc-accent: #2b6cb0;
    --bsc-accent-contrast: #ffffff;
    --bsc-disabled: #cbd2d9;
}

body.theme_light .bsc-collapsepanel {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-border: #e3e6ea;
    --bsc-border-strong: #c8cdd4;
    --bsc-accent: #2b6cb0;
}

body.theme_light .bsc-contextmenu {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-border: #c8cdd4;
    --bsc-border-soft: #e3e6ea;
    --bsc-hover: #eef2f7;
    --bsc-accent: #2b6cb0;
    --bsc-disabled: #cbd2d9;
    --bsc-contextmenu-shadow: 0 6px 20px rgba(27, 31, 35, 0.18);
}

body.theme_light .bsc-datepicker {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-border: #c8cdd4;
    --bsc-border-focus: #2b6cb0;
    --bsc-accent: #2b6cb0;
    --bsc-accent-contrast: #ffffff;
    --bsc-hover: #eef2f7;
    --bsc-disabled: #cbd2d9;
    --bsc-invalid-border: #d93025;
    --bsc-invalid-bg: #fff59d;
    --bsc-focus-ring: rgba(43, 108, 176, 0.18);
    --bsc-invalid-ring: rgba(217, 48, 37, 0.16);
    --bsc-popup-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    --bsc-weekday-color: #7b8794;
    --bsc-calendar-foot-border: #eef0f3;
}

body.theme_light .bsc-decimalbox {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-border: #c8cdd4;
    --bsc-border-focus: #2b6cb0;
    --bsc-accent: #2b6cb0;
    --bsc-hover: #eef2f7;
    --bsc-disabled: #cbd2d9;
    --bsc-invalid-border: #d93025;
    --bsc-invalid-bg: #fff59d;
    --bsc-focus-ring: rgba(43, 108, 176, 0.18);
    --bsc-invalid-ring: rgba(217, 48, 37, 0.16);
}

body.theme_light .bsc-dropdownmenubutton {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-border: #c8cdd4;
    --bsc-border-soft: #e3e6ea;
    --bsc-accent: #2b6cb0;
    --bsc-hover: #eef2f7;
    --bsc-disabled: #cbd2d9;
    --bsc-menu-shadow: 0 4px 12px rgba(27, 31, 35, 0.16);
    --bsc-focus-ring: rgba(43, 108, 176, 0.25);
}

body.theme_light .bsc-fieldgroup {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-accent: #2b6cb0;
    --bsc-hover: #eef2f7;
    --bsc-border: #e3e6ea;
}

body.theme_light .bsc-fileicon {
    --bsc-fileicon-page: #ffffff;
    --bsc-fileicon-page-border: #c8cdd4;
    --bsc-fileicon-fold: #eef1f4;
    --bsc-fileicon-band-fg: #ffffff;
    /* --bsc-fileicon-band-bg（13 个类别色）刻意不给暗色值：
       那是 13 个饱和度都够的中间色，深底浅底上都读得清，
       硬调反而会破坏"按类别区分"这件事。 */
}

body.theme_light .bsc-listbox {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-hover: #eef2f7;
    --bsc-border: #d5dae0;
    --bsc-accent: #2b6cb0;
    --bsc-accent-contrast: #ffffff;
    --bsc-accent-soft: #e8f0f9;
    --bsc-danger: #b91c1c;
    --bsc-focus-ring: rgba(43, 108, 176, 0.16);
    --bsc-scrollbar-thumb: #c3cad2;
    --bsc-selected-fg: #1f4e82;
    --bsc-selected-bg: #d8e6f5;
    --bsc-selected-fg-hover: #1a4470;
}

body.theme_light .bsc-mobilenav {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-border: #e3e6ea;
    --bsc-border-strong: #c8cdd4;
    --bsc-accent: #2b6cb0;
    --bsc-hover: #f5f7fa;
    --bsc-danger: #b91c1c;
    --bsc-nav-badge-fg: #ffffff;
}

body.theme_light .bsc-navmenu-shell {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-border: #e3e6ea;
    --bsc-border-strong: #c8cdd4;
    --bsc-accent: #2b6cb0;
    --bsc-accent-soft: #e6f0fb;
    --bsc-hover: #f5f7fa;
    --bsc-active-bg: #e6f0fb;
    --bsc-active-bar: #2b6cb0;
    --bsc-disabled: #cbd2d9;
    --bsc-navmenu-shadow: 0 1px 2px rgba(27, 31, 35, 0.06);
    --bsc-navmenu-dropdown-shadow: 0 8px 16px rgba(27, 31, 35, 0.14);
}

body.theme_light .bsc-starsselector {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-accent: #2b6cb0;
    --bsc-hover: #eef2f7;
    --bsc-border: #d5dae0;
    --bsc-star-on: #e0a01a;
    --bsc-star-off: #aeb8c2;
    --bsc-star-hover: #f0b62c;
    --bsc-required-mark: #b91c1c;
}

body.theme_light .bsc-switch {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-border: #c8cdd4;
    --bsc-border-focus: #2b6cb0;
    --bsc-accent: #2b6cb0;
    --bsc-accent-contrast: #ffffff;
    --bsc-disabled: #cbd2d9;
    --bsc-switch-on: #2b6cb0;
    --bsc-switch-on-hover: #1f4e82;
    --bsc-switch-focus: #2b6cb0;
    --bsc-thumb-shadow: 0 1px 2px rgba(27, 31, 35, 0.3);
    --bsc-switch-thumb-bg: #ffffff;
}

body.theme_light .bsc-textarea {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-border: #c8cdd4;
    --bsc-border-focus: #2b6cb0;
    --bsc-accent: #2b6cb0;
    --bsc-danger: #b91c1c;
    --bsc-invalid-border: #d93025;
    --bsc-focus-ring: rgba(43, 108, 176, 0.16);
}

body.theme_light .bsc-textinput {
    --bsc-text: #1f2933;
    --bsc-text-muted: #52606d;
    --bsc-text-faint: #9aa5b1;
    --bsc-bg: #ffffff;
    --bsc-bg-subtle: #f5f6f8;
    --bsc-border: #c8cdd4;
    --bsc-border-focus: #2b6cb0;
    --bsc-border-strong: #c8cdd4;
    --bsc-accent: #2b6cb0;
    --bsc-accent-strong: #1f4e82;
    --bsc-accent-contrast: #ffffff;
    --bsc-hover: #eef2f7;
    --bsc-disabled: #cbd2d9;
    --bsc-invalid-border: #d93025;
    --bsc-invalid-bg: #fff59d;
    --bsc-focus-ring: rgba(43, 108, 176, 0.18);
    --bsc-invalid-ring: rgba(217, 48, 37, 0.16);
    --bsc-popup-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    --bsc-chip-border: #d8dee5;
    --bsc-chip-bg: #eef1f4;
    --bsc-chip-x-bg: #d3dae1;
    --bsc-radio-selected-fg: #1f4e82;
}

/* BlazorCore 内置对话框。亮色取值与 UIDialog*Impl.razor.css 里的内置值
   逐字一致，所以加 theme_light 之后观感零变化。 */
body.theme_light .bsc-uidialog {
    --bsc-uidialog-bg: #ffffff;
    --bsc-uidialog-fg: #1f2933;
    --bsc-uidialog-title-fg: #2b6cb0;
    --bsc-uidialog-sep: #e3e6ea;
    --bsc-uidialog-shadow: #999999;
    --bsc-uidialog-btn-bg: #2b6cb0;
    --bsc-uidialog-btn-bg-hover: #245a94;
    --bsc-uidialog-btn-fg: #ffffff;
    --bsc-uidialog-btn-danger-bg: #b91c1c;
    --bsc-uidialog-btn-danger-bg-hover: #991b1b;
    --bsc-uidialog-btn-secondary-bg: transparent;
    --bsc-uidialog-btn-secondary-bg-hover: #eef2f7;
    --bsc-uidialog-btn-secondary-fg: #1f2933;
    --bsc-uidialog-btn-secondary-border: #c8cdd4;
    --bsc-uidialog-btn-disabled-opacity: 0.45;
}

/* ==========================================================================
   二、暗色（theme_dark）
   --------------------------------------------------------------------------
   几条取值原则（不是随手挑的）：

   · **底色不是纯黑**。纯黑 + 纯白对比过强，长时间看刺眼；
     纯黑上轻微的层级差也看不出来。这里用带一点蓝灰的深色当底，
     --bsc-bg-subtle / --bsc-hover 依次往上抬，形成可辨的层级。

   · **强调色要变浅**。亮色下的 #2b6cb0 在深底上偏暗、边界发糊；
     换成更亮的蓝之后既清楚又保留了"蓝"的识别度。
     连带地，按钮上的文字色从白翻成深色（--bsc-accent-contrast）。

   · **半透明层要加浓**。亮色下的 rgba(...,0.18) 叠在白底上是"一点点灰"，
     同样的 0.18 叠在深底上几乎看不见。聚焦环、错误环一律提到 0.28~0.30。

   · **错误底色不能是浅黄**。#fff59d 在深色里像一块补丁，改成暗红。

   · **阴影改用纯黑半透明**。深底上再用"深灰蓝阴影"是叠不出层次的。
   ========================================================================== */

body.theme_dark .bsc-button {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #171c22;
    --bsc-bg-subtle: #1f252d;
    --bsc-hover: #272e37;
    --bsc-border: #2f3742;
    --bsc-border-strong: #3e4753;
    --bsc-accent: #5ba3f0;
    --bsc-accent-contrast: #0f1419;
    --bsc-danger: #f4756b;
    --bsc-btn-link-fg: #7dbcf7;
}

body.theme_dark .bsc-checkbox {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #171c22;
    --bsc-bg-subtle: #1f252d;
    --bsc-border: #3e4753;
    --bsc-border-focus: #5ba3f0;
    --bsc-accent: #5ba3f0;
    --bsc-accent-contrast: #0f1419;
    --bsc-disabled: #4a5461;
}

body.theme_dark .bsc-collapsepanel {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #171c22;
    --bsc-bg-subtle: #1f252d;
    --bsc-border: #2f3742;
    --bsc-border-strong: #3e4753;
    --bsc-accent: #5ba3f0;
}

body.theme_dark .bsc-contextmenu {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #1f252d;
    --bsc-bg-subtle: #272e37;
    --bsc-border: #3e4753;
    --bsc-border-soft: #2f3742;
    --bsc-hover: #272e37;
    --bsc-accent: #7dbcf7;
    --bsc-disabled: #4a5461;
    --bsc-contextmenu-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

body.theme_dark .bsc-datepicker {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #171c22;
    --bsc-bg-subtle: #1f252d;
    --bsc-border: #3e4753;
    --bsc-border-focus: #5ba3f0;
    --bsc-accent: #5ba3f0;
    --bsc-accent-contrast: #0f1419;
    --bsc-hover: #272e37;
    --bsc-disabled: #4a5461;
    --bsc-invalid-border: #f4756b;
    --bsc-invalid-bg: #33201f;
    --bsc-focus-ring: rgba(91, 163, 240, 0.30);
    --bsc-invalid-ring: rgba(244, 117, 107, 0.28);
    --bsc-popup-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    --bsc-weekday-color: #8b96a3;
    --bsc-calendar-foot-border: #262d35;
}

body.theme_dark .bsc-decimalbox {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #171c22;
    --bsc-bg-subtle: #1f252d;
    --bsc-border: #3e4753;
    --bsc-border-focus: #5ba3f0;
    --bsc-accent: #5ba3f0;
    --bsc-hover: #272e37;
    --bsc-disabled: #4a5461;
    --bsc-invalid-border: #f4756b;
    --bsc-invalid-bg: #33201f;
    --bsc-focus-ring: rgba(91, 163, 240, 0.30);
    --bsc-invalid-ring: rgba(244, 117, 107, 0.28);
}

body.theme_dark .bsc-dropdownmenubutton {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #171c22;
    --bsc-bg-subtle: #1f252d;
    --bsc-border: #3e4753;
    --bsc-border-soft: #2f3742;
    --bsc-accent: #5ba3f0;
    --bsc-hover: #272e37;
    --bsc-disabled: #4a5461;
    --bsc-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    --bsc-focus-ring: rgba(91, 163, 240, 0.32);
}

body.theme_dark .bsc-fieldgroup {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-accent: #5ba3f0;
    --bsc-hover: #272e37;
    --bsc-border: #2f3742;
}

body.theme_dark .bsc-fileicon {
    --bsc-fileicon-page: #1f252d;
    --bsc-fileicon-page-border: #3e4753;
    --bsc-fileicon-fold: #2a313a;
    --bsc-fileicon-band-fg: #ffffff;
    /* 类别色不给暗色值，理由见上面 theme_light 那节。 */
}

body.theme_dark .bsc-listbox {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #171c22;
    --bsc-bg-subtle: #1f252d;
    --bsc-hover: #272e37;
    --bsc-border: #3e4753;
    --bsc-accent: #5ba3f0;
    --bsc-accent-contrast: #0f1419;
    --bsc-accent-soft: #1b2a3c;
    --bsc-danger: #f4756b;
    --bsc-focus-ring: rgba(91, 163, 240, 0.30);
    --bsc-scrollbar-thumb: #3e4753;
    --bsc-selected-fg: #a8d3ff;
    --bsc-selected-bg: #1b2a3c;
    --bsc-selected-fg-hover: #d6eaff;
}

body.theme_dark .bsc-mobilenav {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #171c22;
    --bsc-bg-subtle: #1f252d;
    --bsc-border: #2f3742;
    --bsc-border-strong: #3e4753;
    --bsc-accent: #5ba3f0;
    --bsc-hover: #272e37;
    --bsc-danger: #f4756b;
    --bsc-nav-badge-fg: #ffffff;
}

body.theme_dark .bsc-navmenu-shell {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #1f252d;
    --bsc-bg-subtle: #272e37;
    --bsc-border: #2f3742;
    --bsc-border-strong: #3e4753;
    --bsc-accent: #5ba3f0;
    --bsc-accent-soft: #1b2a3c;
    --bsc-hover: #272e37;
    --bsc-active-bg: #1b2a3c;
    --bsc-active-bar: #5ba3f0;
    --bsc-disabled: #4a5461;
    --bsc-navmenu-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    --bsc-navmenu-dropdown-shadow: 0 8px 16px rgba(0, 0, 0, 0.55);
}

body.theme_dark .bsc-starsselector {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-accent: #5ba3f0;
    --bsc-hover: #272e37;
    --bsc-border: #3e4753;
    /* 金色在深底上照样是金色，不动；熄灭态要压暗才不至于和点亮态抢眼。 */
    --bsc-star-on: #f0b62c;
    --bsc-star-off: #4a5461;
    --bsc-star-hover: #ffd166;
    --bsc-required-mark: #f4756b;
}

body.theme_dark .bsc-switch {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #171c22;
    --bsc-bg-subtle: #1f252d;
    --bsc-border: #3e4753;
    --bsc-border-focus: #5ba3f0;
    --bsc-accent: #5ba3f0;
    --bsc-accent-contrast: #0f1419;
    --bsc-disabled: #4a5461;
    --bsc-switch-on: #5ba3f0;
    --bsc-switch-on-hover: #84c2ff;
    --bsc-switch-focus: #5ba3f0;
    --bsc-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    /* ⚠ 滑块在暗色下**仍然是白色**，这是刻意不变的一条。
       它早先写的是 var(--bsc-bg)：亮色下 --bsc-bg 恰好是白色，所以看不出来；
       暗色下 --bsc-bg 变深，滑块就跟着变深，"配色只改轨道"这个约定直接破了
       （BscSwitchVariantTests.OnlyTheTrackColourChanges_TheThumbStaysWhite 守的正是它）。
       所以这一行两边都写死白色。 */
    --bsc-switch-thumb-bg: #ffffff;
}

body.theme_dark .bsc-textarea {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #171c22;
    --bsc-bg-subtle: #1f252d;
    --bsc-border: #3e4753;
    --bsc-border-focus: #5ba3f0;
    --bsc-accent: #5ba3f0;
    --bsc-danger: #f4756b;
    --bsc-invalid-border: #f4756b;
    --bsc-focus-ring: rgba(91, 163, 240, 0.30);
}

body.theme_dark .bsc-textinput {
    --bsc-text: #e4e9ef;
    --bsc-text-muted: #a5b0bd;
    --bsc-text-faint: #6e7986;
    --bsc-bg: #171c22;
    --bsc-bg-subtle: #1f252d;
    --bsc-border: #3e4753;
    --bsc-border-focus: #5ba3f0;
    --bsc-border-strong: #454f5b;
    --bsc-accent: #5ba3f0;
    --bsc-accent-strong: #84c2ff;
    --bsc-accent-contrast: #0f1419;
    --bsc-hover: #272e37;
    --bsc-disabled: #4a5461;
    --bsc-invalid-border: #f4756b;
    --bsc-invalid-bg: #33201f;
    --bsc-focus-ring: rgba(91, 163, 240, 0.30);
    --bsc-invalid-ring: rgba(244, 117, 107, 0.28);
    --bsc-popup-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    --bsc-chip-border: #39424e;
    --bsc-chip-bg: #242b34;
    --bsc-chip-x-bg: #313a45;
    --bsc-radio-selected-fg: #84c2ff;
}

/* BlazorCore 内置对话框的暗色档。
   面板原本写死 background-color:white、阴影写死 #999 —— 暗色下会是一块
   刺眼的白板配一圈灰影，比"没做暗色"更糟。这里整块换掉。 */
body.theme_dark .bsc-uidialog {
    --bsc-uidialog-bg: #1f252d;
    --bsc-uidialog-fg: #e4e9ef;
    --bsc-uidialog-title-fg: #84c2ff;
    --bsc-uidialog-sep: #3e4753;
    --bsc-uidialog-shadow: #000000;
    --bsc-uidialog-btn-bg: #2f6fb5;
    --bsc-uidialog-btn-bg-hover: #3d84cf;
    --bsc-uidialog-btn-fg: #ffffff;
    --bsc-uidialog-btn-danger-bg: #c53030;
    --bsc-uidialog-btn-danger-bg-hover: #e04a4a;
    --bsc-uidialog-btn-secondary-bg: transparent;
    --bsc-uidialog-btn-secondary-bg-hover: #2b333d;
    --bsc-uidialog-btn-secondary-fg: #e4e9ef;
    --bsc-uidialog-btn-secondary-border: #4a5561;
    --bsc-uidialog-btn-disabled-opacity: 0.5;
}

/* ==========================================================================
   三、变体档
   --------------------------------------------------------------------------
   上面两节只覆盖调色板。派生令牌（按钮底色、开关点亮色、角标底色……）
   在控件样式表里是由变体类直接写死字面量的，改调色板影响不到它们，
   所以必须逐档给值。

   ⚠ 这里绝不能图省事写成一个合并选择器
     （body.theme_dark .bsc-button--success,
       body.theme_dark .bsc-button--warning { --bsc-btn-bg: X }）——
     那样三个档会拿到同一个颜色，success / warning / danger 就不分开了。
   ========================================================================== */

/* ---------- BscButton 七个风格 ---------- */

body.theme_dark .bsc-button--primary {
    --bsc-btn-bg-hover: #84c2ff;
    --bsc-btn-ring: #84c2ff;
}

body.theme_dark .bsc-button--secondary {
    --bsc-btn-link-fg: #e4e9ef;
}

body.theme_dark .bsc-button--success {
    --bsc-btn-bg: #177245;
    --bsc-btn-border: #177245;
    --bsc-btn-bg-hover: #1e8a52;
    --bsc-btn-fg: #ffffff;
    --bsc-btn-link-fg: #4ade80;
    --bsc-btn-ring: #6ee7a8;
}

body.theme_dark .bsc-button--warning {
    --bsc-btn-bg: #b45309;
    --bsc-btn-border: #b45309;
    --bsc-btn-bg-hover: #d97706;
    --bsc-btn-fg: #ffffff;
    --bsc-btn-link-fg: #fbbf24;
    --bsc-btn-ring: #fcd34d;
}

body.theme_dark .bsc-button--danger {
    --bsc-btn-bg: #b91c1c;
    --bsc-btn-bg-hover: #dc2626;
    --bsc-btn-fg: #ffffff;
    --bsc-btn-link-fg: #fca5a5;
    --bsc-btn-ring: #fca5a5;
}

/* Ghost / Link 没有底色，文字色就是它的全部可读性，必须给深底可读的亮色。 */
body.theme_dark .bsc-button--ghost {
    --bsc-btn-link-fg: #7dbcf7;
}

body.theme_dark .bsc-button--link {
    --bsc-btn-link-fg: #7dbcf7;
}

/* ---------- BscSwitch 五档配色 ----------
   滑块恒为白色，所以点亮色不能太亮，否则滑块会和轨道糊在一起。 */

body.theme_dark .bsc-switch--primary {
    --bsc-switch-on: #5ba3f0;
    --bsc-switch-on-hover: #84c2ff;
    --bsc-switch-focus: #5ba3f0;
}

body.theme_dark .bsc-switch--success {
    --bsc-switch-on: #22c55e;
    --bsc-switch-on-hover: #4ade80;
    --bsc-switch-focus: #22c55e;
}

body.theme_dark .bsc-switch--warning {
    --bsc-switch-on: #f59e0b;
    --bsc-switch-on-hover: #fbbf24;
    --bsc-switch-focus: #f59e0b;
}

body.theme_dark .bsc-switch--danger {
    --bsc-switch-on: #ef4444;
    --bsc-switch-on-hover: #f87171;
    --bsc-switch-focus: #ef4444;
}

body.theme_dark .bsc-switch--neutral {
    --bsc-switch-on: #6e7986;
    --bsc-switch-on-hover: #8b96a3;
    --bsc-switch-focus: #6e7986;
}

/* ---------- BscIcon 角标五档 ----------
   角标底色上压的是白字，所以要比亮色档压深一档才够对比。 */

body.theme_dark .bsc-icon__badge {
    --bsc-icon-badge-bg: #dc2626;
    --bsc-icon-badge-fg: #ffffff;
}

body.theme_dark .bsc-icon__badge--warning {
    --bsc-icon-badge-bg: #b45309;
}

body.theme_dark .bsc-icon__badge--success {
    --bsc-icon-badge-bg: #15803d;
}

body.theme_dark .bsc-icon__badge--info {
    --bsc-icon-badge-bg: #1d4ed8;
}

body.theme_dark .bsc-icon__badge--neutral {
    --bsc-icon-badge-bg: #4b5563;
}