@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=VT323&display=swap');

:root {
    /* Cores da Fachada */
    --pink: #ff6b81;
    --pink-light: #ffe6ea;

    /* Cores do Sistema Oculto (Unified Amber) */
    --amber: #ffb000;
    --amber-dim: #b8860b;
    --bg-crt: #000;
}

body, html {
    margin: 0; padding: 0; height: 100%; width: 100%;
    overflow: hidden; font-family: 'Arial', sans-serif;
    background: radial-gradient(circle, var(--pink-light) 0%, #ffc0cb 100%);
    transition: background 2s ease-in-out;
}

body.dark-mode { background: #000 !important; }

/* --- GLOBAL CRT EFFECTS & TYPOGRAPHY --- */
.scanlines {
    position: fixed; inset: 0; pointer-events: none; z-index: 999;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.4) 50%);
    background-size: 100% 4px; display: none;
}
.crt-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 998;
    background: radial-gradient(circle, rgba(255,176,0,0.05) 0%, rgba(0,0,0,0.6) 90%);
    animation: flicker 0.15s infinite; display: none;
}

#hidden-system, .tool-layer, #wav2png-layer {
    font-family: 'VT323', monospace;
    color: var(--amber);
    text-shadow: 0 0 5px var(--amber);
    text-transform: uppercase;
}

/* --- CLASSE MESTRA PARA JANELAS UNIFICADAS --- */
.unified-window {
    border: 2px solid var(--amber);
    padding: 2rem;
    background-color: rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 20px var(--amber), inset 0 0 20px var(--amber-dim);
    position: relative;
}

@keyframes flicker { 0% { opacity: 0.97; } 5% { opacity: 0.95; } 10% { opacity: 0.9; } 50% { opacity: 0.95; } 100% { opacity: 0.95; } }
@keyframes blinker { 50% { opacity: 0; } }