/* Поиск — по макету (23:318): 529×80, стиль плиток; список результатов — анимация как в референсе владельца
   (раскрытие по высоте .4 с, строки въезжают снизу по очереди, иконка лупа → стрелка при вводе).
   Список открывается вверх: поле внизу первого экрана, а рамка экрана обрезает всё, что ниже. */
.search { position: relative; width: 529px; max-width: 100%; }
.sr-field {
  position: relative; display: flex; align-items: center; gap: 10px; height: 80px; padding: 12px 18px;
  border: 2px solid rgba(160, 160, 249, .48); border-radius: calc(16px * var(--sq)); corner-shape: squircle;
  background: rgba(112, 113, 231, .3); backdrop-filter: blur(2.6px); box-shadow: inset 0 0 5.9px rgba(14, 2, 121, .44);
  cursor: text;
}
.sr-ico { position: relative; flex: none; width: 24px; height: 24px; overflow: hidden; }
.sr-ico > * { position: absolute; inset: 0; width: 24px; height: 24px; transition: transform .2s ease, opacity .2s ease; }
.sr-go { transform: translateY(-20px); opacity: 0; }
.search.typing .sr-find { transform: translateY(20px); opacity: 0; }
.search.typing .sr-go { transform: none; opacity: 1; }
#sr-input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: #fff;
  font: 500 18px/normal var(--font-ui);
}
#sr-input::placeholder { color: #fff; opacity: 1; }
#sr-input::-webkit-search-cancel-button { display: none; }
.sr-list {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 5; overflow: hidden;
  border: 2px solid rgba(160, 160, 249, .48); border-radius: calc(16px * var(--sq)); corner-shape: squircle;
  background: rgba(28, 30, 88, .78); backdrop-filter: blur(14px);
  height: 0; opacity: 0; transition: height .4s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
.sr-list.open { opacity: 1; }
.sr-in { padding: 8px; max-height: 460px; overflow-y: auto; }
.sr-group { padding: 10px 10px 4px; font: 500 12px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.sr-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: #fff;
  opacity: 0; transform: translateY(20px); transition: opacity .3s ease, transform .3s ease, background-color .15s ease;
}
.sr-list.open .sr-item { opacity: 1; transform: none; transition-delay: calc(var(--i) * 40ms), calc(var(--i) * 40ms), 0s; }
.sr-item[aria-selected="true"] { background: rgba(255, 255, 255, .1); }
.sr-pic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .9); object-fit: cover; }
.sr-pic.none { display: grid; place-items: center; background: rgba(201, 255, 61, .14); color: var(--lime); font: 700 14px/1 var(--font); }
.sr-txt { flex: 1; min-width: 0; }
.sr-txt b { display: block; font: 500 16px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-txt small { display: block; margin-top: 2px; font: 400 13px/1.2 var(--font); color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-txt mark { background: none; color: var(--lime); }
.sr-empty { padding: 18px 12px; font: 400 15px/1.3 var(--font); color: rgba(255, 255, 255, .7); }
.sr-foot { display: flex; justify-content: space-between; padding: 8px 12px 4px; border-top: 1px solid rgba(255, 255, 255, .1); font: 400 12px/1 var(--font); color: rgba(255, 255, 255, .45); }
@media (prefers-reduced-motion: reduce) { .sr-list, .sr-item, .sr-ico > * { transition: none; } }