/* roulang page: index */
:root {
        --color-primary: #1d4ed8;
        --color-primary-dark: #1e3a8a;
        --color-accent: #06b6d4;
        --color-slate-bg: #f8fafc;
        --color-text-main: #0f172a;
        --color-text-muted: #64748b;
        --radius-card: 1.25rem;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        background-color: var(--color-slate-bg);
        color: var(--color-text-main);
        -webkit-font-smoothing: antialiased;
      }
      .badge-pill {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 9999px;
      }
      .card-elevated {
        background-color: #ffffff;
        border-radius: var(--radius-card);
        border: 1px solid #f1f5f9;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
        transition: all 0.25s ease-in-out;
      }
      .card-elevated:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
        border-color: #cbd5e1;
      }
      .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
      }
      .accordion-item.active .accordion-content {
        max-height: 250px;
      }
      .accordion-item.active .accordion-icon {
        transform: rotate(180deg);
      }