@layer components {
  html[data-route="/scout"] .scout-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
  html[data-route="/scout"] .scout-input{flex:1;min-width:180px;background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;padding:10px 14px;font-size:16px;color:var(--white-bright);outline:none;font-family:var(--f-body);}
  html[data-route="/scout"] .scout-input:focus{border-color:var(--red-primary);}
  html[data-route="/scout"] .scout-select{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;padding:10px 12px;font-size:16px;color:var(--white-bright);outline:none;font-family:var(--f-body);cursor:pointer;}
  html[data-route="/scout"] .scout-select:focus{border-color:var(--red-primary);}
  /* #AUD-06 P0 fix: wrap was overflow-x:auto but the table auto-shrunk its
     columns (esp. the unstyled action cell) to fit the viewport instead of
     keeping its natural width, so scrollWidth==clientWidth and no scrollbar
     ever appeared — REC YD/RUSH YD/TD/ACTIONS rendered off-canvas with no
     way to reach them. Give the wrap real horizontal scroll and force the
     table to hold its natural min-width so overflow is genuine below 880px. */
  html[data-route="/scout"] .scout-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
  html[data-route="/scout"] .scout-table{width:100%;border-collapse:collapse;font-size:16px;}
  @media(max-width:880px){html[data-route="/scout"] .scout-table{min-width:720px;}}
  html[data-route="/scout"] .scout-table th{font-family:var(--f-display);font-size:16px;letter-spacing:.12em;color:var(--gray-light);text-align:left;padding:6px 10px;border-bottom:1px solid var(--gray-border);white-space:nowrap;cursor:pointer;}
  html[data-route="/scout"] .scout-table th:hover{color:var(--white-bright);}
  html[data-route="/scout"] .scout-table td{padding:9px 10px;border-bottom:1px solid var(--hairline);vertical-align:middle;}
  html[data-route="/scout"] .scout-table tr:last-child td{border-bottom:none;}
  html[data-route="/scout"] .scout-table tr:hover td{background:rgba(255,255,255,0.02);}
  html[data-route="/scout"] .scout-name-link{color:var(--white-bright);font-weight:600;font-size:16px;}
  html[data-route="/scout"] .scout-name-link:hover{color:var(--red-primary);}
  html[data-route="/scout"] .scout-pos-badge{display:inline-block;padding:1px 5px;border-radius:3px;font-size:16px;background:rgba(255,26,26,.15);color:var(--red-primary);margin-right:4px;}
  html[data-route="/scout"] .scout-act-cell{min-width:210px;}
  @media(max-width:359px){html[data-route="/scout"] .scout-hide-320{display:none !important;}}

  /* #AUD-06 P1/P2 fix: .pl-act-btn had no CSS scoped to /scout (only defined
     on /players, /waivers, /player), so Favorite/Watchlist/Season Stats fell
     back to unstyled default button/anchor sizing — stacking as tall block
     elements (~175px/row) instead of compact bordered pills, both inflating
     page height to ~44.5k px and leaving the action links unstyled at
     desktop too. Mirrors players/route.css:420-437. */
  html[data-route="/scout"] a.pl-act-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
  html[data-route="/scout"] .pl-act-btn{display:inline-flex;align-items:center;gap:5px;padding:9px 8px;font-family:var(--f-mono, monospace);font-size:16px;letter-spacing:.10em;font-weight:700;color:var(--white-bright, #F5F5F5);background:var(--black-soft, #111);border:1px solid var(--gray-border, #2A2A2A);border-radius:6px;cursor:pointer;transition:border-color .15s, background .15s, transform .1s;text-align:center;white-space:nowrap;}
  html[data-route="/scout"] .pl-act-btn:hover{border-color:var(--red-primary, #FF1A1A);background:rgba(255,26,26,.10);}
  html[data-route="/scout"] .pl-act-btn:active{transform:scale(.97);}
  html[data-route="/scout"] .pl-act-btn.is-active{border-color:var(--accent, #FF2D2D);color:var(--white-bright, #F5F5F5);background:rgba(255,45,45,.08);}
}