/* ============================================================
   首页整页深色化（与购物车页 cart / goodsList 深色科技风一致）
   仅覆盖颜色/背景，不改布局、结构与 JS。所有规则 !important 强制覆盖
   home.css / index.css / speedtest.css 的浅色默认样式。
   深色令牌：
     --bg:#0a0e1a  --panel:rgba(255,255,255,.045)  --border:rgba(0,123,255,.22)
     --border-soft:rgba(255,255,255,.08)  --text:#e8ecf5  --muted:#9aa2bd
     --accent:#2155ff  --cyan:#00d2be
   ============================================================ */

/* ---------- 基础：页面底色与文字 ---------- */
html, body {
    background: #0a0e1a !important;
    color: #e8ecf5 !important;
}
body { color: #e8ecf5 !important; }
a { color: #4db2ff !important; }

/* 通用区块：交替浅深色面板，保留间距 */
.module-g { background: transparent !important; }
.module-g.dark-bg { background: #0c1120 !important; }
.module-title-g { color: #e8ecf5 !important; }
.module-desc-g { color: #9aa2bd !important; }

/* ---------- Banner 顶部四张白卡（底部浮层） ---------- */
.the-main-g > .banner .footer .item {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(0, 123, 255, .22) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
    color: #e8ecf5 !important;
}
.the-main-g > .banner .footer .item:hover {
    background: linear-gradient(135deg, rgba(13, 19, 38, .9) 0%, rgba(10, 14, 26, .9) 100%) !important;
}
.the-main-g > .banner .footer .item .title { color: #fff !important; }
.the-main-g > .banner .footer .item .desc { color: #c9cce0 !important; }
.the-main-g > .banner .footer .item .desc .num { color: #00d2be !important; }

/* Banner 文字浮层（已是深色渐变+白字，保持不变） */
.banner .banner-txt { color: #ffffff !important; }

/* ---------- 产品区：一级 Tab 容器 ---------- */
.the-main-g > .product .first-type-tabs .tabs-g {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(0, 123, 255, .22) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
}
.the-main-g > .product .first-type-tabs .tab-g {
    color: #c9cce0 !important;
}
.the-main-g > .product .first-type-tabs .tab-g.checked {
    background: #2155ff !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(33, 85, 255, .4) !important;
}

/* 二级 Tab */
.the-main-g > .product .second-type-tabs .tab-g {
    color: #c9cce0 !important;
}
.the-main-g > .product .second-type-tabs .tab-g.checked {
    color: #00d2be !important;
    border-bottom: 2px solid #00d2be !important;
}
.the-main-g > .product .second-type-tabs .more a { color: #9aa2bd !important; }
.the-main-g > .product .second-type-tabs .more a:hover { color: #00d2be !important; }

/* 产品卡片 */
.the-main-g > .product .product-card {
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
}
.the-main-g > .product .product-card:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, .5) !important;
    border-color: rgba(0, 123, 255, .4) !important;
}
.the-main-g > .product .product-card .card-header .title { color: #e8ecf5 !important; }
.the-main-g > .product .product-card .spec-row {
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}
.the-main-g > .product .product-card .spec-row .label { color: #9aa2bd !important; }
.the-main-g > .product .product-card .spec-row .value { color: #e8ecf5 !important; }
.the-main-g > .product .product-card .price-g .now { color: #9aa2bd !important; }
.the-main-g > .product .product-card .price-g .num { color: #FF7A45 !important; }
.the-main-g > .product .product-card .price-g .old { color: #6b7290 !important; }
.the-main-g > .product .product-card .button-g.primary {
    background: #2155ff !important;
    border-color: #2155ff !important;
    color: #fff !important;
}
.the-main-g > .product .product-card .button-g.disabled {
    background: #2a2f40 !important;
    border-color: #2a2f40 !important;
    color: #6b7290 !important;
}
.the-main-g > .product .product-empty-tip { color: #9aa2bd !important; }

/* 产品表格（部分分类用表格展示） */
.the-main-g > .product .table-g { background: transparent !important; }
.the-main-g > .product .table-g th {
    background: #14233f !important;
    border-color: #1e2740 !important;
    color: #e8ecf5 !important;
}
.the-main-g > .product .table-g tbody td {
    color: #c9cce0 !important;
    border-color: #1e2740 !important;
}
.the-main-g > .product .table-g tbody tr:nth-of-type(even) { background: #0e1320 !important; }
.the-main-g > .product .table-g tbody tr:hover,
.the-main-g > .product .table-g tbody tr.featured-row {
    background: rgba(33, 85, 255, .12) !important;
    box-shadow: 0 0 30px 1px rgba(33, 85, 255, .25) !important;
}
.the-main-g > .product .table-g tbody td .price-g .now { color: #9aa2bd !important; }
.the-main-g > .product .table-g tbody td .price-g .num { color: #FF7A45 !important; }
.the-main-g > .product .table-g tbody td .button-g {
    background: #2155ff !important;
    border-color: #2155ff !important;
}

/* ---------- 优势板块：原图保留 + 压暗辉光 + 脉冲动画（方案 C） ---------- */
.the-main-g > .advantage .body {
    background: #0c1120 !important;
    border: 1px solid rgba(0, 123, 255, .18) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45) !important;
    position: relative;
}
/* 中间菱形平台：压暗 + 主题蓝辉光 */
.the-main-g > .advantage .body::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("/web/optclouds/static/images/home/advantage-body.png") no-repeat center center / contain;
    filter: brightness(0.32) saturate(1.4) drop-shadow(0 0 18px rgba(33, 85, 255, .35));
    opacity: .95;
    pointer-events: none;
    z-index: 0;
}
/* item 透明承载，图标走 ::before（避免 filter 影响文字） */
.the-main-g > .advantage .item {
    background: transparent !important;
    border: 1px solid rgba(0, 123, 255, .22) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
}
.the-main-g > .advantage .item:hover {
    border-color: rgba(0, 123, 255, .45) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5) !important;
}
.the-main-g > .advantage .item::before {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    filter: brightness(0.55) saturate(1.3) drop-shadow(0 0 14px rgba(33, 85, 255, .45));
    transition: filter .4s, transform .5s;
    z-index: 1;
}
.the-main-g > .advantage .item:hover::before {
    filter: brightness(0.75) saturate(1.5) drop-shadow(0 0 22px rgba(0, 210, 190, .55));
    transform: scale(1.05);
}
.the-main-g > .advantage .item.top-left::before    { background-image: url("/web/optclouds/static/images/home/advantage-top-left.png") !important; }
.the-main-g > .advantage .item.top-right::before   { background-image: url("/web/optclouds/static/images/home/advantage-top-right.png") !important; }
.the-main-g > .advantage .item.bottom-left::before { background-image: url("/web/optclouds/static/images/home/advantage-bottom-left.png") !important; }
.the-main-g > .advantage .item.bottom-right::before{ background-image: url("/web/optclouds/static/images/home/advantage-bottom-right.png") !important; }
/* 脉冲扩散光环（青色），四张卡错峰播放 */
.the-main-g > .advantage .item::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 24px; height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 210, 190, .5);
    box-shadow: 0 0 12px rgba(0, 210, 190, .25);
    animation: advantagePulse 2.2s ease-out infinite;
    pointer-events: none;
    z-index: 1;
}
.the-main-g > .advantage .item:nth-child(2)::after { animation-delay: .55s; }
.the-main-g > .advantage .item:nth-child(3)::after { animation-delay: 1.1s; }
.the-main-g > .advantage .item:nth-child(4)::after { animation-delay: 1.65s; }
@keyframes advantagePulse {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(5);   opacity: 0; }
}
.the-main-g > .advantage .title { color: #e8ecf5 !important; position: relative; z-index: 2; }
.the-main-g > .advantage .desc  { color: #9aa2bd !important; position: relative; z-index: 2; }

/* ---------- 简介板块：浅色背景图 + 白卡 → 深色 ---------- */
.the-main-g > .intro {
    background: #0a0e1a !important;
}
.the-main-g > .intro .logo {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
}
.the-main-g > .intro .right {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
}
.the-main-g > .intro .text {
    background: rgba(255, 255, 255, .03) !important;
}
.the-main-g > .intro .title { color: #e8ecf5 !important; }
.the-main-g > .intro .title:before { background: #2155ff !important; }
.the-main-g > .intro .desc { color: #9aa2bd !important; }

/* ---------- 测速板块 ---------- */
.speed-test-bg { background: #0a0e1a !important; }
.speed-test h1 { color: #e8ecf5 !important; }
#loading { background-color: #0a0e1a !important; color: #c9cce0 !important; }
#ipArea { background: rgba(255, 255, 255, .06) !important; color: #e8ecf5 !important; }
#serverArea .title { color: #e8ecf5 !important; }
#server {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: #c9cce0 !important;
}
div.testArea {
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 10px !important;
}
div.testArea div.meterText { color: #e8ecf5 !important; }
div.testArea div.unit { color: #9aa2bd !important; }

/* ---------- 文章/新闻模块 ---------- */
.article-module-g .header { border-bottom: 1px solid rgba(255, 255, 255, .12) !important; }
.article-module-g .header .title { color: #e8ecf5 !important; }
.article-module-g .header .more-link { color: #4db2ff !important; }
.article-module-g .article { color: #c9cce0 !important; }
.article-module-g .article:hover { color: #00d2be !important; }
.article-module-g .article .time { color: #6b7290 !important; }

/* ---------- 通用按钮（首页范围内） ---------- */
.the-main-g .button-g {
    border-color: rgba(255, 255, 255, .2) !important;
    color: #e8ecf5 !important;
}
.the-main-g .button-g.primary {
    border-color: #2155ff !important;
    background: #2155ff !important;
    color: #fff !important;
}