/* Lightbox Wheel Zoom (Scoped) – Styles */
:root {
  --lwz-bg: rgba(10,10,12,0.92);
  --lwz-fg: #f2f2f2;
}

.lwz-overlay { position: fixed; inset: 0; background: var(--lwz-bg); display: none; align-items: center; justify-content: center; z-index: 999999; }
.lwz-overlay[aria-hidden="false"] { display: flex; }

.lwz-canvas { position: relative; width: 100vw; height: 100vh; overflow: hidden; cursor: grab; }
.lwz-canvas.grabbing { cursor: grabbing; }

.lwz-img { position: absolute; top: 0; left: 0; will-change: transform; transform: translate3d(0,0,0) scale(1); user-select: none; touch-action: none; transform-origin: 0 0; max-width: none !important; max-height: none !important; width: auto; height: auto; }

.lwz-ui { position: fixed; inset: 16px 16px auto auto; display: flex; gap: 8px; z-index: 2; }
.lwz-btn { appearance: none; border: 0; border-radius: 999px; padding: 10px 12px; background: rgba(255,255,255,0.1); color: var(--lwz-fg); backdrop-filter: blur(6px); font-size: 14px; cursor: pointer; }
.lwz-btn:hover { background: rgba(255,255,255,0.18); }
.lwz-btn:active { transform: translateY(1px); }
.lwz-btn-close { font-weight: bold; }

.lwz-scale { position: fixed; left: 16px; bottom: 16px; color: var(--lwz-fg); background: rgba(0,0,0,0.35); padding: 6px 10px; border-radius: 999px; font-size: 12px; }

.lwz-close { position: fixed; left: 50%; transform: translateX(-50%); top: 16px; color: var(--lwz-fg); font-weight: 600; background: rgba(255,255,255,0.08); padding: 8px 12px; border-radius: 999px; font-size: 13px; }
.lwz-hint  { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; color: var(--lwz-fg); opacity: .85; font-size: 12px; }
@media (max-width: 768px) { .lwz-ui { inset: auto 8px 12px auto; } }