:root{--c-bg: #f0f2f5;--c-surface: #ffffff;--c-border: #e4e6ea;--c-border-2: #d0d5dd;--c-text: #101828;--c-text-2: #344054;--c-muted: #667085;--c-accent: #2563eb;--c-accent-lt: #eff6ff;--c-accent-bd: #bfdbfe;--c-danger: #dc2626;--c-danger-lt: #fef2f2;--c-success: #16a34a;--c-topbar: #0f172a;--c-sidebar-bg: #f8f9fb;--c-sb-hover: #f1f3f7;--c-sb-active: #eff6ff;--radius-sm: 6px;--radius: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);--shadow: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);--shadow-lg: 0 12px 28px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;--transition: .15s cubic-bezier(.4,0,.2,1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--c-bg);color:var(--c-text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,textarea,select{font-family:inherit}.builder-root{display:flex;flex-direction:column;height:100vh;overflow:hidden}.builder-topbar{display:flex;align-items:center;gap:8px;background:var(--c-topbar);color:#f1f5f9;padding:0 16px;height:54px;flex-shrink:0;border-bottom:1px solid #1e293b;z-index:100}.topbar-logo{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#fff;letter-spacing:-.2px;margin-right:4px}.topbar-logo .logo-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--c-accent);border-radius:7px;font-size:15px}.topbar-divider{width:1px;height:20px;background:#334155;margin:0 6px;flex-shrink:0}.topbar-page-name{font-size:13px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.topbar-spacer{flex:1}.device-toggle{display:flex;align-items:center;gap:2px;background:#1e293b;border-radius:var(--radius);padding:3px;margin:0 4px}.device-btn{display:flex;align-items:center;justify-content:center;width:32px;height:28px;border:none;background:transparent;color:#64748b;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);font-size:15px}.device-btn:hover{background:#334155;color:#cbd5e1}.device-btn.active{background:#334155;color:#fff}.topbar-deploy-group{display:flex;align-items:center;gap:6px}.server-status-dot{display:flex;align-items:center}.topbar-select{height:32px;padding:0 8px;background:#1e293b;border:1px solid #334155;border-radius:var(--radius);color:#cbd5e1;font-size:12px;font-family:var(--font);cursor:pointer;outline:none;max-width:140px}.topbar-select:focus{border-color:#475569}.topbar-select option{background:#1e293b}.btn-deploy{display:flex;align-items:center;gap:6px;background:#2563eb;color:#fff;border:none;border-radius:var(--radius);padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--transition)}.btn-deploy:hover:not(:disabled){background:#1d4ed8}.btn-deploy:disabled{opacity:.45;cursor:not-allowed}.deploy-status{font-size:11px;font-weight:600;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}.deploy-ok{color:#22c55e}.deploy-err{color:#f87171;cursor:help}.btn-export{display:flex;align-items:center;gap:6px;background:#22c55e;color:#fff;border:none;border-radius:var(--radius);padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:background var(--transition);white-space:nowrap}.btn-export:hover:not(:disabled){background:#16a34a}.btn-export:disabled{opacity:.7;cursor:not-allowed}.builder-body{display:flex;flex:1;overflow:hidden}.builder-sidebar{width:310px;flex-shrink:0;background:var(--c-sidebar-bg);border-right:1px solid var(--c-border);display:flex;flex-direction:column;overflow:hidden;position:relative}.sb-panel{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;background:var(--c-sidebar-bg);transition:transform .26s cubic-bezier(.4,0,.2,1);will-change:transform}.sb-panel-main{transform:translate(0)}.sb-panel-main.sb-out{transform:translate(-100%)}.sb-panel-detail{transform:translate(100%)}.sb-panel-detail.sb-in{transform:translate(0)}.sb-header{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--c-border);background:var(--c-surface);flex-shrink:0}.sb-back-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--c-border);background:var(--c-surface);border-radius:var(--radius-sm);cursor:pointer;color:var(--c-muted);transition:var(--transition);flex-shrink:0}.sb-back-btn:hover{background:var(--c-sb-hover);color:var(--c-text)}.sb-title{font-size:13px;font-weight:700;color:var(--c-text);flex:1}.sb-subtitle{font-size:11px;color:var(--c-muted);margin-top:1px}.sb-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}.sb-scroll::-webkit-scrollbar{width:4px}.sb-scroll::-webkit-scrollbar-track{background:transparent}.sb-scroll::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:2px}.sb-group-label{padding:14px 14px 4px;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--c-muted)}.sb-section-row{display:flex;align-items:center;gap:0;margin:2px 8px;border-radius:var(--radius);background:var(--c-surface);border:1px solid var(--c-border);cursor:pointer;transition:var(--transition);overflow:hidden;box-shadow:var(--shadow-sm)}.sb-section-row:hover{border-color:var(--c-accent-bd);background:var(--c-accent-lt)}.sb-section-row.active{border-color:var(--c-accent);background:var(--c-accent-lt)}.sb-section-row.hidden-section{opacity:.55}.sb-row-grip{display:flex;align-items:center;justify-content:center;width:28px;flex-shrink:0;color:var(--c-muted);cursor:grab;font-size:13px;padding:10px 0}.sb-row-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-sm);background:var(--c-bg);margin:8px 0;flex-shrink:0;font-size:14px;color:var(--c-text-2)}.sb-section-row.active .sb-row-icon{background:var(--c-accent);color:#fff}.sb-row-label{flex:1;font-size:13px;font-weight:500;color:var(--c-text-2);padding:0 8px;-webkit-user-select:none;user-select:none}.sb-section-row.active .sb-row-label{color:var(--c-accent);font-weight:600}.sb-row-actions{display:flex;align-items:center;gap:1px;padding-right:6px}.sb-icon-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:transparent;border-radius:var(--radius-sm);cursor:pointer;color:var(--c-muted);font-size:14px;transition:var(--transition);flex-shrink:0}.sb-icon-btn:hover{background:#0000000f;color:var(--c-text)}.sb-icon-btn.eye-off{color:#94a3b8}.sb-icon-btn.eye-on{color:var(--c-accent)}.sb-icon-btn.chevron{color:#94a3b8;font-size:13px}.sb-reorder{display:flex;flex-direction:column;gap:0;padding-right:2px}.sb-reorder button{display:flex;align-items:center;justify-content:center;width:18px;height:15px;border:none;background:transparent;cursor:pointer;color:#94a3b8;font-size:11px;border-radius:3px;transition:var(--transition)}.sb-reorder button:hover{background:#00000012;color:var(--c-text)}.sb-reorder button:disabled{opacity:.3;cursor:default}.sb-editor-wrap{display:flex;flex-direction:column;height:100%}.sb-editor-scroll{flex:1;overflow-y:auto;padding:14px}.sb-editor-scroll::-webkit-scrollbar{width:4px}.sb-editor-scroll::-webkit-scrollbar-track{background:transparent}.sb-editor-scroll::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:2px}.field-group{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}.field-group label{font-size:11.5px;font-weight:600;color:var(--c-text-2);letter-spacing:.1px}.field-group input[type=text],.field-group input[type=url],.field-group input[type=email],.field-group textarea,.field-group select{width:100%;border:1px solid var(--c-border-2);border-radius:var(--radius);padding:8px 10px;font-size:13px;color:var(--c-text);background:var(--c-surface);transition:border-color var(--transition),box-shadow var(--transition);resize:vertical;outline:none}.field-group input:focus,.field-group textarea:focus,.field-group select:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px #2563eb1f}.field-group input[type=color]{width:38px;height:34px;padding:2px 3px;border:1px solid var(--c-border-2);border-radius:var(--radius-sm);cursor:pointer;background:var(--c-surface);outline:none}.color-row{display:flex;align-items:center;gap:8px}.color-row input[type=text]{flex:1}.img-upload-wrap{display:flex;flex-direction:column;gap:8px}.img-preview{width:100%;max-height:90px;object-fit:contain;border-radius:var(--radius);border:1px dashed var(--c-border-2);background:var(--c-bg);padding:4px}.img-default-label{font-size:11px;color:var(--c-muted);background:var(--c-bg);border:1px dashed var(--c-border);border-radius:var(--radius-sm);padding:6px 8px;display:flex;align-items:center;gap:5px}.img-upload-btn{display:inline-flex;align-items:center;gap:6px;background:var(--c-accent-lt);color:var(--c-accent);border:1px solid var(--c-accent-bd);border-radius:var(--radius);padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:var(--transition);width:fit-content}.img-upload-btn:hover{background:#dbeafe;border-color:var(--c-accent)}.img-remove-btn{display:inline-flex;align-items:center;gap:4px;background:var(--c-danger-lt);color:var(--c-danger);border:1px solid #fecaca;border-radius:var(--radius);padding:5px 10px;font-size:12px;cursor:pointer;width:fit-content;transition:var(--transition)}.img-remove-btn:hover{background:#fee2e2}.list-item-card{border:1px solid var(--c-border);border-radius:var(--radius);padding:11px 12px;margin-bottom:8px;background:var(--c-surface);box-shadow:var(--shadow-sm);transition:border-color var(--transition)}.list-item-card:hover{border-color:var(--c-accent-bd)}.list-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.list-item-title{font-size:12px;font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.3px}.btn-remove-item{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--c-danger-lt);border:1px solid #fecaca;border-radius:var(--radius-sm);color:var(--c-danger);cursor:pointer;font-size:13px;line-height:1;transition:var(--transition)}.btn-remove-item:hover{background:#fee2e2}.btn-add-item{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:2px dashed var(--c-border-2);background:transparent;border-radius:var(--radius);padding:9px;color:var(--c-muted);font-size:12px;font-weight:600;cursor:pointer;margin-top:4px;transition:var(--transition)}.btn-add-item:hover{border-color:var(--c-accent);color:var(--c-accent);background:var(--c-accent-lt)}.section-divider{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--c-muted);margin:14px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--c-border)}.textarea-list{display:flex;flex-direction:column;gap:6px}.textarea-list textarea{min-height:64px}.builder-preview{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#cbd5e1}.preview-toolbar{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#1e293b;flex-shrink:0;border-bottom:1px solid #0f172a}.preview-tab{padding:5px 12px;border:none;background:transparent;color:#64748b;border-radius:var(--radius);font-size:12px;font-weight:500;cursor:pointer;transition:var(--transition)}.preview-tab:hover{background:#334155;color:#cbd5e1}.preview-tab.active{background:#334155;color:#fff}.preview-spacer{flex:1}.preview-status{font-size:11px;color:#64748b;display:flex;align-items:center;gap:5px}.preview-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preview-stage{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:16px;background:#cbd5e1}.preview-device{background:#fff;border-radius:4px;box-shadow:var(--shadow-lg);overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.preview-device.desktop{width:100%;height:100%;min-height:600px}.preview-device.tablet{width:768px;height:1024px;border-radius:16px;border:8px solid #1e293b}.preview-device.mobile{width:390px;height:780px;border-radius:36px;border:10px solid #1e293b}.preview-device.mobile:before{content:"";display:block;width:80px;height:5px;background:#1e293b;border-radius:3px;position:absolute;top:0;left:50%;transform:translate(-50%);z-index:10}.preview-device iframe{width:100%;height:100%;border:none;display:block}.preview-stage.desktop{padding:0;align-items:stretch}.preview-stage.desktop .preview-device{width:100%;border-radius:0;box-shadow:none;flex:1;display:flex;flex-direction:column}.preview-stage.desktop .preview-device iframe{flex:1}.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:20px;font-size:10px;font-weight:600}.badge-hidden{background:#f1f5f9;color:var(--c-muted)}.badge-visible{background:#dcfce7;color:var(--c-success)}.tag-card{border:1px solid var(--c-border);border-radius:var(--radius);margin-bottom:8px;background:var(--c-surface);box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color var(--transition)}.tag-card:hover{border-color:var(--c-accent-bd)}.tag-card-header{display:flex;align-items:center;padding:10px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;gap:4px}.tag-card-header:hover{background:var(--c-accent-lt)}.tag-card-name{font-size:12.5px;font-weight:600;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:600;border:1px solid transparent;white-space:nowrap}.tag-badge-pages{color:#64748b;background:#f1f5f9;border-color:#e2e8f0}.tag-card-body{padding:12px;border-top:1px solid var(--c-border);background:#fcfdfe}.tip-box{background:var(--c-accent-lt);border:1px solid var(--c-accent-bd);border-radius:var(--radius);padding:9px 11px;font-size:12px;color:#1e40af;margin-bottom:14px;display:flex;gap:7px}