/* roulang page: index */
:root {
            --bg-base: #0F141C;
            --bg-card: #18202C;
            --color-primary: #10B981;
            --color-alert: #EF4444;
            --color-warning: #F59E0B;
            --text-main: #FFFFFF;
            --text-muted: #94A3B8;
            --border-line: rgba(255, 255, 255, 0.08);
            --border-highlight: rgba(16, 185, 129, 0.3);
        }

        body {
            background-color: var(--bg-base);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            overflow-x: hidden;
        }

        .custom-card-border {
            border: 1px solid var(--border-line);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .custom-card-border:hover {
            border-color: var(--border-highlight);
            transform: translateY(-4px);
            box-shadow: 0 12px 28px -8px rgba(16, 185, 129, 0.15);
        }

        .pulse-dot {
            animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes pulse-ring {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.4;
                transform: scale(1.2);
            }
        }

        .ticker-wrap {
            overflow: hidden;
            white-space: nowrap;
        }

        .ticker-content {
            display: inline-flex;
            animation: ticker 35s linear infinite;
        }

        .ticker-wrap:hover .ticker-content {
            animation-play-state: paused;
        }

        @keyframes ticker {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-50%, 0, 0); }
        }

        .slide-fade {
            transition: opacity 0.8s ease-in-out;
        }