/* roulang page: index */
:root {
      --primary: #c2410c;
      --primary-hover: #9a3412;
      --primary-light: #fff7ed;
      --accent: #2563eb;
      --text-main: #0f172a;
      --text-muted: #475569;
      --bg-base: #f8fafc;
      --bg-surface: #ffffff;
      --border-color: #e2e8f0;
      --border-accent: #fed7aa;
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --radius-full: 9999px;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-base);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    
    /* 招投标公告版式导航 */
    .top-bulletin-bar {
      background: #0f172a;
      color: #94a3b8;
      font-size: 13px;
      border-bottom: 1px solid #1e293b;
    }
    .top-bulletin-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 20px;
    }
    .bulletin-chip {
      background: rgba(194, 65, 12, 0.25);
      color: #fdba74;
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      margin-right: 8px;
      font-weight: 600;
    }
    .site-header {
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 50;
      box-shadow: var(--shadow-sm);
    }
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
    }
    .brand-logo {
      font-size: 20px;
      font-weight: 800;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -0.5px;
    }
    .nav-links {
      display: flex;
      list-style: none;
      gap: 28px;
      align-items: center;
    }
    .nav-links li a {
      font-weight: 600;
      font-size: 15px;
      color: var(--text-main);
      padding: 6px 0;
      position: relative;
      transition: color 0.2s;
    }
    .nav-links li a:hover,
    .nav-links li a.active {
      color: var(--primary);
    }
    .nav-links li a.active::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--primary);
      border-radius: 2px;
    }
    .nav-action-chip {
      background: var(--primary-light);
      border: 1px solid var(--border-accent);
      color: var(--primary);
      padding: 6px 14px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* Hero：拼团转化蓝图 */
    .hero-section {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.88)), url('/assets/images/ce2861a986f15ed6.webp') center/cover no-repeat;
      color: #fff;
      padding: 72px 0 64px;
    }
    .hero-wrap {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 40px;
      align-items: center;
    }
    .hero-badge-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    .hero-badge {
      background: var(--primary);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: var(--radius-full);
      text-transform: uppercase;
    }
    .group-progress-text {
      color: #fdba74;
      font-size: 14px;
      font-weight: 600;
    }
    .hero-title {
      font-size: 34px;
      font-weight: 800;
      line-height: 1.25;
      margin-bottom: 20px;
      letter-spacing: -0.5px;
    }
    .hero-desc {
      font-size: 16px;
      line-height: 1.7;
      color: #cbd5e1;
      margin-bottom: 32px;
    }
    .hero-group-box {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.16);
      backdrop-filter: blur(8px);
      padding: 24px;
      border-radius: var(--radius-lg);
    }
    .group-user-slots {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    .avatar-stack {
      display: flex;
    }
    .avatar-stack span {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #475569;
      border: 2px solid #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      margin-left: -10px;
    }
    .avatar-stack span:first-child { margin-left: 0; background: #ea580c; }
    .avatar-stack span:nth-child(2) { background: #0284c7; }
    .avatar-stack span:nth-child(3) { background: #16a34a; }
    .avatar-stack span:nth-child(4) { background: #9333ea; }
    .avatar-summary {
      font-size: 14px;
      color: #f1f5f9;
    }
    .avatar-summary strong {
      color: #fb923c;
    }
    .hero-cta-group {
      display: flex;
      gap: 16px;
    }
    .btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 12px 24px;
      font-size: 15px;
      font-weight: 700;
      border-radius: var(--radius-md);
      transition: all 0.2s;
      cursor: pointer;
      border: none;
    }
    .btn-primary {
      background: var(--primary);
      color: #ffffff;
    }
    .btn-primary:hover {
      background: var(--primary-hover);
      box-shadow: 0 4px 14px rgba(194, 65, 12, 0.35);
    }
    .btn-secondary {
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    /* Section通用 */
    .section-spacing {
      padding: 64px 0;
    }
    .section-alt {
      background: #f1f5f9;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .section-header {
      margin-bottom: 36px;
    }
    .section-subtitle {
      color: var(--primary);
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      margin-bottom: 6px;
      display: block;
    }
    .section-title {
      font-size: 26px;
      font-weight: 800;
      color: var(--text-main);
      line-height: 1.3;
      margin-bottom: 12px;
    }
    .section-desc {
      font-size: 15px;
      color: var(--text-muted);
      max-width: 780px;
      line-height: 1.7;
    }

    /* 2. 产品价值板块 */
    .value-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .value-card {
      background: var(--bg-surface);
      padding: 24px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
    }
    .value-index {
      font-size: 24px;
      font-weight: 900;
      color: var(--primary);
      margin-bottom: 12px;
    }
    .value-title {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .value-text {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* 3. 功能展示板块 */
    .feature-showcase-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      align-items: center;
    }
    .feature-img-wrap {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      border: 1px solid var(--border-color);
    }
    .feature-spec-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 20px;
    }
    .feature-spec-item {
      background: var(--bg-surface);
      border-left: 4px solid var(--primary);
      padding: 14px 18px;
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      box-shadow: var(--shadow-sm);
    }
    .feature-spec-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .feature-spec-desc {
      font-size: 13px;
      color: var(--text-muted);
    }

    /* 4. 三步上手板块 */
    .steps-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      position: relative;
    }
    .step-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 28px 20px;
      text-align: center;
      position: relative;
    }
    .step-badge {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 18px;
      margin: 0 auto 16px;
    }
    .step-heading {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .step-info {
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* 5. 多端入口板块 */
    .platform-matrix {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .platform-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 22px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .platform-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .platform-name {
      font-size: 16px;
      font-weight: 700;
    }
    .platform-tag {
      font-size: 11px;
      background: #e2e8f0;
      padding: 2px 6px;
      border-radius: 4px;
      color: #475569;
    }
    .platform-desc {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 16px;
    }
    .platform-btn {
      width: 100%;
      padding: 8px 0;
      font-size: 13px;
      text-align: center;
      border-radius: var(--radius-sm);
      font-weight: 600;
      background: var(--bg-base);
      color: var(--text-main);
      border: 1px solid var(--border-color);
    }
    .platform-btn:hover {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    /* 6. 评价墙板块 */
    .reviews-masonry {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .review-bubble {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 22px;
      box-shadow: var(--shadow-sm);
    }
    .review-user-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .review-author {
      font-weight: 700;
      font-size: 14px;
    }
    .review-role {
      font-size: 12px;
      color: #94a3b8;
    }
    .review-body {
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* 7. 系统要求板块 */
    .specs-table-wrap {
      background: var(--bg-surface);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      overflow: hidden;
    }
    .specs-row {
      display: grid;
      grid-template-columns: 200px 1fr 1fr;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-color);
      font-size: 14px;
    }
    .specs-row:last-child {
      border-bottom: none;
    }
    .specs-row.specs-head {
      background: #f8fafc;
      font-weight: 700;
      color: var(--text-main);
    }
    .specs-label {
      font-weight: 600;
      color: var(--text-main);
    }
    .specs-val {
      color: var(--text-muted);
    }

    /* 8. 资讯列表板块 */
    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .news-card {
      background: var(--bg-surface);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .news-card img {
      height: 180px;
      width: 100%;
      object-fit: cover;
    }
    .news-content {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .news-date {
      font-size: 12px;
      color: #94a3b8;
      margin-bottom: 6px;
    }
    .news-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    .news-text {
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* 扩充板块：9. 平台保障 */
    .assurance-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .assurance-item {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      padding: 20px;
      border-radius: var(--radius-md);
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }
    .assurance-icon {
      background: var(--primary-light);
      color: var(--primary);
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      flex-shrink: 0;
    }
    .assurance-content h4 {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .assurance-content p {
      font-size: 13px;
      color: var(--text-muted);
    }

    /* 扩充板块：10. 报价阶梯/订阅计划 */
    .pricing-matrix {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .pricing-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 28px 24px;
      position: relative;
    }
    .pricing-card.featured {
      border: 2px solid var(--primary);
      box-shadow: var(--shadow-md);
    }
    .pricing-featured-tag {
      position: absolute;
      top: -12px;
      right: 20px;
      background: var(--primary);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: var(--radius-full);
    }
    .pricing-title {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 6px;
    }
    .pricing-fee {
      font-size: 26px;
      font-weight: 900;
      color: var(--text-main);
      margin-bottom: 16px;
    }
    .pricing-list {
      list-style: none;
      font-size: 13.5px;
      color: var(--text-muted);
      margin-bottom: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .pricing-list li::before {
      content: "✓ ";
      color: var(--primary);
      font-weight: 800;
    }

    /* 扩充板块：11. 入口矩阵 */
    .portal-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .portal-box {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 18px;
      text-align: center;
      transition: transform 0.2s;
    }
    .portal-box:hover {
      transform: translateY(-3px);
      border-color: var(--primary);
    }
    .portal-box h5 {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .portal-box p {
      font-size: 12.5px;
      color: var(--text-muted);
    }

    /* 扩充板块：12. 线索表单 */
    .lead-form-wrap {
      max-width: 680px;
      margin: 0 auto;
      background: var(--bg-surface);
      padding: 32px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
    }
    .form-group {
      margin-bottom: 18px;
    }
    .form-label {
      display: block;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .form-input {
      width: 100%;
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-color);
      font-size: 14px;
    }
    .form-input:focus {
      outline: none;
      border-color: var(--primary);
    }
    .form-privacy-note {
      font-size: 12px;
      color: #94a3b8;
      margin-bottom: 18px;
    }

    /* 页脚 */
    .site-footer {
      background: #0f172a;
      color: #94a3b8;
      padding: 56px 0 24px;
      border-top: 1px solid #1e293b;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 36px;
      margin-bottom: 40px;
    }
    .footer-brand h4 {
      color: #fff;
      font-size: 18px;
      margin-bottom: 12px;
    }
    .footer-brand p {
      font-size: 13.5px;
      line-height: 1.6;
    }
    .footer-col h5 {
      color: #f1f5f9;
      font-size: 15px;
      margin-bottom: 14px;
    }
    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 13.5px;
    }
    .footer-col ul li a:hover {
      color: #fdba74;
    }
    .footer-bottom {
      border-top: 1px solid #1e293b;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12.5px;
    }

    /* 响应式断点 */
    @media (max-width: 1024px) {
      .value-grid, .platform-matrix, .portal-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .specs-row {
        grid-template-columns: 150px 1fr 1fr;
      }
    }
    @media (max-width: 768px) {
      .hero-wrap, .feature-showcase-grid {
        grid-template-columns: 1fr;
      }
      .steps-row, .reviews-masonry, .news-grid, .assurance-grid, .pricing-matrix {
        grid-template-columns: 1fr;
      }
      .nav-links {
        display: none;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .hero-title {
        font-size: 26px;
      }
    }

/* roulang page: category2 */
:root {
      --primary: #c2410c;
      --primary-hover: #9a3412;
      --primary-light: #fff7ed;
      --accent: #2563eb;
      --text-main: #0f172a;
      --text-muted: #475569;
      --bg-base: #f8fafc;
      --bg-surface: #ffffff;
      --border-color: #e2e8f0;
      --border-accent: #fed7aa;
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --radius-full: 9999px;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-base);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    /* 导航系统 */
    .site-header {
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 50;
      box-shadow: var(--shadow-sm);
    }
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
    }
    .brand-logo {
      font-size: 20px;
      font-weight: 800;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -0.5px;
    }
    .nav-links {
      display: flex;
      list-style: none;
      gap: 28px;
      align-items: center;
    }
    .nav-links li a {
      font-weight: 600;
      font-size: 15px;
      color: var(--text-main);
      padding: 6px 0;
      position: relative;
      transition: color 0.2s;
    }
    .nav-links li a:hover,
    .nav-links li a.active {
      color: var(--primary);
    }
    .nav-links li a.active::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--primary);
      border-radius: 2px;
    }
    .nav-action-chip {
      background: var(--primary-light);
      border: 1px solid var(--border-accent);
      color: var(--primary);
      padding: 6px 14px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    /* 面包屑 */
    .breadcrumb-nav {
      background: #f1f5f9;
      border-bottom: 1px solid var(--border-color);
      padding: 12px 0;
      font-size: 14px;
      color: var(--text-muted);
    }
    .breadcrumb-nav a {
      color: var(--text-muted);
      transition: color 0.2s;
    }
    .breadcrumb-nav a:hover {
      color: var(--primary);
    }
    .breadcrumb-nav span {
      margin: 0 8px;
      color: #94a3b8;
    }
    /* 蓝图：Hero 左文右图 5:7 斜向错位 */
    .category-hero {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)), url('/assets/images/8aaee7d29014b838.webp') center/cover no-repeat;
      color: #ffffff;
      padding: 70px 0 80px;
      overflow: hidden;
      position: relative;
    }
    .hero-grid-asym {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 40px;
      align-items: center;
    }
    .hero-meta-badge {
      display: inline-block;
      background: var(--primary);
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: var(--radius-full);
      margin-bottom: 18px;
    }
    .hero-title-main {
      font-size: 36px;
      font-weight: 800;
      line-height: 1.25;
      margin-bottom: 20px;
      letter-spacing: -0.5px;
    }
    .hero-summary-text {
      font-size: 16px;
      line-height: 1.75;
      color: #cbd5e1;
      margin-bottom: 30px;
    }
    .hero-action-bar {
      display: flex;
      gap: 16px;
      margin-bottom: 36px;
    }
    .btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 12px 24px;
      font-size: 15px;
      font-weight: 700;
      border-radius: var(--radius-md);
      transition: all 0.2s;
      cursor: pointer;
      border: none;
    }
    .btn-primary {
      background: var(--primary);
      color: #ffffff;
    }
    .btn-primary:hover {
      background: var(--primary-hover);
      box-shadow: 0 4px 14px rgba(194, 65, 12, 0.35);
    }
    .btn-secondary {
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.2);
    }
    .hero-kpi-bar {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    .kpi-num {
      font-size: 24px;
      font-weight: 800;
      color: #fdba74;
      display: block;
    }
    .kpi-lbl {
      font-size: 13px;
      color: #94a3b8;
    }
    .hero-skew-wrap {
      position: relative;
      transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
      border-radius: var(--radius-lg);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.2);
      overflow: hidden;
    }
    .hero-skew-wrap img {
      width: 100%;
      height: 440px;
      object-fit: cover;
    }
    .hero-img-tag {
      position: absolute;
      bottom: 16px;
      left: 16px;
      right: 16px;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(8px);
      padding: 12px 16px;
      border-radius: var(--radius-md);
      font-size: 13px;
      color: #e2e8f0;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    /* 通用板块规范 */
    .section-spacing {
      padding: 64px 0;
    }
    .section-alt {
      background: #f1f5f9;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .section-header {
      margin-bottom: 36px;
    }
    .section-subtitle {
      color: var(--primary);
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      margin-bottom: 6px;
      display: block;
    }
    .section-title {
      font-size: 26px;
      font-weight: 800;
      color: var(--text-main);
      line-height: 1.3;
      margin-bottom: 12px;
    }
    .section-desc {
      font-size: 15px;
      color: var(--text-muted);
      max-width: 780px;
      line-height: 1.7;
    }
    /* 板块2：篇章条漫矩阵 */
    .comic-grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .comic-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s, box-shadow 0.2s;
      display: flex;
      flex-direction: column;
    }
    .comic-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }
    .comic-card-cover {
      position: relative;
      height: 200px;
      overflow: hidden;
      background: #e2e8f0;
    }
    .comic-card-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .comic-card-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(15, 23, 42, 0.85);
      color: #fdba74;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: var(--radius-sm);
    }
    .comic-card-body {
      padding: 18px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .comic-card-title {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--text-main);
    }
    .comic-card-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 14px;
      flex: 1;
    }
    .comic-card-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--border-color);
      padding-top: 12px;
      font-size: 12px;
      color: #64748b;
    }
    /* 板块3：分镜长卷阅览系统 (双列非对称) */
    .reader-showcase-row {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 36px;
      align-items: center;
    }
    .reader-img-frame {
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-md);
    }
    .reader-img-frame img {
      width: 100%;
      height: 380px;
      object-fit: cover;
    }
    .reader-features-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .reader-f-item {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      padding: 18px;
      border-radius: var(--radius-md);
    }
    .reader-f-item h4 {
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 6px;
    }
    .reader-f-item p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6;
    }
    /* 板块4：剧目篇章序列 (时间轴/流程流) */
    .timeline-stream {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .timeline-node {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-top: 4px solid var(--primary);
      border-radius: var(--radius-md);
      padding: 24px;
      box-shadow: var(--shadow-sm);
    }
    .node-phase {
      font-size: 12px;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }
    .node-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .node-text {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.65;
    }
    /* 板块5：高热度同人长篇榜单 */
    .ranking-table-box {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }
    .ranking-item {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 16px 24px;
      border-bottom: 1px solid var(--border-color);
      transition: background-color 0.2s;
    }
    .ranking-item:last-child {
      border-bottom: none;
    }
    .ranking-item:hover {
      background-color: var(--primary-light);
    }
    .rank-num {
      font-size: 20px;
      font-weight: 800;
      color: #94a3b8;
      width: 32px;
      text-align: center;
    }
    .ranking-item:nth-child(1) .rank-num { color: #ea580c; }
    .ranking-item:nth-child(2) .rank-num { color: #f97316; }
    .ranking-item:nth-child(3) .rank-num { color: #fb923c; }
    .rank-info {
      flex: 1;
    }
    .rank-info-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 4px;
    }
    .rank-info-sub {
      font-size: 13px;
      color: var(--text-muted);
    }
    .rank-tags {
      display: flex;
      gap: 8px;
    }
    .rank-badge {
      font-size: 12px;
      padding: 3px 10px;
      background: #f1f5f9;
      border-radius: var(--radius-full);
      color: #475569;
    }
    /* 板块6：读者高频问答 */
    .faq-accordion-group {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .faq-block {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 20px 24px;
      box-shadow: var(--shadow-sm);
    }
    .faq-q {
      font-size: 17px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .faq-q::before {
      content: "Q";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background: var(--primary);
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      border-radius: 4px;
    }
    .faq-a {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
      padding-left: 34px;
    }
    /* 板块7：画卷征稿与互动条 */
    .collab-banner-zone {
      background: linear-gradient(135deg, #1e293b, #0f172a);
      color: #ffffff;
      border-radius: var(--radius-lg);
      padding: 48px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: var(--shadow-xl);
    }
    .collab-content h3 {
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 12px;
    }
    .collab-content p {
      font-size: 15px;
      color: #cbd5e1;
      max-width: 620px;
      line-height: 1.6;
    }
    /* 页脚系统 */
    .site-footer {
      background: #0f172a;
      color: #94a3b8;
      padding: 64px 0 32px;
      border-top: 1px solid #1e293b;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }
    .footer-brand h4 {
      color: #ffffff;
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 16px;
    }
    .footer-brand p {
      font-size: 14px;
      line-height: 1.7;
      color: #64748b;
    }
    .footer-col h5 {
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 16px;
    }
    .footer-col ul {
      list-style: none;
    }
    .footer-col ul li {
      margin-bottom: 10px;
      font-size: 14px;
    }
    .footer-col ul li a {
      color: #94a3b8;
      transition: color 0.2s;
    }
    .footer-col ul li a:hover {
      color: #fdba74;
    }
    .footer-bottom {
      border-top: 1px solid #1e293b;
      padding-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 12px;
      color: #64748b;
    }
    /* 响应式断点 */
    @media (max-width: 1024px) {
      .hero-grid-asym {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .comic-grid-4 {
        grid-template-columns: repeat(2, 1fr);
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
      .timeline-stream {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 768px) {
      .reader-showcase-row {
        grid-template-columns: 1fr;
      }
      .collab-banner-zone {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 32px 24px;
      }
      .nav-links {
        display: none;
      }
      .ranking-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
      .hero-skew-wrap {
        transform: none;
      }
      .hero-skew-wrap img {
        height: 280px;
      }
    }

/* roulang page: category1 */
:root {
      --primary: #c2410c;
      --primary-hover: #9a3412;
      --primary-light: #fff7ed;
      --accent: #2563eb;
      --text-main: #0f172a;
      --text-muted: #475569;
      --bg-base: #f8fafc;
      --bg-surface: #ffffff;
      --border-color: #e2e8f0;
      --border-accent: #fed7aa;
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --radius-full: 9999px;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-base);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    a {
      text-decoration: none;
      color: inherit;
      transition: color 0.2s, background-color 0.2s, border-color 0.2s;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .bulletin-chip {
      background: rgba(194, 65, 12, 0.25);
      color: #fdba74;
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      margin-right: 8px;
      font-weight: 600;
    }
    .site-header {
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 50;
      box-shadow: var(--shadow-sm);
    }
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
    }
    .brand-logo {
      font-size: 20px;
      font-weight: 800;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -0.5px;
    }
    .nav-links {
      display: flex;
      list-style: none;
      gap: 28px;
      align-items: center;
    }
    .nav-links li a {
      font-weight: 600;
      font-size: 15px;
      color: var(--text-main);
      padding: 6px 0;
      position: relative;
    }
    .nav-links li a:hover,
    .nav-links li a.active {
      color: var(--primary);
    }
    .nav-links li a.active::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--primary);
      border-radius: 2px;
    }
    .nav-action-chip {
      background: var(--primary-light);
      border: 1px solid var(--border-accent);
      color: var(--primary);
      padding: 6px 14px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .breadcrumb-bar {
      background: #f1f5f9;
      border-bottom: 1px solid var(--border-color);
      padding: 10px 0;
      font-size: 13px;
      color: var(--text-muted);
    }
    .breadcrumb-bar a {
      color: var(--text-muted);
    }
    .breadcrumb-bar a:hover {
      color: var(--primary);
    }
    .breadcrumb-bar span {
      margin: 0 6px;
    }
    /* Hero: 蓝图要求深色信息面板，左侧入口，右侧 faux 数据榜单 */
    .cat-hero-panel {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92)), url('/assets/images/8aaee7d29014b838.webp') center/cover no-repeat;
      color: #ffffff;
      padding: 60px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .hero-grid-split {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 36px;
      align-items: center;
    }
    .hero-entry-content h1 {
      font-size: 32px;
      font-weight: 800;
      line-height: 1.3;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }
    .hero-entry-content p {
      font-size: 15px;
      color: #cbd5e1;
      line-height: 1.7;
      margin-bottom: 24px;
    }
    .hero-filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 28px;
    }
    .tag-badge {
      font-size: 13px;
      padding: 4px 12px;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.1);
      color: #e2e8f0;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .tag-badge.active {
      background: var(--primary);
      color: #ffffff;
      border-color: var(--primary);
    }
    .faux-rank-card {
      background: rgba(15, 23, 42, 0.75);
      border: 1px solid rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(12px);
      border-radius: var(--radius-lg);
      padding: 24px;
      box-shadow: var(--shadow-xl);
    }
    .faux-rank-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      padding-bottom: 12px;
    }
    .faux-rank-title {
      font-size: 16px;
      font-weight: 700;
      color: #f8fafc;
    }
    .faux-rank-chip {
      font-size: 12px;
      background: rgba(194, 65, 12, 0.3);
      color: #fdba74;
      padding: 2px 8px;
      border-radius: var(--radius-sm);
    }
    .rank-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .rank-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 14px;
    }
    .rank-index {
      font-weight: 800;
      width: 24px;
      color: #fdba74;
    }
    .rank-name {
      flex: 1;
      font-weight: 600;
      color: #e2e8f0;
      padding: 0 8px;
    }
    .rank-heat {
      font-size: 12px;
      color: #94a3b8;
    }

    /* 通用Section */
    .section-spacing {
      padding: 60px 0;
    }
    .section-alt {
      background: #f1f5f9;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .section-header {
      margin-bottom: 32px;
    }
    .section-subtitle {
      color: var(--primary);
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      margin-bottom: 6px;
      display: block;
    }
    .section-title {
      font-size: 24px;
      font-weight: 800;
      color: var(--text-main);
      line-height: 1.3;
      margin-bottom: 8px;
    }
    .section-desc {
      font-size: 14px;
      color: var(--text-muted);
      max-width: 820px;
      line-height: 1.6;
    }

    /* 板块2：特色网格卡片 */
    .feature-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .info-stat-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 24px;
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .info-stat-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }
    .info-stat-badge {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      color: var(--primary);
      background: var(--primary-light);
      padding: 2px 10px;
      border-radius: var(--radius-sm);
      margin-bottom: 12px;
    }
    .info-stat-title {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .info-stat-text {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* 板块3：主打角色画册矩阵展柜 */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .gallery-card {
      background: var(--bg-surface);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-sm);
      transition: all 0.2s;
    }
    .gallery-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--border-accent);
    }
    .gallery-img-box {
      width: 100%;
      height: 220px;
      overflow: hidden;
      position: relative;
      background: #e2e8f0;
    }
    .gallery-img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    .gallery-card:hover .gallery-img-box img {
      transform: scale(1.04);
    }
    .gallery-tag-float {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(15, 23, 42, 0.75);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      backdrop-filter: blur(4px);
    }
    .gallery-body {
      padding: 16px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .gallery-card-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 6px;
      line-height: 1.4;
    }
    .gallery-meta {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
    }
    .gallery-brief {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
      margin-bottom: 14px;
      flex: 1;
    }
    .gallery-foot-link {
      font-size: 13px;
      font-weight: 700;
      color: var(--primary);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-top: 1px dashed var(--border-color);
      padding-top: 10px;
    }

    /* 板块4：元素城邦多维检索对比板块 */
    .region-compare-wrap {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .region-box {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 22px;
      box-shadow: var(--shadow-sm);
    }
    .region-box-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .region-badge-sym {
      width: 32px;
      height: 32px;
      background: var(--primary-light);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      font-weight: 800;
      font-size: 14px;
    }
    .region-box-title {
      font-size: 16px;
      font-weight: 700;
    }
    .region-detail-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 13px;
      color: var(--text-muted);
    }
    .region-detail-list li {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 6px;
    }
    .region-detail-list li strong {
      color: var(--text-main);
    }

    /* 板块5：技术参数与画质流控 */
    .spec-flow-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      align-items: center;
    }
    .spec-flow-visual {
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-md);
    }
    .spec-flow-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .spec-item {
      display: flex;
      gap: 14px;
    }
    .spec-bullet {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .spec-item-content h4 {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .spec-item-content p {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* 板块6：读者鉴赏问答与画集规范 */
    .faq-compact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .faq-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 20px;
    }
    .faq-q {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 8px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .faq-q::before {
      content: "问";
      background: var(--primary);
      color: #fff;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 800;
      flex-shrink: 0;
    }
    .faq-a {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
      padding-left: 28px;
    }

    /* 板块7：社群画集典藏联动 CTA */
    .cta-banner-box {
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      border-radius: var(--radius-lg);
      padding: 40px;
      color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: var(--shadow-lg);
    }
    .cta-left-text h3 {
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 8px;
    }
    .cta-left-text p {
      font-size: 14px;
      color: #94a3b8;
      max-width: 600px;
    }
    .cta-right-btn {
      display: inline-flex;
      align-items: center;
      padding: 12px 28px;
      background: var(--primary);
      color: #ffffff;
      font-weight: 700;
      border-radius: var(--radius-md);
      font-size: 14px;
      transition: background 0.2s;
    }
    .cta-right-btn:hover {
      background: var(--primary-hover);
    }

    /* Footer 对齐 */
    .site-footer {
      background: #0f172a;
      color: #cbd5e1;
      padding: 56px 0 28px;
      font-size: 13px;
      border-top: 1px solid #1e293b;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 40px;
    }
    .footer-brand h4 {
      font-size: 18px;
      color: #ffffff;
      margin-bottom: 14px;
      font-weight: 800;
    }
    .footer-brand p {
      line-height: 1.7;
      color: #94a3b8;
      font-size: 13px;
    }
    .footer-col h5 {
      font-size: 14px;
      color: #ffffff;
      margin-bottom: 16px;
      font-weight: 700;
    }
    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .footer-col ul li a {
      color: #94a3b8;
    }
    .footer-col ul li a:hover {
      color: #ffffff;
    }
    .footer-bottom {
      border-top: 1px solid #1e293b;
      padding-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      color: #64748b;
      font-size: 12px;
      text-align: center;
    }

    /* 响应式断点 */
    @media (max-width: 1024px) {
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .feature-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
      .region-compare-wrap {
        grid-template-columns: 1fr;
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 768px) {
      .hero-grid-split {
        grid-template-columns: 1fr;
      }
      .spec-flow-row {
        grid-template-columns: 1fr;
      }
      .faq-compact-grid {
        grid-template-columns: 1fr;
      }
      .cta-banner-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
      }
      .nav-links {
        display: none;
      }
    }
    @media (max-width: 520px) {
      .gallery-grid {
        grid-template-columns: 1fr;
      }
      .feature-grid-3 {
        grid-template-columns: 1fr;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .cat-hero-panel {
        padding: 40px 0;
      }
      .hero-entry-content h1 {
        font-size: 24px;
      }
    }

/* roulang page: category3 */
:root {
      --primary: #c2410c;
      --primary-hover: #9a3412;
      --primary-light: #fff7ed;
      --accent: #2563eb;
      --text-main: #0f172a;
      --text-muted: #475569;
      --bg-base: #f8fafc;
      --bg-surface: #ffffff;
      --border-color: #e2e8f0;
      --border-accent: #fed7aa;
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --radius-full: 9999px;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-base);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .site-header {
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 50;
      box-shadow: var(--shadow-sm);
    }
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
    }
    .brand-logo {
      font-size: 20px;
      font-weight: 800;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -0.5px;
    }
    .nav-links {
      display: flex;
      list-style: none;
      gap: 28px;
      align-items: center;
      margin-bottom: 0;
      padding-left: 0;
    }
    .nav-links li a {
      font-weight: 600;
      font-size: 15px;
      color: var(--text-main);
      padding: 6px 0;
      position: relative;
      transition: color 0.2s;
    }
    .nav-links li a:hover,
    .nav-links li a.active {
      color: var(--primary);
    }
    .nav-links li a.active::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--primary);
      border-radius: 2px;
    }
    .nav-action-chip {
      background: var(--primary-light);
      border: 1px solid var(--border-accent);
      color: var(--primary);
      padding: 6px 14px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .breadcrumb-nav {
      background: #ffffff;
      border-bottom: 1px solid var(--border-color);
      padding: 12px 0;
      font-size: 14px;
      color: var(--text-muted);
    }
    .breadcrumb-nav a {
      color: var(--text-muted);
      transition: color 0.2s;
    }
    .breadcrumb-nav a:hover {
      color: var(--primary);
    }
    .breadcrumb-nav .separator {
      margin: 0 8px;
      color: #cbd5e1;
    }
    .breadcrumb-nav .current {
      color: var(--primary);
      font-weight: 600;
    }
    .page-hero-banner {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.88)), url('/assets/images/8aaee7d29014b838.webp') center/cover no-repeat;
      color: #ffffff;
      padding: 68px 0 54px;
      border-bottom: 1px solid var(--border-color);
    }
    .page-hero-tag {
      display: inline-block;
      background: rgba(194, 65, 12, 0.9);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 14px;
      border-radius: var(--radius-full);
      margin-bottom: 16px;
      letter-spacing: 0.5px;
    }
    .page-hero-title {
      font-size: 32px;
      font-weight: 800;
      line-height: 1.3;
      margin-bottom: 18px;
    }
    .page-hero-desc {
      font-size: 16px;
      line-height: 1.8;
      color: #cbd5e1;
      max-width: 840px;
      margin-bottom: 24px;
    }
    .hero-stat-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .stat-pill-item {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.16);
      padding: 8px 16px;
      border-radius: var(--radius-md);
      font-size: 14px;
      color: #e2e8f0;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .stat-pill-item strong {
      color: #fdba74;
      font-weight: 700;
    }
    .cat-section {
      padding: 56px 0;
    }
    .cat-section-alt {
      background: #f1f5f9;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .cat-section-header {
      margin-bottom: 32px;
    }
    .cat-badge {
      color: var(--primary);
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      margin-bottom: 6px;
      display: inline-block;
    }
    .cat-section-title {
      font-size: 24px;
      font-weight: 800;
      color: var(--text-main);
      line-height: 1.35;
      margin-bottom: 10px;
    }
    .cat-section-summary {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.7;
    }
    .custom-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s, box-shadow 0.2s;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .custom-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }
    .custom-card-img {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }
    .custom-card-body {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .card-meta-tag {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      color: var(--primary);
      background: var(--primary-light);
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      width: fit-content;
      margin-bottom: 10px;
    }
    .custom-card-title {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: 10px;
      color: var(--text-main);
    }
    .custom-card-desc {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 16px;
      flex: 1;
    }
    .custom-card-footer {
      border-top: 1px solid #f1f5f9;
      padding-top: 14px;
      font-size: 13px;
      color: #64748b;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .metric-box-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .metric-box-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 24px 20px;
      box-shadow: var(--shadow-sm);
      border-left: 4px solid var(--primary);
    }
    .metric-value {
      font-size: 28px;
      font-weight: 800;
      color: var(--primary);
      margin-bottom: 6px;
      line-height: 1;
    }
    .metric-label {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 6px;
    }
    .metric-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .pano-stage-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 28px;
      margin-bottom: 24px;
      box-shadow: var(--shadow-sm);
    }
    .pano-stage-img {
      border-radius: var(--radius-md);
      width: 100%;
      height: 340px;
      object-fit: cover;
      margin-bottom: 20px;
    }
    .tech-pill-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }
    .tech-pill {
      background: #f8fafc;
      border: 1px solid var(--border-color);
      font-size: 12px;
      color: var(--text-muted);
      padding: 4px 10px;
      border-radius: var(--radius-sm);
    }
    .topic-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 20px;
      transition: border-color 0.2s;
    }
    .topic-card:hover {
      border-color: var(--primary);
    }
    .topic-number {
      font-size: 12px;
      font-weight: 800;
      color: var(--primary);
      margin-bottom: 4px;
    }
    .topic-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .topic-detail {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
    }
    .format-spec-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--bg-surface);
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--border-color);
    }
    .format-spec-table th,
    .format-spec-table td {
      padding: 14px 18px;
      text-align: left;
      font-size: 14px;
      border-bottom: 1px solid var(--border-color);
    }
    .format-spec-table th {
      background: #f8fafc;
      font-weight: 700;
      color: var(--text-main);
    }
    .site-footer {
      background: #0f172a;
      color: #94a3b8;
      padding: 60px 0 24px;
      border-top: 1px solid #1e293b;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 36px;
      margin-bottom: 40px;
    }
    .footer-brand h4 {
      color: #f8fafc;
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 14px;
    }
    .footer-brand p {
      font-size: 14px;
      line-height: 1.7;
      color: #94a3b8;
    }
    .footer-col h5 {
      color: #f8fafc;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 16px;
    }
    .footer-col ul {
      list-style: none;
      padding-left: 0;
      margin-bottom: 0;
    }
    .footer-col ul li {
      margin-bottom: 10px;
      font-size: 14px;
    }
    .footer-col ul li a {
      color: #94a3b8;
      transition: color 0.2s;
    }
    .footer-col ul li a:hover {
      color: #fdba74;
    }
    .footer-bottom {
      border-top: 1px solid #1e293b;
      padding-top: 24px;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: center;
      color: #64748b;
    }
    @media (max-width: 992px) {
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
      .metric-box-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 768px) {
      .nav-links {
        display: none;
      }
      .page-hero-title {
        font-size: 26px;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .metric-box-grid {
        grid-template-columns: 1fr;
      }
    }

/* roulang page: category4 */
:root {
      --primary: #c2410c;
      --primary-hover: #9a3412;
      --primary-light: #fff7ed;
      --accent: #2563eb;
      --text-main: #0f172a;
      --text-muted: #475569;
      --bg-base: #f8fafc;
      --bg-surface: #ffffff;
      --border-color: #e2e8f0;
      --border-accent: #fed7aa;
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --radius-full: 9999px;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-base);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .site-header {
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 50;
      box-shadow: var(--shadow-sm);
    }
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
    }
    .brand-logo {
      font-size: 20px;
      font-weight: 800;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -0.5px;
    }
    .nav-links {
      display: flex;
      list-style: none;
      gap: 28px;
      align-items: center;
    }
    .nav-links li a {
      font-weight: 600;
      font-size: 15px;
      color: var(--text-main);
      padding: 6px 0;
      position: relative;
      transition: color 0.2s;
    }
    .nav-links li a:hover,
    .nav-links li a.active {
      color: var(--primary);
    }
    .nav-links li a.active::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--primary);
      border-radius: 2px;
    }
    .nav-action-chip {
      background: var(--primary-light);
      border: 1px solid var(--border-accent);
      color: var(--primary);
      padding: 6px 14px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* 面包屑与分类页专有组件 */
    .breadcrumb-bar {
      background: #f1f5f9;
      border-bottom: 1px solid var(--border-color);
      padding: 12px 0;
      font-size: 13px;
      color: var(--text-muted);
    }
    .breadcrumb-bar a {
      color: var(--text-muted);
      transition: color 0.2s;
    }
    .breadcrumb-bar a:hover {
      color: var(--primary);
    }
    .breadcrumb-bar span {
      margin: 0 8px;
      color: #94a3b8;
    }

    /* 英雄区：自然有机柔光首屏 */
    .soft-hero {
      position: relative;
      background: radial-gradient(circle at 80% 20%, rgba(254, 215, 170, 0.45), transparent 45%),
                  radial-gradient(circle at 10% 80%, rgba(219, 234, 254, 0.45), transparent 50%),
                  #ffffff;
      border-bottom: 1px solid var(--border-color);
      padding: 64px 0 54px;
      overflow: hidden;
    }
    .soft-hero-content {
      max-width: 860px;
    }
    .soft-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--primary-light);
      color: var(--primary);
      font-size: 12px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: var(--radius-full);
      border: 1px solid var(--border-accent);
      margin-bottom: 16px;
    }
    .soft-hero h1 {
      font-size: 36px;
      font-weight: 800;
      color: var(--text-main);
      line-height: 1.25;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }
    .soft-hero-statement {
      font-size: 18px;
      color: var(--primary);
      font-weight: 600;
      margin-bottom: 16px;
      line-height: 1.5;
    }
    .soft-hero-desc {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.75;
      margin-bottom: 24px;
    }
    .hero-elements-list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 12px;
    }
    .hero-element-chip {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      padding: 8px 16px;
      border-radius: var(--radius-md);
      font-size: 13px;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: var(--shadow-sm);
    }
    .hero-element-chip strong {
      color: var(--primary);
    }

    /* 板块通用规范 */
    .catalog-section {
      padding: 60px 0;
    }
    .catalog-section-alt {
      background: #f8fafc;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .sec-intro {
      margin-bottom: 36px;
    }
    .sec-tag {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--primary);
      letter-spacing: 0.5px;
      margin-bottom: 6px;
      display: inline-block;
    }
    .sec-title {
      font-size: 26px;
      font-weight: 800;
      color: var(--text-main);
      margin-bottom: 10px;
    }
    .sec-desc {
      font-size: 14px;
      color: var(--text-muted);
      max-width: 820px;
      line-height: 1.7;
    }

    /* 话题讨论与创作者焦点 (视觉套装：互动聚合) */
    .creator-hub-grid {
      display: grid;
      grid-template-columns: 1.8fr 1.2fr;
      gap: 32px;
      align-items: start;
    }
    .creator-focus-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 30px;
      box-shadow: var(--shadow-sm);
    }
    .creator-profile-header {
      display: flex;
      gap: 20px;
      align-items: center;
      margin-bottom: 24px;
    }
    .creator-avatar {
      width: 80px;
      height: 80px;
      border-radius: var(--radius-full);
      object-fit: cover;
      border: 3px solid var(--border-accent);
    }
    .creator-info h3 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .creator-badge-verified {
      background: #dbeafe;
      color: #1e40af;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: var(--radius-full);
    }
    .creator-info p {
      font-size: 13px;
      color: var(--text-muted);
    }
    .creation-showcase-box {
      border-radius: var(--radius-md);
      overflow: hidden;
      margin-bottom: 20px;
      border: 1px solid var(--border-color);
      position: relative;
    }
    .creation-showcase-box img {
      width: 100%;
      height: 280px;
      object-fit: cover;
    }
    .artwork-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px 16px;
      background: linear-gradient(transparent, rgba(15, 23, 42, 0.85));
      color: #ffffff;
      font-size: 13px;
    }

    /* 话题讨论流 */
    .discussion-panel {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 24px;
      box-shadow: var(--shadow-sm);
    }
    .panel-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-color);
    }
    .panel-header-row h4 {
      font-size: 16px;
      font-weight: 700;
    }
    .badge-counter {
      background: var(--primary-light);
      color: var(--primary);
      padding: 2px 10px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 700;
    }
    .topic-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .topic-item {
      padding: 14px;
      border-radius: var(--radius-md);
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      transition: all 0.2s;
    }
    .topic-item:hover {
      border-color: var(--border-accent);
      background: #fffaf5;
      transform: translateY(-2px);
    }
    .topic-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 6px;
      color: var(--text-main);
      display: block;
    }
    .topic-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--text-muted);
    }

    /* 笔触拆解图文交替 */
    .style-study-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      align-items: center;
      margin-bottom: 40px;
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 32px;
      box-shadow: var(--shadow-sm);
    }
    .style-study-card.reverse {
      grid-template-columns: 1fr 1fr;
      direction: rtl;
    }
    .style-study-card.reverse > * {
      direction: ltr;
    }
    .study-img {
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--border-color);
    }
    .study-img img {
      width: 100%;
      height: 320px;
      object-fit: cover;
    }
    .study-content h3 {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--text-main);
    }
    .study-content p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.8;
      margin-bottom: 16px;
    }
    .study-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .study-tag-item {
      font-size: 12px;
      padding: 4px 10px;
      background: #f1f5f9;
      color: #334155;
      border-radius: var(--radius-sm);
    }

    /* 七国画风矩阵 (四栏) */
    .region-style-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .region-style-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 24px;
      box-shadow: var(--shadow-sm);
      transition: all 0.2s;
    }
    .region-style-card:hover {
      border-color: var(--primary);
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
    }
    .region-card-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      background: #eff6ff;
      padding: 3px 8px;
      border-radius: var(--radius-sm);
      margin-bottom: 12px;
    }
    .region-card-title {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .region-card-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* 创作排行榜 (排行列表 UI) */
    .ranking-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }
    .ranking-block {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 24px;
    }
    .ranking-header {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .ranking-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .ranking-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: #f8fafc;
      border-radius: var(--radius-sm);
      border: 1px solid #e2e8f0;
    }
    .rank-num {
      width: 24px;
      height: 24px;
      border-radius: var(--radius-full);
      background: #cbd5e1;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      margin-right: 12px;
    }
    .ranking-list-item:nth-child(1) .rank-num {
      background: #fbbf24;
      color: #78350f;
    }
    .ranking-list-item:nth-child(2) .rank-num {
      background: #94a3b8;
      color: #ffffff;
    }
    .ranking-list-item:nth-child(3) .rank-num {
      background: #d97706;
      color: #ffffff;
    }
    .rank-info {
      flex: 1;
      font-size: 14px;
      font-weight: 600;
    }
    .rank-score {
      font-size: 12px;
      color: var(--primary);
      font-weight: 700;
    }

    /* 创作者提问互动条 (FAQ 变体) */
    .qa-stack {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .qa-item {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 20px 24px;
    }
    .qa-item h4 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--text-main);
    }
    .qa-item p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
    }

    /* 结语行动区 (CTA) */
    .interactive-cta-banner {
      background: linear-gradient(135deg, #0f172a, #1e293b);
      color: #ffffff;
      border-radius: var(--radius-lg);
      padding: 48px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px;
      box-shadow: var(--shadow-xl);
    }
    .cta-text h3 {
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 8px;
    }
    .cta-text p {
      font-size: 14px;
      color: #94a3b8;
      max-width: 600px;
    }
    .btn-action-primary {
      background: var(--primary);
      color: #ffffff;
      font-weight: 700;
      padding: 12px 28px;
      border-radius: var(--radius-md);
      transition: background 0.2s, box-shadow 0.2s;
      white-space: nowrap;
      display: inline-block;
    }
    .btn-action-primary:hover {
      background: var(--primary-hover);
      box-shadow: 0 4px 14px rgba(194, 65, 12, 0.4);
    }

    /* 统一页脚 */
    .site-footer {
      background: #0f172a;
      color: #94a3b8;
      border-top: 1px solid #1e293b;
      padding: 64px 0 32px;
      font-size: 14px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }
    .footer-brand h4 {
      color: #ffffff;
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 16px;
    }
    .footer-brand p {
      line-height: 1.7;
      font-size: 13px;
    }
    .footer-col h5 {
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 18px;
    }
    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .footer-col ul li a {
      color: #94a3b8;
      transition: color 0.2s;
    }
    .footer-col ul li a:hover {
      color: #ffffff;
    }
    .footer-bottom {
      border-top: 1px solid #1e293b;
      padding-top: 24px;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      color: #64748b;
    }

    /* 响应式断点 */
    @media (max-width: 1024px) {
      .region-style-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .creator-hub-grid {
        grid-template-columns: 1fr;
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 768px) {
      .nav-links {
        display: none;
      }
      .soft-hero h1 {
        font-size: 28px;
      }
      .style-study-card,
      .style-study-card.reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        padding: 20px;
      }
      .ranking-grid {
        grid-template-columns: 1fr;
      }
      .interactive-cta-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 20px;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
    }

/* roulang page: index */
:root {
            --primary: #c2410c;
            --primary-hover: #9a3412;
            --primary-light: #ffedd5;
            --secondary: #0f172a;
            --accent: #d97706;
            --bg-main: #f8fafc;
            --bg-card: #ffffff;
            --text-title: #0f172a;
            --text-body: #334155;
            --text-muted: #64748b;
            --border-color: #e2e8f0;
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 16px;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
            --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
            --container-max: 1200px;
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-color: var(--bg-main);
            color: var(--text-body);
            line-height: 1.6;
            font-size: 15px;
            -webkit-font-smoothing: antialiased;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease, opacity 0.2s ease;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .container {
            width: 100%;
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 招投标风格导航 */
        .site-header {
            background-color: #ffffff;
            border-bottom: 2px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .nav-top-bar {
            background-color: #1e293b;
            color: #94a3b8;
            font-size: 12px;
            padding: 6px 0;
        }

        .nav-top-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 0;
        }

        .logo-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo-box {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: #ffffff;
            font-weight: 800;
            font-size: 18px;
            padding: 6px 12px;
            border-radius: var(--radius-sm);
            letter-spacing: 1px;
        }

        .logo-text {
            font-size: 19px;
            font-weight: 700;
            color: var(--text-title);
        }

        .nav-links {
            display: flex;
            align-items: center;
            list-style: none;
            gap: 24px;
        }

        .nav-links a {
            font-weight: 600;
            font-size: 15px;
            color: var(--text-body);
            padding: 6px 4px;
            border-bottom: 2px solid transparent;
        }

        .nav-links a:hover, .nav-links a.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }

        .nav-chips {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .chip-badge {
            background-color: var(--primary-light);
            color: var(--primary);
            font-size: 12px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid rgba(194, 65, 12, 0.2);
        }

        /* 基础 Section */
        .section {
            padding: 56px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .section-alt {
            background-color: #ffffff;
        }

        .section-header {
            margin-bottom: 36px;
            text-align: left;
        }

        .section-tag {
            display: inline-block;
            color: var(--primary);
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }

        .section-title {
            font-size: 26px;
            color: var(--text-title);
            font-weight: 800;
            line-height: 1.3;
            margin-bottom: 12px;
        }

        .section-desc {
            font-size: 15px;
            color: var(--text-muted);
            max-width: 840px;
            line-height: 1.7;
        }

        /* Hero 拼团转化蓝图 */
        .hero-banner {
            position: relative;
            background: linear-gradient(rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.94)), url('/assets/images/ce2861a986f15ed6.webp') center/cover no-repeat;
            color: #ffffff;
            padding: 72px 0 64px 0;
        }

        .hero-inner {
            display: grid;
            grid-template-columns: 1.3fr 0.9fr;
            gap: 40px;
            align-items: center;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(8px);
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 13px;
            margin-bottom: 18px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .hero-title {
            font-size: 34px;
            font-weight: 800;
            line-height: 1.3;
            margin-bottom: 18px;
            color: #ffffff;
        }

        .hero-desc {
            font-size: 16px;
            color: #cbd5e1;
            line-height: 1.75;
            margin-bottom: 28px;
        }

        .group-card {
            background-color: #ffffff;
            color: var(--text-body);
            padding: 28px;
            border-radius: var(--radius-lg);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .group-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }

        .group-status {
            font-size: 13px;
            color: var(--primary);
            font-weight: 700;
            background-color: var(--primary-light);
            padding: 3px 8px;
            border-radius: var(--radius-sm);
        }

        .group-meta {
            font-size: 24px;
            font-weight: 800;
            color: var(--text-title);
        }

        .group-meta span {
            font-size: 14px;
            font-weight: 400;
            color: var(--text-muted);
        }

        .group-progress-wrap {
            margin: 18px 0;
        }

        .group-progress-bar {
            height: 8px;
            background-color: #e2e8f0;
            border-radius: 999px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .group-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            width: 82%;
            border-radius: 999px;
        }

        .group-progress-info {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: var(--text-muted);
        }

        .group-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px;
            padding: 11px 20px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
            text-align: center;
        }

        .btn-primary {
            background-color: var(--primary);
            color: #ffffff;
            flex: 1;
        }

        .btn-primary:hover {
            background-color: var(--primary-hover);
        }

        .btn-outline {
            background-color: transparent;
            color: var(--secondary);
            border: 1px solid var(--border-color);
            flex: 1;
        }

        .btn-outline:hover {
            background-color: #f1f5f9;
        }

        /* 网格卡片系统 */
        .grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .grid-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 24px;
            box-shadow: var(--shadow-sm);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        .card-img-wrap {
            border-radius: var(--radius-sm);
            overflow: hidden;
            margin-bottom: 16px;
            position: relative;
            background-color: #f1f5f9;
            aspect-ratio: 16/10;
        }

        .card-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .card:hover .card-img-wrap img {
            transform: scale(1.04);
        }

        .card-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(15, 23, 42, 0.75);
            color: #ffffff;
            font-size: 11px;
            padding: 3px 8px;
            border-radius: var(--radius-sm);
            backdrop-filter: blur(4px);
        }

        .card-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-title);
            margin-bottom: 8px;
            line-height: 1.4;
        }

        .card-text {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* 步骤组件 */
        .step-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            position: relative;
        }

        .step-item {
            background: #ffffff;
            border: 1px solid var(--border-color);
            padding: 28px 24px;
            border-radius: var(--radius-md);
            position: relative;
        }

        .step-num {
            font-size: 32px;
            font-weight: 900;
            color: var(--primary);
            opacity: 0.8;
            margin-bottom: 12px;
            line-height: 1;
        }

        .step-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-title);
            margin-bottom: 8px;
        }

        .step-desc {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* 多端入口 */
        .client-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }

        .client-box {
            background: #ffffff;
            border: 1px solid var(--border-color);
            padding: 22px 18px;
            border-radius: var(--radius-md);
            text-align: center;
        }

        .client-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-title);
            margin-bottom: 6px;
        }

        .client-spec {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 14px;
        }

        /* 评价墙 */
        .review-card {
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 20px;
        }

        .review-user {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .avatar-stub {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px;
        }

        .review-uname {
            font-weight: 700;
            font-size: 14px;
            color: var(--text-title);
        }

        .review-role {
            font-size: 12px;
            color: var(--text-muted);
        }

        /* 系统要求表格 */
        .spec-table-wrap {
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            overflow: hidden;
        }

        .spec-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
        }

        .spec-table th, .spec-table td {
            padding: 14px 18px;
            border-bottom: 1px solid var(--border-color);
            font-size: 14px;
        }

        .spec-table th {
            background-color: #f8fafc;
            color: var(--text-title);
            font-weight: 700;
            width: 25%;
        }

        .spec-table tr:last-child td, .spec-table tr:last-child th {
            border-bottom: none;
        }

        /* 资讯文章列表 */
        .news-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .news-item {
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 20px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: border-color 0.2s ease;
        }

        .news-item:hover {
            border-color: var(--primary);
        }

        .news-info {
            max-width: 80%;
        }

        .news-head {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-title);
            margin-bottom: 6px;
        }

        .news-desc {
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.5;
        }

        .news-date {
            font-size: 12px;
            color: #94a3b8;
            font-weight: 600;
            white-space: nowrap;
        }

        /* 扩展板块样式 */
        .promise-strip {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .promise-card {
            background: #ffffff;
            border-left: 4px solid var(--primary);
            padding: 16px 20px;
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            border-top: 1px solid var(--border-color);
            border-right: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

        .promise-title {
            font-weight: 700;
            font-size: 15px;
            color: var(--text-title);
            margin-bottom: 4px;
        }

        .promise-desc {
            font-size: 13px;
            color: var(--text-muted);
        }

        .lead-form-box {
            background: #ffffff;
            border: 1px solid var(--border-color);
            padding: 32px;
            border-radius: var(--radius-lg);
            max-width: 680px;
            margin: 0 auto;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px;
        }

        .form-input {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            font-size: 14px;
            color: var(--text-body);
        }

        .form-input:focus {
            outline: 2px solid var(--primary);
            border-color: transparent;
        }

        /* 页脚 */
        .site-footer {
            background-color: #0f172a;
            color: #cbd5e1;
            padding: 56px 0 24px 0;
            font-size: 14px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-brand-title {
            font-size: 18px;
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 12px;
        }

        .footer-desc {
            font-size: 13px;
            line-height: 1.7;
            color: #94a3b8;
            max-width: 320px;
        }

        .footer-col-title {
            font-size: 14px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 16px;
            text-transform: uppercase;
        }

        .footer-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .footer-links a {
            color: #94a3b8;
            font-size: 13px;
        }

        .footer-links a:hover {
            color: #ffffff;
        }

        .footer-bottom {
            padding-top: 24px;
            border-top: 1px solid #1e293b;
            text-align: center;
            font-size: 12px;
            color: #64748b;
        }

        /* 响应式断点 */
        @media (max-width: 1024px) {
            .grid-4, .client-grid, .promise-strip {
                grid-template-columns: repeat(2, 1fr);
            }
            .hero-inner {
                grid-template-columns: 1fr;
            }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            .nav-main {
                flex-direction: column;
                gap: 14px;
                align-items: flex-start;
            }
            .nav-links {
                flex-wrap: wrap;
                gap: 12px 16px;
            }
            .grid-3, .step-row {
                grid-template-columns: 1fr;
            }
            .hero-title {
                font-size: 26px;
            }
            .form-row {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 520px) {
            .grid-4, .client-grid, .promise-strip {
                grid-template-columns: 1fr;
            }
            .hero-banner {
                padding: 40px 0;
            }
            .group-actions {
                flex-direction: column;
            }
            .footer-grid {
                grid-template-columns: 1fr;
            }
        }

/* roulang page: category1 */
:root {
      --primary: #c2410c;
      --primary-hover: #9a3412;
      --primary-light: #fff7ed;
      --accent: #2563eb;
      --text-main: #0f172a;
      --text-muted: #475569;
      --bg-base: #f8fafc;
      --bg-surface: #ffffff;
      --border-color: #e2e8f0;
      --border-accent: #fed7aa;
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --radius-full: 9999px;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-base);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    a {
      text-decoration: none;
      color: inherit;
      transition: color 0.2s ease;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .site-header {
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 50;
      box-shadow: var(--shadow-sm);
    }
    .nav-top-bar {
      background: #0f172a;
      color: #94a3b8;
      font-size: 12px;
      padding: 6px 0;
      border-bottom: 1px solid #1e293b;
    }
    .nav-top-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .nav-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
    }
    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .logo-box {
      background: var(--primary);
      color: #ffffff;
      font-weight: 800;
      font-size: 18px;
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      letter-spacing: 0.5px;
    }
    .logo-text {
      font-size: 17px;
      font-weight: 700;
      color: var(--text-main);
    }
    .nav-links {
      display: flex;
      list-style: none;
      gap: 24px;
      align-items: center;
    }
    .nav-links li a {
      font-weight: 600;
      font-size: 15px;
      color: var(--text-main);
      padding: 6px 0;
      position: relative;
    }
    .nav-links li a:hover,
    .nav-links li a.active {
      color: var(--primary);
    }
    .nav-links li a.active::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--primary);
      border-radius: 2px;
    }
    .nav-chips {
      display: flex;
      gap: 8px;
    }
    .chip-badge {
      background: var(--primary-light);
      border: 1px solid var(--border-accent);
      color: var(--primary);
      padding: 4px 10px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 600;
    }

    /* 内页面包屑 */
    .breadcrumb-bar {
      background: #ffffff;
      border-bottom: 1px solid var(--border-color);
      padding: 12px 0;
      font-size: 13px;
      color: var(--text-muted);
    }
    .breadcrumb-bar a {
      color: var(--text-muted);
    }
    .breadcrumb-bar a:hover {
      color: var(--primary);
    }
    .breadcrumb-separator {
      margin: 0 8px;
      color: #cbd5e1;
    }

    /* 蓝图设计：Hero深色面板，左侧入口右侧faux数据榜单 */
    .cat-hero-panel {
      background: linear-gradient(135deg, #090d16 0%, #1e1b2e 100%);
      color: #ffffff;
      padding: 56px 0;
      border-bottom: 3px solid var(--primary);
    }
    .cat-hero-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 40px;
      align-items: center;
    }
    .cat-hero-tag {
      display: inline-block;
      background: rgba(194, 65, 12, 0.2);
      border: 1px solid rgba(249, 115, 22, 0.4);
      color: #fdba74;
      padding: 4px 12px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 16px;
    }
    .cat-hero-title {
      font-size: 32px;
      font-weight: 800;
      line-height: 1.3;
      margin-bottom: 18px;
      letter-spacing: -0.5px;
    }
    .cat-hero-desc {
      font-size: 15px;
      line-height: 1.7;
      color: #cbd5e1;
      margin-bottom: 24px;
    }
    .cat-hero-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 24px;
    }
    .cat-filter-chip {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: #e2e8f0;
      padding: 6px 14px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
    }
    .cat-filter-chip.active {
      background: var(--primary);
      border-color: var(--primary);
      color: #ffffff;
    }
    .hero-faux-rank {
      background: rgba(15, 23, 42, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-lg);
      padding: 24px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    }
    .faux-rank-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .faux-rank-title {
      font-size: 16px;
      font-weight: 700;
      color: #f8fafc;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .rank-dot {
      width: 8px;
      height: 8px;
      background: #22c55e;
      border-radius: 50%;
      display: inline-block;
    }
    .faux-rank-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .faux-rank-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: var(--radius-sm);
    }
    .rank-num {
      width: 20px;
      font-weight: 700;
      color: #f97316;
    }
    .rank-name {
      flex: 1;
      margin: 0 10px;
      color: #e2e8f0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rank-heat {
      color: #94a3b8;
      font-size: 12px;
    }

    /* 板块结构标准 */
    .cat-section {
      padding: 56px 0;
    }
    .cat-section-alt {
      background: #f1f5f9;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .section-intro-block {
      margin-bottom: 36px;
    }
    .section-badge-title {
      color: var(--primary);
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
      display: inline-block;
    }
    .section-headline {
      font-size: 24px;
      font-weight: 800;
      color: var(--text-main);
      margin-bottom: 10px;
    }
    .section-summary-text {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
      max-width: 840px;
    }

    /* 网格与卡片 */
    .grid-4col {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .grid-3col {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .scroll-card {
      background: var(--bg-surface);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s, box-shadow 0.2s;
      display: flex;
      flex-direction: column;
    }
    .scroll-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }
    .scroll-card-cover {
      position: relative;
      height: 200px;
      overflow: hidden;
      background: #cbd5e1;
    }
    .scroll-card-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .scroll-tag-float {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(15, 23, 42, 0.85);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: var(--radius-sm);
    }
    .scroll-card-body {
      padding: 16px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .scroll-card-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px;
      line-height: 1.4;
      color: var(--text-main);
    }
    .scroll-card-info {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 14px;
      flex: 1;
    }
    .scroll-card-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
      border-top: 1px dashed var(--border-color);
      font-size: 12px;
      color: #64748b;
    }
    .spec-btn {
      color: var(--primary);
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    /* 风格维度横向列 */
    .dimension-block {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 20px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }
    .dimension-icon {
      width: 44px;
      height: 44px;
      background: var(--primary-light);
      border: 1px solid var(--border-accent);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      color: var(--primary);
      flex-shrink: 0;
    }
    .dimension-text h4 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .dimension-text p {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* 互动排行与画册评析 */
    .review-table-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .review-item {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .review-item:last-child {
      border-bottom: none;
    }
    .review-info h5 {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 4px;
    }
    .review-info p {
      font-size: 13px;
      color: var(--text-muted);
    }
    .review-score-tag {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
      padding: 4px 10px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 700;
    }

    /* 归档协议标准箱 */
    .protocol-card {
      background: #ffffff;
      border-left: 4px solid var(--primary);
      border-radius: var(--radius-sm);
      padding: 16px 20px;
      box-shadow: var(--shadow-sm);
      margin-bottom: 14px;
    }
    .protocol-card h4 {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .protocol-card p {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* 页脚 */
    .site-footer {
      background: #0f172a;
      color: #94a3b8;
      padding: 56px 0 24px;
      border-top: 1px solid #1e293b;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 36px;
      margin-bottom: 40px;
    }
    .footer-brand-title {
      font-size: 18px;
      font-weight: 800;
      color: #f8fafc;
      margin-bottom: 12px;
    }
    .footer-desc {
      font-size: 13px;
      line-height: 1.8;
      color: #94a3b8;
    }
    .footer-col-title {
      font-size: 15px;
      font-weight: 700;
      color: #e2e8f0;
      margin-bottom: 16px;
    }
    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .footer-links li a {
      font-size: 13px;
      color: #94a3b8;
    }
    .footer-links li a:hover {
      color: #fdba74;
    }
    .footer-bottom {
      border-top: 1px solid #1e293b;
      padding-top: 24px;
      text-align: center;
      font-size: 12px;
      color: #64748b;
    }

    /* 响应式断点 */
    @media (max-width: 1024px) {
      .grid-4col {
        grid-template-columns: repeat(2, 1fr);
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
      .cat-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }
    }
    @media (max-width: 768px) {
      .nav-top-bar {
        display: none;
      }
      .nav-main {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }
      .nav-links {
        flex-wrap: wrap;
        gap: 12px;
      }
      .grid-3col, .grid-2col {
        grid-template-columns: 1fr;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 520px) {
      .grid-4col {
        grid-template-columns: 1fr;
      }
      .cat-hero-title {
        font-size: 24px;
      }
    }

/* roulang page: category2 */
:root {
      --primary: #c2410c;
      --primary-hover: #9a3412;
      --primary-light: #fff7ed;
      --accent: #2563eb;
      --text-main: #0f172a;
      --text-muted: #475569;
      --bg-base: #f8fafc;
      --bg-surface: #ffffff;
      --border-color: #e2e8f0;
      --border-accent: #fed7aa;
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --radius-full: 9999px;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-base);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    a {
      text-decoration: none;
      color: inherit;
      transition: color 0.2s ease;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    /* 导航公用体系 */
    .site-header {
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 50;
      box-shadow: var(--shadow-sm);
    }
    .nav-top-bar {
      background: #0f172a;
      color: #94a3b8;
      font-size: 12px;
      padding: 6px 0;
      border-bottom: 1px solid #1e293b;
    }
    .nav-top-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .nav-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 20px;
    }
    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .logo-box {
      background: var(--primary);
      color: #fff;
      font-weight: 800;
      font-size: 15px;
      padding: 5px 10px;
      border-radius: var(--radius-sm);
      letter-spacing: 0.5px;
    }
    .logo-text {
      font-size: 18px;
      font-weight: 800;
      color: var(--text-main);
      letter-spacing: -0.5px;
    }
    .nav-links {
      display: flex;
      list-style: none;
      gap: 24px;
      align-items: center;
    }
    .nav-links li a {
      font-weight: 600;
      font-size: 15px;
      color: var(--text-main);
      padding: 6px 0;
      position: relative;
    }
    .nav-links li a:hover,
    .nav-links li a.active {
      color: var(--primary);
    }
    .nav-links li a.active::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--primary);
      border-radius: 2px;
    }
    .nav-chips {
      display: flex;
      gap: 8px;
    }
    .chip-badge {
      background: var(--primary-light);
      border: 1px solid var(--border-accent);
      color: var(--primary);
      padding: 4px 10px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 700;
    }
    /* 专区面包屑条 */
    .breadcrumb-bar {
      background: #f1f5f9;
      border-bottom: 1px solid var(--border-color);
      padding: 10px 0;
      font-size: 13px;
      color: var(--text-muted);
    }
    .breadcrumb-list {
      display: flex;
      align-items: center;
      gap: 8px;
      list-style: none;
    }
    .breadcrumb-list a:hover {
      color: var(--primary);
    }
    .breadcrumb-separator {
      color: #cbd5e1;
    }
    /* 核心 Hero：左文右图 5:7 错位结构 */
    .cat-hero-section {
      background: linear-gradient(135deg, #0b1329 0%, #172554 100%);
      color: #fff;
      padding: 60px 0 70px;
      overflow: hidden;
      position: relative;
    }
    .hero-split-grid {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 48px;
      align-items: center;
    }
    .hero-left-content {
      position: relative;
      z-index: 2;
    }
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(194, 65, 12, 0.2);
      border: 1px solid rgba(253, 186, 116, 0.3);
      color: #fdba74;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: var(--radius-full);
      margin-bottom: 18px;
    }
    .hero-title-main {
      font-size: 34px;
      line-height: 1.25;
      font-weight: 800;
      margin-bottom: 18px;
      letter-spacing: -0.5px;
    }
    .hero-lead-text {
      font-size: 15px;
      line-height: 1.7;
      color: #cbd5e1;
      margin-bottom: 28px;
    }
    .kpi-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      padding: 16px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      margin-bottom: 28px;
    }
    .kpi-item h5 {
      font-size: 24px;
      font-weight: 800;
      color: #fdba74;
      line-height: 1.1;
      margin-bottom: 4px;
    }
    .kpi-item p {
      font-size: 12px;
      color: #94a3b8;
    }
    .hero-btn-group {
      display: flex;
      gap: 14px;
    }
    .btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 11px 22px;
      font-size: 14px;
      font-weight: 700;
      border-radius: var(--radius-md);
      transition: all 0.2s;
      cursor: pointer;
      border: none;
    }
    .btn-primary {
      background: var(--primary);
      color: #ffffff;
    }
    .btn-primary:hover {
      background: var(--primary-hover);
      box-shadow: 0 4px 14px rgba(194, 65, 12, 0.35);
    }
    .btn-secondary {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.2);
    }
    .hero-right-visual {
      position: relative;
    }
    .skew-frame {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      border: 2px solid rgba(255, 255, 255, 0.15);
      transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
      transition: transform 0.4s ease;
    }
    .skew-frame:hover {
      transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    }
    .skew-frame img {
      width: 100%;
      height: 380px;
      object-fit: cover;
    }
    /* Section 基础 */
    .page-section {
      padding: 56px 0;
    }
    .page-section-alt {
      background: #f1f5f9;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .section-head {
      margin-bottom: 32px;
    }
    .section-tag {
      color: var(--primary);
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1px;
      display: inline-block;
      margin-bottom: 6px;
    }
    .section-title-text {
      font-size: 24px;
      font-weight: 800;
      color: var(--text-main);
      margin-bottom: 8px;
    }
    .section-summary-text {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6;
    }
    /* 板块 1: 属性元素矩阵 */
    .element-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .element-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 20px;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .element-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
      border-color: var(--border-accent);
    }
    .element-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .element-icon-tag {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 14px;
    }
    .element-pyro { background: #fee2e2; color: #dc2626; }
    .element-hydro { background: #e0f2fe; color: #0284c7; }
    .element-electro { background: #f3e8ff; color: #9333ea; }
    .element-anemo { background: #ccfbf1; color: #0d9488; }
    .element-geo { background: #fef3c7; color: #d97706; }
    .element-dendro { background: #dcfce7; color: #16a34a; }
    .element-cryo { background: #e0f2fe; color: #0284c7; }
    .element-quantum { background: #f1f5f9; color: #475569; }
    .element-count {
      font-size: 12px;
      color: var(--text-muted);
      background: var(--bg-base);
      padding: 2px 8px;
      border-radius: var(--radius-full);
      font-weight: 600;
    }
    .element-card h4 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .element-card p {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
    }
    /* 板块 2: 高精度人物立绘画廊 */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .gallery-item {
      background: var(--bg-surface);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: all 0.25s ease;
    }
    .gallery-item:hover {
      box-shadow: var(--shadow-xl);
      border-color: var(--border-accent);
      transform: translateY(-4px);
    }
    .gallery-img-box {
      height: 220px;
      overflow: hidden;
      position: relative;
    }
    .gallery-img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .gallery-item:hover .gallery-img-box img {
      transform: scale(1.05);
    }
    .res-pill {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(15, 23, 42, 0.8);
      color: #fdba74;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: var(--radius-sm);
      backdrop-filter: blur(4px);
    }
    .gallery-info {
      padding: 16px;
    }
    .gallery-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 6px;
      color: var(--text-main);
    }
    .gallery-meta {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
    }
    .gallery-desc {
      font-size: 13px;
      color: #64748b;
      line-height: 1.5;
    }
    /* 板块 3: 画幅与技术标准 */
    .spec-flex-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: center;
    }
    .spec-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .spec-row {
      display: flex;
      gap: 16px;
      background: var(--bg-surface);
      padding: 16px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
    }
    .spec-idx {
      width: 32px;
      height: 32px;
      background: var(--primary-light);
      color: var(--primary);
      font-weight: 800;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 13px;
    }
    .spec-content h4 {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .spec-content p {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .spec-preview-panel {
      background: #0f172a;
      border-radius: var(--radius-lg);
      padding: 24px;
      color: #fff;
      border: 1px solid #334155;
    }
    .spec-preview-panel h3 {
      font-size: 18px;
      color: #fdba74;
      margin-bottom: 12px;
      font-weight: 700;
    }
    .spec-code-box {
      background: #020617;
      padding: 14px;
      border-radius: var(--radius-sm);
      font-family: monospace;
      font-size: 12px;
      color: #38bdf8;
      line-height: 1.6;
      margin-bottom: 16px;
    }
    .spec-preview-panel p {
      font-size: 13px;
      color: #94a3b8;
      line-height: 1.6;
    }
    /* 板块 4: 分镜与立绘对比列表 */
    .compare-table-box {
      background: var(--bg-surface);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      overflow-x: auto;
    }
    .styled-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      font-size: 13px;
    }
    .styled-table th {
      background: #f8fafc;
      padding: 14px 18px;
      font-weight: 700;
      color: var(--text-main);
      border-bottom: 1px solid var(--border-color);
    }
    .styled-table td {
      padding: 14px 18px;
      border-bottom: 1px solid var(--border-color);
      color: #475569;
    }
    .styled-table tr:last-child td {
      border-bottom: none;
    }
    .styled-table tr:hover td {
      background: #fdfaf7;
    }
    .tag-status {
      display: inline-block;
      padding: 2px 8px;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 700;
    }
    .tag-complete { background: #dcfce7; color: #15803d; }
    .tag-updating { background: #ffedd5; color: #c2410c; }
    /* 板块 5: 归档问答 FAQ */
    .faq-accordion {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .faq-item-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 18px 22px;
    }
    .faq-q-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .faq-q-title::before {
      content: "Q";
      display: inline-flex;
      width: 22px;
      height: 22px;
      background: var(--primary);
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      border-radius: var(--radius-full);
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .faq-a-desc {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6;
      padding-left: 32px;
    }
    /* 板块 6: 视觉收口 CTA */
    .cta-banner-box {
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      border-radius: var(--radius-lg);
      padding: 40px 32px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .cta-banner-text h3 {
      font-size: 22px;
      font-weight: 800;
      color: #fdba74;
      margin-bottom: 8px;
    }
    .cta-banner-text p {
      font-size: 14px;
      color: #94a3b8;
      max-width: 600px;
      line-height: 1.6;
    }
    /* 页脚复用 */
    .site-footer {
      background: #0f172a;
      color: #94a3b8;
      padding: 54px 0 24px;
      border-top: 1px solid #1e293b;
      margin-top: 40px;
      font-size: 14px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.2fr;
      gap: 40px;
      margin-bottom: 40px;
    }
    .footer-brand-title {
      font-size: 18px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 14px;
    }
    .footer-desc {
      font-size: 13px;
      line-height: 1.7;
      color: #64748b;
    }
    .footer-col-title {
      font-size: 15px;
      font-weight: 700;
      color: #e2e8f0;
      margin-bottom: 16px;
    }
    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .footer-links a {
      color: #94a3b8;
      font-size: 13px;
    }
    .footer-links a:hover {
      color: var(--primary);
    }
    .footer-bottom {
      border-top: 1px solid #1e293b;
      padding-top: 24px;
      text-align: center;
      font-size: 12px;
      color: #64748b;
      line-height: 1.6;
    }
    /* 响应式调整 */
    @media (max-width: 1024px) {
      .hero-split-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      .skew-frame {
        transform: none;
      }
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
      .element-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 768px) {
      .nav-main {
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
      }
      .nav-links {
        flex-wrap: wrap;
        gap: 14px;
      }
      .nav-chips {
        display: none;
      }
      .spec-flex-container {
        grid-template-columns: 1fr;
      }
      .gallery-grid {
        grid-template-columns: 1fr;
      }
      .cta-banner-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
      }
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .hero-title-main {
        font-size: 26px;
      }
    }

/* roulang page: category3 */
:root {
      --primary: #c2410c;
      --primary-hover: #9a3412;
      --primary-light: #fff7ed;
      --secondary: #0f172a;
      --accent: #d97706;
      --bg-base: #f8fafc;
      --bg-surface: #ffffff;
      --text-main: #0f172a;
      --text-muted: #475569;
      --border-color: #e2e8f0;
      --border-accent: #fed7aa;
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --radius-full: 9999px;
      --container-max: 1200px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-base);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    .container {
      width: 100%;
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 20px;
    }

    /* 招投标风格通用导航 */
    .site-header {
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 50;
      box-shadow: var(--shadow-sm);
    }

    .nav-top-bar {
      background: #0f172a;
      color: #94a3b8;
      font-size: 12px;
      padding: 6px 0;
      border-bottom: 1px solid #1e293b;
    }

    .nav-top-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .nav-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 20px;
    }

    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo-box {
      background: var(--primary);
      color: #fff;
      font-size: 15px;
      font-weight: 800;
      padding: 5px 10px;
      border-radius: var(--radius-sm);
      letter-spacing: 0.5px;
    }

    .logo-text {
      font-size: 18px;
      font-weight: 800;
      color: var(--text-main);
      letter-spacing: -0.3px;
    }

    .nav-links {
      display: flex;
      list-style: none;
      gap: 24px;
      align-items: center;
    }

    .nav-links li a {
      font-weight: 600;
      font-size: 15px;
      color: var(--text-main);
      padding: 6px 0;
      position: relative;
      transition: color 0.2s;
    }

    .nav-links li a:hover,
    .nav-links li a.active {
      color: var(--primary);
    }

    .nav-links li a.active::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--primary);
      border-radius: 2px;
    }

    .nav-chips {
      display: flex;
      gap: 10px;
    }

    .chip-badge {
      background: var(--primary-light);
      border: 1px solid var(--border-accent);
      color: var(--primary);
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: var(--radius-full);
      white-space: nowrap;
    }

    /* 内页面包屑条 */
    .breadcrumb-bar {
      background: #ffffff;
      border-bottom: 1px solid var(--border-color);
      padding: 12px 0;
      font-size: 13px;
      color: var(--text-muted);
    }

    .breadcrumb-list {
      display: flex;
      align-items: center;
      gap: 8px;
      list-style: none;
    }

    .breadcrumb-list li a:hover {
      color: var(--primary);
    }

    .breadcrumb-separator {
      color: #cbd5e1;
    }

    /* 视觉系统：大图叙事分类首屏 */
    .narrative-hero {
      position: relative;
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.94) 100%), url('/assets/images/8aaee7d29014b838.webp') center/cover no-repeat;
      color: #ffffff;
      padding: 68px 0 60px;
      border-bottom: 1px solid #1e293b;
    }

    .hero-meta-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(194, 65, 12, 0.25);
      border: 1px solid rgba(251, 146, 60, 0.4);
      color: #fdba74;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: var(--radius-full);
      margin-bottom: 16px;
    }

    .narrative-hero h1 {
      font-size: 32px;
      font-weight: 800;
      line-height: 1.3;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }

    .narrative-hero p {
      font-size: 16px;
      line-height: 1.7;
      color: #cbd5e1;
      max-width: 820px;
      margin-bottom: 28px;
    }

    .hero-action-panel {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }

    .btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 11px 22px;
      font-size: 14px;
      font-weight: 700;
      border-radius: var(--radius-md);
      transition: all 0.2s;
      cursor: pointer;
      border: none;
    }

    .btn-primary {
      background: var(--primary);
      color: #ffffff;
    }

    .btn-primary:hover {
      background: var(--primary-hover);
      box-shadow: 0 4px 14px rgba(194, 65, 12, 0.35);
    }

    .btn-outline-light {
      background: rgba(255, 255, 255, 0.08);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .btn-outline-light:hover {
      background: rgba(255, 255, 255, 0.16);
    }

    /* 板块结构规范 */
    .category-section {
      padding: 56px 0;
    }

    .category-section.alt-bg {
      background: #f1f5f9;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }

    .section-head {
      margin-bottom: 32px;
    }

    .section-head-badge {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--primary);
      letter-spacing: 1px;
      margin-bottom: 6px;
      display: block;
    }

    .section-head h2 {
      font-size: 24px;
      font-weight: 800;
      color: var(--text-main);
      line-height: 1.35;
      margin-bottom: 8px;
    }

    .section-head p {
      font-size: 14px;
      color: var(--text-muted);
      max-width: 760px;
      line-height: 1.6;
    }

    /* 板块 1：主线史诗章节图鉴网格 */
    .chapter-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .chapter-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: transform 0.25s, box-shadow 0.25s;
      display: flex;
      flex-direction: column;
    }

    .chapter-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: #cbd5e1;
    }

    .chapter-card-thumb {
      position: relative;
      width: 100%;
      height: 200px;
      background: #e2e8f0;
      overflow: hidden;
    }

    .chapter-card-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .chapter-card:hover .chapter-card-thumb img {
      transform: scale(1.04);
    }

    .chapter-tag {
      position: absolute;
      top: 12px;
      left: 12px;
      background: rgba(15, 23, 42, 0.85);
      color: #fdba74;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: var(--radius-sm);
      backdrop-filter: blur(4px);
    }

    .chapter-card-body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .chapter-card-title {
      font-size: 17px;
      font-weight: 800;
      color: var(--text-main);
      margin-bottom: 10px;
      line-height: 1.4;
    }

    .chapter-card-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 16px;
      flex: 1;
    }

    .chapter-card-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #64748b;
      padding-top: 12px;
      border-top: 1px solid #f1f5f9;
    }

    /* 板块 2：名场面分镜高帧解析 (宽屏交错布局) */
    .scene-stack {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .scene-item {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }

    .scene-media {
      height: 100%;
      min-height: 280px;
      position: relative;
    }

    .scene-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .scene-content {
      padding: 36px;
    }

    .scene-badge {
      display: inline-block;
      background: #eff6ff;
      color: #2563eb;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: var(--radius-sm);
      margin-bottom: 12px;
    }

    .scene-title {
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 12px;
      color: var(--text-main);
    }

    .scene-desc {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 18px;
    }

    .scene-specs {
      display: flex;
      gap: 16px;
      font-size: 12px;
      color: #64748b;
      background: #f8fafc;
      padding: 10px 14px;
      border-radius: var(--radius-md);
      border: 1px solid #e2e8f0;
    }

    /* 板块 3：剧情事件检索标签栏 */
    .filter-pills-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 24px;
    }

    .filter-pill {
      background: #ffffff;
      border: 1px solid var(--border-color);
      color: var(--text-main);
      padding: 7px 16px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .filter-pill.active,
    .filter-pill:hover {
      background: var(--primary);
      color: #ffffff;
      border-color: var(--primary);
    }

    .archive-compact-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .compact-art-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      padding: 10px;
    }

    .compact-art-thumb {
      height: 140px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      margin-bottom: 10px;
    }

    .compact-art-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .compact-art-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .compact-art-desc {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* 板块 4：原画分辨率与色彩解析指标 */
    .spec-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .spec-stat-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      padding: 24px 20px;
      border-radius: var(--radius-lg);
      text-align: center;
    }

    .stat-number {
      font-size: 32px;
      font-weight: 800;
      color: var(--primary);
      margin-bottom: 6px;
      line-height: 1.1;
    }

    .stat-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 6px;
    }

    .stat-desc {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* 板块 5：世界任务与传说篇章时间线 */
    .timeline-container {
      position: relative;
      padding-left: 28px;
    }

    .timeline-container::before {
      content: "";
      position: absolute;
      left: 7px;
      top: 8px;
      bottom: 8px;
      width: 2px;
      background: #cbd5e1;
    }

    .timeline-node {
      position: relative;
      margin-bottom: 30px;
    }

    .timeline-node:last-child {
      margin-bottom: 0;
    }

    .timeline-marker {
      position: absolute;
      left: -28px;
      top: 4px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid var(--primary);
    }

    .timeline-box {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 18px 22px;
    }

    .timeline-head {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .timeline-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text-main);
    }

    .timeline-tag {
      font-size: 11px;
      color: var(--primary);
      background: var(--primary-light);
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      font-weight: 600;
    }

    .timeline-body {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* 板块 6：剧情原图归档收录与技术规范 */
    .protocol-card-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .protocol-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 28px;
    }

    .protocol-card h3 {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 12px;
      color: var(--text-main);
    }

    .protocol-card p {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 16px;
    }

    .protocol-card ul {
      list-style: none;
      font-size: 13px;
      color: var(--text-main);
    }

    .protocol-card ul li {
      padding: 6px 0;
      border-top: 1px solid #f1f5f9;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .protocol-card ul li::before {
      content: "•";
      color: var(--primary);
      font-weight: bold;
    }

    /* 板块 7：收口索引专区 */
    .cta-banner-strip {
      background: linear-gradient(135deg, #1e293b, #0f172a);
      color: #ffffff;
      padding: 40px;
      border-radius: var(--radius-lg);
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: var(--shadow-md);
    }

    .cta-banner-strip h3 {
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .cta-banner-strip p {
      font-size: 14px;
      color: #94a3b8;
    }

    /* 招投标风格复用页脚 */
    .site-footer {
      background: #0f172a;
      color: #94a3b8;
      padding: 64px 0 32px;
      border-top: 1px solid #1e293b;
      font-size: 14px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }

    .footer-brand-title {
      font-size: 18px;
      font-weight: 800;
      color: #ffffff;
      margin-bottom: 14px;
    }

    .footer-desc {
      font-size: 13px;
      line-height: 1.7;
      color: #64748b;
    }

    .footer-col-title {
      font-size: 14px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 14px;
    }

    .footer-links {
      list-style: none;
    }

    .footer-links li {
      margin-bottom: 8px;
    }

    .footer-links a {
      color: #94a3b8;
      transition: color 0.2s;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

    .footer-bottom {
      border-top: 1px solid #1e293b;
      padding-top: 24px;
      text-align: center;
      font-size: 12px;
      color: #64748b;
    }

    /* 响应式断点控制 */
    @media (max-width: 1024px) {
      .chapter-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .archive-compact-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .spec-stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 768px) {
      .nav-links, .nav-chips {
        display: none;
      }
      .scene-item {
        grid-template-columns: 1fr;
      }
      .scene-media {
        min-height: 200px;
      }
      .scene-content {
        padding: 24px;
      }
      .protocol-card-wrap {
        grid-template-columns: 1fr;
      }
      .cta-banner-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
      }
    }

    @media (max-width: 520px) {
      .chapter-grid {
        grid-template-columns: 1fr;
      }
      .archive-compact-grid {
        grid-template-columns: 1fr;
      }
      .spec-stats-grid {
        grid-template-columns: 1fr;
      }
      .narrative-hero h1 {
        font-size: 24px;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
    }

/* roulang page: category4 */
:root {
      --primary: #c2410c;
      --primary-hover: #9a3412;
      --primary-light: #fff7ed;
      --accent: #2563eb;
      --accent-warm: #d97706;
      --text-main: #0f172a;
      --text-muted: #475569;
      --bg-base: #f8fafc;
      --bg-surface: #ffffff;
      --bg-alt: #f1f5f9;
      --border-color: #e2e8f0;
      --border-accent: #fed7aa;
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --radius-full: 9999px;
      --container-max: 1200px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-base);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; height: auto; display: block; }
    .container {
      width: 100%;
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 20px;
    }
    .site-header {
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 50;
      box-shadow: var(--shadow-sm);
    }
    .nav-top-bar {
      background: #0f172a;
      color: #94a3b8;
      font-size: 12px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .nav-top-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .nav-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 20px;
    }
    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .logo-box {
      background: var(--primary);
      color: #fff;
      font-weight: 800;
      font-size: 15px;
      padding: 4px 10px;
      border-radius: var(--radius-sm);
      letter-spacing: 0.5px;
    }
    .logo-text {
      font-size: 18px;
      font-weight: 800;
      color: var(--text-main);
      letter-spacing: -0.5px;
    }
    .nav-links {
      display: flex;
      list-style: none;
      gap: 24px;
      align-items: center;
    }
    .nav-links li a {
      font-weight: 600;
      font-size: 15px;
      color: var(--text-main);
      padding: 6px 0;
      position: relative;
      transition: color 0.2s;
    }
    .nav-links li a:hover,
    .nav-links li a.active {
      color: var(--primary);
    }
    .nav-links li a.active::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--primary);
      border-radius: 2px;
    }
    .nav-chips {
      display: flex;
      gap: 8px;
    }
    .chip-badge {
      background: var(--primary-light);
      border: 1px solid var(--border-accent);
      color: var(--primary);
      padding: 4px 12px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 700;
    }
    .breadcrumb-nav {
      background: #f8fafc;
      border-bottom: 1px solid var(--border-color);
      padding: 10px 0;
      font-size: 13px;
      color: var(--text-muted);
    }
    .breadcrumb-list {
      display: flex;
      list-style: none;
      gap: 8px;
      align-items: center;
    }
    .breadcrumb-list a:hover { color: var(--primary); }
    .breadcrumb-sep { color: #cbd5e1; }
    .page-hero {
      background: radial-gradient(circle at 80% 20%, rgba(254, 215, 170, 0.35), transparent 50%),
                  linear-gradient(135deg, #ffffff 0%, #fff7ed 60%, #ffedd5 100%);
      border-bottom: 1px solid var(--border-accent);
      padding: 56px 0 50px;
      position: relative;
    }
    .page-hero-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 40px;
      align-items: center;
    }
    .page-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 1px solid var(--border-accent);
      color: var(--primary);
      font-size: 12px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: var(--radius-full);
      margin-bottom: 16px;
      box-shadow: var(--shadow-sm);
    }
    .hero-h1 {
      font-size: 32px;
      font-weight: 800;
      color: var(--text-main);
      line-height: 1.25;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }
    .hero-lead {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 24px;
    }
    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid rgba(194, 65, 12, 0.15);
    }
    .metric-value {
      font-size: 24px;
      font-weight: 800;
      color: var(--primary);
      display: block;
    }
    .metric-label {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
    }
    .hero-visual-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      position: relative;
    }
    .hero-visual-card img {
      width: 100%;
      height: 280px;
      object-fit: cover;
    }
    .hero-visual-body {
      padding: 20px;
    }
    .hero-visual-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--accent);
      background: #eff6ff;
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      display: inline-block;
      margin-bottom: 8px;
    }
    .hero-visual-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 6px;
    }
    .hero-visual-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .section-spacing {
      padding: 56px 0;
    }
    .section-alt {
      background: var(--bg-alt);
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 32px;
      gap: 20px;
    }
    .section-label {
      color: var(--primary);
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.8px;
      margin-bottom: 6px;
      display: block;
    }
    .section-h2 {
      font-size: 24px;
      font-weight: 800;
      color: var(--text-main);
      line-height: 1.3;
    }
    .section-caption {
      font-size: 14px;
      color: var(--text-muted);
      max-width: 680px;
      margin-top: 6px;
    }
    .pill-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
    }
    .filter-pill {
      background: #ffffff;
      border: 1px solid var(--border-color);
      padding: 6px 14px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      transition: all 0.2s;
    }
    .filter-pill.active, .filter-pill:hover {
      background: var(--primary);
      color: #ffffff;
      border-color: var(--primary);
    }
    .filter-counter {
      background: rgba(0,0,0,0.06);
      padding: 1px 6px;
      border-radius: 10px;
      font-size: 11px;
      margin-left: 4px;
    }
    .filter-pill.active .filter-counter {
      background: rgba(255,255,255,0.25);
    }
    .manuscript-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .manuscript-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .manuscript-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }
    .card-thumb {
      height: 180px;
      position: relative;
      overflow: hidden;
      background: #e2e8f0;
    }
    .card-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    .manuscript-card:hover .card-thumb img {
      transform: scale(1.04);
    }
    .card-state-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(15, 23, 42, 0.75);
      color: #ffffff;
      backdrop-filter: blur(4px);
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 4px;
    }
    .card-content {
      padding: 16px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }
    .card-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--text-muted);
    }
    .card-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 8px;
      line-height: 1.4;
    }
    .card-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
      margin-bottom: 14px;
      flex-grow: 1;
    }
    .card-footer-info {
      padding-top: 10px;
      border-top: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
    }
    .card-author {
      font-weight: 600;
      color: var(--text-main);
    }
    .card-layers {
      color: var(--primary);
      font-weight: 600;
    }
    .spec-table-box {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .spec-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      font-size: 13px;
    }
    .spec-table th {
      background: #f8fafc;
      color: var(--text-main);
      font-weight: 700;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-color);
    }
    .spec-table td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-muted);
    }
    .spec-table tr:last-child td {
      border-bottom: none;
    }
    .spec-table tr:hover td {
      background: #fffaf0;
    }
    .table-tag {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      background: var(--primary-light);
      color: var(--primary);
    }
    .stage-timeline-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      position: relative;
    }
    .stage-item {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 20px;
      position: relative;
      box-shadow: var(--shadow-sm);
    }
    .stage-step {
      width: 28px;
      height: 28px;
      background: var(--primary);
      color: #fff;
      font-weight: 800;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      margin-bottom: 14px;
    }
    .stage-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--text-main);
    }
    .stage-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
    }
    .breakdown-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 12px;
    }
    .breakdown-panel {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 24px;
      box-shadow: var(--shadow-sm);
    }
    .breakdown-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .breakdown-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .breakdown-list li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px dashed var(--border-color);
      font-size: 13px;
    }
    .breakdown-list li:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .breakdown-meta {
      color: var(--text-muted);
    }
    .site-footer {
      background: #0f172a;
      color: #94a3b8;
      padding: 48px 0 24px;
      border-top: 1px solid #1e293b;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 36px;
      margin-bottom: 36px;
    }
    .footer-brand-title {
      color: #f8fafc;
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 12px;
    }
    .footer-desc {
      font-size: 13px;
      line-height: 1.7;
      color: #64748b;
    }
    .footer-col-title {
      color: #f1f5f9;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 16px;
    }
    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .footer-links a {
      font-size: 13px;
      color: #94a3b8;
      transition: color 0.2s;
    }
    .footer-links a:hover {
      color: #fdba74;
    }
    .footer-bottom {
      padding-top: 24px;
      border-top: 1px solid #1e293b;
      font-size: 12px;
      color: #64748b;
      line-height: 1.6;
    }
    @media (max-width: 1024px) {
      .manuscript-grid { grid-template-columns: repeat(2, 1fr); }
      .stage-timeline-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .nav-main { flex-direction: column; gap: 12px; align-items: flex-start; }
      .nav-links { flex-wrap: wrap; gap: 14px; }
      .page-hero-grid { grid-template-columns: 1fr; }
      .breakdown-row { grid-template-columns: 1fr; }
      .manuscript-grid { grid-template-columns: 1fr; }
      .stage-timeline-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .hero-h1 { font-size: 26px; }
    }