/* BazaarPay design tokens — static CSS (no Tailwind / no build step) */
:root {
  --bp-primary: #a53d00;
  --bp-primary-container: #ff6200;
  --bp-primary-fixed: #ffdbcd;
  --bp-primary-fixed-dim: #ffb597;
  --bp-surface-tint: #a53d00;
  --bp-secondary: #4059aa;
  --bp-secondary-container: #8fa7fe;
  --bp-secondary-fixed: #dce1ff;
  --bp-secondary-fixed-dim: #b6c4ff;
  --bp-tertiary: #565e74;
  --bp-tertiary-container: #8d94ad;
  --bp-tertiary-fixed-dim: #bec6e0;
  --bp-background: #f8f9ff;
  --bp-surface: #f8f9ff;
  --bp-surface-dim: #cbdbf5;
  --bp-surface-variant: #d3e4fe;
  --bp-surface-container: #e5eeff;
  --bp-surface-container-low: #eff4ff;
  --bp-surface-container-high: #dce9ff;
  --bp-surface-container-highest: #d3e4fe;
  --bp-surface-container-lowest: #ffffff;
  --bp-on-background: #0b1c30;
  --bp-on-surface: #0b1c30;
  --bp-on-surface-variant: #5a4137;
  --bp-on-primary: #ffffff;
  --bp-on-primary-container: #541b00;
  --bp-on-primary-fixed: #360f00;
  --bp-on-primary-fixed-variant: #7e2c00;
  --bp-on-secondary: #ffffff;
  --bp-on-secondary-container: #1d3989;
  --bp-on-secondary-fixed: #00164e;
  --bp-on-secondary-fixed-variant: #264191;
  --bp-on-tertiary-container: #252d41;
  --bp-outline: #8f7065;
  --bp-outline-variant: #e3bfb1;
  --bp-error: #ba1a1a;
  --bp-success-inflow: #16a34a;
  --bp-error-outflow: #dc2626;
  --bp-inverse-surface: #213145;
  --bp-brand-pink: #d81b60;
  --bp-stack-sm: 8px;
  --bp-stack-md: 16px;
  --bp-stack-lg: 32px;
  --bp-gutter: 24px;
  --bp-section-gap: 48px;
  --bp-container-max: 640px;
  --bp-margin-desktop: 40px;
  --bp-gutter-app: 16px;
  --bp-base: 8px;
  --bp-container-margin: 20px;
  --bp-touch-target: 48px;
  --bp-radius: 0.25rem;
  --bp-radius-lg: 0.5rem;
  --bp-radius-xl: 0.75rem;
  --bp-font-sans: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --bp-font-inter: Inter, system-ui, sans-serif;
}

/* Dashboard palette (pages 05–08) */
.bp-dashboard {
  --bp-background: #f7f9fb;
  --bp-surface: #f7f9fb;
  --bp-surface-dim: #d8dadc;
  --bp-surface-variant: #e0e3e5;
  --bp-surface-container: #eceef0;
  --bp-surface-container-low: #f2f4f6;
  --bp-surface-container-high: #e6e8ea;
  --bp-surface-container-highest: #e0e3e5;
  --bp-on-background: #191c1e;
  --bp-on-surface: #191c1e;
  --bp-tertiary: #006a63;
  --bp-tertiary-container: #4ca39a;
}

/* BazaarPay static utilities */
.bg-primary { background-color: var(--bp-primary); }
.text-primary { color: var(--bp-primary); }
.border-primary { border-color: var(--bp-primary); }
.hover\:bg- { background-color: var(--bp-primary); }
.hover\:text- { color: var(--bp-primary); }
.hover\:border- { border-color: var(--bp-primary); }
.focus\:border- { border-color: var(--bp-primary); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-primary); }
.placeholder\:text-primary::placeholder { color: var(--bp-primary); }
.divide-primary > * + * { border-color: var(--bp-primary); }
.bg-primary-container { background-color: var(--bp-primary-container); }
.text-primary-container { color: var(--bp-primary-container); }
.border-primary-container { border-color: var(--bp-primary-container); }
.hover\:bg- { background-color: var(--bp-primary-container); }
.hover\:text- { color: var(--bp-primary-container); }
.hover\:border- { border-color: var(--bp-primary-container); }
.focus\:border- { border-color: var(--bp-primary-container); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-primary-container); }
.placeholder\:text-primary-container::placeholder { color: var(--bp-primary-container); }
.divide-primary-container > * + * { border-color: var(--bp-primary-container); }
.bg-primary-fixed { background-color: var(--bp-primary-fixed); }
.text-primary-fixed { color: var(--bp-primary-fixed); }
.border-primary-fixed { border-color: var(--bp-primary-fixed); }
.hover\:bg- { background-color: var(--bp-primary-fixed); }
.hover\:text- { color: var(--bp-primary-fixed); }
.hover\:border- { border-color: var(--bp-primary-fixed); }
.focus\:border- { border-color: var(--bp-primary-fixed); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-primary-fixed); }
.placeholder\:text-primary-fixed::placeholder { color: var(--bp-primary-fixed); }
.divide-primary-fixed > * + * { border-color: var(--bp-primary-fixed); }
.bg-primary-fixed-dim { background-color: var(--bp-primary-fixed-dim); }
.text-primary-fixed-dim { color: var(--bp-primary-fixed-dim); }
.border-primary-fixed-dim { border-color: var(--bp-primary-fixed-dim); }
.hover\:bg- { background-color: var(--bp-primary-fixed-dim); }
.hover\:text- { color: var(--bp-primary-fixed-dim); }
.hover\:border- { border-color: var(--bp-primary-fixed-dim); }
.focus\:border- { border-color: var(--bp-primary-fixed-dim); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-primary-fixed-dim); }
.placeholder\:text-primary-fixed-dim::placeholder { color: var(--bp-primary-fixed-dim); }
.divide-primary-fixed-dim > * + * { border-color: var(--bp-primary-fixed-dim); }
.bg-surface-tint { background-color: var(--bp-surface-tint); }
.text-surface-tint { color: var(--bp-surface-tint); }
.border-surface-tint { border-color: var(--bp-surface-tint); }
.hover\:bg- { background-color: var(--bp-surface-tint); }
.hover\:text- { color: var(--bp-surface-tint); }
.hover\:border- { border-color: var(--bp-surface-tint); }
.focus\:border- { border-color: var(--bp-surface-tint); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-surface-tint); }
.placeholder\:text-surface-tint::placeholder { color: var(--bp-surface-tint); }
.divide-surface-tint > * + * { border-color: var(--bp-surface-tint); }
.bg-secondary { background-color: var(--bp-secondary); }
.text-secondary { color: var(--bp-secondary); }
.border-secondary { border-color: var(--bp-secondary); }
.hover\:bg- { background-color: var(--bp-secondary); }
.hover\:text- { color: var(--bp-secondary); }
.hover\:border- { border-color: var(--bp-secondary); }
.focus\:border- { border-color: var(--bp-secondary); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-secondary); }
.placeholder\:text-secondary::placeholder { color: var(--bp-secondary); }
.divide-secondary > * + * { border-color: var(--bp-secondary); }
.bg-secondary-container { background-color: var(--bp-secondary-container); }
.text-secondary-container { color: var(--bp-secondary-container); }
.border-secondary-container { border-color: var(--bp-secondary-container); }
.hover\:bg- { background-color: var(--bp-secondary-container); }
.hover\:text- { color: var(--bp-secondary-container); }
.hover\:border- { border-color: var(--bp-secondary-container); }
.focus\:border- { border-color: var(--bp-secondary-container); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-secondary-container); }
.placeholder\:text-secondary-container::placeholder { color: var(--bp-secondary-container); }
.divide-secondary-container > * + * { border-color: var(--bp-secondary-container); }
.bg-secondary-fixed { background-color: var(--bp-secondary-fixed); }
.text-secondary-fixed { color: var(--bp-secondary-fixed); }
.border-secondary-fixed { border-color: var(--bp-secondary-fixed); }
.hover\:bg- { background-color: var(--bp-secondary-fixed); }
.hover\:text- { color: var(--bp-secondary-fixed); }
.hover\:border- { border-color: var(--bp-secondary-fixed); }
.focus\:border- { border-color: var(--bp-secondary-fixed); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-secondary-fixed); }
.placeholder\:text-secondary-fixed::placeholder { color: var(--bp-secondary-fixed); }
.divide-secondary-fixed > * + * { border-color: var(--bp-secondary-fixed); }
.bg-secondary-fixed-dim { background-color: var(--bp-secondary-fixed-dim); }
.text-secondary-fixed-dim { color: var(--bp-secondary-fixed-dim); }
.border-secondary-fixed-dim { border-color: var(--bp-secondary-fixed-dim); }
.hover\:bg- { background-color: var(--bp-secondary-fixed-dim); }
.hover\:text- { color: var(--bp-secondary-fixed-dim); }
.hover\:border- { border-color: var(--bp-secondary-fixed-dim); }
.focus\:border- { border-color: var(--bp-secondary-fixed-dim); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-secondary-fixed-dim); }
.placeholder\:text-secondary-fixed-dim::placeholder { color: var(--bp-secondary-fixed-dim); }
.divide-secondary-fixed-dim > * + * { border-color: var(--bp-secondary-fixed-dim); }
.bg-tertiary { background-color: var(--bp-tertiary); }
.text-tertiary { color: var(--bp-tertiary); }
.border-tertiary { border-color: var(--bp-tertiary); }
.hover\:bg- { background-color: var(--bp-tertiary); }
.hover\:text- { color: var(--bp-tertiary); }
.hover\:border- { border-color: var(--bp-tertiary); }
.focus\:border- { border-color: var(--bp-tertiary); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-tertiary); }
.placeholder\:text-tertiary::placeholder { color: var(--bp-tertiary); }
.divide-tertiary > * + * { border-color: var(--bp-tertiary); }
.bg-tertiary-container { background-color: var(--bp-tertiary-container); }
.text-tertiary-container { color: var(--bp-tertiary-container); }
.border-tertiary-container { border-color: var(--bp-tertiary-container); }
.hover\:bg- { background-color: var(--bp-tertiary-container); }
.hover\:text- { color: var(--bp-tertiary-container); }
.hover\:border- { border-color: var(--bp-tertiary-container); }
.focus\:border- { border-color: var(--bp-tertiary-container); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-tertiary-container); }
.placeholder\:text-tertiary-container::placeholder { color: var(--bp-tertiary-container); }
.divide-tertiary-container > * + * { border-color: var(--bp-tertiary-container); }
.bg-tertiary-fixed-dim { background-color: var(--bp-tertiary-fixed-dim); }
.text-tertiary-fixed-dim { color: var(--bp-tertiary-fixed-dim); }
.border-tertiary-fixed-dim { border-color: var(--bp-tertiary-fixed-dim); }
.hover\:bg- { background-color: var(--bp-tertiary-fixed-dim); }
.hover\:text- { color: var(--bp-tertiary-fixed-dim); }
.hover\:border- { border-color: var(--bp-tertiary-fixed-dim); }
.focus\:border- { border-color: var(--bp-tertiary-fixed-dim); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-tertiary-fixed-dim); }
.placeholder\:text-tertiary-fixed-dim::placeholder { color: var(--bp-tertiary-fixed-dim); }
.divide-tertiary-fixed-dim > * + * { border-color: var(--bp-tertiary-fixed-dim); }
.bg-background { background-color: var(--bp-background); }
.text-background { color: var(--bp-background); }
.border-background { border-color: var(--bp-background); }
.hover\:bg- { background-color: var(--bp-background); }
.hover\:text- { color: var(--bp-background); }
.hover\:border- { border-color: var(--bp-background); }
.focus\:border- { border-color: var(--bp-background); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-background); }
.placeholder\:text-background::placeholder { color: var(--bp-background); }
.divide-background > * + * { border-color: var(--bp-background); }
.bg-surface { background-color: var(--bp-surface); }
.text-surface { color: var(--bp-surface); }
.border-surface { border-color: var(--bp-surface); }
.hover\:bg- { background-color: var(--bp-surface); }
.hover\:text- { color: var(--bp-surface); }
.hover\:border- { border-color: var(--bp-surface); }
.focus\:border- { border-color: var(--bp-surface); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-surface); }
.placeholder\:text-surface::placeholder { color: var(--bp-surface); }
.divide-surface > * + * { border-color: var(--bp-surface); }
.bg-surface-dim { background-color: var(--bp-surface-dim); }
.text-surface-dim { color: var(--bp-surface-dim); }
.border-surface-dim { border-color: var(--bp-surface-dim); }
.hover\:bg- { background-color: var(--bp-surface-dim); }
.hover\:text- { color: var(--bp-surface-dim); }
.hover\:border- { border-color: var(--bp-surface-dim); }
.focus\:border- { border-color: var(--bp-surface-dim); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-surface-dim); }
.placeholder\:text-surface-dim::placeholder { color: var(--bp-surface-dim); }
.divide-surface-dim > * + * { border-color: var(--bp-surface-dim); }
.bg-surface-variant { background-color: var(--bp-surface-variant); }
.text-surface-variant { color: var(--bp-surface-variant); }
.border-surface-variant { border-color: var(--bp-surface-variant); }
.hover\:bg- { background-color: var(--bp-surface-variant); }
.hover\:text- { color: var(--bp-surface-variant); }
.hover\:border- { border-color: var(--bp-surface-variant); }
.focus\:border- { border-color: var(--bp-surface-variant); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-surface-variant); }
.placeholder\:text-surface-variant::placeholder { color: var(--bp-surface-variant); }
.divide-surface-variant > * + * { border-color: var(--bp-surface-variant); }
.bg-surface-container { background-color: var(--bp-surface-container); }
.text-surface-container { color: var(--bp-surface-container); }
.border-surface-container { border-color: var(--bp-surface-container); }
.hover\:bg- { background-color: var(--bp-surface-container); }
.hover\:text- { color: var(--bp-surface-container); }
.hover\:border- { border-color: var(--bp-surface-container); }
.focus\:border- { border-color: var(--bp-surface-container); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-surface-container); }
.placeholder\:text-surface-container::placeholder { color: var(--bp-surface-container); }
.divide-surface-container > * + * { border-color: var(--bp-surface-container); }
.bg-surface-container-low { background-color: var(--bp-surface-container-low); }
.text-surface-container-low { color: var(--bp-surface-container-low); }
.border-surface-container-low { border-color: var(--bp-surface-container-low); }
.hover\:bg- { background-color: var(--bp-surface-container-low); }
.hover\:text- { color: var(--bp-surface-container-low); }
.hover\:border- { border-color: var(--bp-surface-container-low); }
.focus\:border- { border-color: var(--bp-surface-container-low); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-surface-container-low); }
.placeholder\:text-surface-container-low::placeholder { color: var(--bp-surface-container-low); }
.divide-surface-container-low > * + * { border-color: var(--bp-surface-container-low); }
.bg-surface-container-high { background-color: var(--bp-surface-container-high); }
.text-surface-container-high { color: var(--bp-surface-container-high); }
.border-surface-container-high { border-color: var(--bp-surface-container-high); }
.hover\:bg- { background-color: var(--bp-surface-container-high); }
.hover\:text- { color: var(--bp-surface-container-high); }
.hover\:border- { border-color: var(--bp-surface-container-high); }
.focus\:border- { border-color: var(--bp-surface-container-high); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-surface-container-high); }
.placeholder\:text-surface-container-high::placeholder { color: var(--bp-surface-container-high); }
.divide-surface-container-high > * + * { border-color: var(--bp-surface-container-high); }
.bg-surface-container-highest { background-color: var(--bp-surface-container-highest); }
.text-surface-container-highest { color: var(--bp-surface-container-highest); }
.border-surface-container-highest { border-color: var(--bp-surface-container-highest); }
.hover\:bg- { background-color: var(--bp-surface-container-highest); }
.hover\:text- { color: var(--bp-surface-container-highest); }
.hover\:border- { border-color: var(--bp-surface-container-highest); }
.focus\:border- { border-color: var(--bp-surface-container-highest); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-surface-container-highest); }
.placeholder\:text-surface-container-highest::placeholder { color: var(--bp-surface-container-highest); }
.divide-surface-container-highest > * + * { border-color: var(--bp-surface-container-highest); }
.bg-surface-container-lowest { background-color: var(--bp-surface-container-lowest); }
.text-surface-container-lowest { color: var(--bp-surface-container-lowest); }
.border-surface-container-lowest { border-color: var(--bp-surface-container-lowest); }
.hover\:bg- { background-color: var(--bp-surface-container-lowest); }
.hover\:text- { color: var(--bp-surface-container-lowest); }
.hover\:border- { border-color: var(--bp-surface-container-lowest); }
.focus\:border- { border-color: var(--bp-surface-container-lowest); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-surface-container-lowest); }
.placeholder\:text-surface-container-lowest::placeholder { color: var(--bp-surface-container-lowest); }
.divide-surface-container-lowest > * + * { border-color: var(--bp-surface-container-lowest); }
.bg-surface-lowest { background-color: var(--bp-surface-container-lowest); }
.text-surface-lowest { color: var(--bp-surface-container-lowest); }
.border-surface-lowest { border-color: var(--bp-surface-container-lowest); }
.hover\:bg- { background-color: var(--bp-surface-container-lowest); }
.hover\:text- { color: var(--bp-surface-container-lowest); }
.hover\:border- { border-color: var(--bp-surface-container-lowest); }
.focus\:border- { border-color: var(--bp-surface-container-lowest); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-surface-container-lowest); }
.placeholder\:text-surface-lowest::placeholder { color: var(--bp-surface-container-lowest); }
.divide-surface-lowest > * + * { border-color: var(--bp-surface-container-lowest); }
.bg-on-background { background-color: var(--bp-on-background); }
.text-on-background { color: var(--bp-on-background); }
.border-on-background { border-color: var(--bp-on-background); }
.hover\:bg- { background-color: var(--bp-on-background); }
.hover\:text- { color: var(--bp-on-background); }
.hover\:border- { border-color: var(--bp-on-background); }
.focus\:border- { border-color: var(--bp-on-background); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-on-background); }
.placeholder\:text-on-background::placeholder { color: var(--bp-on-background); }
.divide-on-background > * + * { border-color: var(--bp-on-background); }
.bg-on-surface { background-color: var(--bp-on-surface); }
.text-on-surface { color: var(--bp-on-surface); }
.border-on-surface { border-color: var(--bp-on-surface); }
.hover\:bg- { background-color: var(--bp-on-surface); }
.hover\:text- { color: var(--bp-on-surface); }
.hover\:border- { border-color: var(--bp-on-surface); }
.focus\:border- { border-color: var(--bp-on-surface); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-on-surface); }
.placeholder\:text-on-surface::placeholder { color: var(--bp-on-surface); }
.divide-on-surface > * + * { border-color: var(--bp-on-surface); }
.bg-on-surface-variant { background-color: var(--bp-on-surface-variant); }
.text-on-surface-variant { color: var(--bp-on-surface-variant); }
.border-on-surface-variant { border-color: var(--bp-on-surface-variant); }
.hover\:bg- { background-color: var(--bp-on-surface-variant); }
.hover\:text- { color: var(--bp-on-surface-variant); }
.hover\:border- { border-color: var(--bp-on-surface-variant); }
.focus\:border- { border-color: var(--bp-on-surface-variant); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-on-surface-variant); }
.placeholder\:text-on-surface-variant::placeholder { color: var(--bp-on-surface-variant); }
.divide-on-surface-variant > * + * { border-color: var(--bp-on-surface-variant); }
.bg-on-primary { background-color: var(--bp-on-primary); }
.text-on-primary { color: var(--bp-on-primary); }
.border-on-primary { border-color: var(--bp-on-primary); }
.hover\:bg- { background-color: var(--bp-on-primary); }
.hover\:text- { color: var(--bp-on-primary); }
.hover\:border- { border-color: var(--bp-on-primary); }
.focus\:border- { border-color: var(--bp-on-primary); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-on-primary); }
.placeholder\:text-on-primary::placeholder { color: var(--bp-on-primary); }
.divide-on-primary > * + * { border-color: var(--bp-on-primary); }
.bg-on-primary-container { background-color: var(--bp-on-primary-container); }
.text-on-primary-container { color: var(--bp-on-primary-container); }
.border-on-primary-container { border-color: var(--bp-on-primary-container); }
.hover\:bg- { background-color: var(--bp-on-primary-container); }
.hover\:text- { color: var(--bp-on-primary-container); }
.hover\:border- { border-color: var(--bp-on-primary-container); }
.focus\:border- { border-color: var(--bp-on-primary-container); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-on-primary-container); }
.placeholder\:text-on-primary-container::placeholder { color: var(--bp-on-primary-container); }
.divide-on-primary-container > * + * { border-color: var(--bp-on-primary-container); }
.bg-on-primary-fixed { background-color: var(--bp-on-primary-fixed); }
.text-on-primary-fixed { color: var(--bp-on-primary-fixed); }
.border-on-primary-fixed { border-color: var(--bp-on-primary-fixed); }
.hover\:bg- { background-color: var(--bp-on-primary-fixed); }
.hover\:text- { color: var(--bp-on-primary-fixed); }
.hover\:border- { border-color: var(--bp-on-primary-fixed); }
.focus\:border- { border-color: var(--bp-on-primary-fixed); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-on-primary-fixed); }
.placeholder\:text-on-primary-fixed::placeholder { color: var(--bp-on-primary-fixed); }
.divide-on-primary-fixed > * + * { border-color: var(--bp-on-primary-fixed); }
.bg-on-primary-fixed-variant { background-color: var(--bp-on-primary-fixed-variant); }
.text-on-primary-fixed-variant { color: var(--bp-on-primary-fixed-variant); }
.border-on-primary-fixed-variant { border-color: var(--bp-on-primary-fixed-variant); }
.hover\:bg- { background-color: var(--bp-on-primary-fixed-variant); }
.hover\:text- { color: var(--bp-on-primary-fixed-variant); }
.hover\:border- { border-color: var(--bp-on-primary-fixed-variant); }
.focus\:border- { border-color: var(--bp-on-primary-fixed-variant); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-on-primary-fixed-variant); }
.placeholder\:text-on-primary-fixed-variant::placeholder { color: var(--bp-on-primary-fixed-variant); }
.divide-on-primary-fixed-variant > * + * { border-color: var(--bp-on-primary-fixed-variant); }
.bg-on-secondary { background-color: var(--bp-on-secondary); }
.text-on-secondary { color: var(--bp-on-secondary); }
.border-on-secondary { border-color: var(--bp-on-secondary); }
.hover\:bg- { background-color: var(--bp-on-secondary); }
.hover\:text- { color: var(--bp-on-secondary); }
.hover\:border- { border-color: var(--bp-on-secondary); }
.focus\:border- { border-color: var(--bp-on-secondary); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-on-secondary); }
.placeholder\:text-on-secondary::placeholder { color: var(--bp-on-secondary); }
.divide-on-secondary > * + * { border-color: var(--bp-on-secondary); }
.bg-on-secondary-container { background-color: var(--bp-on-secondary-container); }
.text-on-secondary-container { color: var(--bp-on-secondary-container); }
.border-on-secondary-container { border-color: var(--bp-on-secondary-container); }
.hover\:bg- { background-color: var(--bp-on-secondary-container); }
.hover\:text- { color: var(--bp-on-secondary-container); }
.hover\:border- { border-color: var(--bp-on-secondary-container); }
.focus\:border- { border-color: var(--bp-on-secondary-container); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-on-secondary-container); }
.placeholder\:text-on-secondary-container::placeholder { color: var(--bp-on-secondary-container); }
.divide-on-secondary-container > * + * { border-color: var(--bp-on-secondary-container); }
.bg-on-secondary-fixed { background-color: var(--bp-on-secondary-fixed); }
.text-on-secondary-fixed { color: var(--bp-on-secondary-fixed); }
.border-on-secondary-fixed { border-color: var(--bp-on-secondary-fixed); }
.hover\:bg- { background-color: var(--bp-on-secondary-fixed); }
.hover\:text- { color: var(--bp-on-secondary-fixed); }
.hover\:border- { border-color: var(--bp-on-secondary-fixed); }
.focus\:border- { border-color: var(--bp-on-secondary-fixed); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-on-secondary-fixed); }
.placeholder\:text-on-secondary-fixed::placeholder { color: var(--bp-on-secondary-fixed); }
.divide-on-secondary-fixed > * + * { border-color: var(--bp-on-secondary-fixed); }
.bg-on-secondary-fixed-variant { background-color: var(--bp-on-secondary-fixed-variant); }
.text-on-secondary-fixed-variant { color: var(--bp-on-secondary-fixed-variant); }
.border-on-secondary-fixed-variant { border-color: var(--bp-on-secondary-fixed-variant); }
.hover\:bg- { background-color: var(--bp-on-secondary-fixed-variant); }
.hover\:text- { color: var(--bp-on-secondary-fixed-variant); }
.hover\:border- { border-color: var(--bp-on-secondary-fixed-variant); }
.focus\:border- { border-color: var(--bp-on-secondary-fixed-variant); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-on-secondary-fixed-variant); }
.placeholder\:text-on-secondary-fixed-variant::placeholder { color: var(--bp-on-secondary-fixed-variant); }
.divide-on-secondary-fixed-variant > * + * { border-color: var(--bp-on-secondary-fixed-variant); }
.bg-on-tertiary-container { background-color: var(--bp-on-tertiary-container); }
.text-on-tertiary-container { color: var(--bp-on-tertiary-container); }
.border-on-tertiary-container { border-color: var(--bp-on-tertiary-container); }
.hover\:bg- { background-color: var(--bp-on-tertiary-container); }
.hover\:text- { color: var(--bp-on-tertiary-container); }
.hover\:border- { border-color: var(--bp-on-tertiary-container); }
.focus\:border- { border-color: var(--bp-on-tertiary-container); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-on-tertiary-container); }
.placeholder\:text-on-tertiary-container::placeholder { color: var(--bp-on-tertiary-container); }
.divide-on-tertiary-container > * + * { border-color: var(--bp-on-tertiary-container); }
.bg-outline { background-color: var(--bp-outline); }
.text-outline { color: var(--bp-outline); }
.border-outline { border-color: var(--bp-outline); }
.hover\:bg- { background-color: var(--bp-outline); }
.hover\:text- { color: var(--bp-outline); }
.hover\:border- { border-color: var(--bp-outline); }
.focus\:border- { border-color: var(--bp-outline); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-outline); }
.placeholder\:text-outline::placeholder { color: var(--bp-outline); }
.divide-outline > * + * { border-color: var(--bp-outline); }
.bg-outline-variant { background-color: var(--bp-outline-variant); }
.text-outline-variant { color: var(--bp-outline-variant); }
.border-outline-variant { border-color: var(--bp-outline-variant); }
.hover\:bg- { background-color: var(--bp-outline-variant); }
.hover\:text- { color: var(--bp-outline-variant); }
.hover\:border- { border-color: var(--bp-outline-variant); }
.focus\:border- { border-color: var(--bp-outline-variant); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-outline-variant); }
.placeholder\:text-outline-variant::placeholder { color: var(--bp-outline-variant); }
.divide-outline-variant > * + * { border-color: var(--bp-outline-variant); }
.bg-error { background-color: var(--bp-error); }
.text-error { color: var(--bp-error); }
.border-error { border-color: var(--bp-error); }
.hover\:bg- { background-color: var(--bp-error); }
.hover\:text- { color: var(--bp-error); }
.hover\:border- { border-color: var(--bp-error); }
.focus\:border- { border-color: var(--bp-error); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-error); }
.placeholder\:text-error::placeholder { color: var(--bp-error); }
.divide-error > * + * { border-color: var(--bp-error); }
.bg-success-inflow { background-color: var(--bp-success-inflow); }
.text-success-inflow { color: var(--bp-success-inflow); }
.border-success-inflow { border-color: var(--bp-success-inflow); }
.hover\:bg- { background-color: var(--bp-success-inflow); }
.hover\:text- { color: var(--bp-success-inflow); }
.hover\:border- { border-color: var(--bp-success-inflow); }
.focus\:border- { border-color: var(--bp-success-inflow); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-success-inflow); }
.placeholder\:text-success-inflow::placeholder { color: var(--bp-success-inflow); }
.divide-success-inflow > * + * { border-color: var(--bp-success-inflow); }
.bg-error-outflow { background-color: var(--bp-error-outflow); }
.text-error-outflow { color: var(--bp-error-outflow); }
.border-error-outflow { border-color: var(--bp-error-outflow); }
.hover\:bg- { background-color: var(--bp-error-outflow); }
.hover\:text- { color: var(--bp-error-outflow); }
.hover\:border- { border-color: var(--bp-error-outflow); }
.focus\:border- { border-color: var(--bp-error-outflow); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-error-outflow); }
.placeholder\:text-error-outflow::placeholder { color: var(--bp-error-outflow); }
.divide-error-outflow > * + * { border-color: var(--bp-error-outflow); }
.bg-inverse-surface { background-color: var(--bp-inverse-surface); }
.text-inverse-surface { color: var(--bp-inverse-surface); }
.border-inverse-surface { border-color: var(--bp-inverse-surface); }
.hover\:bg- { background-color: var(--bp-inverse-surface); }
.hover\:text- { color: var(--bp-inverse-surface); }
.hover\:border- { border-color: var(--bp-inverse-surface); }
.focus\:border- { border-color: var(--bp-inverse-surface); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-inverse-surface); }
.placeholder\:text-inverse-surface::placeholder { color: var(--bp-inverse-surface); }
.divide-inverse-surface > * + * { border-color: var(--bp-inverse-surface); }
.bg-brand-pink { background-color: var(--bp-brand-pink); }
.text-brand-pink { color: var(--bp-brand-pink); }
.border-brand-pink { border-color: var(--bp-brand-pink); }
.hover\:bg- { background-color: var(--bp-brand-pink); }
.hover\:text- { color: var(--bp-brand-pink); }
.hover\:border- { border-color: var(--bp-brand-pink); }
.focus\:border- { border-color: var(--bp-brand-pink); }
.focus\:ring- { box-shadow: 0 0 0 2px var(--bp-brand-pink); }
.placeholder\:text-brand-pink::placeholder { color: var(--bp-brand-pink); }
.divide-brand-pink > * + * { border-color: var(--bp-brand-pink); }


/* Layout and component utilities */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.flex-1 { flex: 1 1 0%; }
.flex-grow { flex-grow: 1; }
.flex-\[2\] { flex: 2 1 0%; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-stack-sm { gap: var(--bp-stack-sm); }
.gap-stack-md { gap: var(--bp-stack-md); }
.gap-stack-lg { gap: var(--bp-stack-lg); }
.gap-gutter { gap: var(--bp-gutter); }
.gap-base { gap: var(--bp-base); }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.divide-y > * + * { border-top-width: 1px; border-style: solid; }

.w-full { width: 100%; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-64 { width: 16rem; }
.h-10 { height: 2.5rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-64 { height: 16rem; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }
.min-h-\[touch-target-min\] { min-height: var(--bp-touch-target); }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-container-max-width { max-width: var(--bp-container-max); }
.max-w-\[400px\] { max-width: 400px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-auto { margin-top: auto; }
.mt-stack-sm { margin-top: var(--bp-stack-sm); }
.mt-stack-md { margin-top: var(--bp-stack-md); }
.mt-stack-lg { margin-top: var(--bp-stack-lg); }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-stack-sm { margin-bottom: var(--bp-stack-sm); }
.mb-stack-md { margin-bottom: var(--bp-stack-md); }
.mb-stack-lg { margin-bottom: var(--bp-stack-lg); }
.mb-section-gap { margin-bottom: var(--bp-section-gap); }
.-mr-32 { margin-right: -8rem; }
.-mt-32 { margin-top: -8rem; }
.mr-2 { margin-right: 0.5rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-gutter { padding-left: var(--bp-gutter); padding-right: var(--bp-gutter); }
.px-container-margin { padding-left: var(--bp-container-margin); padding-right: var(--bp-container-margin); }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-base { padding-top: var(--bp-base); padding-bottom: var(--bp-base); }
.py-section-gap { padding-top: var(--bp-section-gap); padding-bottom: var(--bp-section-gap); }
.p-gutter { padding: var(--bp-gutter); }
.p-section-gap { padding: var(--bp-section-gap); }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-stack-md { padding-top: var(--bp-stack-md); }
.pb-8 { padding-bottom: 2rem; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0); }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.left-0 { left: 0; }
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

.rounded { border-radius: var(--bp-radius); }
.rounded-lg { border-radius: var(--bp-radius-lg); }
.rounded-xl { border-radius: var(--bp-radius-xl); }
.rounded-full { border-radius: 9999px; }
.border { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-t { border-top-width: 1px; border-style: solid; }
.border-r { border-right-width: 1px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-style: solid; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.antialiased { -webkit-font-smoothing: antialiased; }
.whitespace-nowrap { white-space: nowrap; }
.leading-none { line-height: 1; }

.font-body-md, .font-body-lg, .font-label-md, .font-headline-md, .font-headline-lg,
.font-headline-lg-mobile, .font-display-lg, .font-code-otp { font-family: var(--bp-font-sans); }
.font-label-sm, .font-label-lg, .font-title-lg { font-family: var(--bp-font-inter); }
.text-body-md { font-size: 16px; line-height: 24px; font-weight: 400; }
.text-body-lg { font-size: 18px; line-height: 28px; font-weight: 400; }
.text-label-md { font-size: 14px; line-height: 20px; letter-spacing: 0.05em; font-weight: 600; }
.text-label-sm, .text-label-sm-mobile { font-size: 12px; line-height: 16px; font-weight: 500; }
.text-label-lg { font-size: 14px; line-height: 20px; font-weight: 600; }
.text-headline-md { font-size: 24px; line-height: 32px; font-weight: 700; }
.text-headline-lg { font-size: 32px; line-height: 40px; font-weight: 700; }
.text-headline-lg-mobile { font-size: 28px; line-height: 36px; font-weight: 700; }
.text-display-lg { font-size: 48px; line-height: 60px; letter-spacing: -0.02em; font-weight: 800; }
.text-title-lg { font-size: 22px; line-height: 28px; font-weight: 600; }
.text-code-otp { font-size: 32px; line-height: 40px; letter-spacing: 0.2em; font-weight: 600; }

.opacity-50 { opacity: 0.5; }
.opacity-80 { opacity: 0.8; }
.opacity-\[0\.03\] { opacity: 0.03; }
.bg-primary-fixed.bg-opacity-20 { background-color: color-mix(in srgb, var(--bp-primary-fixed) 20%, transparent); }

.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.shadow-\[0_0_15px_rgba\(255\,98\,0\,0\.15\)\] { box-shadow: 0 0 15px rgba(255,98,0,0.15); }
.shadow-\[0_10px_25px_-5px_rgba\(30\,58\,138\,0\.05\)\] { box-shadow: 0 10px 25px -5px rgba(30,58,138,0.05); }

.blur-3xl { filter: blur(64px); }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.resize-none { resize: none; }
.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.transition-opacity { transition: opacity 0.2s; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }

.outline-none { outline: none; }
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--bp-primary-container); }
.focus\:ring-4:focus { box-shadow: 0 0 0 4px var(--bp-primary-fixed); }
.focus\:ring-opacity-20:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bp-primary) 20%, transparent); }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

.hover\:opacity-90:hover { opacity: 0.9; }
.hover\:underline:hover { text-decoration: underline; }
.hover\:shadow-sm:hover { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.hover\:bg-slate-50:hover { background-color: #f8fafc; }
.hover\:bg-slate-100:hover { background-color: #f1f5f9; }
.hover\:bg-orange-700:hover { background-color: #c2410c; }
.group:hover .group-hover\:text-primary { color: var(--bp-primary); }

.glass-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.05);
}
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.fill-icon { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.glow-focus:focus-within { box-shadow: 0 0 0 4px rgba(255, 98, 0, 0.15); }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.bg-slate-50 { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-white { background-color: #fff; }
.bg-orange-600 { background-color: #ea580c; }
.bg-orange-700 { background-color: #c2410c; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-800 { color: #1e293b; }
.text-slate-900 { color: #0f172a; }
.text-orange-600 { color: #ea580c; }
.text-orange-700 { color: #c2410c; }
.text-white { color: #fff; }
.border-slate-200 { border-color: #e2e8f0; }
.font-\[Plus_Jakarta_Sans\] { font-family: "Plus Jakarta Sans", sans-serif; }

/* Sub-pages: mobile shell aligned with home dashboard */
.bp-subpage { min-height: max(884px, 100dvh); }
.bp-mobile-frame {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bp-background);
  position: relative;
}
.bp-subpage-header {
  display: flex;
  align-items: center;
  gap: var(--bp-base);
  padding: var(--bp-base) var(--bp-container-margin);
  background: var(--bp-surface);
  border-bottom: 1px solid var(--bp-outline-variant);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  position: sticky;
  top: 0;
  z-index: 40;
  flex-shrink: 0;
}
.bp-subpage-title {
  flex: 1;
  font-family: var(--bp-font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--bp-primary);
  margin: 0;
}
.bp-subpage-main {
  flex: 1;
  overflow-y: auto;
  padding: var(--bp-gutter-app) var(--bp-container-margin);
  display: flex;
  flex-direction: column;
  gap: var(--bp-gutter-app);
}
.bp-subpage-footer {
  flex-shrink: 0;
  padding: var(--bp-gutter-app) var(--bp-container-margin);
  padding-bottom: calc(var(--bp-gutter-app) + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--bp-outline-variant);
  background: var(--bp-surface-container-lowest);
}
.bp-back-btn {
  width: var(--bp-touch-target);
  height: var(--bp-touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  flex-shrink: 0;
  transition: background-color 0.2s;
}
.bp-back-btn:hover { background: var(--bp-surface-container-high); }
.bp-btn-dashboard {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: var(--bp-radius-lg);
  background: var(--bp-primary-container);
  color: var(--bp-on-primary);
  font-family: var(--bp-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: opacity 0.2s;
}
.bp-btn-dashboard:hover { opacity: 0.92; }
.bp-card {
  background: var(--bp-surface-container-lowest);
  border: 1px solid var(--bp-outline-variant);
  border-radius: var(--bp-radius-xl);
  padding: 1rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.bp-btn-primary {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--bp-radius-lg);
  background: var(--bp-primary-container);
  color: var(--bp-on-primary);
  font-weight: 600;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.bp-btn-primary:hover { opacity: 0.92; }
.bp-btn-link {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--bp-on-surface-variant);
}
.bp-btn-link:hover { color: var(--bp-primary); }
.bp-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--bp-on-surface-variant); margin-bottom: 0.25rem; }
.bp-input {
  width: 100%;
  border: 1px solid var(--bp-outline-variant);
  border-radius: var(--bp-radius-lg);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--bp-surface-container-lowest);
  color: var(--bp-on-surface);
}
.bp-list-btn {
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--bp-on-surface);
}
.bp-list-btn:hover { background: var(--bp-surface-container-low); }
.bp-list { background: var(--bp-surface-container-lowest); border: 1px solid var(--bp-outline-variant); border-radius: var(--bp-radius-xl); overflow: hidden; }
.bp-list > * + * { border-top: 1px solid var(--bp-outline-variant); }
.bp-success-icon { width: 4rem; height: 4rem; border-radius: 9999px; background: #dcfce7; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.bp-success-icon .material-symbols-outlined { color: #16a34a; font-size: 2.25rem; }
.bp-text-success { color: #15803d; font-weight: 700; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.w-touch-target-min { width: var(--bp-touch-target); }
.h-touch-target-min { height: var(--bp-touch-target); }
.w-\[48px\] { width: 48px; }
.h-\[48px\] { height: 48px; }
.w-\[64px\] { width: 64px; }
.h-\[48px\] { height: 48px; }
.h-\[14px\] { height: 14px; }
.max-w-7xl { max-width: 80rem; }
.max-w-2xl { max-width: 42rem; }
.p-gutter { padding: var(--bp-gutter-app); }
.p-container-margin { padding: var(--bp-container-margin); }
.py-gutter { padding-top: var(--bp-gutter-app); padding-bottom: var(--bp-gutter-app); }
.-translate-x-1\/2 { transform: translateX(-50%); }
.left-1\/2 { left: 50%; }
.object-cover { object-fit: cover; }
.text-left { text-align: left; }
.shrink-0 { flex-shrink: 0; }
.divide-y > * + * { border-top-width: 1px; border-style: solid; border-color: var(--bp-outline-variant); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.active\:scale-90:active { transform: scale(0.9); }
.active\:scale-95:active { transform: scale(0.95); }
.active\:scale-\[0\.98\]:active { transform: scale(0.98); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.border-primary-fixed-dim { border-color: var(--bp-primary-fixed-dim); }
.bg-green-100 { background-color: #dcfce7; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.pb-\[88px\] { padding-bottom: 88px; }
.pt-\[72px\] { padding-top: 72px; }
.pb-24 { padding-bottom: 6rem; }
.pb-32 { padding-bottom: 8rem; }
.max-w-md { max-width: 28rem; }
.after\:content-\[''\]::after,
.after\:content-\[\'\'\]::after { content: ''; display: block; }
.after\:w-1::after { width: 0.25rem; }
.after\:h-1::after { height: 0.25rem; }
.after\:bg-primary::after { background-color: var(--bp-primary); }
.after\:rounded-full::after { border-radius: 9999px; }
.after\:mt-1::after { margin-top: 0.25rem; }
.list-none { list-style: none; padding: 0; margin: 0; }

/* Dashboard utilities missing from Tailwind conversion */
.opacity-10 { opacity: 0.1; }
.opacity-75 { opacity: 0.75; }
.opacity-90 { opacity: 0.9; }
.-right-10 { right: -2.5rem; }
.-top-10 { top: -2.5rem; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.border-dashed { border-style: dashed; }
.min-w-\[64px\] { min-width: 64px; }
.min-w-\[72px\] { min-width: 72px; }
.min-h-\[48px\] { min-height: 48px; }
.h-\[32px\] { height: 32px; }
.text-\[10px\] { font-size: 10px; }
.text-\[12px\] { font-size: 12px; }
.text-\[18px\] { font-size: 18px; }
.text-\[20px\] { font-size: 20px; }
.text-\[24px\] { font-size: 24px; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.p-2 { padding: 0.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mt-1 { margin-top: 0.25rem; }
.mr-1 { margin-right: 0.25rem; }
.ml-1 { margin-left: 0.25rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.justify-around { justify-content: space-around; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }
.rounded-t-xl { border-top-left-radius: var(--bp-radius-xl); border-top-right-radius: var(--bp-radius-xl); }
.transition-transform { transition: transform 0.2s ease; }
.transition-shadow { transition: box-shadow 0.2s ease; }
.font-normal { font-weight: 400; }
.flex-shrink-0 { flex-shrink: 0; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.-mx-container-margin { margin-left: calc(var(--bp-container-margin) * -1); margin-right: calc(var(--bp-container-margin) * -1); }
.bg-success-inflow\/10 { background-color: color-mix(in srgb, var(--bp-success-inflow) 10%, transparent); }
.bg-error-outflow\/10 { background-color: color-mix(in srgb, var(--bp-error-outflow) 10%, transparent); }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:bg-secondary-fixed-dim:hover { background-color: var(--bp-secondary-fixed-dim); }
.hover\:bg-on-secondary-container:hover { background-color: var(--bp-on-secondary-container); }
.dark\:bg-on-background { background-color: var(--bp-on-background); }
.dark\:border-outline { border-color: var(--bp-outline); }
.bp-banner-decoration {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  pointer-events: none;
  background-image: radial-gradient(circle at 95% 10%, #ffffff 0, transparent 50%), radial-gradient(circle at 5% 90%, #ffffff 0, transparent 45%);
}
.bp-dashboard-shell {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bp-background);
}
.w-16 { width: 4rem; }
.h-14 { height: 3.5rem; }
.rounded-2xl { border-radius: 1rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.text-\[28px\] { font-size: 28px; }
.bg-green-50 { background-color: #f0fdf4; }
.border-green-100 { border-color: #dcfce7; }
.bottom-24 { bottom: 6rem; }
.right-4 { right: 1rem; }
.inset-0 { inset: 0; }
.z-40 { z-index: 40; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.fixed { position: fixed; }
.relative { position: relative; }
.absolute { position: absolute; }

@media (min-width: 640px) {
  .sm\:flex-row-reverse { flex-direction: row-reverse; }
}
@media (min-width: 768px) {
  .bp-subpage .bp-mobile-frame,
  .bp-dashboard-shell {
    min-height: 0;
    height: 850px;
    max-height: 90vh;
    border-radius: 40px;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    overflow: hidden;
    max-width: 480px;
    margin: 0 auto;
  }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:w-auto { width: auto; }
  .md\:hidden { display: none; }
  .md\:p-12 { padding: 3rem; }
  .md\:px-margin-desktop { padding-left: var(--bp-margin-desktop); padding-right: var(--bp-margin-desktop); }
  .md\:text-display-lg { font-size: 48px; line-height: 60px; }
  .md\:flex-row { flex-direction: row; }
  .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .md\:p-stack-lg { padding: var(--bp-stack-lg); }
  .md\:flex { display: flex; }
  .md\:min-h-screen { min-height: 100vh; }
  .md\:justify-center { justify-content: center; }
  .md\:items-center { align-items: center; }
  .md\:relative { position: relative; }
  .md\:absolute { position: absolute; }
  .md\:bottom-0 { bottom: 0; }
  .md\:pb-0 { padding-bottom: 0; }
  .md\:overflow-hidden { overflow: hidden; }
  .md\:bg-background { background-color: var(--bp-background); }
  .md\:bg-surface-container-high { background-color: var(--bp-surface-container-high); }
  .md\:max-w-\[480px\] { max-width: 480px; }
  .md\:h-\[850px\] { height: 850px; }
  .md\:rounded-\[40px\] { border-radius: 40px; }
  .md\:shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
}
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:ml-64 { margin-left: 16rem; }
  .lg\:w-16 { width: 4rem; }
  .lg\:h-16 { height: 4rem; }
  .lg\:gap-4 { gap: 1rem; }
  .lg\:p-section-gap { padding: var(--bp-section-gap); }
  .lg\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .lg\:text-left { text-align: left; }
  .lg\:mt-4 { margin-top: 1rem; }
}
@media (prefers-color-scheme: dark) {
  .dark\:text-primary-fixed-dim { color: var(--bp-primary-fixed-dim); }
  .dark\:text-secondary-container { color: var(--bp-secondary-container); }
  .dark\:text-surface-variant { color: var(--bp-surface-variant); }
  .dark\:hover\:bg-inverse-surface:hover { background-color: var(--bp-inverse-surface); }
}