/* B"H - BASE */
*, *::before, *::after { box-sizing: border-box; }
html, body { 
    height: 100%; margin: 0; font-family: var(--font-ui); 
    background-color: var(--color-bg-deep); color: var(--color-text-primary); 
    overflow: hidden; -webkit-font-smoothing: antialiased; font-synthesis: none;
    font-size: 16px;
}
body {
     background-color: #000;
     background-image: radial-gradient(var(--neon-cyan) 1px, transparent 1px);
     background-size: 40px 40px;
     background-position: -1px -1px;
     animation: bg-flicker 10s infinite linear;
}
@keyframes bg-flicker {
    0%, 100% { background-color: rgba(2, 4, 10, 0.9); }
    50% { background-color: rgba(10, 12, 20, 0.95); }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleUp { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes appFadeIn { to { opacity: 1; } }

.hidden { display: none !important; } 
.visible { display: flex !important; }
.svg-icon { width: 1.25em; height: 1.25em; fill: currentColor; vertical-align: middle; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { 
    background-color: var(--color-bg-tertiary); 
    border-radius: 10px; 
    border: 3px solid var(--color-bg-primary); 
}
::-webkit-scrollbar-thumb:hover { 
background-color: var(--neon-cyan); }

/* B"H - THEMES */
/* Midnight Blue (Default is similar, but let's make it distinct) */
body.theme-midnight {
    --color-bg-deep: #0a0e14;
    --color-bg-primary: #11151c;
    --color-bg-secondary: #1f2430;
    --color-bg-tertiary: #323847;
    --color-border: #454d5e;
    --neon-cyan: #73d0ff;
    --neon-magenta: #d4bfff;
    --neon-lime: #bae67e;
    background-image: none; /* Cleaner look */
}
 
/* Matrix */
body.theme-matrix {
    --color-bg-deep: #000000;
    --color-bg-primary: #050505;
    --color-bg-secondary: #0d0d0d;
    --color-bg-tertiary: #1a1a1a;
    --color-border: #003300;
    --neon-cyan: #00ff00;
    --neon-magenta: #008f11;
    --neon-lime: #00ff00;
    --color-text-primary: #00ff00;
    --color-text-secondary: #00cc00;
    --color-text-tertiary: #006600;
    background-image: linear-gradient(0deg, transparent 24%, rgba(0, 50, 0, .3) 25%, rgba(0, 50, 0, .3) 26%, transparent 27%, transparent 74%, rgba(0, 50, 0, .3) 75%, rgba(0, 50, 0, .3) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 50, 0, .3) 25%, rgba(0, 50, 0, .3) 26%, transparent 27%, transparent 74%, rgba(0, 50, 0, .3) 75%, rgba(0, 50, 0, .3) 76%, transparent 77%, transparent);
    background-size: 30px 30px;
}