/* roulang page: index */
:root {
            --color-primary: #00D084;
            --color-primary-dark: #059669;
            --color-accent: #FF6B00;
            --bg-base: #0B0F19;
            --bg-card: #131B2E;
            --border-line: #1F293D;
            --text-main: #FFFFFF;
            --text-muted: #94A3B8;
        }
        body {
            font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: var(--bg-base);
            color: var(--text-main);
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .custom-card {
            background-color: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }
        .custom-card:hover {
            transform: translateY(-4px);
            border-color: rgba(0, 208, 132, 0.35);
            box-shadow: 0 10px 25px -5px rgba(0, 208, 132, 0.15);
        }
        .burst-badge {
            background: linear-gradient(135deg, #FF6B00 0%, #FF8A00 100%);
            clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
        }
        .pulse-dot {
            box-shadow: 0 0 0 0 rgba(0, 208, 132, 0.7);
            animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse-ring {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 208, 132, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(0, 208, 132, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 208, 132, 0); }
        }