*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

/* Masonry grid */
#images{
    column-gap: 16px;
    padding: 16px;
}
#images img{
    width:100%;
    height:auto;
    margin:0 0 16px;
    display:block;
    break-inside:avoid;
    border-radius:8px;
    background:#f3f3f3;
    transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
#images img.placeholder{
    filter: blur(12px);
    transform: scale(1.02);
}

/* Floating action button and overlay */
#upload{position:fixed;bottom:20px;right:20px;z-index:1000}
#fab{
    width:64px;height:64px;border-radius:50%;
    border:none;background:#4caf50;color:#fff;font-size:32px;line-height:64px;
    box-shadow:0 10px 20px rgba(0,0,0,.15);cursor:pointer
}

#upload[data-opened="true"] .upload-container{display:flex}
#upload[data-opened="false"] .upload-container{display:none}

.upload-container{
    position:fixed;
    inset: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    flex-direction: column;

    &::before {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        content: "";
        z-index: -1;
        backdrop-filter: blur(10px);
    }
}
.upload-container > *{max-height:100%}
.upload-container .upload-header{
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    color: white;
}
.upload-container .close{background:none;border:none;color:white;font-size:20px;cursor:pointer}

#drop-zone{
    background:#fff;border-radius:12px;max-width:960px;width:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    border:2px dashed #bdbdbd;transition:background .2s,border-color .2s;

    & label {
        padding:32px 24px;
        width: 100%;
        text-align: center;
    }
}
#drop-zone.hover{background:#f8fff8;border-color:#4caf50}
#drop-zone .file-chooser{color:#2e7d32;text-decoration:underline;cursor:pointer}

.actions{margin:12px 0}
.actions #upload-button{background:#2e7d32;color:#fff;border:none;border-radius:8px;padding:10px 16px;cursor:pointer}

/* Upload item preview */
#upload-content{display:flex;flex-wrap:wrap;gap:12px;max-width:960px;margin:12px auto; overflow: scroll}
.image-upload{width:140px;border:1px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fff}
.image-upload img{display:block;width:100%;height:100px;object-fit:cover}
.image-upload .meta{padding:8px}
.image-upload .status{display:block;font-size:12px;color:#666;margin-bottom:6px}
.image-upload .progress{height:6px;background:#eee;border-radius:999px;overflow:hidden}
.image-upload .progress .fill{height:100%;width:0;background:#4caf50;transition:width .2s}
.image-upload .actions{margin-top:8px;display:flex;justify-content:flex-end}
.image-upload .actions .remove{background:#e53935;color:#fff;border:none;border-radius:6px;padding:6px 10px;font-size:12px;cursor:pointer}
.image-upload .actions .remove[disabled]{opacity:.6;cursor:default}

#modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}
#modal a {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
}
#modal-content{
    padding:6px;width: 100%;height: 100%;
    display: flex;
    justify-content: center;
    & > img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}

#sentinel {
    position: relative;
    top: -300px;
}

@media (min-width: 600px) {
    #sentinel {
        top: -500px;
    }
}