/* ============================================
   天鸿智算 - 页面专属样式合集
   包含所有子页面的独立样式，按页面分节组织
   共享样式（modal/container/动画）已在对应全局CSS中定义
   ============================================ */

/* ============================================
       about 页面样式
       ============================================ */
/* ===== Hero ===== */
    .about-hero {
      position: relative;
      background: linear-gradient(135deg, #fef2f2 0%, #fff 30%, #fef2f2 60%, #fee2e2 100%);
      overflow: hidden;
    }
    .about-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(220,38,38,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220,38,38,0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    }
    .hero-glow {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(254,202,202,0.35) 0%, transparent 70%);
      filter: blur(60px);
      pointer-events: none;
    }

    /* ===== 数据中心地图 ===== */
    .dc-map-container {
      position: relative;
      background: linear-gradient(135deg, #0f172a, #1e293b);
      border-radius: 1rem;
      overflow: hidden;
      min-height: 320px;
    }
    .dc-map-container::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle 1px, rgba(220,38,38,0.08) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .dc-link {
      position: absolute;
      height: 2px;
      background: linear-gradient(90deg, rgba(220,38,38,0.6), rgba(220,38,38,0.1));
      transform-origin: left center;
      animation: link-pulse 3s ease-in-out infinite;
    }
    @keyframes link-pulse {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 0.8; }
    }
    .dc-node {
      position: absolute;
      z-index: 2;
    }
    .dc-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #dc2626;
      box-shadow: 0 0 0 4px rgba(220,38,38,0.25);
      animation: dot-pulse 2s ease-in-out infinite;
    }
    .dc-dot::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 1px solid rgba(220,38,38,0.3);
      animation: ring-expand 2s ease-out infinite;
    }
    @keyframes dot-pulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(220,38,38,0.25); }
      50% { box-shadow: 0 0 0 8px rgba(220,38,38,0.15), 0 0 20px rgba(220,38,38,0.4); }
    }
    @keyframes ring-expand {
      0% { transform: scale(1); opacity: 0.6; }
      100% { transform: scale(2.5); opacity: 0; }
    }
    .dc-label {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(100% + 8px);
      font-size: 11px;
      font-weight: 600;
      color: #f87171;
      white-space: nowrap;
      text-shadow: 0 0 8px rgba(220,38,38,0.5);
    }
    .dc-label .dc-power {
      display: block;
      font-size: 9px;
      color: #fca5a5;
      font-weight: 400;
      text-align: center;
    }
    .dc-node.main .dc-dot {
      width: 18px;
      height: 18px;
      background: linear-gradient(135deg, #dc2626, #ef4444);
      box-shadow: 0 0 0 6px rgba(220,38,38,0.3), 0 0 24px rgba(220,38,38,0.5);
    }

    /* ===== API 网关图 ===== */
    .api-gateway-visual {
      position: relative;
      background: linear-gradient(135deg, #fef2f2, #fff);
      border-radius: 1rem;
      border: 1px solid #fecaca;
      overflow: hidden;
      min-height: 280px;
    }
    .api-gateway-visual::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle 1px, rgba(220,38,38,0.06) 1px, transparent 1px);
      background-size: 20px 20px;
    }
    .gw-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: linear-gradient(135deg, #dc2626, #ef4444);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 28px;
      z-index: 3;
      box-shadow: 0 0 30px rgba(220,38,38,0.3);
    }
    .gw-center::after {
      content: '';
      position: absolute;
      inset: -12px;
      border-radius: 50%;
      border: 2px solid rgba(220,38,38,0.2);
      animation: ring-expand 3s ease-out infinite;
    }
    .gw-ring {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px dashed rgba(220,38,38,0.15);
    }
    .gw-model {
      position: absolute;
      width: 56px;
      height: 56px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      color: white;
      z-index: 2;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      flex-direction: column;
    }
    .gw-line {
      position: absolute;
      height: 2px;
      background: linear-gradient(90deg, rgba(220,38,38,0.4), rgba(220,38,38,0.1));
      transform-origin: left center;
      z-index: 1;
      animation: line-flow 2s ease-in-out infinite alternate;
    }
    @keyframes line-flow {
      0% { opacity: 0.4; }
      100% { opacity: 0.9; }
    }
    .gw-arrow {
      position: absolute;
      right: -6px;
      top: -3px;
      width: 0;
      height: 0;
      border-left: 6px solid rgba(220,38,38,0.5);
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
    }

    /* ===== 通用卡片 ===== */
    .card-hover {
      transition: transform .3s, box-shadow .3s, border-color .3s;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px rgba(220,38,38,.12);
      border-color: #fecaca;
    }

    /* ===== 时间线 ===== */
    .timeline-item {
      position: relative;
      padding-left: 2rem;
      padding-bottom: 1.5rem;
      border-left: 2px solid #fecaca;
    }
    .timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
    .timeline-dot {
      position: absolute;
      left: -7px;
      top: 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #dc2626;
    }

    /* ===== 响应式 ===== */
    @media(max-width:1024px){
      .intro-grid, .biz-grid, .adv-grid { grid-template-columns: 1fr !important; }
      .contact-grid { grid-template-columns: repeat(2,1fr) !important; }
      .dc-map-container { min-height: 260px; }
      .api-gateway-visual { min-height: 240px; }
    }
    @media(max-width:640px){
      .contact-grid { grid-template-columns: 1fr !important; }
      .dc-map-container, .api-gateway-visual { min-height: 220px; }
      .gw-model { width: 44px; height: 44px; font-size: 9px; }
      .gw-center { width: 60px; height: 60px; font-size: 22px; }
    }

/* ============================================
       api-docs 页面样式
       ============================================ */
/* 侧边导航 */
    .side-nav{position:sticky;top:calc(var(--header-height,64px)+16px);max-height:calc(100vh - var(--header-height,64px) - 32px);overflow-y:auto}
    .side-nav::-webkit-scrollbar{width:3px}
    .side-nav::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px}
    .side-nav-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;color:#6b7280;border-radius:8px;transition:all .2s;cursor:pointer}
    .side-nav-item:hover{color:#dc2626;background:#fef2f2}
    .side-nav-item.active{color:#dc2626;background:#fef2f2;font-weight:600}
    .side-nav-item .nav-num{width:20px;height:20px;border-radius:6px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#9ca3af;flex-shrink:0}
    .side-nav-item.active .nav-num{background:#dc2626;color:#fff}
    /* 代码块 */
    .code-block{background:#1e293b;border-radius:12px;overflow:hidden;margin:16px 0}
    .code-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#334155;border-bottom:1px solid #475569}
    .code-lang{font-size:12px;font-weight:600;color:#94a3b8;display:flex;align-items:center;gap:6px}
    .code-lang i{font-size:14px}
    .code-copy{font-size:12px;color:#94a3b8;padding:4px 10px;border-radius:6px;border:1px solid #475569;cursor:pointer;transition:all .2s}
    .code-copy:hover{color:#fff;border-color:#94a3b8}
    .code-body{padding:16px;font-family:'Fira Code',Consolas,monospace;font-size:13px;line-height:1.7;color:#e2e8f0;overflow-x:auto}
    .code-body .kw{color:#c084fc}
    .code-body .str{color:#34d399}
    .code-body .fn{color:#60a5fa}
    .code-body .cm{color:#64748b}
    .code-body .url{color:#fbbf24}
    .code-body .num{color:#fb923c}
    /* 配置表格 */
    .config-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden}
    .config-table th{background:#f9fafb;padding:12px 16px;font-size:13px;font-weight:600;color:#374151;text-align:left;border-bottom:2px solid #e5e7eb}
    .config-table td{padding:12px 16px;font-size:13px;color:#6b7280;border-bottom:1px solid #f3f4f6}
    .config-table tr:last-child td{border-bottom:none}
    .config-table tr:hover td{background:#fef2f2}
    .config-table .tag{display:inline-flex;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
    .config-table .tag-green{background:#dcfce7;color:#166534}
    .config-table .tag-yellow{background:#fef9c3;color:#854d0e}
    /* 步骤卡片 */
    .step-card{position:relative;padding:24px;border-radius:16px;border:1px solid #e5e7eb;background:#fff;transition:all .3s}
    .step-card:hover{border-color:#fca5a5;box-shadow:0 8px 24px rgba(220,38,38,.08)}
    .step-num{position:absolute;top:-12px;left:24px;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
    /* FAQ */
    .faq-item{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;transition:all .3s}
    .faq-item:hover{border-color:#fca5a5}
    .faq-q{padding:16px 20px;font-size:15px;font-weight:600;color:#1f2937;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
    .faq-q i{color:#9ca3af;transition:transform .3s}
    .faq-item.open .faq-q i{transform:rotate(180deg)}
    .faq-a{padding:0 20px 16px;font-size:14px;color:#6b7280;line-height:1.7;display:none}
    .faq-item.open .faq-a{display:block}
    /* 客户端标签页 */
    .client-tab{padding:10px 20px;font-size:14px;font-weight:500;color:#6b7280;border-radius:10px;cursor:pointer;transition:all .2s;border:1px solid transparent}
    .client-tab:hover{color:#dc2626;background:#fef2f2}
    .client-tab.active{color:#dc2626;background:#fef2f2;border-color:#fca5a5;font-weight:600}
    .client-panel{display:none}
    .client-panel.active{display:block;animation:fadeIn .3s ease}
    to{opacity:1;transform:translateY(0)}}
    /* 提示框 */
    .tip-box{border-radius:12px;padding:16px 20px;display:flex;align-items:flex-start;gap:12px;margin:16px 0}
    .tip-box.warning{background:#fef9c3;border:1px solid #fde047}
    .tip-box.info{background:#dbeafe;border:1px solid #93c5fd}
    .tip-box.success{background:#dcfce7;border:1px solid #86efac}
    .tip-box i{font-size:18px;flex-shrink:0;margin-top:2px}
    .tip-box.warning i{color:#ca8a04}
    .tip-box.info i{color:#3b82f6}
    .tip-box.success i{color:#16a34a}
    .tip-box p{font-size:14px;color:#374151;line-height:1.6}
    /* API地址卡片 */
    .api-card{padding:16px 20px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;display:flex;align-items:center;gap:12px;transition:all .2s}
    .api-card:hover{border-color:#fca5a5;box-shadow:0 4px 12px rgba(220,38,38,.06)}
    .api-card .api-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#dc2626,#ef4444);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0}
    .api-card .api-label{font-size:13px;color:#9ca3af;font-weight:500}
    .api-card .api-url{font-size:14px;color:#1f2937;font-weight:600;font-family:'Fira Code',Consolas,monospace}
    /* 滚动高亮 */
    .doc-section{scroll-margin-top:calc(var(--header-height,64px)+24px)}

/* ============================================
       api-platform 页面样式
       ============================================ */
/* ============================================
       Hero区域样式
       ============================================ */
    .api-hero {
      position: relative;
      width: 100%;
      left: 0;
      right: 0;
      margin-top: 0;
      background: linear-gradient(135deg, #fef2f2 0%, #ffffff 30%, #fef2f2 60%, #fee2e2 100%);
      overflow: hidden;
    }

    .api-hero-bg {
      position: absolute;
      inset: 0;
    }

    .api-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(220, 38, 38, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220, 38, 38, 0.04) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    }

    .api-glow {
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle at center,
        rgba(254, 202, 202, 0.4) 0%,
        rgba(254, 202, 202, 0.15) 40%,
        transparent 70%);
      filter: blur(50px);
      opacity: 0.5;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      animation: heroPulse 5s ease-in-out infinite;
    }

    .api-hero-content {
      position: relative;
      z-index: 10;
      max-width: 800px;
      padding: 5rem 1.5rem 3.5rem;
      margin: 0 auto;
      text-align: center;
    }

    .api-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(220, 38, 38, 0.15);
      border-radius: 2rem;
      padding: 0.4rem 1.2rem;
      margin-bottom: 1.5rem;
      box-shadow: 0 4px 15px rgba(220, 38, 38, 0.08);
    }

    .api-badge-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
      border-radius: 50%;
      color: white;
      font-size: 0.65rem;
      font-weight: 700;
    }

    .api-badge-text {
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #991b1b;
    }

    .api-hero-title {
      font-size: 3rem;
      font-weight: 800;
      line-height: 1.15;
      margin-bottom: 1rem;
      position: relative;
    }

    .api-hero-title-text {
      background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 25%, #b91c1c 50%, #dc2626 75%, #ef4444 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .api-hero-subtitle {
      font-size: 1.125rem;
      color: #4b5563;
      max-width: 600px;
      margin: 0 auto 1.5rem;
      line-height: 1.7;
    }

    .api-hero-highlight {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.75rem;
      margin-bottom: 2rem;
    }

    .api-hero-highlight span {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.85rem;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid #fecaca;
      border-radius: 2rem;
      font-size: 0.8rem;
      font-weight: 500;
      color: #991b1b;
    }

    .api-hero-highlight span i {
      color: #dc2626;
      font-size: 0.7rem;
    }

    .api-hero-cta {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 2rem;
    }

    .api-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.875rem 2rem;
      background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
      color: white;
      border-radius: 0.75rem;
      font-weight: 600;
      font-size: 1rem;
      box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
      transition: all 0.3s;
      text-decoration: none;
    }

    .api-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(220, 38, 38, 0.4);
    }

    .api-btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.875rem 2rem;
      background: white;
      color: #dc2626;
      border: 2px solid #fecaca;
      border-radius: 0.75rem;
      font-weight: 600;
      font-size: 1rem;
      transition: all 0.3s;
      text-decoration: none;
    }

    .api-btn-secondary:hover {
      border-color: #dc2626;
      background: #fef2f2;
    }

    .api-trust-tags {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .api-trust-tag {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: #6b7280;
    }

    .api-trust-tag i {
      color: #dc2626;
    }

    @keyframes heroPulse {
      0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
      50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.05); }
    }

    /* ============================================
       核心优势样式
       ============================================ */
    .advantage-card {
      background: white;
      border-radius: 1rem;
      border: 1px solid #e5e7eb;
      padding: 1.75rem;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .advantage-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #dc2626, #ef4444);
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }

    .advantage-card:hover::before {
      transform: scaleX(1);
    }

    .advantage-card:hover {
      border-color: #fecaca;
      box-shadow: 0 10px 30px rgba(220, 38, 38, 0.08);
      transform: translateY(-4px);
    }

    .advantage-icon {
      width: 3rem;
      height: 3rem;
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, #fef2f2, #fee2e2);
      color: #dc2626;
    }

    .advantage-title {
      font-size: 1.125rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 0.5rem;
    }

    .advantage-desc {
      font-size: 0.875rem;
      color: #6b7280;
      line-height: 1.6;
    }

    /* ============================================
       模型广场样式
       ============================================ */
    .model-tab {
      padding: 0.5rem 1.25rem;
      border-radius: 2rem;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid #e5e7eb;
      background: white;
      color: #4b5563;
    }

    .model-tab:hover {
      border-color: #dc2626;
      color: #dc2626;
    }

    .model-tab.active {
      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
      color: white;
      border-color: #dc2626;
    }

    .model-card {
      background: white;
      border-radius: 1rem;
      border: 1px solid #e5e7eb;
      padding: 1.5rem;
      transition: all 0.3s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .model-card:hover {
      border-color: #dc2626;
      box-shadow: 0 10px 30px rgba(220, 38, 38, 0.1);
      transform: translateY(-4px);
    }

    .model-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 0.75rem;
    }

    .model-name {
      font-size: 1rem;
      font-weight: 700;
      color: #1f2937;
    }

    .model-badge {
      padding: 0.15rem 0.5rem;
      border-radius: 0.25rem;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .model-badge-hot { background: #ff4d4f; color: white; }
    .model-badge-new { background: #1890ff; color: white; }

    .model-features {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }

    .model-feature-tag {
      padding: 0.2rem 0.6rem;
      background: #fef2f2;
      border: 1px solid #fecaca;
      border-radius: 0.375rem;
      font-size: 0.7rem;
      color: #991b1b;
      font-weight: 500;
    }

    .model-price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
      padding-top: 0.75rem;
      border-top: 1px solid #f3f4f6;
    }

    .model-price {
      font-size: 0.8rem;
      color: #6b7280;
    }

    .model-price strong {
      color: #dc2626;
      font-weight: 700;
      font-size: 1rem;
    }

    /* ============================================
       套餐样式
       ============================================ */
    .plan-card {
      background: white;
      border-radius: 1rem;
      border: 1px solid #e5e7eb;
      padding: 2rem;
      transition: all 0.3s ease;
      position: relative;
      text-align: center;
    }

    .plan-card:hover {
      border-color: #fecaca;
      box-shadow: 0 10px 30px rgba(220, 38, 38, 0.08);
      transform: translateY(-4px);
    }

    .plan-card.featured {
      border: 2px solid #dc2626;
      background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
    }

    .plan-card.featured::before {
      content: '推荐';
      position: absolute;
      top: -1px;
      right: 1.5rem;
      background: linear-gradient(135deg, #dc2626, #ef4444);
      color: white;
      padding: 0.3rem 1rem;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 0 0 0.5rem 0.5rem;
    }

    .plan-icon {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin: 0 auto 1rem;
    }

    .plan-name {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 0.5rem;
    }

    .plan-desc {
      font-size: 0.875rem;
      color: #6b7280;
      margin-bottom: 1.5rem;
      line-height: 1.5;
    }

    .plan-features {
      text-align: left;
      margin-bottom: 1.5rem;
    }

    .plan-feature {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: #4b5563;
      margin-bottom: 0.5rem;
    }

    .plan-feature i {
      color: #22c55e;
      font-size: 0.75rem;
      flex-shrink: 0;
    }

    /* ============================================
       技术亮点样式
       ============================================ */
    .tech-card {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1.25rem;
      border-radius: 0.75rem;
      transition: all 0.3s;
      border: 1px solid transparent;
    }

    .tech-card:hover {
      background: #fef2f2;
      border-color: #fecaca;
    }

    .tech-card-icon {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 1rem;
      background: linear-gradient(135deg, #fef2f2, #fee2e2);
      color: #dc2626;
    }

    .tech-card-title {
      font-size: 0.9375rem;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 0.25rem;
    }

    .tech-card-desc {
      font-size: 0.8125rem;
      color: #6b7280;
      line-height: 1.5;
    }

    /* ============================================
       折扣咨询模态框
       ============================================ */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.75);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      animation: fadeIn 0.3s ease;
    }

    .modal-overlay.active {
      display: flex;
    }

    .modal-container {
      background: white;
      border-radius: 1.5rem;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      width: 90%;
      max-width: 900px;
      max-height: 90vh;
      overflow: hidden;
      position: relative;
      animation: slideUp 0.4s ease;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem 2rem;
      background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
      border-bottom: 1px solid #fecaca;
    }

    .modal-header h2 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 700;
      color: #7f1d1d;
    }

    .modal-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      color: #9ca3af;
      cursor: pointer;
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.2s ease;
    }

    .modal-close:hover {
      background-color: rgba(220, 38, 38, 0.1);
      color: #dc2626;
      transform: rotate(90deg);
    }

    .modal-content {
      padding: 0;
    }

    .modal-iframe {
      width: 100%;
      height: 70vh;
      min-height: 500px;
      border: none;
      display: block;
    }

      to { opacity: 1; }
    }

      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 768px) {
      .api-hero-title {
        font-size: 2rem;
      }
      .api-hero-content {
        padding: 3.5rem 1rem 2.5rem;
      }
      .api-hero-highlight {
        gap: 0.5rem;
      }
      .modal-container {
        width: 95%;
        max-width: 95%;
      }
      .modal-iframe {
        height: 60vh;
        min-height: 400px;
      }
    }

/* ============================================
       cloud-service 页面样式
       ============================================ */
/* GPU筛选标签 */
    .filter-tab {
      padding: 0.5rem 1.25rem;
      border-radius: 2rem;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid #e5e7eb;
      background: white;
      color: #4b5563;
    }
    .filter-tab:hover {
      border-color: #dc2626;
      color: #dc2626;
    }
    .filter-tab.active {
      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
      color: white;
      border-color: #dc2626;
    }
    
    /* 资源表格样式 */
    .resource-table {
      width: 100%;
      border-collapse: collapse;
    }
    .resource-table th {
      background: #fef2f2;
      padding: 1rem;
      text-align: left;
      font-weight: 600;
      color: #1f2937;
      border-bottom: 2px solid #fecaca;
    }
    .resource-table td {
      padding: 1rem;
      border-bottom: 1px solid #e5e7eb;
      color: #4b5563;
    }
    .resource-table tr:hover td {
      background: #fef2f2;
    }
    .resource-table .gpu-name {
      font-weight: 600;
      color: #1f2937;
    }
    .resource-table .price-highlight {
      color: #dc2626;
      font-weight: 700;
      font-size: 1.125rem;
    }
    
    /* 性能对比图表 */
    .chart-bar {
      height: 2rem;
      border-radius: 0.25rem;
      display: flex;
      align-items: center;
      padding-left: 0.75rem;
      color: white;
      font-size: 0.875rem;
      font-weight: 500;
      transition: all 0.3s ease;
    }
    .chart-bar:hover {
      opacity: 0.9;
      transform: translateX(4px);
    }
    
    /* 场景推荐卡片 */
    .scenario-card {
      border: 1px solid #e5e7eb;
      border-radius: 1rem;
      padding: 1.5rem;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .scenario-card:hover {
      border-color: #dc2626;
      box-shadow: 0 10px 30px rgba(220, 38, 38, 0.1);
      transform: translateY(-4px);
    }
    .scenario-card.active {
      border-color: #dc2626;
      background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
    }
    
    /* GPU推荐标签 */
    .gpu-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.375rem 0.75rem;
      background: #dc2626;
      color: white;
      border-radius: 2rem;
      font-size: 0.75rem;
      font-weight: 500;
    }
    .gpu-tag.recommended {
      background: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%);
    }
    
    /* 产品卡片 */
    .product-grid-card {
      border: 1px solid #e5e7eb;
      border-radius: 1rem;
      padding: 1.5rem;
      transition: all 0.3s ease;
    }
    .product-grid-card:hover {
      border-color: #dc2626;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

/* ============================================
       compute-cluster 页面样式
       ============================================ */
/* Hero */
    .center-hero {
      position: relative;
      background: linear-gradient(135deg, #fef2f2 0%, #fff 30%, #fef2f2 60%, #fee2e2 100%);
      overflow: hidden;
    }
    .center-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(220,38,38,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220,38,38,0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    }
    .hero-glow {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(254,202,202,0.35) 0%, transparent 70%);
      filter: blur(60px);
      pointer-events: none;
    }

    /* 数据中心地图 */
    .dc-map {
      position: relative;
      background: linear-gradient(135deg, #0f172a, #1e293b);
      border-radius: 1rem;
      overflow: hidden;
      min-height: 340px;
    }
    .dc-map::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle 1px, rgba(220,38,38,0.08) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .dc-link {
      position: absolute;
      height: 2px;
      background: linear-gradient(90deg, rgba(220,38,38,0.6), rgba(220,38,38,0.1));
      transform-origin: left center;
      animation: link-pulse 3s ease-in-out infinite;
    }
    @keyframes link-pulse { 0%,100%{opacity:0.3} 50%{opacity:0.8} }
    .dc-node { position: absolute; z-index: 2; }
    .dc-dot {
      width: 14px; height: 14px; border-radius: 50%; background: #dc2626;
      box-shadow: 0 0 0 4px rgba(220,38,38,0.25);
      animation: dot-pulse 2s ease-in-out infinite;
    }
    .dc-dot::after {
      content: ''; position: absolute; inset: -8px; border-radius: 50%;
      border: 1px solid rgba(220,38,38,0.3);
      animation: ring-expand 2s ease-out infinite;
    }
    @keyframes dot-pulse {
      0%,100%{box-shadow:0 0 0 4px rgba(220,38,38,0.25)}
      50%{box-shadow:0 0 0 8px rgba(220,38,38,0.15),0 0 20px rgba(220,38,38,0.4)}
    }
    @keyframes ring-expand { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(2.5);opacity:0} }
    .dc-label {
      position: absolute; left: 50%; transform: translateX(-50%);
      bottom: calc(100% + 8px); font-size: 11px; font-weight: 600;
      color: #f87171; white-space: nowrap; text-shadow: 0 0 8px rgba(220,38,38,0.5);
    }
    .dc-label .dc-power { display: block; font-size: 9px; color: #fca5a5; font-weight: 400; text-align: center; }
    .dc-node.main .dc-dot {
      width: 18px; height: 18px;
      background: linear-gradient(135deg, #dc2626, #ef4444);
      box-shadow: 0 0 0 6px rgba(220,38,38,0.3), 0 0 24px rgba(220,38,38,0.5);
    }

    /* 卡片 */
    .card-hover { transition: transform .3s, box-shadow .3s, border-color .3s; }
    .card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(220,38,38,.12); border-color: #fecaca; }

    /* 响应式 */
    @media(max-width:1024px){
      .intro-grid,.biz-grid,.spec-grid { grid-template-columns:1fr!important }
      .dc-map { min-height:260px }
    }
    @media(max-width:640px){
      .dc-map { min-height:220px }
    }

/* ============================================
       local-model 页面样式
       ============================================ */
/* Hero */
    .prod-hero {
      position: relative;
      background: linear-gradient(135deg, #fef2f2 0%, #ffffff 30%, #fef2f2 60%, #fee2e2 100%);
      overflow: hidden;
      padding: 5rem 1.5rem 3.5rem;
    }
    .prod-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(220,38,38,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(220,38,38,0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    }
    .prod-glow {
      position: absolute;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(254,202,202,0.4) 0%, transparent 70%);
      filter: blur(50px);
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      animation: heroPulse 5s ease-in-out infinite;
    }
    @keyframes heroPulse {
      0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
      50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.05); }
    }

    /* Feature Card */
    .feature-card {
      background: white;
      border-radius: 1rem;
      border: 1px solid #e5e7eb;
      padding: 1.75rem;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      height: 100%;
    }
    .feature-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, #dc2626, #ef4444);
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }
    .feature-card:hover::before { transform: scaleX(1); }
    .feature-card:hover {
      border-color: #fecaca;
      box-shadow: 0 10px 30px rgba(220,38,38,0.08);
      transform: translateY(-4px);
    }
    .feature-icon {
      width: 3rem; height: 3rem;
      border-radius: 0.75rem;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.25rem;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, #fef2f2, #fee2e2);
      color: #dc2626;
    }

    /* Architecture diagram */
    .arch-card {
      background: white;
      border-radius: 1rem;
      border: 1px solid #e5e7eb;
      padding: 1.5rem;
      transition: all 0.3s ease;
    }
    .arch-card:hover {
      border-color: #fecaca;
      box-shadow: 0 8px 24px rgba(220,38,38,0.08);
    }

    /* Pricing card */
    .price-card {
      background: white;
      border-radius: 1rem;
      border: 1px solid #e5e7eb;
      padding: 2rem;
      transition: all 0.3s ease;
      text-align: center;
      position: relative;
    }
    .price-card:hover {
      border-color: #fecaca;
      box-shadow: 0 10px 30px rgba(220,38,38,0.08);
      transform: translateY(-4px);
    }
    .price-card.featured {
      border: 2px solid #dc2626;
      background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
    }
    .price-card.featured::before {
      content: '推荐';
      position: absolute; top: -1px; right: 1.5rem;
      background: linear-gradient(135deg, #dc2626, #ef4444);
      color: white;
      padding: 0.3rem 1rem;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 0 0 0.5rem 0.5rem;
    }

    /* Process step */
    .step-card {
      background: white;
      border-radius: 1rem;
      border: 1px solid #e5e7eb;
      padding: 1.5rem;
      position: relative;
      transition: all 0.3s ease;
    }
    .step-card:hover {
      border-color: #fecaca;
      box-shadow: 0 8px 24px rgba(220,38,38,0.08);
    }
    .step-number {
      width: 2.5rem; height: 2.5rem;
      border-radius: 50%;
      background: linear-gradient(135deg, #dc2626, #ef4444);
      color: white;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700;
      font-size: 1rem;
      flex-shrink: 0;
    }

    /* Timeline */
    .timeline-item {
      position: relative;
      padding-left: 2rem;
      padding-bottom: 2rem;
      border-left: 2px solid #fecaca;
    }
    .timeline-item:last-child { border-left: 2px solid transparent; padding-bottom: 0; }
    .timeline-dot {
      position: absolute; left: -7px; top: 0;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: #dc2626;
      border: 2px solid white;
      box-shadow: 0 0 0 2px #fecaca;
    }

    /* Section title */
    .section-label {
      font-size: 0.875rem; font-weight: 600; color: #dc2626;
      text-transform: uppercase; letter-spacing: 0.1em;
      margin-bottom: 0.5rem;
    }

    /* Modal */
    .modal-overlay {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background-color: rgba(0,0,0,0.75);
      display: none; justify-content: center; align-items: center;
      z-index: 9999; animation: fadeIn 0.3s ease;
    }
    .modal-overlay.active { display: flex; }
    .modal-container {
      background: white; border-radius: 1.5rem;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
      width: 90%; max-width: 900px; max-height: 90vh;
      overflow: hidden; position: relative;
      animation: slideUp 0.4s ease;
    }
    .modal-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 1.5rem 2rem;
      background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
      border-bottom: 1px solid #fecaca;
    }
    .modal-header h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #7f1d1d; }
    .modal-close {
      background: none; border: none; font-size: 1.5rem; color: #9ca3af;
      cursor: pointer; width: 2.5rem; height: 2.5rem;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%; transition: all 0.2s ease;
    }
    .modal-close:hover { background-color: rgba(220,38,38,0.1); color: #dc2626; transform: rotate(90deg); }
    .modal-iframe { width: 100%; height: 70vh; min-height: 500px; border: none; display: block; }
     to { opacity: 1; } }
     to { opacity: 1; transform: translateY(0); } }

    @media (max-width: 768px) {
      .prod-hero { padding: 3.5rem 1rem 2.5rem; }
      .modal-container { width: 95%; max-width: 95%; }
      .modal-iframe { height: 60vh; min-height: 400px; }
    }

/* ============================================
       maintenance-service 页面样式
       ============================================ */
/* 服务卡片样式 */
    .service-card {
      background: white;
      border-radius: 1rem;
      padding: 2rem;
      border: 1px solid #e5e7eb;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .service-card:hover {
      border-color: #dc2626;
      box-shadow: 0 10px 40px rgba(220, 38, 38, 0.1);
      transform: translateY(-4px);
    }
    .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #dc2626, #f87171);
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }
    .service-card:hover::before {
      transform: scaleX(1);
    }

    /* 流程步骤样式 */
    .process-step {
      position: relative;
      text-align: center;
    }
    .process-step-number {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.5rem;
      font-weight: 700;
      margin: 0 auto 1rem;
      position: relative;
      z-index: 1;
    }
    .process-step::after {
      content: '';
      position: absolute;
      top: 30px;
      left: 50%;
      width: 100%;
      height: 2px;
      background: #e5e7eb;
      z-index: 0;
    }
    .process-step:last-child::after {
      display: none;
    }
    
    /* 维保方案卡片 */
    .plan-card {
      background: white;
      border-radius: 1.5rem;
      padding: 2.5rem;
      border: 2px solid #e5e7eb;
      transition: all 0.3s ease;
      position: relative;
    }
    .plan-card:hover {
      border-color: #dc2626;
      box-shadow: 0 20px 50px rgba(220, 38, 38, 0.1);
    }
    .plan-card.featured {
      border-color: #dc2626;
      background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
    }
    .plan-card.featured::before {
      content: '推荐';
      position: absolute;
      top: -1px;
      right: 2rem;
      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
      color: white;
      padding: 0.5rem 1.5rem;
      font-size: 0.875rem;
      font-weight: 600;
      border-radius: 0 0 0.5rem 0.5rem;
    }
    
    /* 设备类型标签 */
    .device-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: #fef2f2;
      border: 1px solid #fecaca;
      border-radius: 2rem;
      color: #dc2626;
      font-size: 0.875rem;
      font-weight: 500;
    }
    
    /* FAQ样式 */
    .faq-item {
      border: 1px solid #e5e7eb;
      border-radius: 1rem;
      overflow: hidden;
      margin-bottom: 1rem;
      transition: all 0.3s ease;
    }
    .faq-item:hover {
      border-color: #dc2626;
    }
    .faq-question {
      padding: 1.5rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: white;
      font-weight: 600;
    }
    .faq-answer {
      padding: 0 1.5rem;
      max-height: 0;
      overflow: hidden;
      transition: all 0.3s ease;
      background: #f9fafb;
    }
    .faq-item.active .faq-answer {
      padding: 1.5rem;
      max-height: 500px;
    }
    .faq-item.active .faq-icon {
      transform: rotate(180deg);
    }
    
    /* 客户案例卡片 */
    .case-card {
      background: white;
      border-radius: 1rem;
      overflow: hidden;
      border: 1px solid #e5e7eb;
      transition: all 0.3s ease;
    }
    .case-card:hover {
      border-color: #dc2626;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    .case-header {
      background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
      padding: 1.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .case-icon {
      width: 48px;
      height: 48px;
      background: white;
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #dc2626;
      font-size: 1.25rem;
    }
    
    /* 统计数字 */
    .stat-number {
      font-size: 3rem;
      font-weight: 800;
      background: linear-gradient(135deg, #dc2626 0%, #f87171 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    /* 联系表单样式 */
    .form-input {
      width: 100%;
      padding: 0.875rem 1rem;
      border: 1px solid #d1d5db;
      border-radius: 0.75rem;
      font-size: 1rem;
      transition: all 0.3s ease;
    }
    .form-input:focus {
      outline: none;
      border-color: #dc2626;
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    }
    .form-label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 500;
      color: #374151;
    }
    
    /* 响应式调整 */
    @media (max-width: 768px) {
      .process-step::after {
        display: none;
      }
    }

/* ============================================
       model-guide 页面样式
       ============================================ */
/* ============================================
       Hero区域
       ============================================ */
    .guide-hero {
      position: relative;
      background: linear-gradient(135deg, #fef2f2 0%, #ffffff 30%, #fef2f2 60%, #fee2e2 100%);
      overflow: hidden;
      padding: 5rem 1.5rem 3rem;
    }

    .guide-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(220, 38, 38, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220, 38, 38, 0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    }

    .guide-hero-glow {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(254, 202, 202, 0.3) 0%, transparent 70%);
      filter: blur(60px);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    /* ============================================
       搜索与筛选区域
       ============================================ */
    .search-bar-wrapper {
      position: relative;
      max-width: 600px;
      margin: 0 auto;
    }

    .search-bar-wrapper input {
      width: 100%;
      padding: 0.875rem 1.25rem 0.875rem 3rem;
      border-radius: 1rem;
      border: 2px solid #fecaca;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(10px);
      font-size: 1rem;
      outline: none;
      transition: all 0.3s;
      box-shadow: 0 4px 20px rgba(220, 38, 38, 0.06);
    }

    .search-bar-wrapper input:focus {
      border-color: #dc2626;
      box-shadow: 0 4px 24px rgba(220, 38, 38, 0.12);
    }

    .search-bar-wrapper .search-icon {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: #b91c1c;
      font-size: 0.95rem;
    }

    .filter-section {
      background: rgba(255,255,255,0.8);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid #fee2e2;
      position: sticky;
      top: var(--header-height, 64px);
      z-index: 40;
    }

    .category-tabs {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      justify-content: center;
      padding: 1rem 0;
    }

    .category-tab {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.5rem 1.1rem;
      border-radius: 2rem;
      border: 1.5px solid #fecaca;
      background: white;
      font-size: 0.85rem;
      font-weight: 500;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.25s;
      white-space: nowrap;
    }

    .category-tab:hover {
      border-color: #f87171;
      color: #dc2626;
      background: #fef2f2;
    }

    .category-tab.active {
      background: linear-gradient(135deg, #dc2626, #ef4444);
      color: white;
      border-color: transparent;
      box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
    }

    .category-tab .tab-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 20px;
      border-radius: 10px;
      font-size: 0.7rem;
      font-weight: 700;
      padding: 0 5px;
      background: rgba(0,0,0,0.08);
    }

    .category-tab.active .tab-count {
      background: rgba(255,255,255,0.3);
    }

    /* ============================================
       子分类筛选
       ============================================ */
    .subcategory-bar {
      display: flex;
      gap: 0.35rem;
      flex-wrap: wrap;
      justify-content: center;
      padding: 0.5rem 0 0.75rem;
    }

    .subcategory-btn {
      padding: 0.3rem 0.75rem;
      border-radius: 1rem;
      border: 1px solid #e5e7eb;
      background: white;
      font-size: 0.75rem;
      font-weight: 500;
      color: #9ca3af;
      cursor: pointer;
      transition: all 0.2s;
    }

    .subcategory-btn:hover {
      border-color: #fca5a5;
      color: #dc2626;
    }

    .subcategory-btn.active {
      background: #fef2f2;
      border-color: #fca5a5;
      color: #b91c1c;
      font-weight: 600;
    }

    /* ============================================
       模型卡片网格
       ============================================ */
    .models-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1.25rem;
    }

    @media (max-width: 640px) {
      .models-grid {
        grid-template-columns: 1fr;
      }
    }

    .model-card {
      background: white;
      border: 1px solid #f3f4f6;
      border-radius: 1rem;
      padding: 1.5rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      cursor: default;
    }

    .model-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .model-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(220, 38, 38, 0.1), 0 4px 12px rgba(0,0,0,0.04);
      border-color: #fecaca;
    }

    .model-card:hover::before {
      opacity: 1;
    }

    .model-card-header {
      display: flex;
      align-items: flex-start;
      gap: 0.85rem;
      margin-bottom: 0.85rem;
    }

    .model-card-icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
    }

    .model-card-icon.text-chat { background: #eff6ff; color: #2563eb; }
    .model-card-icon.deep-reason { background: #fef3c7; color: #d97706; }
    .model-card-icon.code-gen { background: #ecfdf5; color: #059669; }
    .model-card-icon.vision { background: #fce7f3; color: #db2777; }
    .model-card-icon.image-gen { background: #ede9fe; color: #7c3aed; }
    .model-card-icon.video-gen { background: #e0e7ff; color: #4f46e5; }
    .model-card-icon.tts { background: #fef9c3; color: #ca8a04; }
    .model-card-icon.music-gen { background: #fce4ec; color: #e91e63; }
    .model-card-icon.embedding { background: #e0f2f1; color: #00897b; }

    .model-card-title {
      font-size: 1.05rem;
      font-weight: 700;
      color: #111827;
      line-height: 1.3;
      margin-bottom: 0.15rem;
    }

    .model-card-vendor {
      font-size: 0.75rem;
      color: #9ca3af;
      font-weight: 500;
    }

    .model-card-desc {
      font-size: 0.85rem;
      color: #6b7280;
      line-height: 1.6;
      margin-bottom: 0.85rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .model-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-bottom: 0.85rem;
    }

    .model-card-tag {
      padding: 0.15rem 0.55rem;
      border-radius: 0.375rem;
      font-size: 0.7rem;
      font-weight: 500;
      background: #f3f4f6;
      color: #6b7280;
    }

    .model-card-recommend {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.55rem 0.85rem;
      border-radius: 0.625rem;
      background: linear-gradient(135deg, #fef2f2, #fff5f5);
      border: 1px solid #fecaca;
    }

    .model-card-recommend i {
      color: #dc2626;
      font-size: 0.75rem;
    }

    .model-card-recommend span {
      font-size: 0.78rem;
      color: #991b1b;
      font-weight: 500;
    }

    /* ============================================
       空状态
       ============================================ */
    .empty-state {
      text-align: center;
      padding: 4rem 2rem;
      color: #9ca3af;
    }

    .empty-state i {
      font-size: 3rem;
      margin-bottom: 1rem;
      color: #d1d5db;
    }

    .empty-state h3 {
      font-size: 1.15rem;
      color: #6b7280;
      margin-bottom: 0.5rem;
    }

    .empty-state p {
      font-size: 0.9rem;
    }

    /* ============================================
       统计栏
       ============================================ */
    .stats-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .stats-bar .result-count {
      font-size: 0.9rem;
      color: #6b7280;
    }

    .stats-bar .result-count strong {
      color: #dc2626;
      font-weight: 700;
    }

    /* ============================================
       加载动画
       ============================================ */
    .skeleton-card {
      background: white;
      border: 1px solid #f3f4f6;
      border-radius: 1rem;
      padding: 1.5rem;
      animation: shimmer 1.5s infinite;
    }

    @keyframes shimmer {
      0% { opacity: 1; }
      50% { opacity: 0.6; }
      100% { opacity: 1; }
    }

    /* ============================================
       分类说明区
       ============================================ */
    .category-intro {
      background: white;
      border-radius: 1rem;
      border: 1px solid #fee2e2;
      padding: 1.5rem 2rem;
      margin-bottom: 2rem;
      display: none;
    }

    .category-intro.visible {
      display: block;
    }

    .category-intro h3 {
      font-size: 1.1rem;
      font-weight: 700;
      color: #111827;
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .category-intro p {
      font-size: 0.9rem;
      color: #6b7280;
      line-height: 1.7;
    }

    /* 回到顶部浮动按钮样式覆盖 */
    @media (max-width: 768px) {
      .guide-hero {
        padding: 3.5rem 1rem 2rem;
      }

      .category-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 0.75rem 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .category-tabs::-webkit-scrollbar {
        display: none;
      }
    }

    /* 卡片展开态 */
    .model-card.expanded .model-card-desc {
      -webkit-line-clamp: unset;
      display: block;
    }

    .model-card-id {
      font-family: 'Courier New', monospace;
      font-size: 0.7rem;
      color: #d1d5db;
      padding: 0.15rem 0.4rem;
      background: #f9fafb;
      border-radius: 0.25rem;
      display: inline-block;
      margin-top: 0.25rem;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

/* ============================================
       model-service 页面样式
       ============================================ */
/* 价格页面自定义样式 */
    .filter-tab {
      padding: 0.5rem 1.25rem;
      border-radius: 2rem;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid #e5e7eb;
      background: white;
      color: #4b5563;
    }
    .filter-tab:hover {
      border-color: #dc2626;
      color: #dc2626;
    }
    .filter-tab.active {
      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
      color: white;
      border-color: #dc2626;
    }
    
    /* 价格表格样式 */
    .price-table {
      width: 100%;
      border-collapse: collapse;
    }
    .price-table th {
      background: #fef2f2;
      padding: 1rem;
      text-align: left;
      font-weight: 600;
      color: #1f2937;
      border-bottom: 2px solid #fecaca;
    }
    .price-table td {
      padding: 1rem;
      border-bottom: 1px solid #e5e7eb;
      color: #4b5563;
    }
    .price-table tr:hover td {
      background: #fef2f2;
    }
    .price-table .model-name {
      font-weight: 600;
      color: #1f2937;
    }
    .price-table .price-highlight {
      color: #dc2626;
      font-weight: 700;
      font-size: 1.125rem;
    }
    
    /* 价格卡片样式 */
    .price-card {
      background: white;
      border-radius: 1rem;
      border: 1px solid #e5e7eb;
      padding: 1.5rem;
      transition: all 0.3s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .price-card:hover {
      border-color: #dc2626;
      box-shadow: 0 10px 30px rgba(220, 38, 38, 0.1);
      transform: translateY(-4px);
    }
    .price-card.featured {
      border: 2px solid #dc2626;
      background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
    }
    .price-card-header {
      border-bottom: 1px solid #e5e7eb;
      padding-bottom: 1rem;
      margin-bottom: 1rem;
    }
    .price-card-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 0.25rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.5rem;
    }
    .badge-hot {
      background: #ff4d4f;
      color: #fff;
    }
    .badge-new {
      background: #1890ff;
      color: #fff;
    }
    .price-card-price {
      font-size: 2rem;
      font-weight: 700;
      color: #dc2626;
      line-height: 1;
    }
    .price-card-unit {
      font-size: 0.875rem;
      color: #6b7280;
    }
    
    /* 布局切换按钮 */
    .layout-toggle {
      display: inline-flex;
      border: 1px solid #e5e7eb;
      border-radius: 0.5rem;
      overflow: hidden;
    }
    .layout-toggle-btn {
      padding: 0.5rem 1rem;
      background: white;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .layout-toggle-btn:hover {
      background: #f9fafb;
      color: #374151;
    }
    .layout-toggle-btn.active {
      background: #dc2626;
      color: white;
    }
    
    /* 表格宽度优化 - 确保表头文本可换行 */
    .price-table th {
      white-space: normal;
      word-break: break-word;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .price-table {
        font-size: 0.875rem;
      }
      .price-table th,
      .price-table td {
        padding: 0.75rem 0.5rem;
      }
    }
      .price-table th:nth-child(2),
      .price-table td:nth-child(2),
      .price-table th:nth-child(3),
      .price-table td:nth-child(3) {
        max-width: 160px;
      }

    /* 面包屑导航样式 */
    .breadcrumb {
      margin-bottom: 1.5rem;
    }
    
    .breadcrumb-container {
      display: flex;
      align-items: center;
      font-size: 0.9375rem;
      color: #6b7280;
    }
    
    .breadcrumb-container a {
      color: #991b1b;
      text-decoration: none;
      transition: color 0.2s;
    }
    
    .breadcrumb-container a:hover {
      color: #dc2626;
      text-decoration: underline;
    }
    
    .separator {
      margin: 0 0.5rem;
      color: #d1d5db;
    }
    
    .breadcrumb-container .current {
      color: #1f2937;
      font-weight: 500;
    }
    
    .page-header {
      margin-bottom: 2rem;
    }
    
    .page-title {
      font-size: 2.5rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 0.5rem;
    }
    
    .page-description {
      font-size: 1.125rem;
      color: #6b7280;
      margin-bottom: 0;
    }
    
    /* 价格视图间距 */
    .price-view {
      margin-bottom: 2rem;
    }
    
    /* 表格和卡片视图内部间距 */
    #table-view .bg-white {
      margin-bottom: 1.5rem;
    }
    
    #card-view .grid {
      gap: 1.5rem;
    }
    
    /* 底部额外间距 */
    .page-content > .container {
      padding-bottom: 2rem;
    }
    
    /* ============================================
       科技感标题区域样式 - 与maintenance.html保持一致
       ============================================ */
    .tech-header {
      position: relative;
      width: 100%;
      left: 0;
      right: 0;
      margin-top: 0;
      margin-bottom: 1.5rem;
      text-align: center;
      background: linear-gradient(135deg, #fef2f2 0%, #ffffff 50%, #fef2f2 100%);
      box-shadow: 
        0 10px 30px rgba(220, 38, 38, 0.08),
        0 0 0 1px rgba(220, 38, 38, 0.05);
    }
    
    .tech-header-bg {
      position: absolute;
      inset: 0;
    }
    
    .tech-grid {
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(rgba(220, 38, 38, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220, 38, 38, 0.03) 1px, transparent 1px);
      background-size: 50px 50px;
      mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    }
    
    .tech-glow {
      position: absolute;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle at center,
        rgba(254, 202, 202, 0.4) 0%,
        rgba(254, 202, 202, 0.2) 40%,
        transparent 70%);
      filter: blur(40px);
      opacity: 0.4;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      animation: pulse-glow 4s ease-in-out infinite;
    }
    
    .tech-glow-2 {
      position: absolute;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle at center,
        rgba(252, 165, 165, 0.3) 0%,
        rgba(252, 165, 165, 0.1) 40%,
        transparent 70%);
      filter: blur(40px);
      opacity: 0.3;
      left: 20%;
      top: 30%;
      animation: pulse-glow 5s ease-in-out infinite reverse;
    }
    
    .tech-glow-3 {
      position: absolute;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle at center,
        rgba(251, 113, 133, 0.25) 0%,
        rgba(251, 113, 133, 0.1) 40%,
        transparent 70%);
      filter: blur(35px);
      opacity: 0.25;
      left: 70%;
      top: 50%;
      animation: pulse-glow 6s ease-in-out infinite 1s;
    }
    
    .tech-header-content {
      position: relative;
      z-index: 10;
      max-width: 800px;
      padding: 4rem 1.5rem;
      margin: 0 auto;
    }
    
    .tech-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(220, 38, 38, 0.15);
      border-radius: 2rem;
      padding: 0.375rem 1rem;
      margin-bottom: 1rem;
      box-shadow: 0 4px 15px rgba(220, 38, 38, 0.1);
    }
    
    .tech-badge-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
      border-radius: 50%;
      color: white;
      font-size: 0.75rem;
      font-weight: 700;
    }
    
    .tech-badge-text {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #991b1b;
    }
    
    .tech-title {
      font-size: 2.75rem;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 0.75rem;
      position: relative;
      color: #1f2937;
    }
    
    .tech-title-text {
      position: relative;
      display: inline-block;
      background: linear-gradient(135deg,
        #7f1d1d 0%,
        #991b1b 30%,
        #b91c1c 70%,
        #dc2626 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .tech-title-glow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg,
        rgba(220, 38, 38, 0.3) 0%,
        rgba(185, 28, 28, 0.2) 30%,
        rgba(127, 29, 29, 0.1) 70%,
        transparent 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: blur(8px);
      opacity: 0.4;
      transform: translateY(3px);
      animation: title-glow 3s ease-in-out infinite alternate;
    }
    
    .tech-description {
      font-size: 1.125rem;
      color: #4b5563;
      max-width: 600px;
      margin: 0 auto 1.5rem;
      line-height: 1.6;
    }
    
    .tech-stats {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin-top: 1.5rem;
    }
    
    .tech-stat {
      text-align: center;
      min-width: 100px;
    }
    
    .tech-stat-value {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 0.25rem;
      background: linear-gradient(135deg, 
        #991b1b 0%,
        #b91c1c 50%,
        #dc2626 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: stat-pulse 5s ease-in-out infinite;
    }
    
    .tech-stat-label {
      font-size: 0.875rem;
      font-weight: 500;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    
    /* 动画定义 */
    @keyframes pulse-glow {
      0%, 100% { 
        opacity: 0.4; 
        transform: translate(-50%, -50%) scale(1);
      }
      50% { 
        opacity: 0.7; 
        transform: translate(-50%, -50%) scale(1.05);
      }
    }
    
    @keyframes title-glow {
      0% { 
        opacity: 0.5; 
        filter: blur(8px);
      }
      100% { 
        opacity: 0.8; 
        filter: blur(12px);
      }
    }
    
    @keyframes stat-pulse {
      0%, 100% { 
        opacity: 0.9; 
        text-shadow: 
          0 0 20px rgba(220, 38, 38, 0.7),
          0 0 40px rgba(220, 38, 38, 0.4);
      }
      50% { 
        opacity: 1; 
        text-shadow: 
          0 0 30px rgba(220, 38, 38, 0.9),
          0 0 60px rgba(220, 38, 38, 0.6);
      }
    }
    
      /* 响应式调整 */
    @media (max-width: 768px) {
      .tech-header-content {
        padding: 1.5rem 1rem;
      }
      
      .tech-title {
        font-size: 2rem;
      }
      
      .tech-description {
        font-size: 1.125rem;
        padding: 0 0.5rem;
      }
      
      .tech-stats {
        flex-direction: column;
        gap: 1.5rem;
      }
      
      .tech-stat-value {
        font-size: 2rem;
      }
    }
    
    /* 折扣咨询模态框样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.75);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      animation: fadeIn 0.3s ease;
    }
    
    .modal-overlay.active {
      display: flex;
    }
    
    .modal-container {
      background: white;
      border-radius: 1.5rem;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      width: 90%;
      max-width: 900px;
      max-height: 90vh;
      overflow: hidden;
      position: relative;
      animation: slideUp 0.4s ease;
    }
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem 2rem;
      background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
      border-bottom: 1px solid #fecaca;
    }
    
    .modal-header h2 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 700;
      color: #7f1d1d;
    }
    
    .modal-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      color: #9ca3af;
      cursor: pointer;
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.2s ease;
    }
    
    .modal-close:hover {
      background-color: rgba(220, 38, 38, 0.1);
      color: #dc2626;
      transform: rotate(90deg);
    }
    
    .modal-content {
      padding: 0;
    }
    
    .modal-iframe {
      width: 100%;
      height: 70vh;
      min-height: 500px;
      border: none;
      display: block;
    }

      to { opacity: 1; }
    }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @media (max-width: 768px) {
      .modal-container {
        width: 95%;
        max-width: 95%;
      }
      
      .modal-header {
        padding: 1.25rem 1.5rem;
      }
      
      .modal-header h2 {
        font-size: 1.25rem;
      }
      
      .modal-iframe {
        height: 60vh;
        min-height: 400px;
      }
    }

/* ============================================
       personal-agreement 页面样式
       ============================================ */
body{background:#fafafa}
    /* 协议正文样式 */
    .agreement-body{max-width:860px;margin:0 auto;padding:calc(var(--header-height,64px) + 40px) 32px 60px}
    .agreement-body h1{font-size:24px;font-weight:700;color:#1a1a1a;text-align:center;margin-bottom:8px;letter-spacing:.5px}
    .agreement-body .version-info{text-align:center;font-size:13px;color:#999;margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid #eee}
    .agreement-body .preamble{font-size:14px;color:#444;line-height:2;margin-bottom:28px;padding:20px 24px;background:#f8f9fa;border-radius:8px;border-left:3px solid #dc2626}
    .agreement-body .chapter{margin-bottom:32px}
    .agreement-body .chapter-title{font-size:17px;font-weight:700;color:#1a1a1a;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:10px}
    .agreement-body .chapter-title .ch-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;background:#dc2626;color:#fff;font-size:13px;font-weight:700;flex-shrink:0}
    .agreement-body .clause{font-size:14px;color:#444;line-height:2;margin-bottom:10px;text-indent:0}
    .agreement-body .clause strong{color:#1a1a1a;font-weight:600}
    .agreement-body .clause .hl{color:#dc2626;font-weight:600}
    .agreement-body .sub-clause{font-size:14px;color:#444;line-height:2;margin-bottom:6px;padding-left:2em}
    .agreement-body .sub-list{padding-left:2em;margin-bottom:10px}
    .agreement-body .sub-list li{font-size:14px;color:#444;line-height:2;margin-bottom:2px}
    .agreement-body .tip-box{border-radius:8px;padding:14px 18px;display:flex;align-items:flex-start;gap:10px;margin:14px 0;font-size:13px;line-height:1.8}
    .agreement-body .tip-box.warning{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
    .agreement-body .tip-box.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
    .agreement-body .tip-box i{font-size:16px;flex-shrink:0;margin-top:3px}
    .agreement-body .signature{margin-top:48px;padding-top:24px;border-top:1px solid #eee;font-size:14px;color:#666;line-height:2.2}
    /* 手机适配 */
    @media(max-width:768px){
      .agreement-body{padding:calc(var(--header-height,56px) + 24px) 16px 40px}
      .agreement-body h1{font-size:20px}
      .agreement-body .chapter-title{font-size:15px}
      .agreement-body .clause,.agreement-body .sub-clause,.agreement-body .sub-list li{font-size:13px}
      .agreement-body .preamble{padding:14px 16px}
    }

/* ============================================
       privacy-policy 页面样式
       ============================================ */
.side-nav{position:sticky;top:calc(var(--header-height,64px)+16px);max-height:calc(100vh - var(--header-height,64px) - 32px);overflow-y:auto}
    .side-nav::-webkit-scrollbar{width:3px}
    .side-nav::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px}
    .side-nav-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;color:#6b7280;border-radius:8px;transition:all .2s;cursor:pointer}
    .side-nav-item:hover{color:#dc2626;background:#fef2f2}
    .side-nav-item.active{color:#dc2626;background:#fef2f2;font-weight:600}
    .side-nav-item .nav-num{width:20px;height:20px;border-radius:6px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#9ca3af;flex-shrink:0}
    .side-nav-item.active .nav-num{background:#dc2626;color:#fff}
    .privacy-section{scroll-margin-top:calc(var(--header-height,64px)+24px)}
    .privacy-section h3{font-size:18px;font-weight:700;color:#1f2937;margin-bottom:12px;display:flex;align-items:center;gap:10px}
    .privacy-section h3 .sec-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#dc2626,#ef4444);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
    .privacy-section h4{font-size:15px;font-weight:600;color:#374151;margin-bottom:8px;margin-top:16px}
    .privacy-section p{font-size:14px;color:#6b7280;line-height:1.8;margin-bottom:8px}
    .privacy-section ul,.privacy-section ol{font-size:14px;color:#6b7280;line-height:1.8;margin-bottom:8px;padding-left:20px}
    .privacy-section li{margin-bottom:4px}
    .privacy-section strong{color:#1f2937;font-weight:600}
    .privacy-section .highlight{color:#dc2626;font-weight:600}
    /* 数据表格 */
    .data-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden;margin:12px 0}
    .data-table th{background:#f9fafb;padding:10px 14px;font-size:13px;font-weight:600;color:#374151;text-align:left;border-bottom:2px solid #e5e7eb}
    .data-table td{padding:10px 14px;font-size:13px;color:#6b7280;border-bottom:1px solid #f3f4f6}
    .data-table tr:last-child td{border-bottom:none}
    .data-table tr:hover td{background:#fef2f2}
    .data-table .tag{display:inline-flex;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
    .data-table .tag-blue{background:#dbeafe;color:#1e40af}
    .data-table .tag-green{background:#dcfce7;color:#166534}
    .data-table .tag-orange{background:#fed7aa;color:#9a3412}
    /* 提示框 */
    .tip-box{border-radius:12px;padding:16px 20px;display:flex;align-items:flex-start;gap:12px;margin:16px 0}
    .tip-box.warning{background:#fef9c3;border:1px solid #fde047}
    .tip-box.info{background:#dbeafe;border:1px solid #93c5fd}
    .tip-box.success{background:#dcfce7;border:1px solid #86efac}
    .tip-box i{font-size:18px;flex-shrink:0;margin-top:2px}
    .tip-box.warning i{color:#ca8a04}
    .tip-box.info i{color:#3b82f6}
    .tip-box.success i{color:#16a34a}
    .tip-box p{font-size:14px;color:#374151;line-height:1.6}
    .section-divider{height:1px;background:linear-gradient(to right,transparent,#e5e7eb,transparent);margin:24px 0}
    /* 权利卡片 */
    .right-card{padding:20px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;transition:all .3s}
    .right-card:hover{border-color:#fca5a5;box-shadow:0 4px 12px rgba(220,38,38,.06)}
    .right-card .right-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#dc2626,#ef4444);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0}

/* ============================================
       product-integrated 页面样式
       ============================================ */
/* 页面专用样式 */
    .product-hero {
      background: linear-gradient(135deg, #fef2f2 0%, #ffffff 50%, #fee2e2 100%);
      min-height: 600px;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    
    .product-hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 800px;
      height: 800px;
      background: radial-gradient(circle, rgba(220, 38, 38, 0.08) 0%, transparent 70%);
      border-radius: 50%;
    }
    
    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: rgba(220, 38, 38, 0.1);
      border-radius: 20px;
      color: #dc2626;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 24px;
    }
    
    .hero-title {
      font-size: 48px;
      font-weight: 800;
      color: #1f2937;
      line-height: 1.2;
      margin-bottom: 16px;
    }
    
    .hero-title span {
      color: #dc2626;
    }
    
    .hero-subtitle {
      font-size: 24px;
      color: #4b5563;
      margin-bottom: 24px;
      font-weight: 500;
    }
    
    .hero-desc {
      font-size: 16px;
      color: #6b7280;
      line-height: 1.8;
      margin-bottom: 32px;
      max-width: 600px;
    }
    
    .hero-image-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      background: transparent !important;
    }
    
    .hero-image {
      max-width: 100%;
      height: auto;
      max-height: 400px;
      display: block;
      background: transparent !important;
      mix-blend-mode: multiply;
    }
    
    /* 核心组件卡片 */
    .component-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 24px;
      margin-top: 48px;
    }
    
    .component-card {
      background: white;
      border-radius: 16px;
      padding: 32px 24px;
      text-align: center;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      border: 1px solid #f3f4f6;
    }
    
    .component-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(220, 38, 38, 0.12);
      border-color: #fecaca;
    }
    
    .component-icon {
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      font-size: 28px;
      color: #dc2626;
    }
    
    .component-title {
      font-size: 18px;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 8px;
    }
    
    .component-desc {
      font-size: 14px;
      color: #6b7280;
      line-height: 1.6;
    }
    
    /* 特色功能 */
    .feature-section {
      background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
    }
    
    .feature-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 32px;
      margin-top: 48px;
    }
    
    .feature-item {
      display: flex;
      gap: 16px;
      padding: 24px;
      background: white;
      border-radius: 16px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }
    
    .feature-check {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 14px;
      flex-shrink: 0;
    }
    
    .feature-content h3 {
      font-size: 18px;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 8px;
    }
    
    .feature-content p {
      font-size: 14px;
      color: #6b7280;
      line-height: 1.6;
    }
    
    /* 规格表格 */
    .spec-section {
      background: white;
    }
    
    .spec-table-container {
      max-width: 900px;
      margin: 0 auto;
    }
    
    .spec-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 32px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }
    
    .spec-table th {
      background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
      color: white;
      padding: 16px 24px;
      text-align: left;
      font-weight: 600;
    }
    
    .spec-table td {
      padding: 14px 24px;
      border-bottom: 1px solid #f3f4f6;
      color: #4b5563;
    }
    
    .spec-table tr:nth-child(even) {
      background: #fef2f2;
    }
    
    .spec-table tr:hover {
      background: #fee2e2;
    }
    
    /* 性能表格 */
    .perf-table-container {
      max-width: 900px;
      margin: 0 auto;
    }
    
    .perf-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 24px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }
    
    .perf-table th {
      background: #1f2937;
      color: white;
      padding: 14px 20px;
      text-align: left;
      font-weight: 600;
    }
    
    .perf-table td {
      padding: 12px 20px;
      border-bottom: 1px solid #f3f4f6;
      color: #4b5563;
    }
    
    .perf-table tr:nth-child(even) {
      background: #f9fafb;
    }
    
    /* 价格区域 - 白色背景 */
    .price-section {
      background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
      color: #1f2937;
    }
    
    .price-header-text {
      text-align: center;
      margin-bottom: 48px;
    }
    
    .price-main-title {
      font-size: 36px;
      font-weight: 700;
      color: #dc2626;
      margin-bottom: 12px;
    }
    
    .price-subtitle-text {
      font-size: 16px;
      color: #6b7280;
    }
    
    .price-subtitle-text span {
      color: #dc2626;
      font-weight: 600;
    }
    
    /* 三列套餐卡片 */
    .price-packages {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 40px;
    }
    
    .price-package-card {
      background: white;
      border-radius: 16px;
      padding: 32px 24px;
      text-align: center;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      border: 1px solid #e5e7eb;
      transition: all 0.3s ease;
    }
    
    .price-package-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(220, 38, 38, 0.1);
      border-color: #fecaca;
    }
    
    .package-tag {
      display: inline-block;
      padding: 6px 16px;
      background: #dc2626;
      color: white;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 20px;
    }
    
    .package-title {
      font-size: 18px;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 16px;
    }
    
    .package-content {
      font-size: 14px;
      color: #6b7280;
      line-height: 1.8;
    }
    
    .package-content strong {
      color: #1f2937;
      font-size: 16px;
      display: block;
      margin-bottom: 8px;
    }
    
    .package-note {
      font-size: 12px;
      color: #9ca3af;
      margin-top: 16px;
    }
    
    /* 底部价格和二维码区域 */
    .price-bottom {
      background: white;
      border-radius: 16px;
      padding: 40px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      border: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }
    
    .price-info {
      flex: 1;
      text-align: center;
    }
    
    .price-label {
      display: inline-block;
      padding: 4px 12px;
      background: #fef2f2;
      color: #dc2626;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      margin-bottom: 16px;
    }
    
    .price-value {
      font-size: 48px;
      font-weight: 800;
      color: #dc2626;
      line-height: 1;
    }
    
    .price-unit {
      font-size: 16px;
      color: #6b7280;
      font-weight: 400;
    }
    
    .price-divider-v {
      width: 1px;
      height: 120px;
      background: linear-gradient(180deg, transparent 0%, #e5e7eb 50%, transparent 100%);
    }
    
    .price-qrcode {
      flex: 1;
      text-align: center;
    }
    
    .qrcode-placeholder {
      width: 120px;
      height: 120px;
      background: #f3f4f6;
      border-radius: 12px;
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #9ca3af;
      font-size: 40px;
    }
    
    .qrcode-text {
      font-size: 14px;
      color: #6b7280;
    }
    
    .qrcode-text span {
      color: #dc2626;
      font-weight: 600;
    }

    /* 响应式 */
    @media (max-width: 768px) {
      .hero-title {
        font-size: 28px;
      }
      
      .hero-subtitle {
        font-size: 16px;
      }
      
      .hero-image-wrapper {
        padding: 0;
        background: transparent !important;
      }
      
      .component-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      
      .component-card {
        padding: 20px 16px;
      }
      
      .component-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
      }
      
      .spec-table, .perf-table {
        font-size: 14px;
      }
      
      .spec-table th, .spec-table td,
      .perf-table th, .perf-table td {
        padding: 10px 12px;
      }
      
      .price-main-title {
        font-size: 28px;
      }
      
      .price-packages {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      
      .price-package-card {
        padding: 24px 20px;
      }
      
      .price-bottom {
        flex-direction: column;
        padding: 24px;
        gap: 24px;
      }
      
      .price-divider-v {
        width: 100%;
        height: 1px;
      }
      
      .price-value {
        font-size: 36px;
      }
    }

/* ============================================
       service-agreement 页面样式
       ============================================ */
/* 侧边导航 */
    .side-nav{position:sticky;top:calc(var(--header-height,64px)+16px);max-height:calc(100vh - var(--header-height,64px) - 32px);overflow-y:auto}
    .side-nav::-webkit-scrollbar{width:3px}
    .side-nav::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px}
    .side-nav-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;color:#6b7280;border-radius:8px;transition:all .2s;cursor:pointer}
    .side-nav-item:hover{color:#dc2626;background:#fef2f2}
    .side-nav-item.active{color:#dc2626;background:#fef2f2;font-weight:600}
    .side-nav-item .nav-num{width:20px;height:20px;border-radius:6px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#9ca3af;flex-shrink:0}
    .side-nav-item.active .nav-num{background:#dc2626;color:#fff}
    /* 协议内容样式 */
    .agreement-section{scroll-margin-top:calc(var(--header-height,64px)+24px)}
    .agreement-section h3{font-size:18px;font-weight:700;color:#1f2937;margin-bottom:12px;display:flex;align-items:center;gap:10px}
    .agreement-section h3 .sec-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#dc2626,#ef4444);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
    .agreement-section h4{font-size:15px;font-weight:600;color:#374151;margin-bottom:8px;margin-top:16px}
    .agreement-section p{font-size:14px;color:#6b7280;line-height:1.8;margin-bottom:8px}
    .agreement-section ul,.agreement-section ol{font-size:14px;color:#6b7280;line-height:1.8;margin-bottom:8px;padding-left:20px}
    .agreement-section li{margin-bottom:4px}
    .agreement-section strong{color:#1f2937;font-weight:600}
    .agreement-section .highlight{color:#dc2626;font-weight:600}
    /* 提示框 */
    .tip-box{border-radius:12px;padding:16px 20px;display:flex;align-items:flex-start;gap:12px;margin:16px 0}
    .tip-box.warning{background:#fef9c3;border:1px solid #fde047}
    .tip-box.info{background:#dbeafe;border:1px solid #93c5fd}
    .tip-box i{font-size:18px;flex-shrink:0;margin-top:2px}
    .tip-box.warning i{color:#ca8a04}
    .tip-box.info i{color:#3b82f6}
    .tip-box p{font-size:14px;color:#374151;line-height:1.6}
    /* 分隔线 */
    .section-divider{height:1px;background:linear-gradient(to right,transparent,#e5e7eb,transparent);margin:24px 0}