/* roulang page: index */
:root {
        --color-primary: #1D4ED8;
        --color-accent-cyan: #0EA5E9;
        --color-accent-emerald: #10B981;
        --color-bg: #F8FAFC;
        --color-surface: #FFFFFF;
        --color-text-title: #0F172A;
        --color-text-body: #334155;
        --color-text-muted: #64748B;
        --color-border: #E2E8F0;
      }
      body {
        font-family: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
        background-color: var(--color-bg);
        color: var(--color-text-body);
        line-height: 1.6;
        scroll-behavior: smooth;
      }
      .card-shadow {
        box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
      }
      .card-shadow-hover {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .card-shadow-hover:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.1), 0 10px 15px -5px rgba(15, 23, 42, 0.04);
      }
      .custom-circle-progress {
        background: conic-gradient(#1D4ED8 0% 86%, #E2E8F0 86% 100%);
      }