/* roulang page: index */
:root {
            --brand-primary: #0EA5E9;
            --brand-accent: #10B981;
            --bg-surface: #F8FAFC;
            --bg-dark: #0B0F17;
            --bg-dark-card: #111827;
            --border-light: #E2E8F0;
            --border-dark: #1E293B;
            --text-primary: #0F172A;
            --text-secondary: #475569;
            --text-dark-muted: #94A3B8;
        }

        html {
            scroll-behavior: smooth;
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }

        /* 自定义微网格背景 */
        .bg-grid-pattern {
            background-color: #F8FAFC;
            background-image: radial-gradient(rgba(14, 165, 233, 0.08) 1px, transparent 0);
            background-size: 24px 24px;
        }

        .bg-grid-dark {
            background-color: #0B0F17;
            background-image: radial-gradient(rgba(14, 165, 233, 0.12) 1px, transparent 0);
            background-size: 28px 28px;
        }

        /* 状态与交互统一增强 */
        .btn-glow {
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-glow:hover {
            box-shadow: 0 4px 20px -2px rgba(14, 165, 233, 0.4);
            transform: translateY(-1px);
        }

        .card-interactive {
            transition: all 0.25s ease;
        }
        .card-interactive:hover {
            border-color: #0EA5E9;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
        }

        .card-interactive-dark:hover {
            border-color: #0EA5E9;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.15);
        }