/* Shared SVG controls retain the site's existing tool typography and palette. */
.svg-tools-page *, .svg-tools-page *::before, .svg-tools-page *::after { box-sizing: border-box; }
.svg-tools-page main, .svg-tools-page .tool-shell, .svg-workspace, .svg-workspace > *, .svg-columns > *, .svg-field, .svg-info { min-width: 0; }
.svg-workspace { display: grid; gap: 18px; max-width: 100%; }
.svg-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.svg-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; max-width: 100%; }
.svg-field label, .svg-field .field-label { margin: 0; }
.svg-field input[type="color"] { width: 64px; height: 42px; padding: 4px; border: 1px solid #c8d4e3; border-radius: 7px; background: #fff; }
.svg-field input[type="range"] { width: 100%; min-width: 0; }
.svg-field:has(input[type="checkbox"]) { align-self: end; }
.svg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 12px 0; }
.svg-actions button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.svg-tools-page .svg-source, .svg-tools-page textarea.svg-source { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 230px; max-height: 480px; padding: 13px; margin: 0; border: 1px solid #c8d4e3; border-radius: 8px; background: #f8fafc; color: #172b4d; font: 13px/1.6 Consolas, Monaco, "Courier New", monospace; tab-size: 2; white-space: pre; overflow: auto; overflow-wrap: normal; word-break: normal; }
.svg-tools-page textarea.svg-source { resize: vertical; }
.svg-source code { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; white-space: inherit; }
.svg-preview-stage { display: flex; align-items: flex-start; justify-content: flex-start; position: relative; width: 100%; min-width: 0; min-height: 280px; max-height: 560px; padding: 16px; border: 1px solid #dbe4f0; border-radius: 8px; overflow: auto; background-color: #fff; background-image: linear-gradient(45deg, #e7edf5 25%, transparent 25%), linear-gradient(-45deg, #e7edf5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e7edf5 75%), linear-gradient(-45deg, transparent 75%, #e7edf5 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.svg-preview-image { display: block; flex: 0 0 auto; width: auto; height: auto; max-width: 100%; max-height: 480px; margin: auto; object-fit: contain; }
.svg-preview-stage p { margin: 0; padding: 8px 12px; border-radius: 6px; color: #526176; background: rgba(255, 255, 255, .94); text-align: center; }
.svg-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 15px; margin: 12px 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.svg-info > div { min-width: 0; padding: 8px 10px; border-radius: 6px; background: #f3f7fc; }
.svg-info dt { font-weight: 700; color: #172b4d; }
.svg-info dd { margin: 0; color: #526176; }
.svg-tree { max-width: 100%; max-height: 420px; overflow: auto; padding: 12px; border: 1px solid #dbe4f0; border-radius: 8px; background: #f8fafc; font: 13px/1.6 Consolas, Monaco, "Courier New", monospace; }
.svg-tree details { min-width: max-content; }
.svg-tree details details { margin-left: 16px; }
.svg-tree summary { cursor: pointer; white-space: pre; color: #17335d; }
.svg-tree ul { margin: 0; padding-left: 20px; }
.svg-tree code, .svg-tree pre { display: block; max-width: none; padding: 4px; color: #526176; font: inherit; white-space: pre; }
.svg-color-list { max-width: 100%; max-height: 460px; overflow: auto; border: 1px solid #dbe4f0; border-radius: 8px; }
.svg-color-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto minmax(120px, 1fr); align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid #e7edf5; overflow-wrap: anywhere; }
.svg-color-row:last-child { border-bottom: 0; }
.svg-color-row > * { min-width: 0; max-width: 100%; }
.svg-color-row input[type="color"] { width: 48px; height: 38px; padding: 3px; border: 1px solid #c8d4e3; border-radius: 6px; }
.svg-color-swatch { display: inline-block; width: 25px; height: 25px; border: 1px solid #94a3b8; border-radius: 4px; vertical-align: middle; }
.svg-status, .svg-warning, .svg-error { margin: 12px 0; padding: 12px 14px; border: 1px solid #c7d9ef; border-radius: 8px; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-line; }
.svg-status { color: #14532d; border-color: #b7ddc1; background: #f0fdf4; }
.svg-warning { color: #854d0e; border-color: #e8d28f; background: #fffbeb; }
.svg-error { color: #991b1b; border-color: #f1b8b8; background: #fef2f2; }
.svg-tools-page .tool-guide code { overflow-wrap: anywhere; }
.svg-tools-page .privacy-note { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .svg-columns { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .svg-workspace { gap: 14px; }
  .svg-tools-page .tool-shell { padding: 16px; }
  .svg-info { grid-template-columns: minmax(0, 1fr); }
  .svg-preview-stage { min-height: 220px; max-height: 420px; padding: 10px; }
  .svg-preview-image { max-height: 360px; }
  .svg-color-row { grid-template-columns: 25px minmax(0, 1fr); gap: 8px; }
  .svg-color-row > label, .svg-color-row > input { grid-column: 1 / -1; }
  .svg-actions .tool-button { flex: 1 1 130px; padding-left: 10px; padding-right: 10px; }
  .svg-tools-page .svg-source, .svg-tools-page textarea.svg-source { min-height: 210px; font-size: 12px; }
}