.config-panel{margin-top:12px;border:1px solid var(--color-border-panel);border-radius:10px;overflow:hidden}.config-summary{padding:8px 12px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--color-text-secondary);background:var(--color-bg-preview);-webkit-user-select:none;user-select:none}.config-summary:hover{background:var(--color-bg-button-hover)}.config-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px}.config-row{display:flex;align-items:center;gap:8px}.config-label{font-size:.82rem;color:var(--color-text-tertiary);min-width:36px;font-weight:600}.config-select{flex:1;padding:4px 8px;border:1px solid var(--color-border-input);border-radius:6px;font-size:.82rem;background:var(--color-bg-control);color:var(--color-text-primary);cursor:pointer}.config-select:disabled{opacity:.4;cursor:not-allowed}.config-reset{align-self:flex-end;font-size:.78rem;padding:4px 10px}.codemirror-container{width:100%;min-height:320px;border-radius:10px;border:1px solid var(--color-border-input);overflow:hidden}.codemirror-container .cm-editor{height:100%;min-height:320px;font-family:Menlo,SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.9rem}.codemirror-container .cm-editor.cm-focused{outline:none}.codemirror-container .cm-scroller{overflow:auto}.editor-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.editor-header-left{display:flex;align-items:center;gap:8px}.docs-link{font-size:.78rem;color:var(--color-text-link);text-decoration:none;border:1px solid var(--color-border-link);border-radius:999px;padding:2px 8px;transition:background .15s}.docs-link:hover{background:var(--color-bg-button-hover)}.template-section{margin-top:10px;display:flex;flex-direction:column;gap:8px}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:6px;max-height:140px;overflow-y:auto;padding-right:2px}.template-btn{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.2;gap:2px;font-size:.82rem;padding:6px 10px}.template-btn small{color:var(--color-text-secondary);font-size:.68rem}.template-actions{display:flex;gap:8px}.panel.drag-over{outline:2px dashed var(--color-text-link);outline-offset:-2px}.codemirror-container{position:relative}.drop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--color-bg-overlay, rgba(0, 0, 0, .4));color:#fff;font-size:1rem;font-weight:600;z-index:10;border-radius:10px;pointer-events:none}.file-input-hidden{position:absolute;width:0;height:0;overflow:hidden;opacity:0}.error-panel{color:var(--color-text-primary)}.error-panel p{margin:0}.error-panel .muted{color:var(--color-text-muted)}.error-panel details{margin-top:6px;color:var(--color-text-secondary);font-size:.85rem}.error-panel summary{cursor:pointer}.error-panel details p{margin:6px 0 0;white-space:pre-wrap}.error{color:var(--color-text-error);margin:0}.status-muted{color:var(--color-text-success);margin-top:6px}.export-section{margin-top:10px;display:flex;flex-direction:column;gap:8px}.png-size-row{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--color-text-tertiary)}.png-size-label{font-weight:600;white-space:nowrap}.png-size-options{display:flex;gap:2px;border:1px solid var(--color-border-panel);border-radius:999px;overflow:hidden}.png-size-option{padding:3px 10px;cursor:pointer;font-size:.78rem;color:var(--color-text-secondary);background:var(--color-bg-control);transition:background .15s}.png-size-option.active{background:var(--color-bg-control-active);color:var(--color-text-button);font-weight:600}.png-size-option input{display:none}.png-size-input{width:72px;padding:3px 6px;border:1px solid var(--color-border-panel);border-radius:6px;font-size:.8rem;text-align:center;background:var(--color-bg-control);color:var(--color-text-primary)}.png-size-input:disabled{opacity:.4;cursor:not-allowed}.actions{display:flex;gap:8px;flex-wrap:wrap}.preview{min-height:330px;border-radius:10px;border:1px solid var(--color-border-input);overflow:hidden;padding:10px;background:var(--color-bg-preview);cursor:grab;touch-action:none}.preview:active{cursor:grabbing}.preview-inner svg{max-width:none;display:block}.placeholder{margin:0;color:var(--color-text-muted)}.status-text{color:var(--color-text-status)}.preview-controls{display:flex;align-items:center;gap:10px}.zoom-controls{display:flex;align-items:center;border:1px solid var(--color-border-panel);border-radius:999px;overflow:hidden}.zoom-btn{border:none;background:var(--color-bg-control);color:var(--color-text-secondary);border-radius:0;padding:2px 8px;font-size:.78rem;line-height:1;min-width:28px;cursor:pointer}.zoom-btn:hover{background:var(--color-bg-button-hover);filter:none}.zoom-label{border-left:1px solid var(--color-border-panel);border-right:1px solid var(--color-border-panel);font-variant-numeric:tabular-nums;min-width:48px;text-align:center}.resize-handle{display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none;width:8px;border-radius:4px;transition:background .15s}.resize-handle:hover,.resize-handle:active{background:var(--color-bg-button)}.resize-handle-line{width:2px;height:32px;border-radius:1px;background:var(--color-border-panel);transition:background .15s}.resize-handle:hover .resize-handle-line,.resize-handle:active .resize-handle-line{background:var(--color-border-accent)}:root{font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;--color-bg-gradient-start: #eff6ff;--color-bg-gradient-mid: #f8fafc;--color-bg-gradient-end: #f1f5f9;--color-bg-panel: #ffffff;--color-bg-panel-translucent: #ffffffcc;--color-bg-preview: #f8fafc;--color-bg-button: #dbeafe;--color-bg-button-selected: #2563eb;--color-bg-button-hover: #eff6ff;--color-bg-control: #ffffff;--color-bg-control-active: #dbeafe;--color-text-primary: #0f172a;--color-text-secondary: #334155;--color-text-tertiary: #475569;--color-text-muted: #64748b;--color-text-footer: #94a3b8;--color-text-button: #1e3a8a;--color-text-button-selected: #eff6ff;--color-text-link: #2563eb;--color-text-status: #1d4ed8;--color-text-error: #b91c1c;--color-text-success: #0f766e;--color-border-panel: #cbd5e1;--color-border-input: #94a3b8;--color-border-button: #93c5fd;--color-border-header: #dbeafe;--color-border-link: #bfdbfe;--color-border-accent: #2563eb;--color-shadow-panel: #0f172a0d;--color-share-btn-bg: #2563eb;color:var(--color-text-primary);background:linear-gradient(180deg,var(--color-bg-gradient-start) 0%,var(--color-bg-gradient-mid) 55%,var(--color-bg-gradient-end) 100%)}[data-theme=dark]{--color-bg-gradient-start: #0f172a;--color-bg-gradient-mid: #1e293b;--color-bg-gradient-end: #0f172a;--color-bg-panel: #1e293b;--color-bg-panel-translucent: #1e293bcc;--color-bg-preview: #0f172a;--color-bg-button: #1e3a5f;--color-bg-button-selected: #3b82f6;--color-bg-button-hover: #1e3a5f;--color-bg-control: #334155;--color-bg-control-active: #1e3a5f;--color-text-primary: #e2e8f0;--color-text-secondary: #cbd5e1;--color-text-tertiary: #94a3b8;--color-text-muted: #64748b;--color-text-footer: #475569;--color-text-button: #bfdbfe;--color-text-button-selected: #ffffff;--color-text-link: #60a5fa;--color-text-status: #60a5fa;--color-text-error: #f87171;--color-text-success: #34d399;--color-border-panel: #334155;--color-border-input: #475569;--color-border-button: #1e3a5f;--color-border-header: #334155;--color-border-link: #1e3a5f;--color-border-accent: #3b82f6;--color-shadow-panel: #00000033;--color-share-btn-bg: #3b82f6}*{box-sizing:border-box}body{margin:0;min-height:100vh}.app-shell{width:min(1100px,95vw);margin:24px auto;padding:20px;display:grid;gap:16px}.header{padding:16px;border-radius:12px;background:var(--color-bg-panel-translucent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--color-border-header)}.header-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.header-actions{display:flex;align-items:center;gap:8px}.header h1{margin:0;font-size:1.45rem}.header p{margin:8px 0 0;color:var(--color-text-tertiary)}.share-btn{background:var(--color-share-btn-bg);color:#fff;border:1px solid var(--color-share-btn-bg);padding:6px 16px;font-weight:600}.panel-grid{display:grid;gap:0 0}.panel{background:var(--color-bg-panel);border:1px solid var(--color-border-panel);border-radius:14px;padding:16px;box-shadow:0 10px 24px var(--color-shadow-panel)}.panel-header{margin:0 0 10px;display:flex;justify-content:space-between;align-items:center;color:var(--color-text-secondary);font-weight:600;font-size:.95rem}.badge{font-size:.8rem;color:var(--color-text-secondary);padding:3px 8px;border-radius:999px;border:1px solid var(--color-border-panel)}button{border:1px solid var(--color-border-button);background:var(--color-bg-button);color:var(--color-text-button);border-radius:999px;padding:8px 12px;font-size:.85rem;cursor:pointer}button:hover{filter:brightness(.96)}button.selected{background:var(--color-bg-button-selected);color:var(--color-text-button-selected);border-color:var(--color-bg-button-selected)}button:disabled{opacity:.5;cursor:not-allowed}.app-footer{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--color-text-footer);padding:0 4px}@media(max-width:960px){.panel-grid,.panel-grid[style]{grid-template-columns:1fr}.resize-handle{display:none}.app-shell{margin:12px auto;width:min(100%,95vw)}}