.web-viewer {
  --viewer-bg: #11130f;
  width: min(96vw, 1640px);
  height: min(94dvh, 1100px);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  color: inherit;
  background: var(--viewer-bg);
  border: 1px solid var(--line, #373b30);
  border-radius: 10px;
}

.web-viewer[open] {
  display: flex;
  flex-direction: column;
}

.web-viewer::backdrop { background: rgb(6 7 5 / 83%); }

.web-viewer-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #373b30);
  background: var(--panel, #1a1c17);
}

.web-viewer-caption { min-width: 0; }
.web-viewer-caption h2 {
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-viewer-details {
  margin: 3px 0 0;
  color: var(--muted, #afb3a5);
  font: 11px var(--mono, monospace);
}

.web-viewer-tools, .web-viewer-navigation, .web-viewer-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
}

.web-viewer-tools { gap: 12px; }
.web-viewer-scale {
  min-width: 40px;
  color: var(--accent, #e9f45d);
  text-align: center;
  font: 11px var(--mono, monospace);
}
.web-viewer-close { min-width: 38px; padding-inline: 5px; font-size: 20px; line-height: 1; }

.web-viewer-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  user-select: none;
  background: conic-gradient(#171a13 25%, #12150f 0 50%, #171a13 0 75%, #12150f 0) 50% / 20px 20px;
}

.web-viewer-image-frame {
  position: absolute;
  inset: 0 auto auto 0;
  transform-origin: 0 0;
  pointer-events: none;
}

.web-viewer-stage img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  pointer-events: none;
}

.web-viewer-stage.can-pan { cursor: grab; }
.web-viewer-stage.dragging { cursor: grabbing; }
.web-viewer-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 16px;
  color: var(--muted, #afb3a5);
  text-align: center;
  pointer-events: none;
}
.web-viewer-status[hidden] { display: none; }

.web-viewer-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 55px;
  padding: 8px 14px;
  border-top: 1px solid var(--line, #373b30);
  background: var(--panel, #1a1c17);
}

.web-viewer-transform { display: flex; flex-wrap: wrap; gap: 4px; }
.web-viewer-save-status { flex: 1; color: var(--muted, #afb3a5); }
.web-viewer-save-status:empty { display: none; }
.web-viewer-footer [data-action='download'] { margin-inline-start: auto; }

@media (max-width: 700px) {
  .web-viewer { width: 100vw; height: 100dvh; border-radius: 0; }
  .web-viewer-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }
  .web-viewer-tools { grid-column: 1 / -1; flex-wrap: wrap; gap: 6px; }
  .web-viewer-close { grid-column: 2; grid-row: 1; }
  .web-viewer-tools .button { padding-inline: 6px; }
  .web-viewer-footer { padding: 8px; gap: 6px; }
  .web-viewer-transform .button { padding-inline: 6px; }
  .web-viewer-save-status { flex-basis: 100%; order: 1; }
}