:root{--bg:#f6f7fb;--surface:#fff;--surface-2:#f8f9fc;--line:#e7e9f0;--line-strong:#d9dce7;--text:#151824;--muted:#6d7280;--muted-2:#9a9eaa;--primary:#6c5ce7;--primary-dark:#5848d6;--primary-soft:#efedff;--green:#17a673;--danger:#e34d59;--shadow:0 18px 55px rgba(32,27,82,.10);--radius:16px;--font:Inter,"SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.hidden{display:none!important}.icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.logo{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.6px}.logo-home-link{border:0;padding:0;background:transparent;color:inherit;transition:opacity .16s ease}.logo-home-link:hover{opacity:.82}.logo-home-link:focus-visible{outline:2px solid var(--primary);outline-offset:5px;border-radius:9px}.logo-static{cursor:default;user-select:none}.logo-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,#7869f6,#5140d4);display:grid;place-items:center;color:#fff;box-shadow:0 7px 16px rgba(108,92,231,.26)}.logo-mark svg{width:17px;height:17px}.btn{border:0;border-radius:10px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:650;transition:.18s ease;background:#fff}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 7px 16px rgba(108,92,231,.2)}.btn-primary:hover{background:var(--primary-dark)}.btn-outline{border:1px solid var(--line-strong);background:var(--surface)}.btn-ghost{background:transparent;color:var(--muted)}.btn-sm{padding:7px 10px;border-radius:8px;font-size:12px}.btn-danger{background:#fff0f1;color:var(--danger)}.top-nav{height:70px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;background:rgba(255,255,255,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(231,233,240,.8)}.nav-links{display:flex;align-items:center;gap:30px}.nav-links a{color:#565b68;text-decoration:none;font-weight:560}.nav-links a:hover{color:var(--text)}
.home{background:#fff;min-height:100vh}.hero{position:relative;overflow:hidden;padding:104px 7vw 96px;text-align:center;background:radial-gradient(circle at 50% 10%,#f0edff 0,rgba(255,255,255,0) 43%)}.hero::before,.hero::after{content:"";position:absolute;border-radius:999px;filter:blur(1px);opacity:.55}.hero::before{width:260px;height:260px;background:#eeeaff;left:-150px;top:80px}.hero::after{width:180px;height:180px;background:#e5f9f2;right:-90px;bottom:20px}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#f0eefe;color:var(--primary);font-size:12px;font-weight:750;margin-bottom:25px}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--primary)}.hero h1{font-size:clamp(46px,6.2vw,78px);line-height:1.06;letter-spacing:-4px;margin:0 auto 24px;max-width:900px}.gradient-text{background:linear-gradient(100deg,#5848d6,#8778ee);-webkit-background-clip:text;color:transparent}.hero>p{max-width:690px;margin:0 auto;color:var(--muted);font-size:18px;line-height:1.75}.hero-actions{display:flex;justify-content:center;gap:12px;margin:34px 0 54px}.hero-actions .btn{padding:14px 21px}.hero-demo{max-width:1010px;margin:auto;background:#181a25;padding:9px;border-radius:20px;box-shadow:0 36px 90px rgba(31,28,75,.23);text-align:left;transform:perspective(1600px) rotateX(1deg)}.demo-window{border-radius:13px;overflow:hidden;background:#f5f6f9}.demo-bar{height:42px;display:flex;align-items:center;gap:7px;background:#fff;border-bottom:1px solid var(--line);padding:0 15px}.demo-dot{width:8px;height:8px;border-radius:50%;background:#d8dbe4}.demo-body{height:390px;display:grid;grid-template-columns:150px 1fr 190px}.demo-sidebar,.demo-props{background:#fff;padding:15px;border-right:1px solid var(--line)}.demo-props{border:0;border-left:1px solid var(--line)}.demo-sidebar b,.demo-props b{font-size:10px;color:#999;text-transform:uppercase}.demo-item{height:38px;border:1px solid var(--line);border-radius:8px;margin-top:10px;background:#fafafa}.demo-canvas{padding:35px;display:flex;align-items:center}.demo-page{width:100%;height:245px;background:#fff;border-radius:5px;box-shadow:0 8px 30px rgba(33,36,51,.08);padding:42px;display:grid;grid-template-columns:1fr .85fr;gap:35px}.demo-copy h3{font-size:27px;line-height:1.12;letter-spacing:-1px;margin:0 0 12px}.demo-copy p{font-size:10px;line-height:1.6;color:#888}.demo-button{height:25px;width:75px;background:var(--primary);border-radius:6px}.demo-visual{border-radius:15px;background:linear-gradient(135deg,#ddd8ff,#f3f1ff);position:relative}.demo-visual::after{content:"";position:absolute;width:74px;height:74px;background:#fff;border-radius:16px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(9deg);box-shadow:0 10px 25px #bcb4ec}.demo-prop-line{margin-top:15px}.demo-prop-line span{font-size:9px;color:#999}.demo-slider{height:5px;background:#eee;border-radius:5px;margin-top:5px;overflow:hidden}.demo-slider i{display:block;width:65%;height:100%;background:var(--primary)}
.section{padding:100px 7vw}.section.alt{background:#fafafe}.section-heading{text-align:center;max-width:690px;margin:0 auto 55px}.section-heading .kicker{color:var(--primary);font-size:12px;letter-spacing:1.5px;font-weight:800;text-transform:uppercase}.section-heading h2{font-size:40px;letter-spacing:-2px;margin:12px 0}.section-heading p{color:var(--muted);font-size:16px;line-height:1.7}.pain-grid{display:grid;grid-template-columns:1fr 60px 1fr;gap:25px;align-items:center;max-width:1050px;margin:auto}.pain-card{min-height:335px;border:1px solid var(--line);border-radius:22px;padding:30px;background:#fff}.pain-card.bad{background:#fafafa}.pain-card.good{border-color:#dcd6ff;box-shadow:0 20px 55px rgba(99,84,201,.1)}.pain-label{display:flex;align-items:center;gap:8px;font-weight:750;margin-bottom:25px}.pain-bubble{padding:13px 16px;background:#f1f2f5;border-radius:12px 12px 12px 3px;margin:10px 0;color:#686d78;width:max-content;max-width:90%}.pain-bubble:nth-child(3){margin-left:25px}.pain-bubble:nth-child(4){margin-left:10px}.control-row{margin:17px 0}.control-row label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px}.fake-input{height:9px;background:#eeedf7;border-radius:9px;overflow:hidden}.fake-input i{display:block;height:100%;background:var(--primary);border-radius:9px}.vs{width:48px;height:48px;background:#fff;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--muted)}.features-grid{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{padding:27px;border:1px solid var(--line);border-radius:18px;background:#fff;min-height:205px}.feature-icon{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);margin-bottom:22px}.feature-icon svg{width:21px;height:21px}.feature-card h3{font-size:17px;margin:0 0 9px}.feature-card p{color:var(--muted);line-height:1.7;margin:0}.cta{margin:0 7vw 80px;padding:68px;border-radius:28px;color:#fff;text-align:center;background:linear-gradient(135deg,#171824,#2a2554);position:relative;overflow:hidden}.cta::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(120,102,245,.27);right:-100px;top:-150px}.cta h2{font-size:38px;letter-spacing:-1.5px;margin:0 0 12px}.cta p{color:#babdca;margin-bottom:25px}.home-footer{border-top:1px solid var(--line);padding:35px 7vw;display:flex;justify-content:space-between;align-items:center;color:var(--muted)}.footer-links{display:flex;gap:24px}
.app-shell{min-height:100vh}.app-header{height:68px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px}.header-actions{display:flex;align-items:center;gap:9px}.page-wrap{max-width:1240px;margin:0 auto;padding:48px 32px}.page-title-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px}.page-title-row h1{font-size:31px;letter-spacing:-1px;margin:0 0 7px}.page-title-row p{color:var(--muted);margin:0}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.new-project-card,.project-card{min-height:260px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;transition:.2s}.new-project-card{border:1.5px dashed #cfd2dc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted)}.new-project-card:hover{border-color:var(--primary);color:var(--primary);background:#faf9ff}.new-project-icon{width:48px;height:48px;border-radius:14px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary);font-size:26px}.project-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.project-preview{height:158px;background:#f0f1f6;padding:17px;position:relative;cursor:pointer}.preview-sheet{width:100%;height:100%;background:#fff;border-radius:5px;overflow:hidden;padding:12px;box-shadow:0 4px 12px rgba(0,0,0,.05)}.preview-nav{height:8px;background:#efeff3;border-radius:2px;margin-bottom:13px}.preview-hero{display:grid;grid-template-columns:1fr .8fr;gap:12px}.preview-lines i{display:block;height:6px;background:#dedce8;border-radius:2px;margin-bottom:7px}.preview-lines i:first-child{height:12px;background:#3b3943;width:80%}.preview-lines i:last-child{background:#7666eb;width:36%;height:10px}.preview-art{background:linear-gradient(135deg,#dcd7ff,#f2f0ff);border-radius:6px;height:70px}.project-info{padding:16px 17px}.project-name-row{display:flex;justify-content:space-between;align-items:center}.project-name{font-weight:750;font-size:15px}.menu-button{border:0;background:transparent;color:var(--muted);font-size:20px;padding:0 4px}.project-meta{display:flex;gap:12px;color:var(--muted);font-size:11px;margin-top:9px}.status-dot{width:6px;height:6px;background:var(--green);border-radius:50%;display:inline-block;margin-right:5px}.project-menu{position:absolute;right:12px;bottom:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:var(--shadow);z-index:4;min-width:125px}.project-menu button{border:0;background:transparent;width:100%;padding:8px;text-align:left;border-radius:6px;font-size:12px}.project-menu button:hover{background:var(--surface-2)}.empty-state{text-align:center;color:var(--muted);padding:60px}
.modal-backdrop{position:fixed;inset:0;background:rgba(21,24,36,.45);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:100;padding:20px}.app-shell>.modal-backdrop{top:68px}.modal{width:min(620px,96vw);max-height:90vh;overflow:auto;background:var(--surface);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.2)}.app-shell>.modal-backdrop .modal{max-height:calc(100vh - 108px)}.modal.wide{width:min(920px,96vw)}.modal-head{padding:20px 23px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-head h2{font-size:18px;margin:0}.close-btn{border:0;background:transparent;font-size:23px;color:var(--muted)}.modal-body{padding:23px}.modal-foot{padding:16px 23px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px}.field{margin-bottom:17px}.field>label{display:block;font-size:12px;font-weight:650;margin-bottom:7px}.input,.select,.textarea{width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:10px 11px;background:var(--surface);outline:none}.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.template-option{border:1px solid var(--line);border-radius:11px;padding:9px;text-align:center;cursor:pointer}.template-option.selected{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}.template-thumb{height:74px;background:#f0f1f5;border-radius:7px;margin-bottom:8px;display:grid;place-items:center;color:#a3a6af}.template-option span{font-size:11px;font-weight:650}
.editor{height:100vh;display:grid;grid-template-rows:58px 1fr;overflow:hidden;background:#eceef3}.editor-toolbar{background:#fff;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 13px;z-index:10}.toolbar-left,.toolbar-center,.toolbar-right{display:flex;align-items:center;gap:7px}.toolbar-right{justify-content:flex-end}.toolbar-project{display:flex;align-items:center;gap:9px;margin-left:7px}.toolbar-project-name{font-weight:700;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.save-status{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}.save-status i{width:6px;height:6px;border-radius:50%;background:var(--green)}.tool-btn{border:0;background:transparent;border-radius:7px;width:32px;height:32px;display:grid;place-items:center;color:#565b68}.tool-btn:hover,.tool-btn.active{background:var(--primary-soft);color:var(--primary)}.tool-btn:disabled{opacity:.32;cursor:not-allowed}.device-switch{background:#f2f3f6;border-radius:8px;padding:3px;display:flex}.device-switch .tool-btn{width:34px;height:28px}.toolbar-sep{height:22px;width:1px;background:var(--line);margin:0 3px}.editor-body{display:grid;grid-template-columns:248px minmax(0,1fr) 292px;min-height:0}.left-panel,.right-panel{background:var(--surface);min-height:0;overflow:auto}.left-panel{border-right:1px solid var(--line)}.right-panel{border-left:1px solid var(--line)}.panel-tabs{height:46px;display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}.panel-tab{flex:1;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:650;position:relative}.panel-tab.active{color:var(--text)}.panel-tab.active::after{content:"";position:absolute;bottom:0;left:22px;right:22px;height:2px;background:var(--primary);border-radius:2px}.panel-content{padding:14px}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.panel-heading h3{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0}.add-mini{width:25px;height:25px;border:0;border-radius:7px;background:var(--surface-2);font-size:17px;color:var(--muted)}.page-list{display:flex;flex-direction:column;gap:5px}.page-row{padding:9px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);cursor:pointer}.page-row.active{background:var(--primary-soft);color:var(--primary);font-weight:650}.page-row-actions{opacity:0;display:flex}.page-row:hover .page-row-actions{opacity:1}.page-row-actions button{border:0;background:transparent;color:inherit;padding:2px}.library-group{margin-top:20px}.library-title{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0 0 10px}.library-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.library-item{height:68px;border:1px solid var(--line);border-radius:9px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#555b67;font-size:11px;transition:.15s}.library-item:hover{border-color:#bab1f5;color:var(--primary);background:#fbfaff}.library-item .icon{width:19px;height:19px}.canvas-area{min-width:0;overflow:auto;padding:34px;display:flex;justify-content:center;align-items:flex-start;background-color:#eef0f4;background-image:radial-gradient(#d9dce3 1px,transparent 1px);background-size:18px 18px}.canvas-frame{background:#fff;box-shadow:0 6px 24px rgba(38,40,55,.13);min-height:calc(100vh - 126px);transition:width .25s;transform-origin:top center;overflow:hidden}.canvas-frame.desktop{width:min(100%,1100px)}.canvas-frame.tablet{width:768px}.canvas-frame.mobile{width:390px}.canvas-page{min-height:100%;background:#fff}.empty-canvas{height:calc(100vh - 126px);display:grid;place-items:center;text-align:center;color:var(--muted)}.empty-canvas .big-plus{width:55px;height:55px;border:1px dashed var(--line-strong);border-radius:15px;display:grid;place-items:center;font-size:25px;margin:0 auto 13px}.canvas-section{position:relative;border:1px solid transparent;transition:.12s}.canvas-section:hover{outline:1px dashed #a9a0e8;outline-offset:-2px}.canvas-section.selected{outline:2px solid var(--primary);outline-offset:-2px}.element-tag{display:none;position:absolute;left:-1px;top:-20px;background:var(--primary);color:#fff;font-size:9px;padding:3px 7px;border-radius:4px 4px 0 0;z-index:4}.canvas-section:hover>.element-tag,.canvas-section.selected>.element-tag{display:block}.section-tools{display:none;position:absolute;right:5px;top:5px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 12px rgba(0,0,0,.08);border-radius:7px;z-index:5}.canvas-section.selected>.section-tools{display:flex}.section-tools button{border:0;background:transparent;padding:5px;color:var(--muted)}.section-inner{max-width:var(--max-width,1100px);margin:0 auto;padding:var(--pad-y,64px) var(--pad-x,48px);display:flex;flex-direction:var(--direction,column);gap:var(--gap,20px);align-items:var(--align,stretch);justify-content:var(--justify,flex-start)}.canvas-frame.mobile .section-inner{padding-left:24px!important;padding-right:24px!important}.canvas-frame.mobile .responsive-row{grid-template-columns:1fr!important;display:grid!important}.canvas-frame.tablet .responsive-row{gap:25px!important}.canvas-component{position:relative;border:1px solid transparent;min-width:12px}.canvas-component:hover{outline:1px dashed #9187dd}.canvas-component.selected{outline:2px solid var(--primary);outline-offset:2px}.canvas-component.hidden-element{opacity:.28}.canvas-component.locked::after{content:"锁定";position:absolute;right:0;top:0;font-size:8px;background:#222;color:#fff;padding:2px 4px}.component-actions{display:none;position:absolute;right:0;top:-28px;background:var(--primary);border-radius:6px;z-index:6}.canvas-component.selected>.component-actions{display:flex}.component-actions button{border:0;background:transparent;color:#fff;padding:5px}.vc-heading{margin:0;line-height:1.15}.vc-text{margin:0;line-height:1.65}.vc-button{display:inline-flex;align-items:center;justify-content:center;border:0;text-decoration:none}.vc-image{display:block;width:100%;background:#e8e6f5;min-height:180px}.image-placeholder{display:grid;place-items:center;color:#8a85aa;background:linear-gradient(135deg,#e2defb,#f4f2ff);min-height:220px}.vc-card{border:1px solid #e7e7ec}.vc-input{width:100%;border:1px solid #dcdde5;padding:11px}.vc-divider{border:0;border-top:1px solid #e3e4e8;width:100%}.vc-spacer{height:35px;background:repeating-linear-gradient(-45deg,#fafafa,#fafafa 5px,#f2f2f2 5px,#f2f2f2 10px)}.responsive-row{display:grid}.canvas-frame.mobile .vc-heading{font-size:min(var(--font-size,48px),36px)!important}
.props-head{height:46px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 15px;font-weight:700;font-size:12px;position:sticky;top:0;background:#fff;z-index:2}.selection-summary{padding:13px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}.selection-icon{width:31px;height:31px;background:var(--primary-soft);color:var(--primary);border-radius:8px;display:grid;place-items:center}.selection-summary b{display:block;font-size:12px}.selection-summary span{font-size:10px;color:var(--muted)}.prop-group{border-bottom:1px solid var(--line)}.prop-group-title{padding:12px 15px;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:750;cursor:pointer}.prop-group-body{padding:0 15px 14px}.prop-row{display:grid;grid-template-columns:80px 1fr;gap:9px;align-items:center;margin-top:9px}.prop-row label{font-size:10px;color:var(--muted)}.prop-input-wrap{position:relative}.prop-input{width:100%;height:31px;border:1px solid var(--line);border-radius:7px;background:#fafafa;padding:5px 27px 5px 8px;font-size:11px}.prop-input:focus{outline:none;border-color:var(--primary)}.unit{position:absolute;right:8px;top:8px;font-size:9px;color:var(--muted)}.color-input-row{display:flex;gap:6px}.color-swatch{width:31px;height:31px;border:1px solid var(--line);border-radius:7px;padding:2px;background:#fff}.color-text{min-width:0;flex:1}.segmented{display:flex;background:#f3f4f6;border-radius:7px;padding:2px}.segmented button{flex:1;border:0;background:transparent;border-radius:5px;padding:6px 2px;font-size:9px;color:var(--muted)}.segmented button.active{background:#fff;color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.08)}.range-row{display:grid;grid-template-columns:1fr 45px;gap:7px;align-items:center}.range-row input[type=range]{width:100%;accent-color:var(--primary)}.no-selection{padding:55px 25px;text-align:center;color:var(--muted);font-size:12px}.export-tabs{display:flex;border-bottom:1px solid var(--line);padding:0 23px}.export-tab{border:0;background:transparent;padding:13px 15px;font-size:12px;color:var(--muted);border-bottom:2px solid transparent}.export-tab.active{color:var(--primary);border-color:var(--primary)}.code-preview{margin:0;background:#171923;color:#e8e9ef;padding:20px;border-radius:11px;min-height:330px;max-height:420px;overflow:auto;white-space:pre-wrap;font:12px/1.7 Consolas,monospace}.preview-overlay{position:fixed;inset:0;background:#e9ebf0;z-index:110;overflow:auto;padding:50px 30px}.preview-close{position:fixed;right:25px;top:18px;z-index:2}.preview-document{max-width:1200px;margin:auto;background:#fff;box-shadow:var(--shadow)}.settings-card{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:18px}.settings-card h3{padding:18px 20px;margin:0;border-bottom:1px solid var(--line);font-size:14px}.settings-row{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.settings-row:last-child{border:0}.settings-row p{margin:3px 0 0;color:var(--muted);font-size:11px}.switch{width:42px;height:24px;border-radius:30px;border:0;background:#ccc;padding:3px}.switch::after{content:"";display:block;width:18px;height:18px;background:#fff;border-radius:50%;transition:.2s}.switch.on{background:var(--primary)}.switch.on::after{transform:translateX(18px)}#toast-root{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;flex-direction:column;gap:8px}.toast{background:#1d1f29;color:#fff;padding:11px 15px;border-radius:9px;box-shadow:var(--shadow);font-size:12px;animation:toast-in .2s ease}.toast.success{background:#147a58}.toast.error{background:#b83c47}@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}
body.dark{--bg:#15161c;--surface:#1d1f27;--surface-2:#242630;--line:#30323d;--line-strong:#41434f;--text:#f1f2f6;--muted:#a4a8b4;--muted-2:#737782;background:var(--bg)}body.dark .app-header,body.dark .left-panel,body.dark .right-panel,body.dark .panel-tabs,body.dark .props-head,body.dark .editor-toolbar{background:var(--surface)}body.dark .input,body.dark .select,body.dark .textarea,body.dark .library-item,body.dark .project-card,body.dark .new-project-card,body.dark .modal{background:var(--surface)}body.dark .editor-body{background:#121319}
@media(max-width:900px){.nav-links a{display:none}.features-grid{grid-template-columns:1fr 1fr}.pain-grid{grid-template-columns:1fr}.vs{margin:auto}.demo-body{grid-template-columns:100px 1fr}.demo-props{display:none}.project-grid{grid-template-columns:1fr 1fr}.editor-body{grid-template-columns:200px minmax(0,1fr)}.right-panel{position:fixed;right:0;top:58px;bottom:0;width:292px;z-index:20;box-shadow:-10px 0 35px rgba(0,0,0,.12)}.toolbar-project-name,.save-status{display:none}}

/* Compact property-panel layout */
.compact-row{margin-top:10px}.compact-row-label,.compact-quad-head>span{display:block;margin-bottom:5px;color:var(--muted);font-size:10px}.compact-pair,.compact-select-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px}.compact-field{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;min-width:0}.compact-field>span{font-size:9px;color:var(--muted);text-align:center}.compact-field .prop-input{padding-left:7px}.compact-field.is-readonly{height:31px;border:1px solid var(--line);border-radius:7px;background:#f7f7f9;padding:0 7px}.compact-field.is-readonly b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:600}.compact-meta{display:grid;grid-template-columns:1fr;gap:6px;margin-top:9px}.compact-readonly{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:center;min-height:27px;padding:5px 8px;border-radius:7px;background:var(--surface-2)}.compact-readonly span{font-size:9px;color:var(--muted)}.compact-readonly b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:600}.compact-check-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.compact-check-row .block-check{margin:0}.compact-quad{margin-top:10px}.compact-quad-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.compact-quad-head>span{margin:0}.quad-link{height:22px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted);font-size:9px}.quad-link.active{border-color:#b9b0f5;background:var(--primary-soft);color:var(--primary)}.compact-quad-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.compact-select-pair{margin-top:9px}.compact-select-pair label>span{display:block;margin:0 0 5px;color:var(--muted);font-size:9px}.compact-select-pair .prop-input{padding-right:7px}.compact-check{margin-top:9px}.compact-range{margin-top:10px}.compact-content-field{margin:0}.prop-full-button{width:100%;margin-top:8px}.property-advanced{border-bottom:1px solid var(--line)}.property-advanced>summary{display:flex;align-items:center;padding:13px 15px;cursor:pointer;list-style:none;font-size:11px;font-weight:750}.property-advanced>summary::-webkit-details-marker{display:none}.property-advanced>summary::after{content:"⌄";margin-left:8px;color:var(--muted)}.property-advanced[open]>summary::after{transform:rotate(180deg)}.property-advanced>summary small{margin-left:auto;color:var(--muted);font-size:8px;font-weight:400}.property-advanced-body{padding:0 15px 14px;background:#fbfbfd}.advanced-body .prop-group:last-child,.property-advanced-body .prop-group:last-child{border-bottom:0}.right-panel .prop-group-body>.compact-row:first-child,.right-panel .prop-group-body>.compact-quad:first-child,.right-panel .prop-group-body>.compact-meta:first-child{margin-top:0}
body.dark .compact-field.is-readonly,body.dark .property-advanced-body,body.dark .advanced-body{background:var(--surface-2)}body.dark .quad-link{background:var(--surface);color:var(--muted)}body.dark .quad-link.active{background:var(--primary-soft);color:var(--primary)}
.prop-group>summary{list-style:none}.prop-group>summary::-webkit-details-marker{display:none}.prop-group:not([open]) .prop-group-title>span:last-child{transform:rotate(-90deg)}.prop-group-title>span:last-child{transition:transform .15s}.responsive-visibility{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}.responsive-visibility>span{display:block;margin-bottom:7px;color:var(--muted);font-size:10px}.responsive-visibility label{display:inline-flex;align-items:center;gap:4px;margin-right:10px;font-size:10px}.responsive-visibility input{accent-color:var(--primary)}.property-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.property-actions button{height:32px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--text);font-size:10px}.property-actions button.danger{color:#c73f4b}.property-actions button:disabled{opacity:.4;cursor:not-allowed}.canvas-component.responsive-hidden::before{content:"当前设备隐藏";position:absolute;left:4px;bottom:4px;z-index:8;padding:2px 5px;border-radius:4px;background:#6b7280;color:#fff;font-size:8px;pointer-events:none}body.dark .property-actions button{background:var(--surface);color:var(--text)}body.dark .property-actions button.danger{color:#ff7b86}
.unified-block.responsive-hidden::after{content:"当前设备隐藏";position:absolute;right:6px;bottom:6px;z-index:20;padding:3px 6px;border-radius:5px;background:#6b7280;color:#fff;font-size:8px;pointer-events:none}.preview-overlay .responsive-hidden::after,.preview-rendering .responsive-hidden::after,.export-shot .responsive-hidden::after{display:none!important}
@media(max-width:640px){.top-nav{padding:0 20px}.hero{padding:75px 20px 55px}.hero h1{font-size:45px;letter-spacing:-2.5px}.hero>p{font-size:16px}.hero-actions{flex-direction:column}.hero-demo{display:none}.section{padding:70px 20px}.features-grid,.project-grid{grid-template-columns:1fr}.section-heading h2{font-size:32px}.cta{margin:0 20px 50px;padding:45px 25px}.home-footer{flex-direction:column;gap:20px}.page-wrap{padding:30px 18px}.page-title-row{align-items:flex-start;gap:16px;flex-direction:column}.template-grid{grid-template-columns:1fr 1fr}.editor-body{grid-template-columns:1fr}.left-panel{position:fixed;left:0;top:58px;bottom:0;width:230px;z-index:22}.toolbar-center{display:none}.editor-toolbar{grid-template-columns:1fr 1fr}.canvas-area{padding:18px}.form-grid{grid-template-columns:1fr}}
.vc-icon{display:inline-grid;place-items:center;min-width:42px;min-height:42px}.vc-container{position:relative}.vc-container-children{min-height:72px;display:flex;flex-direction:column;gap:12px;border:1px dashed transparent}.vc-container-children:has(.container-hint){border-color:#cfcbdc}.vc-card-compound{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;overflow:visible}.vc-card-compound>.canvas-component{width:100%;min-height:0}.container-hint{display:grid;place-items:center;min-height:70px;color:#aaa3bd;font-size:11px}.locked-notice{margin:0 15px 12px;padding:9px 10px;border-radius:8px;background:#fff6df;color:#8a6613;font-size:10px}.actual-preview{padding:0!important;display:flex;flex-direction:column;overflow:hidden}.mini-section{display:flex;align-items:center;justify-content:space-between;padding:3px 8px;min-height:9px}.mini-section i{display:block;height:3px;border-radius:4px;opacity:.75}.preview-empty{display:grid;place-items:center;color:#a2a6b1;font-size:11px}.page-row-actions{gap:1px}.page-row-actions .icon{width:12px;height:12px}
.preview-document .hidden-element{display:none}.canvas-component[style*="z-index"]{position:relative}.canvas-frame.mobile .section-inner{flex-direction:column!important}.canvas-frame.mobile .section-inner>.canvas-component{flex-basis:auto!important;width:100%}
.canvas-stage{position:relative;flex:0 0 auto;margin:18px auto 60px;transition:width .2s}.canvas-stage .canvas-frame{position:absolute;left:0;top:0;transform-origin:top left;min-height:1080px;overflow:visible}.canvas-size-label{position:absolute;top:-25px;left:0;color:#7c818e;font-size:10px;white-space:nowrap}.canvas-page{position:relative;width:100%;height:auto;overflow:visible;background-position:center}.canvas-page.selected-page{outline:3px solid #8b7df1;outline-offset:3px}.canvas-area{display:block}.canvas-section{box-sizing:border-box}.zoom-control{display:flex;align-items:center;gap:5px;margin-left:7px;color:var(--muted);font-size:10px}.zoom-control select{height:28px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:0 7px;font-size:10px}.field-hint{margin:-5px 0 17px;color:var(--muted);font-size:10px;line-height:1.5}.page-layer-hint{margin:12px 15px;padding:11px;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-size:10px;line-height:1.5}.section-inner{width:100%;box-sizing:border-box}.canvas-frame.mobile .section-inner{padding-left:24px!important;padding-right:24px!important}
.preview-document .section-tools,.preview-document .component-actions,.preview-document .element-tag,.preview-document .resize-handle,.preview-document .snap-guide,.preview-document .drag-metric{display:none!important}.preview-document .selected,.preview-document .multi-selected{outline:none!important}.preview-document .canvas-component.locked::after{display:none!important;content:none!important}.preview-document{overflow:hidden}
.project-menu-portal{position:fixed!important;right:auto!important;bottom:auto!important;z-index:220!important;min-width:142px;overflow:visible}
.preview-overlay{background:#fff!important;padding:0!important;overflow:auto!important;z-index:10000!important}.preview-document{width:100%!important;max-width:none!important;margin:0!important;background:#fff!important;box-shadow:none!important;overflow:visible!important}.preview-document .canvas-page{width:100%!important;min-width:0!important;overflow:visible!important}.preview-close{top:18px!important;right:18px!important;z-index:10001!important;opacity:.88}.preview-close:hover{opacity:1}.preview-document .canvas-section{outline:none!important}.preview-document .canvas-component{outline:none!important}.previewing{overflow:hidden}.previewing .editor,.previewing .canvas-ruler-overlay,.previewing .project-menu-portal,.previewing .modal-backdrop,.previewing #toast-root{display:none!important}
@media(max-width:768px){.preview-document .responsive-row{display:grid!important;grid-template-columns:1fr!important;flex-direction:column!important}.preview-document .section-inner{padding-left:24px!important;padding-right:24px!important}.preview-document .responsive-row>.canvas-component{width:100%!important;flex-basis:auto!important}}
.free-layout{position:relative;overflow:visible;user-select:none}.free-layout>.canvas-component{position:absolute;box-sizing:border-box;cursor:move;touch-action:none}.free-layout>.canvas-component.locked{cursor:default}.free-layout>.canvas-component>*:not(.component-actions):not(.resize-handle){max-width:100%;box-sizing:border-box}.free-layout>.canvas-component>.vc-image,.free-layout>.canvas-component>.image-placeholder,.free-layout>.canvas-component>.vc-card,.free-layout>.canvas-component>.vc-container,.free-layout>.canvas-component>.vc-shape{width:100%!important;height:100%!important;min-height:0!important}.vc-shape{display:block}.resize-handle{display:none;position:absolute;right:-5px;bottom:-5px;width:11px;height:11px;border:2px solid #fff;border-radius:3px;background:var(--primary);box-shadow:0 0 0 1px var(--primary);cursor:nwse-resize;z-index:12}.canvas-component.selected>.resize-handle{display:block}.canvas-component.multi-selected{outline-color:#8b7df1}.snap-guide{display:none;position:absolute;background:#e44ca2;z-index:100;pointer-events:none}.snap-guide.visible{display:block}.guide-x{left:0;right:0;height:1px}.guide-y{top:0;bottom:0;width:1px}.drag-metric{display:none;position:absolute;padding:4px 7px;border-radius:5px;background:#211d38;color:#fff;font-size:9px;white-space:nowrap;z-index:101;pointer-events:none}.drag-metric.visible{display:block}.multi-tools{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:11px}.multi-tools button{border:1px solid var(--line);border-radius:6px;background:var(--surface-2);padding:6px 3px;font-size:9px}.multi-tools button:hover{border-color:var(--primary);color:var(--primary)}.prop-tip{margin:10px 0 0;color:var(--muted);font-size:9px;line-height:1.5}
.free-layout>.canvas-component>.vc-heading,.free-layout>.canvas-component>.vc-text,.free-layout>.canvas-component>.vc-button,.free-layout>.canvas-component>.vc-icon,.free-layout>.canvas-component>.vc-image,.free-layout>.canvas-component>.image-placeholder,.free-layout>.canvas-component>.vc-card,.free-layout>.canvas-component>.vc-container,.free-layout>.canvas-component>.vc-input,.free-layout>.canvas-component>.vc-divider,.free-layout>.canvas-component>.vc-spacer,.free-layout>.canvas-component>.vc-shape{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;box-sizing:border-box}
.free-layout>.canvas-component>.vc-video,.free-layout>.canvas-component>.vc-upload,.free-layout>.canvas-component>.vc-form-control,.free-layout>.canvas-component>.vc-choice,.free-layout>.canvas-component>.vc-avatar{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;box-sizing:border-box}.free-layout>.canvas-component>video.vc-video{display:block;object-fit:cover}
@media(max-width:768px){.preview-document .resize-handle{display:none!important}}

.add-section-entry{width:100%;min-height:68px;border:1px solid #d7d1ff;border-radius:12px;background:linear-gradient(135deg,#f4f1ff,#fbfaff);display:flex;align-items:center;gap:10px;padding:12px;color:var(--primary);text-align:left}.add-section-entry>.icon:first-child{width:30px;height:30px;border-radius:9px;background:var(--primary);color:#fff;padding:6px;flex:0 0 auto}.add-section-entry>span{flex:1;min-width:0}.add-section-entry b,.add-section-entry small{display:block}.add-section-entry b{font-size:12px}.add-section-entry small{font-size:9px;color:var(--muted);margin-top:3px}.add-section-entry>.icon:last-child{width:15px}.add-section-entry:hover{border-color:var(--primary);box-shadow:0 8px 22px rgba(108,92,231,.12)}

/* Compact component library: keep the two-column scan pattern while reducing vertical space. */
.component-library-panel .add-section-entry{min-height:64px;padding:10px;gap:9px}
.component-library-panel .add-section-entry>span{min-width:0;overflow:hidden}
.component-library-panel .add-section-entry b,.component-library-panel .add-section-entry small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.component-library-panel .add-section-entry b{line-height:1.2}
.component-library-panel .add-section-entry>.icon:last-child{flex:0 0 15px}
.component-search-box{height:36px;margin-top:11px;padding:0 10px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--muted)}
.component-search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.component-search-box .icon{width:15px;height:15px;flex:0 0 15px}
.component-search-box input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:10px}
.component-search-box input::placeholder{color:var(--muted-2)}
.component-search-empty{margin-top:18px;padding:22px 10px;border:1px dashed var(--line-strong);border-radius:9px;text-align:center;color:var(--muted);font-size:10px}
.component-library-panel .library-group{margin-top:15px}
.component-library-panel .library-title{margin-bottom:7px}
.component-library-panel .library-grid{gap:7px}
.component-library-panel .library-item{height:42px;min-width:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:7px;padding:0 9px;text-align:left;font-size:10px;cursor:grab}
.component-library-panel .library-item:active{cursor:grabbing}
.component-library-panel .library-item:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.component-library-panel .library-item .icon{width:17px;height:17px;flex:0 0 17px}
.component-library-panel .library-item>span:last-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.icon-library-entry-group{margin-top:15px}
.icon-library-entry{width:100%;min-height:64px;padding:10px;border:1px solid #d7d1ff;border-radius:11px;background:linear-gradient(135deg,#f4f1ff,#fff);display:flex;align-items:center;gap:9px;color:var(--primary);text-align:left;transition:border-color .15s,box-shadow .15s,transform .15s}
.icon-library-entry:hover{border-color:var(--primary);box-shadow:0 8px 22px rgba(108,92,231,.12);transform:translateY(-1px)}
body.dark .icon-library-entry{background:linear-gradient(135deg,#29253d,var(--surface));border-color:#4b426f}
.icon-library-entry:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.icon-library-entry-art{width:38px;height:38px;position:relative;flex:0 0 38px;border-radius:10px;background:var(--primary);color:#fff}
.icon-library-entry-art .icon{position:absolute;width:14px;height:14px}
.icon-library-entry-art .icon:nth-child(1){left:5px;top:5px}.icon-library-entry-art .icon:nth-child(2){right:5px;bottom:5px}.icon-library-entry-art .icon:nth-child(3){right:4px;top:4px;width:11px;height:11px}
.icon-library-entry-copy{flex:1;min-width:0}.icon-library-entry-copy b,.icon-library-entry-copy small{display:block}.icon-library-entry-copy b{font-size:11px}.icon-library-entry-copy small{margin-top:3px;color:var(--muted);font-size:9px;line-height:1.35;white-space:normal}
.icon-library-entry>.icon:last-child{width:14px;height:14px;flex:0 0 14px}
.block-export-entry{margin:10px 12px;padding:10px;border:1px solid #dcd7ff;border-radius:10px;background:#f8f6ff;display:flex;align-items:center;gap:8px}.block-export-entry>div{flex:1;min-width:0}.block-export-entry b,.block-export-entry small{display:block}.block-export-entry b{font-size:11px;color:var(--primary)}.block-export-entry small{margin-top:2px;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.block-export-entry .btn{flex:0 0 auto;font-size:9px;padding:7px 8px}.block-export-entry .icon{width:13px;height:13px}
.block-export-tool{color:var(--primary)!important}.block-export-modal .modal-body{min-height:260px}.block-export-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 18px 0}.block-export-options section{border:1px solid var(--line);border-radius:10px;padding:11px;background:var(--surface)}.block-export-options section>b,.block-location-field>b{display:block;margin-bottom:8px;font-size:11px}.block-export-options section>label:not(.block-location-field){display:flex;align-items:flex-start;gap:7px;margin-top:7px;font-size:10px;color:var(--muted)}.block-location-field input{width:100%;height:34px;border:1px solid var(--line-strong);border-radius:8px;padding:0 9px;background:var(--surface);outline:none;font-size:10px}.block-location-field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.block-export-options section>small{display:block;margin-top:6px;color:var(--muted-2);font-size:9px;line-height:1.45}body.dark .block-export-entry{background:#29253d;border-color:#4b426f}
@media(max-width:900px){.block-export-options{grid-template-columns:1fr}}

/* Local delivery center */
.component-export-entry{margin:10px 12px;padding:10px;border:1px solid #dcd7ff;border-radius:10px;background:#f8f6ff;display:flex;align-items:center;gap:8px}.component-export-entry>div{flex:1;min-width:0}.component-export-entry b,.component-export-entry small{display:block}.component-export-entry b{font-size:11px;color:var(--primary)}.component-export-entry small{margin-top:2px;color:var(--muted);font-size:9px}.component-export-entry .btn{flex:0 0 auto;font-size:9px;padding:7px 8px}
.local-delivery-modal{width:min(1040px,92vw);height:min(760px,88vh);display:flex;flex-direction:column}.local-delivery-layout{display:grid;grid-template-columns:minmax(340px,1.2fr) minmax(280px,.8fr);min-height:0;flex:1;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.local-delivery-layout>aside{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);padding:14px}.local-delivery-layout>main{padding:18px;overflow:auto}.local-search{height:38px;display:flex;align-items:center;gap:7px;border:1px solid var(--line-strong);border-radius:9px;padding:0 10px;background:var(--surface)}.local-search .icon{width:15px;height:15px;color:var(--muted)}.local-search input{border:0;outline:0;background:transparent;width:100%;font:inherit;color:inherit}.local-select-tools{display:flex;gap:10px;padding:9px 2px}.local-select-tools button{padding:0;border:0;background:none;color:var(--primary);font-size:10px;cursor:pointer}.local-block-list{overflow:auto;min-height:0;padding-right:4px}.local-page-group{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:10px}.local-page-group h3{margin:0;padding:8px 10px;background:var(--surface-2);font-size:10px}.local-block-choice{display:flex;align-items:center;gap:8px;padding:8px 10px 8px calc(10px + var(--local-depth,0)*14px);border-top:1px solid var(--line);cursor:pointer}.local-block-choice:hover{background:var(--primary-soft)}.local-block-choice span{min-width:0}.local-block-choice b,.local-block-choice small{display:block}.local-block-choice b{font-size:10px}.local-block-choice small{font-size:8px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.local-summary-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:linear-gradient(135deg,var(--primary-soft),transparent);border:1px solid #dcd7ff}.local-summary-card>span{font-size:28px;font-weight:800;color:var(--primary)}.local-summary-card b,.local-summary-card small{display:block}.local-summary-card small{color:var(--muted);font-size:9px;margin-top:3px}.local-option-section{margin-top:14px;padding:13px;border:1px solid var(--line);border-radius:10px}.local-option-section>b{display:block;font-size:11px;margin-bottom:8px}.local-option-section label{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted);margin:7px 0}.local-delivery-note{margin-top:14px;color:var(--muted);font-size:9px;line-height:1.55}.local-empty{padding:30px;text-align:center;color:var(--muted)}
.block-code-location{margin:12px 18px 0;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.block-code-location summary{padding:10px 12px;font-size:11px;font-weight:700;cursor:pointer}.code-location-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:0 12px 10px}.code-location-grid label{font-size:9px;color:var(--muted)}.code-location-grid input,.code-location-grid select{display:block;width:100%;height:32px;margin-top:4px;border:1px solid var(--line-strong);border-radius:7px;padding:0 8px;background:var(--surface);color:inherit;font-size:9px}.code-location-grid .code-notes{grid-column:span 3}.code-analysis-actions{display:flex;align-items:center;gap:8px;padding:0 12px 10px}.code-analysis-actions>span{font-size:9px;color:var(--muted);flex:1}.code-analysis-results{margin:0 12px 12px;padding:8px 8px 8px 28px;background:var(--surface-2);border-radius:8px}.code-analysis-results li{margin:5px 0}.code-analysis-results button{border:0;padding:0;background:none;color:var(--primary);font-size:9px;cursor:pointer}.code-analysis-results small{display:block;color:var(--muted);font-size:8px}.component-export-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 18px}.component-export-summary>div{border:1px solid var(--line);border-radius:9px;padding:10px}.component-export-summary b,.component-export-summary span{display:block}.component-export-summary b{font-size:10px}.component-export-summary span{font-size:9px;color:var(--muted);margin-top:3px}
body.dark .component-export-entry{background:#29253d;border-color:#4b426f}@media(max-width:900px){.local-delivery-layout{grid-template-columns:1fr}.local-delivery-layout>aside{border-right:0;border-bottom:1px solid var(--line);max-height:360px}.code-location-grid{grid-template-columns:1fr 1fr}.code-location-grid .code-notes{grid-column:span 2}}@media(max-width:640px){.code-location-grid{grid-template-columns:1fr}.code-location-grid .code-notes{grid-column:auto}.component-export-summary{grid-template-columns:1fr}}
.block-library-backdrop{padding:4vh 5vw;background:rgba(27,29,40,.48);backdrop-filter:blur(3px)}.block-library-modal{width:90vw;height:88vh;max-width:1540px;background:#fff;border-radius:18px;box-shadow:0 28px 90px rgba(19,18,38,.26);display:grid;grid-template-rows:auto 1fr;overflow:hidden}.block-library-head{min-height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px;padding:18px 24px}.block-library-head>div:first-child{min-width:260px}.block-library-head h2{font-size:21px;margin:0 0 5px}.block-library-head p{font-size:11px;color:var(--muted);margin:0}.block-library-head>.close-btn{margin-left:auto;flex:0 0 auto}.block-search{height:42px;max-width:580px;flex:1;display:flex;align-items:center;gap:9px;border:1px solid var(--line-strong);border-radius:10px;background:#fafafa;padding:0 13px;color:var(--muted)}.block-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.block-search input{border:0;outline:0;background:transparent;width:100%;font-size:12px}.block-library-body{display:grid;grid-template-columns:205px minmax(0,1fr);min-height:0}.block-category-nav{border-right:1px solid var(--line);padding:18px 12px;background:#fafbfc;overflow:auto}.block-category-nav button{width:100%;border:0;border-radius:9px;background:transparent;padding:11px 12px;display:flex;justify-content:space-between;align-items:center;color:#555b68;font-size:12px;text-align:left;margin-bottom:4px}.block-category-nav button:hover{background:#f0eefc;color:var(--primary)}.block-category-nav button.active{background:var(--primary-soft);color:var(--primary);font-weight:750}.block-category-nav small{font-size:8px;padding:2px 5px;border-radius:10px;background:#eceef2;color:#8d919c}.block-template-area{padding:18px 22px 28px;overflow:auto;min-width:0}.block-template-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.block-template-title b{font-size:15px}.block-template-title span{font-size:10px;color:var(--muted);margin-left:10px}.block-template-title>small{font-size:9px;color:var(--muted)}.block-template-grid{display:grid;grid-template-columns:repeat(3,minmax(230px,1fr));gap:16px}.block-template-card{border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden;transition:.18s;cursor:pointer}.block-template-card:hover,.block-template-card.selected{border-color:#a99cf7;box-shadow:0 12px 30px rgba(45,39,95,.12);transform:translateY(-2px)}.block-template-card[hidden]{display:none}.block-template-info{min-height:94px;padding:12px;display:flex;gap:10px;align-items:flex-end}.block-template-info>div{flex:1;min-width:0}.block-template-info h3{font-size:12px;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.block-template-info p{font-size:9px;line-height:1.5;color:var(--muted);margin:0}.block-template-info .btn{opacity:0;flex:0 0 auto}.block-template-card:hover .btn,.block-template-card.selected .btn{opacity:1}.block-empty-results{padding:80px 20px;text-align:center;color:var(--muted)}
.block-thumb{height:150px;background:#f4f5f8;padding:22px;position:relative;overflow:hidden}.block-thumb i{display:block;height:7px;border-radius:5px;background:#272937;margin-bottom:8px}.block-thumb b{display:block;width:54px;height:18px;border-radius:5px;background:var(--primary)}.block-thumb em{display:block;background:linear-gradient(135deg,#dcd7ff,#f1efff);border-radius:9px}.thumb-nav{height:150px;display:flex;align-items:flex-start;gap:22px;padding-top:63px}.thumb-nav>i{width:55px}.thumb-nav>span{display:flex;gap:8px;flex:1}.thumb-nav>span i{height:5px;width:34px;background:#9a9da8}.thumb-nav>b{margin-left:auto}.thumb-split{display:grid;grid-template-columns:1fr .85fr;gap:25px}.thumb-split.reverse>span{order:2}.thumb-split>span{padding-top:12px}.thumb-split>span i:nth-child(1){width:86%;height:11px}.thumb-split>span i:nth-child(2){width:68%}.thumb-split>span i:nth-child(3){width:78%;height:5px;background:#aeb1bb}.thumb-split em{height:105px}.thumb-center{text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:35px}.thumb-center>i:nth-child(1){width:58%;height:12px}.thumb-center>i:nth-child(2){width:43%;background:#8d919e}.thumb-center>i:nth-child(3){width:32%;height:5px;background:#b6b9c2}.thumb-center>span{display:flex;gap:8px}.thumb-center b{display:inline-block}.thumb-cards header{display:flex;flex-direction:column;align-items:center}.thumb-cards header i:first-child{width:43%;height:10px}.thumb-cards header i:last-child{width:28%;height:5px;background:#aeb1bb}.thumb-cards>span{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.thumb-cards em{height:72px;background:#fff;border:1px solid #e0e2e8}.thumb-product{display:flex;flex-direction:column;align-items:center;padding-top:15px}.thumb-product i:first-child{width:42%;height:10px}.thumb-product i:nth-child(2){width:28%;height:5px;background:#aeb1bb}.thumb-product em{width:78%;height:92px;margin-top:6px;box-shadow:0 8px 16px rgba(76,66,140,.12)}.thumb-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;align-items:center}.thumb-stats i{height:25px;background:var(--primary);opacity:.85}.thumb-quote{display:flex;flex-direction:column;align-items:center}.thumb-quote>i{width:38%;height:10px}.thumb-quote>span{width:70%;height:82px;background:#fff;border:1px solid #e1e2e8;border-radius:10px;padding:20px;margin-top:12px}.thumb-quote span i{height:5px;background:#aeb1bb}.thumb-faq>i{width:32%;height:11px;margin:0 auto 15px}.thumb-faq span{display:block;width:80%;margin:auto}.thumb-faq span i{height:18px;background:#fff;border:1px solid #dedfe5;margin-bottom:7px}.thumb-form{display:grid;grid-template-columns:.8fr 1fr;gap:25px}.thumb-form>span{padding-top:26px}.thumb-form>span i:first-child{height:11px}.thumb-form>span i:last-child{background:#aeb1bb}.thumb-form>em{background:transparent}.thumb-form>em i{height:18px;background:#fff;border:1px solid #dfe1e7}.thumb-form>em b{margin-top:8px}.thumb-cta{background:linear-gradient(135deg,#6554dd,#7b6bec);display:flex;flex-direction:column;align-items:center;padding-top:40px}.thumb-cta i{background:#fff;width:47%}.thumb-cta i:nth-child(2){width:33%;height:5px;opacity:.65}.thumb-cta b{background:#fff}.thumb-footer{background:#252735;display:flex;align-items:center;gap:50px;padding-top:65px}.thumb-footer>i{width:80px;background:#fff}.thumb-footer>span{display:flex;gap:12px;flex:1}.thumb-footer>span i{height:5px;background:#a7aab6;flex:1}.thumb-blank{display:grid;place-items:center;background:#fff;border-bottom:1px dashed #d9dce5}.thumb-blank span{width:42px;height:42px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:24px}
.vc-link{display:flex;align-items:center;color:var(--primary);font-weight:650}.vc-list{margin:0;padding-left:22px}.vc-list li{margin:6px 0}.vc-badge{display:flex;align-items:center;justify-content:center}.vc-logo{display:flex;align-items:center}.vc-avatar{display:block;border-radius:999px;background:#eceaf8}.avatar-placeholder{display:grid;place-items:center;color:#8279bd}.vc-video{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:#242632;color:#fff;border-radius:14px}.vc-form-control{display:flex;align-items:center;gap:10px;border:1px solid #dcdde5;border-radius:9px;background:#fff;padding:12px;color:#8a8f9b}.vc-search-control{display:flex;align-items:center;justify-content:flex-start;gap:var(--search-icon-gap,10px);min-width:0;box-sizing:border-box;color:#98a2b3;overflow:hidden}.vc-search-control-icon{display:grid;place-items:center;flex:0 0 var(--search-icon-size,18px);width:var(--search-icon-size,18px);height:var(--search-icon-size,18px)}.vc-search-control-icon svg{display:block;width:100%;height:100%}.vc-search-control-placeholder{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vc-textarea{align-items:flex-start}.vc-select{justify-content:space-between}.vc-choice{display:flex;align-items:center;gap:9px}.vc-choice i.checkbox,.vc-choice i.radio{width:18px;height:18px;border:1px solid #c8cad3;display:block}.vc-choice i.radio{border-radius:50%}.vc-choice i.toggle{width:38px;height:22px;border-radius:20px;background:var(--primary);display:block;position:relative}.vc-choice i.toggle:after{content:"";width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;right:3px;top:3px}.vc-upload{display:flex;align-items:center;justify-content:center;gap:8px;border:1px dashed #c9cbd6;border-radius:10px;color:#777c89}.vc-hstack>.vc-container-children{flex-direction:row}.vc-grid>.vc-container-children{display:grid;grid-template-columns:repeat(2,1fr)}
.free-layout>.canvas-component>.vc-link,.free-layout>.canvas-component>.vc-list,.free-layout>.canvas-component>.vc-badge,.free-layout>.canvas-component>.vc-logo,.free-layout>.canvas-component>.vc-avatar,.free-layout>.canvas-component>.vc-video,.free-layout>.canvas-component>.vc-form-control,.free-layout>.canvas-component>.vc-search-control,.free-layout>.canvas-component>.vc-choice,.free-layout>.canvas-component>.vc-upload{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;box-sizing:border-box}
.vc-logo{display:block;max-width:100%;object-fit:contain;background:transparent}
@media(max-width:1050px){.block-template-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}.block-library-head>div:first-child{display:none}}@media(max-width:720px){.block-library-backdrop{padding:2vh 2vw}.block-library-modal{width:96vw;height:94vh}.block-library-body{grid-template-columns:1fr}.block-category-nav{display:flex;gap:5px;overflow:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}.block-category-nav button{width:auto;white-space:nowrap;margin:0}.block-template-grid{grid-template-columns:1fr}.block-library-head{padding:12px}.block-template-area{padding:14px}}

.new-project-modal{width:min(860px,96vw)}.new-project-modal .modal-head>div p{margin:5px 0 0;font-size:10px;color:var(--muted)}.plain-note{font-size:9px;font-weight:400;color:var(--muted);margin-left:6px}.site-type-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.site-type-option{position:relative;min-height:210px;border:1px solid var(--line-strong);border-radius:13px;background:#fff;padding:15px 42px 14px 15px;text-align:left;display:flex;align-items:flex-start;gap:10px}.site-type-option:hover{border-color:#aca2ed}.site-type-option.selected{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:#fcfbff}.option-radio{width:17px;height:17px;border:1.5px solid #b8bbc5;border-radius:50%;flex:0 0 auto;margin-top:1px;position:relative}.site-type-option.selected .option-radio{border-color:var(--primary)}.site-type-option.selected .option-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--primary)}.site-type-copy{min-width:0;flex:1}.site-type-copy>b{font-size:13px}.site-type-copy>p{min-height:58px;margin:7px 0 12px;color:var(--muted);font-size:9px;line-height:1.55}.option-help{position:absolute;right:12px;top:12px;width:21px;height:21px;border:1px solid #d6d8e0;border-radius:50%;display:grid;place-items:center;background:#fff;color:#737886;font-size:11px;font-weight:750;z-index:2}.option-help:hover,.option-help.open{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}.option-tooltip{display:none;position:absolute;right:-5px;top:27px;width:275px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:#20222c;color:#fff;font-size:10px;font-weight:400;line-height:1.6;box-shadow:0 12px 30px rgba(0,0,0,.2);z-index:8}.option-help:hover .option-tooltip,.option-help:focus .option-tooltip,.option-help.open .option-tooltip{display:block}.responsive-layout-demo,.desktop-layout-demo{height:76px;border-radius:9px;background:#f3f4f8;display:flex;align-items:center;justify-content:center;gap:10px;padding:9px}.responsive-layout-demo>b{font-size:8px;color:var(--primary);white-space:nowrap}.demo-device{border:1.5px solid #8f93a1;border-radius:4px;background:#fff;padding:4px;display:grid;grid-template-columns:.75fr 1fr;gap:3px}.demo-device>i{background:#d9d5f8;border-radius:2px}.demo-device>span{display:flex;flex-direction:column;gap:3px}.demo-device em{display:block;height:4px;border-radius:2px;background:#aeb1bc}.demo-desktop{width:84px;height:49px}.demo-phone{width:28px;height:53px;display:flex;flex-direction:column}.demo-phone>i{height:18px}.demo-phone>span{gap:2px}.demo-phone em{height:5px}.desktop-layout-demo{justify-content:flex-start}.desktop-layout-demo .demo-desktop{width:105px;height:58px}.desktop-layout-demo small{font-size:8px;color:var(--muted)}.preview-width-hint{margin:7px 0 0;padding:9px 11px;border-radius:8px;background:#f6f5fc;color:#666b78}.new-project-modal .template-option{display:flex;flex-direction:column;align-items:stretch}.new-project-modal .template-option b{font-size:11px}.new-project-modal .template-option small{font-size:8px;line-height:1.45;color:var(--muted);margin-top:5px}.new-project-modal .template-thumb{flex:0 0 auto}
body.dark .new-project-modal .site-type-option{background:var(--surface)}body.dark .preview-width-hint,body.dark .responsive-layout-demo,body.dark .desktop-layout-demo{background:var(--surface-2)}
@media(max-width:700px){.site-type-options{grid-template-columns:1fr}.site-type-option{min-height:190px}.new-project-modal .template-grid{grid-template-columns:repeat(2,1fr)}.option-tooltip{width:230px}}

.export-v2-modal{width:min(1080px,96vw);max-height:92vh}.export-v2-modal .modal-head>div p{margin:5px 0 0;color:var(--muted);font-size:10px}.export-language-options{display:flex;align-items:center;gap:16px;padding:13px 23px;border-bottom:1px solid var(--line);background:#fafafe;font-size:11px}.export-language-options label{display:flex;align-items:center;gap:5px}.export-language-options input{accent-color:var(--primary)}.export-language-options>span{margin-left:auto;color:var(--muted);font-size:9px}.export-v2-modal .export-tabs{overflow:auto}.export-v2-modal .export-tab{white-space:nowrap}.export-v2-modal .code-preview{min-height:360px;max-height:48vh}.export-v2-modal .modal-foot{flex-wrap:wrap}
.export-shot .canvas-frame{position:static!important;transform:none!important;width:100%!important;min-height:0!important;box-shadow:none!important;overflow:visible!important}.export-shot .canvas-section{outline:none!important}.export-shot .component-actions,.export-shot .section-tools,.export-shot .element-tag,.export-shot .resize-handle,.export-shot .snap-guide,.export-shot .drag-metric{display:none!important}.export-shot .canvas-component{outline:none!important;border-color:transparent}.export-shot .hidden-element{display:none!important}
.preview-document .block-editor-outline,.preview-document .block-name-tag,.preview-document .block-dock-overlay,.preview-document .block-resize-handle,.preview-document .unified-divider,.preview-document .page-dock-overlay,.export-shot .block-editor-outline,.export-shot .block-name-tag,.export-shot .block-dock-overlay,.export-shot .block-resize-handle,.export-shot .unified-divider,.export-shot .page-dock-overlay{display:none!important}
@media(max-width:720px){.export-language-options{align-items:flex-start;flex-wrap:wrap}.export-language-options>span{width:100%;margin-left:0}.export-v2-modal .modal-foot .btn{flex:1}}
.modal-backdrop{z-index:5000}
.preview-document .resize-handle{display:none!important}