.rsimgtool {
margin-top:20px;
}
.rsimgtool h1 {
    text-align:center;
    font-weight:600;
    letter-spacing:.5px;
    margin:0 0 1.25rem;
}
.rsimgtool a {
    color:#2563eb;
text-decoration:none;
}
.rsimgtool #dropZone.is-dragover{ background:#fff; border-color:#0f6bd6; }

.rsimgtool  p.image.is-96x96 img {
    max-width: 96px;
}

.rsimgtool figure.media-left {
    display: inline-block;
    margin-right: 10px;
    margin-top: 0;
}

.rsimgtool .media-content {
    display: inline-block;
}

.rsimgtool .media p {
    margin: 0;
}

.rsimgtool .media-content small a {
    font-size: 12px;
    padding: 5px;
    font-weight: normal;
    padding-left: 10px;
    padding-right: 10px;
}

.rsimgtool div#output-images, .rsimgtool div#input-images {
    margin-top: 20px;

}
.rsimgtool div#output-image, .rsimgtool div#input-image {
border-bottom: 1px solid #dfdfdf;
    margin-bottom: 20px;
}

.rsimgtool .app {
    max-width:1100px;
    margin:0 auto;
}
.rsimgtool .panel {
    background:#ffffff;
    border:1px solid #d9e1ec;
    border-radius:14px;
    padding:1.25rem 1.5rem;
    margin-bottom:1.25rem;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.rsimgtool #dropZone {
    border:2px dashed #2563eb;
    border-radius:14px;
    height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:1rem;
    cursor:pointer;
    transition:.25s background;
    background:#eef5ff;
}
.rsimgtool #dropZone.dragover {
    background:#e0edff;
}
.rsimgtool #dropZone input {
    display:none;
}
.rsimgtool #dropZone .hint {
    font-size:.9rem;
    opacity:.7;
    text-align:center;
    max-width:320px;
}
.rsimgtool .thumb-list,
.rsimgtool .result-list {
    display:grid;
    gap:.75rem;
}
.rsimgtool .thumb,
.rsimgtool .result {
    display:grid;
    grid-template-columns:72px 1fr auto;
    gap:1rem;
    align-items:center;
    background:#ffffff;
    border:1px solid #d9e1ec;
    padding:.6rem .75rem;
    border-radius:12px;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.rsimgtool a[disabled="disabled"], .rsimgtool button[disabled="disabled"], .rsimgtool .is-loading {
  pointer-events: none; 
  opacity: 0.5; 
  cursor: not-allowed;  
  text-decoration: none; 
}
.rsimgtool .thumb img,
.rsimgtool .result img {
    width:72px;
    height:72px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid #d9e1ec;
    background:#fff;
}
.rsimgtool .meta {
    font-size:.8rem;
    line-height:1.3;
    word-break:break-all;
}
.rsimgtool .meta strong {
    display:block;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.5px;
    opacity:.55;
    margin-bottom:2px;
}
.rsimgtool .controls {
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    align-items:flex-end;
    margin-top:.5rem;
}
.rsimgtool .field {
    display:flex;
    flex-direction:column;
    gap:.35rem;
    font-size:.85rem;
}
.rsimgtool .field label {
    font-weight:600;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.rsimgtool .field input[type=number],
.rsimgtool .field select {
    padding:.55rem .65rem;
    border:1px solid #d9e1ec;
    border-radius:10px;
    font:inherit;
    min-width:120px;
    background:#fdfdfd;
}
.rsimgtool .actions {
    display:flex;
    gap:.75rem;
    align-items:center;
    margin-top:.75rem;
}
.rsimgtool button, .rsimgtool a {
    cursor:pointer;
    border:none;
    background:#2563eb;
    color:#fff;
    font-weight:600;
    padding:.8rem 1.25rem;
    border-radius:12px;
    font-size:.9rem;
    display:inline-flex;
    gap:.5rem;
    align-items:center;
    box-shadow:0 2px 4px rgba(0,0,0,.15);
    transition:background .2s,transform .15s;
}
.rsimgtool button:hover, .rsimgtool a:hover {
    background:#1d4ed8;
}
.rsimgtool button:active, .rsimgtool a:active {
    transform:translateY(2px);
}
.rsimgtool button.secondary, .rsimgtool a.secondary {
    background:#fff;
    color:#2563eb;
    border:1px solid #2563eb;
    box-shadow:none;
}
.rsimgtool button.secondary:hover, .rsimgtool a.secondary:hover {
    background:#f0f6ff;
}
.rsimgtool .danger {
    color:#dc2626;
    font-size:.8rem;
}
.rsimgtool .hidden {
    display:none !important;
}
.rsimgtool progress {
    width:100%;
    height:12px;
    border-radius:10px;
    overflow:hidden;
}
.rsimgtool progress::-webkit-progress-bar {
    background:#e2e8f0;
}
.rsimgtool progress::-webkit-progress-value {
    background:#2563eb;
}
.rsimgtool .result .size-diff {
    font-size:.7rem;
    padding:.25rem .45rem;
    border-radius:20px;
    background:#ecf7ed;
    color:#136c1b;
    font-weight:600;
}
.rsimgtool .result .size-diff.negative {
    background:#fef2f2;
    color:#b91c1c;
}
.rsimgtool .result-actions {
    display:flex;
    flex-direction:column;
    gap:.4rem;
}
.rsimgtool .result-actions button {
    padding:.45rem .8rem;
    font-size:.7rem;
    font-weight:600;
}
.rsimgtool .bar-wrap {
    margin-top:1rem;
}
.rsimgtool .flex-between {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
}
.rsimgtool footer {
    text-align:center;
    font-size:.7rem;
    opacity:.6;
    margin-top:2rem;
}
@media (max-width:720px) {
    .rsimgtool .thumb,
    .rsimgtool .result {
        grid-template-columns:56px 1fr;
    }
    .rsimgtool .thumb img,
    .rsimgtool .result img {
        width:56px;
        height:56px;
    }
    .rsimgtool .controls {
        flex-direction:column;
        align-items:stretch;
    }
    .rsimgtool .field input[type=number],
    .rsimgtool .field select {
        width:100%;
    }
    .rsimgtool .result-actions {
        flex-direction:row;
    }
}