:root{--bg:#0f0f1a;--surface:#1a1a2e;--surface-2:#22223a;--border:#2d2d4f;--text:#eef;--muted:#77a;--accent:#66c;--accent-hover:#77d;--danger:#c44;--radius:6px;--font:"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--font-mono:"DM Mono", ui-monospace, "Cascadia Code", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;font-size:14px;line-height:1.5}.app{max-width:980px;margin:0 auto;padding:48px 24px 80px}.app-header{margin-bottom:42px}.app-header h1{letter-spacing:-.08em;color:#fff;margin:6px 0 16px;font-size:clamp(2.3rem,5vw,4.6rem);font-weight:700;line-height:.9}.app-subtitle{color:#77747b;max-width:640px;margin:0;font-size:14px;line-height:1.5}.app-main{flex-direction:column;gap:28px;display:flex}.output-panel{z-index:10;background:var(--bg);padding-bottom:12px;position:sticky;top:0}.form-group{flex-direction:column;gap:6px;margin-bottom:20px;display:flex}.section-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px;font-size:11px;font-weight:500;display:block}.text-input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);font-family:var(--font);outline:none;padding:8px 12px;font-size:14px;transition:border-color .15s}.text-input:focus{border-color:var(--accent)}.field-list{flex-direction:column;gap:8px;display:flex}.field-row{align-items:center;gap:6px;display:flex}.field-reorder{flex-direction:column;gap:1px;display:flex}.field-input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font);outline:none;flex:1;min-width:0;padding:7px 10px;font-size:13px;transition:border-color .15s}.field-input:focus{border-color:var(--accent)}.field-key{flex:1.4;font-weight:600}.field-value{flex:1}.btn-icon{border:1px solid var(--border);color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border-radius:4px;padding:2px 4px;font-size:10px;line-height:1;transition:color .15s,border-color .15s}.btn-icon:hover:not(:disabled){color:var(--text);border-color:var(--accent)}.btn-icon:disabled{opacity:.3;cursor:default}.btn-remove{color:var(--muted);padding:2px 6px;font-size:14px}.btn-remove:hover:not(:disabled){color:var(--danger);border-color:var(--danger)}.field-color-cell{opacity:.45;flex-shrink:0;align-items:center;gap:3px;transition:opacity .15s;display:flex}.field-color-cell:hover,.field-color-set{opacity:1}.field-color-pick{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:4px;width:26px;height:26px;padding:2px}.btn-color-clear{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:13px;line-height:1}.btn-color-clear:hover{color:var(--text)}.btn-add{border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);cursor:pointer;font-family:var(--font);background:0 0;align-self:flex-start;margin-top:4px;padding:6px 14px;font-size:13px;transition:color .15s,border-color .15s}.btn-add:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}.btn-add:disabled{opacity:.4;cursor:default}.preview-section{flex-direction:column;gap:8px;display:flex}.preview-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);justify-content:center;align-items:center;min-height:100px;padding:24px;display:flex}.preview-container svg{max-width:100%;height:auto;display:block}.style-panel{border-top:1px solid var(--border);margin-top:24px;padding-top:16px}.style-panel-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.style-reset-btn{border:1px solid var(--border);border-radius:var(--radius);color:var(--muted);cursor:pointer;font-family:var(--font);background:0 0;padding:3px 10px;font-size:11px;transition:color .15s,border-color .15s}.style-reset-btn:hover{color:var(--danger);border-color:var(--danger)}.style-section{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:4px;overflow:hidden}.style-section-toggle{background:var(--surface);width:100%;color:var(--text);cursor:pointer;font-family:var(--font);text-align:left;border:none;justify-content:space-between;align-items:center;padding:8px 12px;font-size:12px;font-weight:600;transition:background .15s;display:flex}.style-section-toggle:hover{background:var(--surface-2)}.style-section-chevron{color:var(--muted);font-size:9px}.style-section-body{padding:10px 12px 4px}.style-row{align-items:center;gap:10px;margin-bottom:8px;display:flex}.style-row-block{align-items:flex-start}.style-row-label{color:var(--muted);flex-shrink:0;width:100px;padding-top:2px;font-size:12px}.style-slider{accent-color:var(--accent);cursor:pointer;flex:1;height:4px}.style-row-val{font-family:var(--font-mono);color:var(--text);text-align:right;flex-shrink:0;width:44px;font-size:11px}.style-sub-group{flex-direction:column;flex:1;gap:5px;display:flex}.style-sub-row{align-items:center;gap:8px;display:flex}.style-sub-label{color:var(--muted);flex-shrink:0;width:36px;font-size:11px}.style-align-group{flex:1;gap:4px;display:flex}.style-align-btn{background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;border-radius:4px;flex:1;padding:4px 0;font-size:14px;transition:background .15s,color .15s,border-color .15s}.style-align-btn:hover{background:var(--border);color:var(--text)}.style-align-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.style-color-wrap{flex:1;align-items:center;gap:8px;display:flex}.style-color{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:4px;flex-shrink:0;width:32px;height:24px;padding:2px}.style-color-hex{color:var(--muted);text-align:left;width:auto;font-family:monospace;font-size:11px}.action-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;display:flex}.action-primary{flex-wrap:wrap;gap:8px;display:flex}.action-secondary{gap:4px;display:flex}.btn-action{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;font-family:var(--font);padding:8px 16px;font-size:13px;transition:background .15s,border-color .15s}.btn-action:hover{background:var(--surface);border-color:var(--accent)}.btn-primary{background:var(--accent);border-color:var(--accent);font-weight:600}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-ghost{color:var(--muted);background:0 0;border-color:#0000;padding:8px 10px;font-size:12px}.btn-ghost:hover{color:var(--text);background:0 0;border-color:#0000}.btn-png-group{align-items:stretch;gap:0;display:flex}.btn-png-group .btn-action{border-radius:var(--radius) 0 0 var(--radius)}.png-scale-select{background:var(--accent);border:1px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;color:#fff;cursor:pointer;font-family:var(--font);border-left:1px solid #fff3;outline:none;padding:0 8px;font-size:12px;font-weight:600}.png-scale-select:hover{background:var(--accent-hover);border-color:var(--accent-hover);border-left-color:#fff3}.svg-import{flex-direction:column;gap:8px;margin-bottom:4px;display:flex}.svg-import-trigger{align-items:center;gap:6px;display:flex}.svg-import-thumb{background:var(--surface);border:1px solid var(--accent);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;padding:3px;display:flex;overflow:hidden}.svg-import-thumb svg{max-width:100%;max-height:100%}.svg-trigger-btn{border:1px solid var(--border);border-radius:var(--radius);color:var(--muted);cursor:pointer;font-family:var(--font);background:0 0;padding:3px 10px;font-size:12px;transition:color .15s,border-color .15s}.svg-trigger-btn:hover{color:var(--text);border-color:var(--accent)}.svg-remove-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:18px;line-height:1;transition:color .15s}.svg-remove-btn:hover{color:var(--danger)}.svg-add-btn{border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);cursor:pointer;font-family:var(--font);background:0 0;padding:5px 12px;font-size:12px;transition:color .15s,border-color .15s}.svg-add-btn:hover,.svg-add-btn.active{color:var(--accent);border-color:var(--accent)}.svg-import-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:6px;padding:8px;display:flex}.svg-import-tabs{gap:4px;display:flex}.svg-tab-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--muted);cursor:pointer;flex:1;padding:4px 0;font-size:12px;transition:background .15s,color .15s}.svg-tab-btn:hover{background:var(--border);color:var(--text)}.svg-tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.svg-import-body{flex-direction:column;gap:6px;display:flex}.svg-paste{box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);resize:vertical;padding:6px 8px;font-family:monospace;font-size:11px}.svg-paste:focus{border-color:var(--accent);outline:none}.svg-url-row{gap:6px;display:flex}.svg-url-input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font);flex:1;padding:5px 8px;font-size:12px}.svg-url-input:focus{border-color:var(--accent);outline:none}.svg-apply-btn{background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);color:#fff;font-family:var(--font);cursor:pointer;white-space:nowrap;padding:5px 12px;font-size:12px;font-weight:600}.svg-apply-btn:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.svg-apply-btn:disabled{opacity:.4;cursor:default}.svg-apply-btn.full{width:100%}.svg-paste-hint{color:var(--muted);font-size:11px;line-height:1.4}.svg-paste-hint a{color:var(--accent);text-decoration:none}.svg-paste-hint a:hover{text-decoration:underline}.svg-error{color:#f87171;font-size:11px}