/* public/assets/css/main.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* === Scrollbar Styling (Precision Modernism) === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0e0e0e; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #494847; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* === Glassmorphism & Depth Utilities === */
.glass-panel, .glass-card, .glass-effect, .glass-header {
    background: rgba(38, 38, 38, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ghost-shadow {
    box-shadow: 0 24px 48px -12px rgba(255, 255, 255, 0.04);
}

.ghost-border {
    border: 1px solid rgba(73, 72, 71, 0.15);
}

/* === Glows, Accents & Textures === */
.success-glow { box-shadow: 0 0 60px -15px rgba(204, 255, 0, 0.15); }
.red-glow { filter: drop-shadow(0 0 15px rgba(213, 61, 24, 0.3)); }
.primary-gradient { background: linear-gradient(135deg, #f3ffca 0%, #cafd00 100%); }

.glitch-text {
    text-shadow: 2px 0 #ccff00, -2px 0 #4a5e00;
}

.grain-overlay {
    background-image: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.03;
    pointer-events: none;
}