.portrait-viewer{width:1100px;max-width:calc(100vw - 24px);height:90vh;height:min(900px,calc(100dvh - 24px));max-height:calc(100% - 24px);margin:auto;padding:0;border:1px solid #b8ccce;border-radius:12px;background:#fff;color:#41585b;overflow:hidden;box-shadow:0 14px 60px #10272b55}
.portrait-viewer[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.portrait-viewer::backdrop{background:#192f3dcc}
.portrait-viewer-header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #dde6e7}
.portrait-viewer-header h2{flex:1;min-width:0;margin:0;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portrait-viewer button{padding:8px 12px;border:1px solid #bbd1d1;border-radius:6px;background:#f7fbfa;color:#326c65;font-size:12px;white-space:nowrap}
.portrait-viewer .portrait-viewer-close{border-color:#d3dddf;background:#fff;color:#596e76}
.portrait-viewer-tools{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 12px;background:#f8fbfb}
.portrait-viewer-scale{min-width:42px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.portrait-viewer-viewport{min-width:0;min-height:0;position:relative;overflow:auto;overscroll-behavior:contain;background:#eef1f2;touch-action:pan-x pan-y}
.portrait-viewer-canvas{display:grid;place-items:center;min-width:100%;min-height:100%}
.portrait-viewer-canvas>img{display:block;max-width:none;max-height:none;object-fit:contain;user-select:none;-webkit-user-drag:none}
.portrait-viewer-viewport.can-pan{cursor:grab}.portrait-viewer-viewport.is-panning{cursor:grabbing;user-select:none}
.portrait-viewer-status{position:absolute;inset:40% 15px auto;text-align:center;color:#73888a;font-size:13px;pointer-events:none}
.portrait-viewer-help{margin:0;padding:8px 12px;text-align:center;color:#7c9094;font-size:10px}
@media(max-width:640px){
  .portrait-viewer{max-width:calc(100vw - 12px);height:94vh;height:calc(100dvh - 12px);max-height:calc(100% - 12px);border-radius:9px}
  .portrait-viewer-header{padding:10px;gap:8px}.portrait-viewer-header h2{font-size:13px}
  .portrait-viewer-tools{gap:6px;padding:8px 6px}.portrait-viewer button{padding:9px 10px;font-size:11px}
  .portrait-viewer-help{font-size:9px;padding:7px 5px}
}