.controlsSection{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--primary-border-radious);width:100%;margin-bottom:1.5rem;padding:1.5rem}.controlsGrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem;display:grid}.controlGroup{flex-direction:column;gap:.5rem;display:flex}.controlGroup label{color:var(--color-text);font-size:.9rem;font-weight:600}.controlInput{background:var(--color-bg-secondary);color:var(--color-text);border:1px solid var(--color-border);box-sizing:border-box;border-radius:.4rem;outline:none;width:100%;padding:.6rem .9rem;font-size:1rem;transition:border-color .18s}.controlInput:focus{border-color:var(--color-primary)}.colorInputWrapper{align-items:center;gap:.5rem;display:flex}.colorInput{border:1px solid var(--color-border);cursor:pointer;background:0 0;border-radius:.4rem;width:60px;height:40px;padding:0}.colorTextInput{background:var(--color-bg-secondary);color:var(--color-text);border:1px solid var(--color-border);box-sizing:border-box;border-radius:.4rem;outline:none;flex:1;padding:.6rem .9rem;font-family:monospace;font-size:1rem;transition:border-color .18s}.colorTextInput:focus{border-color:var(--color-primary)}.controlActions{border-top:1px solid var(--color-border);justify-content:flex-end;gap:1rem;padding-top:1rem;display:flex}.pathEditorSection{width:100%;height:100%}.previewSection{background:var(--color-bg-tertiary);border-radius:var(--primary-border-radious);flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.previewContainer{background:repeating-conic-gradient(var(--color-bg-secondary)0% 25%,var(--color-bg-tertiary)0% 50%)50%/20px 20px;background-color:var(--color-bg-secondary);justify-content:center;align-items:center;width:100%;height:100%;padding:2rem;display:flex}.svgWrapper{background:var(--color-card);border-radius:.4rem;justify-content:center;align-items:center;width:100%;height:100%;padding:1rem;display:flex;box-shadow:0 2px 8px #0000001a}.svgPreview{object-fit:contain;width:100%;max-width:100%;height:100%;max-height:100%}.previewPlaceholder{color:var(--color-text);opacity:.5;text-align:center;padding:2rem;font-size:1.1rem}.codeOutput{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--primary-border-radious);width:100%;margin-top:2rem;overflow:hidden}.codeHeader{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.codeHeader h3{color:var(--color-primary);margin:0;font-size:1.2rem}.codeContent{background:var(--color-bg-secondary);padding:1.5rem;overflow-x:auto}.codeContent pre{color:var(--color-text);white-space:pre-wrap;word-wrap:break-word;margin:0;font-family:Courier New,monospace;font-size:.9rem;line-height:1.6}.codeContent pre code{color:var(--color-text)}.actionButton.secondary{background:var(--color-bg-secondary);color:var(--color-text);border:1px solid var(--color-border)}.actionButton.secondary:hover{background:var(--color-bg-tertiary);border-color:var(--color-primary)}@media (min-width:768px){.formRow{gap:1rem;flex-direction:row!important}.pathEditorSection,.previewSection{width:50%}}