/* roulang page: index */
:root {
      --color-primary: #2563eb;
      --color-primary-light: #38bdf8;
      --color-primary-dark: #0284c7;
      --color-accent: #f59e0b;
      --color-bg-light: #f8fafc;
      --color-card-bg: #ffffff;
      --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    body {
      font-family: var(--font-stack);
      background: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 100%);
      color: #334155;
      -webkit-font-smoothing: antialiased;
    }
    .hero-bg {
      background-image: radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.12) 0%, transparent 40%),
                        radial-gradient(circle at 90% 70%, rgba(37, 99, 235, 0.08) 0%, transparent 50%);
    }
    .custom-card-shadow {
      box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.08);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .custom-card-shadow:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 35px -10px rgba(37, 99, 235, 0.15);
    }
    .badge-pulse {
      animation: badgePulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    }
    @keyframes badgePulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.85; transform: scale(1.03); }
    }
    .nav-scrolled #nav-brand-row {
      display: none;
    }
    .nav-scrolled #nav-container {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      background-color: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
      border-bottom: 1px solid #e0f2fe;
    }

/* roulang page: category1 */
:root {
      --color-primary: #2563eb;
      --color-primary-light: #38bdf8;
      --color-primary-dark: #0284c7;
      --color-accent: #f59e0b;
      --color-bg-light: #f8fafc;
      --color-card-bg: #ffffff;
      --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    body {
      font-family: var(--font-stack);
      background: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 100%);
      color: #334155;
      -webkit-font-smoothing: antialiased;
    }
    .custom-card-shadow {
      box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.08);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .custom-card-shadow:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 35px -10px rgba(37, 99, 235, 0.15);
    }
    .badge-pulse {
      animation: badgePulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    }
    @keyframes badgePulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    .nav-scrolled #nav-brand-row {
      display: none;
    }
    .nav-scrolled #nav-container {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      background-color: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
      border-bottom: 1px solid #e0f2fe;
    }
    .category-hero-pattern {
      background-image: radial-gradient(#bae6fd 1px, transparent 1px);
      background-size: 24px 24px;
    }