/* image viewer (lb2) */
html.lb2-open { overflow: hidden; }
#lb2 { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.92); -webkit-user-select: none; user-select: none; }
#lb2[hidden] { display: none; }
.lb2-bar { position: absolute; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 6px 0 14px; background: #0d0d0d; border-bottom: 1px solid #333; font: bold 10px Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: var(--muted, #888); z-index: 2; }
.lb2-count { color: var(--yellow, #ffc800); min-width: 40px; }
.lb2-tip { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lb2-orig { color: var(--muted, #888); text-decoration: none; }
.lb2-orig:hover { color: var(--yellow, #ffc800); text-decoration: underline; }
.lb2-x { width: 34px; height: 34px; padding: 0; font: 26px/30px Arial, sans-serif; color: #ddd; background: #1a1a1a; border: 1px solid #444; cursor: pointer; }
.lb2-x:hover { color: var(--yellow, #ffc800); border-color: var(--yellow, #ffc800); }
.lb2-stage { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; overflow: hidden; touch-action: none; }
#lb2 .lb2-img { position: absolute; left: 0; top: 0; max-width: none; max-height: none; height: auto; transform-origin: 0 0; will-change: transform; opacity: 0; outline: 1px solid #333; -webkit-user-drag: none; pointer-events: none; }
.lb2-nav { position: absolute; top: calc(50% + 22px); transform: translateY(-50%); width: 44px; height: 72px; padding: 0; font: 42px/1 Arial, sans-serif; color: #ddd; background: rgba(20, 20, 20, 0.8); border: 1px solid #444; cursor: pointer; z-index: 2; }
.lb2-nav:hover { color: var(--yellow, #ffc800); border-color: var(--yellow, #ffc800); }
.lb2-nav[hidden] { display: none; }
.lb2-prev { left: 8px; }
.lb2-next { right: 8px; }
@media (max-width: 700px) {
  .lb2-tip { visibility: hidden; }
  .lb2-nav { width: 34px; height: 56px; font-size: 32px; }
  .lb2-prev { left: 4px; }
  .lb2-next { right: 4px; }
}
/* videos */
#lb2 .lb2-vid { position: absolute; inset: 0; margin: auto; width: 96%; height: 96%; object-fit: contain; background: transparent; }
#lb2 .lb2-vid[hidden] { display: none; }
.gallery a.lb2-isvid { position: relative; }
.gallery a.lb2-isvid::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(0, 0, 0, 0.65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M12 9v12l10-6z' fill='%23fff'/%3E%3C/svg%3E") center / 30px 30px no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); pointer-events: none; }
.gallery a.lb2-isvid:hover::after { box-shadow: 0 0 0 1px var(--yellow, #ffc800); }