:root {
    --bg-dark: #07070a;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --neon-cyan: #00f3ff;
    --neon-purple: #bd00ff;
    --neon-pink: #ff0055;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-dark);
    color: #ffffff;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}

/* Canvas Background */
#bgCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

/* Glassmorphism Cards */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 243, 255, 0.1);
    border-color: rgba(0, 243, 255, 0.3);
}

/* Neon Text & Buttons */
.neon-text {
    text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
}

.btn-neon-cyan {
    background: transparent;
    color: var(--neon-cyan);
    border: 1px solid var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
    transition: all 0.3s ease;
}
.btn-neon-cyan:hover {
    background: var(--neon-cyan);
    color: #000;
    box-shadow: 0 0 20px var(--neon-cyan);
}

.btn-neon-purple {
    background: transparent;
    color: var(--neon-purple);
    border: 1px solid var(--neon-purple);
    transition: all 0.3s ease;
}
.btn-neon-purple:hover {
    background: var(--neon-purple);
    color: #fff;
    box-shadow: 0 0 20px var(--neon-purple);
}

.btn-neon-pink {
    background: transparent;
    color: var(--neon-pink);
    border: 1px solid var(--neon-pink);
    transition: all 0.3s ease;
}
.btn-neon-pink:hover {
    background: var(--neon-pink);
    color: #fff;
    box-shadow: 0 0 20px var(--neon-pink);
}

/* Loader & Overlay */
.processing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.processing-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.glass-modal {
    background: var(--glass-bg);
    border: 1px solid var(--neon-cyan);
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
    width: 90%;
    max-width: 400px;
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(0, 243, 255, 0.1);
    border-top: 4px solid var(--neon-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
}

.custom-toast {
    background: rgba(20, 20, 25, 0.95);
    border-left: 4px solid var(--neon-cyan);
    color: #fff;
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    animation: slideInRight 0.4s ease forwards, fadeOut 0.4s ease 4s forwards;
}

@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } }

/* Utilities */
.hidden { display: none !important; }
.fade-in { animation: fadeIn 0.8s ease forwards; }
.slide-up { opacity: 0; transform: translateY(30px); animation: slideUp 0.6s ease forwards; animation-delay: var(--delay); }

@keyframes fadeIn { to { opacity: 1; } }
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }