@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* --- Reset & Base --- */
:root {
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

.dark {
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(20, 20, 23, 0.7);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 10px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #334155; 
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* Material Symbols settings */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    user-select: none;
}

/* --- Animations --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 20px 0 rgba(16, 185, 129, 0.2); }
}

.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.animate-slide-up { animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-slide-down { animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s infinite; }

/* --- Glassmorphism Utilities --- */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-panel {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.dark .glass-panel {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Utilities --- */
.text-balance {
    text-wrap: balance;
}

/* Checkerboard for transparent images */
.bg-checkerboard {
    background-color: #f8fafc;
    background-image: 
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%), 
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%), 
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.dark .bg-checkerboard {
    background-color: #09090b;
    background-image: 
        linear-gradient(45deg, #18181b 25%, transparent 25%), 
        linear-gradient(-45deg, #18181b 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #18181b 75%), 
        linear-gradient(-45deg, transparent 75%, #18181b 75%);
}

/* Custom Gradient Text */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right bottom, #10b981, #0ea5e9);
}

/* Input Range Customization (if needed later) */
input[type=range] {
    -webkit-appearance: none; 
    background: transparent; 
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}