.article-content img[data-image-viewer] { cursor: zoom-in; }
.article-content img[data-image-viewer]:focus-visible { outline: 3px solid #0473ea; outline-offset: 5px; }
html.article-image-viewer-open { overflow: hidden; }
.article-image-viewer {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 72px 64px 80px;
    border: 0;
    color: #fff;
    background: transparent;
    overflow: hidden;
}
.article-image-viewer::backdrop { background: rgba(10, 17, 28, .94); backdrop-filter: blur(10px); }
.article-image-viewer[open] { display: flex; flex-direction: column; animation: article-image-appear .18s ease-out; }
.article-image-viewer__toolbar { position: absolute; top: 16px; right: 20px; left: 20px; display: flex; align-items: center; gap: 12px; }
.article-image-viewer__counter { margin-right: auto; color: #cbd5e1; font-size: 14px; }
.article-image-viewer button {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    font: inherit;
}
.article-image-viewer button:hover { background: rgba(255, 255, 255, .2); }
.article-image-viewer button:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }
.article-image-viewer button:disabled { opacity: .35; cursor: default; }
.article-image-viewer button[hidden] { display: none; }
.article-image-viewer__previous, .article-image-viewer__next { position: absolute; top: 50%; transform: translateY(-50%); }
.article-image-viewer button[data-image-action="previous"],
.article-image-viewer button[data-image-action="next"] { width: 44px; padding: 0; }
.article-image-viewer__previous svg, .article-image-viewer__next svg { display: block; }
.article-image-viewer__previous { left: 10px; }
.article-image-viewer__next { right: 10px; }
.article-image-viewer__stage { display: flex; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.article-image-viewer__image { display: block; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 16px 60px #0006; }
.article-image-viewer__caption { position: absolute; bottom: 18px; left: 64px; right: 64px; max-height: 48px; overflow: auto; margin: 0; text-align: center; color: #dbe3ef; font-size: 14px; }
.article-image-viewer__status { position: absolute; top: 72px; left: 64px; right: 64px; text-align: center; pointer-events: none; }
@keyframes article-image-appear { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 575px) {
    .article-image-viewer { padding: 76px 12px 104px; }
    .article-image-viewer__previous, .article-image-viewer__next { top: auto; bottom: 14px; transform: none; }
    .article-image-viewer__caption { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { .article-image-viewer[open] { animation: none; } }