/* The viewer keeps all image transforms inside its own clipped viewport. */
#preview-modal.image-viewer {
 width: min(1120px, calc(100vw - 24px));height: min(900px, 90vh);height: min(900px, 90dvh);max-width: calc(100vw - 24px);
 max-height: calc(100vh - 24px);max-height: calc(100dvh - 24px);padding: 0;overflow: hidden;isolation: isolate;
 border: 1px solid #abc8b5;border-radius: 18px;background: #f9fcfaf5;
 box-shadow: 0 28px 100px #163e2a40;
}
#preview-modal.image-viewer[open] {display: flex;flex-direction: column;}
.image-viewer-close-form {flex: none;height: 0;margin: 0;padding: 0;}
.image-viewer .dialog-close {z-index: 3;top: 14px;right: 14px;background: #e9f3ec;border: 1px solid #bad1c2;}
.image-viewer-header {display: flex;align-items: center;gap: 14px;flex: none;min-width: 0;padding: 17px 64px 12px 20px;}
.image-viewer-header .image-viewer-title {margin: 0;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 17px;line-height: 1.6;font-weight: 600;}
.image-viewer-position {flex: none;color: #496152;font-size: 13px;font-variant-numeric: tabular-nums;white-space: nowrap;}
.image-viewer-toolbar {display: flex;align-items: center;flex-wrap: wrap;gap: 10px 18px;flex: none;padding: 0 20px 13px;}
.image-viewer-controls {display: flex;align-items: center;gap: 6px;}
.image-viewer .image-viewer-button {
 display: inline-flex;justify-content: center;align-items: center;gap: 5px;flex: none;min-height: 36px;min-width: 36px;
 margin: 0;padding: 6px 11px;border: 1px solid #9cbaa7;border-radius: 8px;background: #fffffff2;color: #244d36;
 font: inherit;font-size: 13px;line-height: 1.4;white-space: nowrap;cursor: pointer;text-decoration: none;
 transition: background-color 140ms,border-color 140ms,box-shadow 140ms;
}
.image-viewer .image-viewer-button:hover:not(:disabled) {border-color: #4a8862;background: #e8f3ec;}
.image-viewer .image-viewer-button:active:not(:disabled), .image-viewer-button[aria-pressed=true] {background: #d9ebdf;border-color: #52896a;}
.image-viewer .image-viewer-button:disabled {opacity: .42;cursor: not-allowed;}
.image-viewer .image-viewer-button:focus-visible {outline: 2px solid #176b4c;outline-offset: 2px;}
.image-viewer-percent {min-width: 63px;text-align: center;color: #183e2b;font-size: 13px;font-weight: 600;font-variant-numeric: tabular-nums;}
.image-viewer-download {margin-left: auto !important;}
.image-viewer-viewport {
 position: relative;flex: 1;min-width: 0;min-height: 0;overflow: hidden;isolation: isolate;touch-action: none;
 user-select: none;-webkit-user-select: none;overscroll-behavior: contain;outline-offset: -3px;
 border-top: 1px solid #c6dacd;border-bottom: 1px solid #c6dacd;
 background: repeating-conic-gradient(#edf3ef 0% 25%, #f7faf8 0% 50%) 50% / 24px 24px;
}
.image-viewer-viewport.can-pan {cursor: grab;}
.image-viewer-viewport.can-pan.is-dragging {cursor: grabbing;}
#preview-modal.image-viewer .image-viewer-image {
 position: absolute;top: 50%;left: 50%;display: block;max-width: none;max-height: none;margin: 0;object-fit: fill;
 transform-origin: center;pointer-events: none;user-select: none;-webkit-user-select: none;transition: none;
 box-shadow: 0 3px 22px #24463218;
}
.image-viewer-message {position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 14px;padding: 24px;text-align: center;}
.image-viewer-message-text {max-width: 440px;margin: 0;padding: 14px 20px;border: 1px solid #bdd2c4;border-radius: 12px;background: #fcfefbee;color: #365f45;line-height: 1.8;}
.image-viewer-viewport[data-state=loading] .image-viewer-message-text::before {
 content: '';display: inline-block;width: 13px;height: 13px;margin-right: 9px;border: 2px solid #bed8c7;border-top-color: #277755;
 border-radius: 50%;vertical-align: -2px;animation: image-viewer-spin .8s linear infinite;
}
.image-viewer-viewport[data-state=error] .image-viewer-message-text, .image-viewer-viewport[data-state=expired] .image-viewer-message-text {color: #754a32;border-color: #d6c4b2;background: #fffaf3ee;}
.image-viewer-status {flex: none;min-height: 38px;margin: 0;padding: 10px 20px;color: #45604e;font-size: 12px;line-height: 1.5;text-align: center;}
@keyframes image-viewer-spin {to {transform: rotate(360deg);}}
@media(max-width: 620px) {
 #preview-modal.image-viewer {width: calc(100vw - 16px);max-width: calc(100vw - 16px);height: 94vh;height: 94dvh;max-height: calc(100vh - 16px);max-height: calc(100dvh - 16px);border-radius: 13px;}
 .image-viewer-header {padding: 14px 58px 11px 12px;gap: 9px;}
 .image-viewer-header .image-viewer-title {font-size: 15px;}
 .image-viewer-toolbar {gap: 8px;padding: 0 10px 10px;}
 .image-viewer-toolbar > .image-viewer-controls:first-child {order: 0;}
 .image-viewer-toolbar > .image-viewer-download {order: 1;}
 .image-viewer-toolbar > .image-viewer-controls:nth-child(2) {order: 2;flex-basis: 100%;justify-content: center;}
 .image-viewer .image-viewer-button {min-height: 40px;padding: 7px 9px;}
 .image-viewer-controls {gap: 4px;}
 .image-viewer-percent {min-width: 54px;}
 .image-viewer-status {padding: 8px 12px;font-size: 11px;}
}
@media(prefers-reduced-motion: reduce) {
 .image-viewer .image-viewer-button {transition: none;}
 .image-viewer-viewport[data-state=loading] .image-viewer-message-text::before {animation: none;}
}
body.no-motion .image-viewer-viewport[data-state=loading] .image-viewer-message-text::before {animation: none;}

@media (max-width: 760px), (max-width: 950px) and (max-height: 500px) {
 .image-viewer .image-viewer-button {min-height: 44px;min-width: 44px;}
 .image-viewer .dialog-close {min-height: 44px;min-width: 44px;top: 6px;right: 6px;}
 .image-viewer-header {padding-right: 60px;}
}