/* roulang page: index */
:root {
            --color-bg-base: #F8FAFC;
            --color-surface: #FFFFFF;
            --color-primary-dark: #0F172A;
            --color-slate-dark: #1E293B;
            --color-neon-emerald: #10B981;
            --color-neon-emerald-dark: #059669;
            --color-sport-orange: #F97316;
            --color-border: #E2E8F0;
        }
        html {
            scroll-behavior: smooth;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }
        .font-mono-num {
            font-family: "DIN Alternate", Consolas, "Courier New", monospace;
        }
        .coupon-mask {
            background-image: radial-gradient(circle at 0 50%, transparent 12px, #FFFFFF 13px), radial-gradient(circle at 100% 50%, transparent 12px, #FFFFFF 13px);
        }
        .bg-grid-pattern {
            background-size: 32px 32px;
            background-image: linear-gradient(to right, rgba(226, 232, 240, 0.45) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(226, 232, 240, 0.45) 1px, transparent 1px);
        }
        .radar-scan {
            background: conic-gradient(from 0deg, rgba(16, 185, 129, 0.25) 0deg, transparent 60deg, transparent 360deg);
            animation: radarRotate 4s linear infinite;
        }
        @keyframes radarRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }