@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded&display=block');

.glass-panel {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.glass-panel-high {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 40px -10px rgba(70, 72, 212, 0.15);
}

.glass-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}

.bg-glow {
    position: absolute;
    filter: blur(120px);
    opacity: 0.6;
    z-index: -1;
    border-radius: 50%;
}

.glow-sphere {
    position: absolute;
    filter: blur(80px);
    opacity: 0.35;
    border-radius: 50%;
    z-index: 0;
}

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

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
    filter: url(#liquid-glass);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-btn:hover .material-symbols-outlined,
button:hover .material-symbols-outlined {
    filter: url(#liquid-glass) brightness(1.25) drop-shadow(0 0 8px currentColor);
    transform: scale(1.15) rotate(2deg);
}

.btn-hover-effect {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hover-effect:active {
    transform: scale(0.96);
}

.gauge-svg {
    transform: rotate(-90deg);
}

.gauge-path {
    transition: stroke-dashoffset 0.2s ease-out;
}

.speed-needle {
    transform-origin: 80px 80px;
    transition: transform 0.2s ease-out;
}