html.media-preview-open{overflow:hidden}
.media-preview{width:min(1200px,calc(100vw - 32px));max-width:none;height:min(900px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);padding:0;background:var(--surface-solid);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.media-preview[open]{display:flex;flex-direction:column}
.media-preview::backdrop{background:#030b20cf;backdrop-filter:blur(7px)}
.media-preview-toolbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.media-preview-toolbar h2{flex:1;min-width:0;font:600 14px/1.4 var(--font-body);margin:0}
.media-preview-toolbar button{min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:500 12px var(--font-body);cursor:pointer;flex-shrink:0}
.media-preview-stage{flex:1;min-height:0;overflow:auto;background:#07101b;display:flex;align-items:center;justify-content:center;padding:14px}
.media-preview-stage img{display:block;max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto}
.media-preview.is-zoomed .media-preview-stage{display:block}
.media-preview.is-zoomed img{max-width:none;max-height:none;width:auto;height:auto;margin:auto}
@media(max-width:600px){.media-preview{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);border-radius:14px}.media-preview-toolbar{flex-wrap:wrap;padding:10px;gap:7px}.media-preview-toolbar h2{flex-basis:100%;font-size:12px}.media-preview-toolbar button{padding:10px 12px}.media-preview-stage{padding:8px}}