.diy-page{height:calc(100vh - 64px);min-height:720px;background:#eef1f0;color:#17201d;overflow:hidden}.diy-page .topbar{height:72px;background:#fff;border-bottom:1px solid #dfe5e2;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:0 22px}.diy-page .title-block,.diy-page .topbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.diy-page .title-block{gap:12px}.diy-page .title-block>i{width:36px;height:36px;display:grid;place-items:center;background:#e8f5f0;color:#087f5b;border-radius:6px;font-size:18px}.diy-page .title-block h1{font-size:17px;margin:0}.diy-page .title-block p{margin:2px 0 0;color:#7a8581;font-size:12px}.diy-page .top-actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px}.diy-page .top-actions .save-state{color:#89928f;font-size:12px;margin-right:4px}.diy-page .workbench{height:calc(100% - 72px);display:grid;grid-template-columns:260px minmax(430px,1fr) 380px}.diy-page .property-sidebar,.diy-page .template-sidebar{background:#fff;overflow:hidden;border-right:1px solid #dfe5e2}.diy-page .template-sidebar{padding:18px 14px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.diy-page .panel-heading,.diy-page .section-line{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:12px}.diy-page .template-list{margin:14px -5px;padding:0 5px;overflow-y:auto;-webkit-box-flex:1;-ms-flex:1;flex:1}.diy-page .template-item{width:100%;border:1px solid transparent;background:transparent;display:grid;grid-template-columns:48px 1fr 18px;gap:10px;text-align:left;padding:9px;border-radius:6px;cursor:pointer;margin-bottom:5px;color:inherit}.diy-page .template-item:hover{background:#f5f8f7}.diy-page .template-item.active{background:#edf8f4;border-color:#a6d7c6}.diy-page .template-cover{width:48px;height:58px;background:#dfe8e4 50%/cover;border-radius:4px;display:grid;place-items:center;color:#70807a;font-size:20px}.diy-page .template-copy{min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.diy-page .template-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diy-page .template-meta{color:#89928f;font-size:11px;margin-top:6px}.diy-page .template-meta i{display:inline-block;width:6px;height:6px;background:#b3bab7;border-radius:50%;margin-right:4px}.diy-page .template-meta i.online{background:#16a36a}.diy-page .default-star{color:#e0a000;margin-top:4px}.diy-page .sidebar-actions{display:grid;gap:8px}.diy-page .canvas-area{min-width:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.diy-page .canvas-area,.diy-page .canvas-toolbar{display:-webkit-box;display:-ms-flexbox;display:flex}.diy-page .canvas-toolbar{height:46px;padding:0 18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;color:#52605b;font-size:13px;border-bottom:1px solid #dfe5e2;background:#f8faf9}.diy-page .canvas-toolbar span{color:#99a19e;margin-left:7px;font-size:11px}.diy-page .preview-stage{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:auto;padding:30px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.diy-page .preview-stage.desktop .phone-shell{width:95%;max-width:760px}.diy-page .preview-stage.desktop .phone-screen{min-height:650px}.diy-page .property-sidebar{border-right:0;border-left:1px solid #dfe5e2;overflow-y:auto}.diy-page .property-sidebar /deep/ .ant-tabs-bar{margin:0;padding:0 16px;position:sticky;top:0;background:#fff;z-index:5}.diy-page .settings-section{padding:18px;border-bottom:1px solid #edf0ef}.diy-page .section-line label,.diy-page .settings-section>label{font-size:13px;font-weight:600}.diy-page .section-line small{color:#9aa29f}.diy-page .module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.diy-page .module-grid button{height:62px;background:#f6f8f7;border:1px solid #e2e7e5;border-radius:5px;cursor:pointer;color:#53605c}.diy-page .module-grid button:hover{color:#087f5b;border-color:#79bea7;background:#edf8f4}.diy-page .module-grid i{display:block;font-size:17px;margin-bottom:5px}.diy-page .module-grid span{font-size:11px}.diy-page .module-row{display:grid;grid-template-columns:18px 18px 1fr 30px 18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;padding:9px 8px;border:1px solid #e4e8e6;margin-bottom:6px;border-radius:4px;cursor:pointer}.diy-page .module-row.active{border-color:#65ad95;background:#f0f8f5}.diy-page .drag-handle{cursor:move;color:#abb2af}.diy-page .remove-module{color:#aeb5b2}.diy-page .remove-module:hover{color:#e24949}.diy-page .module-editor{background:#fbfcfc}.diy-page .color-input{width:100%;height:36px;padding:2px;border:1px solid #d9d9d9;background:#fff}.diy-page .banner-field{margin-bottom:8px}.diy-page .asset-field{position:relative}.diy-page .asset-field>button{width:100%;min-height:70px;border:1px dashed #c9d2ce;background:#f7f9f8;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:7px;color:#73807b;cursor:pointer;overflow:hidden}.diy-page .asset-field img{width:74px;height:60px;-o-object-fit:cover;object-fit:cover}.diy-page .asset-clear{position:absolute;right:7px;top:7px;color:#d94747;cursor:pointer}.diy-page .binding-tip{background:#edf8f4;color:#31715d;padding:10px;border-left:3px solid #21a476;font-size:12px;margin-bottom:16px}.diy-page .binding-list{margin:16px 0}.diy-page .binding-list>div{display:grid;grid-template-columns:62px 1fr 18px;padding:9px 0;border-bottom:1px solid #edf0ef;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.diy-page .binding-list i{cursor:pointer;color:#a6aeab}.diy-page .empty-workbench{grid-column:.5;display:grid;place-items:center}.diy-page .phone-shell{width:390px;background:#151a18;padding:10px;border-radius:28px;-webkit-box-shadow:0 18px 50px rgba(24,35,31,.24);box-shadow:0 18px 50px rgba(24,35,31,.24);-webkit-transition:width .25s;transition:width .25s;position:relative}.diy-page .phone-speaker{width:58px;height:4px;background:#303835;border-radius:4px;position:absolute;z-index:3;top:8px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.diy-page .phone-screen{background:#f3f5f4;min-height:760px;max-height:calc(100vh - 190px);border-radius:20px;overflow-y:auto;overflow-x:hidden;color:#17201d}.diy-page .h5-hero{height:225px;position:relative;background:linear-gradient(145deg,var(--brand),#113e31);overflow:hidden}.diy-page .hero-banner{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.diy-page .hero-shade{position:absolute;inset:0;background:-webkit-gradient(linear,left top,left bottom,from(rgba(3,15,11,.08)),to(rgba(3,15,11,.72)));background:linear-gradient(180deg,rgba(3,15,11,.08),rgba(3,15,11,.72))}.diy-page .brand-lockup{position:absolute;left:22px;bottom:30px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:11px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff}.diy-page .brand-lockup>img,.diy-page .brand-lockup>span{width:46px;height:46px;border-radius:5px;-o-object-fit:cover;object-fit:cover;background:hsla(0,0%,100%,.92);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:21px}.diy-page .brand-lockup h2{color:#fff;font-size:21px;margin:0}.diy-page .brand-lockup p{margin:2px 0 0;font-size:11px;opacity:.78}.diy-page .hero-dots{position:absolute;bottom:10px;left:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:5px}.diy-page .hero-dots i{width:5px;height:5px;border-radius:5px;background:hsla(0,0%,100%,.45)}.diy-page .hero-dots i.active{width:15px;background:#fff}.diy-page .verify-strip{margin:-10px 14px 12px;position:relative;z-index:2;padding:13px;background:#fff;-webkit-box-shadow:0 4px 16px rgba(22,53,42,.09);box-shadow:0 4px 16px rgba(22,53,42,.09);display:grid;grid-template-columns:34px 1fr auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5px}.diy-page .verify-strip>i{color:var(--brand);font-size:25px}.diy-page .verify-strip div{display:grid}.diy-page .verify-strip strong{font-size:13px}.diy-page .verify-strip small{color:#8a9490;font-size:9px}.diy-page .verify-strip>span{font-size:9px;color:var(--brand);border:1px solid #9bd0bd;padding:3px 6px}.diy-page .h5-content{padding:0 14px}.diy-page .h5-module{background:#fff;padding:17px;margin-bottom:12px;border:2px solid transparent;-webkit-box-shadow:0 2px 10px rgba(31,48,42,.05);box-shadow:0 2px 10px rgba(31,48,42,.05)}.diy-page .h5-module.selected{border-color:var(--brand)}.diy-page .module-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;margin-bottom:13px}.diy-page .module-title span{font-weight:700;font-size:15px}.diy-page .module-title i{height:1px;-webkit-box-flex:1;-ms-flex:1;flex:1;background:#e7ebe9}.diy-page .module-copy{font-size:11px;color:#7c8783;margin:-5px 0 13px}.diy-page .archive-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e7ebe9}.diy-page .archive-grid div{background:#f8faf9;padding:10px;display:grid}.diy-page .archive-grid small{color:#89938f;font-size:9px}.diy-page .archive-grid b{font-size:12px;margin-top:2px}.diy-page .green{color:var(--brand)}.diy-page .journey>div{display:-webkit-box;display:-ms-flexbox;display:flex;gap:11px;position:relative;padding-bottom:13px}.diy-page .journey>div:not(:last-child):before{content:"";position:absolute;left:11px;top:23px;bottom:0;border-left:1px dashed #9bc8b8}.diy-page .journey i{width:23px;height:23px;-webkit-box-flex:0;-ms-flex:0 0 23px;flex:0 0 23px;background:#e5f4ef;color:var(--brand);border-radius:50%;display:grid;place-items:center;font-size:9px;font-style:normal;z-index:1}.diy-page .journey span{display:grid}.diy-page .journey b{font-size:11px}.diy-page .journey small{color:#9aa29f;font-size:9px}.diy-page .rich-content{font-size:12px;line-height:1.7;overflow-wrap:anywhere}.diy-page .rich-content /deep/ img{max-width:100%;height:auto}.diy-page .map-card{color:inherit;display:grid;grid-template-columns:78px 1fr 14px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px}.diy-page .map-card>img,.diy-page .map-placeholder{width:78px;height:64px;-o-object-fit:cover;object-fit:cover;background:#e2eee9;display:grid;place-items:center;color:var(--brand);font-size:22px}.diy-page .map-card span{display:grid}.diy-page .map-card small{color:#8a9490;font-size:9px;margin-top:4px}.diy-page .h5-module video{width:100%;max-height:220px;background:#111}.diy-page .media-empty{height:150px;background:#e6ece9;display:grid;place-items:center;-ms-flex-line-pack:center;align-content:center;color:#87928e;gap:6px}.diy-page .media-empty i{font-size:32px}.diy-page .certificate>img{width:100%;max-height:190px;-o-object-fit:contain;object-fit:contain;margin-bottom:10px}.diy-page .certificate>div{border:1px solid #d7c89e;background:#fffdf6;padding:12px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px}.diy-page .certificate>div>i{color:#a78327;font-size:28px}.diy-page .certificate span{display:grid}.diy-page .certificate small{color:#8e876f;font-size:9px}.diy-page .coupon{background:var(--brand);background-size:cover;color:#fff;min-height:96px;padding:16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.diy-page .coupon>div{display:grid}.diy-page .coupon small{opacity:.78}.diy-page .coupon b{font-size:16px}.diy-page .coupon code{color:#fff;font-size:10px}.diy-page .coupon a{color:var(--brand);background:#fff;padding:7px 10px;font-size:10px}.diy-page .h5-footer{text-align:center;padding:30px 18px 38px;color:#71807a}.diy-page .footer-mark{color:var(--brand);font-size:21px}.diy-page .h5-footer strong{display:block;color:#51605a;font-size:11px;margin:5px}.diy-page .h5-footer a,.diy-page .h5-footer p{font-size:8px;margin:0;color:#9aa39f}.diy-page .modal-preview{height:72vh;overflow:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#e7ebe9;padding:24px}.diy-page .modal-preview .phone-screen{max-height:none}.diy-page .publish-form{margin-top:18px}.diy-page .version-timeline{padding-top:8px}.diy-page .version-card{border:1px solid #e4e8e6;padding:13px}.diy-page .version-card>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px}.diy-page .version-card time{margin-left:auto;color:#929b97;font-size:11px}.diy-page .version-card p{color:#707b77;margin:9px 0}.diy-page .version-card button{margin-right:6px}.diy-page .asset-toolbar{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:18px}.diy-page .asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.diy-page .asset-grid button{position:relative;border:1px solid #e1e6e4;background:#fff;padding:8px;text-align:left;cursor:pointer}.diy-page .asset-grid button:hover{border-color:#399a79}.diy-page .asset-grid img{width:100%;aspect-ratio:1.33333333;-o-object-fit:cover;object-fit:cover;display:block;margin-bottom:7px}.diy-page .asset-grid span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diy-page .asset-grid small{color:#919a96}.diy-page .asset-grid button>i{position:absolute;right:12px;bottom:12px;color:#cc4848}.diy-page .crop-wrap{height:430px;background:#202523}.diy-page .quality-row{display:grid;grid-template-columns:80px 1fr 45px;gap:10px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:14px}@media (max-width:1100px){.diy-page .workbench{grid-template-columns:220px minmax(400px,1fr) 340px}.diy-page .topbar{padding:0 12px}.diy-page .save-state,.diy-page .title-block p{display:none}}