/* ==========================================================================
   Cybrey 产品详情页 深色样式（纯颜色层，dark.css 统一管理）
   --------------------------------------------------------------------------
   设计规范来源：Figma「Cybrey官网设计」
     PC  端：node-id=2512-804（产品详情页-横向对比样式-深色版，1920px）
     移动端：node-id=2523-2923（产品详情页-横向对比样式-移动端，375px）
   --------------------------------------------------------------------------
   原则：
     1. 只改颜色（background / color / border-color / 分隔线色 / 滚动条色），
        不改布局（宽度/间距/字号/对齐/显隐均由页面主样式负责）；
     2. 全局颜色规则统一带 !important；
     3. 特异性保障：主样式（newDetail_20250903_105010.css）在 dark.css 之后加载，
        同权重 !important 时后者赢，因此：
        - body 用 html body（0-0-2）提高特异性；
        - 所有普通类选择器统一加 .newDetail 前缀提高特异性；
        - Key Spec 表等内嵌浅色样式带 !important 的，用同权重 !important + id 前缀对位压制。
     4. 变量定义在 .newDetail 作用域（不进 :root），只影响引入本文件的深色页。
   --------------------------------------------------------------------------
   颜色体系（CSS 变量）：
     --csd-bg          区块/内容底色   #111111
     --csd-bg-sub      次级底色        #222222（表头/首列/斑马纹交替行/Tips 条）
     --csd-text        主文字          #FFFFFF
     --csd-text-sub    次要文字        #B5BBC7
     --csd-text-dim    弱化文字        #7D7D7D
     --csd-accent      强调/链接       #8C5FFF（View More/Datasheet/选中卡，Figma fill_ec17bb54）
     --csd-brand       品牌底（主按钮）#6D39E5（主按钮/激活下划线，Figma fill_acb77579）
     --csd-accent-deep 亮紫 hover      #6D39E5
     --csd-accent-dim  亮紫半透明底    rgba(140,95,255,0.15)（移动端 0.1）
     --csd-grid        表格网格线      #565B66
     --csd-divider     区块分隔线      rgba(213,213,213,0.5)
     --csd-btn-border  按钮边框        #D7D9DD
   断点：内嵌浅色样式移动断点 750px（带 !important），dark.css 以 750px 对位压制；
   布局断点由黑屏.css 布局层负责，本文件不含布局规则。
   ========================================================================== */

/* ---------------- 设计变量（.newDetail 作用域） ---------------- */
.newDetail {
    --csd-bg: #111111;
    --csd-bg-sub: #222222;
    --csd-text: #FFFFFF;
    --csd-text-sub: #B5BBC7;
    --csd-text-dim: #7D7D7D;
    --csd-accent: #8C5FFF;
    --csd-brand: #6D39E5;
    --csd-accent-deep: #6D39E5;
    --csd-accent-dim: rgba(140, 95, 255, 0.15);
    --csd-grid: #565B66;
    --csd-divider: rgba(213, 213, 213, 0.5);
    --csd-btn-border: #D7D9DD;
}

/* ---------------- 全局底色 ----------------
   html body 提高特异性：压制 newDetail_20250903_105010.css 的 body{background:#f7f9fa!important}
   （同权重 !important 时特异性 0-0-2 > 0-0-1，与加载顺序无关） */
html body {
    background: #000000 !important;
}

/* ---------------- 区块容器：#111111（页面 #000 / 区块 #111 层次） ---------------- */
.newDetail .n-detail-head,
.newDetail .n-detail-item,
.newDetail .n-nav,
.newDetail .n-detail-item .com-product-QA-main .advisory-list .advisory-tip {
    background-color: var(--csd-bg, #111111) !important;
}

/* ---------------- 区块标题行 ----------------
   视频清单标题用的是 <span>（其余模块是 <h2>），一并覆盖为白色 */
.newDetail .n-detail-item-title h2,
.newDetail .n-detail-item-title span {
    color: var(--csd-text, #FFFFFF) !important;
}

/* 标题行分隔线颜色（宽度/位置由布局层负责，此处只改色） */
.newDetail #specificationSection.n-detail-item .n-detail-item-title {
    border-bottom-color: var(--csd-divider, rgba(213, 213, 213, 0.5)) !important;
}

/* Features 标题行分隔线与富文本内容之间的 24px 间距（margin-bottom）铺成 #000000：
   margin 本身没有背景色，用标题行 ::after 伪元素在分割线下方补一条 24px 黑条
   （宽度=标题行 1400px，两侧原本就是 body #000，视觉上整条通黑） */
@media screen and (min-width: 751px) {
    .newDetail .n-detail-item:has(> .n-detail-page-content) .n-detail-item-title {
        position: relative;
    }

    .newDetail .n-detail-item:has(> .n-detail-page-content) .n-detail-item-title::after {
        content: '';
        position: absolute;
        /* 100% 是 padding 盒下缘=分割线顶部，子元素会盖住父级边框，+1px 从分割线下方开始 */
        top: calc(100% + 1px);
        left: 0;
        width: 100%;
        height: 24px;
        background: #000000;
    }
}

/* View More / All Resources / Ask a Question 链接：紫色（对齐浅色主题 #6D39E5） */
.newDetail .n-detail-item-title a {
    color: var(--csd-accent, #8C5FFF) !important;
}

.newDetail .n-detail-item-title a:hover {
    color: var(--csd-accent, #8C5FFF) !important;
}

/* ---------------- 导航（.n-nav） ---------------- */
/* 未选中标签：#B5BBC7；选中：#FFFFFF；移动端下拉触发文案保持白色 */
.newDetail .n-nav-show {
    color: var(--csd-text, #FFFFFF) !important;
}

.newDetail .n-nav ul li,
.newDetail .n-nav ul li:hover {
    color: #B5BBC7 !important;
}

.newDetail .n-nav .n-nav-active {
    color: #FFFFFF !important;
}

/* 导航底部分隔线：#D5D5D5 @ 50% 不透明度 */
.newDetail .n-nav {
    border-bottom-color: rgba(213, 213, 213, 0.5) !important;
}

/* 吸顶后（JS 滚动监听会给 .n-nav 加 .active）导航通铺全屏：
   破框到视口两边缘，内部标签/按钮仍与当前断点的容器宽度对齐
   （1440→1200 / 1280→1024 / 1040→750，≥1441 为 1400，与主样式 .newDetail 断点一致） */
@media screen and (min-width: 991px) {
    .newDetail {
        --csd-nav-container: 1400px;
    }
}

@media screen and (min-width: 991px) and (max-width: 1440px) {
    .newDetail {
        --csd-nav-container: 1200px;
    }
}

@media screen and (min-width: 991px) and (max-width: 1280px) {
    .newDetail {
        --csd-nav-container: 1024px;
    }
}

@media screen and (min-width: 991px) and (max-width: 1040px) {
    .newDetail {
        --csd-nav-container: 750px;
    }
}

@media screen and (min-width: 991px) {
    .newDetail .n-nav.active {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box !important;
        padding-left: max(20px, calc((100vw - var(--csd-nav-container, 1400px)) / 2 + 20px)) !important;
        padding-right: max(20px, calc((100vw - var(--csd-nav-container, 1400px)) / 2 + 20px)) !important;
    }
}

/* 导航激活下划线：白色 #FFFFFF、100% 不透明度、粗细 1px；
   下移 1px 正好压在导航分隔线位置上（子元素绘制在父级边框之上） */
.newDetail .n-nav ul li::after {
    background-color: #FFFFFF !important;
    bottom: -1px !important;
    height: 1px !important;
}

/* 导航内 Sales Enquiry 按钮：主紫底白字（对齐设计稿 2512:924/925） */
.newDetail .n-nav .n-detail-btn {
    background: var(--csd-brand, #6D39E5) !important;
    color: #FFFFFF !important;
}

/* ---------------- 按钮（Datasheet 次按钮 / Sales Enquiry 主按钮） ----------------
   Figma：Datasheet 透明底紫边框紫字；Sales Enquiry 紫底黑字；hover 紫色加深 */
.newDetail .n-detail-btns .n-detail-btn.whiteBtn {
    border-color: var(--csd-accent, #8C5FFF) !important;
    color: var(--csd-accent, #8C5FFF) !important;
}

.newDetail .n-detail-btns .n-detail-btn.whiteBtn:hover {
    background-color: rgba(140, 95, 255, 0.15) !important;
}

.newDetail .n-detail-btns .n-detail-btn.redBtn {
    border-color: transparent !important;
    background-color: var(--csd-accent, #8C5FFF) !important;
    color: #FFFFFF !important;
}

.newDetail .n-detail-btns .n-detail-btn.redBtn:hover,
.newDetail .n-detail-btn.redBtn:hover {
    background-color: var(--csd-accent-deep, #6D39E5) !important;
    color: #FFFFFF !important;
}

/* ---------------- 产品信息区（标题/描述/型号卡） ---------------- */
.newDetail .n-detail-head .n-detail-info h1,
.newDetail .n-detail-head .n-detail-info p,
.newDetail .n-detail-info-title,
.newDetail .n-detail-model strong,
.newDetail .n-detail-item .n-detail-model strong {
    color: var(--csd-text, #FFFFFF) !important;
}

/* Models 型号卡选中态：紫边框紫字（对齐 Figma 2512:864/875，替换 Reyee 绿） */
.newDetail .n-detail-model.n-detail-model-active {
    border-color: var(--csd-accent, #8C5FFF) !important;
}

.newDetail .n-detail-model.n-detail-model-active strong {
    color: var(--csd-accent, #8C5FFF) !important;
}

/* ---------------- Key Specification（主要规格） ----------------
   PC 端：斑马纹按 tr 行交替（原先正确的实现，予以恢复）——
     奇数行整行 #111111、偶数行整行 #222222（th 参数名列与 td 值格同行同色）；
     表头（产品卡）固定 #222222。
   移动端（≤750px）：th 满宽自成一行，行交替会错位 → 在 750px 块改为两段式
     （参数名 th #111111、值格 #222222，与白底移动端逻辑同构）。
   ⚠ 内嵌浅色样式带 !important（th/td padding、移动端背景），本段用同权重 !important 对位压制 */
/* PC 斑马纹：奇数行整组 #111111 */
.newDetail #specificationSection .n-specification-image-table tbody tr:nth-child(odd) th,
.newDetail #specificationSection .n-specification-image-table tbody tr:nth-child(odd) td {
    background-color: #111111 !important;
    color: #FFFFFF !important;
}

/* PC 斑马纹：偶数行整组 #222222 */
.newDetail #specificationSection .n-specification-image-table tbody tr:nth-child(even) th,
.newDetail #specificationSection .n-specification-image-table tbody tr:nth-child(even) td {
    background-color: #222222 !important;
    color: #FFFFFF !important;
}

/* 表头（产品卡）：固定 #222222 */
.newDetail #specificationSection .n-specification-image-table thead th {
    background-color: #222222 !important;
}

.newDetail #specificationSection .n-specification-image-table thead strong {
    color: #FFFFFF !important;
}

/* 单元格间分隔线颜色（白底为 2px #fff，黑底镜像 #111） */
.newDetail #specificationSection .n-specification-image-table th,
.newDetail #specificationSection .n-specification-image-table td {
    border-right-color: #111111 !important;
    border-bottom-color: #111111 !important;
    color: #FFFFFF !important;
}

/* Current（当前产品）标签：亮紫字 + 主紫 20% 半透明底（对齐设计稿 2512:1543-1547） */
.newDetail #specificationSection table.n-specification-image-table .n-specification-current {
    color: #8C5FFF !important;
    background-color: rgba(109, 57, 229, 0.2) !important;
}

.newDetail #specificationSection .n-specification-image-table-name:hover {
    color: #6D39E5 !important;
}

.newDetail #specificationSection .n-specification-scroll {
    scrollbar-color: #8B8B8B #222222 !important;
}

/* 多品 Key Spec 拖拽预览浮层：深底深边框
   （浮层由 JS 动态生成且 position:fixed，可能挂在 body 下、不在 .newDetail 内，故不加前缀） */
.n-specification-drag-preview {
    background-color: #111111 !important;
    border-color: #565B66 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* 浮层内克隆的单元格/表头同步深色（压制浅色 #f7f8fa / #252525） */
.n-specification-drag-preview .n-specification-image-table th,
.n-specification-drag-preview .n-specification-image-table td {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    border-right-color: #111111 !important;
    border-bottom-color: #111111 !important;
}

.n-specification-drag-preview .n-specification-image-table thead th {
    background-color: #222222 !important;
}

.n-specification-drag-preview .n-specification-image-table thead strong {
    color: #FFFFFF !important;
}

/* 拖拽把手：原深灰点阵图标在 #222222 表头上对比度不足，换浅灰版
   （只换图，位置/尺寸沿用主样式；移动端把手 display:none 不受影响） */
.newDetail #specificationSection .n-specification-drag-handle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='%238B8B8B'%3E%3Ccircle cx='6' cy='3' r='1.6'/%3E%3Ccircle cx='12' cy='3' r='1.6'/%3E%3Ccircle cx='6' cy='9' r='1.6'/%3E%3Ccircle cx='12' cy='9' r='1.6'/%3E%3Ccircle cx='6' cy='15' r='1.6'/%3E%3Ccircle cx='12' cy='15' r='1.6'/%3E%3C/svg%3E") !important;
}

/* js 渲染的单品规格表：PC 斑马纹（奇数行 #222、偶数行 #111，整组交替，用户确认勿改） */
.newDetail #specificationSection .n-specification-table-head,
.newDetail #specificationSection .n-specification-table-cell {
    background-color: #222222 !important;
    color: #FFFFFF !important;
}

.newDetail #specificationSection .n-specification-table-row:nth-child(even) .n-specification-table-head,
.newDetail #specificationSection .n-specification-table-row:nth-child(even) .n-specification-table-cell {
    background-color: #111111 !important;
}

/* ---------------- Specifications（技术参数） ----------------
   内嵌样式（.n-spec-level1-table 等）无 !important，颜色覆盖加 important 双保险 */
/* Category 一级分类标题：白字（压制内嵌 #252525） */
.newDetail #specifications .n-spec-category-title span {
    color: var(--csd-text, #FFFFFF) !important;
}

/* 多品 level1 对比表：网格线 #565B66（对齐 EL-c1ca7348 stroke） */
.newDetail #specifications .n-spec-level1-table {
    background-color: var(--csd-grid, #565B66) !important;
    border-color: var(--csd-grid, #565B66) !important;
}

/* 单元格：白字，网格线 #565B66（padding 维持内嵌 12px 16px 不动） */
.newDetail #specifications .n-spec-level1-table th,
.newDetail #specifications .n-spec-level1-table td {
    color: var(--csd-text, #FFFFFF) !important;
    border-color: var(--csd-grid, #565B66) !important;
}

/* 表头：#222222 深底（压制内嵌 #f7f8fa） */
.newDetail #specifications .n-spec-level1-table thead th {
    background-color: var(--csd-bg-sub, #222222) !important;
}

/* 参数名列：#222222 深底白字（压制内嵌 #fff / #6b7280） */
.newDetail #specifications .n-spec-level1-table tbody th {
    background-color: var(--csd-bg-sub, #222222) !important;
    color: var(--csd-text, #FFFFFF) !important;
}

/* 值单元格：#111111 深底（压制内嵌 #fff） */
.newDetail #specifications .n-spec-level1-table tbody td {
    background-color: var(--csd-bg, #111111) !important;
}

/* 滚动条深色 */
.newDetail #specifications .n-spec-level1-scroll {
    scrollbar-color: #8B8B8B var(--csd-bg-sub, #222222) !important;
}

/* 单品折叠分组：折叠标题深底白字 + 箭头变白 */
.newDetail #specifications .content-title--p--m {
    background-color: var(--csd-bg-sub, #222222) !important;
}

.newDetail #specifications .content-title--p--m > span {
    color: var(--csd-text, #FFFFFF) !important;
}

.newDetail #specifications .content-title--p--m .arrow-btn line {
    stroke: var(--csd-text, #FFFFFF) !important;
}

/* 二级分类标题：白字 */
.newDetail #specifications .content-subtitle--p--m {
    color: var(--csd-text, #FFFFFF) !important;
}

/* 单品折叠区边框统一 #565B66（原浅色 #e3e5e6 / #eaeaea，黑底上为亮灰线） */
.newDetail #specifications .content-subtitle--p--m {
    border-top-color: var(--csd-grid, #565B66) !important;
}

.newDetail #specifications .detail--p--m {
    border-color: var(--csd-grid, #565B66) !important;
}

.newDetail #specifications .detail--p--m::after {
    background-color: var(--csd-grid, #565B66) !important;
}

/* 参数行：参数名白字，参数值次要文字 #B5BBC7 */
.newDetail #specifications .detail--p--m > span {
    color: var(--csd-text, #FFFFFF) !important;
}

.newDetail #specifications .detail--p--m li {
    color: var(--csd-text-sub, #B5BBC7) !important;
}

/* Show More 按钮：#111 底 + #D7D9DD 边框 + 白字（只改颜色，尺寸维持主样式） */
.newDetail #specifications .n-toggle-btn {
    color: var(--csd-text, #FFFFFF) !important;
    background-color: var(--csd-bg, #111111) !important;
    border-color: var(--csd-btn-border, #D7D9DD) !important;
}

/* 收起态底部渐变遮罩：白渐变 → 黑渐变（0% 透明 #111 → 100% 实色 #111，与区块底色一致） */
.newDetail #specifications .n-toggle::after {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 0%, #111111 100%) !important;
}

/* ---------------- 产品对比（#Comparison） ---------------- */
.newDetail #Comparison .n-head-type {
    color: var(--csd-text, #FFFFFF) !important;
}

.newDetail .n-params-compare .bodyDiv,
.newDetail .n-head-type {
    border-color: #7D7D7D !important;
}

.newDetail #Comparison .n-params-compare .n-params-name-col .bodyDiv {
    color: var(--csd-text, #FFFFFF) !important;
}

.newDetail #Comparison .n-params-compare .bodyDiv {
    color: var(--csd-text-sub, #B5BBC7) !important;
}

/* 选中产品：底 #111111，指示线紫色（对齐浅色主题） */
.newDetail .selected-product {
    background-color: var(--csd-bg, #111111) !important;
}

.newDetail .selected-line {
    background: var(--csd-accent, #8C5FFF) !important;
}

/* ---------------- FAQ（问答区） ----------------
   Tips 条 #222222（对齐移动端 2523:3358）；项分隔 rgba(125,125,125,.2)（对齐 EL-f157dafb） */
.newDetail .n-detail-item .com-product-QA-main .advisory-list .advisory-tip .red {
    color: var(--csd-text, #FFFFFF) !important;
}

.newDetail .advisory-list .advisory-item {
    border-color: rgba(125, 125, 125, 0.2) !important;
}

.newDetail .advisory-list .advisory-item .item-question,
.newDetail .advisory-list .advisory-item .item-question:after {
    color: var(--csd-text, #FFFFFF) !important;
}

.newDetail .advisory-list .advisory-item .item-answer,
.newDetail .advisory-list .advisory-item .item-answer:after {
    color: var(--csd-text-sub, #B5BBC7) !important;
}

/* 点赞选中：文字紫色 */
.newDetail .advisory-list .item-evaluate.evaluate-on {
    color: var(--csd-accent, #8C5FFF) !important;
}

/* 点赞选中态图标：praise.svg 雪碧图下半是画死的红色图标（CSS 改不了 SVG 内部色），
   深色下用 data URI 内联的紫色镂空赞图标替换（仅紫色描边、不填充，对齐浅色版线性风格） */
.newDetail .n-detail-item .advisory-list .item-evaluate.evaluate-on:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238C5FFF' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.72v-2z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* 点赞常态（未点赞）：文字白色；常态图标同样换白色镂空版（原雪碧常态图标偏灰，黑底不清晰）。
   选中态规则（.evaluate-on）特异性更高，点赞后仍为紫色，不受影响 */
.newDetail .n-detail-item .advisory-list .item-evaluate {
    color: #FFFFFF !important;
}

.newDetail .n-detail-item .advisory-list .item-evaluate:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.72v-2z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ---------------- Resources（资源区） ---------------- */
.newDetail .n-detail-resource-head {
    color: var(--csd-text, #FFFFFF) !important;
}

.newDetail .n-detail-resource ul li a:hover {
    color: var(--csd-accent, #8C5FFF) !important;
}

/* 资源链接箭头：hover 时换成紫色 #8C5FFF 右箭头 SVG（单帧，内联 data URI）。
   原 hover 是靠雪碧图位移切帧（background-position: 0 -24px），
   换成单帧 SVG 后必须把位移钉回原位，否则 hover 时箭头会滑出可视区 */
.newDetail .n-detail-resource ul li a:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 12.0039H6' stroke-linecap='round' stroke-linejoin='round' stroke='%238C5FFF'/%3E%3Cpath d='M12 6L18 12L12 18' stroke-linecap='round' stroke-linejoin='round' stroke='%238C5FFF'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ---------------- 视频清单（Videos） ----------------
   设计规范：PC 2512:1151-1166 / 移动端 2523:3342-3352（视频卡片组件 2442:1207）
   要点：卡片去浅色白底描边（无边框无底色，缩略图 4px 圆角）；
   标题白色 500/16；日期 #9B9FA8/14；
   时长角标：rgba(42,43,46,0.8) 底、4px 圆角、高 18、右下 8px、白字 12/400 */
.newDetail .n-detail-video-list .n-videoContainer {
    border: none !important;
    background: transparent !important;
    border-radius: 4px !important;
}

/* 文案区：上/右/下 8px、左 0（标题与缩略图左缘对齐，对齐设计稿文本框内边距） */
.newDetail .n-detail-video-list .n-video-meta {
    padding: 8px 8px 8px 0 !important;
    background: transparent !important;
}

/* 标题：白色 Medium（压制浅色 #292929 / #2A2B2E） */
.newDetail .n-detail-video-list .n-videoContainer p,
.newDetail .n-detail-video-list .n-video-title {
    color: var(--csd-text, #FFFFFF) !important;
    font-weight: 500 !important;
}

/* 日期：#9B9FA8（设计稿辅助色，显式钉死防继承） */
.newDetail .n-detail-video-list .n-video-date {
    color: #9B9FA8 !important;
}

/* 时长角标（设计稿 2512:1157;14677:7651：高 18、padding 0 4px、圆角 4、底 rgba(42,43,46,0.8)） */
.newDetail .n-detail-video-list .video-duration {
    background: rgba(42, 43, 46, 0.8) !important;
    border-radius: 4px !important;
    height: 18px !important;
    padding: 0 4px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

.newDetail .n-detail-video-list .video-duration svg {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
}

.newDetail .n-detail-video-list .video-duration-text {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 12px !important;
    color: #FFFFFF !important;
}

/* PC 端（≥751px）：
   1. 两侧渐隐改黑色（对齐设计稿 2512:1165 右缘黑色渐隐，浅色版是白色渐隐/未启用）；
   2. 底部进度指示条对齐设计稿 2512:1161-1164：高 4px 居中短条，
      轨道 rgba(181,187,199,0.2)、进度 --csd-accent（现有 JS 进度条机制的深色化） */
@media screen and (min-width: 751px) {
    .newDetail .n-detail-video-list #videoDetailSwiper::after {
        background: linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%) !important;
    }

    .newDetail .n-detail-video-list #videoDetailSwiper.left-shadow::before {
        background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%) !important;
    }

    .newDetail .n-detail-video-list #videoDetailSwiper .swiper-pagination {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 96px !important;
        height: 4px !important;
        bottom: 24px !important;
        background: rgba(181, 187, 199, 0.2) !important;
        border-radius: 2px !important;
    }

    .newDetail .n-detail-video-list #videoDetailSwiper .swiper-pagination .swiper-scrollbar-drag,
    .newDetail .n-detail-video-list #videoDetailSwiper .swiper-pagination .swiper-pagination-progressbar-fill {
        background: var(--csd-accent, #8C5FFF) !important;
        border-radius: 2px !important;
    }
}

/* 移动端（≤750px）：View More 按钮 #111 底 + 灰边框 + 白字（对齐设计稿 2523:3351） */
@media screen and (max-width: 750px) {
    .newDetail .n-detail-video-list .n-detail-btn {
        background-color: var(--csd-bg, #111111) !important;
        border: 1px solid rgba(125, 125, 125, 0.5) !important;
        color: var(--csd-text, #FFFFFF) !important;
        border-radius: 4px !important;
    }
}

/* ---------------- 富文本内容区（CMS 内容深色适配，迁移自黑屏.css） ---------------- */
/* 黑底 PC 端富文本内容区全屏：突破 .newDetail（1400px，主样式）的限宽
   ⚠ 原写法 width:100% 无效——百分比是相对父级 .n-detail-item 的 1400px，不是视口；
      正确做法是「破框」：以 50vw 为基准向左右各打负外边距，把元素拉到视口两边缘。
   ⚠ 只拉通 .n-detail-page-content 本体；所在区块（.n-detail-item）与标题行
     （.n-detail-item-title）保持 1400px 限宽，与其它模块标题宽度一致。
   ⚠ 100vw 含滚动条宽度，会带来约半个滚动条宽的横向溢出，
     故用 html{overflow-x:clip} 消掉横向滚动条（clip 不创建滚动容器，不影响 .n-nav 的 sticky） */
@media screen and (min-width: 751px) {
    html {
        overflow-x: clip;
    }

    /* 富文本内容本体：破框满屏（区块底色/标题行不随之拉通） */
    .newDetail .n-detail-page-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box !important;
    }
}

.newDetail .n-detail-page-content p.party_10-tips,
.newDetail .n-detail-page-content p.gary {
    color: var(--csd-text-dim, #7D7D7D) !important;
}

.newDetail .party_box h3,
.newDetail .li04 dt p,
.newDetail .party_07-list h3,
.newDetail .table_01 tbody td p {
    color: var(--csd-text, #FFFFFF) !important;
}

.newDetail .party_07-list p {
    color: var(--csd-text-sub, #B5BBC7) !important;
}

/* 表格底部说明链接：白字下划线，hover 紫色（对齐浅色主题） */
.newDetail .table_p {
    color: var(--csd-text-dim, #7D7D7D) !important;
}

.newDetail .table_p a {
    color: var(--csd-text, #FFFFFF) !important;
}

.newDetail .n-note-desc {
    color: var(--csd-text-sub, #B5BBC7) !important;
}

.newDetail .btnfr {
    background: var(--csd-text, #FFFFFF) !important;
}

/* ---------------- 杂项（面包屑） ---------------- */
.newDetail .ws-product-detail-bcb ul li:last-child a {
    color: var(--csd-text-sub, #B5BBC7) !important;
}

/* ==========================================================================
   移动端颜色层（设计规范来源：Figma node-id=2523-2923，375px）
   --------------------------------------------------------------------------
   断点说明：模板内嵌浅色样式的移动断点是 750px 且带 !important，
   因此 750px 以下用同权重 !important 对位压制；
   990px 断点承接平板区间差异。
   --------------------------------------------------------------------------
   ⚠ 移动端 Key Spec 斑马纹要点：
   内嵌样式在 ≤750px 将每个 <tr> 变为 grid 布局——th（参数名）满宽一行、
   td（值格）横向一行，同属一个 <tr>。因此斑马纹必须「按参数（tr）交替，
   th 与 td 同组同色」：奇数参数整组 #111111、偶数参数整组 #222222。
   若 th 与 td 分别配色，会出现同一参数两行颜色不一致（已修正的问题）。
   ========================================================================== */
@media screen and (max-width: 990px) {

    /* Current 标签底色变量重定义：移动端浅一档（对齐 #2547:1718 rgba(...,0.1)） */
    .newDetail {
        --csd-accent-dim: rgba(140, 95, 255, 0.1);
    }
}

/* 750px 以下：对位压制模板内嵌浅色 !important 背景（对齐移动端设计稿底色分配） */
/* 750px 以下：对位压制模板内嵌浅色 !important 背景（对齐移动端设计稿底色分配）
   斑马色挂在 tr 上（行底色），th/td 全透明露出行底色：
   移动端 tr 为 grid（参数名满宽行 + 值格横滚行），th/td 透明保证同一参数两行颜色必然一致，
   且不受任何针对单元格的行内样式/浅色规则影响 */
@media screen and (max-width: 750px) {
    /* 移动端：th 满宽自成一行，PC 斑马纹（tr 奇偶交替）会错位 → 改为两段式
       （参数名 th #111111、值格 #222222，与白底移动端逻辑同构）
       注意需同时覆盖本文件 PC 斑马规则（nth-child 特异性更高，此处必须逐条对位压制） */
    .newDetail #specificationSection .n-specification-image-table tbody tr:nth-child(odd) th,
    .newDetail #specificationSection .n-specification-image-table tbody tr:nth-child(even) th,
    .newDetail #specificationSection .n-specification-image-table tbody th {
        background-color: #111111 !important;
        color: #FFFFFF !important;
    }

    .newDetail #specificationSection .n-specification-image-table tbody tr:nth-child(odd) td,
    .newDetail #specificationSection .n-specification-image-table tbody tr:nth-child(even) td,
    .newDetail #specificationSection .n-specification-image-table tbody td,
    .newDetail #specificationSection .n-specification-image-table thead th {
        background-color: #222222 !important;
        color: #FFFFFF !important;
    }

    /* 单品 key spec 移动端：JS 渲染两两分组（row 内含 2 个 data=2 个参数），
       移动端一行 = 一个参数，交替挂到 data 级才能一行一换（覆盖全局段的 row 级交替）：
       第 1、3、5… 个参数 #222222，第 2、4、6… 个参数 #111111 */
    .newDetail #specificationSection .n-specification-table-data:nth-child(odd) .n-specification-table-head,
    .newDetail #specificationSection .n-specification-table-data:nth-child(odd) .n-specification-table-cell {
        background-color: #222222 !important;
    }

    .newDetail #specificationSection .n-specification-table-data:nth-child(even) .n-specification-table-head,
    .newDetail #specificationSection .n-specification-table-data:nth-child(even) .n-specification-table-cell {
        background-color: #111111 !important;
    }

    /* Specifications 单品折叠：二级分类标题背景 #565B66（用户确认） */
    .newDetail #specifications .content-subtitle--p--m {
        background-color: #222222 !important;
    }
}

/* ---------------- 评分区（#satisfaction）与页尾（footer） ----------------
   评分区：底色 #111111、文字 #FFFFFF、单选按钮（el-radio-button__inner）底色 #111111；
   页尾：底色 #111111、文字统一 #FFFFFF；页尾按钮（btn_02 ft_18）底色 #1A1A1A */
#satisfaction {
    background-color: #111111 !important;
}

#satisfaction,
#satisfaction * {
    color: #FFFFFF !important;
}

#satisfaction .el-radio-button__inner {
    background-color: #111111 !important;
}

footer,
.footer {
    background-color: #111111 !important;
}

footer,
.footer,
footer *,
.footer * {
    color: #9B9FA8 !important;
}

.btn_02.ft_18,
.btn_02 .ft_18 {
    background-color: #1A1A1A !important;
}
@media screen and (max-width: 900px) {
    .n-nav ul {
        background-color: #000;
    }
}

/* ---------------- 满意度评价细节（Figma node-id=2689-1210）：边框/选中态/输入框/Submit ---------------- */
/* 评分按钮常态：字 #B5BBC7 + 边框 rgba(213,213,213,0.5)（按设计稿；覆盖上方 #satisfaction * 的全白） */
#satisfaction .el-radio-button__inner {
    color: #B5BBC7 !important;
    border-color: rgba(213, 213, 213, 0.5) !important;
}

/* 评分按钮 hover：紫色 */
#satisfaction .el-radio-button__inner:hover {
    color: #6D39E5 !important;
    border-color: #6D39E5 !important;
}

/* 评分按钮选中态：紫字 + 紫边 + 紫连接阴影（对齐浅色主题选中态） */
#satisfaction .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #6D39E5 !important;
    border-color: #6D39E5 !important;
    -webkit-box-shadow: -1px 0 0 0 #6D39E5 !important;
    box-shadow: -1px 0 0 0 #6D39E5 !important;
}

/* 评论文本框：底 #111（与容器同色）+ 边框 #797E8A（对齐 Figma 输入框组件），文字已白 */
#satisfaction .el-textarea__inner {
    background-color: #111111 !important;
    border-color: #797E8A !important;
}

#satisfaction .el-textarea__inner:hover,
#satisfaction .el-textarea__inner:focus {
    border-color: #B5BBC7 !important;
}

/* Submit 按钮：#6D39E5 紫底 + 黑字（对齐浅色主题，替换原红底 #cb2927） */
#satisfaction .satisfaction-content-button .el-button--primary {
    background-color: #6D39E5 !important;
    border-color: #6D39E5 !important;
    color: #000000 !important;
}

#satisfaction .satisfaction-content-button .el-button--primary:hover {
    background-color: #5E32CE !important;
    border-color: #5E32CE !important;
    color: #000000 !important;
}

/* 按钮容器内所有文字统一黑色（特异性 1-1-0 > 上方 #satisfaction * 的 1-0-0，压制全白规则） */
#satisfaction .satisfaction-content-button,
#satisfaction .satisfaction-content-button * {
    color: #000000 !important;
}

/* ---------------- 页尾订阅（subscribe-email） ----------------
   输入框：内嵌样式未声明背景（浏览器默认白底）+ 上方 footer * 的白字 → 白底白字看不见输入内容，
   此处显式改深底白字；边框对齐 satisfaction 输入框的 #797E8A */
footer #subscribe-email-input {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    border-color: #797E8A !important;
}

footer #subscribe-email-input:hover,
footer #subscribe-email-input:focus {
    border-color: #B5BBC7 !important;
}

/* Subscribe 按钮常态：#9B9FA8 底 + 白字（用户确认）；hover/激活态（.active）紫底黑字 */
footer #subscribe-email-button {
    background-color: #9B9FA8 !important;
    color: #FFFFFF !important;
}

footer #subscribe-email-button:hover,
footer #subscribe-email-button.active {
    background-color: #6D39E5 !important;
    color: #292929 !important;
}

/* ---------------- 页尾社媒图标深色替换（footer_img1/2/3 为 <img> 标签，src 无法用 CSS 改，
   用 content:url() 替换渲染内容；每个 a 内 [默认图, 悬停图]，用 first/last-child 区分常态与悬停，
   悬停 opacity 切换逻辑沿用主样式不受影响） ----------------
   顺序：第1个 a=YouTube、第2个=LinkedIn、第3个=Facebook；常态灰、悬停白
   尺寸控制：源图宽高比不一（f 竖长 / in 方 / yt 横宽），强制 1:1 盒 + object-fit:contain
   等比缩放居中，padding 控制图标在圆内的占比（调大小改 padding 百分比即可） */
footer .btn_01 .fr p.p1 a img {
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding: 28% !important;
    object-fit: contain !important;
}

footer .btn_01 .fr p.p1 a:nth-child(1) img:first-child {
    content: url(https://eo-sgp-cos.ruijie.com/site_style/cybrey/product-details/img/footer-icon-youtube.png) !important;
}

footer .btn_01 .fr p.p1 a:nth-child(1) img:last-child {
    content: url(https://eo-sgp-cos.ruijie.com/site_style/cybrey/product-details/img/footer-icon-youtube-hover.png) !important;
}

footer .btn_01 .fr p.p1 a:nth-child(2) img:first-child {
    content: url(https://eo-sgp-cos.ruijie.com/site_style/cybrey/product-details/img/footer-icon-linkedin.png) !important;
}

footer .btn_01 .fr p.p1 a:nth-child(2) img:last-child {
    content: url(https://eo-sgp-cos.ruijie.com/site_style/cybrey/product-details/img/footer-icon-linkedin-hover.png) !important;
}

footer .btn_01 .fr p.p1 a:nth-child(3) img:first-child {
    content: url(https://eo-sgp-cos.ruijie.com/site_style/cybrey/product-details/img/footer-icon-facebook.png) !important;
}

footer .btn_01 .fr p.p1 a:nth-child(3) img:last-child {
    content: url(https://eo-sgp-cos.ruijie.com/site_style/cybrey/product-details/img/footer-icon-facebook-hover.png) !important;
}

/* 移动端 footer 菜单展开箭头：浅色雪碧图 t_15.png 在黑底不可见，换深色版 Vector.png
   （只替换图片，位置 right center / 尺寸 16px / no-repeat 沿用原规则） */
@media screen and (max-width: 990px) {
    footer .btn_01 .fl dl dt {
        background-image: url(https://eo-sgp-cos.ruijie.com/site_style/cybrey/product-details/img/Vector.png) !important;
    }
}