/* The preview uses a real iframe viewport, so existing media queries apply. */
.studio-mobile-preview{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;min-height:40px;border:1px solid #d4c6e5;border-radius:24px;background:#f1eafa;color:#4c2f70;font:inherit;font-size:11px;line-height:1.4}
.studio-mobile-preview svg{width:15px;height:18px}
body[data-preview-frame=on] .studio{display:none!important}
@media(max-width:760px){.studio-mobile-preview{display:none}}
.device-preview-page{margin:0;background:#eee9f6;color:#291a3b;font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;line-height:1.5}
.device-preview-page *{box-sizing:border-box}
.device-toolbar{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 28px;border-bottom:1px solid #d9cfea;background:#faf8ff}
.device-brand{display:flex;align-items:center;gap:14px;font-size:13px}
.device-brand strong{letter-spacing:.04em;font-size:20px}
.device-brand span{color:#79658d}
.device-sizes{display:flex;align-items:center;gap:6px;padding:4px;background:#e9e1f3;border-radius:30px}
.device-sizes button{min-width:52px;min-height:40px;padding:8px 14px;border:0;border-radius:24px;background:transparent;color:#5f4874;cursor:pointer;font:inherit;font-size:13px}
.device-sizes button[aria-pressed=true]{background:#7640c0;color:#fff;box-shadow:0 2px 8px #4d237028}
.desktop-view{padding:9px 14px;min-height:42px;border:1px solid #cdbbdf;border-radius:24px;text-decoration:none;color:#4e3069;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.device-toolbar button:focus-visible,.desktop-view:focus-visible{outline:3px solid #9364ce;outline-offset:3px}
.device-workspace{display:flex;flex-direction:column;align-items:center;padding:12px 16px;gap:10px}
.device-workspace>p{margin:0;font-size:12px;color:#79658d;text-align:center;max-width:90vw}
.device-shell{box-sizing:content-box;width:var(--device-width);max-width:calc(100vw - 52px);height:min(844px,calc(100dvh - 160px));min-height:320px;padding:7px;background:#24172f;border:1px solid #3a2948;border-radius:30px;box-shadow:0 18px 60px #2d16472e;overflow:hidden}
.device-shell iframe{display:block;width:100%;height:100%;background:#110c22;border:0;border-radius:23px}
.viewport-label{font-size:11px;letter-spacing:.03em;color:#79658d}
@media(max-width:760px){.device-toolbar{padding:12px 16px;gap:12px;flex-wrap:wrap}.device-brand{gap:10px}.device-brand strong{font-size:17px}.device-brand span{font-size:12px}.desktop-view{font-size:12px;margin-left:auto;padding:8px 12px}.device-sizes{order:3;width:100%;justify-content:center}.device-shell{height:calc(100dvh - 218px);min-height:300px}.device-workspace>p{font-size:11px}}