/**
 * Propzora Dashboard — premium light fintech (black + blue design)
 */

:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --pz-header-height: 64px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  background: var(--pz-white, #fff);
}

body.pz-ds-app {
  --pz-muted: #475569;
  --pz-faint: #5b6779; /* 5.7:1 on white — was #6b7688 (4.4:1 on surface) */
  font-family: var(--pz-font, "Plus Jakarta Sans"), system-ui, sans-serif;
  background: var(--pz-white, #fff);
  color: var(--pz-ink-secondary, #334155);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-bottom: calc(88px + var(--safe-bottom));
}

body.pz-ds-app h1,
body.pz-ds-app h2,
body.pz-ds-app h3,
body.pz-ds-app h4,
body.pz-ds-app .title {
  font-family: var(--pz-font-display, "Plus Jakarta Sans"), sans-serif;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--pz-ink);
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 99px;
}

.app-shell {
  position: relative;
  z-index: 1;
  /* overflow must NOT be hidden/auto here — breaks position:sticky on top-nav */
}

/* Subtle ambient — not AI-product flashy */
#bgOrbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: 0.55;
}

.orb-cyan {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(30, 58, 138, 0.07) 0%, transparent 70%);
  top: -60px;
  right: -40px;
}

/* Clean panel styling */
.glass {
  background: var(--panel);
  border: none;
  box-shadow: 0 2px 8px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.05);
  border-radius: 16px;
  padding: 20px;
}

.glass-gold {
  background: var(--pz-blue-mist);
  border: none;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
  border-radius: 16px;
  padding: 20px;
}

.glass-emerald {
  background: var(--pz-green-soft, #ecfdf5);
  border: none;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
  border-radius: 16px;
  padding: 20px;
}

.glass-red {
  background: var(--pz-danger-soft, #fef2f2);
  border: none;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
  border-radius: 16px;
  padding: 20px;
}

.btn-primary {
  background: var(--pz-blue, #1e3a8a);
  color: #fff;
  font-weight: 600;
  font-family: var(--pz-font, "Plus Jakarta Sans"), sans-serif;
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.15);
  transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  cursor: pointer;
  border-radius: 999px;
}

.btn-primary:hover {
  background: var(--pz-blue-hover, #1e40af);
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-cta {
  background: var(--pz-blue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 14px -4px rgba(30, 58, 138, 0.2);
  cursor: pointer;
  border-radius: 999px;
  border: none;
}

.btn-ghost {
  background: var(--pz-white);
  border: 1px solid var(--pz-line);
  color: var(--pz-ink);
  font-weight: 600;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  cursor: pointer;
  border-radius: 999px;
}

.btn-ghost:hover {
  border-color: var(--pz-blue);
  color: var(--pz-blue);
  background: var(--pz-blue-mist, #eff6ff);
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08);
}

.card-hover:hover {
  box-shadow: var(--pz-shadow-md) !important;
}

.stat-card {
  min-height: 96px;
}

.field {
  width: 100%;
  background: #fff;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius, 12px);
  padding: 14px 16px;
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--pz-ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Force option colors explicitly — some Android/Chrome WebViews render the
   native <select> popup using the OS's own dark-mode setting regardless of
   the page's color-scheme, which can leave option text invisible (dark text
   on an OS-forced dark popup). Setting background/color directly on <option>
   is respected even when the popup chrome itself isn't controllable. */
select.field option,
select.field optgroup {
  background: #fff;
  color: #0f172a;
}

.field:focus {
  border-color: var(--pz-blue);
  box-shadow: 0 0 0 3px var(--pz-blue-soft);
}

.field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--pz-muted);
  margin-bottom: 8px;
}

/* ── Searchable bank picker (replaces long-scroll native <select>) ── */
.pz-bank-picker {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.pz-bank-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}

.pz-bank-picker-trigger > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pz-bank-picker-trigger i {
  color: var(--pz-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.pz-bank-picker-placeholder {
  color: var(--pz-muted);
}

.pz-bank-picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius, 12px);
  box-shadow: var(--pz-shadow-md, 0 8px 24px -8px rgba(15,23,42,0.15));
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 320px;
}

/* .hidden (display:none, no !important) is defined in output.css which
   loads BEFORE this file, so without this override the two same-specificity
   rules resolve by source order and .pz-bank-picker-panel's display:flex
   would win — leaving the panel visibly stuck open at all times. */
.pz-bank-picker-panel.hidden {
  display: none !important;
}

.pz-bank-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pz-line);
  flex-shrink: 0;
}

.pz-bank-picker-search i {
  color: var(--pz-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.pz-bank-picker-search input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--pz-ink);
}

.pz-bank-picker-search input::placeholder {
  color: var(--pz-muted);
}

.pz-bank-picker-list {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
}

.pz-bank-picker-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--pz-ink);
  cursor: pointer;
  transition: background 0.15s;
}

.pz-bank-picker-option:hover,
.pz-bank-picker-option:active {
  background: var(--pz-blue-mist, #eff6ff);
  color: var(--pz-blue);
}

.pz-bank-picker-empty {
  padding: 20px 12px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--pz-muted);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
}

/* forgotPinModal can be opened from withdrawalPinModal (z-index: 110),
   so it must always render above it. The shared .modal-backdrop rule
   above has the same specificity as any z-[N] utility class, and wins
   the cascade by source order — so a plain utility class alone can't
   reliably raise this modal's stacking. This ID-scoped rule guarantees
   it regardless of class order or stylesheet load order. */
/* Stacking order, lowest to highest: page modals (100-120) < payment sheets (9998) < Reset PIN (10050)
   < exit confirmation (10100) < result card (10120) < notifications (10200). Reset PIN has to sit above
   the payment sheets because it is opened from their PIN screens. */
#forgotPinModal {
  z-index: 10050 !important;
}

.modal-sheet,
.modal-center {
  background: var(--pz-white);
  border: none;
  box-shadow: var(--pz-shadow-lg);
}

/* These bracket-value classes (max-h-[85vh] etc.) are Tailwind's
   arbitrary-value syntax, which only exists if Tailwind's JIT compiler
   runs against this file. This project ships a static pre-built CSS
   file instead, so the classes were never generated — every modal
   using them had no real height cap and couldn't scroll, however tall
   its content got. Defining them for real here fixes every modal that
   uses them in one place, not just whichever one gets reported. */
.max-h-\[85vh\] { max-height: 85vh; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[92vh\] { max-height: 92vh; }

.modal-sheet {
  animation: sheetUp 0.4s cubic-bezier(0.32, 0.72, 0, 1) both;
  border-radius: var(--pz-radius-xl) var(--pz-radius-xl) 0 0;
}

.modal-center {
  animation: centerPop 0.4s cubic-bezier(0.32, 0.72, 0, 1) both;
  border-radius: var(--pz-radius-xl);
}

@keyframes sheetUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes centerPop {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-drag-handle {
  width: 40px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 99px;
  margin: 0 auto 20px;
}

/* Security sheet: smooth scrolling on phones.
   - Sized in svh (the stable viewport height). Plain vh, and dvh, change size
     when the mobile address bar collapses, which made the sheet grow and
     shrink while a swipe started.
   - The page behind is locked while the sheet is open, so the first swipe
     scrolls the sheet instead of being handed to the page.
   - The slide-up animation no longer leaves a transform on the scrolling
     element once it has finished, which avoids scroll jank on iOS. */
html:has(#securityModal:not(.hidden)) {
  overflow: hidden;
  overscroll-behavior: none;
}

#securityModal {
  overscroll-behavior: contain;
}

#securityModal .modal-sheet {
  animation-fill-mode: backwards;
}

/* Notifications sheet: with the Push Notifications row added it can be taller
   than a short phone screen. Cap it to the screen and let it scroll inside,
   with the page behind locked so swipes scroll the sheet, not the page. */
html:has(#notifPrefModal:not(.hidden)) {
  overflow: hidden;
  overscroll-behavior: none;
}

#notifPrefModal {
  overscroll-behavior: contain;
}

#notifPrefModal .modal-sheet {
  max-height: 90vh;
  max-height: 90svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  animation-fill-mode: backwards;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* Bottom navigation — signature navy command bar, distinct from the
   light app chrome around it (brand chrome intentionally ignores the
   light/dark page theme, the way a premium fintech app's tab bar
   often does). Floats slightly off the screen edges with a gold
   hairline and soft brand-tinted glow instead of a flat blur bar. */
.pz-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 10px calc(10px + var(--safe-bottom));
  pointer-events: none;
}

.pz-bottom-nav__inner {
  pointer-events: auto;
  background: linear-gradient(170deg, #14213d 0%, #0d1b34 48%, #0a1428 100%);
  border-radius: 22px;
  box-shadow:
    0 18px 40px -12px rgba(8, 15, 30, 0.5),
    0 2px 0 rgba(251, 191, 36, 0.14) inset,
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  position: relative;
  overflow: hidden;
}

.pz-bottom-nav__inner::before {
  /* gold hairline tracing the top edge of the bar */
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.55) 50%, transparent);
}

.pz-nav-brand {
  display: none;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 11px 0 9px;
  color: rgba(226, 232, 240, 0.5);
  cursor: pointer;
  position: relative;
  transition: color 0.25s var(--pz-ease, ease);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
  flex: 1;
}

.bottom-nav-item__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 26px;
  border-radius: 10px;
  transition: background 0.25s var(--pz-ease, ease), box-shadow 0.25s var(--pz-ease, ease), transform 0.25s var(--pz-ease, ease);
}

.bottom-nav-item i {
  font-size: var(--text-md);
  transition: transform 0.25s var(--pz-ease, ease);
}

.bottom-nav-item span:last-child {
  transition: color 0.25s var(--pz-ease, ease), font-weight 0.25s var(--pz-ease, ease);
}

.bottom-nav-item.active {
  color: #ffffff;
}

.bottom-nav-item.active .bottom-nav-item__glyph {
  background: rgba(251, 191, 36, 0.16);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.28) inset, 0 4px 14px -4px rgba(251, 191, 36, 0.45);
  transform: translateY(-1px);
}

.bottom-nav-item.active i {
  color: #fbbf24;
  transform: translateY(-1px) scale(1.05);
}

.bottom-nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
}

.top-nav {
  /* position:sticky was unreliable on some mobile browsers/webviews —
     the header would scroll away with the page content instead of
     staying put. Switched to position:fixed, the same proven approach
     already used by .pz-bottom-nav below. Content is compensated with
     matching top padding on <main> (see padding-top rule further down). */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--pz-line);
  min-height: var(--pz-header-height);
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  width: 100%;
}

main.max-w-screen-md {
  /* Compensates for .top-nav now being position:fixed and out of
     normal document flow, so page content doesn't start underneath it.
     !important because Tailwind's .py-5 utility class (also setting
     padding-top) has equal-or-higher specificity and loads earlier —
     without it, this rule would silently lose the cascade. */
  padding-top: calc(var(--pz-header-height) + var(--safe-top) + 20px) !important;
}

.top-nav > div {
  width: 100%;
}

.quick-scroll {
  display: flex;
  gap: var(--pz-1, 8px);
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.quick-scroll::-webkit-scrollbar {
  display: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}

.badge-cyan,
.badge-blue {
  background: var(--pz-blue-mist);
  color: var(--pz-blue);
  border: 1px solid rgba(30, 58, 138, 0.15);
}

.badge-emerald {
  background: var(--pz-green-soft);
  color: var(--pz-green);
  border: 1px solid rgba(4, 120, 87, 0.15);
}

.badge-red {
  background: rgba(220, 38, 38, 0.1);
  color: var(--pz-danger);
  border: 1px solid rgba(220, 38, 38, 0.15);
}

.badge-amber {
  background: rgba(180, 83, 9, 0.08);
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.2);
}

.notif-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: var(--pz-danger);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.section-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--pz-ink);
  margin-bottom: var(--pz-2, 16px);
  letter-spacing: -0.02em;
}

.amount-display {
  font-family: var(--pz-font-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--pz-ink);
  font-size: var(--text-lg);
}

#toastContainer {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: calc(100% - 32px);
  max-width: 380px;
}

.toast {
  padding: 12px 18px;
  border-radius: var(--pz-radius);
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  box-shadow: var(--pz-shadow-md);
  animation: toastIn 0.35s ease both;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.toast-success {
  background: var(--pz-green-soft);
  color: var(--pz-green);
}

.toast-error {
  background: var(--pz-danger-soft);
  color: var(--pz-danger);
}

.toast-info {
  background: var(--pz-blue-mist);
  color: var(--pz-blue);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #e2e8f0;
  border-top-color: var(--pz-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#notificationPanel {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  background: #fff !important;
  border-left: 1px solid var(--pz-line) !important;
  box-shadow: -4px 0 16px rgba(15, 23, 42, 0.06) !important;
}

#notificationPanel.open {
  transform: translateX(0);
}

#splash {
  background: var(--pz-white) !important;
}

/* AI tab — utility, not hero */
#ai.pz-tab-utility .section-title {
  font-size: var(--text-md);
  color: var(--pz-muted);
}

#aiChat {
  background: var(--pz-surface) !important;
  border: none;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
  color: var(--pz-ink, #0f172a) !important;
}

#aiChat .ai-reply {
  background: #f1f5f9 !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
  color: var(--pz-ink) !important;
}

#aiChat .ai-reply strong {
  color: var(--pz-ink) !important;
}

.pz-bottom-nav__inner {
  overflow-x: visible;
  width: 100%;
}

.pz-bottom-nav__inner::-webkit-scrollbar {
  display: none;
}

.pz-bottom-nav .bottom-nav-item {
  flex: 1;
  min-width: 0;
}

/* Light-theme filter bar */
body.pz-ds-app .pz-filter-bar {
  background: var(--pz-white);
  border: none;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
}

body.pz-ds-app .pz-filter-chip {
  color: var(--pz-muted);
}

body.pz-ds-app .pz-filter-chip.active {
  color: var(--pz-blue);
  background: var(--pz-blue-mist);
  border-color: #bfdbfe;
}

body.pz-ds-app .pz-search-input {
  background: var(--pz-surface);
  border-color: var(--pz-line);
  color: var(--pz-ink);
}
body.pz-ds-app .pz-search-wrap {
  position: relative;
  flex: 1;
  min-width: 160px;
}
body.pz-ds-app .pz-search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pz-faint);
  pointer-events: none;
}

body.pz-ds-app .pz-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-radius: var(--pz-radius-lg);
}

body.pz-ds-app .pz-filter-chip {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .pz-deal-card:hover,
  .glass.card-hover:hover {
    transform: translateY(-1px);
  }
}

/* ── Live dot (hero panel) ─────────────────────────────────── */
.pz-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pz-blue);
  box-shadow: 0 0 0 3px var(--pz-blue-mist);
  animation: pulse-blue 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-blue {
  0%, 100% { box-shadow: 0 0 0 3px var(--pz-blue-mist); }
  50%       { box-shadow: 0 0 0 6px rgba(30, 58, 138, 0.08); }
}

/* ── Notification panel ────────────────────────────────────── */
.pz-notif-item {
  border-radius: var(--pz-radius-lg);
  padding: 14px;
  border: 1px solid var(--pz-line-soft);
  border-left: 3px solid var(--pz-blue);
  background: var(--pz-white);
}

.pz-notif-item--read {
  border-left-color: var(--pz-line-soft);
  background: var(--pz-surface);
}

/* ═══════════════════════════════════════════════════════════════
   MOCKUP REDESIGN — Balance Card, Quick Actions, Overview
   ═══════════════════════════════════════════════════════════════ */

/* ── Balance Card ──────────────────────────────────────────────── */
.pz-balance-card {
  background: linear-gradient(145deg, var(--pz-blue) 0%, var(--pz-blue-hover) 55%, var(--pz-blue-hover) 100%);
  border-radius: 20px;
  padding: 24px 20px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px -8px rgba(30,58,138,0.45);
  transition: box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}

/* Subtle radial glow top-left */
.pz-balance-card::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Wallet illustration top-right */
.pz-balance-card__illustration {
  position: absolute;
  top: 16px;
  right: 16px;
}

.pz-wallet-icon {
  width: 67px;
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pz-wallet-icon svg {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
}

.pz-wallet-check {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #5eead4 0%, #0d9488 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-xs);
  border: 2px solid #1e3a8a;
}

/* Shown only when the account's identity (KYC) is verified. */
.pz-wallet-check[hidden] { display: none; }

.pz-balance-card__label #balanceToggle {
  opacity: 0.85 !important;
  padding: 4px !important;
  margin-left: 4px !important;
  border-radius: 6px !important;
}
.pz-balance-card__label #balanceToggle:hover { opacity: 1 !important; }
.pz-balance-card__label #balanceToggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pz-balance-card__label {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.94);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.pz-balance-card__amount {
  font-family: var(--pz-font-display);
  font-size: 1.65rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 20px;
  padding-right: 80px;
  font-variant-numeric: tabular-nums; /* space for illustration */
}

.pz-balance-card__currency {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  vertical-align: baseline;
  margin-right: 2px;
  line-height: 1;
}

.pz-balance-card__divider {
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 0 -20px;
}

.pz-balance-card__footer {
  display: flex;
  align-items: center;
  padding: 14px 0;
  gap: 0;
}

.pz-balance-card__stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: rgba(255,255,255,0.8);
  flex: 1;
}

.pz-balance-card__stat-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pz-balance-card__stat i.fa-lock,
.pz-balance-card__stat i.fas.fa-lock {
  font-size: var(--text-sm);
  opacity: 0.9;
}

.pz-balance-card__stat--link {
  cursor: pointer;
  justify-content: flex-end;
  flex: 1;
}

.pz-balance-card__sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.2);
  margin: 0 12px;
  flex-shrink: 0;
}

/* ── Section title ─────────────────────────────────────────────── */
.pz-home-section-title {
  font-family: var(--pz-font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--pz-ink);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

/* ── Quick Actions 2×2 grid ────────────────────────────────────── */
.pz-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.04);
  overflow: hidden;
}

.pz-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--pz-line-soft);
  border-bottom: 1px solid var(--pz-line-soft);
  padding: 18px 8px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.pz-quick-btn:nth-child(3n) { border-right: none; }
.pz-quick-btn:nth-last-child(-n+3):nth-child(3n+1),
.pz-quick-btn:nth-last-child(-n+2):nth-child(3n+2),
.pz-quick-btn:last-child { border-bottom: none; }

.pz-quick-btn:active {
  background: var(--pz-blue-mist);
}

.pz-quick-btn__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(30,58,138,0.12);
  color: var(--pz-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}

/* FAQ accordion inside the FAQ modal */
.pz-faq-item {
  border-bottom: 1px solid var(--pz-line-soft);
  padding: 14px 0;
}

.pz-faq-item:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}

.pz-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-semi);
  color: var(--pz-ink);
}

.pz-faq-item summary::-webkit-details-marker {
  display: none;
}

.pz-faq-item summary i {
  font-size: 0.7rem;
  color: var(--pz-faint);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.pz-faq-item[open] summary i {
  transform: rotate(180deg);
  color: var(--pz-blue);
}

.pz-faq-item p {
  margin-top: 8px;
  color: var(--pz-muted);
  line-height: 1.5;
  font-size: var(--text-sm);
}

.pz-quick-btn__label {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--pz-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-family: var(--pz-font-display);
}

/* ── Premium Properties Carousel ──────────────────────────────── */
.pz-premium-carousel-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 16px;
  /* Allow touch scroll to propagate to track */
  touch-action: pan-x;
}

.pz-premium-track {
  display: flex;
  gap: 12px;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  cursor: grab;
  user-select: none;
}

.pz-premium-track:active {
  cursor: grabbing;
}

/* Each card */
.pz-premium-card {
  /* Mobile: 2 full cards per row */
  flex: 0 0 calc((100% - 12px) / 2);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.05);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.18s, transform 0.18s;
}

@media (min-width: 768px) {
  .pz-premium-card {
    /* iPad and PC: 3 full cards per row */
    flex: 0 0 calc((100% - 24px) / 3);
  }
}

.pz-premium-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(15,23,42,0.06);
}

/* Cover image area */
.pz-premium-card__img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  background: var(--pz-surface, #f8fafc);
}

.pz-premium-card__img-placeholder {
  width: 100%;
  height: 130px;
  background: var(--pz-blue-mist, #eff6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pz-blue-soft, #dbeafe);
  font-size: 2rem;
}

/* Badge row pinned to top of image */
.pz-premium-card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  gap: 5px;
  align-items: flex-start;
  pointer-events: none;
}

.pz-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #1e3a8a;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  line-height: 1;
}

.pz-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(16,185,129,0.9);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  line-height: 1;
}

/* Card body */
.pz-premium-card__body {
  min-width: 0;
  padding: 10px 12px 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Whole card is the link now (no button), so the body carries the bottom padding */
.pz-premium-card__body:last-child { padding-bottom: 12px; }

.pz-premium-card__title {
  font-family: var(--pz-font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--pz-ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
  /* One line only: a long title ends in an ellipsis instead of wrapping. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  margin: 0;
}

.pz-premium-card__price {
  font-family: var(--pz-font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--pz-blue);
  margin: 2px 0 0;
}

.pz-premium-card__meta {
  font-size: 10px;
  color: var(--pz-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 1px 0 0;
}

.pz-premium-card__specs {
  display: flex;
  gap: 10px;
  margin: 3px 0 0;
}

.pz-premium-card__specs span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #475569;
}

.pz-premium-card__specs i { font-size: 9px; color: #64748b; }

.pz-premium-card__type {
  font-size: 10px;
  color: var(--pz-muted, #6b7280);
  text-transform: capitalize;
  margin: 0;
}

/* CTA button in card */
.pz-premium-card__cta {
  display: block;
  width: calc(100% - 24px);
  margin: 8px 12px 12px;
  padding: 8px 0;
  background: var(--pz-blue);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  text-align: center;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.18s;
  border: none;
  cursor: pointer;
}

.pz-premium-card__cta:hover,
.pz-premium-card__cta:active {
  background: var(--pz-blue-hover, #1e40af);
}

/* Empty state */
.pz-premium-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px;
  background: #fff;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}

/* ── Overview Panel ────────────────────────────────────────────── */
.pz-overview-panel {
  background: #fff;
  border: none;
  border-radius: 16px;
  display: flex;
  align-items: center;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.05);
}

.pz-overview-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pz-overview-stat__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.pz-overview-stat__icon--lock {
  background: rgba(30,58,138,0.08);
  color: var(--pz-blue);
}

.pz-overview-stat__icon--deals {
  background: rgba(5,150,105,0.1);
  color: #059669;
}

.pz-overview-stat__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--pz-muted);
  letter-spacing: 0.01em;
}

.pz-overview-stat__value {
  font-family: var(--pz-font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--pz-ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.pz-overview-sep {
  width: 1px;
  height: 44px;
  background: var(--pz-line-soft);
  margin: 0 20px;
  flex-shrink: 0;
}

/* ── Top nav: hide greeting on non-dashboard tabs ────────────── */
#navGreeting.hidden,
#settingsNavBtn.hidden {
  display: none !important;
}

/* ── Top nav greeting: never taller than two lines ───────────────
   The left group takes the space the icons leave and may shrink; the
   greeting is clamped to two lines (landing-page-style ellipsis is the
   last resort — the script shortens a long name to the first name first). */
.pz-topnav-inner > div:first-child { flex: 1 1 auto; min-width: 0; }
.pz-topnav-inner > div:last-child  { flex-shrink: 0; }
#navGreeting { min-width: 0; }
#navGreetingText {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════
   ACCOUNT / SETTINGS PAGE — Full mockup redesign
   ═══════════════════════════════════════════════════════════════ */

/* ── Profile Card ─────────────────────────────────────────────── */
.pz-acct-profile-card {
  background: #fff;
  border: none;
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.05);
  -webkit-tap-highlight-color: transparent;
}

.pz-acct-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.pz-acct-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1e3a8a;
  color: #fff;
  font-family: var(--pz-font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
}

.pz-acct-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.pz-acct-avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-xs);
}

.pz-acct-profile-info {
  flex: 1;
  min-width: 0;
}

.pz-acct-profile-name {
  font-family: var(--pz-font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--pz-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 4px;
}

.pz-acct-verified-pill {
  display: none;
  align-items: center;
  gap: 5px;
  background: rgba(5,150,105,0.1);
  border: 1px solid rgba(5,150,105,0.2);
  border-radius: 999px;
  padding: 2px 9px 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: #059669;
  width: fit-content;
  margin-bottom: 6px;
}

.pz-acct-verified-pill i {
  font-size: var(--text-xs);
}

.pz-acct-profile-meta {
  font-size: var(--text-sm);
  color: var(--pz-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.pz-acct-profile-meta i {
  font-size: var(--text-xs);
  color: #64748b;
  width: 12px;
  text-align: center;
}

.pz-acct-profile-meta-text {
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pz-acct-profile-chevron {
  color: #8494a9;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

/* ── Shared section card ─────────────────────────────────────── */
.pz-acct-section-card {
  background: #fff;
  border: none;
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.05);
}

.pz-acct-section-title {
  font-family: var(--pz-font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--pz-ink);
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

/* ── Account Status grid ─────────────────────────────────────── */
.pz-acct-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.pz-acct-status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.pz-acct-status-icon-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(30,58,138,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 1.1rem;
  transition: background 0.2s, color 0.2s;
}

.pz-acct-status-icon-wrap.pz-acct-status-verified {
  background: rgba(5,150,105,0.1);
  color: #059669;
}

.pz-acct-status-check {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid #fff;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-xs);
}

.pz-acct-status-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--pz-ink);
  letter-spacing: -0.01em;
}

.pz-acct-status-state {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  color: #64748b;
}

/* ── Menu list ───────────────────────────────────────────────── */
.pz-acct-menu {
  padding: 0;
}

.pz-acct-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--pz-line-soft);
  padding: 15px 16px;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.pz-acct-menu-item--last {
  border-bottom: none;
}

.pz-acct-menu-item:active {
  background: var(--pz-surface);
}

.pz-acct-menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(30,58,138,0.08);
  color: var(--pz-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  flex-shrink: 0;
}

.pz-acct-menu-icon--danger {
  background: rgba(220,38,38,0.08);
  color: #dc2626;
}

.pz-acct-menu-text {
  flex: 1;
  min-width: 0;
}

.pz-acct-menu-label {
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--pz-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.pz-acct-menu-sub {
  font-size: var(--text-sm);
  color: var(--pz-muted);
  margin-top: 2px;
}

.pz-acct-menu-chevron {
  color: #8494a9;
  font-size: var(--text-xs);
  flex-shrink: 0;
}

/* Sign out row */
.pz-acct-signout-label {
  color: #dc2626 !important;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL WIRING — Toggle switches, Notification rows
   ═══════════════════════════════════════════════════════════════ */

/* ── iOS-style toggle switch ─────────────────────────────────── */
.pz-toggle-wrap {
  position: relative;
  flex-shrink: 0;
}

.pz-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.pz-toggle-track {
  width: 48px;
  height: 28px;
  background: #e2e8f0;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.22s;
}

.pz-toggle-input:checked + .pz-toggle-track {
  background: var(--pz-blue);
}

.pz-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
}

.pz-toggle-input:checked + .pz-toggle-track .pz-toggle-thumb {
  transform: translateX(20px);
}

/* ── Notification preference row ─────────────────────────────── */
.pz-notif-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--pz-line-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

.pz-notif-row:active {
  background: var(--pz-surface);
}

/* Make the track clickable via the label */
.pz-notif-row .pz-toggle-track {
  pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════
   BALANCE CARD — Add Money / Withdraw action buttons
   ═══════════════════════════════════════════════════════════════ */
.pz-balance-card__action {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.9);
  font-family: var(--pz-font);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  padding: 14px 0;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.01em;
}

.pz-balance-card__action:active { opacity: 0.7; }

.pz-balance-card__action-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   FEE CALCULATOR — ported from landing-new.css (exact match)
   ═══════════════════════════════════════════════════════════════ */
.pz-banner{background:#1e3a8a;padding:20px 22px;border-radius:16px 16px 0 0;}
.pz-banner-title{font-size:var(--text-lg);font-weight:var(--fw-bold);color:#fff;}
.pz-grid{display:grid;grid-template-columns:1fr;gap:12px;}
@media(min-width:600px){.pz-grid{grid-template-columns:1fr 1fr;}}
.pz-left{background:#fff;border-radius:16px;box-shadow:0 2px 16px rgba(0,0,0,0.07);overflow:hidden;}
.pz-left-body{padding:18px 20px;}
.pz-right{background:#1e3a8a;border-radius:16px;padding:20px;position:relative;overflow:hidden;}
.pz-right::before{content:'';position:absolute;top:-40px;right:-40px;width:150px;height:150px;background:rgba(255,255,255,0.05);border-radius:50%;}
.pz-right::after{content:'';position:absolute;bottom:-30px;left:-30px;width:100px;height:100px;background:rgba(255,255,255,0.04);border-radius:50%;}
.pz-field{margin-bottom:14px;}
.pz-lbl{display:block;font-size:var(--text-xs);font-weight:var(--fw-semi);color:#374151;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px;}
.pz-irow{display:flex;align-items:center;border:1.5px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff;transition:border 0.2s;}
.pz-irow:focus-within{border-color:#1e3a8a;}
.pz-pfx{padding:0 12px;font-size:var(--text-base);font-weight:var(--fw-semi);color:#1e3a8a;background:#f8f9ff;border-right:1.5px solid #e5e7eb;height:42px;display:flex;align-items:center;flex-shrink:0;}
.pz-irow input{border:none;outline:none;background:transparent;padding:0 12px;font-size:var(--text-base);color:#0a0a1a;width:100%;height:42px;}
.pz-plain{width:100%;height:42px;border:1.5px solid #e5e7eb;border-radius:10px;padding:0 12px;font-size:var(--text-base);color:#0a0a1a;background:#fff;outline:none;transition:border 0.2s;}
.pz-plain:focus{border-color:#1e3a8a;}
.pz-trow{display:flex;align-items:center;gap:10px;padding:11px 13px;background:#f8f9ff;border-radius:10px;margin-bottom:14px;border:1.5px solid #e8eaf5;}
.pz-sw{position:relative;width:42px;height:23px;flex-shrink:0;}
.pz-sw input{opacity:0;width:0;height:0;}
.pz-thumb{position:absolute;inset:0;background:#d1d5db;border-radius:100px;transition:0.25s;cursor:pointer;}
.pz-thumb:before{content:'';position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;border-radius:50%;transition:0.25s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
.pz-sw input:checked+.pz-thumb{background:#1e3a8a;}
.pz-sw input:checked+.pz-thumb:before{transform:translateX(19px);}
.pz-swlbl{font-size:var(--text-base);font-weight:var(--fw-semi);color:#374151;}
.pz-agent{overflow:hidden;transition:max-height 0.3s,opacity 0.3s;max-height:200px;opacity:1;}
.pz-agent.off{max-height:0;opacity:0;pointer-events:none;}
.pz-radios{display:flex;gap:8px;}
.pz-radio{flex:1;display:flex;align-items:center;gap:8px;padding:10px 13px;border:1.5px solid #e5e7eb;border-radius:10px;cursor:pointer;transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;}
.pz-radio.on{border-color:#1e3a8a;background:#eff6ff;}
.pz-rtag{font-size:var(--text-xs);font-weight:var(--fw-semi);letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:16px;}
.pz-big{font-size:var(--text-xl);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;color:#fff;line-height:1;margin-bottom:4px;position:relative;z-index:1;}
.pz-biglbl{font-size:var(--text-sm);color:rgba(255,255,255,0.6);margin-bottom:16px;position:relative;z-index:1;}
.pz-bwrap{margin-bottom:16px;position:relative;z-index:1;}
.pz-blbl{display:flex;justify-content:space-between;font-size:var(--text-xs);color:rgba(255,255,255,0.55);margin-bottom:6px;}
.pz-btrack{height:6px;background:rgba(255,255,255,0.15);border-radius:100px;overflow:hidden;}
.pz-bfill{height:100%;background:rgba(255,255,255,0.9);border-radius:100px;transition:width 0.5s ease;width:0%;}
.pz-div{height:1px;background:rgba(255,255,255,0.12);margin:12px 0;position:relative;z-index:1;}
.pz-rrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;position:relative;z-index:1;}
.pz-rlbl{font-size:var(--text-sm);color:rgba(255,255,255,0.6);}
.pz-rval{font-size:var(--text-base);font-weight:var(--fw-semi);color:#fff;}
.pz-rval.green{color:#6ee7b7;}
.pz-note{font-size:var(--text-xs);color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.08);border-radius:8px;padding:10px 12px;margin-top:12px;line-height:1.6;position:relative;z-index:1;}
.pz-note strong{color:rgba(255,255,255,0.85);}
.pz-seal{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.12);position:relative;z-index:1;}
.pz-seal span{font-size:var(--text-xs);color:rgba(255,255,255,0.45);}
.pz-placeholder{font-size:var(--text-base);color:rgba(255,255,255,0.35);text-align:center;padding:28px 0;position:relative;z-index:1;line-height:1.6;}
.pz-placeholder strong{display:block;font-size:var(--text-xl);color:rgba(255,255,255,0.15);margin-bottom:8px;}
/**
 * Propzora — Verify document page (redesigned result states)
 */

.verify-page {
  --pz-muted: #475569;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---- Loading state ---- */
.vr-loading {
  text-align: center;
  padding: 32px 0;
  color: var(--pz-muted);
  font-size: 0.8125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.vr-loading__spin {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 2px solid #c7d4f0;
  border-top-color: #1e3a8a;
  border-radius: 50%;
  animation: vrSpin 0.8s linear infinite;
}

@keyframes vrSpin {
  to { transform: rotate(360deg); }
}

/* ---- Result card ---- */
@keyframes vrFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vr-card {
  margin-top: 20px;
  border-radius: 16px;
  border: none;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(15,23,42,0.08), 0 8px 32px rgba(15,23,42,0.05);
  overflow: hidden;
  animation: vrFadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---- Card header ---- */
.vr-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid #f5f5f4;
}

.vr-logo-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  object-fit: contain;
}

.vr-logo-text {
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
  letter-spacing: -0.02em;
}

.vr-id-tag {
  margin-left: auto;
  font-family: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 10.5px;
  color: #5b6474;
  background: #f4f4f2;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid #e8e8e6;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ---- Document preview ---- */
.vr-doc-preview {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f0f0ed;
  border-bottom: 1px solid #f0f0ee;
}

.vr-doc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vr-doc-img--blur {
  filter: blur(1.5px);
  transform: scale(1.02);
}

.vr-doc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 14px;
}

.vr-doc-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.88);
  color: #4a4c57;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 99px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(4px);
}

.vr-doc-stamp {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(-18deg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  padding: 5px 14px;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
}

.vr-doc-stamp--verified {
  color: #1e3a8a;
  border-color: #1e3a8a;
  background: rgba(255,255,255,0.7);
}

.vr-doc-stamp--flagged {
  color: #7a1f1f;
  border-color: #7a1f1f;
  background: rgba(255,255,255,0.7);
}

/* ---- Card body ---- */
.vr-body {
  padding: 20px 18px 18px;
}

/* ---- Status pill ---- */
.vr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  border: 1px solid;
}

.vr-pill--verified {
  background: #eef2fb;
  color: #1e3a8a;
  border-color: #c7d4f0;
}

.vr-pill--flagged,
.vr-pill--rejected {
  background: #fdf0f0;
  color: #7a1f1f;
  border-color: #e8b4b4;
}

.vr-pill--pending {
  background: #fdf6ed;
  color: #7a4400;
  border-color: #e8c88a;
}

/* ---- Warning box (flagged/rejected) ---- */
.vr-warning {
  font-size: 13px;
  font-weight: 500;
  color: #7a1f1f;
  background: #fdf0f0;
  border: 1px solid #e8b4b4;
  border-radius: 7px;
  padding: 10px 12px;
  line-height: 1.55;
  margin-bottom: 16px;
}

/* ---- Metadata table ---- */
.vr-meta {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.vr-meta tr {
  border-top: 1px solid #f0f0ee;
}

.vr-meta tr:first-child {
  border-top: none;
}

.vr-meta td {
  padding: 9px 0;
  vertical-align: middle;
}

.vr-meta-k {
  color: #5b6474;
  font-weight: 400;
  white-space: nowrap;
  padding-right: 12px;
}

.vr-meta-v {
  text-align: right;
  font-weight: 500;
  color: #111318;
}

.vr-meta-v--notes {
  text-align: right;
  font-size: 12px;
  line-height: 1.55;
  color: #4a4c57;
}

.vr-meta-v--title-clean   { color: #065f46; }
.vr-meta-v--title-encumbered { color: #7a4400; }
.vr-meta-v--title-disputed  { color: #7a1f1f; }

/* ---- Buttons ---- */
.vr-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.vr-btn {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease, opacity 0.12s ease;
  white-space: nowrap;
  text-decoration: none;
}

.vr-btn:active { transform: scale(0.98); }

.vr-btn--primary {
  background: #1e3a8a;
  color: #ffffff;
  border: 1px solid #0f2460;
}
.vr-btn--primary:hover { background: #0f2460; }

.vr-btn--secondary {
  background: #ffffff;
  color: #4a4c57;
  border: 1px solid #e8e8e6;
}
.vr-btn--secondary:hover { background: #f4f4f2; }

.vr-btn--danger {
  background: #fdf0f0;
  color: #7a1f1f;
  border: 1px solid #e8b4b4;
}
.vr-btn--danger:hover { background: #f9e5e5; }

/* ---- Notify row (pending) ---- */
.vr-notify-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.vr-notify-input {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid #e8e8e6;
  border-radius: 10px;
  outline: none;
  color: #111318;
  background: #ffffff;
  min-width: 0;
  transition: border-color 0.15s;
}

.vr-notify-input:focus {
  border-color: #1e3a8a;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}

.vr-btn--notify {
  flex: none;
  white-space: nowrap;
}

/* ---- Note box (verified / pending) ---- */
.vr-note {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.6;
  color: inherit;
}

.vr-note--verified {
  background: #eef2fb;
  color: #1e3a8a;
  border: 1px solid #c7d4f0;
}

.vr-note--pending {
  background: #fdf6ed;
  color: #7a4400;
  border: 1px solid #e8c88a;
}

/* ---- Center state (not found) ---- */
.vr-center-state {
  padding: 36px 22px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.vr-state-icon { margin-bottom: 16px; }

.vr-center-headline {
  font-size: 15px;
  font-weight: 600;
  color: #111318;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.vr-center-body {
  font-size: 13px;
  color: #4a4c57;
  line-height: 1.6;
  margin: 0 0 4px;
  max-width: 280px;
}

.vr-center-sub {
  font-size: 12px;
  color: #5b6474;
  margin: 0 0 20px;
}

/* ---- Ledger footer ---- */
.vr-foot {
  border-top: 1px solid #f0f0ee;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vr-foot-left {
  font-size: 10.5px;
  color: #5b6474;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vr-foot-right {
  font-family: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 10px;
  color: #5b6474;
}

.vr-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vr-dot--green { background: #22c55e; }
.vr-dot--red   { background: #e05252; }
.vr-dot--amber { background: #f59e0b; }
.vr-dot--gray  { background: #9a9ca8; }

/* ── Danger action button (dispute, logout, disable 2FA) ── */
.pz-btn-danger {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid #fecaca;
  color: var(--pz-danger);
  font-family: var(--pz-font);
}

/* ── AI chat area ── */
/* ══ AI SECTION — full-height chat ══ */
/* When the AI chat tab is open, the page itself must not scroll — only
   .pz-ai-messages should. Otherwise the body's reserved bottom-nav padding
   leaves extra scrollable room and the whole section (including the input
   bar) drags along with page scroll instead of staying pinned. */
body.pz-ai-active {
  overflow: hidden;
  height: 100dvh;
  padding-bottom: 0 !important;
}

.pz-ai-section {
  position: fixed;
  top: calc(var(--pz-header-height) + var(--safe-top));
  bottom: calc(88px + var(--safe-bottom));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pz-surface-2);
  margin: 0;
  padding: 0;
  z-index: 40;
}
/* When hidden, AI section must not affect layout */
.pz-ai-section.hidden {
  display: none !important;
}
.pz-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--pz-white);
  border-bottom: 1px solid var(--pz-line-soft);
  flex-shrink: 0;
}
.pz-ai-header__left { display:flex;align-items:center;gap:10px; }
.pz-ai-header__avatar {
  width:40px;height:40px;border-radius:50%;
  background:rgba(30,58,138,0.10);color:var(--pz-blue);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
}
.pz-ai-header__name { font-size:0.9375rem;font-weight:700;color:var(--pz-ink);margin:0; }
.pz-ai-header__status { display:flex;align-items:center;gap:5px;font-size:0.75rem;color:#22c55e;font-weight:500; }
.pz-ai-status-dot { width:7px;height:7px;border-radius:50%;background:#22c55e; }
.pz-ai-new-btn {
  display:flex;align-items:center;gap:6px;
  font-size:0.8125rem;font-weight:700;
  color:var(--pz-blue);background:var(--pz-blue-mist);
  border:none;border-radius:20px;padding:8px 14px;cursor:pointer;
}
.pz-ai-messages {
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
}
.pz-ai-messages::-webkit-scrollbar { display:none; }
.pz-ai-bubble {
  max-width:82%;padding:12px 14px;border-radius:18px;
  font-size:0.9rem;line-height:1.6;word-break:break-word;
}
.pz-ai-bubble--ai {
  background:var(--pz-white);color:var(--pz-ink);
  border:1px solid var(--pz-line-soft);
  border-bottom-left-radius:4px;align-self:flex-start;
  box-shadow:0 1px 3px rgba(15,23,42,0.06);
}
.pz-ai-bubble--user {
  background:#1e3a8a;color:#fff;
  border-bottom-right-radius:4px;align-self:flex-end;
}
.pz-ai-typing {
  display:flex;align-items:center;gap:5px;
  padding:12px 16px;background:var(--pz-white);
  border:1px solid var(--pz-line-soft);
  border-radius:18px;border-bottom-left-radius:4px;
  align-self:flex-start;width:54px;
}
.pz-ai-typing span {
  width:7px;height:7px;border-radius:50%;background:#94a3b8;
  animation:pzDot 1.2s infinite ease-in-out;
}
.pz-ai-typing span:nth-child(2){animation-delay:0.2s;}
.pz-ai-typing span:nth-child(3){animation-delay:0.4s;}
@keyframes pzDot{
  0%,80%,100%{transform:scale(0.7);opacity:0.4;}
  40%{transform:scale(1);opacity:1;}
}
.pz-ai-input-bar {
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:var(--pz-white);
  border-top:1px solid var(--pz-line-soft);flex-shrink:0;
}
.pz-ai-input {
  flex:1;padding:12px 16px;
  border:1.5px solid var(--pz-line-soft);border-radius:24px;
  font-size:0.9rem;font-family:var(--pz-font);
  color:var(--pz-ink);background:var(--pz-surface-2);
  outline:none;transition:border-color 0.2s;
}
.pz-ai-input:focus{border-color:var(--pz-blue);}
.pz-ai-send-btn {
  width:44px;height:44px;border-radius:50%;
  background:#1e3a8a;color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:0.9rem;flex-shrink:0;transition:opacity 0.2s;
}
.pz-ai-send-btn:hover{opacity:0.88;}

/* ═══════════════════════════════════════════════════════════════
   MISSING UTILITY CLASSES — text colours used in escrow detail
   ═══════════════════════════════════════════════════════════════ */
.pz-text-ink   { color: var(--pz-ink, #0f172a); }
.pz-text-muted { color: var(--pz-muted, #64748b); }

/* ── Notification cards ─────────────────────────────────────── */
/* No custom margin here — #notificationList already uses Tailwind's
   space-y-3, which spaces every child (cards and this header alike)
   consistently, so this stays visually in line with the cards. */
.pz-notif-date-header {
  display: flex;
}
.pz-notif-date-header span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--pz-blue, #1e3a8a);
  background: var(--pz-blue-mist, #eff6ff);
  padding: 5px 12px;
  border-radius: 999px;
}
.pz-notif-card {
  border-radius: 16px;
  padding: 14px;
  transition:
    background 0.15s,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease,
    opacity 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}
.pz-notif-card--unread {
  background: var(--pz-white, #fff);
  border: 1px solid var(--pz-line, #e2e8f0);
}
.pz-notif-card--read {
  background: var(--pz-surface, #f8fafc);
  border: 1px solid var(--pz-line, #e2e8f0);
}
.pz-notif-card--expanded {
  box-shadow: 0 2px 8px rgba(15,23,42,0.08), 0 0 0 1.5px rgba(30, 58, 138, 0.18);
  position: relative;
}
.pz-text-faint { color: var(--pz-faint, #5b6779); }

/* ── Notification icon (colour-coded by type, sits on the left) ── */
.pz-notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pz-notif-icon svg { width: 19px; height: 19px; }
.pz-notif-clock-cutout { fill: #fff; }
.pz-notif-icon--escrow,
.pz-notif-icon--wallet-out,
.pz-notif-icon--info    { background: var(--pz-blue-mist, #eff6ff); color: var(--pz-blue, #1e3a8a); }
.pz-notif-icon--wallet-in { background: var(--pz-green-soft, #ecfdf5); color: var(--pz-green, #047857); }
.pz-notif-icon--kyc-approved,
.pz-notif-icon--escrow-handshake,
.pz-notif-icon--doc-verified { background: var(--pz-green-soft, #ecfdf5); color: var(--pz-green, #047857); }
.pz-notif-icon--dispute,
.pz-notif-icon--kyc-submitted { background: rgba(180,83,9,0.08); color: #b45309; }
.pz-notif-icon--danger,
.pz-notif-icon--kyc-rejected { background: rgba(220,38,38,0.08); color: var(--pz-danger, #dc2626); }
.pz-notif-icon--security { background: var(--pz-surface, #f8fafc); color: var(--pz-muted, #64748b); }

/* ── Notification copy — sharper hierarchy, mature fintech tone ── */
.pz-notif-title {
  font-family: var(--pz-font);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--pz-ink, #0f172a);
  margin: 0 0 3px;
}
.pz-notif-msg {
  font-family: var(--pz-font);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.45;
  color: #475569;
  margin: 0;
}
.pz-notif-time {
  font-family: var(--pz-font);
  font-size: 0.6875rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
  color: var(--pz-faint, #5b6779);
  margin: 5px 0 0;
}
.pz-notif-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--pz-blue, #1e3a8a);
  box-shadow: 0 0 0 3px rgba(30,58,138,0.12);
  flex-shrink: 0;
  margin-top: 6px;
}

/* ── Linked bank row ────────────────────────────────────────── */
.pz-bank-row {
  background: var(--pz-white, #fff);
  border: 1px solid var(--pz-line-soft, #e2e8f0);
}
/* ══════════════════════════════════════════════════════════════
   DASHBOARD HOME LAYOUT (mobile default, <1024px)
   .pz-dash-main/.pz-dash-side normally just group content for the
   desktop 2-column grid below. On mobile we don't want that grouping
   to dictate order (Overview needs to show before Quick Actions, but
   Recent Activity needs to show after Listings) — so both wrappers
   are "dissolved" with display:contents, promoting their children to
   be direct flex items of .pz-dash-grid, which are then freely
   reordered with `order`. Desktop (media query below) restores the
   wrappers as real, independently-flowing columns.
══════════════════════════════════════════════════════════════ */
.pz-dash-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pz-dash-main,
.pz-dash-side {
  display: contents;
}

.pz-dash-main > .pz-balance-card { order: 1; }
.pz-dash-side > .pz-dash-overview { order: 2; }
.pz-dash-main > .pz-dash-quickactions { order: 3; }
.pz-dash-main > .pz-banner-carousel  { order: 4; }
.pz-dash-side > .pz-dash-recent { order: 5; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP SHELL (>=1024px)
   Converts the bottom tab bar into a persistent left sidebar and
   gives the dashboard a real multi-column layout instead of the
   mobile single-column stack floating in a wide viewport.
══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Sidebar (was bottom nav) ──
     Keeps the same signature navy gradient as the mobile tab bar so the
     brand chrome reads as one deliberate system, not two different navs
     bolted together at the breakpoint. */
  .pz-bottom-nav {
    top: 0;
    bottom: 0;
    right: auto;
    width: 248px;
    padding: 16px;
    display: flex;
    align-items: stretch;
  }

  .pz-bottom-nav__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    padding: 22px 14px 20px;
    gap: 6px;
    border-radius: 24px;
  }

  .pz-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 22px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .pz-nav-brand__mark {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  .pz-nav-brand__text {
    font-family: var(--pz-font-display);
    font-size: var(--text-md);
    font-weight: var(--fw-semi, 600);
    color: #fff;
    letter-spacing: -0.01em;
  }

  .bottom-nav-item {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 13px;
    flex: none;
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    text-align: left;
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    letter-spacing: 0;
    /* ~7:1 contrast on the navy sidebar (was ~3:1 at 0.55 alpha) */
    color: rgba(226, 232, 240, 0.82);
  }

  /* The base rule ".pz-bottom-nav .bottom-nav-item { flex: 1 }" is more
     specific than ".bottom-nav-item" above, so on desktop the five items
     were stretching to fill the whole sidebar height. Match its specificity
     so they sit at their natural height. */
  .pz-bottom-nav .bottom-nav-item {
    flex: none;
  }

  .bottom-nav-item i {
    font-size: var(--text-base);
  }

  .bottom-nav-item__glyph {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex-shrink: 0;
  }

  .bottom-nav-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
  }

  .bottom-nav-item:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
  }

  .bottom-nav-item.active {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.14), rgba(251, 191, 36, 0.02));
    color: #fff;
  }

  /* Sidebar swaps the mobile bottom-dot indicator for a gold rail
     flush against the item's leading edge. */
  .bottom-nav-item.active::after {
    top: 8px;
    bottom: 8px;
    left: -2px;
    width: 3px;
    height: auto;
    border-radius: 3px;
    transform: none;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  }

  /* Header's inner wrapper still had the mobile max-w-screen-md/mx-auto
     centering, so on desktop it floated centered in the space beside the
     sidebar instead of starting flush-left like the rest of the content. */
  .pz-topnav-inner {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* ── Top nav + main content shifted right to clear the sidebar ── */
  .top-nav {
    left: 248px;
    width: calc(100% - 248px);
  }

  body.pz-ds-app {
    padding-bottom: 0;
  }

  main.max-w-screen-md {
    max-width: 1180px;
    margin-left: 248px;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* ── Home tab: real 2-column layout ──
     Mobile uses .pz-dash-grid as a flex column with .pz-dash-main/.pz-dash-side
     "dissolved" via display:contents, so their children all become direct
     flex items and can be freely reordered with `order` (see base rules
     above the desktop media query). Desktop restores .pz-dash-main/.pz-dash-side
     as two real, independently-flowing columns exactly like before — this
     avoids forcing Overview and Recent Activity into separate grid rows,
     which would leave an awkward gap under the shorter Overview panel. */
  .pz-dash-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 28px;
    align-items: start;
  }

  .pz-dash-main,
  .pz-dash-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Quick Actions gets to breathe now that it's not squeezed mobile-width */
  /* gap must stay 0: the dividers are cell borders, so any grid gap
     leaves the horizontal and vertical lines disconnected. */
  .pz-dash-main .pz-quick-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .pz-dash-main .pz-quick-btn {
    padding: 22px 12px;
    gap: 10px;
  }

  .pz-dash-main .pz-quick-btn:hover {
    background: var(--pz-blue-mist);
  }

  .pz-dash-main .pz-quick-btn:hover .pz-quick-btn__icon {
    background: rgba(30,58,138,0.18);
    transform: translateY(-1px);
  }

  .pz-dash-main .pz-quick-btn:focus-visible {
    outline: 2px solid var(--pz-blue);
    outline-offset: -2px;
  }

  .pz-dash-main .pz-quick-btn__label {
    font-size: 13px;
  }

  /* Premium Properties can show more than 3 across on the wider main column */
  .pz-dash-main .pz-premium-card {
    flex: 0 0 calc((100% - 36px) / 4);
  }
}
/* ═══════════════════════════════════════════════════════════════
   AI Property Search — dashboard hero feature
   ═══════════════════════════════════════════════════════════════ */

.pz-ai-search-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--pz-radius-xl, 24px);
  padding: 24px 20px 18px;
  background: linear-gradient(160deg, #eff6ff 0%, #f5f8ff 45%, #ffffff 100%);
  box-shadow: 0 2px 8px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.05);
  margin-bottom: 4px;
}

.pz-ai-search-hero__glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(30,58,138,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.pz-ai-search-hero__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
}

.pz-ai-search-hero__icon {
  display: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--pz-blue) 0%, var(--pz-blue-hover) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  box-shadow: 0 4px 14px -4px rgba(30, 58, 138, 0.4);
}

.pz-ai-search-hero__title {
  font-family: var(--pz-font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--pz-ink);
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-bottom: 3px;
}

.pz-ai-search-hero__subtitle {
  font-size: var(--text-sm);
  color: var(--pz-muted);
  font-weight: var(--fw-medium);
}

.pz-ai-search-hero__form {
  position: relative;
}

.pz-ai-search-hero__field {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--pz-white, #fff);
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06), 0 2px 10px rgba(15,23,42,0.06);
  padding: 4px 6px 4px 16px;
}

.pz-ai-search-hero__field-icon {
  color: var(--pz-blue);
  font-size: var(--text-base);
  margin-right: 10px;
  flex-shrink: 0;
}

.pz-ai-search-hero__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--pz-font);
  font-size: var(--text-base);
  color: var(--pz-ink);
  padding: 12px 4px;
  min-width: 0;
}

.pz-ai-search-hero__input::placeholder {
  color: var(--pz-faint, #5b6779);
  transition: opacity 0.25s ease;
}

.pz-ai-search-hero__clear {
  border: none;
  background: none;
  color: var(--pz-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: var(--text-sm);
}

.pz-ai-search-hero__clear:hover { background: var(--pz-surface, #f8fafc); }

.pz-ai-search-hero__submit {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none;
  background: var(--pz-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--text-sm);
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.25);
  transition: background 0.15s, transform 0.15s;
}

.pz-ai-search-hero__submit:hover { background: var(--pz-blue-hover); }
.pz-ai-search-hero__submit:active { transform: scale(0.94); }

.pz-ai-search-hero__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.pz-ai-chip {
  border: 1px solid var(--pz-line, #e2e8f0);
  background: var(--pz-white, #fff);
  color: var(--pz-ink-secondary);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.pz-ai-chip:hover {
  border-color: var(--pz-blue);
  color: var(--pz-blue);
  background: var(--pz-blue-mist);
}

.pz-ai-search-hero__active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.pz-ai-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pz-blue-mist);
  color: var(--pz-blue);
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
}

.pz-ai-active-chip button {
  border: none;
  background: rgba(30,58,138,0.12);
  color: var(--pz-blue);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 9px;
  flex-shrink: 0;
}

/* ── Results panel ─────────────────────────────────────────────── */
.pz-ai-results {
  margin-top: -2px;
}

.pz-ai-results__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pz-ai-results__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 640px) {
  .pz-ai-results__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pz-ai-results__grid--scroll {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}

.pz-ai-results__grid--scroll .pz-ai-result-card {
  flex: 0 0 160px;
  scroll-snap-align: start;
}

.pz-ai-suggestion-block { margin-bottom: 22px; }

.pz-ai-suggestion-block__title {
  font-family: var(--pz-font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--pz-ink);
}

/* ── Result card ────────────────────────────────────────────────── */
.pz-ai-result-card {
  background: var(--pz-white, #fff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.05);
  display: flex;
  flex-direction: column;
  position: relative;
}

.pz-ai-result-card__img-wrap { position: relative; }

.pz-ai-result-card__img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  background: var(--pz-surface, #f8fafc);
}

.pz-ai-result-card__img-placeholder {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pz-surface, #f8fafc);
  color: var(--pz-faint, #5b6779);
  font-size: 1.3rem;
}

.pz-ai-result-card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pz-ai-badge {
  font-size: 9.5px;
  font-weight: var(--fw-semi);
  padding: 3px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #fff;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.pz-ai-badge--verified { background: rgba(30, 58, 138, 0.85); }
.pz-ai-badge--seller    { background: rgba(4, 120, 87, 0.85); }
.pz-ai-badge--doc        { background: rgba(13, 148, 136, 0.85); }
.pz-ai-badge--escrow     { background: rgba(15, 23, 42, 0.85); }
.pz-ai-badge--premium    { background: rgba(180, 83, 9, 0.9); }

.pz-ai-result-card { min-width: 0; }

.pz-ai-result-card__body {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pz-ai-result-card__price {
  font-family: var(--pz-font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--pz-blue);
}

.pz-ai-result-card__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--pz-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-ai-result-card__location {
  font-size: var(--text-xs);
  color: var(--pz-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-ai-result-card__specs {
  display: flex;
  gap: 10px;
  font-size: var(--text-xs);
  color: var(--pz-muted);
  margin-top: 2px;
}

.pz-ai-result-card__specs span { display: flex; align-items: center; gap: 4px; }

.pz-ai-result-card__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.pz-ai-result-card__btn {
  text-align: center;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.pz-ai-result-card__btn--ghost {
  background: var(--pz-surface, #f8fafc);
  color: var(--pz-ink);
}

.pz-ai-result-card__btn--primary {
  background: var(--pz-blue);
  color: #fff;
}

/* ── Skeleton loading state ────────────────────────────────────── */
.pz-ai-result-card--skeleton .skel-block {
  height: 110px;
  background: linear-gradient(90deg, var(--pz-surface, #f1f5f9) 25%, var(--pz-line-soft, #e8edf5) 37%, var(--pz-surface, #f1f5f9) 63%);
  background-size: 400% 100%;
  animation: pz-skel-shimmer 1.4s ease infinite;
}

.pz-ai-result-card--skeleton .skel-line {
  height: 10px;
  border-radius: 4px;
  margin: 6px 0;
  background: linear-gradient(90deg, var(--pz-surface, #f1f5f9) 25%, var(--pz-line-soft, #e8edf5) 37%, var(--pz-surface, #f1f5f9) 63%);
  background-size: 400% 100%;
  animation: pz-skel-shimmer 1.4s ease infinite;
}

.pz-ai-result-card--skeleton .skel-line.short { width: 60%; }
.pz-ai-result-card--skeleton .skel-line.shorter { width: 40%; }

@keyframes pz-skel-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ── Empty / rejected state ────────────────────────────────────── */
.pz-ai-empty {
  text-align: center;
  padding: 28px 16px 20px;
  background: var(--pz-surface, #f8fafc);
  border-radius: 16px;
  margin-bottom: 16px;
}

.pz-ai-empty__title {
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--pz-ink);
  margin-bottom: 2px;
}

.pz-ai-empty__sub {
  font-size: var(--text-sm);
  color: var(--pz-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Listings tab sub-nav — AI Property Finder / Premium / My Listings
   Underlined segmented control (no fill/border), matching the
   understated tab pattern of Stripe/Paystack dashboards rather
   than a chip/filter pill.
   ═══════════════════════════════════════════════════════════════ */
.pz-listings-subnav {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--pz-line, #e2e8f0);
  padding: 0 2px;
  margin-bottom: 18px;
}

.pz-listings-subnav::-webkit-scrollbar { display: none; }

.pz-listings-subnav__btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border: none;
  background: none;
  color: var(--pz-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 11px 2px 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.pz-listings-subnav__btn i { font-size: 12px; }

.pz-listings-subnav__btn:hover { color: var(--pz-ink); }

.pz-listings-subnav__btn.active {
  color: var(--pz-blue);
  border-bottom-color: var(--pz-blue);
}

.pz-listings-subpanel {
  animation: pz-subpanel-fade 0.2s ease;
}

@keyframes pz-subpanel-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ══════════════════════════════════════════════════════════════
   ANNOUNCEMENT CAROUSEL
══════════════════════════════════════════════════════════════ */
.pz-banner-carousel {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 24px rgba(30, 58, 138, 0.12);
  order: 4; /* between quick actions (3) and recent (5) */
}

/* ── Track ── */
.pz-banner-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ── Single slide ── */
.pz-banner-slide {
  min-width: 100%;
  position: relative;
  overflow: hidden;
  padding: 22px 20px 18px;
  box-sizing: border-box;
  aspect-ratio: 16 / 10;
  max-height: 220px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}

/* Background image overlay (subtle texture) */
.pz-banner-slide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  pointer-events: none;
  mix-blend-mode: luminosity;
}

/* Watermark logomark bottom-right */
.pz-banner-slide::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 90px;
  height: 90px;
  background: url('/images/logomark.png') no-repeat bottom right / contain;
  opacity: 0.1;
  pointer-events: none;
  filter: brightness(0) invert(1);
}

.pz-banner-slide__body {
  position: relative;
  z-index: 1;
  width: 100%;
}

.pz-banner-slide__tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 9px;
  border-radius: 99px;
  margin-bottom: 8px;
}

.pz-banner-slide__title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 5px;
}

.pz-banner-slide__desc {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
  margin-bottom: 12px;
  max-width: 85%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pz-banner-slide__cta {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  text-decoration: none;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.25);
  transition: background 0.15s, transform 0.15s;
}
.pz-banner-slide__cta:hover {
  background: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}
.pz-banner-slide__cta:active {
  transform: translateY(0);
}

/* ── Navigation dots ── */
.pz-banner-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0 8px;
  background: rgba(0,0,0,0.12);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.pz-banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}

.pz-banner-dot--active {
  background: #fff;
  transform: scale(1.4);
}

/* ── Preview modal (opened by tapping a slide) ── */
.pz-banner-preview-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 160px;
  padding: 20px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 16px;
}
.pz-banner-preview-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  mix-blend-mode: luminosity;
}
.pz-banner-preview-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 9px;
  border-radius: 99px;
  position: relative;
  z-index: 1;
}
.pz-banner-preview-title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 8px;
}
.pz-banner-preview-desc {
  font-size: 0.9375rem;
  color: var(--pz-ink);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ── Dark mode ── */
[data-theme="dark"] .pz-banner-carousel {
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}

/* ── Desktop: give slide a bit more height ── */
@media (min-width: 640px) {
  .pz-banner-slide {
    aspect-ratio: 21 / 9;
    max-height: 240px;
    padding: 28px 28px 22px;
  }
  .pz-banner-slide__title { font-size: 1.0625rem; }
}

/* ── Top bar icon buttons: hover tooltip from data-tip ────────── */
.pz-tip { position: relative; }
.pz-tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 9px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 60;
}
@media (hover: hover) {
  .pz-tip:hover::after,
  .pz-tip:focus-visible::after { opacity: 1; transform: none; }
}

/* ── Contrast pass: Tailwind greys used in the dashboard ─────── */
/* text-gray-400 (#9ca3af) is 2.5:1 on white; text-gray-500 (#6b7280) is
   borderline. Dark theme has its own !important overrides in theme.css. */
body.pz-ds-app .text-gray-400 { color: #6b7280; }
body.pz-ds-app .text-gray-500 { color: #4b5563; }

/* ── Lucide icon system (sprite: /assets/icons/sprite.svg) ───────
   Drop-in for <i class="fas fa-*">: the <i> wrapper keeps every existing
   rule that sets colour / font-size on icons (e.g. .bottom-nav-item i),
   and the svg follows that size (1em) and colour (currentColor). */
.pz-ic { display: inline-flex; align-items: center; justify-content: center; font-style: normal; line-height: 1; flex-shrink: 0; }
.pz-ic svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pz-ic--spin svg { animation: pzIcSpin 0.9s linear infinite; }
@keyframes pzIcSpin { to { transform: rotate(360deg); } }
.bottom-nav-item.active .pz-ic svg { stroke-width: 2.3; }

/* ── Result overlay + inline result animation (js/pz-anim.js) ──── */
.pz-result-overlay {
  position: fixed; inset: 0; z-index: 10120;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.2s ease;
}
.pz-result-overlay.is-open { opacity: 1; }
.pz-result-card {
  width: 100%; max-width: 340px; text-align: center;
  background: var(--pz-white, #fff); color: var(--pz-ink, #0f172a);
  border: 1px solid var(--pz-line, #e2e8f0); border-radius: 24px;
  padding: 28px 24px 22px; box-shadow: var(--pz-shadow-lg);
  transform: translateY(10px) scale(0.96); transition: transform 0.28s var(--pz-ease, ease);
}
.pz-result-overlay.is-open .pz-result-card { transform: none; }
.pz-result-anim { margin: 0 auto 8px; }
.pz-result-title { font-size: var(--text-lg); font-weight: 700; margin: 0 0 6px; }
.pz-result-msg { font-size: var(--text-sm); color: var(--pz-muted); line-height: 1.5; margin: 0 0 18px; word-break: break-word; }
.pz-result-btn { width: 100%; padding: 14px; border-radius: 16px; margin-top: 6px; }
.pz-result-anim--inline { margin: 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .pz-result-overlay, .pz-result-card { transition: none; }
  .pz-result-card { transform: none; }
}

/* ── Designed feedback toast (js/pz-anim.js -> pzToast) ─────────── */
#toastContainer .toast {
  position: relative; overflow: hidden;
  padding: 12px 10px 15px 16px; gap: 10px; align-items: center;
  background: #ffffff; color: var(--pz-ink, #0f172a);
  border: 1px solid var(--pz-line, #e2e8f0); border-radius: 16px;
  box-shadow: 0 14px 34px -14px rgba(15,23,42,0.3), 0 2px 6px rgba(15,23,42,0.06);
  font-size: var(--text-sm); font-weight: 600; line-height: 1.4;
  animation: pzToastIn 0.4s var(--pz-ease, ease) both;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
#toastContainer .toast::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--toast-accent, #3b82f6); opacity: 0.5; transform-origin: left center;
  animation: pzToastBar var(--toast-ms, 4500ms) linear forwards;
}
#toastContainer .toast-success { --toast-accent: #10b981; }
#toastContainer .toast-error   { --toast-accent: #ef4444; }
#toastContainer .toast-warning { --toast-accent: #f59e0b; }
#toastContainer .toast-info    { --toast-accent: #3b82f6; }
#toastContainer .toast.is-leaving { opacity: 0; transform: translateY(-8px) scale(0.96); }
.toast-ic { flex: 0 0 30px; width: 30px; height: 30px; }
.toast-msg { flex: 1; min-width: 0; word-break: break-word; }
.toast-x {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent;
  color: var(--pz-muted, #64748b); display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer;
}
.toast-x:hover { background: var(--pz-surface-2, #f1f5f9); color: var(--pz-ink, #0f172a); }
[data-theme="dark"] #toastContainer .toast {
  background: #1c2333; border-color: #2a3550; color: #f1f5f9;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,0.75), 0 2px 6px rgba(0,0,0,0.4);
}
[data-theme="dark"] .toast-x:hover { background: #27324a; color: #ffffff; }
@keyframes pzToastIn { from { opacity: 0; transform: translateY(-12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes pzToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  #toastContainer .toast { animation: none; transition: none; }
  #toastContainer .toast::after { animation: none; display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATIONS SHEET: stable, polished rows
   - Switches are filled in before the sheet shows, with transitions
     off (.pz-no-anim), so nothing slides or blinks into place.
   - Every row has the same height, whatever its description says,
     so the sheet never grows after it opens.
   ═══════════════════════════════════════════════════════════════ */
.pz-no-anim .pz-toggle-track,
.pz-no-anim .pz-toggle-thumb {
  transition: none !important;
}

.pz-notif-lead {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--pz-muted);
}

#notifPrefModal .pz-notif-card {
  padding: 0;
  overflow: hidden;
}

#notifPrefModal .pz-notif-card .pz-notif-row {
  min-height: 72px;
  padding: 14px 16px;
  border-radius: 0;
}

#notifPrefModal .pz-notif-card .pz-notif-row:last-child {
  border-bottom: none;
}

/* One line of description per row; long text is cut, not wrapped, so rows keep their height */
#notifPrefModal .pz-notif-card .pz-acct-menu-sub {
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pz-acct-menu-icon--gold {
  background: rgba(180, 83, 9, 0.1);
  color: var(--pz-gold);
}

#notifPrefModal .pz-notif-card + .pz-notif-note {
  margin: 10px 4px 20px;
}

.pz-notif-note {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--pz-muted);
}

#notifPrefModal .pz-notif-card:not(:first-child) {
  margin-top: 0;
}

.pz-toggle-input:disabled + .pz-toggle-track {
  opacity: 0.45;
  cursor: not-allowed;
}

.pz-notif-row:has(.pz-toggle-input:disabled) {
  cursor: default;
}

.pz-toggle-input:focus-visible + .pz-toggle-track {
  outline: 2px solid var(--pz-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pz-toggle-track,
  .pz-toggle-thumb { transition: none; }
}
/* ── Statement period selector (segmented control) ─────────── */
.pz-stmt-seg-btn {
  border: none; background: transparent; border-radius: 10px; padding: 10px 8px; min-height: 44px;
  font-family: var(--pz-font); font-size: var(--text-sm); font-weight: var(--fw-semi);
  color: var(--pz-muted); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.pz-stmt-seg-btn.is-active { background: #fff; color: #1e3a8a; box-shadow: 0 1px 3px rgba(15,23,42,0.1); }

/* ═══════════════════════ PAY TAB ═══════════════════════ */
.pz-pay-hero {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 20px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--pz-blue) 0%, var(--pz-blue-hover) 100%);
  box-shadow: 0 10px 28px -12px rgba(30,58,138,0.55);
}
.pz-pay-hero::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -35%;
  width: 90%;
  height: 160%;
  background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 68%);
  pointer-events: none;
}
.pz-pay-hero > * { position: relative; }
.pz-pay-hero__eyebrow {
  margin: 0 0 14px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.pz-pay-hero__label { margin: 0 0 2px; font-size: 0.8125rem; color: rgba(255,255,255,0.8); }
.pz-pay-hero__amount {
  margin: 0 0 16px;
  font-family: var(--pz-font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}
.pz-pay-hero__tag {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
}
.pz-pay-hero__tag-text { font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.04em; color: #fff; font-variant-numeric: tabular-nums; word-break: break-all; }
.pz-pay-hero__tag-actions { display: inline-flex; gap: 4px; }
.pz-pay-hero__tag-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.16); color: #fff; font-size: 0.8125rem; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease; }
.pz-pay-hero__tag-btn:hover:not(:disabled) { background: rgba(255,255,255,0.28); }
.pz-pay-hero__tag-btn:disabled { opacity: .5; cursor: default; }
.pz-pay-hero__tag-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pz-pay-hero__tag-note { font-size: 0.75rem; color: rgba(255,255,255,0.78); }

/* ── Quick send + recent people ───────────────────────────── */
.pz-pay-quick {
  padding: 16px;
  background: var(--pz-white);
  border: 1px solid var(--pz-line-soft);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}
.pz-pay-quick__label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pz-muted);
}
.pz-pay-quick__field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 14px;
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pz-pay-quick__field:focus-within { border-color: var(--pz-blue); box-shadow: 0 0 0 3px var(--pz-blue-soft); }
.pz-pay-quick__at { font-weight: 700; color: var(--pz-blue); }
.pz-pay-quick__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 1rem; /* 16px stops iOS zooming on focus */
  color: var(--pz-ink);
}
.pz-pay-quick__input::placeholder { color: var(--pz-faint); }
.pz-pay-quick__go {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 11px;
  background: var(--pz-blue);
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.pz-pay-quick__go:active { transform: scale(0.92); }
@media (hover: hover) { .pz-pay-quick__go:hover { background: var(--pz-blue-hover); } }

.pz-pay-recent { margin-top: 14px; }
.pz-pay-recent__scroller {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pz-pay-recent__scroller::-webkit-scrollbar { display: none; }
.pz-pay-recent__hint { margin: 6px 0 0; font-size: 0.75rem; color: var(--pz-muted); }
.pz-pay-person {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 56px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pz-pay-person__avatar {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.12s;
}
.pz-pay-person__avatar svg { width: 24px; height: 24px; }
.pz-pay-person__name { font-size: 0.6875rem; font-weight: 600; color: var(--pz-ink-secondary); line-height: 1.2; }
.pz-pay-person:active .pz-pay-person__avatar { transform: scale(0.92); }
.pz-pay-person--new .pz-pay-person__avatar {
  background: var(--pz-blue);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(30,58,138,0.6);
}
.pz-pay-person--ghost { cursor: default; pointer-events: none; }
.pz-pay-person--ghost .pz-pay-person__avatar {
  border: 1.5px dashed var(--pz-line);
  background: var(--pz-surface);
  color: var(--pz-line);
}
[data-theme="dark"] .pz-pay-person--ghost .pz-pay-person__avatar { color: #2b3750; border-color: #2b3750; }

/* ── Action tiles ─────────────────────────────────────────── */
.pz-pay-actions { display: flex; flex-direction: column; gap: 14px; }
.pz-pay-tile {
  --tile-accent: #1e3a8a;
  --tile-tint: rgba(30,58,138,0.12);
  --tile-wash: rgba(30,58,138,0.07);
  --tile-btn: #1e3a8a;
  --tile-btn-hover: #1e40af;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(155deg, var(--tile-wash) 0%, var(--pz-white) 62%);
  border: 1px solid var(--pz-line-soft);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06), 0 8px 22px -10px rgba(15,23,42,0.12);
}
.pz-pay-tile::before {
  content: '';
  position: absolute;
  top: -46px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tile-tint) 0%, transparent 70%);
  pointer-events: none;
}
.pz-pay-tile > * { position: relative; }
.pz-pay-tile--request {
  --tile-accent: #15803d; --tile-tint: rgba(21,128,61,0.14); --tile-wash: rgba(21,128,61,0.08);
  --tile-btn: #15803d; --tile-btn-hover: #166534;
}
.pz-pay-tile--split {
  --tile-accent: #6d28d9; --tile-tint: rgba(109,40,217,0.14); --tile-wash: rgba(109,40,217,0.08);
  --tile-btn: #6d28d9; --tile-btn-hover: #5b21b6;
}
[data-theme="dark"] .pz-pay-tile--transfer { --tile-accent: #60a5fa; --tile-tint: rgba(96,165,250,0.18); --tile-wash: rgba(96,165,250,0.09); --tile-btn: #2563eb; --tile-btn-hover: #3b82f6; }
[data-theme="dark"] .pz-pay-tile--request  { --tile-accent: #34d399; --tile-tint: rgba(52,211,153,0.18); --tile-wash: rgba(52,211,153,0.09); --tile-btn: #059669; --tile-btn-hover: #10b981; }
[data-theme="dark"] .pz-pay-tile--split    { --tile-accent: #a78bfa; --tile-tint: rgba(167,139,250,0.20); --tile-wash: rgba(167,139,250,0.10); --tile-btn: #7c3aed; --tile-btn-hover: #8b5cf6; }

.pz-pay-tile__head { display: flex; align-items: center; gap: 14px; }
.pz-pay-tile__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,0.95) 0%, var(--tile-tint) 72%);
  border: 1px solid var(--tile-tint);
  box-shadow: 0 8px 16px -8px var(--tile-accent), inset 0 1px 0 rgba(255,255,255,0.8);
}
[data-theme="dark"] .pz-pay-tile__icon {
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,0.14) 0%, var(--tile-tint) 72%);
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.12);
}
.pz-pay-tile__body { flex: 1; min-width: 0; }
.pz-pay-tile__title {
  margin: 0 0 2px;
  font-family: var(--pz-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pz-ink);
}
.pz-pay-tile__desc { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--pz-muted); }
.pz-pay-tile__btn {
  width: 100%;
  min-height: 46px;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  background: var(--tile-btn);
  box-shadow: 0 8px 16px -8px var(--tile-btn);
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.pz-pay-tile__btn:active { transform: scale(0.97); box-shadow: 0 2px 6px -3px var(--tile-btn); }
@media (hover: hover) { .pz-pay-tile__btn:hover { background: var(--tile-btn-hover); } }
.pz-pay-tile__btn:focus-visible { outline: 3px solid var(--tile-tint); outline-offset: 2px; }

/* ── Activity (compact) ───────────────────────────────────── */
.pz-pay-block .pz-section-head { margin-bottom: 10px; }
.pz-pay-activity {
  background: var(--pz-white);
  border: 1px solid var(--pz-line-soft);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.05);
  overflow: hidden;
}
.pz-pay-activity__row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.pz-pay-activity__row + .pz-pay-activity__row { border-top: 1px solid var(--pz-line-soft); }
.pz-pay-activity__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pz-blue-mist);
  color: var(--pz-blue);
}
.pz-pay-activity__title { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--pz-ink); line-height: 1.3; }
.pz-pay-activity__desc { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--pz-muted); }

@media (min-width: 768px) {
  .pz-pay-actions { flex-direction: row; align-items: stretch; }
  .pz-pay-tile { flex: 1; justify-content: space-between; }
}

/* ── Pay card icon animations ───────────────────────────────── */
.pz-fx { width: 100%; height: 100%; display: block; }
.pz-fx * { transform-box: fill-box; transform-origin: center; }

/* Transfer: plane bobs, then flies off top-right and glides back in from bottom-left */
.pz-fx-plane { animation: pz-plane 7s ease-in-out infinite; }
.pz-fx-trail { opacity: 0; animation: pz-trail 7s ease-in-out infinite; }
@keyframes pz-plane {
  0%   { transform: translate(0,0); opacity: 1; }
  22%  { transform: translate(1.5px,-2.5px); }
  44%  { transform: translate(0,0); }
  60%  { transform: translate(-3px,3px) scale(.94); opacity: 1; }
  72%  { transform: translate(40px,-40px) scale(.9); opacity: 0; }
  73%  { transform: translate(-40px,40px); opacity: 0; }
  90%  { transform: translate(0,0); opacity: 1; }
  100% { transform: translate(0,0); opacity: 1; }
}
@keyframes pz-trail {
  0%,60% { opacity: 0; transform: translate(0,0); }
  66%    { opacity: .9; transform: translate(4px,-4px); }
  76%    { opacity: 0; transform: translate(14px,-14px); }
  100%   { opacity: 0; }
}

/* Request: arrow drops from above onto the note, which bumps and pulses */
.pz-fx-drop { animation: pz-drop 3.6s ease-in infinite; }
.pz-fx-note { animation: pz-note 3.6s ease-out infinite; }
.pz-fx-ring { opacity: 0; animation: pz-ring 3.6s ease-out infinite; }
@keyframes pz-drop {
  0%   { transform: translateY(-18px); opacity: 0; }
  12%  { opacity: 1; }
  52%  { transform: translateY(17px); opacity: 1; }
  62%  { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(20px); opacity: 0; }
}
@keyframes pz-note {
  0%,50% { transform: translateY(0) scale(1); }
  58%    { transform: translateY(2px) scale(1.07); }
  72%    { transform: translateY(0) scale(1); }
  100%   { transform: translateY(0) scale(1); }
}
@keyframes pz-ring {
  0%,52% { opacity: 0; transform: scale(.7); }
  60%    { opacity: .8; }
  85%,100% { opacity: 0; transform: scale(1.6); }
}

/* Split: two people drift together, the pie coin pops above them */
.pz-fx-pa { animation: pz-pa 4.4s ease-in-out infinite; }
.pz-fx-pb { animation: pz-pb 4.4s ease-in-out infinite; }
.pz-fx-coin { animation: pz-coin 4.4s ease-in-out infinite; }
.pz-fx-spark { animation: pz-spark 4.4s ease-in-out infinite; }
@keyframes pz-pa {
  0%,100% { transform: translateX(-4px); }
  40%,75% { transform: translateX(1px); }
}
@keyframes pz-pb {
  0%,100% { transform: translateX(4px); }
  40%,75% { transform: translateX(-1px); }
}
@keyframes pz-coin {
  0%,25%  { transform: scale(0) rotate(-90deg); opacity: 0; }
  45%     { transform: scale(1.15) rotate(0); opacity: 1; }
  55%,75% { transform: scale(1) rotate(0); opacity: 1; }
  92%,100% { transform: scale(0) rotate(90deg); opacity: 0; }
}
@keyframes pz-spark {
  0%,35%,100% { opacity: 0; }
  50%,70% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pz-fx-plane, .pz-fx-trail, .pz-fx-drop, .pz-fx-note, .pz-fx-ring,
  .pz-fx-pa, .pz-fx-pb, .pz-fx-coin, .pz-fx-spark { animation: none !important; }
  .pz-fx-drop { opacity: 1; transform: translateY(8px); }
  .pz-fx-coin, .pz-fx-spark { transform: none; opacity: 1; }
  .pz-fx-pa { transform: translateX(-1px); }
  .pz-fx-pb { transform: translateX(1px); }
  .pz-pay-tile__btn, .pz-pay-quick__go, .pz-pay-person__avatar { transition: none; }
}

/* ── Phones: 16px form text, so iOS Safari does not zoom the page when a field is tapped ── */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* History breakdown cards (Money In / Money Out / Net Flow): swipe sideways on small
   screens, three across on larger ones. */
.pz-stmt-stats { display: flex; gap: 8px; margin: 0 -4px 24px; padding: 0 4px 4px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pz-stmt-stats::-webkit-scrollbar { display: none; }
.pz-stmt-stats .pz-stmt-stat { flex: 0 0 150px; scroll-snap-align: start; box-sizing: border-box; }
.pz-stmt-stats .pz-stmt-stat p { white-space: nowrap; }
@media (min-width: 520px) {
  .pz-stmt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0 0 24px; padding: 0; }
  .pz-stmt-stats .pz-stmt-stat { flex: initial; }
}


/* Propzora Pay card: eye icon that hides or shows the balance (shared with the home wallet card) */
.pz-pay-hero__eye {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: 4px; padding: 0;
  background: none; border: 0; border-radius: 50%;
  color: rgba(255,255,255,0.8); font-size: 0.95rem; line-height: 1;
  vertical-align: middle; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, color .15s ease;
}
.pz-pay-hero__eye:hover { background: rgba(255,255,255,0.14); color: #fff; }
.pz-pay-hero__eye:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


/* +/- before an amount: drawn, so it sits level with the figures in any font */
.pz-sign {
  display: inline-block;
  position: relative;
  flex: none;
  width: 0.56em;
  height: 0.56em;
  margin-right: 0.14em;
  vertical-align: 0.045em;
}
.pz-sign::before,
.pz-sign--plus::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 0.05em;
}
.pz-sign::before {
  left: 0; right: 0; top: 50%;
  height: 0.13em;
  transform: translateY(-50%);
}
.pz-sign--plus::after {
  top: 0; bottom: 0; left: 50%;
  width: 0.13em;
  transform: translateX(-50%);
}


/* ═══════════ Split Pay sheet ═══════════ */
.pz-sp-overlay { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); }
.pz-sp-overlay[hidden], .pz-sp-sheet [hidden] { display: none !important; }
.pz-sp-sheet { width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; box-sizing: border-box; background: #fff; border-radius: 28px 28px 0 0; padding: 14px 20px 0; box-shadow: 0 -8px 32px rgba(15,23,42,0.18); font-family: var(--pz-font); color: var(--pz-ink); }
.pz-sp-handle { width: 40px; height: 4px; background: #e2e8f0; border-radius: 99px; margin: 0 auto 14px; flex: none; }
.pz-sp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex: none; }
.pz-sp-head h3 { flex: 1; margin: 0; font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--pz-ink); }
.pz-sp-back, .pz-sp-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f5f9; color: var(--pz-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pz-sp-body { overflow-y: auto; padding-bottom: 36px; -webkit-overflow-scrolling: touch; }
.pz-sp-intro { font-size: var(--text-sm); color: var(--pz-muted); margin: 0 0 14px; line-height: 1.5; }
.pz-sp-sub { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--pz-ink); margin: 22px 0 8px; }
.pz-sp-muted { font-size: var(--text-xs); color: var(--pz-muted); margin: 6px 0; line-height: 1.5; }
.pz-sp-error { font-size: var(--text-xs); color: var(--pz-danger); margin: 10px 0; line-height: 1.45; }
.pz-sp-actions { display: flex; gap: 10px; margin: 14px 0; }
.pz-sp-actions > * { flex: 1; }
.pz-sp-row { display: flex; gap: 10px; align-items: flex-end; }
.pz-sp-row > * { flex: 1; min-width: 0; }
.pz-sp-row > .pz-sp-btn-ghost { flex: none; }
.pz-sp-body .field { width: 100%; box-sizing: border-box; margin-bottom: 4px; }
.pz-sp-body .btn-primary, .pz-sp-body .pz-btn-danger { width: 100%; margin-top: 14px; }
.pz-sp-actions .btn-primary, .pz-sp-actions .pz-btn-danger { margin-top: 0; }
.pz-sp-btn-ghost { border: 1px solid var(--pz-line); background: transparent; color: var(--pz-ink); font: inherit; font-weight: var(--fw-semi); border-radius: var(--pz-radius); padding: 11px 16px; cursor: pointer; }
.pz-sp-card { display: block; width: 100%; text-align: left; background: var(--pz-surface-2, #f8fafc); border: 1px solid var(--pz-line); border-radius: 16px; padding: 14px; margin-bottom: 10px; cursor: pointer; font: inherit; color: inherit; }
.pz-sp-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pz-sp-card__top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pz-ink); }
.pz-sp-flag { margin: 8px 0 0; font-size: var(--text-xs); font-weight: var(--fw-semi); color: #b45309; }
.pz-sp-chip { flex: none; font-size: 11px; font-weight: var(--fw-semi); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.pz-sp-chip--blue { background: #dbeafe; color: #1e3a8a; }
.pz-sp-chip--green { background: #dcfce7; color: #166534; }
.pz-sp-chip--gold { background: #fef3c7; color: #92400e; }
.pz-sp-chip--red { background: #fee2e2; color: #991b1b; }
.pz-sp-chip--grey { background: #e2e8f0; color: #334155; }
.pz-sp-progress { height: 8px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.pz-sp-progress span { display: block; height: 100%; background: var(--pz-blue); border-radius: 99px; transition: width .4s ease; }
.pz-sp-progress__text { margin: 8px 0 0; font-size: var(--text-sm); color: var(--pz-ink); display: flex; justify-content: space-between; gap: 8px; }
.pz-sp-progress__text span { color: var(--pz-muted); }
.pz-sp-summary { margin-bottom: 14px; }
.pz-sp-summary h4 { margin: 0 0 8px; font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--pz-ink); word-break: break-word; }
.pz-sp-summary .pz-sp-chip { display: inline-block; margin-bottom: 12px; }
.pz-sp-rows { margin: 0 0 12px; }
.pz-sp-rows > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--pz-line-soft, #f1f5f9); font-size: var(--text-sm); }
.pz-sp-rows dt { color: var(--pz-muted); margin: 0; }
.pz-sp-rows dd { margin: 0; color: var(--pz-ink); font-weight: var(--fw-semi); text-align: right; }
.pz-sp-terms { background: var(--pz-surface-2, #f8fafc); border: 1px solid var(--pz-line); border-radius: 14px; padding: 12px 14px; margin: 14px 0; font-size: var(--text-xs); line-height: 1.55; color: var(--pz-body, var(--pz-muted)); }
.pz-sp-terms strong { color: var(--pz-ink); font-size: var(--text-sm); }
.pz-sp-terms p { margin: 6px 0 0; }
.pz-sp-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); margin: 6px 0; }
.pz-sp-check input { margin-top: 3px; }
.pz-sp-list { list-style: none; margin: 0; padding: 0; }
.pz-sp-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--pz-line-soft, #f1f5f9); font-size: var(--text-sm); }
.pz-sp-review { background: #fffbeb; border: 1px solid #fde68a; border-radius: 14px; padding: 12px 14px; margin: 10px 0 14px; font-size: var(--text-sm); line-height: 1.55; color: #78350f; }
.pz-sp-review p { margin: 6px 0 0; }
.pz-sp-banner { border-radius: 14px; padding: 11px 14px; margin: 0 0 14px; font-size: var(--text-sm); line-height: 1.5; }
.pz-sp-banner--gold { background: #fffbeb; color: #92400e; }
.pz-sp-banner--red { background: #fef2f2; color: #991b1b; }
.pz-sp-banner--green { background: #f0fdf4; color: #166534; }
.pz-sp-banner--grey { background: #f1f5f9; color: #334155; }
.pz-sp-share { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--pz-surface-2, #f8fafc); border: 1px solid var(--pz-line); border-radius: 14px; padding: 10px 12px; }
.pz-sp-share code { font-size: var(--text-md); font-weight: var(--fw-bold); letter-spacing: 0.12em; color: var(--pz-ink); }
.pz-sp-more { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; align-items: flex-start; }
.pz-sp-link { background: none; border: 0; padding: 6px 0; font: inherit; font-size: var(--text-sm); color: var(--pz-blue); cursor: pointer; text-align: left; }
.pz-sp-link--danger { color: var(--pz-danger); }

[data-theme="dark"] .pz-sp-sheet { background: #161b27; box-shadow: 0 -8px 32px rgba(0,0,0,0.5); }
[data-theme="dark"] .pz-sp-handle { background: #1e293b; }
[data-theme="dark"] .pz-sp-back, [data-theme="dark"] .pz-sp-close { background: #1e293b; color: #f1f5f9; }
[data-theme="dark"] .pz-sp-card, [data-theme="dark"] .pz-sp-terms, [data-theme="dark"] .pz-sp-share { background: #1a2130; border-color: #263042; }
[data-theme="dark"] .pz-sp-progress { background: #263042; }
[data-theme="dark"] .pz-sp-progress__text, [data-theme="dark"] .pz-sp-sheet h3, [data-theme="dark"] .pz-sp-sheet h4,
[data-theme="dark"] .pz-sp-sub, [data-theme="dark"] .pz-sp-rows dd, [data-theme="dark"] .pz-sp-card__top strong,
[data-theme="dark"] .pz-sp-terms strong, [data-theme="dark"] .pz-sp-share code { color: #f1f5f9; }
[data-theme="dark"] .pz-sp-rows > div, [data-theme="dark"] .pz-sp-list li { border-color: #263042; }
[data-theme="dark"] .pz-sp-list li, [data-theme="dark"] .pz-sp-check { color: #e2e8f0; }
[data-theme="dark"] .pz-sp-btn-ghost { color: #f1f5f9; border-color: #334155; }
[data-theme="dark"] .pz-sp-review { background: #2a2410; border-color: #4a3d12; color: #fde68a; }
[data-theme="dark"] .pz-sp-banner--gold { background: #2a2410; color: #fde68a; }
[data-theme="dark"] .pz-sp-banner--red { background: #2d1616; color: #fecaca; }
[data-theme="dark"] .pz-sp-banner--green { background: #112a1b; color: #bbf7d0; }
[data-theme="dark"] .pz-sp-banner--grey { background: #1e293b; color: #cbd5e1; }


/* ═══════════ Transfer and @tag (reuses the Split Pay sheet) ═══════════ */
.pz-tr-tagfield { display: flex; align-items: center; gap: 6px; }
.pz-tr-tagfield > span { font-size: var(--text-md); font-weight: var(--fw-semi); color: var(--pz-muted); }
.pz-tr-tagfield .field { flex: 1; min-width: 0; margin-bottom: 0; }
.pz-tr-sugs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.pz-tr-sug { padding: 8px 12px; font-size: var(--text-xs); }
.pz-tr-me { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--pz-surface-2, #f8fafc); border: 1px solid var(--pz-line); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; font-size: var(--text-sm); color: var(--pz-ink); }
.pz-tr-me strong { color: var(--pz-blue); }
.pz-tr-person { display: flex; align-items: center; gap: 12px; background: var(--pz-surface-2, #f8fafc); border: 1px solid var(--pz-line); border-radius: 14px; padding: 12px 14px; margin: 10px 0; }
.pz-tr-person[hidden] { display: none; }
.pz-tr-person > div { flex: 1; min-width: 0; }
.pz-tr-person strong { color: var(--pz-ink); }
.pz-tr-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(30,58,138,0.10); color: var(--pz-blue); font-weight: var(--fw-bold); font-size: var(--text-sm); }
.pz-tr-ok { color: var(--pz-green); font-size: 1.1rem; }
.pz-tr-hero { text-align: center; padding: 6px 0 14px; }
.pz-tr-hero p { margin: 0; font-size: var(--text-sm); color: var(--pz-muted); }
.pz-tr-hero h2 { margin: 4px 0 6px; font-size: 2rem; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: #1e3a8a; }
.pz-tr-hero--ok > i { font-size: 2.6rem; color: var(--pz-green); margin-bottom: 6px; }
[data-theme="dark"] .pz-tr-me, [data-theme="dark"] .pz-tr-person { background: #1a2130; border-color: #263042; }
[data-theme="dark"] .pz-tr-me { color: #e2e8f0; }
[data-theme="dark"] .pz-tr-me strong { color: #7db4fb; }
[data-theme="dark"] .pz-tr-person strong { color: #f1f5f9; }
[data-theme="dark"] .pz-tr-avatar { background: rgba(125,180,251,0.14); color: #7db4fb; }
[data-theme="dark"] .pz-tr-hero h2 { color: #f1f5f9; }


/* Payment tag cards (Transfer) */
.pz-tr-me__btns { display: inline-flex; gap: 10px; flex: none; }
.pz-tr-me strong { letter-spacing: 0.04em; word-break: break-all; }
.pz-tr-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 0.75rem; font-weight: var(--fw-semi); }
.pz-tr-badge--ok { color: var(--pz-green); }
.pz-tr-badge--warn { color: #b45309; }
[data-theme="dark"] .pz-tr-badge--warn { color: #fbbf24; }

/* Profile pictures on recent people (Pay tab row and the Transfer screen) */
.pz-pay-person__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pz-pay-person__avatar:has(img) { overflow: hidden; padding: 0; }
.pz-tr-sug { display: inline-flex; align-items: center; gap: 8px; }
.pz-tr-sug__pic { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #e2e8f0; color: #334155; font-size: 0.6875rem; font-weight: 700; }
.pz-tr-sug__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-theme="dark"] .pz-tr-sug__pic { background: #1e293b; color: #e2e8f0; }
.pz-tr-avatar { overflow: hidden; }
.pz-tr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-sp-recip { display: flex; align-items: center; gap: 10px; }

/* ── Pay screens: one accent per product so Transfer, Request and Split Pay read as different things ── */
.pz-acc-transfer { --acc: #1e40af; --acc-hover: #1e3a8a; }
.pz-acc-request  { --acc: #15803d; --acc-hover: #166534; }
.pz-acc-split    { --acc: #6d28d9; --acc-hover: #5b21b6; }
[data-theme="dark"] .pz-acc-transfer { --acc: #2563eb; --acc-hover: #3b82f6; }
[data-theme="dark"] .pz-acc-request  { --acc: #059669; --acc-hover: #10b981; }
[data-theme="dark"] .pz-acc-split    { --acc: #7c3aed; --acc-hover: #8b5cf6; }
.pz-acc-transfer .btn-primary, .pz-acc-request .btn-primary, .pz-acc-split .btn-primary { background: var(--acc); background-image: none; border-color: var(--acc); box-shadow: none; }
.pz-acc-transfer .btn-primary:hover, .pz-acc-request .btn-primary:hover, .pz-acc-split .btn-primary:hover { background: var(--acc-hover); background-image: none; }
.pz-acc-transfer .pz-sp-sheet h3, .pz-acc-request .pz-sp-sheet h3, .pz-acc-split .pz-sp-sheet h3 { letter-spacing: -0.01em; }
.pz-acc-split .pz-sp-progress > span { background: var(--acc); }
.pz-acc-transfer .pz-sp-link, .pz-acc-request .pz-sp-link, .pz-acc-split .pz-sp-link { color: var(--acc); }
.pz-acc-transfer .pz-sp-link--danger, .pz-acc-request .pz-sp-link--danger, .pz-acc-split .pz-sp-link--danger { color: #b91c1c; }

/* Info icon: secondary explanations live behind a small "i" */
.pz-info { display: inline; margin-left: 4px; }
.pz-info__btn { vertical-align: middle; }
.pz-info__btn { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--pz-muted); background: transparent; color: var(--pz-muted); font-size: 0.6875rem; font-weight: 700; line-height: 1; font-style: italic; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.pz-info__note { display: block; margin-top: 4px; font-size: 0.75rem; font-weight: 400; font-style: normal; color: var(--pz-muted); line-height: 1.45; }
.pz-info__note[hidden] { display: none; }

/* Short terms list (Split Pay) */
.pz-sp-bullets { margin: 6px 0 0; padding-left: 18px; font-size: 0.8125rem; line-height: 1.5; }
.pz-sp-bullets li { margin: 2px 0; }

/* ── Loading skeletons: same shape as the content they stand in for ── */
:root { --pz-skel-a: #eef2f7; --pz-skel-b: #e2e8f0; }
[data-theme="dark"] { --pz-skel-a: #1e293b; --pz-skel-b: #2a3a52; }
.pz-skel { display: inline-block; height: 0.9em; min-width: 3em; border-radius: 6px; vertical-align: middle; background: linear-gradient(90deg, var(--pz-skel-a) 25%, var(--pz-skel-b) 50%, var(--pz-skel-a) 75%); background-size: 200% 100%; animation: pz-skel-shimmer 1.4s ease-in-out infinite; }
.pz-skel--block { display: block; width: 100%; }
.pz-skel-rows { display: grid; gap: 10px; padding: 4px 0; }
.pz-skel-list { display: grid; }
.pz-skel-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.pz-skel-dot { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; padding: 0; }
.pz-skel-lines { flex: 1; display: grid; gap: 8px; }
@keyframes pz-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pz-skel { animation: none; } }
.pz-error-state { text-align: center; padding: 24px 12px; }

/* ── Pay buttons: same size and shape as the dashboard's main buttons ── */
.pz-sp-body .btn-primary, .pz-sp-body .pz-btn-danger { min-height: 52px; padding: 14px 20px; border-radius: 16px; font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; display: flex; align-items: center; justify-content: center; }
.pz-sp-body > .pz-sp-btn-ghost, .pz-sp-actions > .pz-sp-btn-ghost { min-height: 52px; border-radius: 16px; font-size: 0.9375rem; display: flex; align-items: center; justify-content: center; }
.pz-sp-btn-ghost { font-family: inherit; }
.pz-pay-tile__btn { min-height: 52px; border-radius: 16px; font-weight: 600; }
.pz-sp-body input.field, .pz-sp-body select.field, .pz-sp-body textarea.field { font-family: inherit; }

/* ── Modals and sheets: scrolling works (touch, wheel, trackpad, keyboard) but the bar itself is hidden ── */
.modal-sheet, .modal-sheet *,
.modal-center, .modal-center *,
.pz-stmt-modal-sheet, .pz-stmt-modal-sheet *,
.pz-sp-sheet, .pz-sp-sheet *,
.pz-bank-picker-list,
[id$="Modal"] .overflow-y-auto,
[id$="Modal"] .overflow-auto {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
}
.modal-sheet::-webkit-scrollbar, .modal-sheet *::-webkit-scrollbar,
.modal-center::-webkit-scrollbar, .modal-center *::-webkit-scrollbar,
.pz-stmt-modal-sheet::-webkit-scrollbar, .pz-stmt-modal-sheet *::-webkit-scrollbar,
.pz-sp-sheet::-webkit-scrollbar, .pz-sp-sheet *::-webkit-scrollbar,
.pz-bank-picker-list::-webkit-scrollbar,
[id$="Modal"] .overflow-y-auto::-webkit-scrollbar,
[id$="Modal"] .overflow-auto::-webkit-scrollbar {
  display: none; width: 0; height: 0;   /* Chrome, Safari, Edge */
}
.modal-sheet, .modal-center, .pz-stmt-modal-sheet, .pz-sp-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ── Pay balance card: same amount size as the balance card on Home ── */
.pz-pay-hero__amount { font-size: 1.65rem; line-height: 1.1; }
.pz-pay-hero__amount .naira { font-size: var(--text-xl); font-weight: var(--fw-bold); vertical-align: baseline; margin-right: 2px; line-height: 1; }

/* ── Selectable option cards (radio choices shown as cards) ── */
.pz-opt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.pz-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1.5px solid var(--pz-line); border-radius: 16px; background: var(--pz-white); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.pz-opt__input, .pz-opt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pz-opt__title { font-weight: 700; font-size: 0.9375rem; color: var(--pz-ink); line-height: 1.25; }
.pz-opt__desc { font-size: 0.8125rem; color: var(--pz-muted); }
.pz-opt:has(input:checked) { border-color: var(--acc, var(--pz-blue)); background: color-mix(in srgb, var(--acc, var(--pz-blue)) 7%, var(--pz-white)); box-shadow: 0 0 0 1px var(--acc, var(--pz-blue)); }
.pz-opt:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--acc, var(--pz-blue)) 35%, transparent); outline-offset: 2px; }
.pz-opt:has(input:checked)::after { content: ""; position: absolute; top: 12px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--acc, var(--pz-blue)); }
.pz-opt__title { padding-right: 16px; }
[data-theme="dark"] .pz-opt { background: #111c2f; }
@media (max-width: 340px) { .pz-opt-cards { grid-template-columns: 1fr; } }
.tr-tag::placeholder { text-transform: none; letter-spacing: normal; }

/* ── Pay balance card: payment tag block (tag on top; copy and share left, label right) ── */
.pz-pay-hero__tag { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 14px; padding: 16px 18px; border-radius: 22px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); }
.pz-pay-hero__tag-text { grid-column: 1 / -1; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.15; color: #fff; word-break: normal; overflow-wrap: anywhere; min-height: 1.15em; }
.pz-pay-hero__tag-actions { grid-column: 1; grid-row: 2; display: inline-flex; gap: 10px; }
.pz-pay-hero__tag-btn { width: 44px; height: 44px; font-size: 1rem; background: rgba(255,255,255,0.18); }
.pz-pay-hero__tag-note { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; font-size: 0.875rem; color: rgba(255,255,255,0.8); }
@media (max-width: 360px) {
  .pz-pay-hero__tag { padding: 14px; column-gap: 8px; }
  .pz-pay-hero__tag-text { font-size: 1.05rem; letter-spacing: 0.01em; }
  .pz-pay-hero__tag-btn { width: 40px; height: 40px; }
  .pz-pay-hero__tag-actions { gap: 8px; }
  .pz-pay-hero__tag-note { font-size: 0.8125rem; }
}

/* ── Exit confirmation popup (PzExit): centred, background dimmed, current screen stays visible ── */
.pz-exit-overlay { position: fixed; inset: 0; z-index: 10100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 22, 52, 0.55); }
.pz-exit-overlay[hidden] { display: none; }
.pz-exit-card { width: 100%; max-width: 340px; background: var(--pz-white, #fff); color: var(--pz-ink, #0f172a); border-radius: 20px; padding: 24px 20px 20px; text-align: center; box-shadow: 0 24px 60px rgba(8, 18, 45, 0.35); animation: pz-exit-in .16s ease-out; }
.pz-exit-card h3 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; color: var(--pz-blue, #1e3a8a); line-height: 1.25; }
.pz-exit-card p { margin: 0 0 20px; font-size: 0.875rem; line-height: 1.5; color: var(--pz-muted, #64748b); }
.pz-exit-card .btn-primary, .pz-exit-card .pz-btn-danger { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 14px 20px; border-radius: 16px; font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; }
.pz-exit-card .pz-btn-danger { margin-top: 10px; }
[data-theme="dark"] .pz-exit-card { background: #0f1b33; }
[data-theme="dark"] .pz-exit-card h3 { color: #e2e8f0; }
@keyframes pz-exit-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pz-exit-card { animation: none; } }

/* ── Quick send: tag icon, long tags stay inside the field ── */
.pz-pay-quick__field { padding-left: 12px; overflow: hidden; }
.pz-pay-quick__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--pz-blue); opacity: .85; }
.pz-pay-quick__input { text-overflow: ellipsis; }
.pz-pay-quick__input::placeholder { text-transform: none; letter-spacing: normal; }

/* A tag or name in a limited space is cut with an ellipsis; the full value is always kept (title, data-tag, input value) */
.pz-tag-ellipsis { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-tr-found { min-width: 0; flex: 1; }
.pz-pay-person__name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

/* Send money: available balance next to the amount, and the over-balance state */
.pz-tr-amount-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pz-tr-avail { font-size: 0.8125rem; color: var(--pz-muted, #64748b); white-space: nowrap; }
.pz-tr-avail strong { color: var(--pz-ink, #0f172a); font-weight: 700; }
.pz-tr-avail--over strong { color: var(--pz-danger, #dc2626); }
.field[aria-invalid="true"] { border-color: var(--pz-danger, #dc2626); }
.pz-sp-body .btn-primary[disabled]:not(.pz-busy) { opacity: .45; cursor: not-allowed; }
[data-theme="dark"] .pz-tr-avail strong { color: #f1f5f9; }

/* ── Pay tab: Platform features and Bills & Utilities (the dashboard quick-action style, two per row) ── */
.pz-quick-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pz-quick-grid--2 .pz-quick-btn { position: relative; padding: 20px 10px 18px; border-right: 1px solid var(--pz-line-soft); border-bottom: 1px solid var(--pz-line-soft); }
.pz-quick-grid--2 .pz-quick-btn:nth-child(2n) { border-right: none; }
.pz-quick-grid--2 .pz-quick-btn:nth-last-child(-n+2) { border-bottom: none; }
.pz-quick-grid--2 .pz-quick-btn__icon { width: 56px; height: 56px; border-radius: 16px; font-size: 1.4rem; }
.pz-quick-btn__desc { margin: 0; font-size: 0.75rem; line-height: 1.35; color: var(--pz-muted); }
/* The two real features carry the brand colour; the four bill shortcuts stay light and equal */
.pz-quick-btn--feature .pz-quick-btn__icon { background: var(--pz-blue); color: #fff; box-shadow: 0 6px 14px -6px rgba(30, 58, 138, 0.55); }
.pz-quick-btn--soon .pz-quick-btn__icon { opacity: .9; }
.pz-quick-btn__soon { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 999px; font-size: 0.625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--pz-blue-mist, #eff6ff); color: var(--pz-blue); }
[data-theme="dark"] .pz-quick-btn__soon { background: rgba(96,165,250,.16); color: #93c5fd; }
[data-theme="dark"] .pz-quick-btn--feature .pz-quick-btn__icon { background: #2563eb; }

/* Two-tone icons: a soft tint inside the outline makes the shape read as richer than a bare line icon */
.pz-ic--duo svg { fill: rgba(30, 58, 138, 0.14); stroke-width: 1.8; }
.pz-quick-btn--feature .pz-ic--duo svg { fill: rgba(255, 255, 255, 0.22); }
.pz-quick-grid--2 .pz-quick-btn__icon .pz-ic svg { width: 1.15em; height: 1.15em; }
[data-theme="dark"] .pz-ic--duo svg { fill: rgba(147, 197, 253, 0.18); }
/* Bill shortcuts have no subtext: a little more room above and below the icon and label */
.pz-quick-btn--soon { padding-top: 24px; padding-bottom: 20px; gap: 10px; }

/* ── Transaction summary and receipt (PzReceipt) ── */
.pz-rc-overlay { z-index: 9999; }
.pz-rc-brand { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid var(--pz-blue); margin-bottom: 14px; }
.pz-rc-brand img { height: 26px; width: auto; }
.pz-rc-brand span { font-size: 0.9375rem; font-weight: 700; color: var(--pz-blue); }
[data-theme="dark"] .pz-rc-brand span { color: #e2e8f0; }
.pz-rc-top, .pz-rc-hero { text-align: center; }
.pz-rc-top h2, .pz-rc-hero h2 { margin: 2px 0 8px; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.pz-rc-headline { margin: 0 0 2px; font-size: 0.8125rem; font-weight: 600; letter-spacing: .04em; color: var(--pz-muted); }
.pz-rc-hero .pz-rc-headline { font-size: 0.9375rem; text-transform: none; letter-spacing: 0; color: var(--pz-ink); font-weight: 700; margin-top: 4px; }
.pz-rc-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: #fff; }
.pz-rc-pill--completed { background: #15803d; } .pz-rc-pill--pending { background: #b45309; } .pz-rc-pill--failed { background: #b91c1c; }
.pz-tr-hero--pending i { color: #b45309; } .pz-tr-hero--failed i { color: #b91c1c; }
.pz-rc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 6px; }
.pz-rc-parties--one { grid-template-columns: 1fr; }
.pz-rc-party { min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--pz-surface-2, #f1f5f9); display: flex; flex-direction: column; gap: 2px; }
.pz-rc-plabel { font-size: 0.625rem; font-weight: 700; letter-spacing: .08em; color: var(--pz-muted); text-transform: uppercase; }
.pz-rc-plabel em { font-style: normal; font-weight: 600; letter-spacing: .04em; }
.pz-rc-party strong { font-size: 0.875rem; font-weight: 700; color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-rc-ptag { font-size: 0.75rem; color: var(--pz-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-rc-contrib { margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--pz-surface-2, #f1f5f9); }
.pz-rc-crow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--pz-line); }
.pz-rc-crow:first-of-type { border-top: 0; }
.pz-rc-crow > span { min-width: 0; display: flex; flex-direction: column; }
.pz-rc-crow strong { font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-rc-crow small { font-size: 0.6875rem; color: var(--pz-muted); }
.pz-rc-crow b { font-size: 0.8125rem; white-space: nowrap; }
.pz-rc-rows dd { text-align: right; overflow-wrap: anywhere; }
.pz-rc-ref { font-variant-numeric: tabular-nums; }
.pz-rc-copy { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--pz-line); border-radius: 999px; background: transparent; color: var(--pz-blue); font-size: 0.6875rem; font-weight: 700; cursor: pointer; }
.pz-rc-actions { margin-top: 14px; }
[data-theme="dark"] .pz-rc-party, [data-theme="dark"] .pz-rc-contrib { background: #1a2130; }
@media (max-width: 340px) { .pz-rc-parties { grid-template-columns: 1fr; } }

/* Share chooser: two equal choices, nothing preselected */
.pz-rc-chooser { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 22, 52, 0.55); }
.pz-rc-chooser__card { width: 100%; max-width: 340px; padding: 22px 18px 18px; border-radius: 20px; background: var(--pz-white, #fff); text-align: center; box-shadow: 0 24px 60px rgba(8, 18, 45, 0.35); }
.pz-rc-chooser__card h3 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 700; color: var(--pz-blue); }
.pz-rc-chooser__card p { margin: 0 0 14px; font-size: 0.8125rem; color: var(--pz-muted); }
.pz-rc-chooser__card .btn-primary, .pz-rc-chooser__card .pz-sp-btn-ghost { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 10px; padding: 14px 20px; border-radius: 16px; font-size: 0.9375rem; font-weight: 600; }
[data-theme="dark"] .pz-rc-chooser__card { background: #0f1b33; } [data-theme="dark"] .pz-rc-chooser__card h3 { color: #e2e8f0; }

/* ══════════════════════════════════════════════════════════════
   HISTORY CAROUSEL
   Slim image-only promo banner at the top of the History page.
   Reference slot is 320 x 100 (32:10); scales with screen width.
   Independent of the Dashboard Carousel (.pz-banner-*).
══════════════════════════════════════════════════════════════ */
.pz-hbanner { width: 100%; }
.pz-hbanner[hidden] { display: none; }

.pz-hbanner__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 32 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--pz-line-soft, #e2e8f0);
  touch-action: pan-y;
}

.pz-hbanner__track {
  display: flex;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.pz-hbanner__slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  display: block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.pz-hbanner__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.pz-hbanner__dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding-top: 8px;
}
.pz-hbanner__dots:empty { display: none; }

.pz-hbanner__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--pz-line, #cbd5e1);
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
}
.pz-hbanner__dot--active {
  width: 14px;
  border-radius: 3px;
  background: var(--pz-blue, #1e3a8a);
}

@media (min-width: 640px) {
  .pz-hbanner { max-width: 640px; }
}

@media (prefers-reduced-motion: reduce) {
  .pz-hbanner__track { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   FIND PEOPLE (Propzora Pay)
   Sits under Transfer / Request Pay so those sheets open on top of it.
══════════════════════════════════════════════════════════════ */
.pz-acc-findpeople { --acc: var(--pz-blue, #1e3a8a); --acc-hover: var(--pz-blue-hover, #172e6e); z-index: 9990; }
[data-theme="dark"] .pz-acc-findpeople { --acc: #2563eb; --acc-hover: #3b82f6; }
.pz-acc-findpeople .btn-primary { background: var(--acc); background-image: none; border-color: var(--acc); box-shadow: none; }
.pz-acc-findpeople .btn-primary:hover { background: var(--acc-hover); background-image: none; }
.pz-acc-findpeople .pz-sp-link { color: var(--acc); }
.pz-acc-findpeople .pz-sp-sheet { height: min(88vh, 760px); }
.pz-acc-findpeople .pz-sp-body { flex: 1; min-height: 0; }
@media (min-width: 768px) {
  .pz-acc-findpeople { align-items: center; }
  .pz-acc-findpeople .pz-sp-sheet { max-width: 560px; border-radius: 24px; height: min(720px, 86vh); padding-left: 24px; padding-right: 24px; }
  .pz-acc-findpeople .pz-sp-handle { display: none; }
}

.pz-fp-block { width: 100%; margin-top: 10px; }
.pz-fp-fine { font-size: var(--text-xs); color: var(--pz-muted); text-align: center; line-height: 1.55; margin: 14px 0 0; }

/* intro */
.pz-fp-hero { text-align: center; padding: 6px 4px 14px; }
.pz-fp-hero h2 { margin: 12px 0 6px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--pz-ink); }
.pz-fp-hero p { margin: 0 auto; max-width: 36ch; font-size: var(--text-sm); color: var(--pz-muted); line-height: 1.55; }
.pz-fp-hero__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 20px; background: linear-gradient(145deg, #1e3a8a, #2f55c4); color: #fff; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(30,58,138,0.25); }
.pz-fp-hero--warn .pz-fp-hero__icon { background: #fef3c7; color: #b45309; box-shadow: none; }
.pz-fp-points { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 10px; }
.pz-fp-points li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-sm); color: var(--pz-ink); line-height: 1.5; }
.pz-fp-points i { flex: none; width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(30,58,138,0.08); color: var(--pz-blue, #1e3a8a); font-size: 0.8125rem; }

/* discovery switch card */
.pz-fp-discover { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 12px; border: 1px solid var(--pz-line); border-radius: 16px; background: var(--pz-surface-2, #f8fafc); }
.pz-fp-discover__icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(30,58,138,0.10); color: var(--pz-blue, #1e3a8a); }
.pz-fp-discover__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pz-fp-discover__text strong { font-size: var(--text-sm); color: var(--pz-ink); }
.pz-fp-discover__text span { font-size: var(--text-xs); color: var(--pz-muted); line-height: 1.45; }
.pz-fp-switch { position: relative; flex: none; width: 46px; height: 28px; display: inline-block; cursor: pointer; }
.pz-fp-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.pz-fp-switch__track { position: absolute; inset: 0; border-radius: 99px; background: #cbd5e1; transition: background 0.2s; }
.pz-fp-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s; }
.pz-fp-switch input:checked + .pz-fp-switch__track { background: var(--pz-blue, #1e3a8a); }
.pz-fp-switch input:checked + .pz-fp-switch__track::after { transform: translateX(18px); }
.pz-fp-switch input:focus-visible + .pz-fp-switch__track { outline: 2px solid var(--pz-blue, #1e3a8a); outline-offset: 2px; }
.pz-fp-switch input:disabled + .pz-fp-switch__track { opacity: 0.6; }

/* search */
.pz-fp-search { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 0 14px; margin: 0 0 4px; height: 48px; border: 1px solid var(--pz-line); border-radius: 14px; background: var(--pz-surface, #fff); color: var(--pz-muted); transition: border-color 0.15s, box-shadow 0.15s; }
.pz-fp-search:focus-within { border-color: var(--pz-blue, #1e3a8a); box-shadow: 0 0 0 3px var(--pz-blue-soft, rgba(30,58,138,0.12)); }
.pz-fp-search__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--pz-ink); }
.pz-fp-search__input::placeholder { color: var(--pz-faint, #94a3b8); }

/* section headings */
.pz-fp-sec { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pz-muted); }
.pz-fp-sec em { font-style: normal; font-size: 0.6875rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(30,58,138,0.10); color: var(--pz-blue, #1e3a8a); }
.pz-fp-empty { margin: 0 0 4px; padding: 14px 16px; border: 1px dashed var(--pz-line); border-radius: 14px; font-size: var(--text-sm); color: var(--pz-muted); line-height: 1.5; }

/* contact cards */
.pz-fp-card { border: 1px solid var(--pz-line); border-radius: 18px; background: var(--pz-surface, #fff); padding: 12px 14px; margin: 0 0 10px; box-shadow: 0 1px 3px rgba(15,23,42,0.04); }
.pz-fp-card__top { display: flex; align-items: center; gap: 12px; }
.pz-fp-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pz-fp-card__info strong { font-size: 0.9375rem; color: var(--pz-ink); }
.pz-fp-card__sub { font-size: var(--text-xs); color: var(--pz-muted); }
.pz-fp-card__phone { font-size: var(--text-xs); color: var(--pz-faint, #94a3b8); }
.pz-fp-ok { color: #16a34a; margin-right: 4px; }
.pz-fp-avatar { width: 44px; height: 44px; font-size: var(--text-sm); }
.pz-fp-avatar--muted { background: #eef2f7; color: #64748b; }
.pz-fp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

/* The two actions are deliberately different: Transfer is solid navy, Request Pay is green and outlined */
.pz-fp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; border: 1.5px solid transparent; transition: transform 0.12s, background 0.15s, border-color 0.15s; -webkit-tap-highlight-color: transparent; }
.pz-fp-btn:active { transform: scale(0.97); }
.pz-fp-btn--transfer { background: var(--pz-blue, #1e3a8a); color: #fff; }
.pz-fp-btn--transfer:hover { background: var(--pz-blue-hover, #172e6e); }
.pz-fp-btn--request { background: #f0fdf4; color: #15803d; border-color: #86efac; }
.pz-fp-btn--request:hover { background: #dcfce7; border-color: #4ade80; }
.pz-fp-btn--invite { flex: none; background: transparent; color: var(--pz-blue, #1e3a8a); border-color: rgba(30,58,138,0.35); min-height: 38px; }
.pz-fp-btn--invite:hover { background: rgba(30,58,138,0.06); }
[data-theme="dark"] .pz-fp-btn--request { background: rgba(34,197,94,0.12); color: #4ade80; border-color: rgba(74,222,128,0.4); }
[data-theme="dark"] .pz-fp-btn--invite { color: #93c5fd; border-color: rgba(147,197,253,0.4); }
@media (max-width: 360px) { .pz-fp-actions { grid-template-columns: 1fr; } }

/* typed number, not in contacts */
.pz-fp-check { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 10px; padding: 13px 14px; border: 1px solid var(--pz-line); border-radius: 14px; background: var(--pz-surface-2, #f8fafc); color: var(--pz-ink); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.pz-fp-check span { flex: 1; min-width: 0; }
.pz-fp-check i { color: var(--pz-blue, #1e3a8a); }
.pz-fp-notfound { margin: 14px 0; padding: 16px; border: 1px solid var(--pz-line); border-radius: 16px; background: var(--pz-surface-2, #f8fafc); display: grid; gap: 8px; justify-items: start; }
.pz-fp-notfound p { margin: 0; font-size: var(--text-sm); color: var(--pz-muted); line-height: 1.5; }

.pz-fp-foot { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 0; font-size: var(--text-sm); }

/* invite */
.pz-fp-quote { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--pz-blue, #1e3a8a); background: var(--pz-surface-2, #f8fafc); border-radius: 0 12px 12px 0; font-size: var(--text-sm); color: var(--pz-ink); line-height: 1.55; word-break: break-word; }
.pz-fp-opts { display: grid; gap: 8px; }
.pz-fp-opt { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid var(--pz-line); border-radius: 14px; background: var(--pz-surface, #fff); color: var(--pz-ink); font: inherit; font-size: 0.9375rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.pz-fp-opt span:not(.pz-fp-opt__ic) { flex: 1; }
.pz-fp-opt > i { color: var(--pz-faint, #94a3b8); font-size: 0.75rem; }
.pz-fp-opt:hover { border-color: rgba(30,58,138,0.4); }
.pz-fp-opt__ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(30,58,138,0.10); color: var(--pz-blue, #1e3a8a); }
.pz-fp-opt__ic--wa { background: #dcfce7; color: #16a34a; }

/* Pay tab entry */
.pz-pay-find { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--pz-line-soft); border-radius: 16px; background: var(--pz-surface); color: var(--pz-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.12s; -webkit-tap-highlight-color: transparent; }
.pz-pay-find:active { transform: scale(0.99); }
@media (hover: hover) { .pz-pay-find:hover { border-color: rgba(30,58,138,0.35); } }
.pz-pay-find__icon { flex: none; width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #1e3a8a, #2f55c4); color: #fff; font-size: 0.9375rem; }
.pz-pay-find__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pz-pay-find__text strong { font-size: 0.9375rem; font-weight: 700; }
.pz-pay-find__text span { font-size: var(--text-xs); color: var(--pz-muted); }
.pz-pay-find > i { color: var(--pz-faint, #94a3b8); font-size: 0.75rem; }