/* roulang page: index */
:root {
      --primary-blue: #1e40af;
      --vibrant-blue: #2563eb;
      --cyan-badge: #06b6d4;
      --orange-cta: #f97316;
      --card-shadow: 0 10px 25px -5px rgba(30, 64, 175, 0.06), 0 8px 10px -6px rgba(30, 64, 175, 0.04);
      --card-hover-shadow: 0 20px 30px -10px rgba(30, 64, 175, 0.12), 0 10px 15px -3px rgba(30, 64, 175, 0.08);
    }
    body {
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      background-color: #f8fafc;
      color: #1e293b;
      line-height: 1.68;
    }
    .hero-angled {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
    }
    .custom-shadow {
      box-shadow: var(--card-shadow);
    }
    .custom-shadow:hover {
      box-shadow: var(--card-hover-shadow);
    }
    .pulse-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #06b6d4;
      box-shadow: 0 0 8px #06b6d4;
      animation: pulse 1.6s infinite ease-in-out;
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 0.9; }
      50% { transform: scale(1.35); opacity: 0.4; }
    }
    .hud-badge {
      clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    }
    .ratio-bar {
      transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

/* roulang page: category2 */
:root {
      --primary-blue: #1e40af;
      --vibrant-blue: #2563eb;
      --cyan-badge: #06b6d4;
      --orange-cta: #f97316;
      --card-shadow: 0 10px 25px -5px rgba(30, 64, 175, 0.06), 0 8px 10px -6px rgba(30, 64, 175, 0.04);
      --card-hover-shadow: 0 20px 30px -10px rgba(30, 64, 175, 0.12), 0 10px 15px -3px rgba(30, 64, 175, 0.08);
    }
    body {
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      background-color: #f8fafc;
      color: #1e293b;
      line-height: 1.68;
    }
    .hero-angled {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
    }
    .custom-shadow {
      box-shadow: var(--card-shadow);
      transition: all 0.25s ease-in-out;
    }
    .custom-shadow:hover {
      box-shadow: var(--card-hover-shadow);
      transform: translateY(-3px);
    }
    .hud-badge {
      clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    }
    .pulse-dot {
      animation: pulseGlow 2s infinite ease-in-out;
    }
    @keyframes pulseGlow {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(1.18); }
    }

/* roulang page: category1 */
:root {
      --primary-blue: #1e40af;
      --vibrant-blue: #2563eb;
      --cyan-badge: #06b6d4;
      --orange-cta: #f97316;
      --card-shadow: 0 10px 25px -5px rgba(30, 64, 175, 0.06), 0 8px 10px -6px rgba(30, 64, 175, 0.04);
      --card-hover-shadow: 0 20px 30px -10px rgba(30, 64, 175, 0.12), 0 10px 15px -3px rgba(30, 64, 175, 0.08);
    }
    body {
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      background-color: #f8fafc;
      color: #1e293b;
      line-height: 1.68;
    }
    .custom-shadow {
      box-shadow: var(--card-shadow);
      transition: all 0.25s ease;
    }
    .custom-shadow:hover {
      box-shadow: var(--card-hover-shadow);
      transform: translateY(-3px);
    }
    .hud-badge {
      clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    }
    .pulse-dot {
      box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
      animation: pulseAnim 2s infinite;
    }
    @keyframes pulseAnim {
      0% {
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
      }
      70% {
        box-shadow: 0 0 0 8px rgba(6, 182, 212, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0);
      }
    }
    .spec-table-row:nth-child(even) {
      background-color: #f8fafc;
    }