body { 
    background-color: #050505; 
    font-family: 'Poppins', sans-serif; 
    color: white; 
    overflow-x: hidden; 
}

.font-mono { 
    font-family: 'JetBrains Mono', monospace; 
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


@keyframes slideInLeft {
    0% { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.boot-sidebar {
    animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInDown {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.boot-topbar {
    opacity: 0;
    animation: slideInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

@keyframes popIn {
    0% { transform: scale(0.9) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.boot-item {
    opacity: 0;
    animation: popIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (max-width: 1024px) {
    .boot-item {
        animation-delay: 0ms !important;
    }
}

.delay-1 { animation-delay: 0.4s; }
.delay-2 { animation-delay: 0.5s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.7s; }
.delay-5 { animation-delay: 0.8s; }
.delay-6 { animation-delay: 0.9s; }
.delay-7 { animation-delay: 1s; }
.delay-8 { animation-delay: 1.1s; }
.delay-9 { animation-delay: 1.2s; }

.float-anim { animation: float 6s ease-in-out infinite; }
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.file-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.file-card:hover {
    background: rgba(117, 70, 232, 0.05);
    border-color: rgba(117, 70, 232, 0.4);
    box-shadow: 0 0 10px rgba(117, 70, 232, 0.15); 
    transform: translateY(-5px); 
}
.preview-overlay {
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
}

.vajbik-modal-box {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        background-color: #0A0A0A;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        z-index: 105;
        overflow: hidden;
    }
    #swipe-area {
        flex: 1;
        height: 100%;
        overflow: visible !important;
        isolation: isolate;
    }

    @media (min-width: 1024px) {
        .vajbik-modal-box {
            position: relative;
            width: 100%;
            max-width: 1200px; 
            height: auto;      
            max-height: 90vh;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        #swipe-area {
            flex: none;
            height: auto;
        }
        #modal-img, #modal-video {
            height: auto !important;
            max-height: 70vh; 
            z-index: 10 !important;
            position: relative;
        }
    }

    @media (max-width: 1023px) and (orientation: landscape) {
        #modal-header, #modal-footer { 
            display: none !important; 
        }
        #modal-close-floating {
            display: flex !important; 
        }
        #swipe-area {
            height: 100dvh !important;
        }
        #modal-img, #modal-video {
            max-height: 100dvh !important;
        }
    }


#modal-prev, #modal-next {
    z-index: 500 !important; 
    pointer-events: auto !important; 
}