*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
body{height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#eef3f8;color:#242b36}
#preview-toolbar{flex-shrink:0;padding:16px 24px;background:#fff;display:flex;align-items:center;flex-wrap:wrap;gap:12px;border-bottom:1px solid #e1e7ef;position:relative;z-index:1000;font-size:13px}
#preview-toolbar nav{display:flex;gap:6px;flex-wrap:wrap}
#preview-toolbar a,#preview-toolbar button{border:0;background:#edf7fa;color:#277c9e;padding:8px 12px;border-radius:7px;text-decoration:none;font:inherit;cursor:pointer}
#preview-toolbar a[aria-current]{background:#1d91c7;color:#fff}
.preview-toolbar-brand{font-weight:600}.preview-toolbar-brand small{font-size:11px;font-weight:400;margin-left:8px;color:#6f8b93}
.preview-tools{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
#preview-status{flex-basis:100%;height:33px;overflow:hidden;font-size:11px;color:#788391;line-height:1.5}
#preview-stage{flex:1;min-height:0;width:100%;padding:24px;display:flex;justify-content:center;align-items:stretch;overflow:hidden}
/* This is an app canvas, not a copied phone shell or fixed-aspect screenshot. */
#app-frame{width:min(100%,480px);height:100%;min-width:0;overflow-y:auto;overflow-x:hidden;background:#fff;position:relative;transform:translateZ(0);box-shadow:0 5px 22px #1b385014;scrollbar-width:none;scroll-padding-bottom:120px}
#native-page{min-height:100%}
#app-frame::-webkit-scrollbar,.mp-scroll-view::-webkit-scrollbar{display:none}
#app-frame div{box-sizing:border-box}
#app-frame button{display:block;margin-left:auto;margin-right:auto;padding-left:14px;padding-right:14px;text-align:center;font:inherit;font-size:18px;line-height:2.55555556;background:#f8f8f8;border:0;border-radius:5px;color:#000;overflow:hidden;cursor:pointer;box-sizing:border-box;position:relative;appearance:none;-webkit-appearance:none}
#app-frame button::after{content:"";position:absolute;inset:0;border:1px solid #0003;border-radius:inherit;pointer-events:none;box-sizing:border-box}
#app-frame button[disabled]{color:#0005;cursor:default}
#app-frame input,#app-frame textarea{font:inherit;color:inherit;outline:none;border:0;appearance:none;-webkit-appearance:none}
#app-frame textarea{resize:none;display:block;width:100%;line-height:1.4}
#app-frame input::placeholder,#app-frame textarea::placeholder{color:#999}
#app-frame img{display:inline-block;vertical-align:middle;max-width:none;border:0}
#app-frame .mp-scroll-view{display:block;overflow:hidden;scrollbar-width:none}#app-frame .mp-scroll-x{overflow-x:auto;overflow-y:hidden}#app-frame .mp-scroll-y{overflow-y:auto}#app-frame .mp-picker{display:block;cursor:pointer}#app-frame .mp-component{display:contents}#app-frame .mp-checkbox-group,#app-frame .mp-radio-group{display:block}#app-frame .mp-swiper{position:relative;overflow:hidden}#app-frame .mp-swiper-item:not(:first-child){display:none}
#app-frame .buy-mask,#app-frame .sheet-mask{position:fixed}
/* Captures use the caller's actual viewport size; no implicit device preset. */
.capture-mode #preview-toolbar{display:none}.capture-mode #preview-stage{padding:0}.capture-mode #app-frame{width:100%;box-shadow:none}.capture-mode #app-frame .demo-note{display:none}
#preview-overlays{position:fixed;inset:0;pointer-events:none;z-index:10000}.preview-overlay{position:absolute;inset:0;background:#0007;display:flex;align-items:center;justify-content:center;pointer-events:auto;padding:24px}.preview-dialog{width:320px;max-width:100%;background:white;border-radius:15px;padding:22px;font-size:14px;box-shadow:0 8px 32px #0003}.preview-dialog h2{font-size:18px;margin:0 0 15px}.preview-dialog p{white-space:pre-wrap;line-height:1.6;color:#6e6166;margin:0 0 18px}.preview-dialog button{border:0;background:#199ac4;color:white;border-radius:8px;padding:12px 16px;font:inherit;cursor:pointer}.preview-dialog-actions{display:flex;justify-content:flex-end;gap:8px}.preview-dialog .preview-cancel{background:#f6f0f2;color:#66565c}.preview-action-sheet{display:grid;gap:8px}.preview-image-dialog{width:min(90vw,500px);background:#fff;padding:12px;border-radius:14px;position:relative}.preview-image-dialog img{display:block;width:100%;max-height:75vh;object-fit:contain}.preview-image-dialog button{border:0;background:#fbe9ee;padding:10px;border-radius:7px;cursor:pointer}.preview-image-controls{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.preview-toast{position:absolute;top:40%;left:50%;transform:translateX(-50%);max-width:320px;text-align:center;padding:14px 20px;border-radius:10px;background:#241a21e6;color:white;font-size:14px}.preview-fatal{padding:30px;color:#a23a4c;white-space:pre-wrap;font-size:13px}
.preview-swiper-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:3}.preview-swiper-dots span{width:5px;height:5px;border-radius:50%;background:#ffffff77;cursor:pointer}.preview-swiper-dots span.selected{width:16px;border-radius:3px;background:white}
@media(max-width:600px){#preview-toolbar{padding:10px 12px;gap:8px}#preview-toolbar nav{width:100%}#preview-toolbar nav a{flex:1;text-align:center;padding:8px 5px}.preview-toolbar-brand small{display:block;margin:4px 0 0}.preview-tools{margin-left:0}#preview-stage{padding:0}#app-frame{width:100%;box-shadow:none}}