:root {
    --bg: #202124;
    --fg: #e8eaed;
    --muted: #9aa0a6;
    --surface: #2a2b2e;
    --hover: #35363a;
    --accent: #8ab4f8;
    --gap: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
a { color: inherit; text-decoration: none; }

#topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 16px;
    padding: 10px 20px;
    background: rgba(32,33,36,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #3c4043;
}
#home-link { display: inline-flex; padding: 6px; border-radius: 50%; color: var(--fg); }
#home-link:hover { background: var(--hover); }
#title { font-size: 18px; font-weight: 500; margin: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#meta { margin-left: auto; color: var(--muted); font-size: 13px; }

main { padding: 16px; }

/* Album grid (index page) */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.album-card {
    display: block;
    background: var(--surface);
    border-radius: 8px;
    overflow: hidden;
    transition: transform .15s ease, background .15s ease;
}
.album-card:hover { background: var(--hover); transform: translateY(-2px); }
.album-cover {
    aspect-ratio: 1 / 1;
    background: #111 center/cover no-repeat;
    display: block;
    width: 100%;
}
.album-info { padding: 10px 12px; }
.album-name { font-size: 14px; font-weight: 500; line-height: 1.3; word-break: break-word; }
.album-count { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Justified mosaic */
.mosaic { display: flex; flex-direction: column; gap: var(--gap); }
.mosaic-row { display: flex; gap: var(--gap); }
.mosaic-cell {
    position: relative;
    overflow: hidden;
    background: #111;
    cursor: zoom-in;
    flex: 0 0 auto;
}
.mosaic-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .25s ease;
    opacity: 0;
}
.mosaic-cell img.loaded { opacity: 1; }
.mosaic-cell:hover img { transform: scale(1.02); transition: transform .3s ease, opacity .25s ease; }

/* Lightbox */
#lightbox {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0,0,0,.96);
    display: flex; align-items: center; justify-content: center;
}
#lightbox[hidden] { display: none; }
.lb-stage { max-width: 100vw; max-height: 100vh; padding: 24px; display: flex; align-items: center; justify-content: center; }
#lb-img { max-width: 96vw; max-height: 92vh; object-fit: contain; }
.lb-btn {
    position: absolute;
    background: rgba(255,255,255,.06);
    color: var(--fg);
    border: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    font-size: 28px; line-height: 48px;
    cursor: pointer;
    user-select: none;
}
.lb-btn:hover { background: rgba(255,255,255,.18); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-caption {
    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: var(--muted);
    background: rgba(0,0,0,.4); padding: 4px 10px; border-radius: 12px;
    pointer-events: none;
}

@media (max-width: 600px) {
    main { padding: 8px; }
    #topbar { padding: 8px 12px; }
    .album-grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .lb-btn { width: 40px; height: 40px; font-size: 22px; line-height: 40px; }
}