/* roulang page: index */
:root {
            --primary: #4f46e5;
            --primary-hover: #4338ca;
            --accent: #10b981;
            --surface-light: #f8fafc;
            --surface-dark: #0f172a;
            --border-color: rgba(226, 232, 240, 0.8);
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: #1e293b;
            background-color: #ffffff;
            -webkit-font-smoothing: antialiased;
        }
        .text-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #10b981 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .badge-pulse {
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
            animation: pulse-ring 2s infinite cubic-bezier(0.66, 0, 0, 1);
        }
        @keyframes pulse-ring {
            0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
            70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
            100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }
        .drawer-mask {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .drawer-content {
            transition: transform 0.3s ease-in-out;
        }