.image-viewer-trigger { display: block; width: 100%; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; cursor: zoom-in; }
.image-viewer-trigger > img { display: block; }
.image-viewer-trigger:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
html.image-viewer-open { overflow: hidden; }
.image-viewer { box-sizing: border-box; width: min(1200px, calc(100vw - 40px)); height: min(900px, calc(100dvh - 40px)); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line, #d7dcd6); border-radius: 12px; background: #faf9f6; color: var(--ink); box-shadow: 0 20px 80px #0005; }
.image-viewer[open] { display: flex; flex-direction: column; }
.image-viewer::backdrop { background: rgba(15, 23, 18, .78); }
.image-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid #d7dcd6; }
.image-viewer-toolbar h2 { margin: 0; font-size: 1rem; }
.image-viewer-controls { display: flex; align-items: center; gap: 6px; }
.image-viewer-controls button { min-width: 44px; min-height: 44px; border: 1px solid #cbd1ca; border-radius: 6px; background: #fff; color: #18231c; padding: 8px 12px; font: inherit; font-weight: 650; cursor: pointer; }
.image-viewer-controls button:disabled { opacity: .4; cursor: default; }
.image-viewer-controls button:focus-visible, .image-viewer-stage:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.image-viewer-controls output { min-width: 48px; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; }
.image-viewer-stage { flex: 1; min-height: 0; overflow: hidden; position: relative; background: #eeeFEB; touch-action: none; user-select: none; }
.image-viewer-stage.is-zoomed { cursor: grab; }
.image-viewer-stage.is-dragging { cursor: grabbing; }
.image-viewer-stage > img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; margin: 0; object-fit: contain; transform-origin: center; pointer-events: none; border-radius: 0; }
.image-viewer-stage > img[hidden] { display: none; }
.image-viewer-status { position: absolute; top: 45%; width: 100%; padding: 0 20px; text-align: center; }
.image-viewer-footer { padding: 10px 18px; border-top: 1px solid #d7dcd6; }
.image-viewer-footer p { margin: 0; font-size: .85rem; }
.image-viewer-footer p + p { margin-top: 4px; color: var(--muted); font-size: .8rem; }
@media (max-width: 600px) {
  .image-viewer { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .image-viewer-toolbar { flex-wrap: wrap; gap: 6px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
  .image-viewer-controls { width: 100%; }
  .image-viewer-controls [data-viewer-close] { margin-left: auto; }
  .image-viewer-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}