main{flex:1;display:flex;flex-direction:column;overflow:hidden}.toolbar{padding:12px 24px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.panels{flex:1;display:flex;overflow:hidden}.panel{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--border)}.panel:last-child{border-right:none}.panel-hdr{height:40px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:var(--bg3);border-bottom:1px solid var(--border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.content-wrap{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding:16px;gap:16px;overflow-y:auto}.config-grid{display:grid;grid-template-columns:1fr 1fr 40px 1fr;gap:12px;align-items:end;background:var(--bg2);padding:14px;border:1px solid var(--border);border-radius:var(--r)}.config-item{display:flex;flex-direction:column;gap:6px}.config-item.full-width{grid-column:1 / -1}.config-item label{font-size:11px;font-weight:500;color:var(--muted);display:flex;flex-direction:column;gap:6px}.select-field,.num-field{background:var(--bg);border:1px solid var(--border);color:#fff;padding:8px 12px;border-radius:var(--r);outline:none;font-size:13px;font-family:inherit;transition:border-color .2s;width:100%}.select-field:focus,.num-field:focus{border-color:var(--accent)}.aspect-lock-wrap{display:flex;justify-content:center;align-items:center;height:38px}#btnLockRatio{color:var(--muted);border:1px solid var(--border);height:38px;width:38px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:var(--r);cursor:pointer;transition:all .2s}#btnLockRatio:hover{background:var(--bg3);color:#fff}#btnLockRatio.active{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}.bg-settings-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.checkbox-label{display:flex;align-items:center;gap:8px;font-size:12px;color:#fff;cursor:pointer}.checkbox-label input[type=checkbox]{cursor:pointer;width:16px;height:16px;accent-color:var(--accent)}.color-picker-input{border:0;padding:0;width:24px;height:24px;background:none;cursor:pointer;outline:none}.color-text-input{background:var(--bg);border:1px solid var(--border);color:#fff;padding:4px 8px;border-radius:var(--r);font-family:JetBrains Mono,monospace;font-size:12px;width:80px;outline:none}.preview-box{display:flex;flex-direction:column;gap:8px;flex:1;min-height:240px}.preview-title{font-size:12px;color:var(--muted);font-weight:500}.preview-container{flex:1;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(45deg,#21262d 25%,transparent 25%),linear-gradient(-45deg,#21262d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#21262d 75%),linear-gradient(-45deg,transparent 75%,#21262d 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;border:1px solid var(--border);border-radius:var(--r);overflow:auto;padding:16px;min-height:200px;background-color:var(--bg);position:relative}.preview-canvas-render,#svgPreviewContainer svg{max-width:100%;max-height:320px;object-fit:contain;display:none;border:1px dashed rgba(255,255,255,.15);border-radius:4px;box-shadow:0 4px 20px #0000004d}#svgPreviewContainer svg{display:block;max-width:100%;height:auto}.drop-zone{border:2px dashed var(--border);border-radius:var(--r);padding:36px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:all .2s;text-align:center;color:var(--muted);background:var(--bg)}.drop-zone:hover{border-color:var(--accent);background:var(--bg2)}.drop-zone.dragover{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}.info-row{display:flex;gap:16px;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);font-size:11px;flex-wrap:wrap;align-items:center}.info-item{display:flex;align-items:center;gap:6px}.info-lbl{color:var(--muted)}.info-val{font-family:JetBrains Mono,monospace;color:var(--accent);font-weight:500}.output-container{display:flex;flex-direction:column;gap:8px}.tabs-nav-wrapper{overflow-x:auto;border-bottom:1px solid var(--border)}.output-tabs{display:flex;gap:4px;padding-bottom:2px;white-space:nowrap}.output-tab-btn{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);padding:6px 12px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;border-radius:var(--r) var(--r) 0 0}.output-tab-btn:hover{color:#fff;background:var(--bg3)}.output-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--bg3)}.tracing-settings-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:12px}.tracing-settings-panel .settings-title{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}.settings-item label{font-size:11px;font-weight:500;color:var(--muted);display:flex;flex-direction:column;gap:6px}.select-field.sm,.num-field.sm{padding:6px 10px;font-size:12px}.textarea-wrap{position:relative;flex:1;display:flex;flex-direction:column}.textarea-wrap-svg{position:relative;height:120px;flex:none;display:flex;flex-direction:column}textarea{flex:1;width:100%;background:var(--bg);border:1px solid var(--border);color:#fff;padding:12px;border-radius:var(--r);outline:none;font-family:JetBrains Mono,monospace;font-size:12px;resize:none}textarea:focus{border-color:var(--accent)}.CodeMirror{background:var(--bg)!important;border:1px solid var(--border);border-radius:var(--r);font-family:JetBrains Mono,monospace;color:#adbac7!important;font-size:12px}.CodeMirror-gutters{background-color:var(--bg2)!important;border-right:1px solid var(--border)!important}.CodeMirror-placeholder{color:var(--muted)!important}.textarea-wrap .CodeMirror{flex:1;height:100%!important}.textarea-wrap-svg .CodeMirror{flex:1;height:120px!important;min-height:120px!important}.actions-row{display:flex;gap:12px;width:100%;justify-content:flex-start;align-items:center;flex-wrap:wrap}@media(max-width:900px){.panels{flex-direction:column;overflow:auto}.panel{flex:none;min-height:auto;border-right:none;border-bottom:1px solid var(--border)}.panel:last-child{border-bottom:none}}