.demo-body{background:#eef2ef;min-height:100vh}.demo-nav{height:72px;background:#07110c;color:#fff;padding:0 34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff15}.demo-nav>a img{width:136px}.demo-nav>div{display:flex;align-items:center;gap:22px}.demo-nav>div>span{color:#8a9890;font-size:12px}.demo-nav>div>a{background:#18e382;color:#07110c;border-radius:9px;padding:10px 16px;font-weight:800;font-size:13px}.demo-studio{display:grid;grid-template-columns:420px minmax(500px,1fr);min-height:calc(100vh - 72px)}.demo-editor{background:#fff;border-right:1px solid #dce3de;padding:40px 44px;overflow:auto}.editor-head>a{font-size:12px;color:#69786f}.editor-head>p{margin:37px 0 8px;color:#079750;font-size:10px;letter-spacing:.15em;font-weight:900}.editor-head h1{font-size:40px;letter-spacing:-.05em;line-height:1.04;margin:0 0 10px}.editor-head>span{color:#68776e}.editor-form{margin-top:33px;display:grid;gap:23px}.editor-field{display:grid;gap:7px}.editor-field>label:first-child{font-size:12px;font-weight:800}.editor-field input,.editor-field select{border:1px solid #ced8d2;border-radius:10px;padding:12px;background:#fff;outline:none}.editor-field input:focus,.editor-field select:focus{border-color:#0abe65;box-shadow:0 0 0 3px #18e38220}.logo-upload{display:flex;align-items:center;gap:12px;padding:10px;border:1px dashed #b4c2ba;border-radius:12px;cursor:pointer}.logo-upload input{display:none}.upload-preview{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:10px;background:#07110c;color:#18e382;font-size:18px;font-weight:900;overflow:hidden}.upload-preview img{width:100%;height:100%;object-fit:cover}.logo-upload b,.logo-upload small{display:block}.logo-upload b{font-size:12px}.logo-upload small{color:#7b8981;font-size:10px}.editor-note{border-top:1px solid #e1e6e3;margin-top:31px;padding-top:22px}.editor-note b,.editor-note span{display:block}.editor-note b{font-size:12px}.editor-note span{font-size:11px;color:#718078;margin-top:4px}.editor-cta{margin-top:23px;background:#07110c;color:#fff;padding:14px 16px;border-radius:10px;display:flex;justify-content:space-between;font-size:13px;font-weight:800}.editor-cta span{color:#18e382}.preview-stage{background:#e7ece8;min-width:0;display:flex;flex-direction:column}.preview-toolbar{height:60px;background:#f6f8f7;border-bottom:1px solid #d8e0db;padding:0 28px;display:flex;align-items:center;justify-content:space-between}.preview-toolbar>div{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:750}.preview-toolbar i{width:8px;height:8px;border-radius:50%;background:#18e382;box-shadow:0 0 0 4px #18e3821f}.preview-toolbar button{border:0;background:none;color:#617068;font-size:11px;cursor:pointer}.device-wrap{flex:1;display:grid;place-items:center;padding:34px;overflow:hidden;background-image:linear-gradient(#d9e0dc 1px,transparent 1px),linear-gradient(90deg,#d9e0dc 1px,transparent 1px);background-size:32px 32px}.phone-device{width:390px;height:760px;background:#fff;border:10px solid #101613;border-radius:50px;box-shadow:0 35px 80px #1834242c,0 0 0 1px #000;position:relative;overflow:hidden}.phone-device:before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:27px;border-radius:20px;background:#101613;z-index:5}.device-bar{height:40px;padding:12px 22px 0;display:flex;justify-content:space-between;font-size:9px;font-weight:800}.device-bar i{width:85px}.mobile-browser{height:42px;margin:3px 14px 8px;border-radius:11px;background:#f0f3f1;display:grid;place-items:center;color:#6c7971;font-size:9px}.phone-device iframe{display:block;width:100%;height:630px;border:0;background:#fff}.home-indicator{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:116px;height:4px;border-radius:4px;background:#111}.preview-caption{height:45px;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;color:#718078;font-size:10px}.preview-caption span{width:6px;height:6px;background:#18e382;border-radius:50%}@media(max-width:1000px){.demo-studio{grid-template-columns:360px 1fr}.demo-editor{padding:35px 30px}.phone-device{width:370px}}@media(max-width:780px){.demo-nav{padding:0 17px}.demo-nav>div>span{display:none}.demo-studio{display:block}.demo-editor{border:0}.preview-stage{min-height:850px}.device-wrap{padding:28px 12px}.phone-device{width:min(370px,94vw)}.editor-head>a{display:none}}@media(max-width:390px){.phone-device{height:720px}.phone-device iframe{height:590px}}