/* SVG Blob Generator - layout. Builds on /assets/css/image-tools.css */
.bl .it-editor { display: grid; }
.bl-stage { min-height: 320px; }
.bl-stage svg { display: block; width: 100%; max-width: 440px; height: auto; aspect-ratio: 1; }

.bl-field { display: grid; gap: .5rem; }
.bl-label { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tc-muted); }

.bl-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px; }
.bl-seg label { position: relative; margin: 0; cursor: pointer; }
.bl-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bl-seg span { display: block; padding: .5rem; text-align: center; font-size: .88rem; font-weight: 600; color: var(--tc-text); border-radius: 9px; transition: background .2s var(--tc-ease), color .2s var(--tc-ease); }
.bl-seg input:checked + span { color: #fff; background: var(--accent); }
.bl-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.bl-color { display: flex; align-items: center; gap: .7rem; padding: .4rem .6rem .4rem .45rem; background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px; }
.bl-color[hidden] { display: none; }
.bl-color input[type="color"] { width: 44px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; }
.bl-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.bl-color input[type="color"]::-webkit-color-swatch { border: 1px solid var(--tc-border); border-radius: 8px; }
.bl-color input[type="color"]::-moz-color-swatch { border: 1px solid var(--tc-border); border-radius: 8px; }
.bl-color input[type="color"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.bl-color span { font: 600 .85rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--tc-text); }
.bl-color small { margin-left: auto; font-size: .75rem; color: var(--tc-muted); }

.bl .it-actions__row [hidden], .bl [hidden] { display: none; }
.bl .it-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .10); }
.bl-select { width: 100%; padding: .6rem .8rem; font-size: .9rem; color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px; }
.bl-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bl-code { padding: 0 clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.5rem); }
.bl-code__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.bl-code__title { margin: 0; font-size: .95rem; font-weight: 700; color: var(--tc-text); }
.bl-code__head .it-btn { padding: .5rem .85rem; font-size: .85rem; }
.bl-code pre {
  margin: 0; max-height: 280px; overflow: auto; padding: 1rem; border-radius: 14px;
  background: var(--tc-surface); border: 1px solid var(--tc-border);
}
.bl-code code { font: .8rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--tc-text); white-space: pre-wrap; word-break: break-all; background: none; padding: 0; }

@media (max-width: 900px) { .bl-stage { min-height: 260px; } }