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

/* Animated gradient background */
.gradient-bg {
    background: linear-gradient(-45deg, #e8f5e9, #f1f8e9, #e0f2f1, #f3e5f5, #e8eaf6);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Glass utilities */
.glass {
    background: rgba(247, 251, 240, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-strong {
    background: rgba(247, 251, 240, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.glass-card {
    background: rgba(247, 251, 240, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(24, 29, 23, 0.06);
    transition: all 0.3s ease;
}

.glass-card:hover {
    background: rgba(247, 251, 240, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

.glass-habit {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(24, 29, 23, 0.05);
    transition: all 0.3s ease;
}

.glass-habit:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-4px);
}

.glass-input {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.glass-input:focus {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.glass-entry {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.editorial-shadow {
    box-shadow: 0 20px 40px -10px rgba(24, 29, 23, 0.06);
}

.glass-modal {
    background-color: rgba(247, 251, 240, 0.35);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.ambient-shadow {
    box-shadow: 0 0 40px rgba(24, 29, 23, 0.06);
}