#leak-detection { scroll-margin-top: 100px; }
.uv-photo { --lamp-x:32%; --lamp-y:50%; --lamp-radius:140px; position:relative; margin-top:40px; border:0; border-radius:0; overflow:hidden; background:transparent; cursor:crosshair; touch-action:pan-y; }
.uv-photo:focus-visible { outline:3px solid var(--uv); outline-offset:5px; }
.uv-photo__image { display:block; width:100%; height:auto; aspect-ratio:1672 / 941; object-fit:fill; user-select:none; pointer-events:none; }
/* Feather both photo layers while keeping the pipe detail and keyboard outline sharp. */
.uv-photo__image {
  --edge-fade:clamp(24px,7vw,96px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent),linear-gradient(to bottom,transparent,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent),linear-gradient(to bottom,transparent,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent);
  mask-composite:intersect;
}
.uv-photo__normal { filter:brightness(.6) saturate(.85); transition:filter .24s ease; }
.uv-photo.is-active .uv-photo__normal { filter:brightness(.16) saturate(.6); }
.uv-photo__reveal { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .18s ease; -webkit-mask-image:radial-gradient(circle var(--lamp-radius) at var(--lamp-x) var(--lamp-y), #000 0%, #000 64%, transparent 100%); mask-image:radial-gradient(circle var(--lamp-radius) at var(--lamp-x) var(--lamp-y), #000 0%, #000 64%, transparent 100%); }
.uv-photo.is-active .uv-photo__reveal { opacity:1; }
.uv-photo__reveal img { width:100%; height:100%; }
.uv-photo__lamp { position:absolute; left:var(--lamp-x); top:var(--lamp-y); width:calc(var(--lamp-radius) * 1.5); aspect-ratio:1; border:1px solid rgba(201,172,255,.48); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; opacity:0; transition:opacity .18s ease; }
.uv-photo.is-active .uv-photo__lamp { opacity:1; }
.uv-photo.is-pinned .uv-photo__lamp { border-color:rgba(191,255,122,.7); }
.uv-photo-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0 16px; }
.uv-photo-status { display:flex; flex-direction:column; gap:5px; min-width:0; }
.uv-photo-status strong { color:var(--fg-strong); font-size:14px; font-weight:500; }
.uv-photo-status span { color:var(--muted); font-size:13px; }
.uv-photo-status[data-found="true"] strong { color:#c6ff80; }
.uv-photo-controls { display:flex; flex-wrap:wrap; gap:10px; flex-shrink:0; }
.uv-photo-controls .btn { font-size:13px; min-height:44px; padding:0 18px; }
.uv-photo-controls button[aria-pressed="true"] { border-color:#c6ff80; color:#dfffaf; background:#162a27; }
.uv-photo-note { color:var(--muted); font-size:12px; margin-top:4px; }
.uv-photo-error { padding:12px 0; color:#ffdca2; }
@media(max-width:640px){
  .uv-photo { margin-top:28px; }
  .uv-photo-bar { flex-direction:column; align-items:flex-start; gap:18px; }
  .uv-photo-controls { width:100%; }
  .uv-photo-controls .btn { flex:1; }
  .uv-photo-status span { font-size:12px; }
}
@media(prefers-reduced-motion:reduce){ .uv-photo__normal,.uv-photo__reveal,.uv-photo__lamp { transition:none; } }