/* ── Slidia index page ───────────────────────────────────── */

@keyframes slideUpModal {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideUpModalMobile {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

.sdl-lib-modal-panel {
    animation: slideUpModal 0.32s cubic-bezier(0.32,0.72,0,1) both;
}
@media (max-width: 639px) {
    .sdl-lib-modal-panel {
        animation: slideUpModalMobile 0.38s cubic-bezier(0.32,0.72,0,1) both;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
}

.sdl-lib-card {
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease, border-color 0.18s ease;
}
.sdl-lib-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }

.sdl-lib-cta-disabled { opacity: 0.45; pointer-events: none; }
.sdl-lib-cta-enabled  { opacity: 1;    pointer-events: auto; }

.sdl-lib-upload-slot {
    border: 1.5px dashed rgba(var(--color-primary-rgb), 0.28);
    background: rgba(var(--color-primary-rgb), 0.03);
    transition: border-color 0.18s, background 0.18s;
}
.sdl-lib-upload-slot:hover { border-color: rgba(var(--color-primary-rgb), 0.65); background: rgba(var(--color-primary-rgb), 0.06); }
.sdl-lib-upload-slot.drag-over { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.09); border-style: solid; }
.sdl-lib-upload-slot.uploading { opacity: 0.55; pointer-events: none; }

.sdl-strip-card { transition: border-color 0.25s, box-shadow 0.25s, opacity 0.2s; }

.sdl-nav-strip { scrollbar-width: none; }
.sdl-nav-strip::-webkit-scrollbar { display: none; }