/* roulang page: index */
:root {
      --primary-dark: #1E293B;
      --primary-indigo: #4F46E5;
      --accent-purple: #7C3AED;
      --accent-cyan: #06B6D4;
      --bg-slate: #F8FAFC;
      --bg-card: #FFFFFF;
      --border-color: #E2E8F0;
      --text-main: #0F172A;
      --text-muted: #64748B;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-slate);
      color: #334155;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    .custom-shadow {
      box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    }
    .hover-lift {
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hover-lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 30px -6px rgba(15, 23, 42, 0.12);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 10%, rgba(79, 70, 229, 0.08) 0%, rgba(248, 250, 252, 0) 70%);
    }
    .timer-badge {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: .6; }
    }
    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease-in-out;
    }
    .accordion-content.active {
      max-height: 300px;
    }

/* roulang page: category2 */
:root {
      --primary-dark: #1E293B;
      --primary-indigo: #4F46E5;
      --accent-purple: #7C3AED;
      --accent-cyan: #06B6D4;
      --bg-slate: #F8FAFC;
      --bg-card: #FFFFFF;
      --border-color: #E2E8F0;
      --text-main: #0F172A;
      --text-muted: #64748B;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-slate);
      color: #334155;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    .custom-shadow {
      box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 10%, rgba(79, 70, 229, 0.08) 0%, rgba(248, 250, 252, 0) 70%);
    }
    .timer-badge {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    .scenario-card-hover {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scenario-card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.1);
      border-color: #CBD5E1;
    }

/* roulang page: category1 */
:root {
        --primary-dark: #1E293B;
        --primary-indigo: #4F46E5;
        --accent-purple: #7C3AED;
        --accent-cyan: #06B6D4;
        --bg-slate: #F8FAFC;
        --bg-card: #FFFFFF;
        --border-color: #E2E8F0;
        --text-main: #0F172A;
        --text-muted: #64748B;
    }
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        background-color: var(--bg-slate);
        color: #334155;
        line-height: 1.75;
        -webkit-font-smoothing: antialiased;
    }
    .custom-shadow {
        box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    }
    .hero-glow {
        background: radial-gradient(circle at 50% 10%, rgba(79, 70, 229, 0.08) 0%, rgba(248, 250, 252, 0) 70%);
    }
    .timer-badge {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    .badge-chip {
        transition: all 0.2s ease;
    }
    .badge-chip.active {
        background-color: #4F46E5;
        color: #FFFFFF;
        border-color: #4F46E5;
    }
    .article-card {
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .article-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.08);
        border-color: rgba(79, 70, 229, 0.35);
    }
    .faq-content {
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }