/* Image tools — uses theme vars from style.css */
.im-wrap { max-width: 600px; margin: 0 auto; padding: 56px 22px 90px; }
.im-head { text-align: center; margin-bottom: 30px; }
.im-head .eyebrow { margin-bottom: 16px; }
.im-head h1 { font-size: clamp(2rem, 5.5vw, 3rem); }
.im-head p { color: var(--txt2); margin-top: 12px; font-weight: 400; }
.im-stage { animation: fadeUp .4s cubic-bezier(.22,1,.36,1) both; }
.hidden { display: none !important; }

.im-drop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; padding: 44px 22px; border: 1.5px dashed var(--line2); border-radius: var(--r-lg); background: var(--card); transition: all .25s; }
.im-drop:hover, .im-drop.drag { border-color: var(--lime); background: rgba(194,240,74,0.04); }
.im-drop-ic { width: 56px; height: 56px; margin-bottom: 14px; border-radius: 16px; display: grid; place-items: center; background: var(--lime); color: #0a0b0d; transition: transform .25s; }
.im-drop:hover .im-drop-ic { transform: translateY(-4px); }
.im-drop .t { font-size: 1.15rem; font-weight: 700; }
.im-drop .s { font-family: 'JetBrains Mono', monospace; font-size: .76rem; color: var(--txt3); margin-top: 6px; }

.im-field { margin-top: 18px; }
.im-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--txt3); margin-bottom: 8px; }
.im-input { width: 100%; padding: 12px 14px; background: var(--card); border: 1.5px solid var(--line2); border-radius: 12px; color: var(--txt); font-size: .92rem; outline: none; }
.im-input:focus { border-color: var(--lime); }
.im-range { width: 100%; accent-color: var(--lime); }
.im-hint { display: block; font-size: .76rem; color: var(--txt3); margin-top: 6px; }
.im-resize-row { display: flex; gap: 12px; }
.im-resize-row .im-field { flex: 1; margin-top: 0; }
.im-or { text-align: center; color: var(--txt3); font-size: .8rem; margin: 14px 0; }
.im-check { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--txt2); cursor: pointer; margin-top: 14px; }
.im-check input { width: 16px; height: 16px; accent-color: var(--lime); }

.im-scan-box, .im-result-card { text-align: center; padding: 40px 26px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.im-spin {
  position: relative; width: 56px; height: 56px; margin: 0 auto 20px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--lime));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: spin .8s linear infinite;
  filter: drop-shadow(0 0 10px rgba(194,240,74,.55));
}
.im-scan-box h3 { font-size: 1.3rem; }
.im-check { width: auto; }
.im-result-card .im-check { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: #0a0b0d; box-shadow: 0 0 36px -6px rgba(194,240,74,0.7); }
.im-result-card h3 { font-size: 1.5rem; }
.im-preview { margin: 18px 0; }
.im-preview img { max-width: 100%; max-height: 320px; border-radius: var(--r); border: 1px solid var(--line); }
.im-result-card > p { color: var(--txt2); font-family: 'JetBrains Mono', monospace; font-size: .8rem; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 480px){ .im-resize-row { flex-direction: column; } }