img[data-image-preview] { cursor: zoom-in; }
img[data-image-preview]:focus-visible { outline: 3px solid #599aff; outline-offset: 5px; }
.image-viewer { --viewer-accent: 96,165,250; position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #edf1f7; overflow: hidden; }
.image-viewer::backdrop { background: #050810c9; backdrop-filter: blur(22px) saturate(.65); animation: viewer-backdrop .3s ease both; }
.image-viewer[open] { display: flex; flex-direction: column; }
.image-viewer::before { content: ''; position: absolute; inset: 8% 12%; background: radial-gradient(ellipse, rgba(var(--viewer-accent),.18), transparent 68%); pointer-events: none; }
.image-viewer-toolbar { position: absolute; z-index: 2; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 22px; border: 1px solid #ffffff24; border-radius: 999px; background: #171d29cf; backdrop-filter: blur(24px); box-shadow: 0 12px 45px #0006, inset 0 1px #ffffff0c; white-space: nowrap; animation: viewer-controls .4s ease both; }
#image-viewer-caption { display: flex; align-items: center; gap: 10px; padding-right: 14px; font: 600 14px/1.5 system-ui,sans-serif; letter-spacing: .02em; }
#image-viewer-caption::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--viewer-accent)); box-shadow: 0 0 16px rgba(var(--viewer-accent),.7); }
.image-viewer-toolbar button { background: #ffffff08; border: 1px solid #ffffff12; color: #edf1f7; border-radius: 999px; padding: 10px 18px; cursor: pointer; font: 500 13px/1.4 system-ui,sans-serif; min-height: 44px; transition: background .2s, transform .2s; }
.image-viewer-toolbar button:hover { background: #ffffff18; transform: translateY(-1px); }
.image-viewer-toolbar button:focus-visible { outline: 2px solid rgb(var(--viewer-accent)); outline-offset: 3px; }
.image-viewer-toolbar .image-viewer-close { font-size: 25px; line-height: 1; width: 44px; padding: 0; }
.image-viewer-stage { position: relative; flex: 1; min-height: 0; overflow: auto; margin: 36px 48px 112px; padding: 12px; display: flex; align-items: center; justify-content: center; overscroll-behavior: contain; }
.image-viewer-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; border-radius: 14px; flex-shrink: 0; box-shadow: 0 32px 80px #0008, 0 0 0 1px #ffffff12; animation: viewer-image .42s cubic-bezier(.16,1,.3,1) both; }
.image-viewer.is-zoomed .image-viewer-stage { display: block; border-radius: 14px; }
.image-viewer.is-zoomed .image-viewer-stage img { max-width: none; max-height: none; width: auto; height: auto; cursor: zoom-out; margin: auto; animation: none; }
.image-viewer.is-closing { opacity: 0; transition: opacity .18s; }
.image-viewer.is-closing::backdrop { opacity: 0; transition: opacity .18s; }
@keyframes viewer-image { from { opacity: 0; transform: translateY(22px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes viewer-controls { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes viewer-backdrop { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { .image-viewer-stage { margin: 16px 4px 104px; padding: 8px; } .image-viewer-toolbar { bottom: max(20px, env(safe-area-inset-bottom)); gap: 6px; padding-left: 16px; } #image-viewer-caption { padding-right: 4px; } .image-viewer-stage img { border-radius: 8px; } }
@media (prefers-reduced-motion: reduce) { .image-viewer *, .image-viewer::backdrop { animation: none !important; transition: none !important; } }
.dl-card-screen-overlay, .dl-card-screen-label { pointer-events: none; }