[data-case-zoom] { cursor: zoom-in; }
[data-case-zoom]:focus-visible { outline-offset: -3px; }
body:has(.case-image-dialog[open]) { overflow: hidden; }
.case-image-dialog {
  width: min(1600px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  border: 1px solid #353535;
  border-radius: 18px;
  overflow: hidden;
  background: #151515;
  color: #eee;
}
.case-image-dialog[open] { display: flex; flex-direction: column; }
.case-image-dialog::backdrop { background: #000d; }
.case-image-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid #ffffff1a;
}
.case-image-toolbar p { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.case-image-toolbar button { min-height: 38px; padding: 8px 12px; border-radius: 10px; background: #292929; }
.case-image-toolbar button:hover,.case-image-toolbar button[aria-pressed=true] { background: #3c3c3c; }
.case-image-toolbar .case-image-close { padding: 9px; }
.case-image-viewport { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px; }
.case-image-full { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 128px); margin: 0 auto; object-fit: contain; }
.case-image-actual .case-image-full { max-width: none; max-height: none; }
@media (max-width: 520px) {
  .case-image-dialog { width: calc(100% - 16px); }
  .case-image-toolbar { gap: 6px; padding: 8px; font-size: 12px; }
  .case-image-toolbar button { padding: 8px; }
  .case-image-viewport { padding: 6px; }
}