/* A single native dialog, scoped away from legacy header/filter rules. */
#public-search-panel {
  width: min(680px, calc(100% - 48px)); max-width: none; max-height: min(780px, calc(100dvh - 48px));
  height: min(780px, calc(100dvh - 48px)); padding: 0; box-sizing: border-box;
  border: 1px solid var(--border-color, var(--border-light)); border-radius: 24px;
  background: var(--bg-color, var(--surface-color)); color: var(--text-primary, var(--text-secondary));
  box-shadow: var(--shadow-heavy); overflow: hidden; font: inherit;
}
#public-search-panel::backdrop { background: var(--backdrop-color, var(--text-secondary)); }
body:has(#public-search-panel[open]) { overflow: hidden; }
#public-search-panel [hidden] { display: none; }
#public-search-panel .public-search-layout { height: 100%; display: flex; flex-direction: column; min-height: 0; }
#public-search-panel .public-search-header { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin: 0; padding: 20px 24px 12px; height: auto; width: auto; border: 0; background: none; box-shadow: none; }
#public-search-panel h2 { flex: 1; font-size: 21px; margin: 0; color: inherit; line-height: 1.3; }
#public-search-panel h3 { font-size: 19px; margin: 0 0 16px; color: inherit; line-height: 1.35; }
#public-search-panel button { font: inherit; cursor: pointer; touch-action: manipulation; }
#public-search-panel .public-search-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; margin: 0; border: 1px solid var(--border-light); border-radius: 50%; color: inherit; background: var(--surface-color); }
#public-search-panel svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#public-search-form { display: flex; gap: 8px; padding: 0 24px 16px; flex: 0 0 auto; margin: 0; }
#public-search-panel .public-search-field { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; margin: 0; background: var(--surface-color); border: 1px solid var(--border-color, var(--border-light)); border-radius: 15px; }
#public-search-query { flex: 1; min-width: 0; width: 100%; padding: 12px 0; margin: 0; border: 0; border-radius: 0; background: none; color: inherit; outline: none; box-shadow: none; font: inherit; font-size: 16px; }
#public-search-query::placeholder { color: var(--text-secondary); opacity: 1; }
#public-search-panel .public-search-submit { padding: 0 17px; min-height: 48px; border: 1px solid var(--border-color, var(--border-light)); border-radius: 15px; background: var(--surface-color); color: var(--primary-color, var(--text-primary)); font-weight: 600; }
#public-search-panel .public-search-scroll { flex: 1; min-height: 0; padding: 0 24px 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#public-search-hint, #public-search-status { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin: 0 0 20px; }
#public-search-status:empty { display: none; }
#public-search-panel section { margin: 12px 0 28px; }
#public-search-panel .public-search-section-heading { display: flex; align-items: baseline; gap: 16px; justify-content: space-between; }
#public-search-panel .public-search-text { min-height: 44px; padding: 0; border: 0; background: none; color: var(--primary-color, var(--text-primary)); font-size: 13px; }
#public-search-panel .public-search-brands { display: flex; flex-wrap: wrap; gap: 10px; }
#public-search-panel .public-search-brand { min-height: 46px; padding: 10px 18px; border: 1px solid var(--border-color, var(--border-light)); border-radius: 24px; background: var(--surface-color); color: inherit; text-align: left; overflow-wrap: anywhere; }
#public-search-panel .public-search-list { display: flex; flex-direction: column; }
#public-search-panel .public-search-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 56px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--border-light); background: none; color: inherit; text-align: left; overflow-wrap: anywhere; }
#public-search-panel :is(button, input):focus-visible, #public-search-panel .public-search-field:focus-within { outline: 2px solid var(--primary-color, var(--text-primary)); outline-offset: 3px; }
@media (max-width: 768px) {
  #public-search-panel { width: 100%; height: var(--search-viewport-height, 100dvh); max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  #public-search-panel .public-search-header { padding: calc(10px + env(safe-area-inset-top)) 16px 12px; gap: 10px; }
  #public-search-panel h2 { font-size: 18px; }
  #public-search-form { padding: 0 16px 16px; }
  #public-search-panel .public-search-scroll { padding: 0 20px calc(24px + env(safe-area-inset-bottom)); }
  #public-search-panel .public-search-field { gap: 8px; padding: 0 10px; }
  #public-search-panel .public-search-submit { padding: 0 12px; }
}