*,:before,:after{box-sizing:border-box}:root{--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "Cascadia Code", Consolas, monospace;--bg:#f5f5f5;--panel:#fff;--border:#ddd;--text:#333;--muted:#888;--accent:#5470c6;--accent-h:#3a56a7;--err:#c23531;font:14px/1.5 var(--sans);color:var(--text);background:var(--bg)}body{margin:0}#app{height:100vh;overflow:hidden}.page{flex-direction:column;height:100vh;overflow:hidden}header{background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:6px 16px;display:flex}header h1{margin:0;font-size:1rem;font-weight:600}.back-btn{border:1px solid var(--border);cursor:pointer;white-space:nowrap;background:#f0f0f0;border-radius:4px;padding:3px 10px;font-size:13px}.back-btn:hover{background:#e0e0e0}.backend-toggle{border:1px solid var(--border);border-radius:6px;display:inline-flex;overflow:hidden}.backend-toggle input[type=radio]{display:none}.backend-toggle label{cursor:pointer;color:#555;border-right:1px solid var(--border);-webkit-user-select:none;user-select:none;background:#f0f0f0;padding:3px 12px;font-size:12px;transition:background .12s}.backend-toggle label:last-of-type{border-right:none}.backend-toggle label.active{background:var(--accent);color:#fff}.backend-toggle label.unavail{opacity:.35;cursor:not-allowed;text-decoration:line-through}.gallery-actions{flex:1;align-items:center;gap:10px;margin-left:auto;display:flex}.gallery-actions-left{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;display:flex}.gallery-actions-right{flex-shrink:0;margin-left:auto}.thumb-controls{align-items:center;gap:8px;display:flex}.ctrl-label{color:var(--muted);font-size:12px}.switch-btn{border:1px solid var(--border);color:#555;cursor:pointer;-webkit-user-select:none;user-select:none;background:#f0f0f0;border-radius:6px;padding:3px 12px;font-size:12px;transition:background .12s,color .12s,border-color .12s}.switch-btn:hover{background:#e6e6e6}.switch-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}@media (width<=960px){.gallery-actions{flex-wrap:wrap;align-items:flex-start}.gallery-actions-left{flex:100%}.gallery-actions-right{margin-left:0}}.gallery-layout{flex:1;display:flex;overflow:hidden}.cat-nav{border-right:1px solid var(--border);scrollbar-width:thin;background:#fafafa;flex-direction:column;flex-shrink:0;gap:2px;width:140px;padding:8px 6px;display:flex;overflow-y:auto}.cat-new-btn{border:1px dashed var(--accent);color:var(--accent);cursor:pointer;text-align:center;background:#eef2ff;border-radius:6px;margin-bottom:6px;padding:5px 8px;font-size:12px;font-weight:600}.cat-new-btn:hover{background:#e0e7ff}.cat-nav-item{color:var(--text);border-radius:5px;align-items:center;gap:5px;padding:3px 6px;font-size:12px;text-decoration:none;transition:background .1s;display:flex}.cat-nav-item:hover{background:#e8eaf0}.cat-nav-item img{object-fit:contain;width:16px;height:16px}.gallery-content{flex-direction:column;flex:1;gap:0;padding:14px 18px;display:flex;overflow-y:auto}.gallery-section{margin-bottom:24px}.section-head{color:#444;border-bottom:1px solid var(--border);align-items:center;gap:6px;margin:0 0 8px;padding-bottom:5px;scroll-margin-top:8px;font-size:.9rem;font-weight:600;display:flex}.section-head img{object-fit:contain;width:18px;height:18px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;display:grid}.card{border:1px solid var(--border);cursor:pointer;text-align:left;font:inherit;color:inherit;background:#fff;border-radius:7px;flex-direction:column;padding:0;transition:box-shadow .15s,border-color .15s;display:flex;overflow:hidden}.card:hover{border-color:#bbb;box-shadow:0 2px 8px #0000001f}.card-thumb{aspect-ratio:4/3;background:#f8f8f8;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.card-thumb img{object-fit:contain;width:100%;height:100%}.card-thumb img.thumb-echarts{object-fit:cover;transform-origin:50%;transform:scale(1.06)}.card-icon-ph{object-fit:contain!important;width:40px!important;height:40px!important}.card-svg-thumb{justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.card-svg-thumb svg{max-width:100%;height:auto;max-height:100%}.card-loading{color:#bbb;letter-spacing:.1em;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.4rem;display:flex}.card-title{color:#555;background:#fff;border-top:1px solid #f0f0f0;padding:5px 7px;font-size:11px;line-height:1.3}.card-empty{cursor:pointer}.card-thumb-empty{color:var(--accent);background:#eef2ff;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:100%;height:100%;font-size:12px;font-weight:600;display:flex}.plus-icon{font-size:2rem;line-height:1}main{flex:1;display:flex;overflow:hidden}.panel{background:var(--panel);flex-direction:column;display:flex;overflow:hidden}.editor-panel{border-right:1px solid var(--border);flex:1;min-width:0}.output-panel{flex:1;min-width:0;overflow:auto}.tab-bar{border-bottom:1px solid var(--border);background:#f9f9f9;flex-shrink:0;align-items:center;gap:4px;padding:5px 8px;display:flex}.tab-bar button{border:1px solid var(--border);cursor:pointer;color:var(--text);background:#fff;border-radius:4px;padding:3px 12px;font-size:13px;transition:background .12s}.tab-bar button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.tab-bar button:hover:not(.active){background:#eee}.size-inputs{color:var(--muted);align-items:center;gap:8px;margin-left:6px;font-size:13px;display:flex}.size-inputs input[type=number]{border:1px solid var(--border);border-radius:3px;width:58px;padding:2px 4px;font-size:13px}.conv-error{color:var(--err);text-overflow:ellipsis;white-space:nowrap;max-width:280px;margin-left:8px;font-size:11px;overflow:hidden}.cm-wrap{flex-direction:column;flex:1;min-height:0;overflow:hidden}.cm-wrap .cm-editor{height:100%}.cm-wrap .cm-scroller{overflow:auto}.toolbar{border-top:1px solid var(--border);flex-shrink:0;align-items:center;gap:10px;padding:7px 12px;display:flex}.render-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:5px 16px;font-size:13px;transition:background .15s}.render-btn:hover{background:var(--accent-h)}.render-btn:disabled{cursor:not-allowed;background:#aaa}.status{color:var(--muted);font-size:12px}.status.error{color:var(--err)}.svg-output{justify-content:flex-start;align-items:flex-start;min-height:100%;padding:16px;display:flex}.svg-output svg{max-width:100%;height:auto}.placeholder{color:#bbb;font-size:13px}.echarts-output{padding:16px}