/* Namespaced modal; these rules do not change existing gallery thumbnails. */
dialog.cosom-art-zoom {
  position: fixed; inset: 0; z-index: 2147483000; box-sizing: border-box;
  width: min(1400px, calc(100vw - 32px)); height: min(920px, calc(100dvh - 32px));
  max-width: none; max-height: none; margin: auto; padding: 0;
  overflow: hidden; border: 1px solid #647388; border-radius: 8px;
  background: #111927; color: #f9f4e9; font: 14px/1.5 system-ui, sans-serif;
}
dialog.cosom-art-zoom:not([open]) { display: none; }
dialog.cosom-art-zoom::backdrop { background: #020610d9; }
.cosom-art-zoom .cosom-art-zoom__shell { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; height: 100%; }
.cosom-art-zoom .cosom-art-zoom__header,
.cosom-art-zoom .cosom-art-zoom__tools,
.cosom-art-zoom .cosom-art-zoom__footer { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 18px; }
.cosom-art-zoom .cosom-art-zoom__header { justify-content: space-between; border-bottom: 1px solid #364357; }
.cosom-art-zoom .cosom-art-zoom__title { flex: 1; margin: 0; color: #f9f4e9; font: 650 17px/1.4 system-ui,sans-serif; letter-spacing: normal; }
.cosom-art-zoom__button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-width: 40px; min-height: 40px; padding: 7px 13px;
  box-sizing: border-box; border: 1px solid #79919d; border-radius: 5px;
  background: #203a48; color: #fff8e9; font: 600 13px/1.4 system-ui,sans-serif;
  letter-spacing: normal; text-transform: none; cursor: pointer;
}
.cosom-art-zoom__button:hover { background: #315465; color: #fff; }
.cosom-art-zoom__button:focus-visible,
.cosom-art-zoom__stage:focus-visible,
.cosom-art-zoom__original:focus-visible { outline: 3px solid #76e0e1; outline-offset: 3px; }
.cosom-art-zoom__launch { margin: 8px; }
.cosom-art-zoom .cosom-art-zoom__percent { min-width: 55px; color: #fff8e9; text-align: center; font-variant-numeric: tabular-nums; }
.cosom-art-zoom .cosom-art-zoom__stage {
  display: block; position: relative; overflow: hidden; min-height: 0;
  touch-action: none; user-select: none; cursor: grab;
  background-color: #26303d;
  background-image: linear-gradient(45deg,#344152 25%,transparent 25%),linear-gradient(-45deg,#344152 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#344152 75%),linear-gradient(-45deg,transparent 75%,#344152 75%);
  background-size: 24px 24px; background-position: 0 0,0 12px,12px -12px,-12px 0;
}
.cosom-art-zoom .cosom-art-zoom__stage:active { cursor: grabbing; }
.cosom-art-zoom .cosom-art-zoom__image {
  display: block; position: absolute; left: 50%; top: 50%; width: auto; height: auto;
  max-width: none; max-height: none; min-width: 0; margin: 0; padding: 0; border: 0;
  object-fit: initial; transform-origin: center; image-rendering: auto; pointer-events: none;
}
.cosom-art-zoom .cosom-art-zoom__footer { justify-content: space-between; border-top: 1px solid #364357; }
.cosom-art-zoom .cosom-art-zoom__status { margin: 0; color: #d7e2eb; font: 12px/1.5 system-ui,sans-serif; }
.cosom-art-zoom .cosom-art-zoom__original { color: #91e4e3; font: 600 13px/1.4 system-ui,sans-serif; }
@media(max-width:600px) {
  dialog.cosom-art-zoom { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 4px; }
  .cosom-art-zoom .cosom-art-zoom__header,.cosom-art-zoom .cosom-art-zoom__tools,.cosom-art-zoom .cosom-art-zoom__footer { padding: 9px 12px; gap: 7px 10px; }
  .cosom-art-zoom .cosom-art-zoom__title { font-size: 14px; }
}