.image-modal { width: min(1400px, calc(100vw - 1.5rem)); max-width: none; max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); margin: auto; padding: 0; overflow: hidden; color: var(--sb-ink); background: var(--sb-surface, #fff); border: 1px solid var(--sb-line); border-radius: 1rem; box-shadow: 0 20px 70px rgb(0 0 0 / 25%); }
.image-modal[open] { display: flex; flex-direction: column; }
.image-modal::backdrop { background: rgb(20 16 11 / 70%); }
.image-modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--sb-line); }
.image-modal-header h2 { min-width: 0; overflow-wrap: anywhere; }
.image-modal-actions { display: flex; flex-shrink: 0; align-items: center; gap: .5rem; }
.image-modal-actions .btn { min-height: 44px; }
.image-modal-close { display: inline-grid; place-items: center; width: 44px; padding: .5rem; }
.image-modal-stage { min-height: 0; padding: .75rem; overflow: auto; overscroll-behavior: contain; background: #ece8e1; }
.image-modal-stage img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 10rem); max-height: calc(100dvh - 10rem); margin: auto; object-fit: contain; }
.image-modal-stage img[hidden] { display: none; }
.image-modal.is-natural .image-modal-stage img { max-width: none; max-height: none; }
.image-modal-status { flex-shrink: 0; margin: 0; padding: .6rem 1rem; font-size: .875rem; }
.image-modal-status:empty { display: none; }
@media (max-width: 575.98px) { .image-modal-header { padding: .65rem; } .image-modal-header h2 { font-size: .85rem; } .image-modal-actions .btn { font-size: .8rem; } .image-modal-stage { padding: .4rem; } }
@media print { .image-modal { display: none !important; } }