/* Shared search controls and subscription card. Presentation only. */
:root {
  --search-surface: #f2f4ff;
  --search-border: #d5dbef;
  --search-ink: #242d49;
  --search-placeholder: #626f91;
}
:root[data-theme="dark"] {
  --search-surface: #202941;
  --search-border: #43516e;
  --search-ink: #f1f5ff;
  --search-placeholder: #b4c0dc;
}
:root input[type="search"], :root input.ui-search-input {
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 13px 14px 13px 56px;
  border: 1px solid var(--search-border) !important;
  border-radius: 17px;
  background: url('../img/ui-search-20260919.webp') 12px center / 34px 34px no-repeat, linear-gradient(130deg, var(--search-surface), var(--card)) !important;
  color: var(--search-ink) !important;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 #ffffff0b;
  transition: border-color .15s, box-shadow .15s;
}
:root input[type="search"]::placeholder, :root input.ui-search-input::placeholder {
  color: var(--search-placeholder);
  opacity: 1;
}
:root input[type="search"]:focus, :root input.ui-search-input:focus {
  outline: none;
  border-color: #ac92ff !important;
  box-shadow: 0 0 0 3px #9676ff29, inset 0 1px 0 #ffffff12;
}
:root input[type="search"]:disabled, :root input.ui-search-input:disabled { opacity: .55; cursor: not-allowed; }
/* The singleton keeps its DOM, listeners and positioning; its input owns the one border. */
:root .searchbar { padding: 0; gap: 0; border: 0; border-radius: 17px; background: transparent; box-shadow: none; }
:root .searchbar:focus-within { border: 0; box-shadow: none; }
#searchIcon { display: none; }
:root svg[data-crystal-name="search"], :root svg[data-crystal-name="zoom"] {
  background: url('../img/ui-search-20260919.webp') center / contain no-repeat !important;
  width: 28px; height: 28px; min-width: 28px; flex-shrink: 0;
}
:root .subbanner, :root .ownercard .subbanner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 100px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #bbabff70;
  border-radius: 23px;
  background: radial-gradient(ellipse at 0 0, #8f9bff66, transparent 65%), linear-gradient(115deg, #5540a4, #7550d5 65%, #8e65e4);
  color: #fff;
  text-align: left;
  box-shadow: inset 0 1px 0 #ffffff2b, 0 8px 22px #38256d24;
}
:root .subbanner::before {
  content: ""; display: block; position: absolute; z-index: -1;
  width: 170px; height: 170px; top: -107px; right: -45px;
  border: 1px solid #ffffff24; border-radius: 50%;
  box-shadow: 0 0 0 24px #ffffff06, 0 0 0 48px #ffffff05;
  pointer-events: none;
}
:root .subbanner .crownimg {
  width: 64px !important; height: 64px !important; flex: 0 0 64px;
  object-fit: contain;
  background: none !important;
}
:root .subbanner .tx { min-width: 0; flex: 1; }
:root .subbanner .tx .t { font-size: 17px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
:root .subbanner .tx .s { margin-top: 6px; font-size: 13px; line-height: 1.4; color: #eeeaff; font-weight: 500; opacity: 1; }
:root .subbanner .chev { display: grid; place-items: center; width: 28px; height: 34px; flex: 0 0 28px; margin-left: auto; border-radius: 11px; background: #ffffff14; }
:root .subbanner .chev svg { width: 19px; height: 19px; }
:root .subbanner:focus-visible { outline: 3px solid #bcb0ff; outline-offset: 3px; }
@media (max-width: 350px) {
  :root .subbanner { gap: 9px; padding: 14px 12px; }
  :root .subbanner .crownimg { width: 56px !important; height: 56px !important; flex-basis: 56px; }
  :root .subbanner .tx .t { font-size: 16px; }
}
/* Participant lookups keep enough room for text and a full touch target. */
@media (max-width: 480px) {
  .field > div:has(> input[type="search"]):has(> button) { flex-wrap: wrap; }
  .field > div:has(> input[type="search"]):has(> button) > input { flex-basis: 100%; }
  .field > div:has(> input[type="search"]):has(> button) > button { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  :root input[type="search"], :root input.ui-search-input { transition: none; }
  :root .subbanner:active { transform: none; }
}