:root{
    --card-bg:#fff; --card-shadow:0 4px 12px rgba(0,0,0,0.1);
    --radius:12px; --primary:#007bff; --muted:#eee; --text:#222; --backdrop:rgba(0,0,0,.85);
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;padding:20px;background:#f7f7f7;color:var(--text)}
h1{ text-align:center; margin:0 0 20px 0 }

.timeline{ display:flex; flex-direction:column; gap:40px; align-items:center; }
.page-section{ width:100%; max-width:980px; }
.page-anchor{ position:relative; top:-64px; height:1px; }

.album{ background:var(--card-bg); padding:20px; border-radius:var(--radius); box-shadow:var(--card-shadow); opacity:0; transform:translateY(40px); transition:all .6s ease; max-width:900px; width:100%; margin:0 auto; margin-bottom:40px;}
.album.visible{ opacity:1; transform:translateY(0) }
.album h2{ margin:0 0 15px 0; text-align:center }
.main-image{ width:100%; height:auto; max-height:360px; object-fit:cover; border-radius:8px; cursor:pointer; transition:transform .3s; display:block; }
.main-image:hover{ transform:scale(1.02) }
.thumbnails{ display:flex; gap:10px; margin-top:10px; width:100%; }
.thumbnails img{ flex:1; height:70px; object-fit:cover; border-radius:6px; cursor:pointer; transition:transform .3s; }
.thumbnails img:hover{ transform:scale(1.05) }

.modal{ display:none; position:fixed; inset:0; z-index:1000; background:var(--backdrop); justify-content:center; align-items:center; animation:fadeIn .35s ease;

    flex-direction:column;

    justify-content:center;

    align-items:center;}
.modal.show{ display:flex }
.modal img{ max-width:90vw; max-height:80vh; border-radius:12px; animation:zoomIn .3s ease; user-select:none; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes zoomIn{ from{transform:scale(.9)} to{transform:scale(1)} }
.modal .nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:2.2rem; color:#fff; cursor:pointer; user-select:none; padding:20px; }
.modal .prev{ left:10px } .modal .next{ right:10px }
.modal .topbar{ position:absolute; top:12px; left:12px; right:12px; display:flex; gap:8px; justify-content:flex-end; align-items:center; }
#modal-img{

    max-width:90vw;

    max-height:70vh;

    object-fit:contain;

    margin-bottom:15px;

    border-radius:12px;
}
.btn{ border:none; border-radius:8px; padding:8px 12px; cursor:pointer; background:rgba(255,255,255,.15); color:#fff; backdrop-filter: blur(4px); }
.btn:hover{ background:rgba(255,255,255,.25) }

.pagination{ position:sticky; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; padding:10px; margin-top:12px; z-index:500; }
.pagination .page-btn{ border:none; padding:8px 12px; background:var(--muted); border-radius:999px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.pagination .page-btn.active{ background:var(--primary); color:#fff; }

#sentinel{ height:1px }

/* Spinner loading */
.spinner{ display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2000; }
.spinner div{ width:44px; height:44px; border:5px solid #ccc; border-top:5px solid var(--primary); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.lazyload,
.lazyloading{

    opacity:0;
}

.lazyloaded{

    opacity:1;

    transition:
            opacity .4s;
}

.album-header{

    text-align:center;

    margin-bottom:18px;
}

.album-title{

    font-size:32px;

    font-weight:700;

    color:#222;

    margin-bottom:5px;
}

.album-meta{

    color:#777;

    font-size:15px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}

.album-meta span{

    display:flex;

    align-items:center;

    gap:5px;
}
#imageInfo{

    position:relative;

    text-align:center;

    color:#fff;

    background:rgba(0,0,0,.4);

    padding:12px 20px;

    border-radius:10px;

    max-width:800px;
}

#imageCounter{

    font-size:14px;

    opacity:.9;

    margin-bottom:5px;
}

#imageCaption{

    font-size:16px;

    font-weight:500;
}
#albumTitle{

    font-size:20px;

    font-weight:700;

    margin-bottom:8px;
}
#thumbnailStrip{

    position:relative;

    display:flex;

    gap:8px;

    overflow-x:auto;

    width:90vw;

    max-width:1400px;

    margin-bottom:15px;

    justify-content:flex-start;

    scrollbar-width:thin;

    background:rgba(0,0,0,.25);

    border-radius:10px;

    padding:10px;
}

#thumbnailStrip img{

    width:70px;

    height:50px;

    object-fit:cover;

    border-radius:6px;

    cursor:pointer;

    opacity:.65;

    transition:.2s;

    border:2px solid transparent;
}

#thumbnailStrip img:hover{

    opacity:1;
}

#thumbnailStrip img.active{

    opacity:1;

    border-color:#0d6efd;

    transform:scale(1.08);
}

.album-header{

    text-align:center;
}

.album-title{

    font-size:24px;

    font-weight:700;

    margin-bottom:8px;
}

.album-owner-row{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-bottom:8px;

    flex-wrap:wrap;
}

.album-owner{

    color:#666;

    font-size:14px;
}

.album-badge{

    padding:4px 10px;

    border-radius:20px;

    color:#fff;

    font-size:12px;

    font-weight:600;
}

.album-public{

    background:#198754;
}

.album-private{

    background:#dc3545;
}


.album-search{

    width:100%;

    padding:14px 20px;

    border:1px solid #ddd;

    border-radius:30px;

    font-size:16px;

    outline:none;

    transition:.2s;
}

.album-search:focus{

    border-color:#0d6efd;

    box-shadow:
            0 0 0 4px
            rgba(13,110,253,.15);
}

.search-wrapper{

    position:relative;

    max-width:1000px;

    margin:0 auto 35px;
}

#searchInfo{

    position:absolute;

    left:14px;

    top:50%;

    transform:translateY(-50%);

    z-index:2;

    padding:6px 14px;

    background:#fff;

    border-radius:999px;

    font-weight:600;

    box-shadow:
            0 2px 8px rgba(0,0,0,.08);
}

.album-search{

    padding-left:130px;
}

.album-actions{

    margin-top:12px;

    text-align:center;
}

.download-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:4px 12px;

    border-radius:999px;

    background:#0d6efd;

    color:#fff;

    text-decoration:none;

    font-size:12px;

    font-weight:600;

    transition:.2s;
}

.download-badge:hover{

    color:#fff;

    background:#0b5ed7;
}

@media (max-width:768px){

    .thumbnails{

        grid-template-columns:
            repeat(3,1fr);
    }

    .thumbnails img:nth-child(n+4){

        display:none;
    }

}