/* Image Resizer. Needs /assets/css/modern-tool-cards.css and /assets/css/image-tools.css. */
.rs-mode { display: inline-flex; gap: .3rem; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 12px; padding: .25rem; }
.rs-mode__btn { flex: 1; height: 2.1rem; padding: 0 .8rem; font: inherit; font-size: .82rem; font-weight: 700; color: var(--tc-muted); background: transparent; border: none; border-radius: 9px; cursor: pointer; }
.rs-mode__btn.is-active { color: #fff; background: var(--accent); }
.rs-mode__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rs-dims { display: flex; align-items: flex-end; gap: .5rem; }
.rs-field { flex: 1 1 0; min-width: 0; }
.rs-field label { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 600; color: var(--tc-text); }
.rs-field input {
  width: 100%; height: 2.6rem; padding: 0 .7rem; font: inherit; font-size: .92rem;
  color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px;
}
.rs-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.rs-lock {
  flex: 0 0 auto; width: 2.4rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tc-border); border-radius: 10px; background: var(--tc-bg); color: var(--tc-muted); cursor: pointer;
}
.rs-lock[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.rs-lock:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rs-result { margin: 0; font-size: .88rem; font-weight: 600; color: var(--tc-muted); text-align: center; }
.rs-result strong { color: var(--accent); }