/* AfroVibe unified UI layer
   Purpose: one final visual contract across web pages without touching backend logic. */
:root {
  color-scheme: dark;
  --av-bg-night: #0f0b0b;
  --av-bg-deep: #130f0e;
  --av-bg-warm: #1b1211;
  --av-surface: rgba(255, 244, 236, 0.078);
  --av-surface-2: rgba(255, 244, 236, 0.118);
  --av-surface-solid: #241817;
  --av-surface-solid-2: #2d1d1a;
  --av-ivory: #fbf4ec;
  --av-ivory-soft: rgba(251, 244, 236, 0.78);
  --av-ivory-muted: rgba(251, 244, 236, 0.58);
  --av-ink: #201614;
  --av-taupe: #7a6861;
  --av-line: rgba(251, 244, 236, 0.14);
  --av-line-strong: rgba(251, 244, 236, 0.24);
  --av-coral: #b85c45;
  --av-orange: #ff8a1c;
  --av-pink: #e62e6b;
  --av-good: #87c9a7;
  --av-danger: #ef6b6b;
  --av-radius-xl: 32px;
  --av-radius-lg: 26px;
  --av-radius-md: 20px;
  --av-radius-pill: 999px;
  --av-shadow-soft: 0 24px 80px -48px rgba(0, 0, 0, 0.95);
  --av-shadow-lift: 0 30px 92px -54px rgba(230, 46, 107, 0.44);
  --av-gradient: linear-gradient(135deg, var(--av-orange), #f45f45 45%, var(--av-pink));
  --av-gradient-soft: linear-gradient(135deg, rgba(255, 138, 28, 0.20), rgba(230, 46, 107, 0.14));
  --av-focus-ring: 0 0 0 4px rgba(184, 92, 69, 0.25);
  --av-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --av-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}

html {
  min-height: 100%;
  background: var(--av-bg-night);
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--av-font-body);
  color: var(--av-ivory);
  background:
    radial-gradient(circle at 12% -10%, rgba(255, 138, 28, 0.16), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(230, 46, 107, 0.12), transparent 28%),
    radial-gradient(circle at 50% 112%, rgba(184, 92, 69, 0.16), transparent 34%),
    linear-gradient(180deg, var(--av-bg-night) 0%, var(--av-bg-deep) 45%, var(--av-bg-warm) 100%);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.av-page-bg,
body.auth-page-bg,
body.dashboard-page-bg,
body.profile-complete-bg,
body.messages-page,
body.chat-page,
body.profile-page,
body.av-static-page,
body.av-form-page {
  background:
    radial-gradient(circle at 10% -8%, rgba(255, 138, 28, 0.17), transparent 29%),
    radial-gradient(circle at 92% 2%, rgba(230, 46, 107, 0.12), transparent 27%),
    radial-gradient(circle at 52% 112%, rgba(184, 92, 69, 0.16), transparent 34%),
    linear-gradient(180deg, var(--av-bg-night) 0%, var(--av-bg-deep) 44%, var(--av-bg-warm) 100%) !important;
}

body::selection {
  background: rgba(184, 92, 69, 0.32);
  color: #fff;
}

h1, h2, h3,
.av-page-title,
.av-display {
  font-family: var(--av-font-display);
  letter-spacing: -0.035em;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: #fff;
}

main {
  width: 100%;
}

@media (max-width: 1023px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }
}

/* Unified surfaces */
.card,
.av-card,
.av-panel,
.av-glass,
.av-form-card,
.av-profile-card,
.av-empty-state,
.settings-card,
.content-panel,
.legal-shell,
.dashboard-meter-card,
.profile-complete-panel,
.auth-card,
.glass,
.modal-box,
.chat-list-panel,
.chat-thread-panel,
.chat-composer,
.chat-empty,
.messages-list,
.notification-card,
.upgrade-card,
.paywall-card {
  border: 1px solid var(--av-line) !important;
  border-radius: var(--av-radius-lg) !important;
  background:
    linear-gradient(145deg, rgba(251, 244, 236, 0.112), rgba(251, 244, 236, 0.054)),
    radial-gradient(circle at 14% 0%, rgba(255, 138, 28, 0.075), transparent 40%) !important;
  color: var(--av-ivory) !important;
  box-shadow: var(--av-shadow-soft) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Intentional light content cards inside the dark shell */
.av-surface-warm,
.chat-message-own,
.chat-message-peer,
.profile-complete-panel,
.auth-card.is-warm,
.warm-card {
  background: rgba(251, 244, 236, 0.97) !important;
  color: var(--av-ink) !important;
  border-color: rgba(36, 24, 23, 0.12) !important;
}

.av-surface-warm *,
.profile-complete-panel *,
.auth-card.is-warm *,
.warm-card * {
  color: inherit;
}

/* Buttons */
.btn,
button,
[role="button"] {
  border-radius: var(--av-radius-pill);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: var(--av-focus-ring) !important;
}

.btn:hover,
button:hover,
[role="button"]:hover {
  transform: translateY(-1px);
}

.btn-primary,
.av-btn-primary,
.dashboard-apply-button,
button[type="submit"].btn,
a.btn-primary {
  border: 0 !important;
  background: var(--av-gradient) !important;
  color: #fff !important;
  box-shadow: 0 18px 46px -28px rgba(230, 46, 107, 0.86) !important;
}

.btn-primary:hover,
.av-btn-primary:hover,
.dashboard-apply-button:hover,
button[type="submit"].btn:hover,
a.btn-primary:hover {
  filter: brightness(1.05) saturate(1.05);
  box-shadow: var(--av-shadow-lift) !important;
}

.btn-ghost,
.btn-outline,
.btn-secondary,
.dashboard-pill-button,
.open-filters,
.card-menu-btn {
  border: 1px solid var(--av-line) !important;
  background: rgba(251, 244, 236, 0.075) !important;
  color: var(--av-ivory) !important;
}

.btn-ghost:hover,
.btn-outline:hover,
.btn-secondary:hover,
.dashboard-pill-button:hover,
.open-filters:hover,
.card-menu-btn:hover {
  border-color: var(--av-line-strong) !important;
  background: rgba(251, 244, 236, 0.13) !important;
}

.btn-error,
.btn-danger,
button[data-danger="true"] {
  border: 1px solid rgba(239, 107, 107, 0.34) !important;
  background: rgba(239, 107, 107, 0.14) !important;
  color: #fff !important;
}

/* Forms */
.input,
.select,
.textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
  border-radius: 18px !important;
  border: 1px solid rgba(36, 24, 23, 0.14) !important;
  background: rgba(251, 244, 236, 0.96) !important;
  color: var(--av-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(122, 104, 97, 0.70) !important;
}

select option {
  background: #fff7ef;
  color: var(--av-ink);
}

textarea {
  resize: vertical;
  min-height: 44px;
}

.label-text,
.form-control > span,
fieldset legend {
  color: var(--av-ivory-soft);
  font-weight: 700;
}

.profile-complete-panel .label-text,
.profile-complete-panel .form-control > span,
.profile-complete-panel fieldset legend,
.auth-card.is-warm .label-text,
.warm-card .label-text {
  color: var(--av-ink) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--av-coral);
}

/* Badges and chips */
.badge,
.av-chip,
.dashboard-card-intent-chip,
.dashboard-tier-badge,
[data-presence-pill] {
  border: 1px solid rgba(251, 244, 236, 0.16) !important;
  background: rgba(251, 244, 236, 0.10) !important;
  color: var(--av-ivory) !important;
  border-radius: var(--av-radius-pill) !important;
}

.dashboard-card-intent-chip.intent,
.badge-primary,
.av-chip-primary {
  background: rgba(255, 138, 28, 0.16) !important;
  border-color: rgba(255, 138, 28, 0.26) !important;
}

.dashboard-card-intent-chip.vibe,
.badge-secondary,
.av-chip-secondary {
  background: rgba(230, 46, 107, 0.14) !important;
  border-color: rgba(230, 46, 107, 0.24) !important;
}

/* Navigation */
header[aria-label="Primary"] {
  background: rgba(19, 15, 14, 0.94) !important;
  border-bottom: 1px solid var(--av-line) !important;
  box-shadow: 0 22px 64px -50px rgba(0, 0, 0, 0.9) !important;
}

header[aria-label="Primary"] .dropdown-content,
.dropdown-content,
.menu.dropdown-content {
  border: 1px solid var(--av-line) !important;
  background: var(--av-surface-solid) !important;
  color: var(--av-ivory) !important;
  border-radius: 22px !important;
  box-shadow: 0 26px 84px -42px rgba(0, 0, 0, 0.98) !important;
}

header[aria-label="Primary"] .dropdown-content a,
header[aria-label="Primary"] .dropdown-content button,
header[aria-label="Primary"] .dropdown-content label,
header[aria-label="Primary"] .dropdown-content summary {
  color: var(--av-ivory) !important;
  border-radius: 14px !important;
}

header[aria-label="Primary"] .dropdown-content a:hover,
header[aria-label="Primary"] .dropdown-content button:hover,
header[aria-label="Primary"] .dropdown-content label:hover,
header[aria-label="Primary"] .dropdown-content summary:hover {
  background: rgba(184, 92, 69, 0.18) !important;
}

nav[aria-label="Bottom navigation"],
nav[aria-label="Primary mobile navigation"],
.av-mobile-nav {
  background: rgba(19, 15, 14, 0.98) !important;
  border-top: 1px solid var(--av-line) !important;
  box-shadow: 0 -22px 60px -42px rgba(0, 0, 0, 0.98) !important;
}

nav[aria-label="Bottom navigation"] a,
nav[aria-label="Primary mobile navigation"] a,
.av-mobile-nav a {
  color: rgba(251, 244, 236, 0.70) !important;
}

nav[aria-label="Bottom navigation"] a.is-active,
nav[aria-label="Primary mobile navigation"] a.is-active,
.av-mobile-nav a.is-active {
  background: var(--av-gradient-soft) !important;
  color: var(--av-ivory) !important;
}

/* Dashboard discovery */
.dashboard-filter-strip,
.dashboard-alert-card,
.dashboard-meter-card {
  border-radius: 24px !important;
}

.dashboard-discovery-card {
  border-radius: 30px !important;
  overflow: hidden !important;
  background: rgba(19, 15, 14, 0.92) !important;
  border-color: rgba(251, 244, 236, 0.15) !important;
  box-shadow: 0 30px 90px -56px rgba(0, 0, 0, 0.95) !important;
}

.dashboard-discovery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 38px 110px -58px rgba(230, 46, 107, 0.45) !important;
}

.dashboard-discovery-card > .relative:first-child,
.dashboard-card-media {
  min-height: clamp(340px, 58vw, 520px) !important;
  max-height: 560px !important;
  border-radius: 28px 28px 0 0 !important;
}

.dashboard-discovery-card > .relative:first-child img,
.dashboard-card-media img {
  height: clamp(340px, 58vw, 520px) !important;
  min-height: 340px !important;
  max-height: 560px !important;
  object-fit: cover !important;
}

.dashboard-card-body {
  padding: 1rem !important;
}

.dashboard-card-title-row {
  min-width: 0;
}

.dashboard-card-title {
  color: #fff !important;
  font-family: var(--av-font-display) !important;
  font-weight: 800 !important;
}

.dashboard-card-meta,
.dashboard-card-location,
.dashboard-discovery-card p,
.dashboard-discovery-card .text-xs,
.dashboard-discovery-card .text-sm {
  color: rgba(251, 244, 236, 0.74) !important;
}

.dashboard-discovery-card .av-card-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
}

.dashboard-discovery-card .like-btn {
  grid-column: span 2;
}

.dashboard-discovery-card .av-card-action {
  min-height: 42px !important;
  height: 42px !important;
  white-space: nowrap !important;
  font-weight: 800 !important;
}

.dashboard-discovery-card .dashboard-card-dropdown .dropdown-content,
.dashboard-discovery-card .dashboard-why-dropdown .dropdown-content {
  background: var(--av-surface-solid) !important;
  color: var(--av-ivory) !important;
  border: 1px solid var(--av-line) !important;
}

/* Messages and chat */
.messages-page .conversation-item,
.messages-page a[href^="/chat/"],
.chat-thread-panel,
.chat-composer,
.chat-empty {
  border-radius: 24px !important;
}

.chat-composer {
  position: sticky !important;
  bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
  background: rgba(251, 244, 236, 0.97) !important;
  color: var(--av-ink) !important;
  border-color: rgba(36, 24, 23, 0.12) !important;
}

.chat-composer-row {
  align-items: flex-end !important;
}

#chatInput {
  min-height: 46px !important;
  max-height: 132px !important;
  line-height: 1.45 !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  border-radius: 23px !important;
}

.chat-composer button[type="submit"],
.chat-composer .btn[type="submit"] {
  min-height: 46px !important;
}

@media (max-width: 640px) {
  .chat-composer-row {
    gap: 0.5rem !important;
  }

  .chat-composer button[type="submit"],
  .chat-composer .btn[type="submit"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Profile completion and onboarding */
.profile-complete-panel {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.pc-progress {
  gap: 0.55rem !important;
}

.pc-progress span {
  height: 7px !important;
  border-radius: var(--av-radius-pill) !important;
  background: rgba(36, 24, 23, 0.12) !important;
}

.pc-progress span.is-active,
.pc-progress span.is-complete {
  background: var(--av-gradient) !important;
}

/* Public, legal, auth and static pages */
.auth-card,
.legal-shell,
.av-form-card,
.content-panel {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.legal-shell article,
.prose,
.av-static-page p,
.av-static-page li {
  color: var(--av-ivory-soft);
}

.av-static-page h1,
.av-static-page h2,
.av-static-page h3,
.av-form-page h1,
.av-form-page h2,
.av-form-page h3 {
  color: #fff;
}

/* Empty states */
.av-empty-state,
.empty-state,
[id*="EmptyState"],
.no-results,
.chat-empty {
  text-align: center;
}

.av-empty-state h1,
.av-empty-state h2,
.av-empty-state h3,
.empty-state h1,
.empty-state h2,
.empty-state h3,
.no-results h1,
.no-results h2,
.no-results h3 {
  color: #fff !important;
}

.av-empty-state p,
.empty-state p,
.no-results p {
  color: var(--av-ivory-soft) !important;
}

/* Mobile refinements */
@media (max-width: 768px) {
  .dashboard-discovery-card {
    border-radius: 26px !important;
  }

  .dashboard-discovery-card > .relative:first-child,
  .dashboard-card-media,
  .dashboard-discovery-card > .relative:first-child img,
  .dashboard-card-media img {
    height: min(68vh, 470px) !important;
    min-height: 330px !important;
  }

  .dashboard-discovery-card .av-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-discovery-card .like-btn {
    grid-column: span 1;
  }

  .dashboard-discovery-card .av-card-action {
    font-size: 0.76rem !important;
  }

  .card,
  .av-card,
  .av-panel,
  .av-form-card,
  .settings-card,
  .content-panel,
  .legal-shell,
  .modal-box {
    border-radius: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* Final AfroVibe brand and modal contract
   Keeps feedback, account, filters, report, photo, RTC and utility modals on one non-glassy UI. */
.av-brand-wordmark,
.auth-brand-text,
.brand-wordmark,
header[aria-label="Primary"] .av-brand-wordmark,
.av-site-footer .av-brand-wordmark {
  font-family: var(--av-font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
  background: var(--av-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.av-brand-wordmark::selection,
.auth-brand-text::selection,
.brand-wordmark::selection {
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

a:has(.av-brand-wordmark),
a:has(.auth-brand-text),
a:has(.brand-wordmark) {
  text-decoration: none !important;
}

/* Keep the logo lockup consistent wherever a logo image sits next to the name. */
a:has(.av-brand-wordmark) img[alt*="AfroVibe"],
a:has(.auth-brand-text) img[alt*="AfroVibe"],
img[alt="AfroVibe logo"] {
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(251,244,236,.14), 0 12px 34px -24px rgba(255,138,28,.76) !important;
}

.modal,
dialog.modal {
  color: var(--av-ivory) !important;
  z-index: 8000 !important;
}

.modal::backdrop,
dialog.modal::backdrop,
.modal-backdrop {
  background: rgba(5, 4, 4, 0.78) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body [data-av-modal-panel],
html body .modal-box,
html body dialog.modal > .modal-box,
html body .av-modal-panel,
html body .av-modal__panel {
  border: 1px solid rgba(251,244,236,.16) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, #2d1d1a 0%, #201412 54%, #17100f 100%) !important;
  color: var(--av-ivory) !important;
  box-shadow: 0 34px 100px -52px rgba(0,0,0,.98), 0 0 0 1px rgba(255,138,28,.045) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body [data-av-modal-panel]::before,
html body .modal-box::before,
html body .av-modal-panel::before,
html body .av-modal__panel::before {
  display: none !important;
  content: none !important;
}

html body [data-av-modal-panel] h1,
html body [data-av-modal-panel] h2,
html body [data-av-modal-panel] h3,
html body .modal-box h1,
html body .modal-box h2,
html body .modal-box h3,
.av-modal-title {
  color: #fff !important;
  font-family: var(--av-font-display) !important;
  letter-spacing: -0.035em !important;
}

html body [data-av-modal-panel] p,
html body [data-av-modal-panel] li,
html body [data-av-modal-panel] .text-white\/70,
html body [data-av-modal-panel] .text-white\/60,
html body .modal-box p,
.av-modal-copy {
  color: rgba(251,244,236,.76) !important;
}

.av-modal-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: .65rem;
  border: 1px solid rgba(255,138,28,.24);
  border-radius: 999px;
  background: rgba(255,138,28,.11);
  color: #ffd2b1;
  padding: .28rem .7rem;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.av-modal-title {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 900;
}

.av-modal-copy {
  margin-top: .55rem;
  line-height: 1.65;
}

.av-modal-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid rgba(251,244,236,.14);
  border-radius: 999px;
  background: rgba(251,244,236,.08);
  color: rgba(251,244,236,.78);
  cursor: pointer;
  line-height: 1;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.av-modal-close:hover {
  background: rgba(184,92,69,.22);
  color: #fff;
  transform: translateY(-1px);
}

html body [data-av-modal-panel] .input,
html body [data-av-modal-panel] .select,
html body [data-av-modal-panel] .textarea,
html body [data-av-modal-panel] input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']),
html body [data-av-modal-panel] select,
html body [data-av-modal-panel] textarea,
html body .modal-box .input,
html body .modal-box .select,
html body .modal-box .textarea,
html body .modal-box input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']),
html body .modal-box select,
html body .modal-box textarea {
  border: 1px solid rgba(36,24,23,.16) !important;
  background: #fff7ef !important;
  color: var(--av-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(251,244,236,.06) !important;
}

html body [data-av-modal-panel] input::placeholder,
html body [data-av-modal-panel] textarea::placeholder,
html body .modal-box input::placeholder,
html body .modal-box textarea::placeholder {
  color: rgba(122,104,97,.72) !important;
}

.av-field {
  display: grid;
  gap: .45rem;
}

.av-field > span,
html body [data-av-modal-panel] .label-text,
html body .modal-box .label-text {
  color: rgba(251,244,236,.82) !important;
  font-size: .86rem;
  font-weight: 800;
}

.av-modal-actions,
.modal-action {
  align-items: center !important;
  gap: .7rem !important;
}

@media (max-width: 640px) {
  html body [data-av-modal-panel],
  html body .modal-box,
  html body .av-modal-panel,
  html body .av-modal__panel {
    width: min(94vw, 36rem) !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow-y: auto !important;
    border-radius: 24px !important;
    padding: 1.1rem !important;
  }

  .av-modal-actions,
  .modal-action {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .av-modal-actions .btn,
  .modal-action .btn,
  .av-modal-actions label,
  .modal-action label {
    width: 100% !important;
  }
}

/* Profile onboarding uses the same modal skin, with dark selectable cards. */
html body .po-shell {
  background: linear-gradient(180deg, #2d1d1a 0%, #201412 54%, #17100f 100%) !important;
  color: var(--av-ivory) !important;
  border-color: rgba(251,244,236,.16) !important;
}

html body .po-shell h3,
html body .po-shell .text-\[\#201614\] {
  color: #fff !important;
}

html body .po-shell .text-\[\#7A6861\],
html body .po-shell .text-white\/70,
html body .po-shell .text-white\/60 {
  color: rgba(251,244,236,.72) !important;
}

html body .po-choice {
  border-color: rgba(251,244,236,.14) !important;
  background: rgba(251,244,236,.075) !important;
  color: var(--av-ivory) !important;
}

html body .po-choice:hover,
html body .po-choice.po-selected {
  border-color: rgba(255,138,28,.42) !important;
  background: rgba(255,138,28,.13) !important;
  box-shadow: 0 0 0 3px rgba(255,138,28,.11) !important;
}

html body .po-choice .po-choice-title,
html body .po-choice [class*="text-white"] {
  color: var(--av-ivory) !important;
}

html body .po-progress-track {
  background: rgba(251,244,236,.12) !important;
}

html body .po-progress-bar {
  background: var(--av-gradient) !important;
}

/* Feedback and support page messaging */
.av-feedback-modal__panel {
  max-width: 36rem;
}

.av-support-card {
  padding: 1.35rem !important;
  background: linear-gradient(180deg, #2d1d1a 0%, #201412 54%, #17100f 100%) !important;
}

.av-feedback-toast {
  display: block;
  border-radius: 24px;
  border: 1px solid rgba(251,244,236,.14);
  padding: 1rem;
  color: var(--av-ivory);
  background: linear-gradient(180deg, #2d1d1a, #1b1211);
  box-shadow: 0 24px 70px -42px rgba(0,0,0,.95);
}

.av-feedback-toast.hidden {
  display: none !important;
}

.av-feedback-toast--success {
  border-color: rgba(135,201,167,.32);
}

.av-feedback-toast--error {
  border-color: rgba(239,107,107,.40);
  background: linear-gradient(180deg, #331b1b, #1b1111);
}

.av-feedback-toast__icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  flex: 0 0 2rem;
  border-radius: 999px;
  border: 1px solid rgba(251,244,236,.16);
  background: rgba(251,244,236,.08);
  font-size: .9rem;
  font-weight: 900;
}

.av-feedback-toast__icon--success {
  color: var(--av-good);
  border-color: rgba(135,201,167,.34);
}

.av-feedback-toast__icon--error {
  color: #ffd0d0;
  border-color: rgba(239,107,107,.44);
}

/* Account danger-action inline feedback */
.av-account-action-status {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 244, 236, 0.92);
  padding: 0.75rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.45;
}
.av-account-action-status[data-tone="warning"] {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.14);
  color: #fff3d6;
}
.av-account-action-status[data-tone="error"] {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.14);
  color: #ffe4e6;
}

/* Account action modal clarity */
#deactivateDialog input[name="currentPassword"],
#deactivateDialog input[name="confirmationPhrase"],
#deactivateDialog select[name="reason"],
#deactivateDialog textarea[name="details"],
#deleteDialog input[name="currentPassword"],
#deleteDialog input[name="confirmationPhrase"],
#deleteDialog select[name="reason"],
#deleteDialog textarea[name="details"] {
  background: #fff8f1 !important;
  color: #241817 !important;
  border-color: rgba(184, 92, 69, 0.28) !important;
}
#deactivateDialog input::placeholder,
#deactivateDialog textarea::placeholder,
#deleteDialog input::placeholder,
#deleteDialog textarea::placeholder {
  color: rgba(36, 24, 23, 0.58) !important;
}
#deactivateDialog input:focus,
#deactivateDialog select:focus,
#deactivateDialog textarea:focus,
#deleteDialog input:focus,
#deleteDialog select:focus,
#deleteDialog textarea:focus {
  outline: 2px solid rgba(245, 158, 11, 0.38) !important;
  outline-offset: 2px;
}