.photo-viewer{font-family:Inter,"Malgun Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#101a1b;color:#e4ebe7;width:100%;height:100dvh;display:grid;grid-template-rows:auto minmax(120px,1fr) auto;overflow:hidden;font-size:13px}.photo-viewer *{box-sizing:border-box}.photo-viewer button{font:inherit;cursor:pointer}.photo-viewer button:disabled{opacity:.28;cursor:default}.photo-viewer button:focus-visible{outline:2px solid #c8e4a9;outline-offset:3px}.photo-viewer svg{width:21px;height:21px;vertical-align:middle;flex-shrink:0}.photo-viewer-dialog{padding:0;border:0;max-width:100vw;width:100vw;height:100dvh;max-height:100dvh;margin:0;inset:0;background:#101a1b}.photo-viewer-dialog::backdrop{background:#0b1315db}.viewer-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 24px;background:#172325;border-bottom:1px solid #30403e}.viewer-heading{min-width:0}.viewer-brand{font-size:8px;letter-spacing:1.7px;color:#86a096}.viewer-heading h1{font-family:Consolas,monospace;letter-spacing:.5px;font-size:20px;margin:7px 0;color:#d8e9d1;line-height:1.3;font-weight:600}.viewer-heading p{font-size:10px;color:#8fa49a;margin:0;line-height:1.8;max-width:650px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.viewer-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}.viewer-controls button{color:#b6c8bd;background:#243335;border:1px solid #374946;border-radius:7px;min-width:38px;height:38px;padding:7px;display:grid;place-items:center}.viewer-controls button:hover{background:#334944;color:#e4f2d6}.viewer-controls [data-action=close]{margin-left:8px;background:#3a3433;border-color:#5a4641;color:#d6b5a9}.viewer-text-button{font-size:11px!important;min-width:49px!important}.viewer-zoom{font-size:11px;color:#a9bcad;min-width:44px;text-align:center}.viewer-stage{position:relative;min-height:120px;overflow:hidden;touch-action:none;outline:none;background:#0e1719;user-select:none}.viewer-stage.zoomed{cursor:grab}.viewer-stage.zoomed:active{cursor:grabbing}.viewer-image{position:absolute;left:50%;top:50%;max-width:none!important;max-height:none!important;object-fit:contain;user-select:none;-webkit-user-drag:none;display:block}.photo-viewer [hidden]{display:none!important}.viewer-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;border:1px solid #566b5e;color:#dbeed0;background:#20342dd9;width:49px;height:66px;border-radius:9px;display:grid;place-items:center}.viewer-arrow:not(:disabled):hover{background:#3a6148}.viewer-arrow svg{width:27px;height:27px}.viewer-prev{left:18px}.viewer-next{right:18px}.viewer-counter{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);border:1px solid #4c6253;background:#172b23dc;color:#dfebd7;font-family:Consolas,monospace;font-size:13px;letter-spacing:1px;border-radius:22px;padding:8px 17px;pointer-events:none}.viewer-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#23302fe8;border:1px solid #3f5447;border-radius:10px;padding:16px 22px;color:#acc0ac;text-align:center;font-size:12px;line-height:1.9;width:max-content;max-width:65%;z-index:1}.viewer-footer{background:#172325;border-top:1px solid #30403e;padding:13px 22px 14px}.viewer-caption{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}.viewer-caption strong{font-size:11px;font-weight:500;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cfdfc8}.viewer-caption span{font-size:10px;color:#8aa28e}.viewer-caption p{font-size:11px;color:#b6c8aa;line-height:1.7;margin:0;width:100%;max-height:40px;overflow:auto}.viewer-caption p:empty{display:none}.viewer-hint{font-size:9px;line-height:1.8;color:#718b7b;margin:7px 0 10px}.viewer-thumbnails{display:flex;gap:8px;overflow:auto;padding:3px 3px 6px;max-width:100%;scrollbar-color:#4b6150 #172325;overscroll-behavior:contain}.viewer-thumb{width:72px;height:59px;min-width:72px;position:relative;border:2px solid transparent;border-radius:6px;overflow:hidden;padding:0;background:#293a33}.viewer-thumb img{width:100%;height:100%;object-fit:cover;opacity:.7;display:block}.viewer-thumb.selected{border-color:#bada9c}.viewer-thumb.selected img{opacity:1}.viewer-thumb span{position:absolute;bottom:2px;right:2px;font-size:9px;line-height:1.5;background:#1b2d23c9;color:#e5efdc;padding:0 4px;border-radius:3px}.viewer-initial{padding:40px;color:#a2b796;font-family:sans-serif}.viewer-error{grid-row:1/-1;align-self:center;justify-self:center;padding:30px;text-align:center;max-width:600px}.viewer-error h1{font-size:24px}.viewer-error p{font-size:13px;line-height:1.9;color:#a2b69b}.viewer-error button{background:#365f47;color:#e1edda;border:1px solid #5a7b53;border-radius:7px;margin:10px 4px;padding:12px 18px}body[data-photo-viewer=standalone]{margin:0;background:#101a1b}.photo-open{display:block;width:100%;border:0;padding:0;background:#edf2e5;cursor:zoom-in}.photo-open img{display:block;width:100%}.photo-open:focus-visible{outline:3px solid #759b58;outline-offset:-3px}.queued-photo>.photo-open{width:52px;height:56px;flex-shrink:0;border-radius:4px;overflow:hidden}.queued-photo>.photo-open img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.viewer-header{padding:12px 12px 10px;gap:10px;flex-wrap:wrap}.viewer-heading{flex:1;max-width:100%}.viewer-heading h1{font-size:19px;margin:5px 0}.viewer-heading p{font-size:10px;max-width:85vw}.viewer-brand{font-size:7px}.viewer-controls{width:100%;gap:5px}.viewer-controls button{min-width:39px;height:40px}.viewer-controls [data-action=close]{margin-left:auto}.viewer-controls svg{width:19px;height:19px}.viewer-arrow{width:40px;height:58px;border-radius:8px}.viewer-prev{left:9px}.viewer-next{right:9px}.viewer-arrow svg{width:24px;height:24px}.viewer-footer{padding:11px 12px calc(10px + env(safe-area-inset-bottom))}.viewer-caption{gap:6px}.viewer-caption strong{font-size:10px;max-width:100%}.viewer-caption span{font-size:10px}.viewer-caption p{font-size:10px;max-height:32px}.viewer-hint{font-size:8px;margin:6px 0}.viewer-thumb{width:57px;height:49px;min-width:57px}.viewer-thumbnails{gap:6px}.viewer-counter{font-size:11px;bottom:10px;padding:6px 13px}.viewer-status{font-size:11px;padding:13px;max-width:68%}.queued-photo>.photo-open{width:65px;height:65px}}
@media(max-height:550px){.viewer-header{padding:7px 13px;flex-wrap:nowrap}.viewer-controls{width:auto}.viewer-heading h1{font-size:16px;margin:3px 0}.viewer-heading p,.viewer-brand,.viewer-hint,.viewer-caption p{display:none}.viewer-footer{padding:7px 12px}.viewer-thumbnails{padding-bottom:2px;margin-top:5px}.viewer-thumb{height:38px;width:49px;min-width:49px}.viewer-controls button{height:34px;min-width:34px}.viewer-caption strong,.viewer-caption span{font-size:9px}.viewer-arrow{height:48px;width:38px}.viewer-controls [data-action=close]{margin-left:3px}}
@media(prefers-reduced-motion:reduce){.photo-viewer *{scroll-behavior:auto!important}}
/* Keep a long thumbnail strip inside the viewer's single column. */
.photo-viewer{grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%;box-sizing:border-box}
.photo-viewer>.viewer-header,.photo-viewer>.viewer-stage,.photo-viewer>.viewer-footer{min-width:0;max-width:100%}
.viewer-thumbnails{min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;position:relative}
.viewer-thumb{flex-shrink:0}
body[data-photo-viewer=standalone]{width:100%;max-width:100vw;overflow:hidden}