/* The shadcn-owned primitives, shared by every page that uses them.
 *
 * They were inside listing.css, which meant a second page wanting a Card or a
 * Button had the choice of duplicating them or loading the whole listing
 * funnel's stylesheet. They are the design system, not one page's styling.
 *
 * These are the classes `client/ui/*.jsx` emit. Server-rendered markup uses
 * the same class names deliberately: the components are one way to produce
 * this markup, not the only way, and a page that renders its shell on the
 * server should not look different from one that renders it in React.
 */
/* ------------------------------------------------ shadcn-owned primitives */
.ui-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid transparent; border-radius: 10px; font: 700 13px/1 var(--sans);
  letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.ui-button:hover:not(:disabled) { transform: translateY(-1px); }
.ui-button:disabled { opacity: .45; cursor: not-allowed; }
.ui-button-md { min-height: 42px; padding: 0 16px; }
.ui-button-sm { min-height: 34px; padding: 0 11px; border-radius: 8px; font-size: 12px; }
.ui-button-lg { min-height: 54px; padding: 0 19px; }
.ui-button-icon { width: 42px; height: 42px; padding: 0; }
.ui-button-default { color: #160b05; background: linear-gradient(110deg, var(--ember-hi), var(--ember)); box-shadow: 0 12px 30px rgba(255,86,48,.16); }
.ui-button-secondary { color: var(--text); background: rgba(255,255,255,.07); }
.ui-button-outline { color: #d4cbc2; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.018); }
.ui-button-outline:hover { border-color: rgba(255,179,63,.4); color: #fff1d7; background: rgba(255,179,63,.055); }
.ui-button-ghost { color: var(--dim); background: transparent; }
.ui-button-ghost:hover { color: var(--text); background: rgba(255,255,255,.04); }
.ui-button-destructive { color: #fff; background: #b52c48; }
.ui-input, .ui-native-select {
  width: 100%; height: 50px; padding: 0 14px; border: 1px solid rgba(255,255,255,.105); border-radius: 10px;
  background: rgba(3,3,3,.38); color: var(--text); font: 500 14px/1 var(--sans);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.ui-input::placeholder { color: #625c56; }
.ui-input:focus, .ui-native-select:focus { border-color: rgba(255,179,63,.58); box-shadow: 0 0 0 3px rgba(255,179,63,.07); outline: 0; background: rgba(8,7,6,.66); }
.ui-native-select-wrap { position: relative; display: block; }
.ui-native-select { appearance: none; padding-right: 42px; }
.ui-native-select-wrap svg { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: #8d857d; stroke-width: 1.7; pointer-events: none; }
.ui-field { min-width: 0; }
.ui-label { color: inherit; }
.ui-field-error { margin: 0 0 16px; }
.ui-card { border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,.025); }
.ui-card-header, .ui-card-content, .ui-card-footer { padding: 18px; }
.ui-card-title { margin: 0; }
.ui-card-description { margin: 6px 0 0; color: var(--dim); }