.k168-photo-trigger { cursor: zoom-in; }
.k168-photo-trigger:focus-visible { outline: 3px solid #2073b8; outline-offset: 4px; }
dialog.k168-photo-viewer {
    position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
    width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none;
    color: #fff; background: rgba(8, 12, 18, .97); overflow: hidden;
    font-family: Arial, sans-serif; box-sizing: border-box;
}
.k168-photo-viewer::backdrop { background: #080c12; }
.k168-photo-viewer [hidden] { display: none !important; }
.k168-photo-viewer .k168-photo-stage {
    position: absolute; inset: 64px 76px 76px;
    display: flex; align-items: center; justify-content: center;
}
.k168-photo-viewer .k168-photo-full {
    display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
    object-fit: contain; margin: 0; border: 0; touch-action: pan-y pinch-zoom;
}
.k168-photo-viewer button {
    position: absolute; display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; min-width: 48px; min-height: 48px;
    margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 50%;
    background: rgba(8,12,18,.7); color: #fff; cursor: pointer;
    font: 42px/1 Arial, sans-serif; text-align: center; z-index: 2;
    touch-action: manipulation;
}
.k168-photo-viewer button:hover { background: #344152; }
.k168-photo-viewer button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.k168-photo-viewer .k168-photo-close {
    top: max(12px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); font-size: 36px;
}
.k168-photo-viewer .k168-photo-prev { left: max(16px, env(safe-area-inset-left)); top: calc(50% - 24px); }
.k168-photo-viewer .k168-photo-next { right: max(16px, env(safe-area-inset-right)); top: calc(50% - 24px); }
.k168-photo-viewer .k168-photo-counter {
    position: absolute; top: max(25px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left));
    font-size: 16px; line-height: 24px;
}
.k168-photo-viewer .k168-photo-caption {
    position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 76px; right: 76px;
    max-height: 52px; overflow: auto; margin: 0; font-size: 15px; line-height: 22px; text-align: center;
}
.k168-photo-viewer .k168-photo-status { margin: 0; font-size: 16px; text-align: center; }
@media (max-width: 600px) {
    .k168-photo-viewer .k168-photo-stage { left: 8px; right: 8px; }
    .k168-photo-viewer .k168-photo-prev { left: max(8px, env(safe-area-inset-left)); }
    .k168-photo-viewer .k168-photo-next { right: max(8px, env(safe-area-inset-right)); }
    .k168-photo-viewer .k168-photo-caption { left: 16px; right: 16px; }
}