@layer components {
  html[data-route="/optimizer"] .scatter-wrap{position:relative;width:100%;}
  html[data-route="/optimizer"] .scatter-wrap svg{width:100%;height:320px;overflow:visible;}
  html[data-route="/optimizer"] .rec-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px;display:flex;align-items:center;gap:12px;}
  html[data-route="/optimizer"] .rec-badge{font-size:16px;font-weight:800;padding:4px 8px;border-radius:4px;letter-spacing:.5px;min-width:56px;text-align:center;}
  html[data-route="/optimizer"] .rec-start{background:rgba(61,186,110,.15);color:#3dba6e;border:1px solid rgba(61,186,110,.3);}
  html[data-route="/optimizer"] .rec-flex{background:rgba(255,45,45,.15);color:var(--white-bright);border:1px solid rgba(255,45,45,.3);}
  html[data-route="/optimizer"] .rec-sit{background:rgba(200,16,46,.15);color:#e05070;border:1px solid rgba(200,16,46,.3);}
  html[data-route="/optimizer"] .rec-monitor{background:rgba(200,200,100,.1);color:var(--white-bright);border:1px solid rgba(200,200,100,.2);}
  html[data-route="/optimizer"] .rec-score-bar{width:80px;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;}
  html[data-route="/optimizer"] .rec-score-fill{height:100%;background:var(--red-primary);border-radius:3px;}
  html[data-route="/optimizer"] .pos-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
  /* SITE-AUDIT-2026-07-02 F059: the "HOW IT WORKS" endpoint snippet uses a
     bare <code> tag with no font-family, so it renders in the browser's
     generic monospace fallback instead of the declared JetBrains Mono stack. */
  html[data-route="/optimizer"] code{font-family:var(--f-mono,'JetBrains Mono',monospace);}
}