/* roulang page: index */
:root {
            --primary: #1B4D89;
            --brand-blue: #2563EB;
            --sky-accent: #0284C7;
            --canvas: #F8FAFC;
            --surface: #FFFFFF;
            --heading: #0F172A;
            --body: #334155;
            --caption: #64748B;
            --border: #E2E8F0;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
            background-color: var(--canvas);
            color: var(--body);
            line-height: 1.6;
        }
        .tabular-nums {
            font-variant-numeric: tabular-nums;
        }
        .flow-step-active {
            position: relative;
        }
        .flow-step-active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: var(--brand-blue);
            box-shadow: 0 0 8px var(--brand-blue);
        }
        .badge-notch {
            clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 8px, 100% 100%, 0% 100%);
        }
        .code-box {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }

/* roulang page: category1 */
:root {
      --primary: #1B4D89;
      --brand-blue: #2563EB;
      --sky-accent: #0284C7;
      --canvas: #F8FAFC;
      --surface: #FFFFFF;
      --heading: #0F172A;
      --body: #334155;
      --caption: #64748B;
      --border: #E2E8F0;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
      background-color: var(--canvas);
      color: var(--body);
      line-height: 1.6;
    }
    .badge-notch {
      clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 8px, 100% 100%, 0% 100%);
    }
    .status-pulse {
      box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
      animation: pulse-ring 2s infinite;
    }
    @keyframes pulse-ring {
      0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
      70% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
      100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
    }

/* roulang page: category2 */
:root {
      --primary: #1B4D89;
      --brand-blue: #2563EB;
      --sky-accent: #0284C7;
      --canvas: #F8FAFC;
      --surface: #FFFFFF;
      --heading: #0F172A;
      --body: #334155;
      --caption: #64748B;
      --border: #E2E8F0;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
      background-color: var(--canvas);
      color: var(--body);
      line-height: 1.6;
    }
    .badge-notch {
      clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 8px, 100% 100%, 0% 100%);
    }
    .card-shadow {
      box-shadow: 0 4px 20px -4px rgba(37,99,235,0.06), 0 2px 4px -1px rgba(0,0,0,0.04);
    }
    .card-shadow-hover:hover {
      box-shadow: 0 20px 25px -5px rgba(27,77,137,0.12), 0 8px 10px -6px rgba(27,77,137,0.06);
    }