.search-area .search {
  height: 58px;
  margin-bottom: 0;
  padding: 0 20px;
  border-color: transparent;
  background: var(--surface);
  box-shadow: 0 9px 26px rgba(16, 35, 49, 0.11);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.search-area .search > svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
  stroke-width: 2.2;
  flex: 0 0 auto;
}

.search-area .search input {
  font-weight: 500;
}

.search-area .search input::placeholder {
  color: color-mix(in srgb, var(--text) 68%, transparent);
}

.search-area .search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(16, 35, 49, 0.15), 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  transform: translateY(-1px);
}

[data-theme="dark"] .search-area .search {
  box-shadow: 0 9px 26px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .search-area .search:focus-within {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34), 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

@media (max-width: 760px) {
  .search-area .search {
    height: 54px;
    padding: 0 16px;
  }

  .search-area .search > svg {
    width: 20px;
    height: 20px;
  }
}