: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;
          /* 超大屏稍微放大一点，更清晰 */
      }
  }