dialog.search-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1120px, calc(100vw - 2 * var(--space-sm)));
  max-width: none;
  max-height: min(88vh, 900px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
}
.mobile-topbar__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text);
}
.mobile-topbar__search-btn .icon { width: 22px; height: 22px; }
.search-modal::backdrop { background: rgba(20, 17, 12, .72); backdrop-filter: blur(5px); }
.search-modal__panel {
  max-height: min(88vh, 900px);
  overflow-y: auto;
  padding: clamp(var(--space-sm), 3vw, var(--space-lg));
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-gold) 35%, var(--color-border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.search-modal__header, .search-modal__form, .search-modal__summary { display: flex; align-items: center; }
.search-modal__header { justify-content: space-between; gap: var(--space-md); margin-block-end: var(--space-md); }
.search-modal__title { font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl)); }
.search-modal__hint, .search-modal__status, .search-modal__summary { color: var(--color-text-muted); font-size: var(--fs-sm); }
.search-modal__close {
  flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid var(--color-border);
  border-radius: var(--radius-round); font-size: 28px; color: var(--color-text-muted);
}
.search-modal__close:hover { border-color: var(--color-gold); color: var(--color-gold-text); }
.search-modal__form { gap: var(--space-xs); }
.search-modal__input-wrap { position: relative; flex: 1; }
.search-modal__input-wrap > .icon {
  position: absolute; inset-inline-start: var(--space-sm); top: 50%; width: 21px;
  transform: translateY(-50%); color: var(--color-text-muted);
}
.search-modal__input-wrap input {
  width: 100%; min-height: 52px; padding-inline: 50px 46px; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-bg);
}
.search-modal__input-wrap input:focus { outline: 2px solid var(--color-gold); outline-offset: 1px; }
.search-modal__spinner {
  position: absolute; inset-inline-end: var(--space-sm); top: calc(50% - 10px); width: 20px; height: 20px;
  border: 2px solid var(--color-border); border-block-start-color: var(--color-gold); border-radius: 50%;
  animation: search-spin .7s linear infinite;
}
.search-modal__status { min-height: 24px; padding-block: var(--space-xs); }
.search-modal__summary { justify-content: space-between; gap: var(--space-sm); margin-block-end: var(--space-xs); }
.search-modal__view-all { flex: 0 0 auto; color: var(--color-gold-text); font-weight: 600; }
.search-modal__view-all:hover { text-decoration: underline; }
.search-modal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.search-modal__empty { padding: var(--space-xl); text-align: center; color: var(--color-text-muted); }
.search-modal__empty-icon { display: block; width: 48px; height: 48px; margin: 0 auto var(--space-xs); color: var(--color-gold-text); }
.search-modal__empty p { margin-block-end: var(--space-3xs); color: var(--color-text); font-weight: 600; }
@keyframes search-spin { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
  dialog.search-modal { inset-block-start: auto; width: 100%; max-height: 92vh; margin-block-end: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .search-modal__panel { max-height: 92vh; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .search-modal__form { align-items: stretch; flex-direction: column; }
  .search-modal__submit { width: 100%; }
  .search-modal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .search-modal__spinner { animation-duration: 1.5s; } }