/* CSS Custom: AI STYLE 2026 */
        :root {
            --glass-bg: rgba(20, 25, 35, 0.45);
            --glass-border: rgba(255, 255, 255, 0.08);
            --neon-cyan: #00F0FF;
            --neon-purple: #7000FF;
            --yt-red: #FF0000;
        }

        body {
            background-color: #050816 !important;
            color: #ffffff !important;
            overflow-x: hidden;
            background-image: 
                radial-gradient(circle at 15% 50%, rgba(255, 0, 0, 0.05), transparent 30%),
                radial-gradient(circle at 85% 30%, rgba(0, 240, 255, 0.1), transparent 30%);
            background-attachment: fixed;
        }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
        ::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.3); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(0,240,255,0.6); }

        .glass-panel {
            background: var(--glass-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--glass-border);
            border-radius: 1rem;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
        }

        .glass-input {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            transition: all 0.3s ease;
        }
        .glass-input:focus {
            outline: none;
            border-color: var(--neon-cyan);
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
        }
        .glass-input[readonly] { background: rgba(255, 255, 255, 0.03); color: #aaa; }

        .btn-neon {
            background: linear-gradient(135deg, var(--neon-purple) 0%, #4a00e0 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        .btn-neon::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-purple) 100%);
            opacity: 0; z-index: -1; transition: opacity 0.3s ease;
        }
        .btn-neon:hover::before { opacity: 1; }
        .btn-neon:hover { box-shadow: 0 0 20px rgba(112, 0, 255, 0.45); transform: translateY(-2px); }
        
        .btn-yt {
            background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
        }
        .btn-yt::before {
            background: linear-gradient(135deg, #FF3333 0%, #990000 100%);
        }
        .btn-yt:hover { box-shadow: 0 0 20px rgba(255, 0, 0, 0.45); }

        .btn-neon:disabled { 
            opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; 
            background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1);
        }
        .btn-neon:disabled::before { display: none; }

        .fade-in { animation: fadeIn 0.8s ease-out forwards; }
        .slide-up { animation: slideUp 0.6s ease-out forwards; }
        
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        .scale-in { animation: scaleIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes scaleIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

        .pulse-glow { animation: pulseGlow 2.3s infinite; }
        @keyframes pulseGlow {
            0% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.25); }
            50% { box-shadow: 0 0 25px rgba(0, 240, 255, 0.7); }
            100% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.25); }
        }

        .progress-bar-container {
            background: rgba(0, 0, 0, 0.5); border-radius: 999px; overflow: hidden;
            height: 10px; border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .progress-bar-fill {
            height: 100%; background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan));
            width: 0%; transition: width 0.3s ease; box-shadow: 0 0 10px var(--neon-cyan);
        }

        #video-canvas {
            width: 100%; height: 100%; object-fit: cover; border-radius: 1.5rem;
            transform: translateZ(0); backface-visibility: hidden;
        }
        .render-overlay { background: rgba(5, 7, 10, 0.95); backdrop-filter: blur(10px); }

        .character-card {
            background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05); transition: all 0.3s ease;
        }
        .character-card:hover { border-color: rgba(0,240,255,0.3); box-shadow: 0 0 15px rgba(0,240,255,0.1); }
        
        .char-img-preview {
            width: 60px; height: 60px; border-radius: 50%; object-fit: cover; 
            border: 2px solid var(--neon-purple); background: #111;
        }

        .voice-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.2s ease;
        }
        .voice-card:hover {
            border-color: rgba(0, 240, 255, 0.3);
            background: rgba(0, 240, 255, 0.05);
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }
        .voice-card.active {
            border-color: var(--neon-cyan);
            background: rgba(0, 240, 255, 0.1);
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
        }
        
        .filter-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #ccc;
            transition: all 0.2s;
        }
        .filter-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
        .filter-btn.active { background: var(--neon-cyan); color: #000; border-color: var(--neon-cyan); font-weight: bold; }

        .toast-enter { animation: toastEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .toast-leave { animation: toastLeave 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes toastEnter { 0% { opacity: 0; transform: translateY(-20px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes toastLeave { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-20px) scale(0.9); } }
        
        @property --spin-angle {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }
        @keyframes spin-border-anim {
            0% { --spin-angle: 0deg; }
            100% { --spin-angle: 360deg; }
        }
        .capcut-border-active::after {
            content: '';
            position: absolute;
            inset: 0; 
            border-radius: 1.25rem;
            border: 4px solid transparent;
            background: conic-gradient(from var(--spin-angle), transparent 50%, var(--neon-cyan) 80%, var(--neon-purple) 100%) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
            animation: spin-border-anim 1.5s linear infinite;
            z-index: 50; 
            pointer-events: none;
        }