:root {
  color-scheme: light;
  --brand:#0f2f74;
  --brand-2:#1e40af;
  --sky:#0ea5e9;
  --emerald:#059669;
  --gold:#d89a18;
  --danger:#dc2626;
  --warning:#d97706;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --surface:rgba(255,255,255,.94);
  --surface-strong:#fff;
  --page:#f8fafc;
  --shadow:0 20px 55px -32px rgba(15,23,42,.5);
  --shadow-lg:0 30px 75px -38px rgba(15,23,42,.7);
}
html.dark {
  color-scheme: dark;
  --ink:#e2e8f0;
  --muted:#94a3b8;
  --line:#243147;
  --surface:rgba(15,23,42,.91);
  --surface-strong:#0f172a;
  --page:#020617;
  --shadow:0 20px 55px -32px rgba(0,0,0,.8);
  --shadow-lg:0 30px 75px -38px rgba(0,0,0,.92);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.payment-page{
  margin:0;
  min-height:100vh;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 4% 2%,rgba(37,99,235,.12),transparent 28rem),
    radial-gradient(circle at 96% 98%,rgba(16,185,129,.09),transparent 28rem),
    var(--page);
  background-attachment:fixed;
}
body.locked{overflow:hidden}
.payment-shell{min-height:100vh;padding-top:5rem;padding-bottom:5rem}
.payment-container{width:min(1180px,calc(100% - 2rem));margin-inline:auto}
.payment-topbar{
  position:fixed;inset:0 0 auto 0;z-index:70;
  border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  background:color-mix(in srgb,var(--surface-strong) 88%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.payment-topbar-inner{width:min(1280px,calc(100% - 1.5rem));height:4.25rem;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.payment-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink);min-width:0}
.payment-brand img{width:2.5rem;height:2.5rem;border-radius:.8rem;object-fit:cover;box-shadow:0 8px 20px -12px rgba(15,23,42,.6)}
.payment-brand strong{display:block;font-size:.85rem;font-weight:900;white-space:nowrap}
.payment-brand small{display:block;color:var(--muted);font-size:.68rem;font-weight:700}
.payment-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn,.secondary-btn,.primary-btn,.success-btn,.gold-btn,.danger-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border:0;border-radius:.85rem;min-height:2.7rem;padding:.72rem 1rem;font:800 .78rem/1 Inter,sans-serif;cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;white-space:nowrap
}
.icon-btn{width:2.7rem;padding:0;border:1px solid var(--line);background:var(--surface-strong);color:var(--ink)}
.secondary-btn{border:1px solid var(--line);background:var(--surface-strong);color:var(--ink)}
.primary-btn{background:linear-gradient(135deg,#2563eb,#15337e);color:#fff;box-shadow:0 14px 28px -18px rgba(37,99,235,.85)}
.success-btn{background:linear-gradient(135deg,#10b981,#047857);color:#fff;box-shadow:0 14px 28px -18px rgba(5,150,105,.8)}
.gold-btn{background:linear-gradient(135deg,#fbbf24,#b7791f);color:#1f2937;box-shadow:0 14px 28px -18px rgba(216,154,24,.8)}
.danger-btn{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff}
.icon-btn:hover,.secondary-btn:hover,.primary-btn:hover,.success-btn:hover,.gold-btn:hover,.danger-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.payment-hero{position:relative;overflow:hidden;border-radius:1.8rem;background:linear-gradient(135deg,#0d2663 0%,#1e40af 52%,#0b6b73 100%);color:#fff;box-shadow:var(--shadow-lg)}
.payment-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 15%,rgba(255,255,255,.18),transparent 20rem),radial-gradient(circle at 90% 88%,rgba(16,185,129,.28),transparent 23rem)}
.payment-hero::after{content:"";position:absolute;right:-8rem;top:-8rem;width:24rem;height:24rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;box-shadow:0 0 0 3.5rem rgba(255,255,255,.035),0 0 0 7rem rgba(255,255,255,.02)}
.payment-hero-inner{position:relative;z-index:2;padding:2rem}
.payment-kicker{display:inline-flex;align-items:center;gap:.45rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.11);padding:.5rem .75rem;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.payment-hero h1{margin:.9rem 0 0;font-size:clamp(2rem,6vw,4.1rem);line-height:1.02;font-weight:900;letter-spacing:-.04em;max-width:900px}
.payment-hero p{max-width:760px;margin:.9rem 0 0;color:#dbeafe;font-size:.96rem;line-height:1.75;font-weight:600}
.payment-hero-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.25rem}
.hero-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1.5rem}
.hero-stat{border:1px solid rgba(255,255,255,.18);border-radius:1rem;background:rgba(255,255,255,.1);padding:1rem;backdrop-filter:blur(8px)}
.hero-stat span{display:block;color:#bfdbfe;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.hero-stat strong{display:block;margin-top:.35rem;font-size:1.35rem;font-weight:900;overflow-wrap:anywhere}
.payment-section{margin-top:1.25rem}
.payment-card{border:1px solid var(--line);border-radius:1.35rem;background:var(--surface);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.payment-card-pad{padding:1.25rem}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.section-heading h2{margin:0;font-size:1rem;font-weight:900;letter-spacing:-.01em}
.section-heading p{margin:.35rem 0 0;color:var(--muted);font-size:.76rem;line-height:1.6;font-weight:600}
.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.metric-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:1.05rem;background:var(--surface-strong);padding:1rem;box-shadow:0 12px 30px -26px rgba(15,23,42,.65)}
.metric-card::after{content:"";position:absolute;right:-2.5rem;bottom:-3rem;width:7rem;height:7rem;border-radius:999px;background:linear-gradient(135deg,rgba(37,99,235,.11),rgba(14,165,233,.04))}
.metric-card label{position:relative;z-index:1;display:block;color:var(--muted);font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.metric-card strong{position:relative;z-index:1;display:block;margin-top:.45rem;font-size:1.35rem;font-weight:900;overflow-wrap:anywhere}
.metric-card small{position:relative;z-index:1;display:block;margin-top:.35rem;color:var(--muted);font-size:.68rem;font-weight:700}
.metric-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;margin-bottom:.7rem;border-radius:.75rem;background:#eff6ff;color:#1d4ed8}
.dark .metric-icon{background:#172554;color:#93c5fd}
.payment-grid{display:grid;gap:1rem}
.two-col{grid-template-columns:1fr}
.three-col{grid-template-columns:1fr}
.stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;margin:1.25rem 0}
.stepper-item{position:relative;text-align:center}
.stepper-item:not(:last-child)::after{content:"";position:absolute;top:1.15rem;left:calc(50% + 1.3rem);right:calc(-50% + 1.3rem);height:2px;background:var(--line)}
.stepper-item.complete:not(:last-child)::after{background:#10b981}
.step-number{position:relative;z-index:2;display:grid;place-items:center;width:2.35rem;height:2.35rem;margin:auto;border:2px solid var(--line);border-radius:999px;background:var(--surface-strong);color:var(--muted);font-size:.8rem;font-weight:900}
.stepper-item.active .step-number{border-color:#2563eb;background:#2563eb;color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.13)}
.stepper-item.complete .step-number{border-color:#10b981;background:#10b981;color:#fff}
.step-label{display:none;margin-top:.55rem;color:var(--muted);font-size:.65rem;font-weight:800}
.stepper-item.active .step-label{color:#1d4ed8}
.wizard-step{display:none}
.wizard-step.active{display:block;animation:fadeSlide .22s ease-out}
@keyframes fadeSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.form-grid{display:grid;grid-template-columns:1fr;gap:.85rem}
.field label{display:block;margin-bottom:.42rem;color:var(--ink);font-size:.72rem;font-weight:850}
.field small{display:block;margin-top:.38rem;color:var(--muted);font-size:.66rem;line-height:1.5;font-weight:600}
.control{width:100%;min-height:3rem;border:1px solid #cbd5e1;border-radius:.9rem;background:var(--surface-strong);padding:.82rem .95rem;color:var(--ink);font:650 .85rem/1.35 Inter,sans-serif;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.control:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
textarea.control{min-height:7rem;resize:vertical}
.amount-input{font-size:1.5rem;font-weight:900;text-align:center;letter-spacing:-.02em}
.amount-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.amount-option{border:1px solid var(--line);border-radius:.95rem;background:var(--surface-strong);padding:.9rem;text-align:center;color:var(--ink);font-size:.85rem;font-weight:900;cursor:pointer;transition:.18s ease}
.amount-option:hover,.amount-option.active{border-color:#2563eb;background:#eff6ff;color:#1d4ed8;box-shadow:0 10px 24px -18px rgba(37,99,235,.7)}
.dark .amount-option:hover,.dark .amount-option.active{background:#172554;color:#bfdbfe}
.impact-grid{display:grid;grid-template-columns:1fr;gap:.8rem}
.impact-card{position:relative;border:1px solid var(--line);border-radius:1.15rem;background:var(--surface-strong);padding:1rem;cursor:pointer;transition:.2s ease;overflow:hidden}
.impact-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.impact-card.selected{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.11),var(--shadow)}
.impact-card .check{position:absolute;right:.8rem;top:.8rem;display:none;color:#10b981;font-size:1.15rem}
.impact-card.selected .check{display:block}
.impact-card i.icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.9rem;background:#eff6ff;color:#1d4ed8;font-size:1.05rem}
.dark .impact-card i.icon{background:#172554;color:#93c5fd}
.impact-card h3{margin:.8rem 0 .3rem;font-size:.9rem;font-weight:900}
.impact-card p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.55;font-weight:600}
.member-card{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:center;border:1px solid var(--line);border-radius:1rem;background:var(--surface-strong);padding:1rem}
.member-card img{width:3rem;height:3rem;border-radius:.9rem;object-fit:cover}
.member-card strong{display:block;font-size:.88rem;font-weight:900}
.member-card span{display:block;margin-top:.2rem;color:var(--muted);font-size:.7rem;font-weight:650}
.bank-card{position:relative;overflow:hidden;border-radius:1.35rem;background:linear-gradient(135deg,#0f2f74,#1e40af 55%,#0b6b73);color:#fff;padding:1.25rem;box-shadow:var(--shadow-lg)}
.bank-card::after{content:"";position:absolute;right:-4rem;top:-4rem;width:12rem;height:12rem;border-radius:999px;background:rgba(255,255,255,.08)}
.bank-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid rgba(255,255,255,.18);border-radius:1rem;background:rgba(255,255,255,.1);padding:.95rem;margin-top:.75rem;backdrop-filter:blur(8px)}
.bank-row span{display:block;color:#bfdbfe;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.bank-row strong{display:block;margin-top:.25rem;font-size:.95rem;font-weight:900;overflow-wrap:anywhere}
.copy-btn{flex:0 0 auto;border:1px solid rgba(255,255,255,.25);border-radius:.75rem;background:rgba(255,255,255,.12);color:#fff;padding:.65rem .8rem;font-size:.7rem;font-weight:850;cursor:pointer}
.payment-table-shell{overflow:hidden;border:1px solid var(--line);border-radius:1.1rem;background:var(--surface-strong)}
.payment-table-scroll{overflow:auto}
.payment-table{width:100%;min-width:760px;border-collapse:collapse;font-size:.73rem}
.payment-table th{background:color-mix(in srgb,var(--surface-strong) 80%,#e2e8f0);padding:.8rem;text-align:left;color:var(--muted);font-size:.63rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.payment-table td{border-top:1px solid var(--line);padding:.82rem;color:var(--ink);font-weight:650;vertical-align:middle}
.status-badge{display:inline-flex;align-items:center;gap:.32rem;border-radius:999px;padding:.38rem .58rem;font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.status-badge.success{background:#ecfdf5;color:#047857}.status-badge.warning{background:#fffbeb;color:#b45309}.status-badge.danger{background:#fef2f2;color:#b91c1c}.status-badge.info{background:#eff6ff;color:#1d4ed8}.status-badge.violet{background:#f5f3ff;color:#6d28d9}
.dark .status-badge.success{background:#052e2b;color:#6ee7b7}.dark .status-badge.warning{background:#451a03;color:#fcd34d}.dark .status-badge.danger{background:#450a0a;color:#fca5a5}.dark .status-badge.info{background:#172554;color:#93c5fd}.dark .status-badge.violet{background:#2e1065;color:#c4b5fd}
.progress-track{height:.58rem;overflow:hidden;border-radius:999px;background:#e2e8f0}.dark .progress-track{background:#334155}.progress-bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#10b981);transition:width .3s ease}
.notice{display:flex;gap:.75rem;align-items:flex-start;border:1px solid #bfdbfe;border-radius:1rem;background:#eff6ff;padding:.9rem;color:#1e3a8a;font-size:.72rem;line-height:1.6;font-weight:650}.dark .notice{border-color:#1e3a8a;background:#172554;color:#bfdbfe}
.notice.warning{border-color:#fde68a;background:#fffbeb;color:#92400e}.dark .notice.warning{border-color:#92400e;background:#451a03;color:#fde68a}
.notice.success{border-color:#a7f3d0;background:#ecfdf5;color:#065f46}.dark .notice.success{border-color:#065f46;background:#052e2b;color:#a7f3d0}
.dropzone{border:2px dashed #cbd5e1;border-radius:1rem;background:color-mix(in srgb,var(--surface-strong) 90%,#eff6ff);padding:1.2rem;text-align:center;cursor:pointer;transition:.18s ease}
.dropzone:hover,.dropzone.drag{border-color:#2563eb;background:#eff6ff}.dark .dropzone:hover,.dark .dropzone.drag{background:#172554}
.dropzone i{font-size:1.8rem;color:#2563eb}.dropzone strong{display:block;margin-top:.55rem;font-size:.8rem}.dropzone span{display:block;margin-top:.3rem;color:var(--muted);font-size:.67rem}
.file-preview{display:none;margin-top:.75rem;border:1px solid var(--line);border-radius:.85rem;background:var(--surface-strong);padding:.75rem;align-items:center;gap:.75rem}.file-preview.show{display:flex}.file-preview img{width:3.2rem;height:3.2rem;border-radius:.65rem;object-fit:cover}.file-preview strong{display:block;font-size:.75rem}.file-preview span{display:block;margin-top:.2rem;color:var(--muted);font-size:.65rem}
.wizard-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.7rem;margin-top:1.1rem}
.payment-status{display:none;border-radius:1rem;padding:.9rem;font-size:.74rem;font-weight:700;line-height:1.55}.payment-status.show{display:block}.payment-status.success{border:1px solid #a7f3d0;background:#ecfdf5;color:#065f46}.payment-status.error{border:1px solid #fecaca;background:#fef2f2;color:#991b1b}.payment-status.warning{border:1px solid #fde68a;background:#fffbeb;color:#92400e}
.toast{position:fixed;right:1rem;bottom:1rem;z-index:100;display:none;align-items:flex-start;gap:.65rem;max-width:min(24rem,calc(100% - 2rem));border-radius:1rem;padding:.9rem 1rem;color:#fff;font-size:.75rem;font-weight:750;box-shadow:var(--shadow-lg)}
.toast.show{display:flex;animation:toastIn .2s ease-out}.toast.info{background:#2563eb}.toast.success{background:#059669}.toast.warning{background:#d97706}.toast.error{background:#dc2626}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal{position:fixed;inset:0;z-index:90;display:none;place-items:center;background:rgba(2,6,23,.72);padding:1rem;backdrop-filter:blur(6px)}.modal.show{display:grid}.modal-card{width:min(32rem,100%);max-height:92vh;overflow:auto;border:1px solid rgba(255,255,255,.16);border-radius:1.4rem;background:var(--surface-strong);padding:1.25rem;box-shadow:var(--shadow-lg)}
.success-orb{display:grid;place-items:center;width:5rem;height:5rem;margin:auto;border-radius:999px;background:linear-gradient(135deg,#10b981,#047857);color:#fff;font-size:2rem;box-shadow:0 18px 35px -20px rgba(5,150,105,.9)}
.payment-footer{margin-top:2rem;border-top:1px solid var(--line);padding:1.2rem 0;color:var(--muted);font-size:.68rem;font-weight:650;text-align:center}
.mobile-summary{position:sticky;bottom:.7rem;z-index:30;margin-top:1rem;border:1px solid rgba(255,255,255,.25);border-radius:1rem;background:rgba(15,23,42,.92);padding:.75rem;color:#fff;box-shadow:var(--shadow-lg);backdrop-filter:blur(15px)}
.skeleton{position:relative;overflow:hidden;color:transparent!important;background:#e2e8f0;border-radius:.4rem}.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.1s infinite}@keyframes shimmer{to{transform:translateX(100%)}}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:640px){.payment-container{width:min(1180px,calc(100% - 3rem))}.payment-hero-inner{padding:2.7rem}.hero-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.amount-options{grid-template-columns:repeat(4,minmax(0,1fr))}.impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.step-label{display:block}.payment-card-pad{padding:1.5rem}}
@media(min-width:900px){.two-col{grid-template-columns:1.15fr .85fr}.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}.impact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.metric-grid.six{grid-template-columns:repeat(6,minmax(0,1fr))}.payment-hero-inner{padding:3.2rem}}
@media(max-width:639px){.payment-shell{padding-top:4.5rem;padding-bottom:2.5rem}.payment-topbar-inner{height:4rem}.payment-brand small,.desktop-only{display:none!important}.payment-hero h1{font-size:2.15rem}.payment-hero-inner{padding:1.35rem}.section-heading{flex-direction:column}.wizard-actions>*{flex:1 1 auto}.bank-row{align-items:flex-start}.payment-table{min-width:680px}.toast{bottom:5.2rem}.payment-card-pad{padding:1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{.payment-topbar,.wizard-actions,.no-print,.mobile-summary,.payment-footer,.toast,.modal{display:none!important}.payment-shell{padding:0}.payment-container{width:100%}.payment-card,.metric-card,.payment-hero{box-shadow:none!important;break-inside:avoid}.payment-hero{color:#000;background:#fff;border:1px solid #cbd5e1}.payment-hero p{color:#334155}.payment-hero::before,.payment-hero::after{display:none}}