@layer components {
  .search-page .search-hero .wrapper{
    justify-content:center;
  }
  .search-page .search-hero-inner{
    width:100%;
    max-width:980px;
    display:grid;
    gap:10px;
    text-align:center;
  }
  .search-page .search-hero-inner h1{
    margin:0;
    font-size:clamp(2.1rem, 3.6vw, 2.7rem);
    line-height:1.2;
  }
  .search-page .search-hero-tagline{
    margin:0;
    color:color-mix(in srgb,var(--text-muted) 92%, #ffffff 8%);
    max-width:60ch;
    margin-inline:auto;
  }

  .search-page .search-panel{
    max-width:980px;
    margin-inline:auto;
  }

  .search-card{
    border-radius:22px;
    padding:clamp(18px, 3vw, 26px);
    background:color-mix(in srgb,var(--surface) 90%, #000 10%);
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    box-shadow:0 22px 48px rgba(0,0,0,.28);
  }

  .search-form{
    display:flex;
    gap:12px;
    align-items:stretch;
  }
  .search-field{
    flex:1;
    display:flex;
    gap:10px;
    align-items:stretch;
  }

  .search-input{
    flex:1;
    min-height:48px;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--primary) 22%, transparent);
    background:color-mix(in srgb,var(--surface) 82%, #020509 18%);
    color:color-mix(in srgb,var(--text-light) 94%, #ffffff 6%);
    font-size:1rem;
  }
  .search-input::placeholder{
    color:color-mix(in srgb,var(--text-muted) 78%, #ffffff 22%);
  }
  .search-input:focus{
    outline:none;
    border-color:color-mix(in srgb,var(--primary) 44%, transparent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%, transparent);
  }

  .search-actions{
    display:flex;
    gap:10px;
    align-items:stretch;
  }

  .search-hint{
    margin:14px 0 0;
    color:color-mix(in srgb,var(--text-muted) 86%, #ffffff 14%);
  }

  .search-status{
    margin:0;
    color:color-mix(in srgb,var(--text-muted) 86%, #ffffff 14%);
  }

  .search-results{
    margin-top:16px;
    display:grid;
    gap:12px;
  }
  .search-result{
    display:block;
    border-radius:18px;
    padding:14px 16px;
    border:1px solid color-mix(in srgb,var(--primary) 16%, transparent);
    background:color-mix(in srgb,var(--surface) 94%, #000 6%);
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:border-color .18s ease, transform .18s ease;
  }
  .search-result:hover{
    border-color:color-mix(in srgb,var(--primary) 28%, transparent);
    transform:translateY(-1px);
  }
  .search-result[role="note"]{
    cursor:default;
  }
  .search-result[role="note"]:hover{
    transform:none;
  }
  .search-result:focus-visible{
    outline:none;
    border-color:color-mix(in srgb,var(--primary) 44%, transparent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%, transparent);
  }

  .search-result-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }
  .search-result-title{
    color:color-mix(in srgb,var(--text-light) 96%, #ffffff 4%);
    text-decoration:none;
    font-weight:650;
    letter-spacing:.01em;
    line-height:1.2;
  }
  .search-result:hover .search-result-title,
  .search-result:focus-visible .search-result-title{
    text-decoration:underline;
    text-decoration-thickness:2px;
    text-underline-offset:4px;
  }
  .search-result-url{
    margin:8px 0 0;
    font-size:.92rem;
    color:color-mix(in srgb,var(--text-muted) 84%, #ffffff 16%);
  }
  .search-result-desc{
    margin:10px 0 0;
    color:color-mix(in srgb,var(--text-muted) 92%, #ffffff 8%);
  }

  .search-badge{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    border:1px solid color-mix(in srgb,var(--primary) 22%, transparent);
    background:color-mix(in srgb,var(--surface) 78%, #000 22%);
    color:color-mix(in srgb,var(--text-light) 92%, #ffffff 8%);
    white-space:nowrap;
  }

  .search-keywords{
    margin:12px 0 0;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .search-keyword{
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:999px;
    font-size:.82rem;
    border:1px dashed color-mix(in srgb,var(--primary) 20%, transparent);
    background:color-mix(in srgb,var(--surface) 88%, #000 12%);
    color:color-mix(in srgb,var(--text-muted) 92%, #ffffff 8%);
  }

  .search-highlight{
    padding:0 .12em;
    border-radius:6px;
    background:color-mix(in srgb,var(--primary) 26%, transparent);
    color:color-mix(in srgb,var(--text-light) 96%, #ffffff 4%);
  }

  @media (max-width: 768px){
    .search-form{ flex-direction:column; }
    .search-field{ flex-direction:column; }
    .search-actions{ justify-content:flex-start; }
  }
}