@layer components {
  html[data-route="/search"] .search-shell{display:flex;flex-direction:column;gap:16px;}
  html[data-route="/search"] .input-wrap{position:relative;}
  html[data-route="/search"] .search-input{width:100%;background:var(--black-soft);border:1px solid var(--gray-border);border-radius:12px;padding:18px 22px 18px 56px;font-size:16px;color:var(--white-bright);outline:none;font-family:var(--f-body);min-height:60px;letter-spacing:.01em;}
  html[data-route="/search"] .search-input:focus{border-color:var(--red-primary);box-shadow:0 0 0 3px rgba(255,26,26,.12);}
  /* AUD-33: was font-size-based emoji glyph; now the sitewide currentColor
     SVG-mask icon technique (same pattern as .ic-srch in assets/style.css)
     so it renders consistently across platforms instead of raw OS emoji. */
  html[data-route="/search"] .search-glyph{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:inline-block;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='10.5' cy='10.5' r='6'/><path d='M20 20l-5-5'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='10.5' cy='10.5' r='6'/><path d='M20 20l-5-5'/></svg>");color:var(--gray-light);pointer-events:none;}
  /* AUD-33: helper copy under the search box was rendering in the mono
     numeral font (--f-mono); switch to --f-body (Inter) to match body copy. */
  html[data-route="/search"] .results-status{font-size:16px;color:var(--gray-light);font-family:var(--f-body);padding:0 4px;}
  html[data-route="/search"] .results-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:start;}
  /* AUD-33: .empty-state had no route-scoped styling (lost in the core.css
     split) — icon/copy rendered left-aligned with default UA spacing.
     Add the same centered treatment used by other routes' empty states. */
  html[data-route="/search"] .empty-state{text-align:center;padding:32px 20px;color:var(--gray-light);}
  html[data-route="/search"] .empty-icon{width:32px;height:32px;margin:0 auto 12px;display:inline-block;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;}
  html[data-route="/search"] .empty-icon.ic-empty-player{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 20c0-4 4-6 8-6s8 2 8 6'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 20c0-4 4-6 8-6s8 2 8 6'/></svg>");}
  html[data-route="/search"] .empty-icon.ic-empty-league{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M7 4h10v4a5 5 0 0 1-10 0V4z'/><path d='M5 4H3v3a3 3 0 0 0 3 3'/><path d='M19 4h2v3a3 3 0 0 1-3 3'/><path d='M9 20h6v-4H9z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M7 4h10v4a5 5 0 0 1-10 0V4z'/><path d='M5 4H3v3a3 3 0 0 0 3 3'/><path d='M19 4h2v3a3 3 0 0 1-3 3'/><path d='M9 20h6v-4H9z'/></svg>");}
  html[data-route="/search"] .empty-icon.ic-empty-page{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polygon points='15,9 13,13 9,15 11,11'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polygon points='15,9 13,13 9,15 11,11'/></svg>");}
  html[data-route="/search"] .empty-msg{font-family:var(--f-display);font-size:16px;letter-spacing:.06em;color:var(--gray-light);margin:0 0 6px;}
  html[data-route="/search"] .empty-sub{margin:0;}
  html[data-route="/search"] .result-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--hairline);text-decoration:none;color:var(--white-bright);transition:background .12s;cursor:pointer;min-height:52px;}
  html[data-route="/search"] .result-row:last-child{border-bottom:none;}
  html[data-route="/search"] .result-row:hover{background:rgba(255,26,26,.04);}
  html[data-route="/search"] .rr-icon{flex:0 0 32px;width:32px;height:32px;border-radius:7px;background:var(--black-soft);border:1px solid var(--gray-border);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:16px;color:#FFFFFF;overflow:hidden;letter-spacing:.04em;}
  html[data-route="/search"] .rr-body{flex:1;min-width:0;}
  html[data-route="/search"] .rr-title{font-size:16px;font-weight:600;color:var(--white-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html[data-route="/search"] .rr-sub{font-size:16px;color:var(--gray-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html[data-route="/search"] .rr-tag{font-family:var(--f-display);font-size:16px;letter-spacing:.1em;padding:2px 6px;border-radius:4px;background:rgba(255,26,26,.1);color:var(--red-primary);flex:0 0 auto;}
  @media(max-width:1024px){html[data-route="/search"] .results-cols{grid-template-columns:1fr 1fr;}}
  @media(max-width:767px){html[data-route="/search"] .results-cols{grid-template-columns:1fr;}html[data-route="/search"] .search-input{font-size:16px;padding:14px 18px 14px 50px;}}
}