:root {
    --bg-deep: #020205;
    --bg-panel: #0a0a0f;
    --bg-aside: rgba(0, 0, 0, 0.6);
    --accent: #3b82f6;
    --text-main: #f1f5f9;
    --text-muted: #64748b;
    --glass: rgba(255, 255, 255, 0.02);
    --border: rgba(255, 255, 255, 0.06);
    --card-bg: rgba(255, 255, 255, 0.04);
    --preview-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
    --sidebar-bg: rgba(0, 0, 0, 0.7);
}
body.light-mode {
    --bg-deep: #f1f5f9;
    --bg-panel: #ffffff;
    --bg-aside: rgba(248, 250, 252, 0.9);
    --accent: #2563eb;
    --text-main: #0f172a;
    --text-muted: #475569;
    --glass: rgba(30, 41, 59, 0.04);
    --border: rgba(30, 41, 59, 0.1);
    --card-bg: #ffffff;
    --preview-shadow: 0 15px 40px rgba(37, 99, 235, 0.12);
    --sidebar-bg: #f8fafc;
}
body {
    background-color: var(--bg-deep);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    margin: 0;
    overflow: hidden;
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s ease;
}
.glass {
    background: var(--glass);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    transition: all 0.4s ease;
}
#monitor-wrapper {
    background-color: var(--bg-panel);
    border: 2px solid var(--border);
    box-shadow: var(--preview-shadow);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 20px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }
#verse-grid {
    background: var(--glass);
    border-radius: 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    transition: background 0.5s ease;
}
.animate-in {
    animation: slideUpUI 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideUpUI {
    from { opacity: 0; transform: translateY(20px); filter: blur(10px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.animate-text { 
    animation-duration: 0.9s; 
    animation-fill-mode: forwards; 
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); 
}
@keyframes animFade { from { opacity: 0; } to { opacity: 1; } }
.anim-fade { animation-name: animFade; }
@keyframes animBlur { from { opacity: 0; filter: blur(30px); transform: scale(1.05); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
.anim-blur { animation-name: animBlur; }
@keyframes slideUp { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); } }
.anim-slide-up { animation-name: slideUp; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: translateY(0); } }
.anim-slide-down { animation-name: slideDown; }
@keyframes slideLeft { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }
.anim-slide-left { animation-name: slideLeft; }
@keyframes slideRight { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } }
.anim-slide-right { animation-name: slideRight; }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.anim-zoom { animation-name: zoomIn; }
@keyframes zoomOut { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } }
.anim-zoom-out { animation-name: zoomOut; }
@keyframes bounceIn { 
    0% { opacity: 0; transform: scale(0.5); } 
    50% { opacity: 1; transform: scale(1.05); } 
    70% { transform: scale(0.95); } 
    100% { transform: scale(1); } 
}
.anim-bounce { animation-name: bounceIn; }
@keyframes flipUp { 
    from { opacity: 0; transform: perspective(1000px) rotateX(90deg); } 
    to { opacity: 1; transform: perspective(1000px) rotateX(0deg); } 
}
.anim-flip-up { animation-name: flipUp; }
.bg-drift {
    background: linear-gradient(-45deg, #020205, #0a0f24, #05021a, #1a0510);
    background-size: 400% 400%;
    animation: procedural-drift 20s ease infinite;
}
@keyframes procedural-drift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.bg-aurora {
    background-color: #020205;
    background-image: 
        radial-gradient(ellipse at top left, rgba(20, 255, 150, 0.15), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(0, 150, 255, 0.15), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.1), transparent 50%);
    background-size: 200% 200%;
    animation: procedural-aurora 15s ease-in-out infinite alternate;
}
@keyframes procedural-aurora {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}
.bg-stars {
    background-color: #000;
    background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 4px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 3px),
        radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 4px);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
    animation: procedural-stars 60s linear infinite;
}
@keyframes procedural-stars {
    from { background-position: 0 0, 40px 60px, 130px 270px; }
    to { background-position: 550px 550px, 390px 410px, 380px 520px; }
}
.bg-stage {
    background-color: #000;
    background-image: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.2) 0%, transparent 60%);
    animation: procedural-stage 6s ease-in-out infinite alternate;
}
@keyframes procedural-stage {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.1); }
}
.bg-mesh {
    background-color: #050505;
    background-image: 
        radial-gradient(at 40% 20%, hsla(28,100%,74%,0.15) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(189,100%,56%,0.15) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(355,100%,93%,0.15) 0px, transparent 50%);
    animation: procedural-mesh 10s ease-in-out infinite alternate;
}
@keyframes procedural-mesh {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(90deg); }
}

/* ================================================== */
/* NOVOS FUNDOS ANIMADOS (ATUALIZAÇÃO)                */
/* ================================================== */

/* 1. Efeito VHS/Cinematic idêntico ao vídeo 01.mp4 */
.bg-vhs-flare {
    background-color: #030303;
    background-image: 
        radial-gradient(ellipse 150% 30% at -20% 50%, rgba(220, 38, 38, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse 150% 20% at 120% 40%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, transparent 2px, transparent 4px);
    background-size: 100% 100%, 100% 100%, 100% 4px;
    animation: procedural-vhs 10s ease-in-out infinite alternate;
}
@keyframes procedural-vhs {
    0% { background-position: 0% 50%, 100% 40%, 0 0; filter: contrast(1.1) brightness(0.9); }
    50% { filter: contrast(1.3) brightness(1.1); }
    100% { background-position: 100% 50%, 0% 40%, 0 100px; filter: contrast(1.1) brightness(1); }
}

/* 2. Efeito Espírito Santo (Fogo/Dourado) */
.bg-holy-spirit {
    background-color: #0a0300;
    background-image: 
        radial-gradient(circle at 50% 100%, rgba(234, 88, 12, 0.4) 0%, transparent 60%),
        radial-gradient(circle at 50% 120%, rgba(250, 204, 21, 0.3) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(153, 27, 27, 0.15) 0%, transparent 100%);
    animation: procedural-fire 6s ease-in-out infinite alternate;
}
@keyframes procedural-fire {
    0% { opacity: 0.8; transform: scale(1); filter: contrast(1.1); }
    100% { opacity: 1; transform: scale(1.05); filter: contrast(1.3); }
}

/* 3. Efeito Plasma Worship (Neon) */
.bg-plasma {
    background-color: #030014;
    background-image: 
        radial-gradient(ellipse at 10% 90%, rgba(79, 70, 229, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 10%, rgba(236, 72, 153, 0.4) 0%, transparent 50%);
    animation: procedural-plasma 12s ease-in-out infinite alternate;
}
@keyframes procedural-plasma {
    0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
    100% { transform: scale(1.1) rotate(5deg); opacity: 1; }
}

aside { background-color: var(--bg-aside) !important; }
header { background-color: var(--bg-panel) !important; border-bottom: 1px solid var(--border) !important; }
nav { background-color: var(--sidebar-bg) !important; border-right: 1px solid var(--border) !important; }
.nav-btn.active {
    background-color: var(--accent);
    color: white !important;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}
input, textarea, select {
    background: var(--glass) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}