@layer components {
  html[data-route="/free-agents"] .filter-search{flex:1 1 200px;min-width:0;background:var(--bg-surface-2);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);min-height:40px;}
  html[data-route="/free-agents"] .filter-search::placeholder{color:var(--gray-light);}
  html[data-route="/free-agents"] .filter-search:focus{border-color:var(--red-primary);}
  html[data-route="/free-agents"] .pos-filters{display:flex;gap:4px;flex-wrap:wrap;}
  html[data-route="/free-agents"] .pos-btn{padding:6px 12px;border-radius:6px;font-size:16px;font-weight:700;letter-spacing:.08em;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;transition:all .12s;min-height:36px;font-family:var(--f-body);}
  html[data-route="/free-agents"] .pos-btn.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/free-agents"] .pos-btn:hover{color:var(--white-bright);}
  html[data-route="/free-agents"] .sort-select{padding:8px 12px;border-radius:8px;font-size:16px;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--white-bright);outline:none;cursor:pointer;font-family:var(--f-body);min-height:36px;}
  html[data-route="/free-agents"] .sort-select:focus{border-color:var(--red-primary);}
  html[data-route="/free-agents"] .fa-count{font-size:16px;color:var(--gray-light);white-space:nowrap;margin-left:auto;}
  html[data-route="/free-agents"] .fa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
  html[data-route="/free-agents"] .btn-waiver{background:rgba(255,45,45,.1);border-color:rgba(255,255,255,.25);color:#FFFFFF;}
  html[data-route="/free-agents"] .btn-waiver:hover{background:rgba(255,45,45,.2);}
  html[data-route="/free-agents"] .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:300;display:none;align-items:center;justify-content:center;padding:24px;}
  html[data-route="/free-agents"] .modal-backdrop.open{display:flex;}
  html[data-route="/free-agents"] .modal{background:var(--black-card);border:1px solid var(--gray-border);border-radius:14px;width:100%;max-width:520px;max-height:90vh;overflow:auto;}
  html[data-route="/free-agents"] .modal-head{padding:18px 22px;border-bottom:1px solid var(--gray-border);display:flex;align-items:center;justify-content:space-between;gap:12px;}
  html[data-route="/free-agents"] .modal-head h2{font-family:var(--f-display);font-size:20px;letter-spacing:.06em;margin:0;}
  html[data-route="/free-agents"] .modal-close{background:transparent;border:1px solid var(--gray-border);color:var(--gray-light);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;}
  html[data-route="/free-agents"] .modal-close:hover{border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/free-agents"] .modal-body{padding:22px;display:flex;flex-direction:column;gap:16px;}
  html[data-route="/free-agents"] .player-summary{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:10px;padding:14px 16px;}
  html[data-route="/free-agents"] .form-row{display:flex;flex-direction:column;gap:6px;}
  html[data-route="/free-agents"] .form-row label{font-family:var(--f-display);font-size:16px;letter-spacing:.14em;color:var(--gray-light);}
  html[data-route="/free-agents"] .form-row input,html[data-route="/free-agents"] .form-row 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);min-height:44px;}
  html[data-route="/free-agents"] .form-row input:focus,html[data-route="/free-agents"] .form-row select:focus{border-color:var(--red-primary);}
  html[data-route="/free-agents"] .form-hint{font-size:16px;color:var(--gray-light);}
  html[data-route="/free-agents"] .drop-list{max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;}
  html[data-route="/free-agents"] .drop-option{display:flex;align-items:center;gap:10px;padding:12px 10px;min-height:44px;border-radius:6px;border:1px solid var(--gray-border);background:var(--black-soft);cursor:pointer;transition:all .12s;}
  html[data-route="/free-agents"] .drop-option:hover{border-color:var(--red-primary);background:rgba(255,26,26,.04);}
  html[data-route="/free-agents"] .drop-option.selected{border-color:var(--red-primary);background:rgba(255,26,26,.08);}
  html[data-route="/free-agents"] .drop-option .do-pos{font-size:16px;font-weight:700;padding:1px 5px;border-radius:3px;background:rgba(138,138,138,.1);color:var(--gray-light);border:1px solid rgba(138,138,138,.2);}
  html[data-route="/free-agents"] .drop-option .do-name{font-size:16px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html[data-route="/free-agents"] .drop-option .do-pts{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);}
  html[data-route="/free-agents"] .modal-foot{padding:14px 22px;border-top:1px solid var(--gray-border);display:flex;justify-content:flex-end;gap:10px;}
  html[data-route="/free-agents"] .save-msg{font-size:16px;color:#3dba6e;align-self:center;margin-right:auto;}
  html[data-route="/free-agents"] .save-msg.err{color:var(--red-primary);}
  html[data-route="/free-agents"] .stagger-in{opacity:0;animation:fa-fadeInUp .25s ease both;}
  @media(prefers-reduced-motion:reduce){html[data-route="/free-agents"] .stagger-in{animation:none;opacity:1;}}
  @media(max-width:767px){html[data-route="/free-agents"] .fa-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:480px){html[data-route="/free-agents"] .fa-grid{grid-template-columns:1fr;}html[data-route="/free-agents"] .fa-count{display:none;}}
  @media(max-width:359px){html[data-route="/free-agents"] .hide-320{display:none !important;}}
  /* Tighten pill sizing so all 7 position filters (ALL QB RB WR TE K DEF) fit
     on one row at 390px instead of DEF orphan-wrapping to its own line. */
  @media(max-width:480px){
    html[data-route="/free-agents"] .pos-filters{gap:3px;}
    html[data-route="/free-agents"] .pos-btn{padding:6px 8px;font-size:14px;letter-spacing:.04em;}
  }
}