/* The media itself is the surface: no header strip or padded inner card. */
.media-dialog{--media-ratio:1.7777778;width:min(1120px,calc(100vw - 48px),calc((100svh - 64px)*var(--media-ratio)));height:auto;aspect-ratio:var(--media-ratio);max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:16px;overflow:hidden;background:#08090c;box-shadow:0 25px 100px #0006;outline:none}
.media-dialog::backdrop{background:#17131ccd;backdrop-filter:blur(5px)}
.media-dialog .dialog-content{position:absolute;inset:0;width:100%;height:100%;min-height:0;border-radius:inherit;overflow:hidden}
.media-dialog .dialog-content>img,.media-dialog .dialog-content>video{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border-radius:0;background:transparent}
.media-dialog .dialog-close{position:absolute;top:12px;right:12px;z-index:5;width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid #ffffff4d;border-radius:50%;background:#15151aba;color:#fff;font:300 29px/1 Arial;box-shadow:0 2px 12px #0002;backdrop-filter:blur(8px);padding:0;display:grid;place-items:center}
.media-dialog .dialog-close:focus-visible{outline:3px solid #f0bf90;outline-offset:3px}.media-dialog .dialog-close:hover{background:#292832e6;transform:none}.media-dialog .media-status{border-radius:0}
@media(max-width:760px){.media-dialog{width:min(calc(100vw - 24px),calc((100svh - 40px)*var(--media-ratio)));border-radius:12px}.media-dialog .dialog-close{top:8px;right:8px;width:44px;height:44px;font-size:27px}}
@media(prefers-reduced-motion:reduce){.media-dialog,.media-dialog::backdrop{animation:none!important;transition:none!important}}