.post-image-viewer-open { overflow: hidden; }
.post-image-viewer {
  position: fixed; inset: 12px; box-sizing: border-box;
  width: calc(100vw - 24px); height: calc(100dvh - 24px);
  max-width: 1440px; max-height: 1000px; padding: 0;
  border: 1px solid var(--rule-strong, #24375a); border-radius: 14px;
  background: var(--paper-2, #0b1322); color: var(--ink, #e9f1fc);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .7);
}
.post-image-viewer[open] { display: flex; flex-direction: column; }
.post-image-viewer::backdrop { background: rgba(2, 5, 12, .88); backdrop-filter: blur(5px); }
.post-image-viewer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; box-sizing: border-box; padding: 12px 16px;
  border-bottom: 1px solid var(--rule, #16233c);
}
.post-image-viewer__title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 14px/1.4 var(--display, sans-serif);
}
.post-image-viewer__controls { display: flex; align-items: center; gap: 7px; flex: none; }
.post-image-viewer__controls button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 7px 10px;
  border: 1px solid var(--rule-strong, #24375a); border-radius: 8px;
  background: var(--paper-3, #101b31); color: var(--ink, #e9f1fc);
  font: 600 13px var(--mono, monospace); cursor: pointer;
}
.post-image-viewer__controls button:hover:not(:disabled),
.post-image-viewer__controls button:focus-visible { border-color: var(--trace, #22d3ee); color: var(--trace, #22d3ee); }
.post-image-viewer__controls button:disabled { opacity: .42; cursor: default; }
.post-image-viewer__controls .post-image-viewer__close { font-size: 24px; line-height: 1; }
.post-image-viewer__status { min-width: 44px; text-align: center; font: 12px var(--mono, monospace); }
.post-image-viewer__frame {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  background: var(--lab, #03060d); touch-action: pan-x pan-y;
}
.post-image-viewer__frame.is-zoomed { cursor: grab; }
.post-image-viewer__frame.is-dragging { cursor: grabbing; }
.post-image-viewer__canvas {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: max-content; min-width: 100%;
  height: max-content; min-height: 100%; padding: 16px;
}
.post-image-viewer__canvas img { display: block; max-width: none; max-height: none; user-select: none; }
.post-image-viewer__gallery {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 48px; border-top: 1px solid var(--rule, #16233c);
}
.post-image-viewer__gallery[hidden] { display: none; }
.post-image-viewer__gallery button {
  width: 36px; height: 32px; border: 1px solid var(--rule-strong, #24375a);
  border-radius: 7px; background: var(--paper-3, #101b31);
  color: var(--ink, #e9f1fc); font: 24px/1 sans-serif; cursor: pointer;
}
.post-image-viewer__gallery button:hover:not(:disabled),
.post-image-viewer__gallery button:focus-visible { border-color: var(--trace, #22d3ee); color: var(--trace, #22d3ee); }
.post-image-viewer__gallery button:disabled { opacity: .4; cursor: default; }
.post-image-viewer__count { min-width: 46px; text-align: center; font: 12px var(--mono, monospace); }
@media (max-width: 700px) {
  .post-image-viewer { inset: 6px; width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 10px; }
  .post-image-viewer__bar { align-items: stretch; flex-direction: column; gap: 9px; padding: 10px; }
  .post-image-viewer__title { font-size: 12px; }
  .post-image-viewer__controls { justify-content: space-between; gap: 4px; }
  .post-image-viewer__controls button { min-width: 35px; min-height: 38px; padding: 5px 7px; font-size: 11px; }
  .post-image-viewer__controls .post-image-viewer__close { font-size: 22px; }
  .post-image-viewer__canvas { padding: 10px; }
}