/* Opt-in metric system: target and measured modes share geometry, not claims. */
.asfs-svc-optimization-section { --svc-surface: #101d31; }
.asfs-optimization { --optimization-accent: #83b3ff; }
.asfs-optimization-context { border-top: 1px solid #3a4c66; padding-top: 24px; }
.asfs-optimization-context > strong { color: #e8f1ff; font-size: 0.8125rem; letter-spacing: 0; text-transform: uppercase; }
.asfs-optimization-context > p { font-size: 0.875rem; margin: 8px 0 0; }
.asfs-optimization-context a { color: #a8d3ff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.asfs-optimization-context a:hover { color: #fff; }
.asfs-optimization-context a:focus-visible { outline: 2px solid #67e8f9; outline-offset: 4px; }
.asfs-optimization-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 36px 0; }
.asfs-optimization-metric { min-width: 0; padding: 24px 16px; border: 1px solid #3a4c66; border-radius: 8px; background: #0b1426; text-align: center; }
.asfs-optimization-metric:nth-child(2) { --optimization-accent: #bea5fa; }
.asfs-optimization-metric:nth-child(3) { --optimization-accent: #6bdbe5; }
.asfs-optimization-metric:nth-child(4) { --optimization-accent: #83dfba; }
.asfs-optimization-metric h3 { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; min-height: 28px; font-size: 0.9375rem; line-height: 1.4; }
.asfs-optimization-metric h3 > span, .asfs-optimization-metric h3 svg { display: block; width: 20px; height: 20px; flex: 0 0 20px; color: var(--optimization-accent); }
.asfs-optimization-score { position: relative; display: grid; place-items: center; width: 148px; max-width: 100%; aspect-ratio: 1; margin: 24px auto 18px; color: var(--optimization-accent); }
.asfs-optimization-score > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 5; }
.asfs-optimization-ring-track { stroke: #2b3b52; }
.asfs-optimization-ring-progress { stroke: currentColor; stroke-linecap: round; }
.asfs-optimization-number { display: flex; justify-content: center; align-items: baseline; gap: 2px; color: #f8fafc; font-variant-numeric: tabular-nums; }
.asfs-optimization-number strong { font-size: 2.5rem; line-height: 1; font-weight: 700; }
.asfs-optimization-number > span { color: var(--optimization-accent); font-size: 1.5rem; line-height: 1; }
.asfs-optimization-metric .asfs-optimization-status { margin: 0; color: var(--optimization-accent); font-size: 0.75rem; line-height: 1.5; font-weight: 700; text-transform: uppercase; }
.asfs-optimization-score--empty { border: 2px solid #3a4c66; border-radius: 50%; }
.asfs-optimization-score--empty > svg { position: static; width: 36px; height: 36px; stroke-width: 2; }
.asfs-optimization-signals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding-top: 24px; border-top: 1px solid #3a4c66; }
.asfs-optimization-signals > div { border-left: 2px solid #537cac; padding-left: 14px; min-width: 0; }
.asfs-optimization-signals dt { color: #b4c3d8; font-size: 0.6875rem; line-height: 1.5; font-weight: 600; text-transform: uppercase; }
.asfs-optimization-signals dd { margin: 8px 0 0; color: #eaf2ff; font-size: 1rem; line-height: 1.5; font-weight: 600; }
@media (max-width: 1100px) {
  .asfs-optimization-metrics, .asfs-optimization-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .asfs-optimization-metrics { gap: 14px; padding: 28px 0; }
  .asfs-optimization-metric { padding: 20px 10px; }
  .asfs-optimization-metric h3 { min-height: 48px; font-size: 0.875rem; }
  .asfs-optimization-score { width: 116px; margin-block: 20px 14px; }
  .asfs-optimization-number strong { font-size: 2rem; }
  .asfs-optimization-signals { gap: 24px 18px; }
  .asfs-optimization-signals dd { font-size: 0.9375rem; }
}
@media (max-width: 374px) {
  .asfs-optimization-metrics { grid-template-columns: minmax(0, 1fr); }
  .asfs-optimization-metric h3 { min-height: 28px; }
  .asfs-optimization-score { width: 148px; }
}