@layer components {
/* ── Search ────────────────────────────────────────────── */
/* Lucide icon helper, see ApplicationHelper#svg and app/views/shared/svg/ */
.icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; line-height: 0; vertical-align: -0.125em; flex-shrink: 0; }
.icon svg { width: 100%; height: 100%; display: block; }
/* Rating stars read as solid, tinted by the button's color state */
.import-rating-star .icon svg { fill: currentColor; stroke: none; }

.search-form { display: flex; }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 10px; font-size: 14px; color: var(--faint); pointer-events: none; }
.search-input {
  width: 200px;
  height: 34px;
  padding-left: 30px;
  padding-right: 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  outline: none;
  transition: border-color var(--t-slow);
}
.search-input:focus { border-color: var(--sage-dot); }
}