/* ============================================================
   九南科技商城 · 全站深色科技风覆盖层 v1.0（site-dark.css）
   ------------------------------------------------------------
   作用：把除首页(body#index)外的所有前台页面，统一为首页
         index-dark.css 的「深蓝黑底 + 蓝青渐变 + 玻璃拟态」科技风格，
         消除「首页深色科技 / 内页报章白纸」的视觉断层。
   加载：header.html 中，位于 site.css 之后（后加载者胜）。
   机制：
     1) 在白名单 body 上重映射 site.css 的 --jn-* 令牌为 --dk-* 深色值，
        令牌化的组件（server-banner2 / 卡片组 / prod-row / 列表 / 详情…）
        随之自动翻转（一行翻转 80% 颜色）。
     2) 显式覆盖 app.css 用 --mh-* 体系的组件（tag-nav / tag-pill /
        login-menu），它们不受 --jn-* 重映射影响。
     3) 反向固定「本就该是深底」的区块（footer / about .section-dark /
        .about-cta），避免重映射 --jn-ink→浅文字色 后反白。
   选择器：用 :is(#id) 白名单分组，特异性 = body(0,0,1)+:is(1,0,0)+.class(0,1,0)
           = (1,1,1)，与 site.css 的 body#id .class 同级，靠后加载胜出。
   回滚：删除 header.html 中本文件那一行 <link>，全站立即恢复报章风。
   ============================================================ */

/* 白名单：除 index 外的全部前台页面 body id */
/* （index 由 index-dark.css 单独处理，不在此重复） */

/* ============================================================
   §0  令牌定义 + --jn-* 重映射 + body 深色背景层
   ============================================================ */
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) {
  /* —— 深色科技风主令牌（--dk-*，与 index-dark.css 完全一致） —— */
  --dk-bg: #0B1120;
  --dk-bg-2: #0F172A;
  --dk-surface: #131C2E;
  --dk-surface-2: #1A2540;
  --dk-glass: rgba(255, 255, 255, .04);
  --dk-glass-2: rgba(255, 255, 255, .06);
  --dk-border: rgba(148, 163, 184, .14);
  --dk-border-2: rgba(148, 163, 184, .22);
  --dk-border-hot: rgba(56, 189, 248, .45);
  --dk-text: #F1F5F9;
  --dk-text-2: #CBD5E1;
  --dk-text-3: #94A3B8;
  --dk-text-4: #64748B;
  --dk-accent: #38BDF8;
  --dk-accent-2: #2563EB;
  --dk-accent-3: #22D3EE;
  --dk-grad: linear-gradient(135deg, #2563EB 0%, #38BDF8 100%);
  --dk-grad-text: linear-gradient(118deg, #60A5FA 0%, #38BDF8 48%, #22D3EE 100%);
  --dk-glow: rgba(56, 189, 248, .5);
  --dk-shadow: 0 8px 32px rgba(0, 0, 0, .4);
  --dk-shadow-hot: 0 12px 40px rgba(56, 189, 248, .16);
  --dk-mono: "SF Mono", "JetBrains Mono", "Consolas", "Courier New", monospace;

  /* —— 重映射 site.css 的 --jn-* → 深色值（翻转令牌化组件） —— */
  --jn-paper: #0B1120;        /* body/hero 底 → 深蓝黑 */
  --jn-card: #131C2E;         /* 卡片底 → surface */
  --jn-paper-2: #1A2540;      /* hover/次级底 → surface-2 */
  --jn-ink: #F1F5F9;          /* 主文字 → 浅（注意：当背景用的区块需反向固定） */
  --jn-ink-2: #CBD5E1;
  --jn-ink-3: #94A3B8;
  --jn-line: rgba(148, 163, 184, .14);
  --jn-line-strong: rgba(148, 163, 184, .22);
  --jn-red: #38BDF8;          /* 强调色 朱砂→蓝青 */
  --jn-red-deep: #2563EB;
  --jn-red-soft: rgba(56, 189, 248, .12);
  --jn-serif: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; /* 报章衬线→统一无衬线 */

  background: var(--dk-bg);
  color: var(--dk-text);
  background-image:
    radial-gradient(900px 500px at 50% -8%, rgba(37, 99, 235, .20), transparent 60%),
    radial-gradient(700px 400px at 88% 12%, rgba(56, 189, 248, .12), transparent 55%),
    linear-gradient(180deg, var(--dk-bg) 0%, var(--dk-bg-2) 100%);
  background-attachment: fixed;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 区块默认透明（露出 body 网格光晕），交替底走 section-soft */
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .section {
  background: transparent;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .section-soft {
  background: rgba(255, 255, 255, .015);
}

/* ============================================================
   §1  顶栏深色玻璃化（复用 index-dark.css 顶栏段，body#index → 全站白名单）
   site.css 用 body#id .nav-* 把顶栏做成报章墨线，需同级覆盖。
   ============================================================ */
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-shadow {
  background: rgba(11, 17, 32, .78) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--dk-border) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-header {
  background: transparent !important;
}
/* logo 反白适配深底 */
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-icon img {
  filter: brightness(0) invert(1);
}
/* 搜索框 */
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-search {
  background: rgba(255, 255, 255, .05) !important;
  border-bottom: 1px solid var(--dk-border) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-search input,
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-search input::placeholder {
  color: var(--dk-text-3) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-search-btn {
  color: var(--dk-text-3) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-search-btn:hover {
  color: var(--dk-accent) !important;
}
/* 购物车 */
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-cart,
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-cart-icon,
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-cart-text {
  color: var(--dk-text-2) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-cart:hover,
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-cart:hover * {
  color: var(--dk-accent) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .cart-badge {
  background: var(--dk-grad) !important;
  color: #fff !important;
}
/* 登录/注册按钮 */
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .no-login .btn-normal-light {
  background: transparent !important;
  color: var(--dk-text-2) !important;
  border-color: var(--dk-border-2) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .no-login .btn-normal-light:hover {
  border-color: var(--dk-accent) !important;
  color: var(--dk-accent) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .no-login .btn-normal {
  background: var(--dk-grad) !important;
  color: #fff !important;
  border: none !important;
}
/* 移动端汉堡 + 抽屉 */
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .nav-toggle span {
  background: var(--dk-text-2) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .m-nav-drawer {
  background: var(--dk-surface) !important;
  border-left: 1px solid var(--dk-border) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .m-nav-drawer .m-nav-link {
  color: var(--dk-text-2) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .m-nav-drawer .m-nav-search {
  background: var(--dk-glass) !important;
  border: 1px solid var(--dk-border-2) !important;
}

/* ============================================================
   §2  标签胶囊导航条（tag-nav / tag-pill，app.css 用 --mh-*，需显式深色化）
   ============================================================ */
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .tag-nav {
  background: rgba(11, 17, 32, .72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dk-border);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .tag-pill {
  color: var(--dk-text-3);
  background: transparent;
  border: 1px solid transparent;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .tag-pill:hover {
  color: var(--dk-accent);
  background: var(--dk-glass);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .tag-pill.active {
  background: var(--dk-grad);
  color: #fff;
  border-color: transparent;
}

/* ============================================================
   §3  登录态：头像 / 用户名 / 下拉菜单（app.css 用 --mh-*，需显式深色化）
   ============================================================ */
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .login-in .head-img {
  background: var(--dk-grad);
  color: #fff;
  border: 1px solid var(--dk-border-2);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .login-in .name {
  color: var(--dk-text-2);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .login-menu {
  background: var(--dk-surface);
  border: 1px solid var(--dk-border-2);
  box-shadow: var(--dk-shadow);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .login-menu-item {
  color: var(--dk-text-2);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .login-menu-item:hover {
  background: var(--dk-glass-2);
  color: var(--dk-text);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .login-menu-item .real-name {
  background: var(--dk-glass-2);
  color: var(--dk-text-3);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback) .login-menu-item .real-name:not(.no-real-name) {
  background: rgba(56, 189, 248, .14);
  color: var(--dk-accent);
}

/* ============================================================
   §4  页脚反向固定（site.css 用 --jn-ink 当底/--jn-paper 当字 → 重映射后反白，
       固定为比主体更深一层 #070B16，加蓝光顶带）
   ============================================================ */
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .site-footer {
  background: linear-gradient(180deg, #070B14 0%, #050810 100%) !important;
  border-top: 1px solid var(--dk-border) !important;
  color: var(--dk-text-3) !important;
  position: relative;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .5), transparent);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .footer-logo-text {
  color: var(--dk-text) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .footer-slogan {
  color: var(--dk-text-3);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .footer-links a {
  color: var(--dk-text-3);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .footer-links a:hover {
  color: var(--dk-accent) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .footer-contact-col .fc-title {
  color: var(--dk-text-3);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .footer-contact-col .fc-tel {
  color: var(--dk-text) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .footer-contact-col .fc-mail {
  color: var(--dk-text-3) !important;
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .footer-contact-col .fc-line,
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .footer-record-left,
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .footer-record-left a,
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .footer-friend-links a {
  color: var(--dk-text-4);
}
body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
        #productDetail, #announce, #announceDetails, #news, #newsClassify,
        #newsDetails, #document, #documentDetails, #documentResult, #feedback,
        #terms, #privacy) .footer-record-left .copyright {
  color: var(--dk-text-4);
}

/* ============================================================
   §5  通用组件：区块标题 / 面包屑 / 卡片组（令牌已翻转底色，此处补圆角/阴影/渐变）
   ============================================================ */
/* 区块标题（about/contact 的 section-h2 / section-sub / section-head） */
body:is(#about, #contact) .section-h2 {
  color: var(--dk-text);
  letter-spacing: 1px;
}
body:is(#about, #contact) .section-sub { color: var(--dk-text-3); }
body:is(#about, #contact) .section-head { border-bottom: 1px solid var(--dk-border-2); }
body:is(#about, #contact) .section-head-center .section-head-text { color: var(--dk-text-3); }

/* 面包屑（site.css 用 --jn-*，已随令牌翻转；这里补 hover 强调） */
body:is(#shop, #shoppingCartVue, #productDetail) .breadcrumb-bar { border-bottom: 1px solid var(--dk-border); }
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails, #documentDetails) .breadcrumb a,
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails, #documentDetails) .help-detail-crumb a {
  color: var(--dk-text-3);
}
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails, #documentDetails) .breadcrumb a:hover,
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails, #documentDetails) .help-detail-crumb a:hover {
  color: var(--dk-accent);
}
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails, #documentDetails) .breadcrumb > li + li::before,
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails, #documentDetails) .bc-sep {
  color: var(--dk-text-4);
}

/* —— 卡片组：恢复科技圆角 + 玻璃边框 + hover 蓝光（对抗 site.css 的 radius:0!important） —— */
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails) .announce,
body:is(#announceDetails, #newsDetails) .announce-details,
body#shop .jn-card-shell,
body#contact .contact-card,
body#contact .contact-form-card,
body#contact .contact-company,
body#about .value-item,
body#about .honor-card,
body#sale .rule-item,
body#serviceGuarantee .sustain-box,
body#document .docement-list .document-box,
body#documentResult .document-details-item,
body#productDetail .detail-card {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25) !important;
}
body#contact .contact-card:hover,
body#about .value-item:hover,
body#about .honor-card:hover,
body#sale .rule-item:hover,
body#document .docement-list .document-box:hover {
  transform: translateY(-3px) !important;
  border-color: var(--dk-border-hot) !important;
  box-shadow: var(--dk-shadow-hot) !important;
}
/* 详情外壳卡顶边：墨线 → 蓝青 */
body#announceDetails .announce-details,
body#newsDetails .announce-details {
  border-top: 1px solid var(--dk-border-2) !important;
}
/* 卡片内衬线标题：字色随令牌翻转，补渐变可选 */
body#contact .contact-card h4,
body#about .value-item h3,
body#about .honor-info h4,
body#sale .rule-name,
body#document .docement-list .document-box .document-header h5 {
  letter-spacing: .5px;
}

/* ============================================================
   §6  Hero 横幅（4 套）
   ============================================================ */
/* —— B1. server-banner2 系列（10 页通用）：深底 + 顶部蓝光 + 渐变标题
        site.css 设了 background:var(--jn-paper)!important（已随令牌变深），
        这里再叠一层光晕并把双线墨边改为蓝青细线、标题做渐变。 —— */
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails,
        #document, #documentDetails, #documentResult, #feedback, #serviceGuarantee) .server-banner2 {
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(37, 99, 235, .22), transparent 70%),
    linear-gradient(180deg, #0F172A 0%, var(--dk-bg) 100%) !important;
  border-bottom: 1px solid var(--dk-border-hot) !important;
  position: relative;
}
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails,
        #document, #documentDetails, #documentResult, #feedback, #serviceGuarantee) .server-banner2 h1 {
  color: transparent !important;
  background: var(--dk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
}
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails,
        #document, #documentDetails, #documentResult, #feedback, #serviceGuarantee) .server-banner-desc,
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails,
        #document, #documentDetails, #documentResult, #feedback, #serviceGuarantee) .server-banner-desc2 {
  color: var(--dk-text-3) !important;
}

/* —— B2. about / contact 照片 Hero（site.css 已关照片做纸条；这里做深色条 + 渐变标题） —— */
body:is(#about, #contact) .about-hero,
body#contact .contact-hero {
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(37, 99, 235, .22), transparent 70%),
    linear-gradient(180deg, #0F172A 0%, var(--dk-bg) 100%) !important;
  border-bottom: 1px solid var(--dk-border-hot) !important;
}
body:is(#about, #contact) .about-hero-content,
body#contact .contact-hero-content { color: var(--dk-text); }
body:is(#about, #contact) .about-eyebrow {
  color: var(--dk-accent) !important;
}
body:is(#about, #contact) .about-title {
  color: transparent !important;
  background: var(--dk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700 !important;
}
body:is(#about, #contact) .about-desc { color: var(--dk-text-3) !important; }

/* —— B3. shop-head（编辑式开版 + 朱印）：朱砂印 → 蓝青渐变印，标题渐变 —— */
body#shop .shop-head {
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(37, 99, 235, .22), transparent 70%),
    linear-gradient(180deg, #0F172A 0%, var(--dk-bg) 100%);
  border-bottom: 1px solid var(--dk-border-hot);
}
body#shop .jn-stamp {
  background: var(--dk-grad) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .35);
}
body#shop .shop-head .sec-kicker { color: var(--dk-accent) !important; }
body#shop .shop-title {
  color: var(--dk-text) !important;
}
body#shop .shop-title em {
  color: transparent !important;
  background: var(--dk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body#shop .shop-sub { color: var(--dk-text-3) !important; }
body#shop .shop-search {
  background: var(--dk-glass) !important;
  border: 1px solid var(--dk-border-2) !important;
  border-radius: 12px;
}
body#shop .shop-search input,
body#shop .shop-search input::placeholder { color: var(--dk-text-3); }
body#shop .shop-search-btn { color: var(--dk-text-3); }
body#shop .shop-search-btn:hover { color: var(--dk-accent); }
body#shop .shop-toolbar { border-bottom: 1px solid var(--dk-border); }
body#shop .shop-count { color: var(--dk-text-3); }
body#shop .shop-count b { color: var(--dk-text); }
body#shop .sort-item { color: var(--dk-text-3); }
body#shop .sort-item.active { color: var(--dk-accent); }
body#shop .shop-kw-tip { color: var(--dk-text-4); }

/* —— B4. sale-hero（深色倒计时页头） —— */
body#sale .sale-hero {
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(37, 99, 235, .22), transparent 70%),
    linear-gradient(180deg, #0F172A 0%, var(--dk-bg) 100%);
  border-bottom: 1px solid var(--dk-border-hot);
}
body#sale .sale-hero .sec-kicker { color: var(--dk-accent); }
body#sale .sale-hero h1,
body#sale .sale-hero .sale-title { color: var(--dk-text); }
body#sale .sale-countdown .scd-num {
  background: var(--dk-grad) !important;
  color: #fff !important;
  border-radius: 10px;
}
body#sale .sale-hero .btn-solid {
  background: var(--dk-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px;
}

/* ============================================================
   §7  shop / sale / productDetail 商品行（.prod-list / .prod-row，app.css 基底 + site.css 覆盖）
   ============================================================ */
body:is(#shop, #sale, #productDetail) .prod-list { border-top: 1px solid var(--dk-border); }
body:is(#shop, #sale, #productDetail) .prod-row {
  border-bottom: 1px solid var(--dk-border) !important;
  border-radius: 0;
}
body:is(#shop, #sale, #productDetail) .prod-row:hover {
  background: var(--dk-glass) !important;
}
body:is(#shop, #sale, #productDetail) .prod-name { letter-spacing: .5px; }
body:is(#shop, #sale, #productDetail) .prod-price b {
  background: var(--dk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body:is(#shop, #sale, #productDetail) .prod-cart {
  border: 1px solid var(--dk-border-2) !important;
  background: var(--dk-glass) !important;
  color: var(--dk-text-2) !important;
  border-radius: 10px;
}
body:is(#shop, #sale, #productDetail) .prod-cart:hover {
  background: var(--dk-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body:is(#shop, #sale, #productDetail) .prod-tag {
  background: rgba(56, 189, 248, .12) !important;
  color: var(--dk-accent) !important;
  border-radius: 999px;
}

/* ============================================================
   §8  公告 / 资讯 列表 · tab · 分页（site.css 用 --jn-*，令牌已翻转；补渐变 active）
   ============================================================ */
/* tab */
body:is(#announce, #news, #newsClassify) .announce-head a {
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text-3) !important;
  background: transparent !important;
  border-radius: 999px;
}
body:is(#announce, #news, #newsClassify) .announce-head a.active {
  background: var(--dk-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* 列表行 */
body:is(#announce, #news, #newsClassify, #newsDetails, #announceDetails) .announce-item { border-bottom: 1px solid var(--dk-border) !important; }
body:is(#announce, #news, #newsClassify) .announce-item:hover { background: var(--dk-glass) !important; }
body:is(#announce, #news, #newsClassify) .announce-item-title a:hover { color: var(--dk-accent) !important; }
/* 新闻列表 */
body:is(#news, #newsClassify, #newsDetails, #announceDetails) .news-box-head { border-bottom: 1px solid var(--dk-border) !important; }
body:is(#news, #newsClassify, #newsDetails, #announceDetails) .news-list .news-item { border-bottom: 1px dashed var(--dk-border) !important; }
body:is(#news, #newsClassify, #newsDetails, #announceDetails) .news-item .news-number {
  background: var(--dk-glass-2) !important;
  color: var(--dk-text-3) !important;
}
body:is(#news, #newsClassify, #newsDetails, #announceDetails) .news-list .news-item:nth-child(-n+3) .news-number {
  background: var(--dk-grad) !important;
  color: #fff !important;
}
body:is(#news, #newsClassify, #newsDetails, #announceDetails) .news-item a:hover { color: var(--dk-accent) !important; }
body:is(#news, #newsClassify) .news-index-banner,
body#news #first-news { border-radius: 14px; overflow: hidden; }
/* 分页 */
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails, #document, #documentDetails, #documentResult) .pagination > li > a,
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails, #document, #documentDetails, #documentResult) .pagination > li > span {
  border: 1px solid var(--dk-border) !important;
  color: var(--dk-text-3) !important;
  background: var(--dk-glass) !important;
  border-radius: 8px !important;
}
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails, #document, #documentDetails, #documentResult) .pagination > li > a:hover {
  border-color: var(--dk-border-hot) !important;
  color: var(--dk-accent) !important;
}
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails, #document, #documentDetails, #documentResult) .pagination > .active > a,
body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails, #document, #documentDetails, #documentResult) .pagination > .active > span {
  background: var(--dk-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* 详情上下翻页 */
body:is(#announceDetails, #newsDetails) .page-box a,
body#documentDetails .help-detail-page a { color: var(--dk-text-3); }
body:is(#announceDetails, #newsDetails) .page-box a:hover,
body#documentDetails .help-detail-page a:hover { color: var(--dk-accent); }

/* ============================================================
   §9  详情长文阅读（保证可读性：正文 text-2 + 链接 accent + 子标题 text + surface 稳底）
   ============================================================ */
body:is(#announceDetails, #newsDetails) .announce-title,
body#documentDetails .help-detail-title {
  color: var(--dk-text) !important;
  letter-spacing: 1px;
}
body:is(#announceDetails, #newsDetails) .announce-details-time,
body#documentDetails .help-detail-time { color: var(--dk-text-4) !important; }
body:is(#announceDetails, #newsDetails) .announce-details-cont,
body#documentDetails .help-detail-cont {
  color: var(--dk-text-2) !important;
}
body:is(#announceDetails, #newsDetails) .announce-details-cont a,
body#documentDetails .help-detail-cont a { color: var(--dk-accent); }
body:is(#announceDetails, #newsDetails) .announce-details-cont a:hover,
body#documentDetails .help-detail-cont a:hover { text-decoration: underline; }
body:is(#announceDetails, #newsDetails) .announce-details-cont h2,
body:is(#announceDetails, #newsDetails) .announce-details-cont h3,
body:is(#announceDetails, #newsDetails) .announce-details-cont h4,
body#documentDetails .help-detail-cont h2,
body#documentDetails .help-detail-cont h3,
body#documentDetails .help-detail-cont h4 { color: var(--dk-text); }
body:is(#announceDetails, #newsDetails) .announce-details-cont strong,
body#documentDetails .help-detail-cont strong { color: var(--dk-text); }
/* 详情正文内嵌表格 / 引用 / 代码兜底 */
body:is(#announceDetails, #newsDetails) .announce-details-cont table,
body#documentDetails .help-detail-cont table { border-color: var(--dk-border-2); }
body:is(#announceDetails, #newsDetails) .announce-details-cont blockquote,
body#documentDetails .help-detail-cont blockquote {
  border-left: 3px solid var(--dk-accent);
  background: var(--dk-glass);
  color: var(--dk-text-2);
}
/* 侧栏（最近更新 / 本页导读） */
body:is(#newsDetails, #announceDetails) .announce-new-right,
body#documentDetails .guide-box {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  border-radius: 14px !important;
}

/* ============================================================
   §10  about 页特有：反向固定深色区块 + 时间轴 + 数据 + CTA
   ============================================================ */
/* 反向固定：section-dark / about-cta 用更深一层底，避免重映射 --jn-ink 后反白 */
body#about .section-dark {
  background: #070B16 !important;
  border-top: 1px solid var(--dk-border-hot) !important;
  border-bottom: 1px solid var(--dk-border-hot) !important;
}
body#about .about-cta {
  background: #070B16 !important;
  border-top: 1px solid var(--dk-border-hot) !important;
}
/* 时间轴 */
body#about .timeline::before { background: rgba(148, 163, 184, .2) !important; }
body#about .tl-year { color: var(--dk-text) !important; }
body#about .tl-dot {
  background: var(--dk-accent) !important;
  box-shadow: 0 0 0 5px rgba(56, 189, 248, .25) !important;
}
body#about .tl-content h4 { color: var(--dk-text); }
body#about .tl-content p { color: var(--dk-text-3); }
/* 数据概览：渐变数字 */
body#about .stat-num {
  background: var(--dk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body#about .stat-num span { color: var(--dk-accent); }
body#about .stat-label { color: var(--dk-text-3) !important; }
/* 品牌故事 */
body#about .story-eyebrow { color: var(--dk-accent) !important; }
body#about .story-title { color: var(--dk-text) !important; }
body#about .story-p { color: var(--dk-text-3) !important; }
body#about .story-img {
  border: 4px solid var(--dk-surface-2) !important;
  outline: 1px solid var(--dk-border-2) !important;
  outline-offset: -5px;
  border-radius: 14px !important;
}
/* 资质卡图片底 */
body#about .honor-img { background: var(--dk-surface-2); border-radius: 10px; }
/* CTA */
body#about .cta-text h2 { color: var(--dk-text) !important; }
body#about .cta-text p { color: var(--dk-text-3); }
body#about .cta-btn {
  background: transparent !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border-2) !important;
  border-radius: 12px !important;
}
body#about .cta-btn:hover {
  background: var(--dk-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ============================================================
   §11  contact 表单
   ============================================================ */
body#contact .form-head h2 { color: var(--dk-text); }
body#contact .form-head p { color: var(--dk-text-3); }
body#contact .form-group label,
body#contact .mh-form label { color: var(--dk-text-2); }
body#contact .form-group input,
body#contact .form-group select,
body#contact .form-group textarea,
body#contact .mh-form input,
body#contact .mh-form select,
body#contact .mh-form textarea {
  background: var(--dk-glass) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
  border-radius: 10px;
}
body#contact .form-group input::placeholder,
body#contact .form-group textarea::placeholder { color: var(--dk-text-4); }
body#contact .form-group input:focus,
body#contact .form-group select:focus,
body#contact .form-group textarea:focus {
  border-color: var(--dk-accent) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .15);
}
body#contact .form-submit {
  background: var(--dk-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .35);
}
body#contact .form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(56, 189, 248, .4);
}
body#contact .form-tip { color: var(--dk-text-3); }
body#contact .form-tip a { color: var(--dk-accent) !important; }
body#contact .cc-section-title { color: var(--dk-text) !important; }
body#contact .company-list li { border-bottom: 1px solid var(--dk-border) !important; }
body#contact .cl-label { color: var(--dk-text-3) !important; }
body#contact .company-qr { background: var(--dk-glass) !important; border-radius: 12px; }
body#contact .qr-text strong { color: var(--dk-text); }
body#contact .qr-text span { color: var(--dk-text-3); }
body#contact .cc-icon { color: var(--dk-accent); }

/* ============================================================
   §12  feedback（Bootstrap 表单）
   ============================================================ */
body#feedback .feedback-banner { border-bottom: 1px solid var(--dk-border-hot) !important; }
body#feedback .form-horizontal .control-label { color: var(--dk-text-2) !important; }
body#feedback .form-control,
body#feedback .form-select {
  background: var(--dk-glass) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
  border-radius: 10px;
}
body#feedback .form-control:focus,
body#feedback .form-select:focus {
  border-color: var(--dk-accent) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .15);
}
body#feedback .input-group-addon {
  background: var(--dk-glass-2) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text-3);
}
body#feedback .input-group-addon .form-select { border: none !important; }
body#feedback #subBtn {
  background: var(--dk-grad) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .35);
}
body#feedback .font-red,
body#feedback .form-horizontal .control-label .font-red { color: var(--dk-accent); }
/* 反馈类型单选卡（site.css 未覆盖，extend.css 用 --mh-bg-soft） */
body#feedback .radioBox .radio label {
  background: var(--dk-glass) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text-2) !important;
  border-radius: 10px;
}
body#feedback .radioBox .radio label:hover {
  border-color: var(--dk-border-hot);
  color: var(--dk-text);
}
body#feedback .radioBox .radio input:checked + label,
body#feedback .radioBox .radio input:checked ~ label {
  border-color: var(--dk-accent) !important;
  background: rgba(56, 189, 248, .12) !important;
  color: var(--dk-accent) !important;
}

/* ============================================================
   §13  service-guarantee 服务保障
   ============================================================ */
body#serviceGuarantee .section-title h2 { color: var(--dk-text) !important; }
body#serviceGuarantee .section-desc { color: var(--dk-text-3) !important; }
body#serviceGuarantee .sustain-box .sustain-head h4 { color: var(--dk-text) !important; }
body#serviceGuarantee .sustain-box p { color: var(--dk-text-3); }
body#serviceGuarantee .flow-icon {
  background: var(--dk-grad) !important;
  color: #fff !important;
  border-radius: 50% !important;
}
body#serviceGuarantee .flow-box h5 { color: var(--dk-text) !important; }
body#serviceGuarantee .flow-box p { color: var(--dk-text-3); }
/* phonation 期待您的声音 区块（含内联黑色字按钮，需 !important 覆盖） */
body#serviceGuarantee .phonation h2 { color: var(--dk-text); }
body#serviceGuarantee .phonation h4 { color: var(--dk-text); }
body#serviceGuarantee .phonation p { color: var(--dk-text-3); }
body#serviceGuarantee .phonation .btn-normal-light {
  background: var(--dk-glass) !important;
  border: 1px solid var(--dk-border-2) !important;
  border-radius: 12px;
}
body#serviceGuarantee .phonation .btn-normal-light:hover {
  border-color: var(--dk-border-hot) !important;
}
/* 覆盖内联 style="color:rgba(0,0,0,.9)" —— !important 可压过无 !important 的内联声明 */
body#serviceGuarantee .phonation .btn-normal-light a {
  color: var(--dk-accent) !important;
}

/* ============================================================
   §14  product-detail 商品详情
   ============================================================ */
body#productDetail .breadcrumb-bar a,
body#productDetail .breadcrumb a { color: var(--dk-text-3); }
body#productDetail .breadcrumb-bar a:hover { color: var(--dk-accent); }
body#productDetail .detail-name,
body#productDetail .detail-title { color: var(--dk-text); }
body#productDetail .detail-desc,
body#productDetail .detail-brief { color: var(--dk-text-3); }
body#productDetail .detail-price b {
  background: var(--dk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body#productDetail .btn-cart,
body#productDetail .btn-buy {
  background: var(--dk-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
}
body#productDetail .detail-desc-tabs .tab { color: var(--dk-text-3); }
body#productDetail .detail-desc-tabs .tab.active {
  color: var(--dk-accent) !important;
  border-bottom: 2px solid var(--dk-accent) !important;
}
body#productDetail .detail-desc-cont { color: var(--dk-text-2); }
body#productDetail .detail-desc-cont a { color: var(--dk-accent); }
body#productDetail .detail-desc-cont h2,
body#productDetail .detail-desc-cont h3 { color: var(--dk-text); }

/* ============================================================
   §15  document 系列（列表 / 搜索胶囊 / 详情 / 侧栏）
   ============================================================ */
body:is(#document, #documentResult) .input-search {
  background: var(--dk-glass) !important;
  border: 1px solid var(--dk-border-2) !important;
  border-radius: 999px;
  box-shadow: none !important;
}
body:is(#document, #documentResult) .input-search input { color: var(--dk-text); }
body:is(#document, #documentResult) .input-search input::placeholder { color: var(--dk-text-4); }
body:is(#document, #documentResult) .input-search .search-btn {
  background: var(--dk-grad) !important;
  color: #fff !important;
  border-radius: 999px;
}
body#document .document-box .document-header h5 { color: var(--dk-text); }
body#document .document-box p,
body#documentResult .document-details-item p { color: var(--dk-text-3); }
body#document .document-nav,
body:is(#document, #documentDetails, #documentResult) .document-announce { color: var(--dk-text-2); }

/* ============================================================
   §16  terms / privacy 法律页（不在 site.css 白名单；覆盖 page.css 浅底 + 内联 #terms .legal-*）
   ============================================================ */
body#terms .server-banner2,
body#privacy .server-banner2 {
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(37, 99, 235, .22), transparent 70%),
    linear-gradient(180deg, #0F172A 0%, var(--dk-bg) 100%);
  border-bottom: 1px solid var(--dk-border-hot);
}
body#terms .server-banner2 h1,
body#privacy .server-banner2 h1 {
  color: transparent !important;
  background: var(--dk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body#terms .server-banner-desc2,
body#privacy .server-banner-desc2 { color: var(--dk-text-3); }
/* 法律正文容器 + 覆盖内联 #terms/#privacy .legal-* 的浅色硬编码（特异性 body#id .legal > #id .legal） */
body#terms .legal-body,
body#privacy .legal-body {
  background: var(--dk-surface);
  border: 1px solid var(--dk-border);
  border-radius: 16px;
  padding: 48px;
  color: var(--dk-text-2);
}
body#terms .legal-updated,
body#privacy .legal-updated,
body#terms .legal-intro,
body#privacy .legal-intro { color: var(--dk-text-3); }
body#terms .legal-h2,
body#privacy .legal-h2 {
  color: var(--dk-text) !important;
  border-left: 3px solid var(--dk-accent) !important;
  padding-left: 12px;
}
body#terms .legal-h2::before,
body#privacy .legal-h2::before { background: var(--dk-accent) !important; }
body#terms .legal-ul,
body#privacy .legal-ul { color: var(--dk-text-2); }
body#terms .legal-ul li,
body#privacy .legal-ul li { color: var(--dk-text-2); }
body#terms .legal-body a,
body#privacy .legal-body a { color: var(--dk-accent); }
body#terms .legal-contact,
body#privacy .legal-contact {
  background: var(--dk-glass) !important;
  border: 1px solid var(--dk-border-2) !important;
  border-radius: 12px;
  color: var(--dk-text-2) !important;
}
body#terms .legal-footer-text,
body#privacy .legal-footer-text { color: var(--dk-text-4); }

/* ============================================================
   §17  购物车 Vue（body#shoppingCartVue，Element UI 体系）
   重映射 Element 令牌 + 卡片/表格/按钮深色化
   ============================================================ */
body#shoppingCartVue {
  --color-primary: #38BDF8 !important;
  --color-primary-light: rgba(56, 189, 248, .12) !important;
  --el-color-primary: #38BDF8 !important;
}
body#shoppingCartVue .main-card {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  border-radius: 14px !important;
}
body#shoppingCartVue .main-title {
  color: var(--dk-text) !important;
  border-bottom: 1px solid var(--dk-border-2) !important;
}
body#shoppingCartVue .goods-table thead th {
  background: var(--dk-surface-2) !important;
  color: var(--dk-text-3) !important;
  border-bottom: 1px solid var(--dk-border) !important;
}
body#shoppingCartVue .goods-table tbody td {
  color: var(--dk-text-2) !important;
  border-bottom: 1px solid var(--dk-border) !important;
}
body#shoppingCartVue .goods-table tbody tr:hover td {
  background: var(--dk-glass) !important;
}
body#shoppingCartVue .buy-btn {
  background: var(--dk-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
}
body#shoppingCartVue .total-price {
  background: var(--dk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body#shoppingCartVue .el-input__inner {
  background: var(--dk-glass) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
  border-radius: 8px !important;
}
body#shoppingCartVue .el-button--primary {
  background: var(--dk-grad) !important;
  border: none !important;
  border-radius: 10px !important;
}
body#shoppingCartVue .el-button--default {
  background: var(--dk-glass) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text-2) !important;
  border-radius: 10px !important;
}

/* ============================================================
   §18  响应式 + 无障碍
   ============================================================ */
@media screen and (max-width: 992px) {
  /* 移动端顶栏/胶囊条在深色下保持，无需额外处理 */
}
@media screen and (max-width: 768px) {
  body#terms .legal-body,
  body#privacy .legal-body { padding: 24px 18px; }
  body#about .story-img { border-width: 3px !important; }
}
@media screen and (max-width: 600px) {
  body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails,
          #document, #documentDetails, #documentResult, #feedback, #serviceGuarantee) .server-banner2 {
    padding: 48px 0 40px !important;
  }
  body:is(#announce, #announceDetails, #news, #newsClassify, #newsDetails,
          #document, #documentDetails, #documentResult, #feedback, #serviceGuarantee) .server-banner2 h1 {
    font-size: 26px !important;
    letter-spacing: 2px !important;
  }
  body#shop .shop-title { font-size: 30px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body:is(#shop, #sale, #about, #contact, #serviceGuarantee, #shoppingCartVue,
          #productDetail, #announce, #announceDetails, #news, #newsClassify,
          #newsDetails, #document, #documentDetails, #documentResult, #feedback) * {
    scroll-behavior: auto;
  }
}