/* ==========================================================================
   SVG to PNG, JPG & WEBP Converter — tool page only (/tools/svg-to-image/)
   Uses the design tokens from main.css, so both themes work automatically.
   ========================================================================== */

:root {
  --si-checker-a: rgba(255, 255, 255, 0.07);
  --si-checker-b: rgba(255, 255, 255, 0.02);
}
:root[data-theme="light"] {
  --si-checker-a: #e4e7f2;
  --si-checker-b: #ffffff;
}

.si [hidden] { display: none !important; }

.si-input { flex: 1 1 auto; min-height: 380px; font: 0.84rem/1.6 var(--font-mono); white-space: pre; tab-size: 2; }
.si-input.drag { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); }

.si-status {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin: -0.4rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.si-status .icon { flex: none; width: 18px; height: 18px; margin-top: 0.1rem; stroke-width: 2.4; }
.si-status.is-warn { border: 1px solid rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); color: var(--warn-text); }
.si-status.is-bad { border: 1px solid rgba(251, 113, 133, 0.35); background: rgba(251, 113, 133, 0.1); color: var(--danger-text); }
.si-status strong { color: inherit; }
.si-status ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.si-info { margin: -0.6rem 0 0; min-height: 1.2em; }
.si-info:empty { display: none; }

.si-checker {
  background-color: var(--si-checker-b);
  background-image:
    linear-gradient(45deg, var(--si-checker-a) 25%, transparent 25%),
    linear-gradient(-45deg, var(--si-checker-a) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--si-checker-a) 75%),
    linear-gradient(-45deg, transparent 75%, var(--si-checker-a) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.si-preview {
  display: grid;
  place-items: center;
  min-height: 240px;
  max-height: 360px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.si-preview img { display: block; max-width: 100%; max-height: 326px; object-fit: contain; }
/* Small icons: show them bigger, with hard pixel edges so the real output is visible. */
.si-preview img.is-small { width: 128px; height: 128px; image-rendering: pixelated; }
.si-preview-empty { margin: 0; padding: 0 1rem; color: var(--muted); font-size: 0.9rem; text-align: center; }

.si-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: -0.4rem 0 0;
}
.si-stats div { padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.si-stats dt { color: var(--muted); font-size: 0.75rem; }
.si-stats dd { margin: 0.1rem 0 0; color: var(--text); font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.si-controls { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.si-controls:disabled { opacity: 0.6; }
.si-controls:disabled .si-range, .si-controls:disabled .chip-btn { cursor: not-allowed; }

.si-size { display: flex; flex-direction: column; gap: 0.7rem; }
.si-dims { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0.5rem; }
.si-unit { position: relative; min-width: 0; }
.si-unit .input { padding-right: 2.6rem; font-variant-numeric: tabular-nums; }
.si-unit span { position: absolute; top: 50%; right: 0.9rem; color: var(--muted); font-size: 0.85rem; transform: translateY(-50%); pointer-events: none; }
.si-lock {
  display: grid;
  place-items: center;
  width: 44px; height: 48px;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.si-lock .icon { width: 18px; height: 18px; }
.si-lock:hover { color: var(--text); border-color: rgba(var(--ink), 0.24); }
.si-lock[aria-pressed="true"] { color: var(--on-soft); background: var(--grad-soft); border-color: rgba(139, 92, 246, 0.6); }
.si-lock[aria-pressed="true"] .si-lock-off, .si-lock[aria-pressed="false"] .si-lock-on { display: none; }
.si-lock span { display: contents; }
.si-scales { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.si-scales .chip-btn[aria-pressed="true"] { color: var(--on-soft); background: var(--grad-soft); border-color: rgba(139, 92, 246, 0.6); }
.si-note { margin: -0.4rem 0 0; }
.si-note.is-warn { color: var(--warn-text); }

.si-ico { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.si-ico legend { margin-bottom: 0.6rem; padding: 0; }
.si-ico-sizes { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }

.si-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.si-colors:not(:has(> :not([hidden]))) { display: none; }
.si-color {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.8rem 0.35rem 0.35rem;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}
.si-color input {
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.si-color input::-webkit-color-swatch-wrapper { padding: 0; }
.si-color input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.si-color input::-moz-color-swatch { border: 0; border-radius: 50%; }
.si-color span { display: flex; flex-direction: column; line-height: 1.2; }
.si-color b { color: var(--text); font-size: 0.8rem; font-weight: 600; }
.si-color code { color: var(--muted); font-family: var(--font-mono); font-size: 0.76rem; }

.si-range { width: 100%; accent-color: var(--violet); }
.si-q {
  display: inline-block;
  min-width: 2.6em;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--lilac);
  font-size: 0.8rem;
  text-align: center;
}

.si .btn-block .icon { width: 18px; height: 18px; }
.si-actions { margin-top: -0.4rem; }
.si-actions .icon-btn { flex: 1 1 auto; justify-content: center; }

@media (max-width: 420px) {
  .si-input { min-height: 260px; }
  .si-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .si-stats div:last-child { grid-column: 1 / -1; }
}