/* Locked metrics stay visible, with a frosted surface and an actionable tier link. */
#scanMetrics .kpi.kpi-locked {
  position:relative; overflow:hidden; isolation:isolate; justify-content:flex-start;
  min-height:76px; background:var(--surface); border-color:var(--line);
}
#scanMetrics .kpi-locked::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
#scanMetrics .kpi-lock-preview {
  position:absolute; inset:38px 14px 12px; display:flex; align-items:flex-end;
  gap:9px; opacity:.22; filter:blur(4px); pointer-events:none;
}
#scanMetrics .kpi-lock-preview i {display:block; width:25%; height:55%; border-radius:6px; background:var(--ink-2)}
#scanMetrics .kpi-lock-preview i:nth-child(2) {height:90%; width:32%}
#scanMetrics .kpi-lock-preview i:nth-child(3) {height:70%}
#scanMetrics .kpi-locked .kpi-heading {position:relative; z-index:2; pointer-events:none}
#scanMetrics .kpi-lock-icon {width:16px; height:16px; flex:0 0 16px; color:var(--muted)}
#scanMetrics .kpi-unlock {
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; gap:3px; padding:30px 8px 12px;
  color:var(--ink); text-decoration:none; border-radius:inherit;
}
#scanMetrics .kpi-lock-label {display:none}
#scanMetrics .kpi-tier-link {font-size:12px; line-height:17px; font-weight:500; color:var(--ink)}
#scanMetrics .kpi-unlock:hover .kpi-tier-link {text-decoration:underline; text-underline-offset:3px}
#scanMetrics .kpi-unlock:focus-visible {outline:2px solid var(--accent); outline-offset:-3px}
html[data-theme="light"] #scanMetrics .kpi-locked::after {
  background:linear-gradient(145deg,rgba(255,255,255,.65),rgba(239,244,251,.5));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}