/* === RESET & VARIABLES === */
:root {
    --color-bg: #050b14;
    --color-text: #f8fafc;
    --glass-bg: rgba(30, 41, 59, 0.4);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-blur: 16px;
    /* Gradients */
    --grad-movies-1: rgba(99, 102, 241, 0.08);
    --grad-movies-2: rgba(168, 85, 247, 0.08);
    --grad-music-1: rgba(236, 72, 153, 0.08);
    --grad-music-2: rgba(168, 85, 247, 0.08);
    --grad-comic-1: rgba(249, 115, 22, 0.08);
    --grad-comic-2: rgba(234, 179, 8, 0.08);
    --grad-game-1: rgba(99, 102, 241, 0.08);
    --grad-game-2: rgba(59, 130, 246, 0.08);
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent;
}

/* === SYSTEM === */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.input-group:focus-within label {
    color: #818cf8;
}

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

/* === SCROLLBAR === */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.5);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

/* === THEMES === */
.bg-theme-movies {
    background-image: radial-gradient(circle at 10% 20%, var(--grad-movies-1) 0%, transparent 40%), radial-gradient(circle at 90% 80%, var(--grad-movies-2) 0%, transparent 40%);
}

.bg-theme-music {
    background-image: radial-gradient(circle at 10% 20%, var(--grad-music-1) 0%, transparent 40%), radial-gradient(circle at 90% 80%, var(--grad-music-2) 0%, transparent 40%);
}

.bg-theme-comic {
    background-image: radial-gradient(circle at 10% 20%, var(--grad-comic-1) 0%, transparent 40%), radial-gradient(circle at 90% 80%, var(--grad-comic-2) 0%, transparent 40%);
}

.bg-theme-game {
    background-image: radial-gradient(circle at 10% 20%, var(--grad-game-1) 0%, transparent 40%), radial-gradient(circle at 90% 80%, var(--grad-game-2) 0%, transparent 40%);
}

.bg-theme-index {
    background-image: radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.15) 0%, transparent 50%);
}