/* Tailwind Directives handled by CDN script in HTML for this setup */

/* Custom Config Inject */
<style>
    /* This block is usually in HTML head or handled by build process. 
       For this setup, Tailwind CDN reads config from script tag in HTML.
       Here we put custom CSS classes. */
</style>

@layer components {
    .glass {
        @apply bg-surface/70 backdrop-blur-xl border border-white/5;
    }
    .input-std {
        @apply w-full bg-bgMain border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-primary transition placeholder-zinc-600;
    }
    .btn-primary {
        @apply bg-primary hover:bg-indigo-500 text-white font-bold transition active:scale-95 shadow-lg shadow-primary/20;
    }
    .nav-item {
        @apply w-full flex items-center gap-3 px-4 py-3 rounded-xl text-zinc-400 hover:text-white hover:bg-white/5 transition font-medium text-sm text-left;
    }
    .nav-item.active {
        @apply bg-primary/10 text-primary border border-primary/10;
    }
    .form-tab {
        @apply flex-1 py-3 text-xs font-bold text-zinc-500 uppercase border-b-2 border-transparent hover:text-zinc-300 transition;
    }
    .form-tab.active {
        @apply text-primary border-primary bg-white/5;
    }
    .alert-box {
        @apply p-4 rounded-xl border flex gap-3 items-start;
    }
}

/* Utilities */
.custom-scroll::-webkit-scrollbar { width: 5px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 10px; }

.fade-enter { animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.sheet-open { transform: translateX(0) !important; }