/* The tool-card photos carried a solid WHITE rounded square with a coloured glyph
   baked into the image itself. She asked for something more sophisticated and more
   transparent — not sitting on white.
   The badge is gone from the photographs (cropped out, see the notes) and rebuilt
   here as a frosted glass chip that sits ON the photo: translucent, blurred, with a
   hairline edge and a white glyph. It also picks up each card's own accent, which
   the baked violet no longer did after the palette change. */
#huTools .htc-shot{ position:relative; }
#huTools .htc-mark{
  position:absolute; left:14px; top:14px;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 4px 14px rgba(15,20,28,.18);
  color:#fff;
  pointer-events:none;
}
#huTools .htc-mark svg{ width:19px; height:19px; stroke-width:1.7; }
/* a very soft corner scrim so the white glyph holds on a pale photograph without
   darkening the picture — it only reaches ~120px into the corner */
#huTools .htc-shot::after{
  content:""; position:absolute; left:0; top:0; width:140px; height:140px;
  background:radial-gradient(circle at 34px 34px, rgba(18,24,32,.34), rgba(18,24,32,0) 72%);
  pointer-events:none; border-radius:inherit;
}
@supports not (backdrop-filter: blur(4px)){
  #huTools .htc-mark{ background:rgba(24,30,38,.42); }
}
@media (max-width:600px){
  #huTools .htc-mark{ width:36px; height:36px; left:12px; top:12px; border-radius:12px; }
  #huTools .htc-mark svg{ width:17px; height:17px; }
}