:root{font-family:'MiSans','Microsoft YaHei',system-ui,sans-serif;color:#17372e;background:#e9eee6;--screen-width:390px;--screen-height:844px;--device-width:406px;--device-height:860px;--preview-scale:1}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#f6f8f2 10%,#e6ece2 100%)}.preview-toolbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1120px;margin:0 auto;padding:0 35px}.preview-brand{display:flex;align-items:center;gap:11px}.preview-brand img{width:35px;height:35px;border-radius:8px}.preview-brand strong{font-size:15px;letter-spacing:1px;display:block}.preview-brand span{font-size:10px;color:#8a9b80;display:block;margin-top:4px;letter-spacing:2px}.device-control{display:flex;align-items:center;gap:12px;font-size:11px;color:#7c8f70}.device-control select{font:11px 'Microsoft YaHei',sans-serif;border:1px solid #cdd9c5;background:#ffffff80;color:#48633b;padding:10px 30px 10px 13px;border-radius:10px;cursor:pointer;outline-offset:4px}.preview-stage{height:calc(100dvh - 118px);display:flex;align-items:center;justify-content:center;padding:8px 20px}.device-slot{position:relative;width:calc(var(--device-width)*var(--preview-scale));height:calc(var(--device-height)*var(--preview-scale));flex-shrink:0}.device-shell{width:var(--device-width);height:var(--device-height);padding:8px;background:#18362c;border-radius:39px;box-shadow:0 18px 55px #1b3d2a1c,0 0 0 1px #0f2d2738,inset 0 0 0 2px #4c6659;transform:scale(var(--preview-scale));transform-origin:top left}.device-shell iframe{border:0;display:block;width:var(--screen-width);height:var(--screen-height);border-radius:31px;background:#f6f7f2}.preview-footer{height:40px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;color:#829577;letter-spacing:.4px}.status-light{height:5px;width:5px;border-radius:50%;background:#7eab45}.footer-divider{color:#b2bfaa;margin:0 3px}
@media(max-width:600px){.preview-toolbar,.preview-footer{display:none}.preview-stage{height:100dvh;padding:0}.device-slot,.device-shell,.device-shell iframe{width:100vw;height:100dvh}.device-shell{padding:0;border-radius:0;box-shadow:none;transform:none}.device-shell iframe{border-radius:0}}
@media(max-height:600px) and (min-width:601px){.preview-toolbar{height:60px}.preview-stage{height:calc(100dvh - 88px)}.preview-footer{height:28px}}