/* ============================================================
   MirageTool · 安卓风（Material Design 3）皮肤
   设计令牌 1:1 取自 Angular Material M3 azure-blue 官方主题
   （material.angular.dev 默认演示主题）：
   - 色彩角色：@angular/material/prebuilt-themes/azure-blue.css
   - 调色板：angular/components _palettes.scss（$azure-palette）
   - 形状/阴影/状态层：--mat-sys-corner-* / level0~5 / state-*
   所有规则以 html.skin-android 为前缀，零污染其他皮肤。
   ============================================================ */

/* ============================================================
   1. 设计令牌（MD3 Azure 色彩角色 · 亮 / 暗两套）
   ============================================================ */
html.skin-android {
  color-scheme: light;

  /* 动效（MD3：standard easing + 短/中时长） */
  --md-ease: cubic-bezier(0.2, 0, 0, 1);
  --md-duration-short: 150ms;
  --md-duration-medium: 300ms;

  /* 状态层不透明度（MD3 State Layers） */
  --md-state-hover: 0.08;
  --md-state-focus: 0.12;
  --md-state-pressed: 0.12;

  /* 形状（Shape Scale） */
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 9999px;

  /* 阴影（Elevation level0~5，官方 umbra/penumbra/ambient 三层） */
  --md-elev-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
  --md-elev-2: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
  --md-elev-3: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);
  --md-elev-4: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
  --md-elev-5: 0px 7px 8px -4px rgba(0,0,0,0.2), 0px 12px 17px 2px rgba(0,0,0,0.14), 0px 5px 22px 4px rgba(0,0,0,0.12);

  /* 主色（Primary · azure tone40/90/30 等） */
  --md-primary: #005cbb;
  --md-on-primary: #ffffff;
  --md-primary-container: #d7e3ff;
  --md-on-primary-container: #00458f;

  /* 次要色（Secondary） */
  --md-secondary: #565e71;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #dae2f9;
  --md-on-secondary-container: #3e4759;

  /* 第三色（Tertiary · blue） */
  --md-tertiary: #343dff;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #e0e0ff;
  --md-on-tertiary-container: #0000ef;

  /* 错误色（Error · M3 通用 error 调色板） */
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #93000a;

  /* 表面（Surface 层级容器 · 亮色背景 #fbf7ff，用户指定） */
  --md-surface: #fbf7ff;
  --md-surface-dim: #dbd9dd;
  --md-surface-bright: #fbf7ff;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f4f3f6;
  --md-surface-container: #efedf0;
  --md-surface-container-high: #e9e7eb;
  --md-surface-container-highest: #e3e2e6;
  --md-surface-variant: #e0e2ec;
  --md-on-surface: #1a1b1f;
  --md-on-surface-variant: #44474e;

  /* 描边 / 遮罩 / 反色表面 */
  --md-outline: #74777f;
  --md-outline-variant: #c4c6d0;
  --md-scrim: rgba(0, 0, 0, 0.32);
  --md-inverse-surface: #2f3033;
  --md-inverse-on-surface: #f2f0f4;
  --md-inverse-primary: #abc7ff;

  /* 状态层颜色（hover/pressed 叠加用 currentColor，
     此处仅备容器级固定叠加场景） */
  --md-hover-layer: rgba(26, 27, 31, 0.08);
  --md-pressed-layer: rgba(26, 27, 31, 0.12);

  /* 主页图标 Shape 瓦片（MD3 Shape Library 抽象形状）
     瓦片底色 #485d91；图标以页面背景色 #fbf7ff 镂空反白 */
  --md-icon-tile: #485d91;
  --md-icon-ink: #fbf7ff;
}

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

  --md-primary: #abc7ff;
  --md-on-primary: #002f65;
  --md-primary-container: #00458f;
  --md-on-primary-container: #d7e3ff;

  --md-secondary: #bec6dc;
  --md-on-secondary: #283041;
  --md-secondary-container: #3e4759;
  --md-on-secondary-container: #dae2f9;

  --md-tertiary: #bec2ff;
  --md-on-tertiary: #0001ac;
  --md-tertiary-container: #0000ef;
  --md-on-tertiary-container: #e0e0ff;

  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;

  --md-surface: #121318;
  --md-surface-dim: #121318;
  --md-surface-bright: #38393c;
  --md-surface-container-lowest: #0d0e11;
  --md-surface-container-low: #1a1b1f;
  --md-surface-container: #1f2022;
  --md-surface-container-high: #292a2c;
  --md-surface-container-highest: #343537;
  --md-surface-variant: #44474e;
  --md-on-surface: #e3e2e6;
  --md-on-surface-variant: #c4c6d0;

  --md-outline: #8e9099;
  --md-outline-variant: #44474e;
  --md-scrim: rgba(0, 0, 0, 0.32);
  --md-inverse-surface: #e3e2e6;
  --md-inverse-on-surface: #2f3033;
  --md-inverse-primary: #005cbb;

  --md-hover-layer: rgba(227, 226, 230, 0.08);
  --md-pressed-layer: rgba(227, 226, 230, 0.12);

  /* 暗色：瓦片浅蓝 #b0c6fe；图标以页面背景色 #121318 镂空 */
  --md-icon-tile: #b0c6fe;
  --md-icon-ink: #121318;
}

/* ============================================================
   2. 页面变量桥接（关键）
   工具页在 :root / html.dark 中定义自有变量；安卓风下将其
   重映射为 MD3 令牌，使页面局部样式（stat-item、option-chip
   等）在亮/暗两种模式下都获得正确的 MD3 外观。
   特异性 html.skin-android (0,1,1) 与页面 html.dark 相同，
   但本文件在页面样式之后加载，同特异性下后者胜出；
   暗色桥接 html.skin-android.android-dark (0,2,1) 恒胜。
   ============================================================ */
html.skin-android {
  --bg-main: var(--md-surface);
  --bg-surface: var(--md-surface-container-low);
  --card-bg: var(--md-surface-container-low);
  --card-border: var(--md-outline-variant);
  --text-primary: var(--md-on-surface);
  --text-secondary: var(--md-on-surface-variant);
  --color-primary: var(--md-primary);
  --color-primary-soft: var(--md-primary-container);
  --color-primary-tint: #ecf0ff;          /* azure primary95 */
  --color-danger: var(--md-error);
  --radius: var(--md-shape-md);           /* 12px：MD3 卡片/容器圆角 */
  --radius-sm: var(--md-shape-sm);        /* 8px */
}

html.skin-android.android-dark {
  --color-primary-tint: #002f65;          /* azure primary20 */
}

/* ============================================================
   3. 页面基底
   ============================================================ */
html.skin-android body {
  background-color: var(--md-surface);
  color: var(--md-on-surface);
}

html.skin-android ::selection {
  background-color: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

/* 滚动条：MD3 细滑块（on-surface-variant 38% 近似） */
html.skin-android ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

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

html.skin-android ::-webkit-scrollbar-thumb {
  background: var(--md-outline-variant);
  border: 4px solid transparent;
  border-radius: 6px;
  background-clip: padding-box;
}

html.skin-android ::-webkit-scrollbar-thumb:hover {
  background: var(--md-outline);
  border: 4px solid transparent;
  background-clip: padding-box;
}

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

/* ============================================================
   4. 焦点视觉（MD3 Focus Indicator：2px primary 外描边）
   ============================================================ */
html.skin-android body button:focus-visible,
html.skin-android body select:focus-visible,
html.skin-android body a:focus-visible,
html.skin-android body input[type='checkbox']:focus-visible,
html.skin-android body input[type='radio']:focus-visible,
html.skin-android body [tabindex]:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* ============================================================
   5. 标准按钮（MD3 Outlined Button）
   胶囊形（shape full）/ 1px outline 描边 / primary 文字 /
   高度 40px / Label Large（14px·500）/
   交互 = 状态层叠加（hover 8% / pressed 12% primary），无位移
   ============================================================ */
html.skin-android body button,
html.skin-android body input[type='button'],
html.skin-android body input[type='submit'],
html.skin-android body input[type='reset'] {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;                     /* 约束状态层/涟漪不溢出胶囊 */
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--md-shape-full);
  border: 1px solid var(--md-outline-variant);
  background-color: transparent;
  color: var(--md-primary);
  cursor: pointer;
  transition:
    background-color var(--md-duration-short) var(--md-ease),
    border-color var(--md-duration-short) var(--md-ease),
    box-shadow var(--md-duration-short) var(--md-ease);
}

/* 状态层（MD3 State Layer）：::after 叠 on 色透明度，
   文字保持可读；简化涟漪 = 按下时状态层径向扩散加深 */
html.skin-android body button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-duration-short) var(--md-ease);
}

html.skin-android body button:hover,
html.skin-android body input[type='button']:hover,
html.skin-android body input[type='submit']:hover,
html.skin-android body input[type='reset']:hover {
  /* 官方 hover 描边不变；显式声明以拦截页面原生
     hover 的蓝色描边（border-color: --color-primary）泄漏 */
  border-color: var(--md-outline-variant);
  color: var(--md-primary);
  transform: none;
  box-shadow: none;
}

html.skin-android body button:hover::after {
  opacity: var(--md-state-hover);
}

html.skin-android body button:active,
html.skin-android body input[type='button']:active,
html.skin-android body input[type='submit']:active,
html.skin-android body input[type='reset']:active {
  border-color: var(--md-outline-variant);
  color: var(--md-primary);
  transform: none;
  box-shadow: none;
  filter: none;
}

html.skin-android body button:active::after {
  opacity: var(--md-state-pressed);
  transition-duration: 0ms;
}

html.skin-android body button:disabled,
html.skin-android body input[type='button']:disabled,
html.skin-android body input[type='submit']:disabled,
html.skin-android body input[type='reset']:disabled {
  border-color: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
  background-color: transparent;
  cursor: default;
}

/* MD3 按钮不做位移/旋转/缩放动效 */
html.skin-android body button {
  transform: none;
}

/* ============================================================
   6. Filled Button（MD3 填充按钮）
   页面中的 .btn.primary / .btn-primary / button.primary 以及
   skin-loader 打标的 .md-filled = primary 底 + on-primary 字；
   hover 抬升至 elevation 1；按下回落 0。
   ============================================================ */
html.skin-android body button.md-filled,
html.skin-android body input[type='button'].md-filled,
html.skin-android body input[type='submit'].md-filled,
html.skin-android body .btn.primary,
html.skin-android body .btn-primary,
html.skin-android body button.primary {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border-color: transparent;
  box-shadow: none;
}

html.skin-android body button.md-filled:hover,
html.skin-android body input[type='button'].md-filled:hover,
html.skin-android body input[type='submit'].md-filled:hover,
html.skin-android body .btn.primary:hover,
html.skin-android body .btn-primary:hover,
html.skin-android body button.primary:hover {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border-color: transparent;
  box-shadow: var(--md-elev-1);
  filter: none;
}

html.skin-android body button.md-filled:active,
html.skin-android body input[type='button'].md-filled:active,
html.skin-android body input[type='submit'].md-filled:active,
html.skin-android body .btn.primary:active,
html.skin-android body .btn-primary:active,
html.skin-android body button.primary:active {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border-color: transparent;
  box-shadow: none;
  filter: none;
}

html.skin-android body button.md-filled:disabled,
html.skin-android body input[type='button'].md-filled:disabled,
html.skin-android body input[type='submit'].md-filled:disabled,
html.skin-android body .btn.primary:disabled,
html.skin-android body .btn-primary:disabled,
html.skin-android body button.primary:disabled {
  background-color: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
  border-color: transparent;
  box-shadow: none;
  filter: none;
}

/* 危险按钮：MD3 error 填充 */
html.skin-android body button.md-danger,
html.skin-android body .btn.danger,
html.skin-android body .btn-danger {
  background-color: var(--md-error);
  color: var(--md-on-error);
  border-color: transparent;
}

html.skin-android body button.md-danger:hover,
html.skin-android body .btn.danger:hover,
html.skin-android body .btn-danger:hover {
  background-color: var(--md-error);
  color: var(--md-on-error);
  border-color: transparent;
  box-shadow: var(--md-elev-1);
  filter: none;
}

html.skin-android body button.md-danger:active,
html.skin-android body .btn.danger:active,
html.skin-android body .btn-danger:active {
  background-color: var(--md-error);
  color: var(--md-on-error);
  box-shadow: none;
  filter: none;
}

/* 仅文字着色的危险按钮 → outlined + error 文字 */
html.skin-android body .btn.danger:not(.md-danger):not([style*="background"]),
html.skin-android body button.danger:not(.md-danger) {
  background-color: transparent;
  color: var(--md-error);
  border: 1px solid var(--md-outline-variant);
}

/* ============================================================
   7. 顶栏图标按钮（MD3 Filled Icon Button · 方形圆角 40dp）
   primary-container 底 + on-primary-container 图标 + elevation 3
   hover → elevation 4 + 状态层；pressed → elevation 3 + 状态层
   （状态层 ::after 用 currentColor = on-primary-container，
   与 M3 状态层规范一致）
   ============================================================ */
html.skin-android body .theme-toggle,
html.skin-android body .skin-btn,
html.skin-android body .sponsor-btn,
html.skin-android body .search-btn {
  padding: 0;
  min-height: 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;                 /* 方形 + 圆角（MD3 shape-md） */
  border: 1px solid transparent;
  color: var(--md-on-primary-container);
  background-color: var(--md-primary-container);
  box-shadow: var(--md-elev-3);
  transform: none;
  transition:
    box-shadow var(--md-duration-short) var(--md-ease),
    background-color var(--md-duration-short) var(--md-ease);
  /* specificity (0,2,2) 同时压过页面 .skin-btn:hover 的
     transform: rotate(-12deg) scale(1.05) (0,2,0) */
}

html.skin-android body .theme-toggle:hover,
html.skin-android body .skin-btn:hover,
html.skin-android body .sponsor-btn:hover,
html.skin-android body .search-btn:hover {
  border-color: transparent;
  color: var(--md-on-primary-container);
  background-color: var(--md-primary-container);
  box-shadow: var(--md-elev-4);
}

html.skin-android body .theme-toggle:active,
html.skin-android body .skin-btn:active,
html.skin-android body .sponsor-btn:active,
html.skin-android body .search-btn:active {
  border-color: transparent;
  color: var(--md-on-primary-container);
  background-color: var(--md-primary-container);
  box-shadow: var(--md-elev-3);
}

/* ============================================================
   7b. Subtle 图标按钮（弹窗关闭 + 搜索清除）
   ============================================================ */
html.skin-android body .sponsor-close,
html.skin-android body .search-clear,
html.skin-android body .skin-close {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--md-on-surface-variant);
  min-height: 40px;
  border-radius: var(--md-shape-full);
}

html.skin-android body .sponsor-close:hover,
html.skin-android body .search-clear:hover,
html.skin-android body .skin-close:hover {
  background-color: transparent;
  border-color: transparent;
  color: var(--md-on-surface-variant);
  transform: none;
}

html.skin-android body .sponsor-close:active,
html.skin-android body .search-clear:active,
html.skin-android body .skin-close:active {
  background-color: transparent;
  color: var(--md-on-surface-variant);
}

/* ============================================================
   8. Text Field（MD3 Filled 形态）
   surface-container-highest 底 / 顶部 4px 圆角 /
   底部 1px indicator（on-surface-variant）/
   聚焦：indicator 2px primary（inset 阴影叠加，无布局跳动）
   ============================================================ */
html.skin-android body input[type='text'],
html.skin-android body input[type='password'],
html.skin-android body input[type='number'],
html.skin-android body input[type='search'],
html.skin-android body input[type='tel'],
html.skin-android body input[type='url'],
html.skin-android body input[type='email'],
html.skin-android body input[type='date'],
html.skin-android body input[type='time'],
html.skin-android body input[type='datetime-local'],
html.skin-android body input[type='month'],
html.skin-android body input:not([type]),
html.skin-android body textarea {
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  min-height: 40px;
  padding: 9px 12px 10px;
  border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0;
  border: none;
  border-bottom: 1px solid var(--md-on-surface-variant);
  background-color: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  outline: none;
  transition:
    background-color var(--md-duration-short) var(--md-ease),
    border-color var(--md-duration-short) var(--md-ease),
    box-shadow var(--md-duration-short) var(--md-ease);
}

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

/* hover：indicator 转 on-surface + 8% 状态层（以渐变叠加实现） */
html.skin-android body input:hover:not(:focus):not(:disabled),
html.skin-android body textarea:hover:not(:focus):not(:disabled) {
  border-bottom-color: var(--md-on-surface);
  background-image: linear-gradient(var(--md-hover-layer), var(--md-hover-layer));
}

/* 聚焦：底部 2px primary indicator（1px 边框 + 1px 内阴影） */
html.skin-android body input:focus,
html.skin-android body textarea:focus {
  background-color: var(--md-surface-container-highest);
  background-image: none;
  border-bottom-color: var(--md-primary);
  box-shadow: inset 0 -1px 0 0 var(--md-primary);
  outline: none;
}

html.skin-android body input::placeholder,
html.skin-android body textarea::placeholder {
  color: var(--md-on-surface-variant);
  opacity: 1;
}

html.skin-android body input:disabled,
html.skin-android body textarea:disabled {
  background-color: color-mix(in srgb, var(--md-on-surface) 4%, transparent);
  color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
  border-bottom-color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
  cursor: default;
}

html.skin-android body input:read-only:not(:focus) {
  background-color: var(--md-surface-container);
}

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

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

/* 颜色选择器：MD3 色块外观 */
html.skin-android body input[type='color'] {
  box-sizing: border-box;
  height: 40px;
  padding: 4px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-sm);
  background-color: var(--md-surface-container-highest);
  cursor: pointer;
}

html.skin-android body input[type='color']:hover {
  background-image: linear-gradient(var(--md-hover-layer), var(--md-hover-layer));
}

/* 文件选择 */
html.skin-android body input[type='file'] {
  color: var(--md-on-surface-variant);
  font-size: 13px;
}

/* ============================================================
   9. Select（下拉框 · Filled 形态 + MD3 三角箭头）
   ============================================================ */
html.skin-android body select {
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-sans);
  font-size: 14px;
  min-height: 40px;
  padding: 9px 36px 10px 12px;
  border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0;
  border: none;
  border-bottom: 1px solid var(--md-on-surface-variant);
  background-color: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--md-duration-short) var(--md-ease),
    border-color var(--md-duration-short) var(--md-ease),
    box-shadow var(--md-duration-short) var(--md-ease);
  /* MD3 下拉三角（on-surface-variant #44474e） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath fill='%2344474e' d='M0 0l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
}

html.skin-android.android-dark body select {
  /* 暗色箭头（on-surface-variant #c4c6d0） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath fill='%23c4c6d0' d='M0 0l5 5 5-5z'/%3E%3C/svg%3E");
}

html.skin-android body select:hover:not(:focus):not(:disabled) {
  border-bottom-color: var(--md-on-surface);
}

html.skin-android body select:focus {
  border-bottom-color: var(--md-primary);
  box-shadow: inset 0 -1px 0 0 var(--md-primary);
}

html.skin-android body select:disabled {
  background-color: color-mix(in srgb, var(--md-on-surface) 4%, transparent);
  color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
  border-bottom-color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
  cursor: default;
}

/* 下拉列表项（Chromium 可渲染） */
html.skin-android body select option {
  background-color: var(--md-surface-container);
  color: var(--md-on-surface);
}

html.skin-android body select option:checked {
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

/* ============================================================
   10. CheckBox（MD3 复选框）
   18px 方块 / 2px 圆角 / 2px 描边（on-surface-variant）/
   选中 = primary 底 + on-primary 对勾
   ============================================================ */
html.skin-android body input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: none;
  margin: 0;
  vertical-align: -3px;
  border: 2px solid var(--md-on-surface-variant);
  border-radius: 2px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--md-duration-short) var(--md-ease),
    border-color var(--md-duration-short) var(--md-ease);
}

html.skin-android body input[type='checkbox']:hover {
  border-color: var(--md-on-surface);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

html.skin-android body input[type='checkbox']:active {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-primary) 12%, transparent);
}

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

html.skin-android 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='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html.skin-android.android-dark body input[type='checkbox']:checked {
  /* 暗色 on-primary = #002f65 */
  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='%23002f65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html.skin-android 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='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

html.skin-android.android-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='%23002f65' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

html.skin-android body input[type='checkbox']:checked:hover,
html.skin-android body input[type='checkbox']:indeterminate:hover {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-primary) 8%, transparent);
}

html.skin-android body input[type='checkbox']:disabled {
  border-color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
  background-color: transparent;
  box-shadow: none;
  cursor: default;
}

html.skin-android body input[type='checkbox']:disabled:checked,
html.skin-android body input[type='checkbox']:disabled:indeterminate {
  background-color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
  border-color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
}

/* ============================================================
   11. Radio（MD3 单选按钮）
   20px 圆环 / 2px 描边（on-surface-variant）/
   选中 = primary 描边 + 10px primary 内点
   ============================================================ */
html.skin-android 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: 2px solid var(--md-on-surface-variant);
  border-radius: 50%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  outline: none;
  transition:
    border-color var(--md-duration-short) var(--md-ease),
    box-shadow var(--md-duration-short) var(--md-ease);
}

html.skin-android body input[type='radio']:hover {
  border-color: var(--md-on-surface);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

html.skin-android body input[type='radio']:active {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-primary) 12%, transparent);
}

html.skin-android body input[type='radio']:checked {
  border-color: var(--md-primary);
  /* 官方：10px 内点 */
  background-image: radial-gradient(circle at 50% 50%,
    var(--md-primary) 0, var(--md-primary) 5px, transparent 5.5px);
}

html.skin-android body input[type='radio']:checked:hover {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-primary) 8%, transparent);
}

html.skin-android body input[type='radio']:disabled {
  border-color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
  background-image: none;
  box-shadow: none;
  cursor: default;
}

html.skin-android body input[type='radio']:disabled:checked {
  background-image: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--md-on-surface) 38%, transparent) 0,
    color-mix(in srgb, var(--md-on-surface) 38%, transparent) 5px,
    transparent 5.5px);
}

/* ============================================================
   12. Slider（MD3 滑块）
   轨道 4px：active 段 primary / inactive 段 surface-container-highest
   拇指 20px primary 圆点（无描边）；hover/pressed 显示 40px
   状态层圆环（8% / 12% primary）
   --md-fill 由 skin-loader.js 同步（WebKit 轨道填充）
   ============================================================ */
html.skin-android body input[type='range'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 24px;
  background: transparent;
  cursor: pointer;
  outline: none;
}

html.skin-android body input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--md-primary) var(--md-fill, 0%),
    var(--md-surface-container-highest) var(--md-fill, 0%));
}

html.skin-android body input[type='range']::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: none;
  border-radius: 50%;
  background: var(--md-primary);
  box-shadow: var(--md-elev-1);
  transition: box-shadow var(--md-duration-short) var(--md-ease);
  /* MD3 拇指本体不缩放（覆盖页面 scale 动效） */
  transform: none;
}

/* hover：拇指外 8% primary 状态层圆环 */
html.skin-android body input[type='range']::-webkit-slider-thumb:hover {
  background: var(--md-primary);
  box-shadow: var(--md-elev-1),
    0 0 0 10px color-mix(in srgb, var(--md-primary) 8%, transparent);
}

/* pressed：12% 状态层圆环 */
html.skin-android body input[type='range']::-webkit-slider-thumb:active {
  background: var(--md-primary);
  box-shadow: var(--md-elev-1),
    0 0 0 10px color-mix(in srgb, var(--md-primary) 12%, transparent);
}

html.skin-android body input[type='range']::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--md-surface-container-highest);
}

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

html.skin-android body input[type='range']::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--md-primary);
  box-shadow: var(--md-elev-1);
  transform: none;
}

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

/* ============================================================
   13. Linear Progress（MD3 线性进度条）
   4px 轨道 surface-container-highest / active primary
   ============================================================ */
html.skin-android body progress {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 4px;
  border: none;
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--md-surface-container-highest);
}

html.skin-android body progress::-webkit-progress-bar {
  background-color: var(--md-surface-container-highest);
  border-radius: 2px;
}

html.skin-android body progress::-webkit-progress-value {
  background-color: var(--md-primary);
  border-radius: 2px;
  transition: width var(--md-duration-medium) var(--md-ease);
}

html.skin-android body progress::-moz-progress-bar {
  background-color: var(--md-primary);
  border-radius: 2px;
}

/* ============================================================
   14. 超链接（MD3：primary 色，悬停下划线）
   ============================================================ */
html.skin-android body a {
  color: var(--md-primary);
  text-decoration: none;
}

html.skin-android body a:hover {
  color: var(--md-primary);
  text-decoration: underline;
}

html.skin-android body a:active {
  color: var(--md-primary);
}

/* ============================================================
   15. Chip / 分段切换（MD3 Filter Chip）
   工具页的 .option-chip / .mode-btn = MD3 过滤芯片：
   8px 圆角 / outline-variant 描边 / Label Large；
   选中态 = secondary-container 底 + 无描边（官方 Filter Chip）
   ============================================================ */
html.skin-android body button.option-chip,
html.skin-android body button.mode-btn {
  border-radius: var(--md-shape-sm);
  border: 1px solid var(--md-outline-variant);
  background-color: transparent;
  color: var(--md-on-surface-variant);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  min-height: 32px;
}

html.skin-android body button.option-chip:hover,
html.skin-android body button.mode-btn:hover {
  background-color: transparent;
  border-color: var(--md-outline-variant);
  color: var(--md-on-surface-variant);
}

html.skin-android body button.option-chip:active,
html.skin-android body button.mode-btn:active {
  border-color: var(--md-outline-variant);
  color: var(--md-on-surface-variant);
}

/* 选中态：secondary-container（MD3 Filter Chip Selected） */
html.skin-android body button.option-chip.active,
html.skin-android body button.mode-btn.active {
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border: 1px solid transparent;
}

html.skin-android body button.option-chip.active:hover,
html.skin-android body button.mode-btn.active:hover {
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
  box-shadow: var(--md-elev-1);
}

html.skin-android body button.option-chip.active:active,
html.skin-android body button.mode-btn.active:active {
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
  box-shadow: none;
}

/* 分段容器：surface-container 底 + 大圆角 */
html.skin-android body .mode-switch,
html.skin-android body .bit-width-switch {
  background-color: var(--md-surface-container);
  border: none;
  border-radius: var(--md-shape-md);
}

/* ============================================================
   16. Snackbar / Toast（MD3：反色表面 + 4px 圆角 + elevation 3）
   ============================================================ */
html.skin-android body .toast {
  background-color: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  border: none;
  border-radius: var(--md-shape-xs);
  box-shadow: var(--md-elev-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ============================================================
   17. 卡片 / 工具卡片 / 表格 / 代码块
   MD3 Elevated Card：surface-container-low + elevation 1 + 12px
   ============================================================ */
html.skin-android body .card {
  background-color: var(--md-surface-container-low);
  border: none;
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elev-1);
}

html.skin-android body .tool-card {
  background-color: var(--md-surface-container-low);
  border: none;
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elev-1);
  transition:
    box-shadow var(--md-duration-short) var(--md-ease),
    background-color var(--md-duration-short) var(--md-ease);
}

/* MD3 卡片悬停：抬升 elevation + 状态层，无位移 */
html.skin-android body .tool-card:hover {
  transform: none;
  border: none;
  box-shadow: var(--md-elev-2);
  background-image: linear-gradient(var(--md-hover-layer), var(--md-hover-layer));
}

html.skin-android body .tool-card:active {
  transform: none;
  box-shadow: var(--md-elev-1);
  background-image: linear-gradient(var(--md-pressed-layer), var(--md-pressed-layer));
}

/* 表格：MD3 Data Table（次级表头 + 行分隔线 + 行状态层） */
html.skin-android body table {
  border-collapse: collapse;
}

html.skin-android body th {
  color: var(--md-on-surface-variant);
  font-weight: 500;
  border-bottom: 1px solid var(--md-outline-variant);
}

html.skin-android body td {
  border-bottom: 1px solid var(--md-outline-variant);
}

html.skin-android body tr:hover td {
  background-color: var(--md-hover-layer);
}

/* 代码块 / 预格式文本 */
html.skin-android body code,
html.skin-android body pre {
  font-family: var(--font-mono);
  background-color: var(--md-surface-container);
  border-radius: var(--md-shape-xs);
  color: var(--md-on-surface);
}

html.skin-android body pre {
  padding: 12px;
  border: none;
  border-radius: var(--md-shape-md);
}

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

html.skin-android body hr {
  border: none;
  border-top: 1px solid var(--md-outline-variant);
}

/* 空状态 / 统计文本 */
html.skin-android body .empty-state,
html.skin-android body .search-stats {
  color: var(--md-on-surface-variant);
}

/* 键盘按键（kbd）：MD3 表面容器样式 */
html.skin-android body kbd {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-xs);
  background-color: var(--md-surface-container);
  color: var(--md-on-surface-variant);
}

/* 高亮标记：primary-container 底 */
html.skin-android body mark {
  background-color: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

/* ============================================================
   18. Expander（details / summary · MD3 卡片视觉）
   ============================================================ */
html.skin-android body details {
  border: none;
  border-radius: var(--md-shape-md);
  background-color: var(--md-surface-container-low);
}

html.skin-android body details summary {
  cursor: pointer;
  padding: 10px 16px;
  min-height: 40px;
  display: flex;
  align-items: center;
  list-style: none;
  color: var(--md-on-surface);
  border-radius: var(--md-shape-md);
}

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

html.skin-android body details summary:hover {
  background-image: linear-gradient(var(--md-hover-layer), var(--md-hover-layer));
}

html.skin-android body details[open] summary {
  border-bottom: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md) var(--md-shape-md) 0 0;
}

/* ============================================================
   19. Dialog（MD3 对话框 · 官方规格）
   遮罩 scrim 32% / surface-container-high 实底 /
   28px（extra-large）圆角 / elevation 3 /
   入场 scale(1.05→1) 300ms standard easing
   ============================================================ */
html.skin-android body .skin-overlay,
html.skin-android body .sponsor-overlay {
  background-color: var(--md-scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.skin-android body .skin-modal,
html.skin-android body .sponsor-modal {
  background-color: var(--md-surface-container-high);
  border: none;
  border-radius: var(--md-shape-xl);
  box-shadow: var(--md-elev-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--md-on-surface);
}

/* 标题：MD3 Headline Small（24px / 400） */
html.skin-android body .skin-title,
html.skin-android body .sponsor-title {
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: var(--md-on-surface);
}

html.skin-android body .skin-subtitle,
html.skin-android body .sponsor-content {
  color: var(--md-on-surface-variant);
}

/* 入场动画：MD3 dialog enter */
html.skin-android body .skin-overlay.show .skin-modal,
html.skin-android body .sponsor-overlay.show .sponsor-modal {
  transform: scale(1);
  transition: transform var(--md-duration-medium) var(--md-ease);
}

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

/* 主题选项卡：MD3 outlined card + 选中 primary 描边 */
html.skin-android body .skin-option {
  background-color: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  color: var(--md-on-surface);
}

html.skin-android body .skin-option:hover {
  border-color: var(--md-outline-variant);
  background-image: linear-gradient(var(--md-hover-layer), var(--md-hover-layer));
  transform: none;
  box-shadow: var(--md-elev-1);
}

html.skin-android body .skin-option.selected {
  border: 2px solid var(--md-primary);
  background-color: var(--md-surface-container-low);
}

html.skin-android body .skin-option-name {
  color: var(--md-on-surface);
}

html.skin-android body .skin-option-desc {
  color: var(--md-on-surface-variant);
}

html.skin-android body .skin-check {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
}

/* 对话框主按钮 → MD3 Filled Button */
html.skin-android body .sponsor-ok-btn {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border: none;
  border-radius: var(--md-shape-full);
  min-height: 40px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}

html.skin-android body .sponsor-ok-btn:hover {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border-color: transparent;
  box-shadow: var(--md-elev-1);
}

html.skin-android body .sponsor-ok-btn:active {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: none;
}

/* ---------- 赞助弹窗内部元素 MD3 化 ---------- */
/* 副标题：次级文本 */
html.skin-android body .sponsor-subtitle {
  color: var(--md-on-surface-variant);
}

/* 正文加粗：主文本色 */
html.skin-android body .sponsor-content strong {
  color: var(--md-on-surface);
}

/* 链接：primary 色 + 悬停下划线 */
html.skin-android body .sponsor-content a,
html.skin-android body .sponsor-footer a {
  color: var(--md-primary);
  text-decoration: none;
}

html.skin-android body .sponsor-content a:hover,
html.skin-android body .sponsor-footer a:hover {
  color: var(--md-primary);
  text-decoration: underline;
}

/* 高亮文字：primary 色 */
html.skin-android body .sponsor-content .highlight {
  color: var(--md-primary);
  font-weight: 600;
}

/* 咖啡标签：MD3 Assist Chip（8px 圆角 + secondary-container 底）
   （需覆盖页面 html.dark 的原生粉色规则，特异性 0,3,2 > 0,3,1） */
html.skin-android body .sponsor-content .coffee-tag {
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-radius: var(--md-shape-sm);
  padding: 4px 12px;
}

/* 引用条：outline-variant 左缘 + 次级文本 */
html.skin-android body .sponsor-content .quote {
  color: var(--md-on-surface-variant);
  border-left: 3px solid var(--md-outline-variant);
}

/* 二维码图片：12px 圆角 + outline-variant 描边 */
html.skin-android body .sponsor-qr-item img {
  border-radius: var(--md-shape-md);
  border: 1px solid var(--md-outline-variant);
}

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

/* ============================================================
   20. 顶部标题栏（MD3 Top App Bar）+ 搜索栏（MD3 Search Bar）
   Top App Bar：surface 实底；滚动出现 = surface-container + elev2
   ============================================================ */
html.skin-android 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: var(--md-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.skin-android body .app-header.visible {
  background-color: var(--md-surface-container);
  box-shadow: var(--md-elev-2);
}

/* 标题：MD3 Title Large（22px / 400） */
html.skin-android body .app-title {
  font-size: 22px;
  font-weight: 400;
}

/* 搜索栏（MD3 Search Bar）：全圆胶囊 + surface-container-high 底 +
   leading 图标在左（MD3 规范）；无描边，hover 状态层 */
html.skin-android body input.search-input {
  height: 44px;
  border-radius: var(--md-shape-full);
  border: none;
  background-color: var(--md-surface-container-high);
  /* leading 图标区 40px + trailing 清空按钮区 44px，固定预留
     避免输入/清空时文字回流跳动 */
  padding: 0 44px 0 44px;
  text-align: left;
  color: var(--md-on-surface);
  box-shadow: none;
  transition:
    background-color var(--md-duration-short) var(--md-ease),
    box-shadow var(--md-duration-short) var(--md-ease);
}

html.skin-android body input.search-input::placeholder {
  color: var(--md-on-surface-variant);
}

html.skin-android body input.search-input:hover:not(:focus) {
  background-image: linear-gradient(var(--md-hover-layer), var(--md-hover-layer));
  box-shadow: none;
}

/* MD3 搜索栏聚焦：保持形态，仅以状态层与 elevation 反馈 */
html.skin-android body input.search-input:focus {
  background-color: var(--md-surface-container-high);
  background-image: none;
  border: none;
  box-shadow: var(--md-elev-1);
  outline: none;
}

/* leading 搜索图标：左侧（MD3 Search Bar 规范方位） */
html.skin-android body .search-icon {
  left: 14px;
  right: auto;
  width: 18px;
  height: 18px;
  color: var(--md-on-surface-variant);
}

/* 清空按钮：trailing 图标按钮（右侧 40px 圆形） */
html.skin-android body .search-clear {
  right: 8px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: var(--md-shape-full);
}

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

/* ============================================================
   21. 主页工具图标 · MD3 Shape Library 形状嵌套
   每个工具图标外包一层抽象形状瓦片（Sunny / 7-sided cookie /
   Pentagon / Hexagon / Diamond 等），8 种按工具编号循环。
   瓦片底色 --md-icon-tile；图标以页面背景色 --md-icon-ink 镂空
   （亮色：黑 SVG 反白 → 近 #fbf7ff；暗色：保持深色 → 近 #121318）。
   形状类 shape-0 ~ shape-7 由 index.html createToolCard 按
   parseInt(tool.id) % 8 打在 .tool-icon-shape 上。
   ============================================================ */
html.skin-android body .tool-icon-shape {
  width: 60px;
  height: 60px;
  background-color: var(--md-icon-tile);
  border-radius: 0;
  clip-path: none;
}

/* 图标本体：内缩让图形落在形状内部；亮色反白（filter 仅作用于
   透明底的 img，不会反转瓦片底色——瓦片在父级 .tool-icon-shape） */
html.skin-android body .tool-icon {
  box-sizing: border-box;
  padding: 13px;
  filter: invert(1);
}
html.skin-android.android-dark body .tool-icon {
  filter: none;
}

/* 占位符首字母：以图标镂空色显示 */
html.skin-android body .tool-icon-placeholder {
  background-color: transparent;
  border-radius: 0;
  color: var(--md-icon-ink);
  font-size: 24px;
}

/* ---- 8 种抽象形状（MD3 Shape Library 圆角近似） ----
   多边形/太阳用 clip-path: path() 的二次贝塞尔曲线实现圆角（cookie 风） */
/* shape-0 · 圆形 */
html.skin-android body .tool-icon-shape.shape-0 { border-radius: 50%; }
/* shape-1 · 圆角方（4-sided cookie / squircle） */
html.skin-android body .tool-icon-shape.shape-1 { border-radius: 34%; }
/* shape-2 · Pentagon（五边形·圆角） */
html.skin-android body .tool-icon-shape.shape-2 {
  clip-path: path('M26.58,2.49Q30.00,0.00 33.42,2.49L55.11,18.24Q58.53,20.73 57.22,24.75L48.94,50.25Q47.63,54.27 43.40,54.27L16.60,54.27Q12.37,54.27 11.06,50.25L2.78,24.75Q1.47,20.73 4.89,18.24Z');
}
/* shape-3 · Hexagon（六边形·尖顶·圆角） */
html.skin-android body .tool-icon-shape.shape-3 {
  clip-path: path('M26.88,1.80Q30.00,0.00 33.12,1.80L52.86,13.20Q55.98,15.00 55.98,18.60L55.98,41.40Q55.98,45.00 52.86,46.80L33.12,58.20Q30.00,60.00 26.88,58.20L7.14,46.80Q4.02,45.00 4.02,41.40L4.02,18.60Q4.02,15.00 7.14,13.20Z');
}
/* shape-4 · 7-sided cookie（七边形·圆角） */
html.skin-android body .tool-icon-shape.shape-4 {
  clip-path: path('M27.19,1.36Q30.00,0.00 32.81,1.36L50.64,9.94Q53.45,11.30 54.15,14.34L58.55,33.63Q59.25,36.68 57.30,39.12L44.96,54.59Q43.02,57.03 39.89,57.03L20.11,57.03Q16.98,57.03 15.04,54.59L2.70,39.12Q0.75,36.68 1.45,33.63L5.85,14.34Q6.55,11.30 9.36,9.94Z');
}
/* shape-5 · Octagon（八边形·圆角） */
html.skin-android body .tool-icon-shape.shape-5 {
  clip-path: path('M27.45,1.05Q30.00,0.00 32.55,1.05L48.67,7.73Q51.21,8.79 52.27,11.33L58.95,27.45Q60.00,30.00 58.95,32.55L52.27,48.67Q51.21,51.21 48.67,52.27L32.55,58.95Q30.00,60.00 27.45,58.95L11.33,52.27Q8.79,51.21 7.73,48.67L1.05,32.55Q0.00,30.00 1.05,27.45L7.73,11.33Q8.79,8.79 11.33,7.73Z');
}
/* shape-6 · Diamond（菱形·圆角） */
html.skin-android body .tool-icon-shape.shape-6 {
  clip-path: path('M56.40,26.40Q60.00,30.00 56.40,33.60L33.60,56.40Q30.00,60.00 26.40,56.40L3.60,33.60Q0.00,30.00 3.60,26.40L26.40,3.60Q30.00,0.00 33.60,3.60Z');
}
/* shape-7 · Sunny（12 射太阳·圆角射线） */
html.skin-android body .tool-icon-shape.shape-7 {
  clip-path: path('M28.96,2.54Q30.00,0.50 31.04,2.54L34.14,8.65Q35.18,10.68 37.09,9.44L42.84,5.70Q44.75,4.45 44.63,6.73L44.26,13.58Q44.14,15.86 46.42,15.74L53.27,15.37Q55.55,15.25 54.30,17.16L50.56,22.91Q49.32,24.82 51.35,25.86L57.46,28.96Q59.50,30.00 57.46,31.04L51.35,34.14Q49.32,35.18 50.56,37.09L54.30,42.84Q55.55,44.75 53.27,44.63L46.42,44.26Q44.14,44.14 44.26,46.42L44.63,53.27Q44.75,55.55 42.84,54.30L37.09,50.56Q35.18,49.32 34.14,51.35L31.04,57.46Q30.00,59.50 28.96,57.46L25.86,51.35Q24.82,49.32 22.91,50.56L17.16,54.30Q15.25,55.55 15.37,53.27L15.74,46.42Q15.86,44.14 13.58,44.26L6.73,44.63Q4.45,44.75 5.70,42.84L9.44,37.09Q10.68,35.18 8.65,34.14L2.54,31.04Q0.50,30.00 2.54,28.96L8.65,25.86Q10.68,24.82 9.44,22.91L5.70,17.16Q4.45,15.25 6.73,15.37L13.58,15.74Q15.86,15.86 15.74,13.58L15.37,6.73Q15.25,4.45 17.16,5.70L22.91,9.44Q24.82,10.68 25.86,8.65Z');
}

/* ============================================================
   22. 已知硬编码亮色背景的修正（页面自身的 html.dark
   覆盖依赖 dark 类已生效，此处与微软风保持同等兜底）
   ============================================================ */
/* 420_Flexbox计算器 / 421_Grid布局生成 的预览画布 */
html.skin-android.android-dark body .preview {
  background-color: #222222;
}

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