.an-image-preview { width:100vw; max-width:100vw; height:100vh; max-height:100vh; margin:0; padding:0; border:0; background:#101217; color:#f3f4f7; }
.an-image-preview::backdrop { background:#0d1018ee; }
.an-image-preview-toolbar { box-sizing:border-box; height:48px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 16px; background:#1c2029; font:13px system-ui,sans-serif; }
.an-image-preview-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-image-preview-toolbar>div { display:flex; align-items:center; gap:5px; flex:none; }
.an-image-preview-toolbar button { min-height:30px; padding:4px 9px; border:1px solid #414755; border-radius:6px; background:#272c37; color:inherit; cursor:pointer; }
.an-image-preview-toolbar button:hover,.an-image-preview-toolbar button:focus-visible { border-color:#9faeff; }
.an-image-preview-toolbar output { min-width:46px; text-align:center; }
.an-image-preview-stage { position:relative; box-sizing:border-box; width:100%; height:calc(100vh - 48px); overflow:hidden; cursor:grab; touch-action:none; }
.an-image-preview-stage.dragging { cursor:grabbing; }
.an-image-preview-stage img { position:absolute; left:50%; top:50%; max-width:none; max-height:none; width:auto; height:auto; transform-origin:center center; pointer-events:none; user-select:none; }
@media(max-width:520px) { .an-image-preview-toolbar { padding:0 8px; }.an-image-preview-toolbar button { padding:4px 6px; }.an-image-preview-title { max-width:64px; } }