.album-grid,.photo-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}

.album-card {
    color:inherit;
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    text-decoration:none;
    background:var(--surface)
}

.album-card>div:last-child {
    padding:16px
}

.album-card h3 {
    margin:0 0 5px
}

.album-card p {
    margin:0;
    color:var(--muted)
}

.album-cover {
    aspect-ratio:4/3;
    background:var(--surface);
    display:grid;
    place-items:center;
    overflow:hidden
}

.album-cover img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .2s
}

.album-card:hover img {
    transform:scale(1.035)
}

.album-cover>i {
    font-size:38px;
    color:var(--muted)
}

.album-upload {
    border:1px solid var(--line);
    border-radius:12px;
    padding:18px;
    margin:0 0 25px
}

.album-upload>summary {
    cursor:pointer;
    font-weight:650;
    display:flex;
    gap:10px;
    align-items:center
}

.album-upload form {
    max-width:650px;
    margin-top:20px
}

.album-photo {
    min-width:0;
    margin:0
}

.photo-open {
    width:100%;
    padding:0;
    border:0;
    background:var(--surface);
    cursor:zoom-in;
    border-radius:12px;
    overflow:hidden;
    aspect-ratio:1
}

.photo-open img {
    width:100%;
    height:100%;
    object-fit:cover
}

.album-photo figcaption {
    padding:10px 0;
    overflow-wrap:anywhere;
    white-space:pre-line
}

.photo-settings {
    font-size:.85rem
}

.photo-settings summary {
    cursor:pointer;
    color:var(--muted)
}

.photo-settings form {
    margin-top:12px
}

.album-delete {
    margin-top:35px;
    border-top:1px solid var(--line);
    padding-top:20px;
    font-size:.9rem
}

.album-delete summary {
    cursor:pointer;
    color:var(--muted)
}

.photo-viewer {
    width:min(1100px,96vw);
    max-width:none;
    max-height:94dvh;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface,#fffaf2);
    color:var(--ink,#35223e);
    padding:45px 16px 20px
}

.photo-viewer::backdrop {
    background:rgb(24 20 28 / 80%)
}

.photo-viewer-stage {
    display:flex;
    align-items:center;
    gap:12px
}

.photo-viewer-stage figure {
    margin:0;
    flex:1;
    min-width:0;
    text-align:center
}

.photo-viewer-stage img {
    max-width:100%;
    max-height:72dvh;
    object-fit:contain
}

.photo-viewer-stage figcaption {
    padding-top:14px;
    white-space:pre-line
}

.photo-viewer button {
    background:transparent;
    border:0;
    color:inherit;
    width:40px;
    min-height:44px;
    cursor:pointer
}

.photo-viewer-close {
    position:absolute;
    right:10px;
    top:5px;
    font-size:22px
}

@media(max-width:900px) {
    .album-grid,.photo-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media(max-width:520px) {
    .album-grid {
        grid-template-columns:1fr
    }
    .photo-grid {
        gap:14px
    }
    .photo-viewer {
        padding:45px 6px 16px
    }
    .photo-viewer-stage {
        gap:0
    }
    .photo-viewer-stage>button {
        width:28px;
        flex-shrink:0
    }
}

.profile-section[data-controller="gallery"]>.text-button,.profile-section[data-controller="gallery"]>.album-upload,.profile-section[data-controller="gallery"]>.photo-grid,.profile-section[data-controller="gallery"]>.album-delete {
    margin:24px 28px
}

.profile-section[data-controller="gallery"]>.text-button {
    display:inline-flex
}

@media(max-width:600px) {
    .profile-section[data-controller="gallery"]>.text-button,.profile-section[data-controller="gallery"]>.album-upload,.profile-section[data-controller="gallery"]>.photo-grid,.profile-section[data-controller="gallery"]>.album-delete {
        margin:18px 16px
    }
}