/* Foreground covers the dial base, leaving the original needle and hub exposed. */
#p-models{--model-dial-size:166px}
#p-models .model-header{
  min-height:0!important;padding-bottom:0!important;border-bottom:0!important;
  position:relative!important;z-index:0;
}
#p-models .gauge-stats{flex-wrap:nowrap!important}
#p-models .model-gauge{
  width:var(--model-dial-size)!important;height:var(--model-dial-size)!important;
  flex:0 0 var(--model-dial-size)!important;
}
#p-models .gauge-inner{
  width:var(--model-dial-size)!important;height:var(--model-dial-size)!important;
  flex:0 0 var(--model-dial-size)!important;
}
/* Counts remain live in the DOM; the foreground intentionally covers them. */
#p-models .gauge-caption{flex-shrink:0!important}
#p-models .model-library-section{
  position:relative!important;z-index:2;
  /* Needle pivot is at 57%; 14px clears its rotating 17px centre cap. */
  margin-top:calc(var(--model-dial-size) * -.43 + 14px)!important;padding-top:0!important;
  border-radius:28px 28px 0 0;background:#f8fbff!important;
}
#p-models .model-discovery-panel{
  position:relative;isolation:isolate;
  background:linear-gradient(145deg,#fff,#f7faff)!important;
}
@media(min-width:681px) and (max-width:1319px){
  #p-models{--model-dial-size:min(122px,calc((100vw - 120px) / 5))}
  #p-models .model-header{padding-left:18px!important;padding-right:18px!important}
  #p-models .gauge-stats{gap:18px!important;padding:0!important}
}
@media(max-width:680px){
  #p-models{--model-dial-size:88px}
  /* Preserve horizontal swiping across the five exposed upper semicircles. */
  #p-models .gauge-stats{padding-bottom:0!important;scrollbar-width:none}
  #p-models .gauge-stats::-webkit-scrollbar{display:none}
  #p-models .model-library-section{border-radius:20px 20px 0 0}
}