/* Shared custom styles (previously inlined in base.html) */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 9999px; }
.dark ::-webkit-scrollbar-thumb { background: #3f3f46; }

.glass {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.dark .glass {
    background: rgba(24, 24, 27, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.btn-primary {
    background: #FFE100;
    color: #18181b;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary:hover {
    background: #D4B800;
    box-shadow: 0 8px 24px -8px rgba(212, 184, 0, 0.4);
}
.btn-primary:active {
    transform: scale(0.98) translateY(1px);
}

.pattern-dots {
    background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px);
    background-size: 24px 24px;
}
.dark .pattern-dots {
    background-image: radial-gradient(circle, #27272a 1px, transparent 1px);
}

.nav-link {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover { transform: translateX(2px); }
.nav-link.active {
    background: rgba(255, 225, 0, 0.1);
    color: #AA9300;
}
.dark .nav-link.active {
    background: rgba(255, 225, 0, 0.12);
    color: #FFE100;
}

.card-surface {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dark .card-surface {
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}
.card-surface:hover {
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
}
.dark .card-surface:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.diffusion-shadow {
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
}