.article-body img.article-image {cursor: zoom-in}
.article-lightbox-overlay {position: fixed;inset: 0;z-index: 9999;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;transition: opacity 0.25s ease, visibility 0.25s ease}
.article-lightbox-overlay.active {opacity: 1;visibility: visible;transition: opacity 0.25s ease, visibility 0s}
.article-lightbox-backdrop {position: absolute;inset: 0;background: rgba(0, 0, 0, 0.92)}
.article-lightbox-img {position: relative;z-index: 1;max-width: 90vw;max-height: 90vh;object-fit: contain;border-radius: 4px;user-select: none;-webkit-user-select: none}
.article-lightbox-close {position: absolute;top: 16px;right: 16px;z-index: 2;background: rgba(0, 0, 0, 0.5);border: none;border-radius: 50%;width: 44px;height: 44px;display: flex;align-items: center;justify-content: center;color: #fff;cursor: pointer;transition: background 0.2s}
.article-lightbox-close:hover {background: rgba(0, 0, 0, 0.8)}
.article-lightbox-prev,
.article-lightbox-next {position: absolute;top: 50%;transform: translateY(-50%);z-index: 2;background: rgba(0, 0, 0, 0.4);border: none;border-radius: 50%;width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;color: #fff;cursor: pointer;transition: background 0.2s}
.article-lightbox-prev { left: 12px; }
.article-lightbox-next { right: 12px; }
.article-lightbox-prev:hover,
.article-lightbox-next:hover {background: rgba(0, 0, 0, 0.7)}
.article-lightbox-counter {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);z-index: 2;color: rgba(255, 255, 255, 0.85);font-size: 14px;background: rgba(0, 0, 0, 0.5);padding: 4px 14px;border-radius: 20px}
@media (max-width: 600px) {.article-lightbox-img {max-width: 100vw;max-height: 85vh;border-radius: 0}
.article-lightbox-prev,
.article-lightbox-next,
.article-lightbox-close {width: 44px;height: 44px;border-radius: 0;background: transparent}
.article-lightbox-prev::before,
.article-lightbox-next::before,
.article-lightbox-close::before {content: "";position: absolute;inset: 4px;border-radius: 50%;background: rgba(0, 0, 0, 0.4);transition: background 0.2s}
.article-lightbox-close::before {inset: 3px;background: rgba(0, 0, 0, 0.5)}
.article-lightbox-prev:hover,
.article-lightbox-next:hover,
.article-lightbox-close:hover {background: transparent}
.article-lightbox-prev:hover::before,
.article-lightbox-next:hover::before {background: rgba(0, 0, 0, 0.7)}
.article-lightbox-close:hover::before {background: rgba(0, 0, 0, 0.8)}
.article-lightbox-prev:focus-visible,
.article-lightbox-next:focus-visible,
.article-lightbox-close:focus-visible {outline: none}
.article-lightbox-prev:focus-visible::before,
.article-lightbox-next:focus-visible::before,
.article-lightbox-close:focus-visible::before {outline: 2px solid #fff;outline-offset: 2px}
.article-lightbox-prev { left: 2px; }
.article-lightbox-next { right: 2px; }
.article-lightbox-close {top: 7px;right: 7px}
.article-lightbox-prev svg,
.article-lightbox-next svg,
.article-lightbox-close svg {position: relative;width: 24px;height: 24px}
.article-lightbox-close svg {width: 22px;height: 22px}}