/* Image Resizer — tool-specific styles (shared system lives in /assets/site.css). */

#lockAspect {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  color: var(--muted);
}
#lockAspect:hover { border-color: var(--accent-border); color: var(--accent); }
#lockAspect.locked {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}

.unit-btn { color: var(--muted); background: transparent; transition: all 0.2s ease; }
.unit-btn.active { background: linear-gradient(135deg, var(--accent-strong), var(--accent)); color: #fff; }
.unit-btn:not(.active):hover { color: var(--accent); }

/* 3×3 crop anchor picker */
.anchor-btn {
  width: 2rem; height: 2rem; border-radius: 0.55rem;
  border: 1px solid var(--border); background: var(--surface);
  position: relative; transition: all 0.18s ease;
}
.anchor-btn::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--faint); transition: all 0.18s ease;
}
.anchor-btn:hover { border-color: var(--accent-border); transform: scale(1.08); }
.anchor-btn.active {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  border-color: transparent; box-shadow: var(--accent-glow);
}
.anchor-btn.active::after { background: #fff; }