.mockup-panel{position:absolute;top:10px;right:12px;bottom:12px;width:350px;display:none;flex-direction:column;border:1px solid #dfd9e4;border-radius:14px;background:#fff;box-shadow:0 18px 44px rgba(27,18,35,.24);z-index:25;overflow:hidden}.mockup-panel.open{display:flex}.mockup-head{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #ece8ef}.mockup-head small{display:block;color:#792acb;font-size:7px;font-weight:900;letter-spacing:.9px}.mockup-head h3{margin:3px 0 0;font-size:16px}.mockup-head button{width:30px;height:30px;border:0;border-radius:50%;background:#f1eef3;font-size:18px}.mockup-body{min-height:0;flex:1;overflow-y:auto;padding:14px}.mockup-upload{min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1.5px dashed #aaa2b0;border-radius:11px;background:#faf9fb;text-align:center;cursor:pointer}.mockup-upload:hover{border-color:#8b3dff;background:#fcfaff}.mockup-upload i{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#eee5fb;color:#6f21bd;font-style:normal;font-size:18px}.mockup-upload b{font-size:10px}.mockup-upload small{color:#817987;font-size:7px}.mockup-upload input{display:none}.mockup-guidance{margin:12px 0;padding:12px;border:1px solid #c9e7e9;border-radius:10px;background:#eefafb}.mockup-guidance strong,.mockup-guidance span{display:block}.mockup-guidance strong{color:#155d63;font-size:10px}.mockup-guidance span{margin-top:5px;color:#456b6e;font-size:8px;line-height:1.45}.mockup-field{display:block;margin:12px 0}.mockup-field>span{display:flex;justify-content:space-between;margin-bottom:5px;color:#655e69;font-size:8px;font-weight:800}.mockup-field input[type=number],.mockup-field select{width:100%;height:36px;border:1px solid #d5cfd9;border-radius:8px;padding:0 9px;background:#fff;font-size:10px}.mockup-field input[type=range]{width:100%;accent-color:#8b3dff}.mockup-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mockup-note{padding:10px;border-radius:9px;background:#f5f2f7;color:#746c78;font-size:7px;line-height:1.45}.mockup-footer{display:grid;gap:7px;padding:12px 14px;border-top:1px solid #e8e3eb;background:#fff}.mockup-footer button{height:38px;border-radius:8px;font-size:9px;font-weight:900}.mockup-download{border:0;background:linear-gradient(100deg,#8b3dff,#00a8d6);color:#fff}.mockup-exit{border:1px solid #d5cfd9;background:#fff}.stage.mockup-active{background:#292a2e;background-image:none}.stage.mockup-active .canvas-viewport{background-color:#292a2e;background-position:center;background-repeat:no-repeat;background-size:contain}.stage.mockup-active .canvas-frame{box-shadow:0 4px 18px rgba(0,0,0,.4)}.stage.mockup-active .stage-meta{background:rgba(20,20,23,.82);color:#d9d9dc;border-color:rgba(255,255,255,.15)}.stage.mockup-active .stage-meta b{color:#fff}.stage.mockup-active #gridButton,.stage.mockup-active #marginButton{display:none}.stage-options #mockupButton.active{border-color:#8b3dff;background:#8b3dff;color:#fff}@media(max-width:900px){.mockup-panel{left:10px;right:10px;width:auto}.stage.mockup-active .canvas-viewport{right:18px}}