/* ============================================================
   Dream Power 全站深色科技主题 (dp-theme.css)
   由 public/header.html 引入 —— 首页与所有内页共同生效
   ------------------------------------------------------------
   与 custom-tweaks.css(首页专属区块) 的分工：
   本文件只负责「配色/背景/描边」这类通用层，以及内页专属区块；
   不设置会改变首页尺寸与布局的属性（字号、间距等），
   因为本文件在 body 内加载、晚于首页 head 里的 custom-tweaks.css。
   删掉 header.html 里那行 <link> 即可完全还原。
   ============================================================ */
:root{
  --dpt-orange:#ff5628; --dpt-orange-2:#f2491b; --dpt-red:#e52a2a;
  --dpt-cyan:#22d3ee;
  --dpt-bg:#070b16; --dpt-bg-2:#0a1020; --dpt-bg-3:#0d1732;
  --dpt-panel:rgba(255,255,255,.045);
  --dpt-panel-2:rgba(255,255,255,.075);
  --dpt-border:rgba(255,255,255,.09);
  --dpt-text:#e9edf7; --dpt-text-2:#a7b3c9; --dpt-text-3:#7d8aa3;
  --dpt-grad:linear-gradient(135deg,var(--dpt-orange),var(--dpt-orange-2));
  --dpt-grad-h:linear-gradient(90deg,var(--dpt-orange),var(--dpt-red));
  --dpt-shadow:0 26px 56px -30px rgba(0,0,0,.92);
}

/* ============================================================
   ① 基调：common.css 里 body/a 都是 #333，这是内页几乎所有
      文字的来源，覆盖这两条即可带动全站
   ============================================================ */
body{
  background:var(--dpt-bg) !important;
  color:var(--dpt-text-2) !important;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--dpt-text-2); transition:color .25s ease; }
a:hover{ color:var(--dpt-orange); }

/* 标题类统一提亮（只改颜色，不动字号，避免影响首页） */
h1,h2,h3,h4,h5,
.first-title,.second-title,.item-title,.header-title,
.company-name,.categary-title,.product-title,.product-title a,
.content h1,.content h2,.content h3,.content h4{
  color:var(--dpt-text) !important;
}
.second-title,.reminder,.date,.time{ color:var(--dpt-text-3) !important; }
/* 产品列表的浏览量/备注小字（common.css 里写死了深色） */
.product_list_99703_118 .remark-item span,
.remark .remark-item span,.remark-item span{ color:var(--dpt-text-3) !important; }

/* 面包屑 */
.bread_crumbs_99703_114{ color:var(--dpt-text-3) !important; }
.bread_crumbs_99703_114 a{ color:var(--dpt-text-3) !important; }
.bread_crumbs_99703_114 a:hover{ color:var(--dpt-orange) !important; }

/* 通用分隔线/边框提亮为浅色描边 */
hr{ border-color:var(--dpt-border) !important; }

/* ============================================================
   ② 内页头图：底部渐隐融入深色页面
   ============================================================ */
.inner_banner_99703_113{ position:relative; background:var(--dpt-bg); }
.inner_banner_99703_113::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  z-index:2; pointer-events:none;
  background:linear-gradient(to top,var(--dpt-bg) 2%,rgba(7,11,22,.6) 45%,transparent);
}
.inner_banner_99703_113 img{ display:block; }

/* ============================================================
   ③ 卡片 / 面板：浅色底一律换成深色玻璃
   ============================================================ */
/* 注意这里只列「卡片本体」，绝不能把布局容器算进来：
   · .group-item 是产品页的分组容器(宽1200，内含多个 .card-item)，
     它是 border-box，加 1px 边框会让内容区变成 1198px；而该行 float
     宽度是精确排满 1200 的(384+20+252+20+252+20+252)，少 2px 第四个
     卡片就会掉到下一行 —— 表现为"一行3个、下一行1个"的错乱排版。
   · .company-item(contactus 联系人块) padding:0，套框会贴边。 */
.card-item,.cards .item,
.certificates_99703_129 .item,.factory_99703_130 .item,
.news_99703_131 .item,.four_news_detail_132 .item,
.aboutus_content_99703_126 .item,.aboutus_info_99703_127 .item,
.choose .item,.categary_play_99703_112 .card-item{
  background:var(--dpt-panel) !important;
  border:1px solid var(--dpt-border) !important;
  border-radius:16px; overflow:hidden;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:none !important;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.card-item:hover,.cards .item:hover,
.certificates_99703_129 .item:hover,.factory_99703_130 .item:hover,
.news_99703_131 .item:hover,.choose .item:hover{
  transform:translateY(-8px);
  background:var(--dpt-panel-2) !important;
  border-color:rgba(255,86,40,.35) !important;
  box-shadow:var(--dpt-shadow), 0 0 40px -22px rgba(255,86,40,.5) !important;
}
/* inline-block 卡片默认按基线对齐：内容多一行的卡片会比同排其它卡片
   高出十几像素、顶部参差。统一改成顶端对齐。 */
.cards .card-item,.cards .item,
.certificates_99703_129 .item,.certificates_99703_129 .card-item{
  vertical-align:top !important;   /* common.css 里设了 middle，需要压过 */
}

/* 灰底区块 */
.gray-bg,.bg-gray,.bg-f5{ background:var(--dpt-bg-2) !important; }
/* aboutus 的 choose 区块：卡片内文字是深蓝 #1C2D56，深色底上几乎隐形 */
.choose .item p,.choose .list-box .item p,.choose .item div,
.choose p,.choose .item span{ color:var(--dpt-text) !important; }
.choose{ background-color:var(--dpt-bg-2) !important; }

/* 产品图是白底的：给图片容器保留白色"展台"，避免深色卡上出现白块突兀 */
.card-item .image-all,.group-item .image-all,
.categary_play_99703_112 .image-all,
.product_list_99703_118 .image-all,
.recommend_99703_124 .image-all,
.certificates_99703_129 .image-all,
.cards .item .image-all,.cards .card-item .image-all{
  background:#fff !important; border-radius:12px; overflow:hidden;
}
/* 展台是白的 —— 里面若有说明文字(如证书页)必须回到深色，否则白底浅字 */
.card-item .image-all,.group-item .image-all,
.categary_play_99703_112 .image-all,
.product_list_99703_118 .image-all,
.recommend_99703_124 .image-all,
.certificates_99703_129 .image-all,
.cards .item .image-all,.cards .card-item .image-all{
  color:#333 !important;
}
/* 公司介绍图集容器原本是 #ccc 灰底（图片间隙），深色下很突兀 */
.profile_99703_company .content,
[class*="profile_99703"] .content{
  background:var(--dpt-bg-2) !important;
}

/* ============================================================
   ③b 清除内页残留白底
   —— common.css 里这些白底大多挂在区块的「子容器」上
   （如 .get_touch_125 .wrap-rule），只改区块本身不够，
   会造成"提亮后的文字落在白底上"的白底白字。
   注意：弹窗/询盘浮层(.dialog-content-pql/.f_inquiry_box/
   .leave-message-dialog)刻意保持白底，不在此列。
   ============================================================ */
.categary_play_99703_112,
.get_touch_99703_125,
.get_touch_99703_125 .wrap-rule,
.list_play_99703_108 .wrap-rule,
.chatnow_99703_117 .chatnow-content,
.categary_toggle_99703_116 .toggle-content,
.product_sitemap_99703_135 .item,
.product_sitemap_99703_135 .title,
.product_list_99703_118 table th,
.product_content_99703_123 .tags a{
  background-color:transparent !important;
  background-image:none !important;
}
.get_touch_99703_125 .wrap-rule,
.chatnow_99703_117 .chatnow-content,
.categary_toggle_99703_116 .toggle-content,
.product_sitemap_99703_135 .item{
  background:var(--dpt-panel) !important;
  border:1px solid var(--dpt-border); border-radius:18px;
}
.categary_play_99703_112{ background:var(--dpt-bg-2) !important; }

/* ============================================================
   产品页分类 tab 条（categary_play_99703_112）
   ------------------------------------------------------------
   站点 JS 会在滚动时给它加 .fixed，而 CSS 里 .fixed 是 position:fixed
   且主规则写着 top:0、z-index:10 —— 吸顶导航是 top:0/z-index:9999/高73px，
   于是这条 tab 正好被压在导航底下、只露出半截。让它停在导航下沿。
   ============================================================ */
.categary_play_99703_112.fixed{
  top:73px !important;            /* = 吸顶导航高度(72 + 1px 描边) */
  z-index:9998 !important;        /* 低于导航(9999)，高于页面内容 */
  background:rgba(10,16,32,.94) !important;
  -webkit-backdrop-filter:blur(14px) saturate(180%);
          backdrop-filter:blur(14px) saturate(180%);
  border-top:0 !important;
  border-bottom:1px solid var(--dpt-border) !important;
  box-shadow:0 14px 34px -20px rgba(0,0,0,.9);
}

/* ---------- 左右切换按钮：原本是 68x68 白色底图，改成 SVG 箭头 ---------- */
.categary_play_99703_112 .prev,
.categary_play_99703_112 .next{
  width:44px !important; height:44px !important;
  top:50% !important; margin-top:-22px !important;
  background-image:none !important;
  background-color:rgba(255,255,255,.06) !important;
  border:1px solid var(--dpt-border);
  border-radius:12px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.categary_play_99703_112 .prev::before,
.categary_play_99703_112 .next::before{
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background-color:var(--dpt-text);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:20px 20px;   mask-size:20px 20px;
  transition:background-color .25s ease;
}
.categary_play_99703_112 .prev::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}
.categary_play_99703_112 .next::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
.categary_play_99703_112 .prev:hover,
.categary_play_99703_112 .next:hover{
  background-color:rgba(255,86,40,.9) !important;
  border-color:transparent; transform:scale(1.06);
  box-shadow:0 0 22px rgba(255,86,40,.6);
}
.categary_play_99703_112 .prev:hover::before,
.categary_play_99703_112 .next:hover::before{ background-color:#fff; }
/* 锚点目标留出导航+tab条的高度（对原生锚点跳转生效） */
[id^="cate_"]{ scroll-margin-top:230px; }
.product_content_99703_123 .tags a{
  background:var(--dpt-panel) !important; border:1px solid var(--dpt-border);
  color:var(--dpt-text-2) !important; border-radius:999px;
}
.product_content_99703_123 .tags a:hover{
  border-color:rgba(255,86,40,.5); color:#fff !important;
}
/* 询盘表单里的输入框（common.css 给它们单独写了白底） */
.get_touch_99703_125 form input,.get_touch_99703_125 form .textarea,
.get_touch_99703_125 form textarea,
.chatnow_99703_117 form input,.chatnow_99703_117 form textarea{
  background:rgba(255,255,255,.05) !important;
  color:var(--dpt-text) !important;
  border:1px solid var(--dpt-border) !important;
}
/* 视频角标：白字，原本压在浅色图上就偏淡，给个深色底托 */
.image-all .video,span.video{
  background:rgba(7,11,22,.78) !important; color:#fff !important;
  border-radius:6px; backdrop-filter:blur(2px);
}

/* ============================================================
   ③c 富文本正文（后台编辑器产出，带 #222/#333 硬编码甚至内联色）
   ============================================================ */
.product_content_99703_123 p,.product_content_99703_123 span,
.product_content_99703_123 li,.product_content_99703_123 div,
.product_content_99703_123 strong,.product_content_99703_123 em,
.a-detail p,.a-detail span,.a-detail div,.a-detail li,
.content p,.content span,.content li,.content strong{
  color:var(--dpt-text-2) !important;
}
.product_content_99703_123 strong,.content strong,.a-detail strong{
  color:var(--dpt-text) !important;
}

/* ============================================================
   ④ 表格（产品参数等）
   ============================================================ */
/* bootstrap 斑马纹是浅灰，深色下要反过来 */
.table-striped>tbody>tr:nth-of-type(odd),
.table-striped>tbody>tr,
table.table>tbody>tr{
  background-color:rgba(255,255,255,.035) !important;
}
.table-striped>tbody>tr:nth-of-type(even){ background-color:transparent !important; }
table.table td,table.table th,.table-bordered td,.table-bordered th{
  border-color:var(--dpt-border) !important;
}
table th{ color:var(--dpt-text-3) !important; }
table td{ color:var(--dpt-text) !important; }
.attributes td,.parameter td,.product_content_99703_123 td{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.product_content_99703_123 table,.product_content_99703_123 td,
.product_content_99703_123 th,.content table,.content td,.content th{
  border-color:var(--dpt-border) !important;
}

/* ============================================================
   ⑤ 表单：深色玻璃；白色弹窗内的输入框保持原样（白底深字）
   ============================================================ */
input[type=text],input[type=email],input[type=tel],input[type=search],
textarea,select,.textarea{
  background:rgba(255,255,255,.05) !important;
  color:var(--dpt-text) !important;
  border:1px solid var(--dpt-border) !important;
  border-radius:10px !important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input::placeholder,textarea::placeholder{ color:var(--dpt-text-3) !important; }
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,
textarea:focus,select:focus{
  border-color:var(--dpt-orange) !important;
  background:rgba(255,255,255,.08) !important;
  box-shadow:0 0 0 3px rgba(255,86,40,.18) !important; outline:none;
}
/* 浮层/弹窗是白底的，里面的控件维持浅色主题以保证可读 */
.dialog-content-pql input,.dialog-content-pql textarea,.dialog-content-pql select,
.leave-message-dialog input,.leave-message-dialog textarea,
.f_inquiry_box input,.f_inquiry_box textarea,
.cont_main_box input,.cont_main_box textarea{
  background:#fff !important; color:#333 !important;
  border:1px solid #dcdfe6 !important;
}
.dialog-content-pql,.leave-message-dialog,.f_inquiry_box{ color:#333; }
.dialog-content-pql a,.leave-message-dialog a{ color:#333; }

/* ============================================================
   ⑤b 询盘整页 (contactnow) —— body 上带 .dp-page-inquiry
   同样是 .f_inquiry_box / .cont_main_box，在别的页面里是「白底浮层弹窗」
   （必须保持白底深字），在这一页却是主内容区（深色底）。
   用 body 上的标识类把两种场景区分开。
   ============================================================ */
.dp-page-inquiry input.inquiry_text,
.dp-page-inquiry .f_inquiry_box input[type=text],
.dp-page-inquiry .f_inquiry_box input[type=email],
.dp-page-inquiry .f_inquiry_box textarea,
.dp-page-inquiry .f_inquiry_box .te,
.dp-page-inquiry .cont_main_box input,
.dp-page-inquiry .cont_main_box textarea{
  background:rgba(255,255,255,.05) !important;
  color:var(--dpt-text) !important;
  border:1px solid var(--dpt-border) !important;
  border-radius:10px !important;
}
.dp-page-inquiry .f_inquiry_box .product_table,
.dp-page-inquiry .f_inquiry_box .file_table,
.dp-page-inquiry .f_inquiry_box .request,
.dp-page-inquiry .f_inquiry_box .subject_td .inquiry_text,
.dp-page-inquiry .f_inquiry_box .message_td .te,
.dp-page-inquiry .f_inquiry_box .error_box{
  background-color:transparent !important;
}
.dp-page-inquiry .f_inquiry_box,
.dp-page-inquiry .cont_main_box,
.dp-page-inquiry .g_sta,
.dp-page-inquiry .f_inquiry_box .fr_tit,
.dp-page-inquiry .f_inquiry_box .com_pro span,
.dp-page-inquiry td,.dp-page-inquiry th,.dp-page-inquiry label{
  color:var(--dpt-text-2) !important;
}
.dp-page-inquiry .f_inquiry_box .price_span{ color:var(--dpt-orange) !important; }

/* ============================================================
   ⑥ 按钮：与首页同一套品牌橙渐变（数值与 custom-tweaks 保持一致）
   ============================================================ */
.button,.get-price-btn,.submit-btn,button.button{
  background:var(--dpt-grad) !important;
  border:none !important; color:#fff !important;
  border-radius:12px !important; font-weight:700 !important;
  box-shadow:0 10px 26px -10px rgba(255,86,40,.85);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), filter .28s ease, box-shadow .28s ease;
}
.button:hover,.get-price-btn:hover,.submit-btn:hover{
  transform:translateY(-3px); filter:brightness(1.08);
  box-shadow:0 18px 40px -12px rgba(255,86,40,1);
}

/* ============================================================
   ⑦ 联系/询盘区块
   ============================================================ */
.get_touch_99703_125,.chatnow_99703_117,.contactus_99703_133{
  background:linear-gradient(180deg,var(--dpt-bg),var(--dpt-bg-2)) !important;
}
.get_touch_99703_125 .reminder{ color:var(--dpt-text-3) !important; }
.chatnow_99703_117 .chatnow-title,.contactus_99703_133 .first-title{
  color:var(--dpt-text) !important;
}
/* 内页也有首页那条 CTA 带，统一成深色科技样式 */
.contactus_99703_109{
  background:
    radial-gradient(820px 320px at 10% 0%, rgba(255,86,40,.22), transparent 60%),
    radial-gradient(820px 340px at 100% 100%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(135deg,#0c1430,#111c3f 55%,#152449) !important;
  border:1px solid var(--dpt-border); border-radius:24px;
  max-width:1200px; margin:48px auto !important;
  height:auto !important; padding:56px 24px !important; overflow:hidden;
  box-shadow:var(--dpt-shadow);
}
.contactus_99703_109 .contactus-btn{
  background:var(--dpt-grad) !important; border:none !important;
  border-radius:999px !important;
  box-shadow:0 16px 36px -12px rgba(255,86,40,1) !important;
}
.contactus_99703_109 .contactus-desc{ color:rgba(233,237,247,.8) !important; }

/* ============================================================
   ⑧ 分页
   ============================================================ */
.pagination li,.pagelist_99703_119 a{
  background:var(--dpt-panel) !important;
  border:1px solid var(--dpt-border) !important;
  color:var(--dpt-text-2) !important; border-radius:10px !important;
  transition:all .25s ease;
}
.pagination li:hover,.pagelist_99703_119 a:hover{
  border-color:rgba(255,86,40,.5) !important; color:#fff !important;
}
.pagination .active,.pagelist_99703_119 a.current{
  background:var(--dpt-grad) !important; border-color:transparent !important;
  color:#fff !important; box-shadow:0 8px 20px -10px rgba(255,86,40,.9);
}

/* ============================================================
   ⑨ 深色底上的深色 PNG 图标：当单色模板翻成白色
      （站内 icon 基本都是给白底画的深色线条 + 透明底）
   ============================================================ */
.choose img[src*="icon"],
.get_touch_99703_125 img[src*="icon"],
.chatnow_99703_117 img[src*="icon"],
.contactus_99703_133 img[src*="icon"],
img[src*="address-icon"],img[src*="tel-icon"],img[src*="email-icon"],
img[src*="adv-icon"],img[src*="home-line"]{
  filter:brightness(0) invert(1);
}
/* 浮动客服栏关闭钮：父链全透明，背景取自 body(深色) */
.f-close img{ filter:brightness(0) invert(1); opacity:.7; }
.f-close:hover img{ opacity:1; }

/* ============================================================
   ⑩ 无障碍
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  .card-item:hover,.company-item:hover,.group-item:hover,
  .button:hover,.get-price-btn:hover{ transform:none !important; }
}