[x-cloak] { display: none !important; }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #333; }

.masonry-item { width: 100%; margin-bottom: 24px; }
@media (min-width: 640px) { .masonry-item { width: 49%; } }
@media (min-width: 1024px) { .masonry-item { width: 32%; } }
@media (min-width: 1280px) { .masonry-item { width: 24%; } }

.switch { position: relative; display: inline-block; width: 36px; height: 18px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e2e8f0; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
.dark .slider { background-color: #262626; }
input:checked + .slider { background-color: #0066FF; }
input:checked + .slider:before { transform: translateX(18px); }

.thumb-masonry-item { width: 31%; margin-bottom: 12px; }
.edit-masonry-item { width: 31%; margin-bottom: 12px; }

.glass-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.dark .glass-nav {
    background: rgba(10, 10, 10, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.banner-mask {
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.4));
}