/* ============================================================
   MirageTool · 微软风（WinUI 3）皮肤
   令牌与控件规格 1:1 取自 WinUIonWeb 官方实现：
   https://github.com/Furry-Xiyi/WinUIonWeb
   (src/styles/theme.css + src/components/Win*.vue)
   ============================================================ */

/* ============================================================
   1. 设计令牌（Design Tokens · 官方 theme.css 1:1）
   ============================================================ */
html.skin-microsoft {
  color-scheme: light;

  /* 动效（官方：83ms / 167ms / cubic-bezier(0,0,0,1)） */
  --winui-duration-faster: 83ms;
  --winui-duration-fast: 167ms;
  --winui-ease: cubic-bezier(0, 0, 0, 1);

  /* 表面 */
  --winui-app-bg: #F3F3F3;
  --winui-dialog-bg: #FCFCFC;
  --winui-flyout-bg: rgba(252, 252, 252, 0.92);
  --winui-flyout-border: rgba(0, 0, 0, 0.06);
  --winui-flyout-backdrop: blur(30px) saturate(160%) brightness(1.02);
  --winui-card-bg: rgba(255, 255, 255, 0.70);
  --winui-card-stroke: rgba(0, 0, 0, 0.06);

  /* 控件描边（按钮：普通边 0.06 / 底部强边 0.16） */
  --winui-ctrl-border: rgba(0, 0, 0, 0.06);
  --winui-ctrl-border-accent: rgba(0, 0, 0, 0.16);
  /* 标准 Button 三向描边（官方 DefaultButtonStyle：
     亮色 左/右/顶 = 普通边，底 = 强边） */
  --winui-btn-top-border: rgba(0, 0, 0, 0.06);
  --winui-btn-bottom-border: rgba(0, 0, 0, 0.16);

  /* 文本 */
  --winui-text-1: rgba(0, 0, 0, 0.89);
  --winui-text-2: rgba(0, 0, 0, 0.62);
  --winui-text-3: rgba(0, 0, 0, 0.45);
  --winui-text-disabled: rgba(0, 0, 0, 0.36);

  /* 微妙填充（Subtle） */
  --winui-subtle-2: rgba(0, 0, 0, 0.0373);
  --winui-subtle-3: rgba(0, 0, 0, 0.0241);
  --winui-subtle-pressed: rgba(0, 0, 0, 0.06);

  /* 控件填充（Rest→Hover→Pressed/Disabled） */
  --winui-fill-1: rgba(255, 255, 255, 0.70);
  --winui-fill-2: rgba(249, 249, 249, 0.50);
  --winui-fill-3: rgba(249, 249, 249, 0.30);
  --winui-fill-input-active: #FFFFFF;

  /* 强填充/强描边（滑块轨道、文本框底边、复选框描边） */
  --winui-strong-fill: rgba(0, 0, 0, 0.45);
  --winui-strong-stroke: rgba(0, 0, 0, 0.45);
  --winui-strong-stroke-disabled: rgba(0, 0, 0, 0.22);
  --winui-solid-fill: #FFFFFF;

  /* 强调色（Accent） */
  --winui-accent: #0067C0;
  --winui-accent-hover: rgba(0, 103, 192, 0.90);
  --winui-accent-pressed: rgba(0, 103, 192, 0.80);
  --winui-accent-fill-disabled: rgba(0, 0, 0, 0.22);
  --winui-accent-text: #FFFFFF;
  --winui-accent-text-2: rgba(255, 255, 255, 0.70);
  --winui-link: #0D4897;
  --winui-accent-border: rgba(255, 255, 255, 0.08);
  --winui-accent-border-accent: rgba(0, 0, 0, 0.40);

  /* 开关（ToggleSwitch） */
  --winui-toggle-border: rgba(0, 0, 0, 0.45);
  --winui-toggle-thumb: rgba(0, 0, 0, 0.61);
  --winui-toggle-thumb-hover: rgba(0, 0, 0, 0.89);
  --winui-toggle-on-thumb: #FFFFFF;

  /* 系统语义色（InfoBar） */
  --winui-success: #0F7B0F;
  --winui-success-bg: #DFF6DD;
  --winui-caution: #9D5D00;
  --winui-caution-bg: #FFF4CE;
  --winui-critical: #C42B1C;
  --winui-critical-bg: #FDE7E9;
  --winui-critical-text: #FFFFFF;
  --winui-divider: rgba(0, 0, 0, 0.06);
  --winui-overlay: rgba(0, 0, 0, 0.30);
}

html.skin-microsoft.microsoft-dark {
  color-scheme: dark;

  --winui-app-bg: #202020;
  --winui-dialog-bg: #2C2C2C;
  --winui-flyout-bg: rgba(44, 44, 44, 0.86);
  --winui-flyout-border: rgba(255, 255, 255, 0.10);
  --winui-flyout-backdrop: blur(44px) saturate(190%) brightness(1.22) contrast(1.05);
  --winui-card-bg: rgba(255, 255, 255, 0.0512);
  --winui-card-stroke: rgba(0, 0, 0, 0.10);

  /* 暗色下按钮边框强弱反转：顶部强、底部弱（官方规则） */
  --winui-ctrl-border: rgba(255, 255, 255, 0.0706);
  --winui-ctrl-border-accent: rgba(255, 255, 255, 0.0941);
  /* 标准 Button 三向描边（官方 DefaultButtonStyle 暗色：
     顶 = 强边 0.0941，底 = 强边 0.0941，左/右 = 普通边 0.0706） */
  --winui-btn-top-border: rgba(255, 255, 255, 0.0941);
  --winui-btn-bottom-border: rgba(255, 255, 255, 0.0941);

  --winui-text-1: #FFFFFF;
  --winui-text-2: rgba(255, 255, 255, 0.77);
  --winui-text-3: rgba(255, 255, 255, 0.53);
  --winui-text-disabled: rgba(255, 255, 255, 0.36);

  --winui-subtle-2: rgba(255, 255, 255, 0.0605);
  --winui-subtle-3: rgba(255, 255, 255, 0.0419);
  --winui-subtle-pressed: rgba(255, 255, 255, 0.03);

  --winui-fill-1: rgba(255, 255, 255, 0.0605);
  --winui-fill-2: rgba(255, 255, 255, 0.0837);
  --winui-fill-3: rgba(255, 255, 255, 0.0326);
  --winui-fill-input-active: rgba(30, 30, 30, 0.70);

  --winui-strong-fill: rgba(255, 255, 255, 0.54);
  --winui-strong-stroke: rgba(255, 255, 255, 0.54);
  --winui-strong-stroke-disabled: rgba(255, 255, 255, 0.16);
  --winui-solid-fill: #454545;

  /* 暗色 Accent 文字为黑色（官方规则） */
  --winui-accent: #4CC2FF;
  --winui-accent-hover: rgba(96, 205, 255, 0.90);
  --winui-accent-pressed: rgba(96, 205, 255, 0.80);
  --winui-accent-fill-disabled: rgba(255, 255, 255, 0.16);
  --winui-accent-text: #000000;
  --winui-accent-text-2: rgba(0, 0, 0, 0.50);
  --winui-link: #99EBFF;
  --winui-accent-border: rgba(0, 0, 0, 0.1373);
  --winui-accent-border-accent: rgba(255, 255, 255, 0.0784);

  --winui-toggle-border: rgba(255, 255, 255, 0.54);
  --winui-toggle-thumb: rgba(255, 255, 255, 0.79);
  --winui-toggle-thumb-hover: #FFFFFF;
  --winui-toggle-on-thumb: #000000;

  --winui-success: #6CCB5F;
  --winui-success-bg: #393D1B;
  --winui-caution: #FCE100;
  --winui-caution-bg: #433519;
  --winui-critical: #FF99A4;
  --winui-critical-bg: #442726;
  --winui-critical-text: #000000;
  --winui-divider: rgba(255, 255, 255, 0.08);
  --winui-overlay: rgba(0, 0, 0, 0.30);
}

/* ============================================================
   2. 页面变量桥接（关键）
   工具页在 :root / html.dark 中定义自有变量，但微软风下
   'dark' 类不生效，因此必须在此将全部页面变量重映射为
   WinUI 令牌 —— 使页面局部样式（stat-item、option-chip 等）
   在微软风亮/暗两种模式下都获得正确的 WinUI 外观。
   本文件在页面样式之后加载，同特异性下后者胜出。
   ============================================================ */
html.skin-microsoft {
  --bg-main: #F3F3F3;                                   /* SolidBackgroundFillColorBase */
  --bg-surface: rgba(246, 246, 246, 0.50);              /* CardBackgroundFillColorSecondary */
  --card-bg: rgba(255, 255, 255, 0.70);                 /* CardBackgroundFillColorDefault */
  --card-border: rgba(0, 0, 0, 0.06);                   /* CardStrokeColorDefault */
  --text-primary: rgba(0, 0, 0, 0.89);                  /* TextFillColorPrimary */
  --text-secondary: rgba(0, 0, 0, 0.62);                /* TextFillColorSecondary */
  --color-primary: #0067C0;                             /* AccentFillColorDefault */
  --color-primary-soft: rgba(0, 103, 192, 0.12);
  --color-danger: #C42B1C;                              /* SystemFillColorCritical */
  --radius: 4px;                                        /* ControlCornerRadius */
  --radius-sm: 4px;
  --font-sans: 'Segoe UI Variable', 'Segoe UI', 'Microsoft YaHei UI', system-ui, sans-serif;
  --font-mono: 'Cascadia Code', 'Cascadia Mono', Consolas, ui-monospace, monospace;
}

html.skin-microsoft.microsoft-dark {
  --bg-main: #202020;
  --bg-surface: rgba(255, 255, 255, 0.0326);            /* CardBackgroundFillColorSecondary */
  --card-bg: rgba(255, 255, 255, 0.0512);               /* CardBackgroundFillColorDefault */
  --card-border: rgba(0, 0, 0, 0.10);                   /* CardStrokeColorDefault */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.77);
  --color-primary: #4CC2FF;                             /* AccentFillColorDefault */
  --color-primary-soft: rgba(76, 194, 255, 0.15);
  --color-danger: #FF99A4;                              /* SystemFillColorCritical */
}

/* ============================================================
   3. 页面基底
   ============================================================ */
html.skin-microsoft body {
  background-color: var(--winui-app-bg);
  color: var(--winui-text-1);
}

html.skin-microsoft ::selection {
  background-color: var(--winui-accent);
  color: var(--winui-accent-text);
}

/* 滚动条（WinUI：透明轨道 + 强填充滑块） */
html.skin-microsoft ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html.skin-microsoft ::-webkit-scrollbar-track {
  background: transparent;
}

html.skin-microsoft ::-webkit-scrollbar-thumb {
  background: var(--winui-strong-fill);
  border: 4px solid transparent;
  border-radius: 6px;
  background-clip: padding-box;
}

html.skin-microsoft ::-webkit-scrollbar-thumb:hover {
  background: var(--winui-text-2);
  border: 4px solid transparent;
  background-clip: padding-box;
}

html.skin-microsoft ::-webkit-scrollbar-corner {
  background: transparent;
}

/* ============================================================
   4. 焦点视觉（WinUI 焦点矩形：2px 主文本色 + 2px 偏移）
   ============================================================ */
html.skin-microsoft body button:focus-visible,
html.skin-microsoft body select:focus-visible,
html.skin-microsoft body a:focus-visible,
html.skin-microsoft body input[type='checkbox']:focus-visible,
html.skin-microsoft body input[type='radio']:focus-visible,
html.skin-microsoft body [tabindex]:focus-visible {
  outline: 2px solid var(--winui-text-1);
  outline-offset: 2px;
}

/* ============================================================
   5. 标准 Button（WinButton · DefaultButtonStyle）
   Rest   : fill-1 / 亮色=左右上普通边+底部强边；暗色=顶底强边+左右普通边
   Hover  : fill-2 + 描边与 Rest 相同（无蓝色描边）
   Pressed: fill-3 + 文本 secondary + 四边统一普通边
   ============================================================ */
html.skin-microsoft body button,
html.skin-microsoft body input[type='button'],
html.skin-microsoft body input[type='submit'],
html.skin-microsoft body input[type='reset'] {
  position: relative;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: normal;
  min-height: 32px;
  padding: 5px 11px 6px;
  border-radius: 4px;
  /* 三向描边由令牌变量驱动（亮色底强边 / 暗色顶底强边），
     不再用 .microsoft-dark 高特异性规则——该规则曾压过
     subtle 按钮的透明边框，导致暗色下顶栏图标按钮只显示
     上下边框、左右缺失（边框不全） */
  border: 1px solid var(--winui-ctrl-border);
  border-top-color: var(--winui-btn-top-border);
  border-bottom-color: var(--winui-btn-bottom-border);
  background-color: var(--winui-fill-1);
  color: var(--winui-text-1);
  cursor: pointer;
  transition:
    background-color var(--winui-duration-fast) var(--winui-ease),
    color var(--winui-duration-fast) var(--winui-ease);
}

html.skin-microsoft body button:hover,
html.skin-microsoft body input[type='button']:hover,
html.skin-microsoft body input[type='submit']:hover,
html.skin-microsoft body input[type='reset']:hover {
  background-color: var(--winui-fill-2);
  color: var(--winui-text-1);
  /* 官方 hover 保持与 Rest 相同的描边；显式声明以拦截
     页面原生 hover 的蓝色描边（border-color: --color-primary） */
  border-color: var(--winui-ctrl-border);
  border-top-color: var(--winui-btn-top-border);
  border-bottom-color: var(--winui-btn-bottom-border);
}

/* 按下：四边统一普通边（强底边消失）+ 次级文本色 */
html.skin-microsoft body button:active,
html.skin-microsoft body input[type='button']:active,
html.skin-microsoft body input[type='submit']:active,
html.skin-microsoft body input[type='reset']:active {
  background-color: var(--winui-fill-3);
  color: var(--winui-text-2);
  border-color: var(--winui-ctrl-border);
}

html.skin-microsoft body button:disabled,
html.skin-microsoft body input[type='button']:disabled,
html.skin-microsoft body input[type='submit']:disabled,
html.skin-microsoft body input[type='reset']:disabled {
  background-color: var(--winui-fill-3);
  color: var(--winui-text-disabled);
  border-color: var(--winui-ctrl-border);
  cursor: default;
}

/* WinUI 按钮悬停不做位移/缩放动效 */
html.skin-microsoft body button {
  transform: none;
}

/* ============================================================
   6. AccentButton（AccentButtonStyle）
   页面中的 .btn.primary / .btn-primary / .mode-btn.active /
   .option-chip.active 均为强调按钮；skin-loader 也会给
   主色背景按钮打 .ms-accent 标记。此处按官方规格统一：
   Rest 填充 accent / Hover 90% / Pressed 80% + 次级文本 /
   按下与禁用边框透明（官方规则）。
   注意：暗色下强调按钮文字为黑色（accent-text）。
   ============================================================ */
html.skin-microsoft body button.ms-accent,
html.skin-microsoft body input[type='button'].ms-accent,
html.skin-microsoft body input[type='submit'].ms-accent,
html.skin-microsoft body .btn.primary,
html.skin-microsoft body .btn-primary,
html.skin-microsoft body button.primary {
  background-color: var(--winui-accent);
  color: var(--winui-accent-text);
  border: 1px solid var(--winui-accent-border);
  border-bottom-color: var(--winui-accent-border-accent);
}

html.skin-microsoft.microsoft-dark body button.ms-accent,
html.skin-microsoft.microsoft-dark body input[type='button'].ms-accent,
html.skin-microsoft.microsoft-dark body input[type='submit'].ms-accent,
html.skin-microsoft.microsoft-dark body .btn.primary,
html.skin-microsoft.microsoft-dark body .btn-primary,
html.skin-microsoft.microsoft-dark body button.primary {
  border-top-color: var(--winui-accent-border-accent);
  border-bottom-color: var(--winui-accent-border);
}

html.skin-microsoft body button.ms-accent:hover,
html.skin-microsoft body input[type='button'].ms-accent:hover,
html.skin-microsoft body input[type='submit'].ms-accent:hover,
html.skin-microsoft body .btn.primary:hover,
html.skin-microsoft body .btn-primary:hover,
html.skin-microsoft body button.primary:hover {
  background-color: var(--winui-accent-hover);
  color: var(--winui-accent-text);
  filter: none;
}

html.skin-microsoft body button.ms-accent:active,
html.skin-microsoft body input[type='button'].ms-accent:active,
html.skin-microsoft body input[type='submit'].ms-accent:active,
html.skin-microsoft body .btn.primary:active,
html.skin-microsoft body .btn-primary:active,
html.skin-microsoft body button.primary:active {
  background-color: var(--winui-accent-pressed);
  color: var(--winui-accent-text-2);
  border-color: transparent;
  filter: none;
}

html.skin-microsoft body button.ms-accent:disabled,
html.skin-microsoft body input[type='button'].ms-accent:disabled,
html.skin-microsoft body input[type='submit'].ms-accent:disabled,
html.skin-microsoft body .btn.primary:disabled,
html.skin-microsoft body .btn-primary:disabled,
html.skin-microsoft body button.primary:disabled {
  background-color: var(--winui-accent-fill-disabled);
  color: var(--winui-text-disabled);
  border-color: transparent;
  filter: none;
}

/* 危险按钮（Critical）：文字色 + 悬停描边 */
html.skin-microsoft body button.ms-danger,
html.skin-microsoft body .btn.danger,
html.skin-microsoft body .btn-danger {
  background-color: var(--winui-critical);
  color: var(--winui-critical-text);
  border-color: transparent;
}

html.skin-microsoft body button.ms-danger:hover,
html.skin-microsoft body .btn.danger:hover,
html.skin-microsoft body .btn-danger:hover {
  background-color: var(--winui-critical);
  filter: brightness(1.1);
}

html.skin-microsoft body button.ms-danger:active,
html.skin-microsoft body .btn.danger:active,
html.skin-microsoft body .btn-danger:active {
  filter: brightness(0.92);
}

/* 仅文字着色的危险按钮（页面 .btn-danger 只改 color） */
html.skin-microsoft body .btn.danger:not(.ms-danger):not([style*="background"]),
html.skin-microsoft body button.danger:not(.ms-danger) {
  background-color: var(--winui-fill-1);
  color: var(--winui-critical);
  border: 1px solid var(--winui-ctrl-border);
  border-bottom-color: var(--winui-ctrl-border-accent);
}

/* ============================================================
   7. 顶栏按钮 = 标准 XAML Button（DefaultButtonStyle）
   主题/皮肤/赞助/返回 按钮走通用 button 规则（fill-1 底 +
   完整三向描边），此处仅修正图标按钮几何与动效
   ============================================================ */
/* 纯图标按钮（40×40 居中）：去掉文字按钮内边距，
   并拦截页面原生 hover 的旋转/缩放动效 */
html.skin-microsoft body .theme-toggle,
html.skin-microsoft body .skin-btn,
html.skin-microsoft body .sponsor-btn,
html.skin-microsoft body .search-btn {
  padding: 0;
  transform: none;
  /* specificity (0,2,2) 同时压过页面 .skin-btn:hover 的
     transform: rotate(-12deg) scale(1.05) (0,2,0) */
}

/* ============================================================
   7b. Subtle 图标按钮（弹窗关闭 + 搜索清除）
   透明背景无边框，Hover → subtle-2
   ============================================================ */
html.skin-microsoft body .sponsor-close,
html.skin-microsoft body .search-clear,
html.skin-microsoft body .skin-close {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--winui-text-1);
  min-height: 32px;
  border-radius: 4px;
  transition:
    background-color var(--winui-duration-fast) var(--winui-ease),
    color var(--winui-duration-fast) var(--winui-ease);
}

html.skin-microsoft body .sponsor-close:hover,
html.skin-microsoft body .search-clear:hover,
html.skin-microsoft body .skin-close:hover {
  background-color: var(--winui-subtle-2);
  border-color: transparent;
  color: var(--winui-text-1);
  transform: none;
}

html.skin-microsoft body .sponsor-close:active,
html.skin-microsoft body .search-clear:active,
html.skin-microsoft body .skin-close:active {
  background-color: var(--winui-subtle-3);
  color: var(--winui-text-2);
}

/* ============================================================
   8. TextBox（文本框 · 官方 WinTextBox）
   底边为强描边(0.45)；聚焦：底边 2px Accent 下划线 + 输入激活底色
   ============================================================ */
html.skin-microsoft body input[type='text'],
html.skin-microsoft body input[type='password'],
html.skin-microsoft body input[type='number'],
html.skin-microsoft body input[type='search'],
html.skin-microsoft body input[type='tel'],
html.skin-microsoft body input[type='url'],
html.skin-microsoft body input[type='email'],
html.skin-microsoft body input[type='date'],
html.skin-microsoft body input[type='time'],
html.skin-microsoft body input[type='datetime-local'],
html.skin-microsoft body input[type='month'],
html.skin-microsoft body input:not([type]),
html.skin-microsoft body textarea {
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  min-height: 32px;
  padding: 5px 10px 6px;
  border-radius: 4px;
  border: 1px solid var(--winui-ctrl-border);
  border-bottom-color: var(--winui-strong-stroke);
  background-color: var(--winui-fill-1);
  color: var(--winui-text-1);
  outline: none;
  transition:
    background-color var(--winui-duration-fast) var(--winui-ease),
    border-color var(--winui-duration-fast) var(--winui-ease);
}

html.skin-microsoft body textarea {
  min-height: 76px;
  padding: 6px 10px;
  resize: vertical;
}

html.skin-microsoft body input:hover:not(:focus):not(:disabled),
html.skin-microsoft body textarea:hover:not(:focus):not(:disabled) {
  background-color: var(--winui-fill-2);
}

/* 聚焦：底部 2px Accent 下划线（边框 + 内阴影叠加，无布局跳动） */
html.skin-microsoft body input:focus,
html.skin-microsoft body textarea:focus {
  background-color: var(--winui-fill-input-active);
  border-color: var(--winui-ctrl-border);
  border-bottom-color: var(--winui-accent);
  box-shadow: inset 0 -1px 0 0 var(--winui-accent);
  outline: none;
}

html.skin-microsoft body input::placeholder,
html.skin-microsoft body textarea::placeholder {
  color: var(--winui-text-2);
  opacity: 1;
}

html.skin-microsoft body input:disabled,
html.skin-microsoft body textarea:disabled {
  background-color: var(--winui-fill-3);
  color: var(--winui-text-disabled);
  border-color: var(--winui-ctrl-border);
  border-bottom-color: var(--winui-strong-stroke-disabled);
  cursor: default;
}

html.skin-microsoft body input:read-only:not(:focus) {
  background-color: var(--winui-fill-3);
}

/* 数字输入框：隐藏原生微调箭头（WinUI NumberBox 无原生箭头） */
html.skin-microsoft body input[type='number']::-webkit-outer-spin-button,
html.skin-microsoft body input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

html.skin-microsoft body input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* 颜色选择器：WinUI 色块外观 */
html.skin-microsoft body input[type='color'] {
  box-sizing: border-box;
  height: 32px;
  padding: 3px;
  border: 1px solid var(--winui-ctrl-border);
  border-bottom-color: var(--winui-ctrl-border-accent);
  border-radius: 4px;
  background-color: var(--winui-fill-1);
  cursor: pointer;
}

html.skin-microsoft body input[type='color']:hover {
  background-color: var(--winui-fill-2);
}

/* 文件选择 */
html.skin-microsoft body input[type='file'] {
  color: var(--winui-text-2);
  font-size: 13px;
}

/* ============================================================
   9. ComboBox（下拉框）
   按钮外观 + Chevron 箭头 + 聚焦 Accent 底边
   ============================================================ */
html.skin-microsoft body select {
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-sans);
  font-size: 14px;
  min-height: 32px;
  padding: 5px 30px 6px 11px;
  border-radius: 4px;
  border: 1px solid var(--winui-ctrl-border);
  border-bottom-color: var(--winui-ctrl-border-accent);
  background-color: var(--winui-fill-1);
  color: var(--winui-text-1);
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--winui-duration-fast) var(--winui-ease),
    border-color var(--winui-duration-fast) var(--winui-ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.098 4.598'%3E%3Cpath fill='black' fill-opacity='0.62' d='M.195.195C.39 0 .708 0 .903.195L4.049 3.342 7.195.195C7.39 0 7.708 0 7.903.195C8.098.39 8.098.708 7.903.903L4.403 4.403C4.208 4.598 3.89 4.598 3.695 4.403L.195.903C0 .708 0 .39 .195.195Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px;
}

html.skin-microsoft.microsoft-dark body select {
  border-top-color: var(--winui-ctrl-border-accent);
  border-bottom-color: var(--winui-ctrl-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.098 4.598'%3E%3Cpath fill='white' fill-opacity='0.77' d='M.195.195C.39 0 .708 0 .903.195L4.049 3.342 7.195.195C7.39 0 7.708 0 7.903.195C8.098.39 8.098.708 7.903.903L4.403 4.403C4.208 4.598 3.89 4.598 3.695 4.403L.195.903C0 .708 0 .39 .195.195Z'/%3E%3C/svg%3E");
}

html.skin-microsoft body select:hover {
  background-color: var(--winui-fill-2);
}

html.skin-microsoft body select:focus {
  background-color: var(--winui-fill-input-active);
  border-color: var(--winui-ctrl-border);
  border-bottom-color: var(--winui-accent);
  box-shadow: inset 0 -1px 0 0 var(--winui-accent);
}

html.skin-microsoft body select:disabled {
  background-color: var(--winui-fill-3);
  color: var(--winui-text-disabled);
  border-color: var(--winui-ctrl-border);
  cursor: default;
}

/* 下拉列表项（Chromium 可渲染） */
html.skin-microsoft body select option {
  background-color: var(--winui-dialog-bg);
  color: var(--winui-text-1);
}

html.skin-microsoft body select option:checked {
  background-color: var(--winui-subtle-2);
  color: var(--winui-text-1);
}

/* ============================================================
   10. CheckBox（复选框 · 官方 WinCheckBox）
   20px 方块 / 4px 圆角 / 强描边 / 选中 Accent 底 + 对勾
   按下态：对勾次级色（accent-text-secondary，官方规则）
   ============================================================ */
html.skin-microsoft body input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex: none;
  margin: 0;
  vertical-align: -4px;
  border: 1px solid var(--winui-strong-stroke);
  border-radius: 4px;
  background-color: var(--winui-fill-1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--winui-duration-fast) var(--winui-ease),
    border-color var(--winui-duration-fast) var(--winui-ease);
}

html.skin-microsoft body input[type='checkbox']:hover {
  background-color: var(--winui-fill-2);
  border-color: var(--winui-strong-stroke);
}

html.skin-microsoft body input[type='checkbox']:active {
  background-color: var(--winui-fill-3);
  border-color: var(--winui-strong-stroke-disabled);
}

html.skin-microsoft body input[type='checkbox']:checked,
html.skin-microsoft body input[type='checkbox']:indeterminate {
  background-color: var(--winui-accent);
  border-color: var(--winui-accent);
}

html.skin-microsoft body input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html.skin-microsoft.microsoft-dark body input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 按下态对勾：次级强调文本色（亮色白 70% / 暗色黑 50%） */
html.skin-microsoft body input[type='checkbox']:checked:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-opacity='0.7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html.skin-microsoft.microsoft-dark body input[type='checkbox']:checked:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-opacity='0.5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html.skin-microsoft body input[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

html.skin-microsoft.microsoft-dark body input[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

html.skin-microsoft body input[type='checkbox']:indeterminate:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='white' stroke-opacity='0.7' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

html.skin-microsoft.microsoft-dark body input[type='checkbox']:indeterminate:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='black' stroke-opacity='0.5' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

html.skin-microsoft body input[type='checkbox']:checked:hover,
html.skin-microsoft body input[type='checkbox']:indeterminate:hover {
  background-color: var(--winui-accent-hover);
  border-color: var(--winui-accent-hover);
}

html.skin-microsoft body input[type='checkbox']:checked:active,
html.skin-microsoft body input[type='checkbox']:indeterminate:active {
  background-color: var(--winui-accent-pressed);
  border-color: var(--winui-accent-pressed);
}

html.skin-microsoft body input[type='checkbox']:disabled {
  background-color: var(--winui-fill-3);
  border-color: var(--winui-strong-stroke-disabled);
  cursor: default;
}

html.skin-microsoft body input[type='checkbox']:disabled:checked,
html.skin-microsoft body input[type='checkbox']:disabled:indeterminate {
  background-color: var(--winui-accent-fill-disabled);
  border-color: var(--winui-accent-fill-disabled);
}

/* ============================================================
   11. RadioButton（单选按钮 · 官方 WinRadioButton）
   20px 圆环 / 选中 Accent 实底 + 圆点（悬停放大 / 按下缩小）
   ============================================================ */
html.skin-microsoft body input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex: none;
  margin: 0;
  vertical-align: -4px;
  border: 1px solid var(--winui-strong-stroke);
  border-radius: 50%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--winui-duration-fast) var(--winui-ease),
    border-color var(--winui-duration-fast) var(--winui-ease);
}

html.skin-microsoft body input[type='radio']:hover {
  border-color: var(--winui-text-1);
  background-color: var(--winui-subtle-2);
}

html.skin-microsoft body input[type='radio']:active {
  border-color: var(--winui-text-2);
  background-color: var(--winui-subtle-3);
}

html.skin-microsoft body input[type='radio']:checked {
  border-color: var(--winui-accent);
  background-color: var(--winui-accent);
  /* 官方：内嵌 10px 圆点（win-radio-check） */
  background-image: radial-gradient(circle at 50% 50%,
    var(--winui-accent-text) 0, var(--winui-accent-text) 5px, transparent 5.5px);
}

html.skin-microsoft body input[type='radio']:checked:hover {
  border-color: var(--winui-accent-hover);
  background-color: var(--winui-accent-hover);
  /* 官方：悬停时圆点放大至 1.2（10px → 12px） */
  background-image: radial-gradient(circle at 50% 50%,
    var(--winui-accent-text) 0, var(--winui-accent-text) 6px, transparent 6.5px);
}

html.skin-microsoft body input[type='radio']:checked:active {
  border-color: var(--winui-accent-pressed);
  background-color: var(--winui-accent-pressed);
  /* 官方：按下时圆点缩小至 0.8（10px → 8px） */
  background-image: radial-gradient(circle at 50% 50%,
    var(--winui-accent-text) 0, var(--winui-accent-text) 4px, transparent 4.5px);
}

html.skin-microsoft body input[type='radio']:disabled {
  border-color: var(--winui-strong-stroke-disabled);
  background-color: transparent;
  background-image: none;
  cursor: default;
}

/* 官方：禁用选中态圆点保持 accent-text（白/黑） */
html.skin-microsoft body input[type='radio']:disabled:checked {
  background-color: var(--winui-strong-stroke-disabled);
  background-image: radial-gradient(circle at 50% 50%,
    var(--winui-accent-text) 0, var(--winui-accent-text) 5px, transparent 5.5px);
}

/* ============================================================
   12. Slider（滑块 · 官方 WinSlider）
   轨道 4px 强填充 / 填充 Accent / 22px 实底拇指 + 内嵌 12px
   Accent 圆点（Rest scale .86 / Hover 1.167 / Pressed .71）
   拇指描边同按钮规则 + 投影 0 1px 3px rgba(0,0,0,.08)
   --winui-fill 由 skin-loader.js 同步（WebKit 轨道填充）
   ============================================================ */
html.skin-microsoft body input[type='range'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 24px;
  background: transparent;
  cursor: pointer;
  outline: none;
}

html.skin-microsoft body input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--winui-accent) var(--winui-fill, 0%),
    var(--winui-strong-fill) var(--winui-fill, 0%));
}

html.skin-microsoft body input[type='range']::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 1px solid var(--winui-ctrl-border);
  border-bottom-color: var(--winui-ctrl-border-accent);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--winui-accent) 0, var(--winui-accent) 5.16px,
    var(--winui-solid-fill) 5.66px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background var(--winui-duration-fast) var(--winui-ease);
  /* 官方：悬停/按下只缩放内嵌圆点，拇指本身不缩放（覆盖页面 scale 动效） */
  transform: none;
}

html.skin-microsoft.microsoft-dark body input[type='range']::-webkit-slider-thumb {
  border-top-color: var(--winui-ctrl-border-accent);
  border-bottom-color: var(--winui-ctrl-border);
}

html.skin-microsoft body input[type='range']::-webkit-slider-thumb:hover {
  background: radial-gradient(circle at 50% 50%,
    var(--winui-accent-hover) 0, var(--winui-accent-hover) 7px,
    var(--winui-solid-fill) 7.5px);
}

html.skin-microsoft body input[type='range']::-webkit-slider-thumb:active {
  background: radial-gradient(circle at 50% 50%,
    var(--winui-accent-pressed) 0, var(--winui-accent-pressed) 4.26px,
    var(--winui-solid-fill) 4.76px);
}

html.skin-microsoft body input[type='range']::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--winui-strong-fill);
}

html.skin-microsoft body input[type='range']::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--winui-accent);
}

html.skin-microsoft body input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 1px solid var(--winui-ctrl-border);
  border-bottom-color: var(--winui-ctrl-border-accent);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--winui-accent) 0, var(--winui-accent) 5.16px,
    var(--winui-solid-fill) 5.66px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transform: none;
}

html.skin-microsoft body input[type='range']:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ============================================================
   13. ProgressBar（进度条 · 官方规格）
   3px 高 / 1.5px 圆角 / 填充 167ms cubic-bezier(0.4,0,0.6,1)
   ============================================================ */
html.skin-microsoft body progress {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 3px;
  border: none;
  border-radius: 1.5px;
  overflow: hidden;
  background-color: var(--winui-strong-stroke);
}

html.skin-microsoft body progress::-webkit-progress-bar {
  background-color: var(--winui-strong-stroke);
  border-radius: 1.5px;
}

html.skin-microsoft body progress::-webkit-progress-value {
  background-color: var(--winui-accent);
  border-radius: 1.5px;
  transition: width 167ms cubic-bezier(0.4, 0, 0.6, 1);
}

html.skin-microsoft body progress::-moz-progress-bar {
  background-color: var(--winui-accent);
  border-radius: 1.5px;
}

/* ============================================================
   14. Hyperlink（超链接 · WinHyperlinkButton 配色）
   无下划线 / 悬停出现下划线 / #0D4897（暗色 #99EBFF）
   ============================================================ */
html.skin-microsoft body a {
  color: var(--winui-link);
  text-decoration: none;
}

html.skin-microsoft body a:hover {
  color: var(--winui-link);
  text-decoration: underline;
}

html.skin-microsoft body a:active {
  color: var(--winui-link);
}

/* ============================================================
   15. ToggleButton / 分段切换（.option-chip / .mode-btn）
   工具页的选项芯片与模式切换按钮 = WinUI ToggleButton。
   Rest 为标准按钮外观（4px 圆角，非胶囊），
   选中态 = AccentButton（官方 ToggleButton Checked 规则）。
   ============================================================ */
html.skin-microsoft body button.option-chip,
html.skin-microsoft body button.mode-btn {
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
}

html.skin-microsoft body button.option-chip:hover,
html.skin-microsoft body button.mode-btn:hover {
  background-color: var(--winui-fill-2);
  border-color: var(--winui-ctrl-border);
  color: var(--winui-text-1);
}

html.skin-microsoft body button.option-chip:active,
html.skin-microsoft body button.mode-btn:active {
  background-color: var(--winui-fill-3);
  border-color: var(--winui-ctrl-border);
  color: var(--winui-text-2);
}

/* 选中态：Accent 填充 + 强调文本（暗色下为黑字） */
html.skin-microsoft body button.option-chip.active,
html.skin-microsoft body button.mode-btn.active {
  background-color: var(--winui-accent);
  color: var(--winui-accent-text);
  border: 1px solid var(--winui-accent-border);
  border-bottom-color: var(--winui-accent-border-accent);
}

html.skin-microsoft.microsoft-dark body button.option-chip.active,
html.skin-microsoft.microsoft-dark body button.mode-btn.active {
  border-top-color: var(--winui-accent-border-accent);
  border-bottom-color: var(--winui-accent-border);
}

html.skin-microsoft body button.option-chip.active:hover,
html.skin-microsoft body button.mode-btn.active:hover {
  background-color: var(--winui-accent-hover);
  color: var(--winui-accent-text);
}

html.skin-microsoft body button.option-chip.active:active,
html.skin-microsoft body button.mode-btn.active:active {
  background-color: var(--winui-accent-pressed);
  color: var(--winui-accent-text-2);
  border-color: transparent;
}

/* 分段容器：subtle 底 + 卡片描边（SelectorBar 视觉） */
html.skin-microsoft body .mode-switch,
html.skin-microsoft body .bit-width-switch {
  background-color: var(--winui-subtle-3);
  border: 1px solid var(--winui-card-stroke);
  border-radius: 4px;
}

/* ============================================================
   16. Toast（轻量通知 · WinUI Flyout 材质）
   亚克力底 + 飞出描边 + 8px 圆角（浮出层圆角规格）
   ============================================================ */
html.skin-microsoft body .toast {
  background-color: var(--winui-flyout-bg);
  color: var(--winui-text-1);
  border: 1px solid var(--winui-flyout-border);
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
  backdrop-filter: var(--winui-flyout-backdrop);
  -webkit-backdrop-filter: var(--winui-flyout-backdrop);
}

html.skin-microsoft.microsoft-dark body .toast {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.30);
}

/* ============================================================
   17. 卡片 / 工具卡片 / 表格 / 代码块
   ============================================================ */
html.skin-microsoft body .card {
  background-color: var(--winui-card-bg);
  border: 1px solid var(--winui-card-stroke);
  border-radius: 4px;
  box-shadow: none;
}

html.skin-microsoft body .tool-card {
  background-color: var(--winui-card-bg);
  border: 1px solid var(--winui-card-stroke);
  border-radius: 4px;
  box-shadow: none;
}

/* WinUI 列表项悬停：subtle 填充叠加，无位移无阴影 */
html.skin-microsoft body .tool-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--winui-card-stroke);
  background-image: linear-gradient(var(--winui-subtle-2), var(--winui-subtle-2));
}

html.skin-microsoft body .tool-card:active {
  background-image: linear-gradient(var(--winui-subtle-3), var(--winui-subtle-3));
}

/* 表格：次级表头 + subtle 行悬停 + 分隔线 */
html.skin-microsoft body table {
  border-collapse: collapse;
}

html.skin-microsoft body th {
  color: var(--winui-text-2);
  font-weight: 400;
  border-bottom: 1px solid var(--winui-divider);
}

html.skin-microsoft body td {
  border-bottom: 1px solid var(--winui-divider);
}

html.skin-microsoft body tr:hover td {
  background-color: var(--winui-subtle-2);
}

/* 代码块 / 预格式文本 */
html.skin-microsoft body code,
html.skin-microsoft body pre {
  font-family: var(--font-mono);
  background-color: var(--winui-subtle-2);
  border-radius: 4px;
  color: var(--winui-text-1);
}

html.skin-microsoft body pre {
  padding: 12px;
  border: 1px solid var(--winui-card-stroke);
}

html.skin-microsoft body code {
  padding: 2px 5px;
}

html.skin-microsoft body hr {
  border: none;
  border-top: 1px solid var(--winui-divider);
}

/* 空状态 / 统计文本 */
html.skin-microsoft body .empty-state,
html.skin-microsoft body .search-stats {
  color: var(--winui-text-2);
}

/* 键盘按键（kbd）：WinUI 键提示样式 */
html.skin-microsoft body kbd {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--winui-ctrl-border);
  border-bottom-color: var(--winui-ctrl-border-accent);
  border-radius: 4px;
  background-color: var(--winui-fill-1);
  color: var(--winui-text-2);
}

/* 高亮标记：Accent 浅底 */
html.skin-microsoft body mark {
  background-color: rgba(0, 103, 192, 0.20);
  color: var(--winui-text-1);
}

html.skin-microsoft.microsoft-dark body mark {
  background-color: rgba(76, 194, 255, 0.25);
}

/* ============================================================
   18. Expander（details / summary · WinUI Expander 视觉）
   ============================================================ */
html.skin-microsoft body details {
  border: 1px solid var(--winui-card-stroke);
  border-radius: 4px;
  background-color: var(--winui-card-bg);
}

html.skin-microsoft body details summary {
  cursor: pointer;
  padding: 8px 12px;
  min-height: 32px;
  display: flex;
  align-items: center;
  list-style: none;
  color: var(--winui-text-1);
  border-radius: 4px;
}

html.skin-microsoft body details summary::-webkit-details-marker {
  display: none;
}

html.skin-microsoft body details summary:hover {
  background-color: var(--winui-subtle-2);
}

html.skin-microsoft body details[open] summary {
  border-bottom: 1px solid var(--winui-divider);
  border-radius: 4px 4px 0 0;
}

/* ============================================================
   19. ContentDialog（内容对话框 · 官方规格）
   遮罩 rgba(0,0,0,0.30) 无模糊 / 实底 #FCFCFC·#2C2C2C
   入场 scale(1.05→1) 250ms cubic-bezier(0,0,0,1)
   ============================================================ */
html.skin-microsoft body .skin-overlay,
html.skin-microsoft body .sponsor-overlay {
  background-color: var(--winui-overlay);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.skin-microsoft body .skin-modal,
html.skin-microsoft body .sponsor-modal {
  background-color: var(--winui-dialog-bg);
  border: 1px solid var(--winui-flyout-border);
  border-radius: 8px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.24);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--winui-text-1);
}

html.skin-microsoft.microsoft-dark body .skin-modal,
html.skin-microsoft.microsoft-dark body .sponsor-modal {
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.42);
}

/* 标题：20px / 600（官方 ContentDialog 标题规格） */
html.skin-microsoft body .skin-title,
html.skin-microsoft body .sponsor-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--winui-text-1);
}

html.skin-microsoft body .skin-subtitle,
html.skin-microsoft body .sponsor-content {
  color: var(--winui-text-1);
}

/* 入场动画：官方 ContentDialog enter */
html.skin-microsoft body .skin-overlay.show .skin-modal,
html.skin-microsoft body .sponsor-overlay.show .sponsor-modal {
  transform: scale(1);
  transition: transform 250ms cubic-bezier(0, 0, 0, 1);
}

html.skin-microsoft body .skin-overlay:not(.show) .skin-modal,
html.skin-microsoft body .sponsor-overlay:not(.show) .sponsor-modal {
  transform: scale(1.05);
}

/* 主题选项卡：WinUI SettingsCard 外观 */
html.skin-microsoft body .skin-option {
  background-color: var(--winui-card-bg);
  border: 1px solid var(--winui-card-stroke);
  border-radius: 4px;
  color: var(--winui-text-1);
}

html.skin-microsoft body .skin-option:hover {
  border-color: var(--winui-card-stroke);
  background-image: linear-gradient(var(--winui-subtle-2), var(--winui-subtle-2));
  transform: none;
  box-shadow: none;
}

html.skin-microsoft body .skin-option.selected {
  border: 2px solid var(--winui-accent);
  background-color: var(--winui-card-bg);
}

html.skin-microsoft body .skin-option-name {
  color: var(--winui-text-1);
}

html.skin-microsoft body .skin-option-desc {
  color: var(--winui-text-2);
}

html.skin-microsoft body .skin-check {
  background-color: var(--winui-accent);
  color: var(--winui-accent-text);
}

/* 对话框主按钮 → AccentButton */
html.skin-microsoft body .sponsor-ok-btn {
  background-color: var(--winui-accent);
  color: var(--winui-accent-text);
  border: 1px solid var(--winui-accent-border);
  border-bottom-color: var(--winui-accent-border-accent);
  border-radius: 4px;
  min-height: 32px;
  font-weight: normal;
}

html.skin-microsoft.microsoft-dark body .sponsor-ok-btn {
  border-top-color: var(--winui-accent-border-accent);
  border-bottom-color: var(--winui-accent-border);
}

html.skin-microsoft body .sponsor-ok-btn:hover {
  background-color: var(--winui-accent-hover);
  color: var(--winui-accent-text);
}

html.skin-microsoft body .sponsor-ok-btn:active {
  background-color: var(--winui-accent-pressed);
  color: var(--winui-accent-text-2);
  border-color: transparent;
}

/* 主按钮尺寸规格（官方 Button 度量，覆盖页面 10px 40px / 15px / 600） */
html.skin-microsoft body .sponsor-ok-btn {
  padding: 5px 24px 6px;
  font-size: 14px;
}

/* ---------- 赞助弹窗内部元素 WinUI 化 ---------- */
/* 副标题：次级文本 */
html.skin-microsoft body .sponsor-subtitle {
  color: var(--winui-text-2);
}

/* 正文加粗：主文本色 */
html.skin-microsoft body .sponsor-content strong {
  color: var(--winui-text-1);
}

/* 链接：官方 Hyperlink 规范（Accent 色 + 下划线） */
html.skin-microsoft body .sponsor-content a,
html.skin-microsoft body .sponsor-footer a {
  color: var(--winui-link);
  text-decoration: underline;
}

html.skin-microsoft body .sponsor-content a:hover,
html.skin-microsoft body .sponsor-footer a:hover {
  color: var(--winui-accent);
}

/* 高亮文字：Accent 色 */
html.skin-microsoft body .sponsor-content .highlight {
  color: var(--winui-accent);
  font-weight: 600;
}

/* 咖啡标签：Accent 浅底胶囊 → WinUI 4px 圆角强调标签
   （需覆盖页面 html.dark 的原生粉色规则，特异性 0,3,2 > 0,3,1） */
html.skin-microsoft body .sponsor-content .coffee-tag {
  background-color: rgba(0, 103, 192, 0.10);
  color: var(--winui-accent);
  border-radius: 4px;
  padding: 3px 10px;
}

html.skin-microsoft.microsoft-dark body .sponsor-content .coffee-tag {
  background-color: rgba(76, 194, 255, 0.14);
}

/* 引用条：分割线左缘 + 次级文本 */
html.skin-microsoft body .sponsor-content .quote {
  color: var(--winui-text-2);
  border-left: 3px solid var(--winui-divider);
}

/* 二维码图片：4px 圆角 + 卡片描边 */
html.skin-microsoft body .sponsor-qr-item img {
  border-radius: 4px;
  border: 1px solid var(--winui-card-stroke);
}

/* 次级说明文字（二维码标签 / 底部说明 / 复选框标签） */
html.skin-microsoft body .sponsor-qr-item .qr-label,
html.skin-microsoft body .sponsor-footer p,
html.skin-microsoft body .sponsor-checkbox-wrap {
  color: var(--winui-text-2);
}

/* ============================================================
   20. 顶部标题栏（Mica 材质）+ 搜索框（AutoSuggestBox）
   页面硬编码白色顶栏与 html.dark 规则在微软风下均不适用
   ============================================================ */
html.skin-microsoft body .app-header {
  max-width: none;                     /* 顶栏全宽，背景铺满视口，
                                         避免 max-width:1200 居中带在
                                         宽屏下产生左右两条侧边界 */
  width: 100%;
  margin: 0;
  padding: 12px max(24px, calc(50% - 600px));
  border-bottom: none;
  background-color: rgba(243, 243, 243, 0.85);
  backdrop-filter: var(--winui-flyout-backdrop);
  -webkit-backdrop-filter: var(--winui-flyout-backdrop);
}

html.skin-microsoft.microsoft-dark body .app-header {
  background-color: rgba(32, 32, 32, 0.85);
}

html.skin-microsoft body .app-header.visible {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 8px 16px rgba(0, 0, 0, 0.10);
}

html.skin-microsoft.microsoft-dark body .app-header.visible {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 16px rgba(0, 0, 0, 0.30);
}

html.skin-microsoft body .app-title {
  font-weight: 600;
}

/* 搜索框：TextBox 规格（非胶囊圆角） */
/* 搜索框（官方 WinTextBox + AutoSuggestBox 布局：文字靠左，
   搜索图标作为 actions 按钮置于右侧 40px 区域） */
html.skin-microsoft body input.search-input {
  height: 36px;
  border-radius: 4px;
  border: 1px solid var(--winui-ctrl-border);
  border-bottom-color: var(--winui-strong-stroke);
  background-color: var(--winui-fill-1);
  /* 文字左对齐 11px；右侧固定预留「图标 + 清空」按钮区。
     固定内边距等效官方 flex 布局：输入/清空时按钮出现消失
     不会引起文字回流跳动 */
  padding: 0 74px 0 11px;
  text-align: left;
}

html.skin-microsoft body input.search-input::placeholder {
  color: var(--winui-text-3);
}

html.skin-microsoft body input.search-input:hover:not(:focus) {
  background-color: var(--winui-fill-2);
}

html.skin-microsoft body input.search-input:focus {
  background-color: var(--winui-fill-input-active);
  border-color: var(--winui-ctrl-border);
  border-bottom-color: var(--winui-accent);
  box-shadow: inset 0 -1px 0 0 var(--winui-accent);
}

/* 搜索图标：移到右侧（官方 actions 插槽位置） */
html.skin-microsoft body .search-icon {
  left: auto;
  right: 11px;
  width: 16px;
  height: 16px;
  color: var(--winui-text-2);
}

/* 清空按钮：置于搜索图标左侧（30px 方形 WinUI 图标按钮，
   覆盖页面 26px 圆形与共享规则的 min-height） */
html.skin-microsoft body .search-clear {
  right: 40px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 4px;
}

/* 微软风暗色下主题图标切换（页面 CSS 只认 html.dark） */
html.skin-microsoft.microsoft-dark .theme-toggle .icon-sun { display: block; }
html.skin-microsoft.microsoft-dark .theme-toggle .icon-moon { display: none; }
html.skin-microsoft.microsoft-light .theme-toggle .icon-sun { display: none; }
html.skin-microsoft.microsoft-light .theme-toggle .icon-moon { display: block; }

/* ============================================================
   21. 工具图标暗色适配（Material SVG 图标为黑色填充，
   页面的 html.dark 反转规则在微软风下不生效，此处接管）
   ============================================================ */
html.skin-microsoft.microsoft-dark .tool-icon {
  filter: invert(1);
}

/* ============================================================
   22. 已知硬编码亮色背景的修正（页面自身的 html.dark
   覆盖在微软风暗色下不生效，此处按页面暗色值接管）
   ============================================================ */
/* 420_Flexbox计算器 / 421_Grid布局生成 的预览画布 */
html.skin-microsoft.microsoft-dark body .preview {
  background-color: #222222;
}

/* 196_CSS阴影生成器 的阴影预览块 */
html.skin-microsoft.microsoft-dark body .preview-box {
  background-color: #e8eaed;
}