/* Floating circular progress FAB (bottom-right) */
.completion-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 92px;
  height: 92px;
  z-index: 1085;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.16), 0 2px 0 rgba(255,255,255,.85) inset;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.completion-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.9) inset;
}
.fab-ring{ position:absolute; inset:0; transform: rotate(-90deg); }
.fab-track{ fill:none; stroke: rgba(0,0,0,.08); stroke-width:12; }
.fab-progress{ fill:none; stroke: var(--bs-primary); stroke-width:12; stroke-linecap:round;
  stroke-dasharray: 0 999; stroke-dashoffset:0;
  filter: drop-shadow(0 4px 10px rgba(13,110,253,.25));
  transition: stroke-dashoffset .4s ease, stroke .2s ease;
}
.fab-center{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.fab-value{ font-weight:800; line-height:1; color: var(--bs-primary); text-shadow: 0 1px 0 #fff; transform: translateY(1px); }
.fab-value span{ font-size: 1.35rem; }
.fab-value small{ font-size: .75rem; margin-left: 2px; color: var(--bs-secondary-color); }
@media (prefers-reduced-motion: reduce){
  .completion-fab, .fab-progress{ transition:none !important; }
}