.search { position: relative; }
.search__box { display: flex; align-items: center; gap: 8px; height: 40px; width: 300px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: background .2s, box-shadow .2s; }
.search__box:focus-within { background: #fff; box-shadow: 0 0 0 3px var(--signal, #ffe11a); }
.search__box svg { width: 17px; height: 17px; flex: none; fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2.2; stroke-linecap: round; }
.search__box:focus-within svg { stroke: #0a0a0a; }
.search__box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: #fff; font: 600 14px/1 "Inter", system-ui, sans-serif; }
.search__box:focus-within input { color: #0a0a0a; }
.search__box input::placeholder { color: rgba(255,255,255,.55); }
.search__box:focus-within input::placeholder { color: #8a8a90; }
.search__res { position: absolute; right: 0; top: calc(100% + 10px); z-index: 80; width: min(460px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; padding: 8px; border-radius: 14px; background: #fff; color: #0a0a0a; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.08); }
.search__res[hidden] { display: none; }
.search__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 10px; }
.search__item:hover, .search__item.is-on { background: #f4f4f5; }
.search__item img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: #ddd; }
.search__item small { display: block; font: 800 10.5px/1.2 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #ff2e3b; }
.search__item b { display: block; margin-top: 3px; font: 800 14.5px/1.25 "Inter", sans-serif; }
.search__empty { padding: 14px 10px; font: 600 14px/1.4 "Inter", sans-serif; color: #6e6e74; }
@media (max-width: 1080px) { .search__box { width: 220px; } }
@media (max-width: 760px) { .search__box { width: 40px; padding: 0 11px; } .search__box:focus-within { position: absolute; right: 0; top: -20px; width: calc(100vw - 32px); z-index: 90; } .search__box input { opacity: 0; } .search__box:focus-within input { opacity: 1; } .search__res { position: fixed; left: 16px; right: 16px; top: 70px; width: auto; } }