.tlb-overlay{
position:fixed; inset:0; z-index:999999;
background:rgba(0,0,0,.92);
display:flex; flex-direction:column;
}
.tlb-top{
flex:1;
display:flex;
align-items:center;
justify-content:center;
position:relative;
padding:24px 24px 12px;
}
.tlb-counter{
position:absolute; top:16px; left:18px;
color:#fff; font-size:14px; opacity:.85;
font-family: inherit;
}
.tlb-actions{
position:absolute; top:12px; right:14px;
display:flex; gap:10px; align-items:center;
}
.tlb-icon-btn{
width:40px; height:40px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#fff;
cursor:pointer;
transition: opacity .15s ease, transform .15s ease, background .15s ease;
opacity:.9;
}
.tlb-icon-btn:hover{ opacity:1; background:rgba(255,255,255,.12); transform: translateY(-1px); }
.tlb-icon-btn:active{ transform: translateY(0); }
.tlb-icon-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.tlb-main{
width:min(1200px, 92vw);
}
.tlb-main .swiper-slide{
display:flex; align-items:center; justify-content:center;
}
.tlb-main img{
max-width:100%; max-height:78vh;
width:auto; height:auto;
user-select:none;
} .tlb-main .swiper-button-prev,
.tlb-main .swiper-button-next{
color:#fff;
width:46px; height:46px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
transition: opacity .15s ease, transform .15s ease, background .15s ease;
opacity:.85;
}
.tlb-main .swiper-button-prev:hover,
.tlb-main .swiper-button-next:hover{
opacity:1;
background:rgba(255,255,255,.12);
transform: translateY(-1px);
}
.tlb-main .swiper-button-prev:after,
.tlb-main .swiper-button-next:after{
font-size:18px;
font-weight:700;
} .tlb-thumbs{
padding:10px 18px 18px;
border-top:1px solid rgba(255,255,255,.08);
}
.tlb-thumbs .swiper-slide{
width:110px;
height:70px;
opacity:.55;
cursor:pointer;
}
.tlb-thumbs img{
width:100%; height:100%;
object-fit:cover;
border-radius:6px;
user-select:none;
}
.tlb-thumbs .swiper-slide-thumb-active{
opacity:1;
outline:2px solid rgba(255,255,255,.7);
outline-offset:2px;
} @media (max-width: 767px){
.tlb-thumbs .swiper-slide{ width:88px; height:56px; }
.tlb-top{ padding:18px 14px 10px; }
.tlb-actions{ top:10px; right:10px; gap:8px; }
.tlb-icon-btn{ width:38px; height:38px; }
}