.pv-viewer {
  --pv-ink: #f6f8fa;
  --pv-muted: #b9c0c6;
  --pv-glass: rgba(22, 30, 34, .68);
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 9999;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--pv-ink);
  background: #11191b;
  font: 500 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
  overflow: hidden;
  overscroll-behavior: contain;
}
.pv-viewer *, .pv-viewer *::before, .pv-viewer *::after { box-sizing: border-box; }
.pv-viewer [hidden] { display: none !important; }
.pv-topbar {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  width: 100%;
  min-height: 70px;
  padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  background: linear-gradient(#182225 0%, #172023 100%);
}
.pv-title-wrap, .pv-top-actions, .pv-toolbar { display: flex; align-items: center; }
.pv-title-wrap { gap: 14px; min-width: 0; flex: 1 1 auto; }
.pv-top-actions { gap: 8px; flex: none; }
.pv-brand { flex: none; color: #eef8f0; font-size: 19px; font-weight: 720; letter-spacing: -.045em; }
.pv-brand span { color: #b9e6af; }
.pv-divider { width: 1px; height: 24px; flex: none; background: #637075; opacity: .65; }
.pv-title { min-width: 0; overflow: hidden; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.pv-counter { flex: none; color: var(--pv-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pv-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 13px;
  background: rgba(255, 255, 255, .08);
  color: var(--pv-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.pv-icon:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .38); }
.pv-icon:active { transform: scale(.95); }
.pv-icon:disabled { opacity: .38; cursor: default; }
.pv-icon.is-active { background: #d5efcb; border-color: #d5efcb; color: #142218; }
.pv-icon svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.pv-icon:focus-visible, .pv-thumb:focus-visible { outline: 3px solid #c8f6b8; outline-offset: 3px; }
.pv-stage {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  place-items: center;
  background: #0b1114;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.pv-stage.is-dragging { cursor: grabbing; }
.pv-picking .pv-stage, .pv-picking .pv-stage.is-dragging { cursor: crosshair; }
.pv-picking [data-action="point"] { background: #d5efcb; border-color: #d5efcb; color: #142218; }
.pv-psv, .pv-flat-wrap { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-psv { overflow: hidden; }
.pv-psv .psv-container { width: 100%; height: 100%; }
.pv-psv .psv-loader { display: none; }
.pv-psv .psv-navbar { display: none; }
.pv-flat-wrap { display: grid; overflow: hidden; place-items: center; }
.pv-flat-wrap img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
}
.pv-partial .pv-flat-wrap img { max-width: none; max-height: none; object-fit: fill; }
.pv-loading {
  z-index: 1;
  max-width: min(90vw, 420px);
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--pv-glass);
  color: var(--pv-ink);
  text-align: center;
}
.pv-detail-loading {
  position: absolute; right: 12px; top: 12px; z-index: 1;
  max-width: calc(100% - 24px); padding: 7px 10px;
  border-radius: 9px; background: var(--pv-glass); color: var(--pv-ink);
  font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none;
}
.pv-stage-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  z-index: 1;
  padding: 9px 13px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: var(--pv-glass);
  color: #e6e9e8;
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
}
.pv-flat .pv-stage-hint { display: none; }
.pv-bottom {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  padding: 12px 16px max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(#172023, #182225);
}
.pv-filmstrip {
  display: flex;
  width: min(100%, 720px);
  min-width: 0;
  max-width: 100%;
  gap: 8px;
  overflow-x: auto;
  padding: 3px 2px 5px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.pv-thumb {
  display: block;
  width: 64px;
  height: 48px;
  flex: none;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 9px;
  background: #283235;
  cursor: pointer;
  scroll-snap-align: center;
  opacity: .58;
  transition: opacity .16s ease, border-color .16s ease;
}
.pv-thumb:hover { opacity: .85; }
.pv-thumb[aria-current="true"] { border-color: #c8f6b8; opacity: 1; }
.pv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-toolbar { gap: 8px; justify-content: center; width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; }
.pv-toolbar .pv-icon { background: rgba(255, 255, 255, .055); }
.pv-toolbar .pv-icon:hover { background: rgba(255, 255, 255, .17); }
.pv-toolbar .pv-icon.is-active { background: #d5efcb; }
.pv-toolbar .pv-icon[aria-pressed="true"] { background: #d5efcb; border-color: #d5efcb; color: #142218; }
.pv-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  .pv-topbar { min-height: 62px; padding-top: 9px; padding-bottom: 9px; }
  .pv-title-wrap { gap: 9px; }
  .pv-brand { font-size: 17px; }
  .pv-title { font-size: 13px; }
  .pv-counter { display: none; }
  .pv-top-actions { gap: 5px; }
  .pv-bottom { gap: 7px; padding-inline: 8px; }
  .pv-toolbar { gap: 5px; flex-wrap: wrap; }
  .pv-toolbar .pv-icon { width: 44px; height: 44px; border-radius: 11px; }
  .pv-filmstrip { max-width: 100%; }
  .pv-stage-hint { bottom: 12px; }
}
@media (max-width: 360px) {
  .pv-brand, .pv-divider { display: none; }
  .pv-toolbar { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-viewer *, .pv-viewer *::before, .pv-viewer *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}