/* ============================================================
   暗黑模式中央控制文件 (dark-mode-core.css)
   ----------------------------------------------------------
   全站 @media prefers-color-scheme 与 html.husir-dark 暗黑定义的集中地。
   两大分支并存：
     · 系统暗黑 —— @media (prefers-color-scheme: dark) { html:not(.husir-light) … }
     · 手动暗黑 —— html.husir-dark …
   两套选择器互斥（系统暗黑时 html 无 husir-dark 类），无覆盖冲突。
   各组件 CSS 通过 var(--dm-*) 继承，不再各自编写切换逻辑；
   历史上散落在 header-refactor / temp-modules / custom-components
   的组件级暗黑规则已统一迁回本文件（见文末「组件级暗黑补充」一节）。

   加载顺序：本文件必须在所有组件 CSS 之前引入。
   ============================================================ */

/* ----- 一、全局亮色变量（:root 默认）----- */
:root {
  /* V3 全站基础 token：组件只能消费或定义 alias，不再自建第二套字号/间距/层级。 */
  --hs-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --hs-fs-display: 32px;
  --hs-fs-title-l: 26px;
  --hs-fs-title-m: 20px;
  --hs-fs-title-s: 17px;
  --hs-fs-body: 16px;
  --hs-fs-body-s: 14px;
  --hs-fs-meta: 13px;
  --hs-fs-caption: 12px;
  --hs-fs-button: 15px;
  --hs-space-1: 4px;
  --hs-space-2: 8px;
  --hs-space-3: 12px;
  --hs-space-4: 16px;
  --hs-space-5: 24px;
  --hs-space-6: 32px;
  --hs-space-7: 48px;
  --hs-space-8: 64px;
  --hs-space-9: 80px;
  --hs-radius-xs: 4px;
  --hs-radius-sm: 6px;
  --hs-radius-md: 8px;
  --hs-radius-full: 999px;
  --hs-motion-instant: 120ms;
  --hs-motion-fast: 180ms;
  --hs-motion-normal: 280ms;
  --hs-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hs-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --hs-rail-prose: 72ch;
  --hs-rail-form: 720px;
  --hs-rail-content: 1240px;
  --hs-rail-wide: 1440px;

  /* 基础色彩 */
  --dm-bg: #ffffff;
  --dm-bg-secondary: #ffffff;
  --dm-bg-elevated: #ffffff;
  --dm-text: #1d1d1f;
  --dm-text-secondary: #636366;
  --dm-text-tertiary: #6e6e73;
  --dm-border: rgba(0, 0, 0, 0.06);
  --dm-divider: rgba(0, 0, 0, 0.08);

  /* 淘宝橙标准色配白字不足 AA，主操作用更深的 #c63f00 承载白字。 */
  --dm-accent: #c63f00;
  --dm-accent-hover: #b63800;
  --dm-accent-soft: rgba(255, 80, 0, 0.12);
  --dm-accent-glow: rgba(255, 80, 0, 0.16);
  --dm-accent-strong: rgba(255, 80, 0, 0.22);
  --dm-on-accent: #ffffff;
  /* 图片与深色品牌表面需要更亮的橙色，并配套深色前景保证小字对比度。 */
  --dm-accent-on-dark: #ff8a33;
  --dm-on-accent-on-dark: #151515;
  --dm-action-bg: var(--dm-accent);
  --dm-action-bg-hover: var(--dm-accent-hover);
  --dm-action-text: var(--dm-on-accent);
  --dm-focus: #c63f00;
  --dm-bg-hover: rgba(120, 120, 128, 0.06);

  /* 全局主强调保留 orange/coral 兼容别名，避免消费者一次性失配。 */
  --husir-orange: var(--dm-accent);
  --husir-orange-hover: var(--dm-accent-hover);
  --husir-orange-soft: var(--dm-accent-soft);
  --husir-orange-glow: var(--dm-accent-glow);
  --husir-orange-strong: var(--dm-accent-strong);
  --husir-on-orange: var(--dm-on-accent);
  --husir-coral: var(--husir-orange);
  --husir-coral-hover: var(--husir-orange-hover);
  --husir-coral-soft: var(--husir-orange-soft);
  --husir-coral-glow: var(--husir-orange-glow);
  --husir-coral-strong: var(--husir-orange-strong);
  --husir-on-coral: var(--husir-on-orange);
  --husir-focus-ring: var(--dm-focus);
  --husir-focus-ring-soft: var(--husir-orange-soft);

  /* 语义信号色 */
  --dm-error: #b42318;
  --dm-error-bg: rgba(255, 59, 48, 0.08);
  --dm-error-border: rgba(255, 59, 48, 0.22);
  --dm-success: #10b981;
  --dm-warning: #d97706;

  /* Service Flow 亮色阶段与状态色 */
  --dm-sf-eco: #d97706;
  --dm-sf-eco-alt: #f59e0b;
  --dm-sf-eco-soft: rgba(217, 119, 6, 0.1);
  --dm-sf-chain: #2563eb;
  --dm-sf-chain-alt: #60a5fa;
  --dm-sf-chain-soft: rgba(37, 99, 235, 0.1);
  --dm-sf-direct: #0d9488;
  --dm-sf-direct-alt: #14b8a6;
  --dm-sf-direct-soft: rgba(13, 148, 136, 0.1);
  --dm-sf-fresh: #e11d48;
  --dm-sf-fresh-alt: #fb7185;
  --dm-sf-fresh-soft: rgba(225, 29, 72, 0.1);
  --dm-sf-success-soft: rgba(16, 185, 129, 0.1);
  --dm-sf-success-border: rgba(16, 185, 129, 0.2);
  --dm-sf-warning-soft: rgba(245, 158, 11, 0.08);
  --dm-sf-warning-border: rgba(245, 158, 11, 0.2);
  --dm-sf-on-image: #ffffff;
  --dm-sf-on-image-muted: rgba(255, 255, 255, 0.85);
  --dm-sf-on-image-chip: rgba(255, 255, 255, 0.2);
  --dm-sf-on-image-accent: #ffb88c;
  --dm-sf-on-image-success: #6ee7b7;
  --dm-sf-overlay-strong: rgba(0, 0, 0, 0.6);
  --dm-sf-overlay-soft: rgba(0, 0, 0, 0.15);
  --dm-ho-brand-overlay-gradient: linear-gradient(90deg, transparent, transparent);
  --dm-ho-brand-overlay-color: transparent;
  --dm-ho-brand-overlay-soft: transparent;

  /* 毛玻璃 / 半透明背景 */
  --dm-glass: rgba(255, 255, 255, 0.78);
  --dm-glass-scrolled: rgba(255, 255, 255, 0.72);
  --dm-glass-pill: rgba(255, 255, 255, 0.68);
  --dm-overlay: rgba(255, 255, 255, 0.96);
  --dm-backdrop: rgba(29, 29, 31, 0.32);

  /* 阴影 */
  --dm-shadow-sm: 0 0.5px 0 rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 20px rgba(0, 0, 0, 0.02);
  --dm-shadow-md: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.04), 0 24px 64px rgba(0, 0, 0, 0.08);
  --dm-shadow-lg: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.03), 0 24px 80px rgba(0, 0, 0, 0.12);

  /* 全站层级：固定工具必须低于 backdrop/modal，避免弹层打开后仍可点击。 */
  --dm-z-content: 0;
  --dm-z-sticky: 9000;
  --dm-z-header: 10020;
  --dm-z-dropdown: 10030;
  --dm-z-float-bar: 10040;
  --dm-z-consent: 10050;
  --dm-z-backdrop: 10200;
  --dm-z-modal: 10300;
  --dm-z-viewer: 10400;
  --dm-z-toast: 10500;
  --dm-z-tooltip: 10600;

  /* Footer 亮色模式（日间模式浅色底） */
  --dm-footer-bg: #ffffff;
  --dm-footer-bg-secondary: #e8e8ed;
  --dm-footer-text: #1d1d1f;
  --dm-footer-text-secondary: #636366;
  --dm-footer-border: rgba(0, 0, 0, 0.08);
  --dm-footer-icon-label-bg: rgba(0, 0, 0, 0.04);
  --dm-footer-qr-bg: rgba(0, 0, 0, 0.02);
  --dm-footer-qr-hover-bg: rgba(0, 0, 0, 0.04);
  --dm-footer-qr-hover-border: rgba(0, 0, 0, 0.15);
  --dm-footer-qr-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);

  /* 移动端底栏与微信弹层变量 */
  --dm-mobile-nav-bg: #ffffff;
  --dm-mobile-nav-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
  --dm-mobile-nav-text: #111111;
  --dm-mobile-nav-active: var(--husir-coral);
  --dm-mobile-wechat-panel-bg: #ffffff;
  --dm-mobile-wechat-title: #1a1a1a;
  --dm-mobile-wechat-hint: #0369a1;
}

@media (min-width: 834px) {
  :root {
    --hs-fs-display: 40px;
    --hs-fs-title-l: 32px;
    --hs-fs-title-m: 22px;
    --hs-fs-title-s: 18px;
  }
}

@media (min-width: 1200px) {
  :root {
    --hs-fs-display: 44px;
    --hs-fs-title-l: 36px;
  }
}

html.husir-modal-open,
html.husir-modal-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--hs-font-sans);
  letter-spacing: 0;
}

body {
  font-size: var(--hs-fs-body);
  line-height: 1.7;
}

.hs-display {
  font-size: var(--hs-fs-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-wrap: balance;
}

.hs-title-l {
  font-size: var(--hs-fs-title-l);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0;
  text-wrap: balance;
}

.hs-title-m {
  font-size: var(--hs-fs-title-m);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-wrap: balance;
}

.hs-title-s {
  font-size: var(--hs-fs-title-s);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.hs-body { font-size: var(--hs-fs-body); line-height: 1.7; }
.hs-body-s { font-size: var(--hs-fs-body-s); line-height: 1.6; }
.hs-meta { font-size: var(--hs-fs-meta); line-height: 1.5; }
.hs-prose { width: min(100%, var(--hs-rail-prose)); margin-inline: auto; }
.hs-rail-content { width: min(calc(100% - 32px), var(--hs-rail-content)); margin-inline: auto; }

/* ----- 二、系统暗黑模式（自动跟随）----- */
@media (prefers-color-scheme: dark) {
  html:not(.husir-light) {
    color-scheme: dark;
    /* 克制的暖棕三层表面：保持相邻层级轻微提亮。 */
    --dm-bg: #221d18;
    --dm-bg-secondary: #2b2520;
    --dm-bg-elevated: #342d27;
    /* color-mix 表面派生层：次级表面从主底派生，换主底/换品牌色时全站自动跟随。
       不覆盖 --dm-bg-* 既有值，仅供新组件或迁移后组件消费。 */
    --dm-bg-tint: color-mix(in srgb, var(--dm-bg) 90%, var(--dm-accent) 4%);
    --dm-bg-lift: color-mix(in srgb, var(--dm-bg) 82%, #ffffff 6%);
    --dm-surface-1: color-mix(in srgb, var(--dm-bg-secondary) 88%, var(--dm-accent) 4%);
    --dm-accent-tint-8: color-mix(in srgb, var(--dm-accent) 8%, transparent);
    --dm-accent-tint-12: color-mix(in srgb, var(--dm-accent) 12%, transparent);
    --dm-on-bg-border: color-mix(in srgb, currentColor 10%, transparent);
    --dm-text: #f7f8f9;
    --dm-text-secondary: #b2b7bd;
    --dm-text-tertiary: #8d939a;
    --dm-border: rgba(255, 255, 255, 0.1);
    --dm-divider: rgba(255, 255, 255, 0.12);
    /* 夜间统一使用品牌橙，派生层同步迁移，避免交互态残留珊瑚红。 */
    --dm-accent: #ff6200;
    --dm-accent-hover: #ff7a1a;
    --dm-accent-soft: rgba(255, 98, 0, 0.18);
    --dm-accent-glow: rgba(255, 98, 0, 0.24);
    --dm-accent-strong: rgba(255, 98, 0, 0.3);
    --dm-on-accent: #151515;
    --dm-accent-on-dark: #ff9347;
    --dm-on-accent-on-dark: #151515;
    --dm-focus: #ff8a33;
    --dm-bg-hover: rgba(120, 120, 128, 0.16);
    --dm-ho-brand-overlay-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 34%, rgba(0, 0, 0, 0.22));
    --dm-ho-brand-overlay-color: rgba(0, 0, 0, 0.1);
    --dm-ho-brand-overlay-soft: rgba(0, 0, 0, 0.04);
    /* 语义信号色 */
    --dm-error: #ff6961;
    --dm-error-bg: rgba(255, 69, 58, 0.15);
    --dm-error-border: rgba(255, 69, 58, 0.3);
    --dm-success: #34d399;
    --dm-warning: #fbbf24;
    /* 毛玻璃 */
    --dm-glass: rgba(21, 21, 21, 0.82);
    --dm-glass-scrolled: rgba(21, 21, 21, 0.9);
    --dm-glass-pill: rgba(42, 42, 42, 0.82);
    --dm-overlay: rgba(42, 42, 42, 0.97);
    --dm-backdrop: rgba(0, 0, 0, 0.56);
    /* 阴影 */
    --dm-shadow-sm: 0 0.5px 0 rgba(255, 255, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.2);
    --dm-shadow-md: 0 1px 0 rgba(255, 255, 255, 0.02), 0 4px 16px rgba(0, 0, 0, 0.3), 0 24px 64px rgba(0, 0, 0, 0.4);
    --dm-shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.02), 0 4px 16px rgba(0, 0, 0, 0.3), 0 24px 80px rgba(0, 0, 0, 0.5);
    --dm-footer-bg: var(--dm-bg-secondary);
    --dm-footer-bg-secondary: #1f1f1f;
    --dm-footer-text: #f7f8f9;
    --dm-footer-text-secondary: #b2b7bd;
    --dm-footer-border: rgba(255, 255, 255, 0.1);
    --dm-footer-icon-label-bg: rgba(255, 255, 255, 0.08);
    --dm-footer-qr-bg: rgba(255, 255, 255, 0.04);
    --dm-footer-qr-hover-bg: rgba(255, 255, 255, 0.08);
    --dm-footer-qr-hover-border: rgba(255, 255, 255, 0.25);
    --dm-footer-qr-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    --dm-mobile-nav-bg: var(--dm-bg-secondary);
    --dm-mobile-nav-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
    --dm-mobile-nav-text: #f7f8f9;
    --dm-mobile-nav-active: var(--husir-coral);
    --dm-mobile-wechat-panel-bg: #2a2a2a;
    --dm-mobile-wechat-title: #f7f8f9;
    --dm-mobile-wechat-hint: #b2b7bd;
  }

  /* Contact V3 组件暗黑变量（提升特异性至 0,2,0 覆盖组件默认值） */
  html:not(.husir-light) .md-contact-v3 {
    --cv3-social-bg: var(--dm-bg-secondary);
    --cv3-social-heading-color: #f5f5f7;
    --cv3-social-text-color: #86868b;
    --cv3-social-icon-bg: var(--dm-accent-soft);
    --cv3-social-icon-color: var(--dm-accent);
    --cv3-social-icon-border: var(--dm-accent-strong);
    --cv3-social-icon-hover-bg: var(--dm-accent);
    --cv3-social-icon-hover-color: var(--dm-on-accent);
    --cv3-social-icon-img-filter: brightness(1.1) contrast(1.05);
  }

  /* 联系页 <main> 暗黑底色对齐 body：全宽 section 架构下，<main> 自身背景
     会从 section 间隙/子像素缺口透出。全局 main 规则给的是 --dm-bg-secondary
     与 body/hero/primary section 的 --dm-bg 不同，
     跟随 OS 暗黑时会出现内容区底色不统一的断层。
     此处把 main.md-contact-v3 收敛到 --dm-bg，与下方手动分支对称，
     仿 main.md-faq-ipb 的处理（dark-mode-core.css:869 行同模式）。 */
  html:not(.husir-light) main.md-contact-v3 {
    background: var(--dm-bg);
    color: var(--dm-text);
  }

  /* 联系页 Hero 属于主画布，避免沿用次级底色形成整块抬亮色带。 */
  html:not(.husir-light) main.md-contact-v3 .hero {
    background: var(--dm-bg) !important;
  }

  /* 联系页其余一级模块也属于主画布；模块内部卡片继续使用 elevated 表面。 */
  html:not(.husir-light) main.md-contact-v3 > section:not(.hero) {
    background: var(--dm-bg) !important;
  }

  /* 全局 body/main 暗黑样式（与第六节手动分支 html.husir-dark 对称，
     防止跟随 OS 暗黑时大容器底色落空——AGENTS.md 第三节"两套都写"红线：
     系统暗黑时 html 上无 husir-dark 类，靠 html:not(.husir-light) 这一支兜底） */
  html:not(.husir-light) body {
    background: var(--dm-bg);
    color: var(--dm-text);
  }

  html:not(.husir-light) .modern-header,
  html:not(.husir-light) .md-head,
  html:not(.husir-light) .md-foot,
  html:not(.husir-light) main,
  html:not(.husir-light) .com_page,
  html:not(.husir-light) .pad160,
  html:not(.husir-light) .md-home section {
    background-color: var(--dm-bg-secondary);
  }

  /* 首页模块样式在本文件后加载，部分规则曾以硬编码色或更高特异性覆盖公共
     section 规则；指定内容模块需统一对齐主画布 --dm-bg。 */
  html:not(.husir-light) body.custom-override main.md-home > section {
    background: var(--dm-bg-secondary) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home > .home_5 {
    background: var(--dm-bg) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home > section.home_2--asia {
    background: var(--dm-bg) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home > section.ey-about-section {
    background: var(--dm-bg) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home > section.ey-video-section {
    background: var(--dm-bg) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home > section.temp-service-section,
  html:not(.husir-light) body.custom-override main.md-home > section.temp-timeline-section {
    background: var(--dm-bg) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home > section.modern-partners {
    background: var(--dm-bg) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home > section.husir-xl.teaser {
    background: var(--dm-bg) !important;
  }

  /* 手机快捷入口外层属于首页主画布；内部玻璃面板继续承担抬升层级。 */
  html:not(.husir-light) body.custom-override main.md-home > section.hm-quick-grid {
    background: var(--dm-bg) !important;
  }

  /* 首页 <main> 是一级模块间距的透底层。全局 main 规则给的是
     --dm-bg-secondary，husir-xl 等主画布模块是 --dm-bg，Banner 与产品区
     之间的 margin 会露出次级色带。此处与联系页 / FAQ 的 main 收口同模式。 */
  html:not(.husir-light) main.md-home {
    background: var(--dm-bg);
  }

  /* Banner 本身也是主画布层，避免通用 > section 次级底色在图沿或分页处透出。 */
  html:not(.husir-light) body.custom-override main.md-home > section.banner {
    background: var(--dm-bg) !important;
  }

  html:not(.husir-light) .modern-header,
  html:not(.husir-light) .md-head {
    box-shadow: 0 1px 0 var(--dm-divider);
  }

  /* 对抗后加载合并样式 app.core.min.css 里的亮色 !important 白底。
     仅保留当前模板仍在使用的容器，旧 #custom_content 已迁移且无消费者。 */
  html:not(.husir-light) .com_ri,
  html:not(.husir-light) .foot_2,
  html:not(.husir-light) .le_2.f1_mid {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text);
  }

}

/* ----- 三、系统亮色模式强制覆盖 ----- */
/*
  当用户系统处于亮色模式时，即使 html 元素上残留 husir-dark 类
  （来自 localStorage 手动切换），此规则以更高特异性覆盖，
  确保亮色模式下文字始终为深色。
*/
@media (prefers-color-scheme: light) {
  html:not(.husir-dark) {
    color-scheme: light;
    --dm-bg: #ffffff;
    --dm-bg-secondary: #ffffff;
    --dm-bg-elevated: #ffffff;
    --dm-text: #1d1d1f;
    --dm-text-secondary: #636366;
    --dm-text-tertiary: #6e6e73;
    --dm-border: rgba(0, 0, 0, 0.06);
    --dm-divider: rgba(0, 0, 0, 0.08);
    --dm-accent: #c63f00;
    --dm-accent-hover: #b63800;
    --dm-accent-soft: rgba(255, 80, 0, 0.12);
    --dm-accent-glow: rgba(255, 80, 0, 0.16);
    --dm-accent-strong: rgba(255, 80, 0, 0.22);
    --dm-on-accent: #ffffff;
    --dm-focus: #c63f00;
    --dm-bg-hover: rgba(120, 120, 128, 0.06);
    --dm-sf-eco: #d97706;
    --dm-sf-eco-alt: #f59e0b;
    --dm-sf-eco-soft: rgba(217, 119, 6, 0.1);
    --dm-sf-chain: #2563eb;
    --dm-sf-chain-alt: #60a5fa;
    --dm-sf-chain-soft: rgba(37, 99, 235, 0.1);
    --dm-sf-direct: #0d9488;
    --dm-sf-direct-alt: #14b8a6;
    --dm-sf-direct-soft: rgba(13, 148, 136, 0.1);
    --dm-sf-fresh: #e11d48;
    --dm-sf-fresh-alt: #fb7185;
    --dm-sf-fresh-soft: rgba(225, 29, 72, 0.1);
    --dm-sf-success-soft: rgba(16, 185, 129, 0.1);
    --dm-sf-success-border: rgba(16, 185, 129, 0.2);
    --dm-sf-warning-soft: rgba(245, 158, 11, 0.08);
    --dm-sf-warning-border: rgba(245, 158, 11, 0.2);
    --dm-sf-on-image: #ffffff;
    --dm-sf-on-image-muted: rgba(255, 255, 255, 0.85);
    --dm-sf-on-image-chip: rgba(255, 255, 255, 0.2);
    --dm-sf-on-image-accent: #ffb88c;
    --dm-sf-on-image-success: #6ee7b7;
    --dm-sf-overlay-strong: rgba(0, 0, 0, 0.6);
    --dm-sf-overlay-soft: rgba(0, 0, 0, 0.15);
    --dm-ho-brand-overlay-gradient: linear-gradient(90deg, transparent, transparent);
    --dm-ho-brand-overlay-color: transparent;
    --dm-ho-brand-overlay-soft: transparent;
    --dm-glass: rgba(255, 255, 255, 0.78);
    --dm-glass-scrolled: rgba(255, 255, 255, 0.72);
    --dm-glass-pill: rgba(255, 255, 255, 0.68);
    --dm-overlay: rgba(255, 255, 255, 0.96);
    --dm-backdrop: rgba(29, 29, 31, 0.32);
    --dm-shadow-sm: 0 0.5px 0 rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 20px rgba(0, 0, 0, 0.02);
    --dm-shadow-md: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.04), 0 24px 64px rgba(0, 0, 0, 0.08);
    --dm-shadow-lg: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.04), 0 24px 80px rgba(0, 0, 0, 0.12);
    /* Footer 亮色模式 */
    --dm-footer-bg: #ffffff;
    --dm-footer-bg-secondary: #e8e8ed;
    --dm-footer-text: #1d1d1f;
    --dm-footer-text-secondary: #636366;
    --dm-footer-border: rgba(0, 0, 0, 0.08);
    --dm-footer-icon-label-bg: rgba(0, 0, 0, 0.04);
    --dm-footer-qr-bg: rgba(0, 0, 0, 0.02);
    --dm-footer-qr-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-footer-qr-hover-border: rgba(0, 0, 0, 0.15);
    --dm-footer-qr-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    --dm-mobile-nav-bg: #ffffff;
    --dm-mobile-nav-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
    --dm-mobile-nav-text: #111111;
    --dm-mobile-nav-active: var(--husir-coral);
    --dm-mobile-wechat-panel-bg: #ffffff;
    --dm-mobile-wechat-title: #1a1a1a;
    --dm-mobile-wechat-hint: #0369a1;
  }

  /* 浮栏显式切换亮色时的强覆盖 */
  html.husir-light {
    color-scheme: light;
    --dm-bg: #ffffff;
    --dm-bg-secondary: #ffffff;
    --dm-bg-elevated: #ffffff;
    --dm-text: #1d1d1f;
    --dm-text-secondary: #636366;
    --dm-text-tertiary: #6e6e73;
    --dm-border: rgba(0, 0, 0, 0.06);
    --dm-divider: rgba(0, 0, 0, 0.08);
    --dm-accent: #c63f00;
    --dm-accent-hover: #b63800;
    --dm-accent-soft: rgba(255, 80, 0, 0.12);
    --dm-accent-glow: rgba(255, 80, 0, 0.16);
    --dm-accent-strong: rgba(255, 80, 0, 0.22);
    --dm-on-accent: #ffffff;
    --dm-focus: #c63f00;
    --dm-bg-hover: rgba(120, 120, 128, 0.06);
    --dm-sf-eco: #d97706;
    --dm-sf-eco-alt: #f59e0b;
    --dm-sf-eco-soft: rgba(217, 119, 6, 0.1);
    --dm-sf-chain: #2563eb;
    --dm-sf-chain-alt: #60a5fa;
    --dm-sf-chain-soft: rgba(37, 99, 235, 0.1);
    --dm-sf-direct: #0d9488;
    --dm-sf-direct-alt: #14b8a6;
    --dm-sf-direct-soft: rgba(13, 148, 136, 0.1);
    --dm-sf-fresh: #e11d48;
    --dm-sf-fresh-alt: #fb7185;
    --dm-sf-fresh-soft: rgba(225, 29, 72, 0.1);
    --dm-sf-success-soft: rgba(16, 185, 129, 0.1);
    --dm-sf-success-border: rgba(16, 185, 129, 0.2);
    --dm-sf-warning-soft: rgba(245, 158, 11, 0.08);
    --dm-sf-warning-border: rgba(245, 158, 11, 0.2);
    --dm-sf-on-image: #ffffff;
    --dm-sf-on-image-muted: rgba(255, 255, 255, 0.85);
    --dm-sf-on-image-chip: rgba(255, 255, 255, 0.2);
    --dm-sf-on-image-accent: #ffb88c;
    --dm-sf-on-image-success: #6ee7b7;
    --dm-sf-overlay-strong: rgba(0, 0, 0, 0.6);
    --dm-sf-overlay-soft: rgba(0, 0, 0, 0.15);
    --dm-ho-brand-overlay-gradient: linear-gradient(90deg, transparent, transparent);
    --dm-ho-brand-overlay-color: transparent;
    --dm-ho-brand-overlay-soft: transparent;
    --dm-glass: rgba(255, 255, 255, 0.78);
    --dm-glass-scrolled: rgba(255, 255, 255, 0.72);
    --dm-glass-pill: rgba(255, 255, 255, 0.68);
    --dm-overlay: rgba(255, 255, 255, 0.96);
    --dm-backdrop: rgba(29, 29, 31, 0.32);
    --dm-shadow-sm: 0 0.5px 0 rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 20px rgba(0, 0, 0, 0.02);
    --dm-shadow-md: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.04), 0 24px 64px rgba(0, 0, 0, 0.08);
    --dm-shadow-lg: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.04), 0 24px 80px rgba(0, 0, 0, 0.12);
    /* Footer 亮色模式 */
    --dm-footer-bg: #ffffff;
    --dm-footer-bg-secondary: #e8e8ed;
    --dm-footer-text: #1d1d1f;
    --dm-footer-text-secondary: #636366;
    --dm-footer-border: rgba(0, 0, 0, 0.08);
    --dm-footer-icon-label-bg: rgba(0, 0, 0, 0.04);
    --dm-footer-qr-bg: rgba(0, 0, 0, 0.02);
    --dm-footer-qr-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-footer-qr-hover-border: rgba(0, 0, 0, 0.15);
    --dm-footer-qr-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    --dm-mobile-nav-bg: #ffffff;
    --dm-mobile-nav-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
    --dm-mobile-nav-text: #111111;
    --dm-mobile-nav-active: var(--husir-coral);
    --dm-mobile-wechat-panel-bg: #ffffff;
    --dm-mobile-wechat-title: #1a1a1a;
    --dm-mobile-wechat-hint: #0369a1;
  }
}

/* ----- 四、系统暗黑 + 浮栏手动切换亮色 ----- */
/*
  当系统为暗黑模式但用户通过浮栏切换为亮色时，
  husir-light 类以同等特异性 + 声明在后胜出。
*/
@media (prefers-color-scheme: dark) {
  html.husir-light {
    color-scheme: light;
    --dm-bg: #ffffff;
    --dm-bg-secondary: #ffffff;
    --dm-bg-elevated: #ffffff;
    --dm-text: #1d1d1f;
    --dm-text-secondary: #636366;
    --dm-text-tertiary: #6e6e73;
    --dm-border: rgba(0, 0, 0, 0.06);
    --dm-divider: rgba(0, 0, 0, 0.08);
    --dm-accent: #c63f00;
    --dm-accent-hover: #b63800;
    --dm-accent-soft: rgba(255, 80, 0, 0.12);
    --dm-accent-glow: rgba(255, 80, 0, 0.16);
    --dm-accent-strong: rgba(255, 80, 0, 0.22);
    --dm-on-accent: #ffffff;
    --dm-focus: #c63f00;
    --dm-bg-hover: rgba(120, 120, 128, 0.06);
    --dm-sf-eco: #d97706;
    --dm-sf-eco-alt: #f59e0b;
    --dm-sf-eco-soft: rgba(217, 119, 6, 0.1);
    --dm-sf-chain: #2563eb;
    --dm-sf-chain-alt: #60a5fa;
    --dm-sf-chain-soft: rgba(37, 99, 235, 0.1);
    --dm-sf-direct: #0d9488;
    --dm-sf-direct-alt: #14b8a6;
    --dm-sf-direct-soft: rgba(13, 148, 136, 0.1);
    --dm-sf-fresh: #e11d48;
    --dm-sf-fresh-alt: #fb7185;
    --dm-sf-fresh-soft: rgba(225, 29, 72, 0.1);
    --dm-sf-success-soft: rgba(16, 185, 129, 0.1);
    --dm-sf-success-border: rgba(16, 185, 129, 0.2);
    --dm-sf-warning-soft: rgba(245, 158, 11, 0.08);
    --dm-sf-warning-border: rgba(245, 158, 11, 0.2);
    --dm-sf-on-image: #ffffff;
    --dm-sf-on-image-muted: rgba(255, 255, 255, 0.85);
    --dm-sf-on-image-chip: rgba(255, 255, 255, 0.2);
    --dm-sf-on-image-accent: #ffb88c;
    --dm-sf-on-image-success: #6ee7b7;
    --dm-sf-overlay-strong: rgba(0, 0, 0, 0.6);
    --dm-sf-overlay-soft: rgba(0, 0, 0, 0.15);
    --dm-glass: rgba(255, 255, 255, 0.78);
    --dm-glass-scrolled: rgba(255, 255, 255, 0.72);
    --dm-glass-pill: rgba(255, 255, 255, 0.68);
    --dm-overlay: rgba(255, 255, 255, 0.96);
    --dm-backdrop: rgba(29, 29, 31, 0.32);
    --dm-shadow-sm: 0 0.5px 0 rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 20px rgba(0, 0, 0, 0.02);
    --dm-shadow-md: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.04), 0 24px 64px rgba(0, 0, 0, 0.08);
    --dm-shadow-lg: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.04), 0 24px 80px rgba(0, 0, 0, 0.12);
    /* Footer 亮色模式 */
    --dm-footer-bg: #ffffff;
    --dm-footer-bg-secondary: #e8e8ed;
    --dm-footer-text: #1d1d1f;
    --dm-footer-text-secondary: #636366;
    --dm-footer-border: rgba(0, 0, 0, 0.08);
    --dm-footer-icon-label-bg: rgba(0, 0, 0, 0.04);
    --dm-footer-qr-bg: rgba(0, 0, 0, 0.02);
    --dm-footer-qr-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-footer-qr-hover-border: rgba(0, 0, 0, 0.15);
    --dm-footer-qr-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    --dm-mobile-nav-bg: #ffffff;
    --dm-mobile-nav-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
    --dm-mobile-nav-text: #111111;
    --dm-mobile-nav-active: var(--husir-coral);
    --dm-mobile-wechat-panel-bg: #ffffff;
    --dm-mobile-wechat-title: #1a1a1a;
    --dm-mobile-wechat-hint: #0369a1;
  }
}

/* ----- 五、手动切换暗黑（最高优先级）----- */
/*
  浮栏 .husir-dark 类，不受系统媒体查询约束。
  当用户手动选择暗黑模式时，此规则覆盖一切。
*/
html.husir-dark {
  color-scheme: dark;
  /* 与系统暗黑分支完全对称的克制暖棕色阶。 */
  --dm-bg: #221d18;
  --dm-bg-secondary: #2b2520;
  --dm-bg-elevated: #342d27;
  /* color-mix 表面派生层（与系统暗黑块对称，手动切换暗黑时同样可用） */
  --dm-bg-tint: color-mix(in srgb, var(--dm-bg) 90%, var(--dm-accent) 4%);
  --dm-bg-lift: color-mix(in srgb, var(--dm-bg) 82%, #ffffff 6%);
  --dm-surface-1: color-mix(in srgb, var(--dm-bg-secondary) 88%, var(--dm-accent) 4%);
  --dm-accent-tint-8: color-mix(in srgb, var(--dm-accent) 8%, transparent);
  --dm-accent-tint-12: color-mix(in srgb, var(--dm-accent) 12%, transparent);
  --dm-on-bg-border: color-mix(in srgb, currentColor 10%, transparent);
  --dm-text: #f7f8f9;
  --dm-text-secondary: #b2b7bd;
  --dm-text-tertiary: #8d939a;
  --dm-border: rgba(255, 255, 255, 0.1);
  --dm-divider: rgba(255, 255, 255, 0.12);
  /* 与系统暗黑保持同一套品牌橙令牌，手动切换不出现色相跳变。 */
  --dm-accent: #ff6200;
  --dm-accent-hover: #ff7a1a;
  --dm-accent-soft: rgba(255, 98, 0, 0.18);
  --dm-accent-glow: rgba(255, 98, 0, 0.24);
  --dm-accent-strong: rgba(255, 98, 0, 0.3);
  --dm-on-accent: #151515;
  --dm-accent-on-dark: #ff9347;
  --dm-on-accent-on-dark: #151515;
  --dm-focus: #ff8a33;
  --dm-bg-hover: rgba(120, 120, 128, 0.16);
  /* 与系统暗黑分支保持同一组状态 token，避免手动切换后状态色回退亮色值。 */
  --dm-error: #ff6961;
  --dm-error-bg: rgba(255, 69, 58, 0.15);
  --dm-error-border: rgba(255, 69, 58, 0.3);
  --dm-success: #34d399;
  --dm-warning: #fbbf24;
  --dm-ho-brand-overlay-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 34%, rgba(0, 0, 0, 0.22));
  --dm-ho-brand-overlay-color: rgba(0, 0, 0, 0.1);
  --dm-ho-brand-overlay-soft: rgba(0, 0, 0, 0.04);
  --dm-glass: rgba(21, 21, 21, 0.82);
  --dm-glass-scrolled: rgba(21, 21, 21, 0.9);
  --dm-glass-pill: rgba(42, 42, 42, 0.82);
  --dm-overlay: rgba(42, 42, 42, 0.97);
  --dm-backdrop: rgba(0, 0, 0, 0.56);
  --dm-shadow-sm: 0 0.5px 0 rgba(255, 255, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.2);
  --dm-shadow-md: 0 1px 0 rgba(255, 255, 255, 0.02), 0 4px 16px rgba(0, 0, 0, 0.3), 0 24px 64px rgba(0, 0, 0, 0.4);
  --dm-shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.02), 0 4px 16px rgba(0, 0, 0, 0.3), 0 24px 80px rgba(0, 0, 0, 0.5);
  --dm-footer-bg: var(--dm-bg-secondary);
  --dm-footer-bg-secondary: #1f1f1f;
  --dm-footer-text: #f7f8f9;
  --dm-footer-text-secondary: #b2b7bd;
  --dm-footer-border: rgba(255, 255, 255, 0.1);
  --dm-footer-icon-label-bg: rgba(255, 255, 255, 0.08);
  --dm-footer-qr-bg: rgba(255, 255, 255, 0.04);
  --dm-footer-qr-hover-bg: rgba(255, 255, 255, 0.08);
  --dm-footer-qr-hover-border: rgba(255, 255, 255, 0.25);
  --dm-footer-qr-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  --dm-mobile-nav-bg: var(--dm-bg-secondary);
  --dm-mobile-nav-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
  --dm-mobile-nav-text: #f7f8f9;
  --dm-mobile-nav-active: var(--husir-coral);
  --dm-mobile-wechat-panel-bg: #2a2a2a;
  --dm-mobile-wechat-title: #f7f8f9;
  --dm-mobile-wechat-hint: #b2b7bd;
}

/* Contact V3 组件暗黑变量 — 手动切换（提升特异性至 0,2,0） */
html.husir-dark .md-contact-v3 {
  --cv3-social-bg: var(--dm-bg-secondary);
  --cv3-social-heading-color: #f5f5f7;
  --cv3-social-text-color: #86868b;
  --cv3-social-icon-bg: var(--dm-accent-soft);
  --cv3-social-icon-color: var(--dm-accent);
  --cv3-social-icon-border: var(--dm-accent-strong);
  --cv3-social-icon-hover-bg: var(--dm-accent);
  --cv3-social-icon-hover-color: var(--dm-on-accent);
  --cv3-social-icon-img-filter: brightness(1.1) contrast(1.05);
}

/* 联系页 <main> 暗黑底色对齐 body（手动分支，与上方系统暗黑分支对称）。
   见上方系统分支同名规则的注释说明。 */
html.husir-dark main.md-contact-v3 {
  background: var(--dm-bg);
  color: var(--dm-text);
}

/* 手动暗黑与系统暗黑对称，Hero 外层跟随联系页主画布。 */
html.husir-dark main.md-contact-v3 .hero {
  background: var(--dm-bg) !important;
}

/* 手动暗黑与系统暗黑对称，统一 Hero 以下一级模块外层底色。 */
html.husir-dark main.md-contact-v3 > section:not(.hero) {
  background: var(--dm-bg) !important;
}

/* ----- 六、全局 body/main 暗黑样式 ----- */
html.husir-dark body {
  background: var(--dm-bg);
  color: var(--dm-text);
}

/* 注：modern-header 导航的 --nav-* 暗黑变量定义保留在 header-refactor.css
   （系统暗黑 @media 分支 + 手动暗黑 html.husir-dark 分支，变量名为
   --nav-active-text / --nav-active-bg / --nav-border / --nav-hover-bg）。
   该文件与 modern-header 的消费规则同处，就近维护更清晰，未迁入本文件。 */

html.husir-dark .modern-header,
html.husir-dark .md-head,
html.husir-dark .md-foot,
html.husir-dark main,
html.husir-dark .com_page,
html.husir-dark .pad160,
html.husir-dark .md-home section {
  background-color: var(--dm-bg-secondary);
}

/* 顶部现代导航是页面壳体的一部分，暗黑下直接使用主画布色，避免被通用
   --dm-bg-secondary 规则抬亮一层。 */
html.husir-dark .modern-header {
  background-color: var(--dm-bg);
}

@media (prefers-color-scheme: dark) {
  html:not(.husir-light) .modern-header {
    background-color: var(--dm-bg);
  }
}

/* 与系统暗黑分支对称：指定首页内容模块使用主画布底色。 */
html.husir-dark body.custom-override main.md-home > section {
  background: var(--dm-bg-secondary) !important;
}

html.husir-dark body.custom-override main.md-home > .home_5 {
  background: var(--dm-bg) !important;
}

html.husir-dark body.custom-override main.md-home > section.home_2--asia {
  background: var(--dm-bg) !important;
}

html.husir-dark body.custom-override main.md-home > section.ey-about-section {
  background: var(--dm-bg) !important;
}

html.husir-dark body.custom-override main.md-home > section.ey-video-section {
  background: var(--dm-bg) !important;
}

html.husir-dark body.custom-override main.md-home > section.temp-service-section,
html.husir-dark body.custom-override main.md-home > section.temp-timeline-section {
  background: var(--dm-bg) !important;
}

html.husir-dark body.custom-override main.md-home > section.modern-partners {
  background: var(--dm-bg) !important;
}

html.husir-dark body.custom-override main.md-home > section.husir-xl.teaser {
  background: var(--dm-bg) !important;
}

/* 手动暗黑与系统暗黑保持同一主画布，避免快捷入口下方出现次级底色横带。 */
html.husir-dark body.custom-override main.md-home > section.hm-quick-grid {
  background: var(--dm-bg) !important;
}

/* 手动分支与上方系统分支对称：首页 main / Banner 对齐主画布，避免模块间距透出次级底。 */
html.husir-dark main.md-home {
  background: var(--dm-bg);
}

html.husir-dark body.custom-override main.md-home > section.banner {
  background: var(--dm-bg) !important;
}

html.husir-dark .modern-header,
html.husir-dark .md-head {
  box-shadow: 0 1px 0 var(--dm-divider);
}

html.husir-dark .com_ri,
html.husir-dark .foot_2,
html.husir-dark .le_2.f1_mid {
  background-color: var(--dm-bg-secondary) !important;
  color: var(--dm-text);
}

/* FAQ 页（lists_article_ipb）：全宽 section 架构，仿联系页 */
@media (prefers-color-scheme: dark) {
  html:not(.husir-light) main.md-faq-ipb {
    background: var(--dm-bg);
    color: var(--dm-text);
  }

  html:not(.husir-light) main.md-faq-ipb .md-faq-ipb__sec {
    background-color: var(--dm-bg-secondary);
  }

  /* 新客服务摘要外层属于页面主画布，摘要卡内部继续使用 elevated 表面。 */
  html:not(.husir-light) main.md-faq-ipb .md-faq-ipb__facts {
    background-color: var(--dm-bg) !important;
  }

  /* 引导页其余一级模块也属于主画布；服务流程/FAQ 内部面板继续按组件层级抬升。 */
  html:not(.husir-light) main.md-faq-ipb > section:not(.md-faq-ipb__facts) {
    background-color: var(--dm-bg) !important;
  }

}

html.husir-dark main.md-faq-ipb {
  background: var(--dm-bg);
  color: var(--dm-text);
}

html.husir-dark main.md-faq-ipb .md-faq-ipb__sec {
  background-color: var(--dm-bg-secondary);
}

/* 手动暗黑与系统暗黑对称，服务摘要外层跟随主画布。 */
html.husir-dark main.md-faq-ipb .md-faq-ipb__facts {
  background-color: var(--dm-bg) !important;
}

/* 手动暗黑与系统暗黑对称，统一摘要以下一级模块为主画布底色。 */
html.husir-dark main.md-faq-ipb > section:not(.md-faq-ipb__facts) {
  background-color: var(--dm-bg) !important;
}

/* 品蟹学院新闻页组件变量，组件 CSS 只消费 --news-*，暗黑值集中在此维护 */
@media (prefers-color-scheme: dark) {
  html:not(.husir-light) .md-news_list {
    --news-page-bg: var(--dm-bg);
    --news-hero-bg: var(--dm-bg);
    --news-section-bg: var(--dm-bg);
    --news-surface: var(--dm-bg-secondary);
    --news-surface-soft: var(--dm-bg-elevated);
    --news-glass: var(--dm-bg-secondary);
    --news-control-bg: var(--dm-bg-elevated);
    --news-overlay-bg: var(--dm-bg-elevated);
    --news-mobile-list-bg: var(--dm-bg);
    --news-text: var(--dm-text);
    --news-text-strong: var(--dm-text);
    --news-text-muted: var(--dm-text-secondary);
    --news-text-soft: color-mix(in srgb, var(--dm-text-tertiary) 72%, var(--dm-text-secondary) 28%);
    --news-border: var(--dm-border);
    --news-border-soft: var(--dm-border);
    --news-divider: var(--dm-divider);
    --news-glass-highlight: var(--dm-border);
    --news-control-highlight: var(--dm-border);
    --news-card-bg: var(--dm-bg-elevated);
    --news-card-border: var(--dm-border);
    --news-card-hover-border: color-mix(in srgb, var(--dm-accent) 28%, var(--dm-border));
    --news-history-section-bg: var(--dm-bg);
    --news-history-container-bg: var(--dm-bg-secondary);
    --news-history-card-bg: var(--dm-bg-elevated);
    --news-history-dot-ring: var(--dm-bg);
    /* 搜索按钮直接消费全站动作令牌，避免局部混入独立中性灰。 */
    --news-action-bg: var(--dm-action-bg);
    --news-action-hover-bg: var(--dm-action-bg-hover);
    --news-action-shadow: 0 12px 26px var(--dm-accent-glow);
    /* 分页当前页与亮色一致：强调色底 + on-accent 字，外壳消费 control 令牌。 */
    --news-pagination-shell-bg: var(--dm-bg-elevated);
    --news-pagination-shell-border: var(--dm-divider);
    --news-pagination-shell-shadow: none;
    --news-pagination-active-bg: var(--dm-accent);
    --news-pagination-active-border: transparent;
    --news-pagination-active-text: var(--dm-on-accent);
    --news-pagination-active-shadow: none;
    --news-shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 var(--news-glass-highlight);
    --news-shadow-soft: var(--dm-shadow-md);
    --news-shadow-hover: var(--dm-shadow-lg);
    --news-on-accent: var(--dm-on-accent);
    --primary: var(--dm-accent);
    --primary-hover: var(--dm-accent-hover);
    --primary-bg: var(--dm-accent-soft);
    --primary-glow: var(--dm-accent-glow);
  }

  html:not(.husir-light) main.md-news_list {
    background: var(--news-page-bg);
  }
}

html.husir-dark .md-news_list {
  --news-page-bg: var(--dm-bg);
  --news-hero-bg: var(--dm-bg);
  --news-section-bg: var(--dm-bg);
  --news-surface: var(--dm-bg-secondary);
  --news-surface-soft: var(--dm-bg-elevated);
  --news-glass: var(--dm-bg-secondary);
  --news-control-bg: var(--dm-bg-elevated);
  --news-overlay-bg: var(--dm-bg-elevated);
  --news-mobile-list-bg: var(--dm-bg);
  --news-text: var(--dm-text);
  --news-text-strong: var(--dm-text);
  --news-text-muted: var(--dm-text-secondary);
  --news-text-soft: color-mix(in srgb, var(--dm-text-tertiary) 72%, var(--dm-text-secondary) 28%);
  --news-border: var(--dm-border);
  --news-border-soft: var(--dm-border);
  --news-divider: var(--dm-divider);
  --news-glass-highlight: var(--dm-border);
  --news-control-highlight: var(--dm-border);
  --news-card-bg: var(--dm-bg-elevated);
  --news-card-border: var(--dm-border);
  --news-card-hover-border: color-mix(in srgb, var(--dm-accent) 28%, var(--dm-border));
  --news-history-section-bg: var(--dm-bg);
  --news-history-container-bg: var(--dm-bg-secondary);
  --news-history-card-bg: var(--dm-bg-elevated);
  --news-history-dot-ring: var(--dm-bg);
  /* 与系统暗黑分支一致，搜索按钮直接消费全站动作令牌。 */
  --news-action-bg: var(--dm-action-bg);
  --news-action-hover-bg: var(--dm-action-bg-hover);
  --news-action-shadow: 0 12px 26px var(--dm-accent-glow);
  /* 与系统暗黑分支一致：强调色底 + on-accent 字，外壳消费 control 令牌。 */
  --news-pagination-shell-bg: var(--dm-bg-elevated);
  --news-pagination-shell-border: var(--dm-divider);
  --news-pagination-shell-shadow: none;
  --news-pagination-active-bg: var(--dm-accent);
  --news-pagination-active-border: transparent;
  --news-pagination-active-text: var(--dm-on-accent);
  --news-pagination-active-shadow: none;
  --news-shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 var(--news-glass-highlight);
  --news-shadow-soft: var(--dm-shadow-md);
  --news-shadow-hover: var(--dm-shadow-lg);
  --news-on-accent: var(--dm-on-accent);
  --primary: var(--dm-accent);
  --primary-hover: var(--dm-accent-hover);
  --primary-bg: var(--dm-accent-soft);
  --primary-glow: var(--dm-accent-glow);
}

html.husir-dark main.md-news_list {
  background: var(--news-page-bg);
}

/* FAQ 组件暗黑变量（ipb-faq.css 组件级，仅注册无法通过 --dm-* 自动继承的值） */
@media (prefers-color-scheme: dark) {
  html:not(.husir-light) .ipb-faq-module {
    --ipb-faq-bg-answer: rgba(255, 255, 255, 0.06);
    --ipb-faq-text-secondary: #e5e5ea;
    --ipb-faq-answer-th-bg: rgba(255, 255, 255, 0.1);
    --ipb-faq-answer-quote-bg: var(--dm-accent-soft);
    --ipb-faq-answer-link-underline: var(--dm-accent-strong);
    --ipb-faq-answer-scrollbar: rgba(152, 152, 157, 0.45);
    --ipb-faq-accent-coral-bg-strong: var(--dm-accent-strong);
    --ipb-faq-accent-coral-shadow: var(--dm-accent-glow);
    --ipb-faq-accent-coral-shadow-strong: var(--dm-accent-strong);
    --ipb-faq-accent: var(--dm-accent);
    --ipb-faq-star-idle: #636366;
    --ipb-faq-modal-close-bg: var(--dm-bg-secondary);
    --ipb-faq-modal-close-bg-hover: var(--dm-bg-hover, #3a3a3c);
    --ipb-faq-modal-close-ink: var(--dm-text-secondary);
    --ipb-faq-modal-qr-bg: var(--dm-bg-secondary);
  }
}

html.husir-dark .ipb-faq-module {
  --ipb-faq-bg-answer: rgba(255, 255, 255, 0.06);
  --ipb-faq-text-secondary: #e5e5ea;
  --ipb-faq-answer-th-bg: rgba(255, 255, 255, 0.1);
  --ipb-faq-answer-quote-bg: var(--dm-accent-soft);
  --ipb-faq-answer-link-underline: var(--dm-accent-strong);
  --ipb-faq-answer-scrollbar: rgba(152, 152, 157, 0.45);
  --ipb-faq-accent-coral-bg-strong: var(--dm-accent-strong);
  --ipb-faq-accent-coral-shadow: var(--dm-accent-glow);
  --ipb-faq-accent-coral-shadow-strong: var(--dm-accent-strong);
  --ipb-faq-accent: var(--dm-accent);
  --ipb-faq-star-idle: #636366;
  --ipb-faq-modal-close-bg: var(--dm-bg-secondary);
  --ipb-faq-modal-close-bg-hover: var(--dm-bg-hover, #3a3a3c);
  --ipb-faq-modal-close-ink: var(--dm-text-secondary);
  --ipb-faq-modal-qr-bg: var(--dm-bg-secondary);
}

/* FAQ 答案区 CMS 富文本暗黑覆盖（后台常带内联 style="color:#333" / 白底） */
@media (prefers-color-scheme: dark) {
  html:not(.husir-light) .ipb-faq-module .faq-answer,
  html:not(.husir-light) .ipb-faq-module .faq-answer * {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  html:not(.husir-light) .ipb-faq-module .faq-answer {
    background: var(--ipb-faq-bg-answer) !important;
    color: var(--ipb-faq-text-secondary) !important;
    color-scheme: dark;
  }

  html:not(.husir-light) .ipb-faq-module .faq-answer :is(p, li, span, div, td, font, em, i, u, s, small, label) {
    color: var(--ipb-faq-text-secondary) !important;
  }

  html:not(.husir-light) .ipb-faq-module .faq-answer :is(h1, h2, h3, h4, h5, h6, strong, b, th) {
    color: var(--ipb-faq-text-primary) !important;
  }

  html:not(.husir-light) .ipb-faq-module .faq-answer a {
    color: var(--ipb-faq-accent) !important;
  }

  html:not(.husir-light) .ipb-faq-module .faq-answer blockquote {
    border-color: var(--ipb-faq-separator) !important;
    background: var(--ipb-faq-answer-quote-bg) !important;
    color: var(--ipb-faq-text-secondary) !important;
  }

  html:not(.husir-light) .ipb-faq-module .faq-answer table {
    border-color: var(--ipb-faq-separator) !important;
  }

  html:not(.husir-light) .ipb-faq-module .faq-answer th {
    background: var(--ipb-faq-answer-th-bg) !important;
  }

  html:not(.husir-light) .ipb-faq-module .faq-answer td {
    border-bottom-color: var(--ipb-faq-separator) !important;
  }

  /* 答案区图片不受全站暗黑图片降亮影响。 */
  html:not(.husir-light) .ipb-faq-module .faq-answer img {
    filter: none !important;
    opacity: 1 !important;
  }
}

/* 手动暗黑不能嵌进系统媒体查询；否则 OS 亮色时 CMS 内联白底会穿透。 */
html.husir-dark .ipb-faq-module .faq-answer,
html.husir-dark .ipb-faq-module .faq-answer * {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.husir-dark .ipb-faq-module .faq-answer {
  background: var(--ipb-faq-bg-answer) !important;
  color: var(--ipb-faq-text-secondary) !important;
  color-scheme: dark;
}

html.husir-dark .ipb-faq-module .faq-answer :is(p, li, span, div, td, font, em, i, u, s, small, label) {
  color: var(--ipb-faq-text-secondary) !important;
}

html.husir-dark .ipb-faq-module .faq-answer :is(h1, h2, h3, h4, h5, h6, strong, b, th) {
  color: var(--ipb-faq-text-primary) !important;
}

html.husir-dark .ipb-faq-module .faq-answer a {
  color: var(--ipb-faq-accent) !important;
}

html.husir-dark .ipb-faq-module .faq-answer blockquote {
  border-color: var(--ipb-faq-separator) !important;
  background: var(--ipb-faq-answer-quote-bg) !important;
  color: var(--ipb-faq-text-secondary) !important;
}

html.husir-dark .ipb-faq-module .faq-answer table {
  border-color: var(--ipb-faq-separator) !important;
}

html.husir-dark .ipb-faq-module .faq-answer th {
  background: var(--ipb-faq-answer-th-bg) !important;
}

html.husir-dark .ipb-faq-module .faq-answer td {
  border-bottom-color: var(--ipb-faq-separator) !important;
}

html.husir-dark .ipb-faq-module .faq-answer img {
  filter: none !important;
  opacity: 1 !important;
}

/* 浮栏显式切换亮色时的 CMS 内容覆盖 */
html.husir-light .ipb-faq-module .faq-answer,
html.husir-light .ipb-faq-module .faq-answer * {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.husir-light .ipb-faq-module .faq-answer {
  background: var(--ipb-faq-bg-answer) !important;
  color: var(--ipb-faq-text-secondary) !important;
}

html.husir-light .ipb-faq-module .faq-answer :is(p, li, span, div, td, font, em, i, u, s, small, label) {
  color: var(--ipb-faq-text-secondary) !important;
}

html.husir-light .ipb-faq-module .faq-answer :is(h1, h2, h3, h4, h5, h6, strong, b, th) {
  color: var(--ipb-faq-text-primary) !important;
}

html.husir-light .ipb-faq-module .faq-answer a {
  color: var(--ipb-faq-accent) !important;
}

html.husir-light .ipb-faq-module .faq-answer blockquote {
  border-color: var(--ipb-faq-separator) !important;
  background: var(--ipb-faq-answer-quote-bg) !important;
  color: var(--ipb-faq-text-secondary) !important;
}

html.husir-light .ipb-faq-module .faq-answer table {
  border-color: var(--ipb-faq-separator) !important;
}

html.husir-light .ipb-faq-module .faq-answer th {
  background: var(--ipb-faq-answer-th-bg) !important;
}

html.husir-light .ipb-faq-module .faq-answer td {
  border-bottom-color: var(--ipb-faq-separator) !important;
}

/* ----- 六-B、新 Apple 页脚暗黑适配 ----- */
/* Apple footer 的页面级画布对齐统一由后加载的 footer-apple-v2.css 持有，
   避免 core 与组件文件双 owner 互相依赖 !important。 */

/* footer-apple-v2 异步加载；二维码首帧先使用最终尺寸与主题边框，
   避免刷新恢复滚动位置时出现无样式堆叠或近黑描边。 */
.custom-override .footer-qr-section {
  float: right;
  width: 50%;
}

.custom-override .qr-grid::after {
  content: "";
  display: table;
  clear: both;
}

.custom-override .qr-item {
  float: left;
  width: 31%;
  margin-right: 3%;
  text-align: center;
}

.custom-override .qr-item:last-child {
  margin-right: 0;
}

.custom-override .qr-wrapper {
  padding: 8px;
  border: 1px solid var(--dm-footer-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  background: var(--dm-footer-qr-bg, rgba(0, 0, 0, 0.02));
}

.custom-override .qr-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

@media (max-width: 833px) {
  body.custom-override .apple-footer {
    display: none;
  }
}

@media (max-width: 920px) {
  .custom-override .footer-qr-section {
    float: none;
    width: 100%;
    margin-bottom: 40px;
  }
}

@media (max-width: 576px) {
  .custom-override .footer-qr-section .qr-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 390px;
    margin: 0 auto;
  }

  .custom-override .qr-item {
    float: none;
    width: auto;
    margin-right: 0;
  }
}

/* ----- 六-C、pc-float-bar 组件暗黑变量 ----- */
/* 浮栏颜色 token 与主题图标状态机统一由 app-core-overrides.css 持有。 */

/* ----- 七、隐私弹窗富文本暗黑适配 ----- */
@media (prefers-color-scheme: dark) {
  html:not(.husir-light) #privacyModal .modal-article-body,
  html:not(.husir-light) #privacyModal .modal-article-body *:not(a):not(img) {
    color: var(--dm-text-secondary) !important;
    background-color: transparent !important;
    border-color: var(--dm-divider) !important;
  }

  html:not(.husir-light) #privacyModal .modal-article-body h1,
  html:not(.husir-light) #privacyModal .modal-article-body h2,
  html:not(.husir-light) #privacyModal .modal-article-body h3,
  html:not(.husir-light) #privacyModal .modal-article-body h4,
  html:not(.husir-light) #privacyModal .modal-article-body strong,
  html:not(.husir-light) #privacyModal .modal-article-body b {
    color: var(--dm-text) !important;
  }

  html:not(.husir-light) #privacyModal .modal-article-body a {
    color: var(--dm-accent) !important;
  }

  html:not(.husir-light) #privacyModal .modal-article-body table,
  html:not(.husir-light) #privacyModal .modal-article-body td,
  html:not(.husir-light) #privacyModal .modal-article-body th {
    border-color: var(--dm-divider) !important;
  }
}

html.husir-dark #privacyModal .modal-article-body,
html.husir-dark #privacyModal .modal-article-body *:not(a):not(img) {
  color: var(--dm-text-secondary) !important;
  background-color: transparent !important;
  border-color: var(--dm-divider) !important;
}

html.husir-dark #privacyModal .modal-article-body h1,
html.husir-dark #privacyModal .modal-article-body h2,
html.husir-dark #privacyModal .modal-article-body h3,
html.husir-dark #privacyModal .modal-article-body h4,
html.husir-dark #privacyModal .modal-article-body strong,
html.husir-dark #privacyModal .modal-article-body b {
  color: var(--dm-text) !important;
}

html.husir-dark #privacyModal .modal-article-body a {
  color: var(--dm-accent) !important;
}

html.husir-dark #privacyModal .modal-article-body table,
html.husir-dark #privacyModal .modal-article-body td,
html.husir-dark #privacyModal .modal-article-body th {
  border-color: var(--dm-divider) !important;
}

/* ----- 八、暗黑模式图片降维 ----- */
@media (prefers-color-scheme: dark) {
  html:not(.husir-light) img {
    filter: brightness(0.9) contrast(1.05);
  }

  html:not(.husir-light) .apple-footer img,
  html:not(.husir-light) .qr-wrapper img,
  html:not(.husir-light) .abshow-proof-photo img,
  html:not(.husir-light) .abshow-credential-image-module img,
  html:not(.husir-light) .abshow-image-viewer img {
    filter: none;
  }

  /* 资质、证书与说明图片必须保持原图色彩，避免统一滤镜影响核验资料观感。 */
  html:not(.husir-light) .abshow-proof-photo img {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }

  html:not(.husir-light) .abshow-credential-modal :is(.abshow-credential-image-module__preview, .abshow-image-viewer__panel) img {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }

  html:not(.husir-light) .pl-box-right-qr img {
    filter: none !important;
  }

  html:not(.husir-light) .footer-logo img {
    filter: brightness(0) invert(1);
  }
}

html.husir-dark img {
  filter: brightness(0.9) contrast(1.05);
}

html.husir-dark .apple-footer img,
html.husir-dark .qr-wrapper img,
html.husir-dark .abshow-proof-photo img,
html.husir-dark .abshow-credential-image-module img,
html.husir-dark .abshow-image-viewer img {
  filter: none;
}

html.husir-dark .abshow-proof-photo img,
html.husir-dark .abshow-credential-modal :is(.abshow-credential-image-module__preview, .abshow-image-viewer__panel) img {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

html.husir-dark .pl-box-right-qr img {
  filter: none !important;
}

/* 关于我们资质证书区：暗黑模式去掉浅色投影，避免证照模块出现发光边缘。
   20260709 重构后 console/doc/__action 已删，仅保留 section 装饰与 card 兜底。 */
@media (prefers-color-scheme: dark) {
  html:not(.husir-light) .custom-override #abshow-farm.abshow-certificates::before,
  html:not(.husir-light) .custom-override #abshow-farm .abshow-credential-card {
    box-shadow: none;
  }
}

html.husir-dark .custom-override #abshow-farm.abshow-certificates::before,
html.husir-dark .custom-override #abshow-farm .abshow-credential-card {
  box-shadow: none;
}

html.husir-dark .footer-logo img {
  filter: brightness(0) invert(1);
}

/* ----- 十、service-flow 模块暗黑适配 ----- */
/* 组件变量已通过 --dm-* 自动继承，此处仅注册无法自动继承的值 */
@media (prefers-color-scheme: dark) {
  html:not(.husir-light) .sf-module {
    --sf-bg-subtle: var(--dm-bg-secondary);
    --sf-bg-hover: rgba(255, 255, 255, 0.06);
    --dm-sf-eco: #fbbf24;
    --dm-sf-eco-alt: #fde68a;
    --dm-sf-eco-soft: rgba(251, 191, 36, 0.14);
    --dm-sf-chain: #60a5fa;
    --dm-sf-chain-alt: #93c5fd;
    --dm-sf-chain-soft: rgba(96, 165, 250, 0.14);
    --dm-sf-direct: #5eead4;
    --dm-sf-direct-alt: #99f6e4;
    --dm-sf-direct-soft: rgba(94, 234, 212, 0.14);
    --dm-sf-fresh: #fb7185;
    --dm-sf-fresh-alt: #fda4af;
    --dm-sf-fresh-soft: rgba(251, 113, 133, 0.14);
    --dm-sf-success-soft: rgba(52, 211, 153, 0.14);
    --dm-sf-success-border: rgba(52, 211, 153, 0.28);
    --dm-sf-warning-soft: rgba(251, 191, 36, 0.14);
    --dm-sf-warning-border: rgba(251, 191, 36, 0.28);
  }
}
html.husir-dark .sf-module {
  --sf-bg-subtle: var(--dm-bg-secondary);
  --sf-bg-hover: rgba(255, 255, 255, 0.06);
  --dm-sf-eco: #fbbf24;
  --dm-sf-eco-alt: #fde68a;
  --dm-sf-eco-soft: rgba(251, 191, 36, 0.14);
  --dm-sf-chain: #60a5fa;
  --dm-sf-chain-alt: #93c5fd;
  --dm-sf-chain-soft: rgba(96, 165, 250, 0.14);
  --dm-sf-direct: #5eead4;
  --dm-sf-direct-alt: #99f6e4;
  --dm-sf-direct-soft: rgba(94, 234, 212, 0.14);
  --dm-sf-fresh: #fb7185;
  --dm-sf-fresh-alt: #fda4af;
  --dm-sf-fresh-soft: rgba(251, 113, 133, 0.14);
  --dm-sf-success-soft: rgba(52, 211, 153, 0.14);
  --dm-sf-success-border: rgba(52, 211, 153, 0.28);
  --dm-sf-warning-soft: rgba(251, 191, 36, 0.14);
  --dm-sf-warning-border: rgba(251, 191, 36, 0.28);
}

/* 展示图底色统一由 service-flow.css 的 --sf-bg-subtle 管理；
   阶段渐变会从圆角抗锯齿边缘透出，造成轮播时边框变色。 */

/* 暗黑模式叠加层减淡 */
@media (prefers-color-scheme: dark) {
  html:not(.husir-light) .sf-module .sf-showcase__overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.08) 40%, transparent 100%);
  }
}
html.husir-dark .sf-module .sf-showcase__overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.08) 40%, transparent 100%);
}

/* 传感器数值(.sf-temp/.sf-humid)已统一珊瑚红，暗黑分支提亮覆盖已移除，由 base 规则 --sf-accent 自动跟随明暗 */
/* ============================================================
   组件级暗黑补充（迁移自 temp-modules.css / custom-components.css）
   ----------------------------------------------------------
   这些规则原散落在各组件样式文件，现集中于此统一维护。
   迁移保留原选择器、特异度与外层媒体守卫，行为等价。
   ============================================================ */

/* temp-step 流程卡片暗黑（仅移动端 ≤768px：PC 卡片透明，底色靠 section 提供）。
   硬编码色改为站内语义变量：背景用 --dm-bg-elevated（与全站中性灰色调一致），
   文字用 --dm-text / --dm-text-secondary，阴影加深以体现暗黑层级（Material elevation）。 */
@media (max-width: 768px) {
  html.husir-dark .custom-override .temp-step-card {
    background: var(--dm-bg-elevated);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  }
  html.husir-dark .custom-override .temp-step-card h3 {
    color: var(--dm-text);
  }
  html.husir-dark .custom-override .temp-step-card p {
    color: var(--dm-text-secondary);
  }
}
@media (max-width: 768px) {
  @media (prefers-color-scheme: dark) {
    html:not(.husir-light) .custom-override .temp-step-card {
      background: var(--dm-bg-elevated);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
    }
    html:not(.husir-light) .custom-override .temp-step-card h3 {
      color: var(--dm-text);
    }
    html:not(.husir-light) .custom-override .temp-step-card p {
      color: var(--dm-text-secondary);
    }
  }
}

/* 首页提蟹卡移动端规格宫格暗黑（系统暗黑 + 手动暗黑）
   仅修饰色彩与层次，不改已稳定的双列布局/居中对齐。 */
@media (max-width: 900px) {
  html.husir-dark body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftcard .husir-xl-card__choice-frame {
    border-color: color-mix(in srgb, var(--dm-border) 72%, rgba(255, 189, 152, 0.18) 28%) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dm-bg-elevated) 88%, rgba(255, 255, 255, 0.04) 12%) 0%, color-mix(in srgb, var(--dm-bg-secondary) 94%, rgba(0, 0, 0, 0.16) 6%) 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(0, 0, 0, 0.34) !important;
  }

  html.husir-dark body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftcard .husir-xl-card__pills > a.husir-xl-card__pill {
    border-color: color-mix(in srgb, var(--dm-border) 78%, rgba(255, 196, 152, 0.16) 22%) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dm-bg-lift, var(--dm-bg-elevated)) 92%, rgba(255, 255, 255, 0.06) 8%) 0%, color-mix(in srgb, var(--dm-bg-elevated) 94%, rgba(0, 0, 0, 0.14) 6%) 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 22px rgba(0, 0, 0, 0.28) !important;
    color: var(--dm-text) !important;
  }

  html.husir-dark body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftcard .husir-xl-card__pill-label {
    color: color-mix(in srgb, var(--dm-text) 92%, rgba(255, 225, 196, 0.08) 8%) !important;
  }

  html.husir-dark body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftcard .husir-xl-card__pill-spec {
    color: var(--dm-text-secondary) !important;
  }

  html.husir-dark body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftcard .husir-xl-card__pill-spec-line {
    color: color-mix(in srgb, var(--dm-text-secondary) 84%, rgba(255, 222, 194, 0.16) 16%) !important;
  }
}

@media (max-width: 900px) and (prefers-color-scheme: dark) {
  html:not(.husir-light) body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftcard .husir-xl-card__choice-frame {
    border-color: color-mix(in srgb, var(--dm-border) 72%, rgba(255, 189, 152, 0.18) 28%) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dm-bg-elevated) 88%, rgba(255, 255, 255, 0.04) 12%) 0%, color-mix(in srgb, var(--dm-bg-secondary) 94%, rgba(0, 0, 0, 0.16) 6%) 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(0, 0, 0, 0.34) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftcard .husir-xl-card__pills > a.husir-xl-card__pill {
    border-color: color-mix(in srgb, var(--dm-border) 78%, rgba(255, 196, 152, 0.16) 22%) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dm-bg-lift, var(--dm-bg-elevated)) 92%, rgba(255, 255, 255, 0.06) 8%) 0%, color-mix(in srgb, var(--dm-bg-elevated) 94%, rgba(0, 0, 0, 0.14) 6%) 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 22px rgba(0, 0, 0, 0.28) !important;
    color: var(--dm-text) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftcard .husir-xl-card__pill-label {
    color: color-mix(in srgb, var(--dm-text) 92%, rgba(255, 225, 196, 0.08) 8%) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftcard .husir-xl-card__pill-spec {
    color: var(--dm-text-secondary) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftcard .husir-xl-card__pill-spec-line {
    color: color-mix(in srgb, var(--dm-text-secondary) 84%, rgba(255, 222, 194, 0.16) 16%) !important;
  }
}

/* 首页礼盒移动端规格宫格暗黑（系统暗黑 + 手动暗黑）
   礼盒浅色样式「完全复刻提蟹卡」（见 home-temp-reuse.css:747），
   暗黑规则此前只写了礼券、漏了礼盒，此处对称补全，让礼盒回归公共暗黑表面体系。 */
@media (max-width: 900px) {
  html.husir-dark body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftbox .husir-xl-card__choice-frame {
    border-color: color-mix(in srgb, var(--dm-border) 72%, rgba(255, 189, 152, 0.18) 28%) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dm-bg-elevated) 88%, rgba(255, 255, 255, 0.04) 12%) 0%, color-mix(in srgb, var(--dm-bg-secondary) 94%, rgba(0, 0, 0, 0.16) 6%) 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(0, 0, 0, 0.34) !important;
  }

  html.husir-dark body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftbox .husir-xl-card__pills > a.husir-xl-card__pill {
    border-color: color-mix(in srgb, var(--dm-border) 78%, rgba(255, 196, 152, 0.16) 22%) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dm-bg-lift, var(--dm-bg-elevated)) 92%, rgba(255, 255, 255, 0.06) 8%) 0%, color-mix(in srgb, var(--dm-bg-elevated) 94%, rgba(0, 0, 0, 0.14) 6%) 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 22px rgba(0, 0, 0, 0.28) !important;
    color: var(--dm-text) !important;
  }

  html.husir-dark body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftbox .husir-xl-card__pill-label {
    color: color-mix(in srgb, var(--dm-text) 92%, rgba(255, 225, 196, 0.08) 8%) !important;
  }

  html.husir-dark body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftbox .husir-xl-card__pill-spec {
    color: var(--dm-text-secondary) !important;
  }

  html.husir-dark body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftbox .husir-xl-card__pill-spec-line {
    color: color-mix(in srgb, var(--dm-text-secondary) 84%, rgba(255, 222, 194, 0.16) 16%) !important;
  }
}

@media (max-width: 900px) and (prefers-color-scheme: dark) {
  html:not(.husir-light) body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftbox .husir-xl-card__choice-frame {
    border-color: color-mix(in srgb, var(--dm-border) 72%, rgba(255, 189, 152, 0.18) 28%) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dm-bg-elevated) 88%, rgba(255, 255, 255, 0.04) 12%) 0%, color-mix(in srgb, var(--dm-bg-secondary) 94%, rgba(0, 0, 0, 0.16) 6%) 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(0, 0, 0, 0.34) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftbox .husir-xl-card__pills > a.husir-xl-card__pill {
    border-color: color-mix(in srgb, var(--dm-border) 78%, rgba(255, 196, 152, 0.16) 22%) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dm-bg-lift, var(--dm-bg-elevated)) 92%, rgba(255, 255, 255, 0.06) 8%) 0%, color-mix(in srgb, var(--dm-bg-elevated) 94%, rgba(0, 0, 0, 0.14) 6%) 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 22px rgba(0, 0, 0, 0.28) !important;
    color: var(--dm-text) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftbox .husir-xl-card__pill-label {
    color: color-mix(in srgb, var(--dm-text) 92%, rgba(255, 225, 196, 0.08) 8%) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftbox .husir-xl-card__pill-spec {
    color: var(--dm-text-secondary) !important;
  }

  html:not(.husir-light) body.custom-override main.md-home section.husir-xl.teaser.pad160 #husir-xl-panel-giftbox .husir-xl-card__pill-spec-line {
    color: color-mix(in srgb, var(--dm-text-secondary) 84%, rgba(255, 222, 194, 0.16) 16%) !important;
  }
}

/* ============================================================
   .sf-tip 提示框淘宝橙底色 —— 暗黑两分支保险
   ----------------------------------------------------------
   service-flow.css 已通过 --sf-accent 接入公共品牌色；这里保留两分支，
   避免加载顺序变化时跟随系统暗黑与手动暗黑出现旧红回退。
   ============================================================ */
@media (prefers-color-scheme: dark) {
  html:not(.husir-light) .sf-module .sf-tip {
    background: var(--dm-action-bg);
    border-color: var(--dm-action-bg-hover);
    color: var(--dm-action-text);
  }
}

html.husir-dark .sf-module .sf-tip {
  background: var(--dm-action-bg);
  border-color: var(--dm-action-bg-hover);
  color: var(--dm-action-text);
}

/* ============================================================
   主题切换丝滑过渡（仿苹果）
   ----------------------------------------------------------
   仅在切换瞬间生效（html.husir-theme-transition 临时 class），
   0.4s 后由 JS 移除，避免日常 hover/active 动画被全局 transition 污染。
   尊重 prefers-reduced-motion（开启时跳过本规则，瞬时切换）。
   filter 列入过渡：覆盖 html.husir-dark img 降亮，避免切换时图片突变。
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* 不再过渡 border-color：transparent→实色 会插值出近黑描边
     （底栏 iconWrap、pill、timeline 等刷新/切主题同类问题）。 */
  html.husir-theme-transition,
  html.husir-theme-transition *,
  html.husir-theme-transition *::before,
  html.husir-theme-transition *::after {
    transition: background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
      color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
      fill 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
      filter 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  /* 底栏 icon 激活环已改 box-shadow，这里仍排除 border-color 并强制 border:0，
     防止旧缓存 CSS 或全局 * 过渡再次插出描黑边。 */
  html.husir-theme-transition .mob-bottom-nav__iconWrap {
    border: 0 !important;
    transition: background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
      color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
}