#tabs-bar::-webkit-scrollbar { display:none; }
.tab-item { background:white; padding:10px 22px; border-radius:20px; cursor:pointer; border:1px solid #e5e7eb; white-space:nowrap; transition:all 0.3s ease; font-weight:500; font-size:14px; color:#4b5563; }
.tab-item:hover { background:#f9fafb; color:#111827; }
.tab-item.active { background:#413FC6; color:white; border-color:#413FC6; box-shadow:0 4px 6px -1px rgba(79,70,229,0.2); }

.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; }

.folder-card, .img-card {
    box-sizing: border-box;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    transition: all 0.2s ease;
}

.folder-card {
    padding: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
}
.folder-card:not(.is-skeleton):hover { border-color:#4f46e5; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.05); background: #EEEEFF;}
.folder-card svg{
    width: 50px!important;
}
.img-card {
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 290px;
}
.img-card:not(.is-skeleton):hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.05); }

.img-card-preview { position:relative; overflow:hidden; border-radius:12px; height:180px; }

/* افکت شیمر تصویر پیش از لود */
.img-card-preview.loading::before {
    content: "";
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 600px 100%;
    animation: shimmer 1.4s infinite linear;
    z-index: 1;
}

.img-card img { width:100%; height:180px; object-fit:cover; display:block; background:#f9fafb; border-radius:12px; opacity: 0; transition: opacity 0.3s ease; }
.img-card img.loaded { opacity: 1; }

.img-card-title { margin:12px 0 6px 0; font-size:13px; color:#374151; font-weight:600; text-align:right; min-height: 18px; line-height: 18px; text-decoration: none; display: block; }
.img-card-title:hover { color:#4f46e5; }

.download-direct-btn { background:#4f46e5; color:white; padding:8px 15px; border-radius:10px; text-decoration:none; font-size:12px; font-weight:bold; display:block; text-align:center; transition:all 0.2s; border:1px solid #4f46e5; height: 36px; box-sizing: border-box; line-height: 18px; }
.download-direct-btn:hover {     background: #2f2db3!important;
    color: #fff!important; }

/* انیمیشن Shimmer */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.sk {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 600px 100%;
    animation: shimmer 1.4s infinite linear;
    display: block;
}

.skeleton-tab { height: 38px; width: 90px; border-radius: 20px; flex-shrink: 0; }

.is-skeleton {
    pointer-events: none;
    user-select: none;
    border-color: #e5e7eb !important;
    box-shadow: none !important;
    transform: none !important;
}

.sk-folder-title { height: 16px; width: 120px; border-radius: 4px; }
.sk-folder-arrow { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.sk-image { width: 100%; height: 180px; border-radius: 12px; }
.sk-title { height: 14px; width: 60%; margin: 12px 0 6px auto; border-radius: 4px; }
.sk-button { height: 36px; width: 100%; border-radius: 10px; margin-top: auto; }