.viewer-dialog{width:100vw;height:100vh;max-width:none;max-height:none;padding:0;border:0;color:#eee;background:#101216;overflow:hidden}
.viewer-dialog::backdrop{background:#090a0dcc}
.viewer-dialog[open]{display:flex;flex-direction:column}
.viewer-toolbar{display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 16px;background:#17191e;border-bottom:1px solid #ffffff1c;z-index:2}
.viewer-toolbar h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto 0 0;font:500 14px/1.4 Archivo,Arial,sans-serif}
.viewer-toolbar output{font:12px 'DM Mono',monospace;color:#b9c1ca;white-space:nowrap}
.viewer-toolbar button,.viewer-toolbar a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 11px;border:1px solid #ffffff29;border-radius:3px;background:transparent;color:inherit;font:12px Archivo,Arial,sans-serif;text-decoration:none;cursor:pointer}
.viewer-toolbar button:hover,.viewer-toolbar a:hover{background:#ffffff12}
.viewer-stage{position:relative;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0d0f12;touch-action:none}
.viewer-image{display:block;max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;user-select:none;-webkit-user-drag:none;cursor:zoom-in}
.viewer-stage.is-zoomed{cursor:grab;overflow:hidden}
.viewer-stage.is-dragging{cursor:grabbing}
.viewer-stage.is-zoomed .viewer-image{max-width:none;max-height:none;cursor:grab}
.viewer-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;padding:0 18px}
.viewer-nav button{pointer-events:auto;width:48px;height:56px;border:1px solid #ffffff29;border-radius:3px;background:#101216b8;color:#fff;font-size:26px;cursor:pointer}
.viewer-nav button:disabled{opacity:.25;cursor:default}
.viewer-status{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:7px 11px;border-radius:3px;background:#101216d9;color:#c7cdd3;font:11px 'DM Mono',monospace}
@media(max-width:700px){.viewer-toolbar{flex-wrap:wrap;padding:8px 10px}.viewer-toolbar h2{order:-2;flex:1 1 calc(100% - 50px)}.viewer-toolbar output{order:-1}.viewer-toolbar button,.viewer-toolbar a{min-height:38px;padding:7px 9px}.viewer-nav{padding:0 8px}.viewer-nav button{width:42px;height:50px}.viewer-status{bottom:10px}}
@media(prefers-reduced-motion:reduce){.viewer-image{transition:none!important}}