*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}:root{--c-primary: #2563eb;--c-primary-dark: #1d4ed8;--c-border: #e5e7eb;--c-border-strong: #d1d5db;--c-text: #1f2937;--c-text-light: #6b7280;--c-bg: #f6f7f9;--c-bg-pane: #ffffff;--c-accent: #4f8ef7;--radius: 6px;--font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif}html,body,#app{height:100%}body{font-family:var(--font);color:var(--c-text);background:var(--c-bg);overflow:hidden;font-size:14px}#app{display:flex;flex-direction:column}button{font-family:inherit;cursor:pointer}input,select,textarea{font-family:inherit;color:inherit}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px;padding:0 14px;background:var(--c-bg-pane);border-bottom:1px solid var(--c-border);flex-shrink:0}.toolbar-group{display:flex;align-items:center;gap:8px}.logo{font-weight:700;font-size:15px;margin-right:8px;letter-spacing:.5px}.btn{height:32px;padding:0 14px;border:1px solid var(--c-border-strong);border-radius:var(--radius);background:#fff;color:var(--c-text);font-size:13px;transition:background .15s,border-color .15s;white-space:nowrap}.btn:hover{background:#f3f4f6}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff}.btn.primary:hover{background:var(--c-primary-dark)}.btn.icon-btn{width:34px;padding:0;font-size:17px;line-height:1}.select,.input{height:32px;padding:0 8px;border:1px solid var(--c-border-strong);border-radius:var(--radius);background:#fff;font-size:13px}.custom-width{width:76px}.save-status{font-size:12px;color:var(--c-text-light);min-width:70px;text-align:right}.seg{display:inline-flex;border:1px solid var(--c-border-strong);border-radius:var(--radius);overflow:hidden;background:#fff}.seg button{height:32px;padding:0 14px;border:none;background:transparent;font-size:13px;color:var(--c-text-light)}.seg button+button{border-left:1px solid var(--c-border)}.seg button.active{background:var(--c-primary);color:#fff}.seg button:not(.active):hover{background:#f3f4f6}.workspace{flex:1;display:grid;min-height:0}.mode-split .workspace{grid-template-columns:minmax(340px,44%) 1fr}.mode-split .props-pane{display:none}.mode-visual .workspace{grid-template-columns:1fr 312px}.mode-visual .code-pane{display:none}.pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--c-bg-pane)}.code-pane{border-right:1px solid var(--c-border)}.preview-pane{background:var(--c-bg)}.props-pane{border-left:1px solid var(--c-border)}.pane-head{display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 12px;border-bottom:1px solid var(--c-border);font-size:13px;color:var(--c-text-light);flex-shrink:0;background:#fbfbfc}.code-tabs{gap:2px;justify-content:flex-start}.code-tabs button[data-pane]{height:100%;padding:0 14px;border:none;background:transparent;font-size:13px;color:var(--c-text-light);border-bottom:2px solid transparent;margin-bottom:-1px}.code-tabs button[data-pane].active{color:var(--c-primary);border-bottom-color:var(--c-primary);font-weight:600}.code-tabs button[data-pane]:hover{color:var(--c-text)}.flex-spacer{flex:1}.mini-btn{height:24px;padding:0 10px;font-size:12px}.code-views{flex:1;min-height:0;position:relative}.cm-view{position:absolute;inset:0;display:none}.cm-view.active{display:block}.cm-view .cm-editor{height:100%}.cm-editor.cm-focused{outline:none!important}.cm-flash-line{background:#4f8ef729;transition:background .4s}.cm-css-match-line{background:#4f8ef71a}.preview-stage{flex:1;min-height:0;display:flex;justify-content:center;padding:14px;overflow:auto;background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(0,0,0,.015) 12px,rgba(0,0,0,.015) 24px),#eceef1}#preview-frame{width:100%;height:100%;background:#fff;border:1px solid var(--c-border-strong);border-radius:4px;box-shadow:0 2px 10px #0000000f;flex-shrink:0}.preview-tip{font-size:12px;color:#b0b5bd}.quickbar{position:absolute;z-index:20;display:flex;align-items:center;gap:4px;padding:4px 6px;background:#1f2937;border-radius:var(--radius);box-shadow:0 4px 14px #00000040;font-size:12px;color:#e5e7eb}.quickbar:after{content:"";position:absolute;left:14px;bottom:-4px;width:8px;height:8px;background:#1f2937;transform:rotate(45deg)}.qb-tag{padding:2px 6px;background:#ffffff1f;border-radius:4px;font-family:ui-monospace,Consolas,monospace;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qb-sep{width:1px;height:18px;background:#ffffff2e;margin:0 2px}.qb-item{display:flex;align-items:center}.qb-color{width:24px;height:24px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:4px;background:transparent;cursor:pointer}.qb-size{width:46px;height:24px;border:1px solid rgba(255,255,255,.25);border-radius:4px;background:#ffffff14;color:#e5e7eb;font-size:12px;text-align:center}.qb-btn{min-width:24px;height:24px;padding:0 4px;border:none;border-radius:4px;background:transparent;color:#d1d5db;font-size:12px;display:inline-flex;align-items:center;justify-content:center}.qb-btn:hover{background:#ffffff24}.qb-btn.on{background:var(--c-accent);color:#fff}.qb-btn b,.qb-btn i{font-size:13px}.qb-css{font-family:ui-monospace,Consolas,monospace}.qb-css.qb-has{color:#93c5fd}.js-error-bar{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:30;max-width:calc(100% - 60px);display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;background:#dc2626;color:#fff;border-radius:6px;box-shadow:0 4px 14px #dc262659;font-size:12px}.js-error-icon{font-weight:700;flex-shrink:0}.js-error-msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Consolas,monospace}.js-error-close{border:none;background:transparent;color:#fff;font-size:16px;width:22px;height:22px;border-radius:4px;flex-shrink:0;cursor:pointer}.js-error-close:hover{background:#fff3}.breadcrumb{position:absolute;left:12px;bottom:10px;z-index:20;display:flex;align-items:center;gap:2px;padding:4px 8px;background:#1f2937eb;border-radius:6px;font-size:12px;max-width:calc(100% - 24px);overflow:hidden}.crumb{border:none;background:transparent;color:#d1d5db;font-family:ui-monospace,Consolas,monospace;font-size:12px;padding:2px 6px;border-radius:4px;cursor:pointer;white-space:nowrap}.crumb:hover{background:#ffffff24;color:#fff}.crumb.current{background:var(--c-accent);color:#fff}.crumb-sep{color:#6b7280;font-size:10px}.props-body{flex:1;min-height:0;overflow-y:auto;padding:10px 12px 24px}.props-empty{margin-top:60px;text-align:center;color:#b0b5bd;font-size:13px;line-height:2}.props-target{padding:8px 10px;margin-bottom:10px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--radius);font-size:12px;color:#1d4ed8}.props-target code{font-family:ui-monospace,Consolas,monospace;font-weight:700}.props-target .dim{color:#6b7280}.props-section{border:1px solid var(--c-border);border-radius:var(--radius);margin-bottom:10px;background:#fff}.props-section>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:9px 12px;font-size:13px;font-weight:600;cursor:pointer;user-select:none}.props-section>summary::-webkit-details-marker{display:none}.props-section>summary:after{content:"▾";color:var(--c-text-light);font-size:11px}.props-section:not([open])>summary:after{content:"▸"}.props-section>summary:hover{background:#f9fafb;border-radius:var(--radius)}.props-section .section-body{padding:4px 12px 12px}.prop-row{display:flex;align-items:center;gap:8px;margin-top:8px}.prop-label{width:62px;flex-shrink:0;font-size:12px;color:var(--c-text-light);text-align:right}.prop-input,.prop-select,.prop-textarea{flex:1;min-width:0;height:30px;padding:0 8px;border:1px solid var(--c-border-strong);border-radius:5px;font-size:12px;background:#fff}.prop-input:focus,.prop-select:focus,.prop-textarea:focus{outline:none;border-color:var(--c-accent)}.prop-textarea{height:auto;padding:6px 8px;resize:vertical;line-height:1.6}.prop-color{display:flex;gap:6px;flex:1;min-width:0}.prop-color-picker{width:32px;height:30px;padding:2px;border:1px solid var(--c-border-strong);border-radius:5px;background:#fff;cursor:pointer;flex-shrink:0}.prop-color-text{flex:1;min-width:0}.prop-actions{margin-top:10px;display:flex;gap:8px}.prop-actions .btn{flex:1;height:30px;font-size:12px}.modal-mask{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#11182773;padding:24px}.modal{width:560px;max-width:100%;max-height:86vh;display:flex;flex-direction:column;background:#fff;border-radius:10px;box-shadow:0 20px 50px #00000040;overflow:hidden}.modal-wide{width:760px}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--c-border);font-size:15px;font-weight:600}.modal-close{border:none;background:transparent;font-size:20px;color:var(--c-text-light);width:30px;height:30px;border-radius:5px}.modal-close:hover{background:#f3f4f6;color:var(--c-text)}.modal-body{padding:16px 18px;overflow-y:auto;min-height:0}.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--c-border)}.import-textarea{width:100%;height:260px;padding:10px;border:1px solid var(--c-border-strong);border-radius:var(--radius);font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.6;resize:vertical}.import-textarea:focus{outline:none;border-color:var(--c-accent)}.modal-actions{display:flex;align-items:center;gap:10px;margin-top:12px}.hint{font-size:12px;color:var(--c-text-light)}.export-note{font-size:12px;color:var(--c-text-light);margin:10px 0 12px;line-height:1.6}.export-file{border:1px solid var(--c-border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}.export-file-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f9fafb;border-bottom:1px solid var(--c-border);font-size:12px}.export-file-name{font-family:ui-monospace,Consolas,monospace;font-weight:600}.export-file-size{color:var(--c-text-light);margin-left:8px}.export-file-head .btn{height:26px;padding:0 10px;font-size:12px;margin-left:8px}.export-file pre{max-height:220px;overflow:auto;padding:10px 12px;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;line-height:1.55;background:#fff;color:#374151;white-space:pre-wrap;word-break:break-all}.toast{position:fixed;left:50%;bottom:36px;transform:translate(-50%);z-index:200;padding:9px 20px;background:#1f2937;color:#fff;border-radius:999px;font-size:13px;box-shadow:0 6px 20px #00000040}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#cfd3da;border-radius:5px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#b3b9c2;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-track{background:transparent}