:root {
    --accent: #00d1ff;
    --muted: #bdbdbd;
    --card-bg: #161616;
    --page-bg: #121212
}

html,
body {
    height: 100%
}

body {
    font-family: "Arial", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", sans-serif;
    background: var(--page-bg);
    color: #fff;
    margin: 0;
    -webkit-font-smoothing: antialiased
}

.muted {
    color: var(--muted)
}

.navbar {
    background: #1f1f1f
}

.navbar .nav-link {
    color: #dcdcdc
}

.navbar .nav-link.active {
    color: #fff;
    font-weight: 700;
    border-bottom: 2px solid #fff;
    padding-bottom: 6px
}

.product-detail-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 24px 32px;
    border: 1px solid rgba(255, 255, 255, .06);
    max-width: 960px;
    margin: 2rem auto
}

.product-detail-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 24px
}

.product-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #eee;
    margin-bottom: 1rem
}

.price {
    color: #FFD84A;
    font-weight: 700;
    font-size: 1.75rem;
    margin: 2rem 0 1.5rem
}

.btn-product {
    border-radius: 8px;
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    padding: 10px 16px;
    font-size: 1rem;
    transition: all .3s;
    cursor: pointer
}

.btn-product:hover {
    background: #fff;
    color: #000
}

h3.section-title {
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 2rem
}

table.spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    color: #ccc
}

table.spec-table th,
table.spec-table td {
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top
}

table.spec-table th {
    background: rgba(0, 209, 255, 0.12);
    color: var(--accent);
    font-weight: 600;
    width: 35%
}

table.spec-table tbody tr:hover {
    background: rgba(0, 209, 255, 0.06)
}

@media(max-width:576px) {
    .product-detail-card {
        padding: 16px 20px;
        margin: 1rem
    }
    .product-title {
        font-size: 1.6rem
    }
    .price {
        font-size: 1.3rem
    }
}


/* ==================== 全站统一宽屏锁定方案（contact.html 专用版） ==================== */

@media (min-width: 1540px) {
    /* 1. 整个页面内容锁死在 1480px 宽度，完美还原笔记本观感 */
    body {
        background: #121212;
    }
    body>*:not(script):not(style) {
        max-width: 1480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* 2. Hero 区域特别处理：背景图铺满全屏但绝不形变 */
    .hero {
        width: 100vw !important;
        height: 360px !important;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
        margin: 0 !important;
    }
    .hero-img {
        position: absolute !important;
        top: 50%;
        left: 50%;
        width: 1480px !important;
        /* 强制原始设计宽度 */
        height: 360px !important;
        object-fit: cover;
        transform: translate(-50%, -50%);
    }
    .hero-overlay {
        position: absolute;
        width: 100%;
        max-width: 1480px;
        left: 50%;
        transform: translateX(-50%);
    }
    /* 3. 导航栏和底部也锁宽居中 */
    .navbar .container-fluid,
    footer {
        max-width: 1480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* 超大屏保险（>2560px） */

@media (min-width: 2560px) {
    .hero-img {
        width: 1920px !important;
        /* 超大屏稍微放大一点，更清晰 */
    }
}