.svg-layout{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;gap:8px 18px;margin-top:18px;height:520px}.svg-row{display:flex;align-items:center;gap:5px;min-height:38px}.svg-spacer{flex:1}.svg-add-file-btn{height:38px;font-size:13px;padding:0 14px;flex-shrink:0}.svg-dim-input{width:68px;flex-shrink:0;padding-left:8px;padding-right:8px}.svg-dim-input:disabled,.svg-aspect-icon.is-disabled,.svg-scale-seg.is-disabled,.svg-pattern-seg.is-disabled,.svg-color-swatch.is-disabled{opacity:.4;pointer-events:none}.svg-aspect-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:var(--page);color:var(--orange);cursor:pointer;flex-shrink:0;transition:background .15s ease,color .15s ease}.svg-aspect-icon:hover{background:var(--orange-soft)}.svg-aspect-icon[aria-checked=false]{color:var(--muted-3)}.svg-aspect-icon[aria-checked=false]:hover{color:var(--orange)}.svg-aspect-icon:focus-visible{box-shadow:0 0 0 3px var(--orange-ring)}.svg-scale-seg .segment,.svg-pattern-seg .segment{font-size:12px;font-weight:700;padding:0 6px}.svg-input-wrap{min-height:0;border-radius:var(--radius-md)}.svg-input-wrap.drag-over .svg-textarea{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-ring)}.svg-textarea{display:block;width:100%;height:100%;padding:14px;border:1px solid var(--line);border-radius:var(--radius-md);font-family:SF Mono,Fira Code,Cascadia Code,Consolas,monospace;font-size:13px;line-height:1.55;color:var(--text);background:var(--page);resize:none;outline:none;tab-size:2;white-space:pre-wrap;overflow-wrap:break-word;word-break:break-all;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;transition:border-color .18s ease,box-shadow .18s ease}.svg-textarea::placeholder{color:var(--muted-2)}.svg-textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-ring)}@keyframes svg-error-flash{0%,to{border-color:var(--red);box-shadow:0 0 0 3px #ef44441f}50%{border-color:var(--line);box-shadow:none}}.svg-textarea.is-error{animation:svg-error-flash .6s ease-in-out 3;border-color:var(--red)}.svg-preview-wrap{position:relative;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--page);display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0;min-width:0}#svg-canvas{display:block;flex-shrink:0;max-width:calc(100% - 32px);max-height:calc(100% - 56px);object-fit:contain;min-height:0;min-width:0}#svg-canvas.is-hidden{display:none}.svg-preview-dim{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:6px;background:var(--text);color:var(--page);font-size:11px;font-weight:700;font-family:SF Mono,Fira Code,Consolas,monospace;pointer-events:none;z-index:2}.svg-preview-wrap.has-preview .svg-preview-placeholder{display:none}.svg-preview-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:14px;pointer-events:none}.svg-download-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:3}.svg-preview-wrap.has-preview:hover .svg-download-overlay,.svg-preview-wrap.has-preview:focus-within .svg-download-overlay{opacity:1;pointer-events:auto}.svg-download-overlay .svg-download-icon{width:48px;height:48px;border-radius:50%;border:none;background:var(--orange);color:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 4px 16px #ff6a384d;pointer-events:auto}.svg-download-overlay .svg-download-icon:hover{transform:scale(1.08);box-shadow:0 6px 24px #ff6a3866}.svg-download-overlay .svg-download-icon:disabled{opacity:.4;cursor:not-allowed;transform:none}.svg-download-overlay .svg-download-icon svg{width:20px;height:20px}.svg-preview-wrap.pattern-checker{background-color:var(--page);background-image:linear-gradient(45deg,var(--page-soft) 25%,transparent 25%),linear-gradient(-45deg,var(--page-soft) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--page-soft) 75%),linear-gradient(-45deg,transparent 75%,var(--page-soft) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.svg-preview-wrap.pattern-grid{background-color:var(--page);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:16px 16px}.svg-preview-wrap.pattern-dots{background-color:var(--page);background-image:radial-gradient(var(--muted-3) 1.5px,transparent 1.5px);background-size:12px 12px}.svg-preview-wrap.pattern-diagonal{background-color:var(--page);background-image:repeating-linear-gradient(45deg,var(--line-2) 0,var(--line-2) 1px,transparent 1px,transparent 8px)}.svg-color-swatches{display:flex;align-items:center;gap:5px}.svg-color-swatch{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--line-strong);background:var(--page);padding:0;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.svg-color-swatch:hover{border-color:var(--muted-3)}.svg-color-swatch.active{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange-ring)}.svg-color-swatch:focus-visible{box-shadow:0 0 0 3px var(--orange-ring)}.svg-swatch-inner{display:block;width:16px;height:16px;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 1px #0000001a}.svg-swatch-transparent{background:transparent;background-image:linear-gradient(45deg,var(--page-soft) 25%,transparent 25%),linear-gradient(-45deg,var(--page-soft) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--page-soft) 75%),linear-gradient(-45deg,transparent 75%,var(--page-soft) 75%);background-size:7px 7px;background-position:0 0,0 3.5px,3.5px -3.5px,-3.5px 0}.svg-swatch-add{display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--muted);background:var(--page-soft)}.svg-color-picker-label{position:relative}@media(max-width:768px){.svg-layout{grid-template-columns:1fr;height:auto;min-height:auto}.svg-textarea{min-height:200px}.svg-preview-wrap{min-height:280px}.svg-scale-seg .segment{font-size:11px;padding:0 4px}.svg-dim-input{width:60px;padding-left:6px;padding-right:6px}}@media(max-width:640px){.svg-scale-seg .segment{font-size:10px;padding:0 3px}.svg-pattern-seg .segment{font-size:11px;padding:0 4px}.svg-dim-input{width:52px;padding-left:4px;padding-right:4px}}