/* ==========================================================================
   1. CSS Variables & Theme Configuration
   Light theme root variables, dark theme overrides, and semantic aliases
   ========================================================================== */
:root {
  --ink: #F3F1E9;
  --ink-2: #EBE7DA;
  --surface: #FFFFFF;
  --surface-2: #F7F4EC;
  --hairline: rgba(23, 34, 54, .10);
  --hairline-strong: rgba(23, 34, 54, .20);
  --brass: #A8792F;
  --brass-soft: #C9A24B;
  --paper: #182338;
  --muted: #5B6B85;
  --muted-2: #8792A6;
  --sage: #3D8A5F;
  --rose: #B14E3F;
  --wash-1: rgba(23, 34, 54, .035);
  --wash-2: rgba(23, 34, 54, .05);
  --wash-3: rgba(23, 34, 54, .05);
  --wash-4: rgba(23, 34, 54, .09);
  --wash-5: rgba(23, 34, 54, .14);
  --wash-6: rgba(23, 34, 54, .06);
  --shell: rgba(255, 255, 255, .7);
  --on-brass: #1E160A;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --text-sub: var(--muted-2);

  /* ── Aliases ────────────────────────────────────────────────── */
  --text: var(--paper);
  --text-muted: var(--muted);
  --text-white: #FFFFFF;
  --surface2: var(--surface-2);
  --border: var(--hairline);
  --brass: var(--paper);
  --primary-lite: var(--brass-soft);
  --orange: var(--brass-soft);
  --orange-07: rgba(168, 121, 47, .07);
  --orange-08: rgba(168, 121, 47, .08);
  --orange-10: rgba(168, 121, 47, .10);
  --orange-20: rgba(168, 121, 47, .20);
  --green: var(--sage);
  --green-soft: rgba(61, 138, 95, .35);
  --green-dim: rgba(61, 138, 95, .12);
  --white-25: rgba(23, 34, 54, .12);
  --font-mono: 'IBM Plex Mono', monospace;
}

/* Dark theme variable overrides, applied via [data-theme="dark"] on <html> */
html[data-theme="dark"] {
  --ink: #0B1220;
  --ink-2: #111B2E;
  --surface: #17223A;
  --surface-2: #1E2C48;
  --hairline: rgba(201, 162, 75, .16);
  --hairline-strong: rgba(201, 162, 75, .32);
  --brass: #C9A24B;
  --brass-soft: #E4C57A;
  --paper: #F5F1E8;
  --muted: #93A0B8;
  --muted-2: #66738C;
  --sage: #74B98C;
  --rose: #D17868;
  --wash-1: rgba(255, 255, 255, .015);
  --wash-2: rgba(255, 255, 255, .03);
  --wash-3: rgba(255, 255, 255, .035);
  --wash-4: rgba(255, 255, 255, .06);
  --wash-5: rgba(255, 255, 255, .10);
  --wash-6: rgba(255, 255, 255, .04);
  --shell: rgba(11, 18, 32, .86);

  /* ── Alias overrides (dark) ── */
  --orange-07: rgba(201, 162, 75, .09);
  --orange-08: rgba(201, 162, 75, .10);
  --orange-10: rgba(201, 162, 75, .14);
  --orange-20: rgba(201, 162, 75, .26);
  --green-dim: rgba(116, 185, 140, .14);
  --green-soft: rgba(116, 185, 140, .35);
  --white-25: rgba(0, 0, 0, .35);
}

/* ==========================================================================
   2. Global Resets & Base Styles
   Box-sizing reset, html/body defaults, selection color, font utilities
   ========================================================================== */
* {
  box-sizing: border-box;
}

html, body {
  background: var(--ink);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

body {
  transition: background .2s ease, color .2s ease;
}

::selection {
  background: var(--brass);
  color: var(--on-brass);
}

.serif {
  font-family: 'Fraunces', serif;
}

.mono {
  font-family: 'IBM Plex Mono', monospace;
}

.eyebrow {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--brass-soft);
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   3. Layout Wrapper System (Mobile Alignment Fix)
   Strips container constraints on small screens; restores panel chrome on desktop
   ========================================================================== */
@media (max-width: 991.98px) {
  body {
    padding-bottom: 78px;
  }

  /* Reset layout constraints preventing elements from utilizing 100% viewport space */
  main.col-lg-9.col-xl-10,
  .container-fluid,
  .row.justify-content-center,
  .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Make panel frame seamless & fully adaptive on mobile screen limits */
  .panel {
    border: none !important;
    background: transparent !important;
    padding: 12px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }
}

@media (min-width: 992px) {
  .panel {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    position: relative;
    padding: 24px;
  }
}


.quick-actions-grid .qa-extra { display: none; }
.quick-actions-grid.qa-open .qa-extra {
  display: flex; /* match whatever .quick-action-item normally uses (flex/block/grid) */
  animation: qaFade .25s ease;
}
.qa-toggle {
  grid-column: 1 / -1;           /* spans the full row */
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: 0; padding: 8px 0;
  color: var(--brass-soft, var(--text-sub)); font-size: .8rem; font-weight: 600;
  cursor: pointer;
}
.qa-toggle i { transition: transform .2s ease; font-size: .7rem; }
.quick-actions-grid.qa-open .qa-toggle i { transform: rotate(180deg); }
@keyframes qaFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }


/* ==========================================================================
   4. Sidebar & Navigation
   Brand mark, nav links, sidebar support card, offcanvas drawer
   ========================================================================== */

.sidebar {
  background: radial-gradient(1200px 400px at -10% -10%, rgba(201, 162, 75, .08), transparent 60%), var(--ink-2);
  border-right: none; /* replaced by the animated pseudo-element below */
  min-height: 100vh;
  padding: 1.75rem 1.4rem;
  position: relative; /* needed to anchor ::after */
}

.sidebar::after{
  content:"";
  position:absolute;
  top:0; bottom:0; right:0;
  width:1px;

  background:linear-gradient(
    180deg,
    var(--brass) 0%,
    var(--brass-soft) 25%,
    var(--paper) 50%,
    var(--brass-soft) 75%,
    var(--brass) 100%
  );
  background-size:auto 200%;
  animation: gradientSweepVertical 4s linear infinite;
}

#mobileNav{
    max-width: 300px;
}

.offcanvas-backdrop.show{    
    background: powderblue;
    backdrop-filter: blur(4px);
  filter: blur(3px);
  transition: filter .3s ease;
  pointer-events: none; /* prevents interacting with blurred content */
}
/* Blur the actual page content, not the overlay */
body.offcanvas-open .app-content,
body.offcanvas-open main {
    backdrop-filter: blur(4px);
  filter: blur(3px);
  transition: filter .3s ease;
  pointer-events: none; /* prevents interacting with blurred content */
}

#mobileNav::after{
  content:"";
  position:absolute;
  top:0; bottom:0; right:0;
  width:1px;

  background:linear-gradient(
    180deg,
    var(--brass) 0%,
    var(--brass-soft) 25%,
    var(--paper) 50%,
    var(--brass-soft) 75%,
    var(--brass) 100%
  );
  background-size:auto 200%;
  animation: gradientSweepVertical 4s linear infinite;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 2.5rem;
}

.brand-mark .dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--brass);
  position: relative;
  flex: 0 0 auto;
}

.brand-mark .dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--brass);
}

.brand-mark .dot::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 1px;
  height: 8px;
  background: var(--brass);
  transform: translateX(-50%);
}

.brand-name{
  font-family:'Fraunces', serif;
  font-size:1.28rem;
  letter-spacing:.03em;
  line-height:1;

  background:linear-gradient(
    90deg,
    var(--brass) 0%,
    var(--brass-soft) 25%,
    var(--paper) 50%,
    var(--brass-soft) 75%,
    var(--brass) 100%
  );
  background-size:200% auto;
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  animation: gradientSweep 4s linear infinite;
}

@keyframes gradientSweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.brand-sub {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.nav-meridian .nav-link {
  color: var(--muted);
  font-size: .92rem;
  font-weight: 500;
  padding: .68rem .8rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .15rem;
  border-left: 2px solid transparent;
  transition: background .15s ease, color .15s ease;
  position: relative; /* needed to anchor ::before */
}

.nav-meridian .nav-link i {
  font-size: 1.05rem;
  width: 20px;
  text-align: center;
  color: var(--muted-2);
}

.nav-meridian .nav-link:hover {
  background: var(--wash-2);
  color: var(--paper);
}

.nav-meridian .nav-link.active {
  background: linear-gradient(90deg, rgba(201, 162, 75, .14), transparent);
  color: var(--paper);
  border-left-color: transparent; /* replaced by the animated pseudo-element below */
}

.nav-meridian .nav-link.active::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:0;
  width:2px;

  background:linear-gradient(
    180deg,
    var(--brass) 0%,
    var(--brass-soft) 25%,
    var(--paper) 50%,
    var(--brass-soft) 75%,
    var(--brass) 100%
  );
  background-size:auto 200%;
  animation: gradientSweepVertical 4s linear infinite;
}

@keyframes gradientSweepVertical {
  0% { background-position: 50% 0%; }
  100% { background-position: 50% 200%; }
}

.nav-meridian .nav-link.active i {
  color: var(--brass-soft);
}

.sidebar-support {
  margin-top: 2.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  background: linear-gradient(160deg, rgba(201, 162, 75, .08), transparent 70%);
}

.sidebar-support .icon-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brass-soft);
  margin-bottom: .7rem;
}

.offcanvas {
  background: var(--ink-2);
  color: var(--paper);
  border-right: 1px solid var(--hairline);
  width: 270px;
}

.offcanvas .btn-close {
  filter: invert(1) grayscale(1);
  opacity: .6;
}

/* ==========================================================================
   5. Topbar
   Sticky/blurred header bar, search field, icon buttons, avatar
   ========================================================================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  top: 0;
  background: var(--ink);
  border-bottom: 1px solid var(--hairline);
  z-index: 1020;
}


.topbar::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:1px;

  background:linear-gradient(
    90deg,
    var(--brass) 0%,
    var(--brass-soft) 25%,
    var(--paper) 50%,
    var(--brass-soft) 75%,
    var(--brass) 100%
  );
  background-size:200% auto;
  animation: gradientSweep 4s linear infinite;
}

@supports (backdrop-filter: blur(10px)) {
  .topbar {
    background: var(--shell);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.search-shell {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  min-width: 260px;
}

.search-shell input {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--paper);
  font-size: .86rem;
  width: 100%;
}

.search-shell input::placeholder {
  color: var(--muted-2);
}

.search-shell i {
  color: var(--muted-2);
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  position: relative;
  background: var(--surface);
  transition: border-color .15s ease, color .15s ease;
}

.icon-btn:hover {
  color: var(--brass-soft);
  border-color: var(--hairline-strong);
}

.icon-btn .badge-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  border: 1.5px solid var(--ink-2);
  display: none;
}

.avatar-ring {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--brass-soft), var(--brass));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-brass);
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: .95rem;
}

/* ==========================================================================
   6. Bottom Navigation (Mobile Tab Bar)
   Fixed bottom bar with tab items and raised center action button
   ========================================================================== */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  background: var(--ink-2);
  border-top: 1px solid var(--hairline);
  padding: .55rem .4rem calc(.55rem + env(safe-area-inset-bottom));
}

.bottom-nav::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;

  background:linear-gradient(
    90deg,
    var(--brass) 0%,
    var(--brass-soft) 25%,
    var(--paper) 50%,
    var(--brass-soft) 75%,
    var(--brass) 100%
  );
  background-size:200% auto;
  animation: gradientSweep 4s linear infinite;
}
.bottom-nav .bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .22rem;
  color: var(--muted-2);
  font-size: .62rem;
  font-weight: 500;
  padding: .3rem .5rem;
  border-radius: var(--radius-sm);
  flex: 1 1 0;
  min-width: 0;
}

.bottom-nav .bn-item i {
  font-size: 1.2rem;
}

.bottom-nav .bn-item.active {
  color: var(--brass-soft);
}

.bottom-nav .bn-item:active {
  background: var(--wash-6);
}

button.bn-item {
  background: transparent;
  border: 0;
}

.bottom-nav .bn-center {
  margin-top: -30px;
}

.bottom-nav .bn-center .circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--brass-soft), var(--brass));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-brass);
  font-size: 1.3rem;
  border: 4px solid var(--ink-2);
  z-index: 1031;
}

.bottom-nav .bn-center span {
  color: var(--muted);
  margin-top: .3rem;
}

/* ==========================================================================
   7. Profile Page Layout
   Top-bar header, responsive two-column content scroll, section titles
   ========================================================================== */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 18px;
  width: 100%;
  box-sizing: border-box;
}

.top-bar h5 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--paper);
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--muted);
  transition: color .15s ease, border-color .15s ease;
}

.back-btn:hover {
  color: var(--brass-soft);
  border-color: var(--hairline-strong);
}

.content-scroll {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 10px !important;
  box-sizing: border-box;
}

.acc-col-main,
.acc-col-side {
  width: 100% !important;
  flex: 1 1 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

@media (min-width: 992px) {
  .content-scroll {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }

  .acc-col-main {
    flex: 1.3 !important;
    max-width: none !important;
    width: 100%;
  }

  .acc-col-side {
    flex: 1 !important;
    max-width: none !important;
    width: 100%;
  }
}

.spacer {
  height: 20px;
}

.acc-section-title {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brass-soft);
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}

.section-card-plain {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 8px 0;
  margin-bottom: 24px;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   8. Profile Hero & Identity Block
   Avatar, name, subtitle, and account tier badge
   ========================================================================== */
.profile-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  text-align: center;
  background: linear-gradient(160deg, rgba(201, 162, 75, .06), transparent 70%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px 16px;
  margin-bottom: 24px;
  width: 100% !important;
  box-sizing: border-box !important;
}

.profile-avatar-lg {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--brass-soft), var(--brass));
  color: var(--on-brass);
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  margin-bottom: 14px;
  transition: transform 0.2s ease;
}

.profile-avatar-lg:hover {
  transform: scale(1.03);
}

.profile-avatar-lg .edit-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  color: var(--paper);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.profile-name {
  font-family: 'Fraunces', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 4px;
}

.profile-sub {
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.profile-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 99px;
  margin-top: 10px;
}

.profile-tier-badge.tier-silver {
  background: rgba(135, 146, 166, 0.15);
  color: var(--muted-2);
  border: 1px solid rgba(135, 146, 166, 0.3);
}

/* ==========================================================================
   9. KYC Banner & Rewards Progress
   Verification prompt banner and points/progress bar widget
   ========================================================================== */
.kyc-banner {
  display: flex !important;
  align-items: center;
  gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 24px;
  cursor: pointer;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease;
}

.kyc-banner:hover {
  background: var(--wash-2);
}

.kyc-banner-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(168, 121, 47, .1);
  color: var(--brass-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.kyc-banner-text .title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--paper);
}

.kyc-banner-text .sub {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 1px;
}

.reward-progress-wrap {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 24px;
  width: 100% !important;
  box-sizing: border-box !important;
}

.reward-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.reward-pts {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--paper);
  line-height: 1;
}

.reward-label {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 3px;
}

.reward-bar-bg {
  height: 6px;
  background: var(--wash-4);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.reward-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brass), var(--brass-soft));
  border-radius: 3px;
  transition: width 0.4s ease;
}

.reward-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   10. Account Cards (Minimal List)
   Compact account row cards with balance and status indicators
   ========================================================================== */
#accountsList {
  width: 100% !important;
  box-sizing: border-box !important;
}

.account-card-mini {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.account-card-mini:hover {
  background: var(--wash-1);
  border-color: var(--hairline-strong);
}

.acm-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.acm-dot {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.acm-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--paper);
}

.acm-number {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}

.acm-right {
  text-align: right;
}

.acm-balance {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--paper);
}

.acm-status {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 3px;
}

.acm-status.status-active {
  color: var(--sage);
}

.acm-status.status-dormant {
  color: var(--muted-2);
}

.acm-status.status-blocked {
  color: var(--rose);
}

/* ==========================================================================
   11. Menu Rows & Settings List Items
   Clickable settings rows with icon, label, sublabel, and danger variant
   ========================================================================== */
.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--hairline);
  transition: background 0.15s ease;
}

.menu-row:last-child {
  border-bottom: none;
}

.menu-row:hover {
  background: var(--wash-2);
}

.menu-row-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.menu-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(168, 121, 47, .08);
  color: var(--brass-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.menu-row-label {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--paper);
}

.menu-row-sub {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 1px;
}

.menu-row-right {
  font-size: 0.75rem;
  color: var(--muted-2);
}

.danger-row {
  color: var(--rose);
}

.danger-row .menu-row-icon {
  background: rgba(177, 78, 63, 0.1);
  color: var(--rose);
}

.danger-row .menu-row-label {
  color: var(--rose);
  font-weight: 600;
}

/* ==========================================================================
   12. Form Fields & Profile Edit Inputs
   Labeled edit fields, generic input fields, generate/submit button
   ========================================================================== */
.profile-edit-field {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  margin-bottom: 12px;
}

.profile-edit-field label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--brass-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.profile-edit-field input {
  border: none;
  background: transparent;
  color: var(--paper);
  font-size: 0.9rem;
  outline: none;
  padding: 4px 0;
  width: 100%;
}

.profile-edit-field.locked {
  background: var(--wash-2);
  opacity: 0.75;
}

.profile-edit-field.locked input {
  cursor: not-allowed;
}

.input-field {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 14px;
  position: relative;
}

.input-field input,
.input-field select {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--paper);
  font-size: 0.9rem;
}

.input-field .naira {
  font-weight: 600;
  color: var(--brass-soft);
  margin-right: 10px;
}

.generate-btn {
  width: 100%;
  background: linear-gradient(160deg, var(--brass-soft), var(--brass));
  border: 0;
  color: var(--on-brass);
  padding: 14px;
  border-radius: var(--radius-md);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-top: 10px;
  cursor: pointer;
}

.max-amount {
  font-size: 0.75rem;
  color: var(--muted-2);
  margin-top: -8px;
  margin-bottom: 14px;
  padding-left: 4px;
}

/* ==========================================================================
   13. Password & OTP Inputs
   Password visibility toggle, strength meter, OTP boxes, toggle switch
   ========================================================================== */
.pwd-field-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}

.pwd-eye-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 4px;
}

.pwd-strength-bar {
  height: 4px;
  background: var(--wash-4);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
  margin-bottom: 4px;
}

.pwd-strength-fill {
  height: 100%;
  width: 0;
  transition: all 0.3s ease;
}

.pwd-req {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--muted);
}

.pwd-req i {
  font-size: 6px;
}

.toggle-switch {
  width: 42px;
  height: 22px;
  background: var(--wash-5);
  border-radius: 99px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.toggle-switch.on {
  background: var(--sage);
}

.toggle-switch.on::after {
  transform: translateX(20px);
}

/* ==========================================================================
   14. Modals & Interaction Overlays
   Full-screen overlay, sheet/dialog container, OTP grid, step indicators
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(11, 18, 32, .6);
  display: flex;
  align-items: flex-start; /* Allows modal sheets to scroll naturally from the top */
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  overflow-y: auto;        /* Enforces global fallback vertical browsing scrolling functionality */
  -webkit-overflow-scrolling: touch;
}

@supports (backdrop-filter: blur(4px)) {
  .modal-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-sheet {
  width: 100%;
  max-width: 420px;
  max-height: fit-content !important;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 22px 22px 26px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
  transform: translateY(24px);
  transition: transform .25s ease;
  margin: auto 0;          /* Perfectly centers vertically on desktop systems */
  position: relative;
  box-sizing: border-box !important;
}

.modal-overlay.show .modal-sheet {
  transform: translateY(0);
}

/* Mobile responsive layout shift: Locks modal sheets cleanly flush to bottom viewport */
@media (max-width: 575.98px) {
  .modal-overlay {
    align-items: flex-end; /* Snaps interface up from the bottom panel dynamically */
    padding: 0;
  }

  .modal-sheet {
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: fit-content;      /* Limits height context metrics to prevent interface spillover */
    overflow-y: auto;      /* Empowers separate inside scroll tracks for large field groups */
  }
}

.modal-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--hairline-strong);
  margin: 0 auto 16px;
  flex-shrink: 0;
}

.modal-title {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--paper);
}

.otp-wrap,
.otp-group {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}

.otp-input {
  width: 45px;
  height: 50px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-2);
  color: var(--paper);
}

.modal-step {
  display: none;
}

.modal-step.active {
  display: block;
}

.step-indicator {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}

.step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hairline-strong);
}

.step-dot.active {
  background: var(--brass-soft);
  width: 14px;
  border-radius: 3px;
}

.step-dot.done {
  background: var(--sage);
}

/* ==========================================================================
   15. Theme Switch Component
   Light/dark toggle button with animated sun/moon icon swap
   ========================================================================== */
.bank-theme-toggle-btn {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--paper);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s;
}

.bank-theme-toggle-btn:hover {
  border-color: var(--hairline-strong);
  color: var(--brass-soft);
}

.bank-theme-toggle-icon {
  position: absolute;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

html[data-theme="dark"] .bank-theme-toggle-sun {
  transform: scale(0) rotate(-45deg);
  opacity: 0;
}

html:not([data-theme="dark"]) .bank-theme-toggle-moon {
  transform: scale(0) rotate(45deg);
  opacity: 0;
}

/* ==========================================================================
   16. Shimmer Loaders, System Toasts & Preloader
   Skeleton loading animation, floating toast notification, splash preloader
   ========================================================================== */
.shimmer {
  background: linear-gradient(90deg, var(--wash-2) 25%, var(--wash-4) 37%, var(--wash-2) 63%);
  background-size: 400% 100%;
  animation: animationShimmer 1.4s ease infinite;
  border-radius: 4px;
}

@keyframes animationShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.toast-bar {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #1e293b;
  color: #fff;
  padding: 10px 20px;
  border-radius: 99px;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1100;
  pointer-events: none;
}

.toast-bar.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}


/* ============================================================
   BILL PAYMENTS COMPONENT LAYOUT (top-bar & content-scroll)
   ============================================================ */

/* ── Top Bar Structs ── */
.top-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 18px;
  width: 100% !important;
  box-sizing: border-box !important;
}

.top-bar h5 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--paper);
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.back-btn:hover {
  color: var(--brass-soft);
  border-color: var(--hairline-strong);
}

/* ── Content Scroll Framework (Mobile Screen Optimization) ── */
.content-scroll {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.section-lbl {
  font-family: 'Fraunces', serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brass-soft);
  margin-top: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

/* ── Card Swiper Adjustments ── */
.card-swiper-wrap {
  width: 100% !important;
  overflow: hidden;
  position: relative;
  box-sizing: border-box !important;
}

.card-swiper {
  display: flex;
  width: 100%;
  transition: transform 0.3s ease;
}

.card-slide {
  min-width: 100%;
  box-sizing: border-box;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 10px;
}

.dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hairline-strong);
  cursor: pointer;
  transition: all 0.2s ease;
}

.dots .dot.active {
  background: var(--brass-soft);
  width: 18px;
  border-radius: 4px;
}

/* ── Selected Category Banner ── */
.sel-cat-banner {
  display: none;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(201, 162, 75, 0.1), transparent);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sel-cat-banner.show {
  display: flex !important;
  animation: filterFadeIn 0.2s ease;
}

.scb-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.scb-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--paper);
}

.scb-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 1px;
}

.scb-clear {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--rose);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
}

/* ── Bill Category Grid Structs ── */
.bill-cats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 576px) {
  .bill-cats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.bill-cat-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.bill-cat-card:hover,
.bill-cat-card.selected {
  background: var(--surface);
  border-color: var(--brass-soft);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.bcc-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.bcc-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--paper);
}

/* ── Dynamic Biller Form Layer ── */
.bill-form-area {
  display: none;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 8px;
}

.bill-form-area.show {
  display: block !important;
  animation: filterFadeIn 0.3s ease;
}

.biller-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .biller-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.biller-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.biller-card:hover,
.biller-card.selected {
  background: var(--surface);
  border-color: var(--brass);
}

.bc-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.bc-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.2;
}

.bc-sub {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 1px;
}

/* ── Live Lookup Verified Name Strip ── */
.verified-strip {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(61, 138, 95, 0.08);
  border: 1px solid rgba(61, 138, 95, 0.25);
  color: var(--sage);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.8rem;
  margin-top: 6px;
  margin-bottom: 14px;
  width: 100% !important;
  box-sizing: border-box !important;
}

.verified-strip.show {
  display: flex !important;
}

/* ── Fixed Fast Amount Selection Chips ── */
.amt-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
  margin-top: 4px;
  width: 100% !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch;
}

.amt-chips::-webkit-scrollbar {
  display: none;
}

.amt-chip {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 99px;
  padding: 8px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.amt-chip:hover,
.amt-chip.active {
  background: var(--paper);
  color: var(--surface);
  border-color: var(--paper);
}

html[data-theme="dark"] .amt-chip:hover,
html[data-theme="dark"] .amt-chip.active {
  background: var(--brass-soft);
  color: var(--on-brass);
  border-color: var(--brass-soft);
}

.proceed-wrap {
  margin-top: 24px;
  width: 100% !important;
}

/* ── Keyframe Animations ── */
@keyframes filterFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

  /* ── PAGE CONTENT & FORM STYLES ── */
  .panel{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-lg); position:relative; }
  .transfer-tabs { display: flex; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 4px; margin-bottom: 20px; }
  .transfer-tab { flex: 1; text-align: center; padding: 10px; font-size: 0.85rem; font-weight: 600; color: var(--muted); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; }
  .transfer-tab.active { background: var(--surface); color: var(--paper); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
  
  .input-field { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 14px; position: relative; }
  .input-field input, .input-field select { width: 100%; background: transparent; border: 0; outline: 0; color: var(--paper); font-size: 0.9rem; }
  .input-field .naira { font-weight: 600; color: var(--brass-soft); margin-right: 10px; }
  
  .generate-btn { width: 100%; background: linear-gradient(160deg, var(--brass-soft), var(--brass)); border: 0; color: var(--on-brass); padding: 14px; border-radius: var(--radius-md); font-weight: 600; letter-spacing: 0.05em; margin-top: 10px; cursor: pointer; }
  .max-amount { font-size: 0.75rem; color: var(--muted-2); margin-top: -8px; margin-bottom: 14px; padding-left: 4px; }

  /* Card Swiper Styles */
  @property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.card-swiper-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 2px; /* controls border thickness */
  background: conic-gradient(
    from var(--border-angle),
    var(--brass) 0deg,
    var(--brass-soft) 90deg,
    var(--paper) 180deg,
    var(--brass-soft) 270deg,
    var(--brass) 360deg
  );
  animation: rotateBorder 4s linear infinite;
}

.card-swiper-wrap-inner {
  background: var(--surface);
  border-radius: calc(var(--radius-lg) - 2px);
  height: 100%;
  width: 100%;
}

@keyframes rotateBorder {
  to { --border-angle: 360deg; }
}
  .card-swiper { display: flex; transition: transform 0.3s ease; }
  .card-slide { min-width: 100%; box-sizing: border-box; }
  .home-card { padding: 20px; border-radius: var(--radius-md); background: linear-gradient(135deg, #1e293b, #0f172a); color: #fff; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }
  .home-card.card-premier { background: linear-gradient(135deg, #1e2330, #2a3447); }
  .home-card.card-current { background: linear-gradient(135deg, #1d2d24, #122018); }
  .home-card.card-dollar { background: linear-gradient(135deg, #312518, #1c140c); }
  .home-card.card-fixed { background: linear-gradient(135deg, #2b1d2d, #190f1b); }
  .home-card.card-target { background: linear-gradient(135deg, #1d2b2c, #0e191a); }
  
  .card-top { display: flex; justify-content: space-between; align-items: flex-start; }
  .acc-name { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
  .acc-details { font-size: 0.75rem; opacity: 0.6; }
  .access-logo-row { font-size: 0.8rem; font-weight: bold; display: flex; align-items: center; gap: 5px; }
  .balance-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 15px; }
  .balance-label { font-size: 0.7rem; opacity: 0.7; }
  .balance-amt { font-size: 1.3rem; font-weight: bold; font-family: 'IBM Plex Mono', monospace; }
  .card-icon-btn { background: rgba(255,255,255,0.1); border: 0; color: #fff; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

  .swiper-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
  .swiper-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline-strong); cursor: pointer; transition: all 0.2s; }
  .swiper-dots .dot.active { background: var(--brass-soft); width: 18px; border-radius: 4px; }

  /* Beneficiary Strip */
  .benef-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 15px; }
  .beneficiary-item { display: flex; flex-direction: column; align-items: center; font-size: 0.75rem; cursor: pointer; min-width: 60px; }
  .beneficiary-avatar { width: 44px; height: 44px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-bottom: 4px; }

  /* Modals */
  .custom-modal { display: none; position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 15px; }
  .custom-modal.show { display: flex; }
  .modal-box { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); width: 100%; max-width: 440px; padding: 24px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
  .otp-group { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
  .otp-input { width: 45px; height: 50px; text-align: center; font-size: 1.2rem; font-weight: bold; border-radius: var(--radius-sm); border: 1px solid var(--hairline-strong); background: var(--surface-2); color: var(--paper); }

  /* Verified Badge */
  .verified-badge { background: rgba(61,138,95,0.1); border: 1px solid var(--sage); color: var(--sage); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.8rem; margin-bottom: 14px; display: none; }
  .lookup-loader { position: absolute; right: 15px; display: none; }

  /* Toast Bar */
  .toast-bar { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(100px); background: #1e293b; color: #fff; padding: 10px 20px; border-radius: 99px; font-size: 0.85rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; transition: all 0.3s ease; z-index: 1100; pointer-events: none; }
  .toast-bar.show { transform: translateX(-50%) translateY(0); opacity: 1; }




    /* ── Card Chip SVG ─────────────────────────────────────────── */
    .chip-svg { width: 36px; height: 28px; }

    /* ── Base card styles ──────────────────────────────────────── */
    .bank-card {
      position: relative;
      width: 100%;
      aspect-ratio: 1.586 / 1;
      border-radius: 18px;
      padding: 20px 22px 18px;
      overflow: hidden;
      cursor: pointer;
      transition: transform .25s ease, box-shadow .25s ease;
      user-select: none;
      -webkit-user-select: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .bank-card:active { transform: scale(0.97); }

    /* ── Card gradient themes ──────────────────────────────────── */
    .card-visa-debit {
      background: linear-gradient(135deg, #10192e 0%, #17223b 45%, var(--paper) 100%);
      box-shadow: 0 12px 32px rgba(23, 34, 58, 0.25);
    }
    .card-mastercard-debit {
      background: linear-gradient(135deg, #1c1c1c 0%, #2d2d2d 50%, #121212 100%);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    }
    .card-verve {
      background: linear-gradient(135deg, #0d2417 0%, var(--sage) 55%, #1b4d2e 100%);
      box-shadow: 0 12px 32px rgba(61, 138, 95, 0.25);
    }
    .card-visa-credit {
      background: linear-gradient(135deg, #3d143c 0%, var(--rose) 50%, #5c184b 100%);
      box-shadow: 0 12px 32px rgba(177, 78, 63, 0.25);
    }
    .card-mastercard-credit {
      background: linear-gradient(135deg, var(--rose) 0%, #a63f30 50%, #873326 100%);
      box-shadow: 0 12px 32px rgba(177, 78, 63, 0.3);
    }
    .card-inactive, .card-pending {
      filter: grayscale(0.7) !important;
      opacity: 0.65;
    }

    /* ── Glossy overlay ────────────────────────────────────────── */
    .bank-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 40%,
        transparent 60%);
      border-radius: inherit;
      pointer-events: none;
    }

    /* Decorative circle blobs */
    .bank-card::after {
      content: '';
      position: absolute;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.03);
      right: -60px;
      bottom: -60px;
      pointer-events: none;
    }

    .card-circle-2 {
      position: absolute;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.05);
      right: 20px;
      bottom: 10px;
      pointer-events: none;
    }

    /* ── Card top row ──────────────────────────────────────────── */
    .card-top-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .card-bank-name {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .5px;
      color: #ffffff;
    }
    .card-bank-name span { color: var(--brass-soft); }
    .card-network-logo {
      display: flex;
      align-items: center;
    }

    /* ── Card middle (PAN) ─────────────────────────────────────── */
    .card-pan-wrap {
      margin: 2px 0;
    }
    .card-pan {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 3px;
      color: #ffffff;
      font-family: 'Courier New', monospace;
      text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }
    .card-pan-hidden {
      font-size: 18px;
      letter-spacing: 4px;
      color: rgba(255, 255, 255, 0.4);
      font-family: 'Courier New', monospace;
    }

    /* ── Card bottom row ───────────────────────────────────────── */
    .card-bottom-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
    .card-holder-wrap .card-label {
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 2px;
    }
    .card-holder-name {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #ffffff;
      text-transform: uppercase;
    }
    .card-expiry-wrap .card-label {
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 2px;
    }
    .card-expiry {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #ffffff;
      font-family: 'Courier New', monospace;
    }

    /* ── Card status badge ─────────────────────────────────────── */
    .card-status-badge {
      position: absolute;
      top: 14px;
      right: 16px;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 1px;
      padding: 3px 8px;
      border-radius: 20px;
      text-transform: uppercase;
    }
    .badge-active    { background: rgba(61, 138, 95, 0.15); color: var(--sage); border: 1px solid var(--sage); }
    .badge-inactive  { background: var(--orange-07); color: var(--brass-soft); border: 1px solid var(--hairline-strong); }
    .badge-blocked   { background: rgba(177, 78, 63, 0.15); color: var(--rose); border: 1px solid var(--rose); }
    .badge-pending   { background: rgba(91, 107, 133, 0.15); color: var(--muted); border: 1px solid var(--muted-2); }
    .badge-expired   { background: var(--wash-4); color: var(--muted-2); border: 1px solid var(--hairline); }

    /* ── Eye toggle on card ────────────────────────────────────── */
    .card-eye-overlay {
      position: absolute;
      bottom: 16px;
      right: 18px;
      width: 32px;
      height: 32px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 13px;
      cursor: pointer;
      transition: background .15s;
      z-index: 2;
    }
    .card-eye-overlay:active { background: rgba(255, 255, 255, 0.2); }

    /* ── Contactless / International badges on card ────────────── */
    .card-feature-badges {
      position: absolute;
      top: 44px;
      right: 16px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-end;
    }
    .card-feat-badge {
      font-size: 8px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* ── CVV row (shown only when revealed) ───────────────────── */
    .card-cvv-row {
      display: none;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
    }
    .card-cvv-row.show { display: flex; }
    .card-cvv-label { font-size: 8px; color: rgba(255, 255, 255, 0.5); letter-spacing: 1px; }
    .card-cvv-val {
      font-size: 13px;
      font-weight: 700;
      font-family: 'Courier New', monospace;
      color: #ffffff;
      letter-spacing: 3px;
    }

    /* ── Card container wrapper ────────────────────────────────── */
    .card-item-wrap {
      margin-bottom: 24px;
    }

    /* ── Card actions below card ───────────────────────────────── */
    .card-actions-row {
      display: flex;
      gap: 8px;
      margin-top: 14px;
    }
    .card-action-pill {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 11px 8px;
      background: var(--surface-2);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-md);
      color: var(--paper);
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s, color .15s;
    }
    .card-action-pill i { font-size: 13px; }
    .card-action-pill:active { background: var(--wash-2); }
    .cap-danger  { color: var(--rose); border-color: rgba(177, 78, 63, 0.2); }
    .cap-primary { color: var(--brass-soft); border-color: var(--orange-10); }

    /* ── Empty state ───────────────────────────────────────────── */
    .cards-empty-state {
      text-align: center;
      padding: 60px 24px 40px;
    }
    .ces-icon {
      width: 80px;
      height: 80px;
      background: var(--surface-2);
      border: 2px dashed var(--hairline-strong);
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 32px;
      color: var(--brass-soft);
    }
    .ces-title { font-size: 16px; font-weight: 700; color: var(--paper); margin-bottom: 8px; }
    .ces-sub   { font-size: 13px; color: var(--muted); line-height: 1.6; }

    /* ── Request card modal ────────────────────────────────────── */
    .modal-sheet { padding: 24px 20px; }
    .req-card-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 16px 0;
    }
    .req-card-option {
      border: 1px solid var(--hairline);
      border-radius: 14px;
      padding: 14px 10px;
      text-align: center;
      cursor: pointer;
      transition: border-color .2s, background .2s;
      background: var(--surface-2);
    }
    .req-card-option:active,
    .req-card-option.selected {
      border-color: var(--brass);
      background: var(--orange-07);
    }
    .rco-icon { font-size: 26px; margin-bottom: 6px; }
    .rco-name { font-size: 11px; font-weight: 700; color: var(--paper); }
    .rco-type { font-size: 9px; color: var(--muted); margin-top: 2px; }

    .req-account-select {
      background: var(--surface-2);
      border: 1px solid var(--hairline);
      color: var(--paper);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 13px;
      width: 100%;
      margin-bottom: 12px;
    }
    .req-account-select option { background: var(--surface); color: var(--paper); }

    .req-submit-btn {
      width: 100%;
      padding: 14px;
      background: linear-gradient(90deg, var(--brass), var(--brass-soft));
      border: none;
      border-radius: 14px;
      color: var(--on-brass);
      font-size: 15px;

font-weight: 700;cursor: pointer;margin-top: 8px;transition: opacity .2s;}.req-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }.req-submit-btn:active:not(:disabled) { opacity: 0.85; }/* ── Detail modal ──────────────────────────────────────────── */.detail-row {display: flex;justify-content: space-between;align-items: center;padding: 12px 0;border-bottom: 1px solid var(--hairline);}.detail-row:last-child { border-bottom: none; }.dr-label { font-size: 11px; color: var(--muted); font-weight: 600; }.dr-val   { font-size: 13px; font-weight: 600; color: var(--paper); }.dr-val.mono { font-family: 'Courier New', monospace; font-size: 12px; letter-spacing: 1px; }/* ── Limit slider ──────────────────────────────────────────── */.limit-slider {-webkit-appearance: none;appearance: none;width: 100%;height: 6px;background: var(--wash-4);border-radius: 3px;outline: none;}.limit-slider::-webkit-slider-thumb {-webkit-appearance: none;width: 20px; height: 20px;border-radius: 50%;background: var(--brass-soft);cursor: pointer;}/* ── Loading skeleton ──────────────────────────────────────── */.skeleton-card {width: 100%;aspect-ratio: 1.586 / 1;border-radius: 18px;background: linear-gradient(90deg, var(--surface-2) 25%, var(--wash-4) 50%, var(--surface-2) 75%);background-size: 200% 100%;animation: skeleton-shimmer 1.5s infinite;margin-bottom: 24px;}@keyframes skeleton-shimmer {0%   { background-position: -200% 0; }100% { background-position:  200% 0; }}/* ── Page header ───────────────────────────────────────────── */.page-header-cards {display: flex;align-items: center;gap: 14px;padding: 18px 16px 10px;}.page-header-cards .back-btn {width: 36px; height: 36px;background: var(--surface-2);border: 1px solid var(--hairline);border-radius: 10px;display: flex; align-items: center; justify-content: center;color: var(--paper); font-size: 14px; cursor: pointer;text-decoration: none;}.page-header-cards h5 {flex: 1;margin: 0;font-size: 17px;font-weight: 800;color: var(--paper);}.add-card-btn {width: 36px; height: 36px;background: linear-gradient(135deg, var(--brass), var(--brass-soft));border: none;border-radius: 10px;display: flex; align-items: center; justify-content: center;color: var(--on-brass); font-size: 16px; cursor: pointer;}/* Mastercard logo circles */.mc-logo { display: flex; align-items: center; }.mc-left  { width: 26px; height: 26px; background: #eb001b; border-radius: 50%; opacity: 0.9; }.mc-right { width: 26px; height: 26px; background: #f79e1b; border-radius: 50%; opacity: 0.9; margin-left: -10px; }/* Visa text */.visa-logo {font-size: 18px;font-weight: 900;font-style: italic;color: #ffffff;letter-spacing: -1px;}/* Verve logo */.verve-logo {background: linear-gradient(90deg, #007d4b, #00a36c);color: #ffffff;font-size: 11px;font-weight: 900;padding: 3px 8px;border-radius: 4px;letter-spacing: 1px;}/* Pending card overlay */.pending-overlay {position: absolute;inset: 0;background: rgba(11, 18, 32, 0.65);display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 18px;backdrop-filter: blur(2px);}.pending-overlay i { font-size: 28px; color: var(--brass-soft); margin-bottom: 8px; }.pending-overlay span { font-size: 12px; font-weight: 700; color: var(--brass-soft); letter-spacing: 1px; }/* ── Tabs ──────────────────────────────────────────────────── */.cards-tabs {display: flex;gap: 8px;padding: 0 16px 14px;}.ctab {padding: 7px 16px;border-radius: 20px;font-size: 12px;font-weight: 700;border: 1px solid var(--hairline);color: var(--muted);background: transparent;cursor: pointer;transition: all .2s;}.ctab.active {background: var(--brass-soft);color: var(--on-brass);border-color: transparent;}.modal-overlay { display:none; }.modal-overlay.show { display:flex; }/* ── Category grid ─────────────────────────────────────── */.bill-cats-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;margin-bottom: 4px;}.bill-cat-card {background: var(--surface-2);border: 1.5px solid transparent;border-radius: 14px;padding: 14px 6px 10px;cursor: pointer;display: flex;flex-direction: column;align-items: center;gap: 7px;transition: border-color .18s, background .18s;-webkit-tap-highlight-color: transparent;}.bill-cat-card.selected,.bill-cat-card:active {border-color: var(--brass-soft);background: var(--orange-10);}.bcc-icon {width: 44px; height: 44px;border-radius: 12px;display: flex; align-items: center; justify-content: center;font-size: 18px;flex-shrink: 0;}.bcc-label {font-size: 9.5px;font-weight: 700;color: var(--muted);text-align: center;line-height: 1.3;}/* ── Selected category banner ──────────────────────────── */.sel-cat-banner {display: none;align-items: center;gap: 12px;background: var(--surface-2);border: 1.5px solid var(--orange-20);border-radius: 14px;padding: 12px 14px;margin-bottom: 14px;}.sel-cat-banner.show { display: flex; }.scb-icon {width: 44px; height: 44px;border-radius: 12px;display: flex; align-items: center; justify-content: center;font-size: 20px; flex-shrink: 0;}.scb-name    { font-size: 14px; font-weight: 700; color: var(--paper); }.scb-sub     { font-size: 11px; color: var(--muted); margin-top: 1px; }.scb-clear   { margin-left: auto; background: none; border: none; color: var(--muted-2); font-size: 18px; cursor: pointer; padding: 4px; }/* ── Biller grid (shown after category selected) ───────── */.bill-form-area { display: none; }.bill-form-area.show { display: block; }.section-lbl {font-size: 11px;font-weight: 700;color: var(--muted);text-transform: uppercase;letter-spacing: .8px;margin: 14px 0 8px;}.biller-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 9px;}.biller-card {background: var(--surface-2);border: 1.5px solid transparent;border-radius: 12px;padding: 12px 10px;cursor: pointer;display: flex;align-items: center;gap: 10px;transition: border-color .18s, background .18s;-webkit-tap-highlight-color: transparent;}.biller-card.selected,.biller-card:active {border-color: var(--brass-soft);background: var(--orange-08);}.bc-logo {width: 36px; height: 36px;border-radius: 9px;display: flex; align-items: center; justify-content: center;font-size: 10px; font-weight: 900;color: #ffffff; flex-shrink: 0;letter-spacing: -.3px;}.bc-name { font-size: 11px; font-weight: 700; color: var(--paper); line-height: 1.3; }.bc-sub  { font-size: 9.5px; color: var(--muted-2); margin-top: 1px; }/* ── Amount chips ──────────────────────────────────────── */.amt-chips {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;}.amt-chip {padding: 7px 14px;border-radius: 20px;border: 1.5px solid var(--hairline);background: var(--surface-2);font-size: 12px; color: var(--muted);cursor: pointer;transition: all .18s;}.amt-chip.active {border-color: var(--brass-soft);color: var(--brass-soft);background: var(--orange-10);}/* ── Verified name strip ───────────────────────────────── */.verified-strip {display: none;align-items: center;gap: 8px;background: rgba(61, 138, 95, 0.1);border: 1px solid rgba(61, 138, 95, 0.2);border-radius: 10px;padding: 9px 12px;margin-top: 8px;}.verified-strip.show { display: flex; }.verified-strip i { color: var(--sage); font-size: 14px; flex-shrink: 0; }.verified-strip span { font-size: 12px; color: var(--muted); }.verified-strip strong { color: var(--paper); font-size: 12px; }.proceed-wrap { margin-top: 20px; }
/* ============================================================
   INNER MODAL SCROLL TRACK (Hidden Scrollbar)
   ============================================================ */
#detailModalContent {
  max-height: 55vh;            /* Restricts height to prevent breaking screen limits */
  overflow-y: auto;            /* Activates vertical layout engine scrolling strictly here */
  padding-right: 4px;          /* Prevent content from clipping against the hidden boundary */
  
  /* Hides native scrollbar on standard modern browsers */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Internet Explorer 10+ */
}

/* Hides native scrollbar on WebKit engine layout frameworks (Chrome, Safari, Edge, Opera) */
#detailModalContent::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}

/* On ultra-short mobile viewports, shrink the maximum height to maximize viewing space */
@media (max-height: 600px) {
  #detailModalContent {
    max-height: 42vh;
  }
}



/* ── Check-deposit-specific styling ────────────────────────────────
   Built on the shared design-token system, same conventions as kyc.php:
     pending/processing → --blue (no soft token defined; shaded from its own hex)
     approved/cleared   → --green / --green-dim, with a dark-mode foreground
                           bump to #9fe3a2 since --green itself isn't
                           redefined at the [data-theme="dark"] root
     rejected            → --danger / --danger-soft (already theme-aware)
───────────────────────────────────────────────────────────────── */
.cd-intro{
  display:flex; align-items:center; gap:14px; padding:16px;
  border-radius:var(--radius-sm); background:var(--surface2);
  border:1px solid var(--border); margin-bottom:16px;
}
.cd-intro-icon{
  width:48px; height:48px; border-radius:var(--radius-xs); flex-shrink:0;
  background:var(--orange-12); color:var(--orange);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.cd-intro .title{ font-family:var(--font-heading); font-size:14px; font-weight:700; color:var(--heading); }
.cd-intro .sub{ font-family:var(--font-body); font-size:12px; color:var(--text-muted); margin-top:2px; }

.new-deposit-btn{
  width:100%; padding:13px; margin-bottom:20px; border:none; border-radius:var(--radius-sm);
  background: linear-gradient(135deg, var(--brass), var(--brass-soft)); color: var(--on-brass); font-family:var(--font-body); font-size:14px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background var(--transition-fast);
}
.new-deposit-btn:active{ background:var(--on-brass); color: var(--brass); }

.dep-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  margin-bottom:10px; cursor:pointer; background:var(--surface);
  transition:background var(--transition-fast);
}
.dep-item:active{ background:var(--surface2); }
.dep-icon{
  width:38px; height:38px; border-radius:var(--radius-xs); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.dep-icon.st-pending, .dep-icon.st-processing{ background:rgba(77,144,254,0.12); color:var(--blue); }
.dep-icon.st-approved, .dep-icon.st-cleared{ background:var(--green-dim); color:var(--green); }
[data-theme="dark"] .dep-icon.st-approved, [data-theme="dark"] .dep-icon.st-cleared{ color:#9fe3a2; }
.dep-icon.st-rejected{ background:var(--danger-soft); color:var(--danger); }

.dep-main{ flex:1; min-width:0; }
.dep-payer{ font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dep-sub{ font-family:var(--font-body); font-size:11px; color:var(--text-muted); margin-top:2px; }
.dep-amt{ font-family:var(--font-amt); font-size:13px; font-weight:700; color:var(--text); text-align:right; flex-shrink:0; }
.dep-badge{
  font-family:var(--font-body); font-size:9px; font-weight:700; padding:2px 7px; border-radius:99px;
  text-transform:uppercase; letter-spacing:.3px; display:inline-block; margin-top:4px;
}
.dep-badge.st-pending, .dep-badge.st-processing{ background:rgba(77,144,254,0.12); color:var(--blue); }
.dep-badge.st-approved, .dep-badge.st-cleared{ background:var(--green-dim); color:var(--green); }
[data-theme="dark"] .dep-badge.st-approved, [data-theme="dark"] .dep-badge.st-cleared{ color:#9fe3a2; }
.dep-badge.st-rejected{ background:var(--danger-soft); color:var(--danger); }

.select-field, .cd-input{
  width:100%; padding:12px 14px; border-radius:var(--radius-xs); border:1px solid var(--border);
  background:var(--surface2); color:var(--text); font-family:var(--font-body); font-size:13px;
  margin-bottom:12px; box-sizing:border-box; transition:border-color var(--transition-fast);
}
.select-field:focus, .cd-input:focus{ outline:none; border-color:var(--orange-focus); }
.file-drop{
  border:1.5px dashed var(--border); border-radius:var(--radius-xs); padding:16px; text-align:center;
  cursor:pointer; margin-bottom:12px; font-family:var(--font-body); font-size:12px; color:var(--text-muted);
  background:var(--surface2); transition:border-color var(--transition-fast), color var(--transition-fast);
}
.file-drop.has-file{ border-color:var(--orange); color:var(--orange); background:var(--orange-soft); }
.field-label{ font-family:var(--font-body); font-size:12px; color:var(--text-muted); display:block; margin-bottom:6px; }

.timeline{ margin:14px 0; }
.tl-row{ display:flex; gap:10px; padding:6px 0; }
.tl-dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); margin-top:5px; flex-shrink:0; }
.tl-dot.done{ background:var(--green); }
[data-theme="dark"] .tl-dot.done{ background:#9fe3a2; }
.tl-dot.bad{ background:var(--danger); }
.tl-text{ font-family:var(--font-body); font-size:12px; color:var(--text); }
.tl-time{ font-size:10.5px; color:var(--text-muted); margin-top:1px; }

.check-preview-row{ display:flex; gap:10px; margin-bottom:14px; }
.check-preview{
  flex:1; border:1px solid var(--border); border-radius:var(--radius-xs); overflow:hidden;
  background:var(--surface2); cursor:pointer; aspect-ratio:1.6/1; display:flex; align-items:center; justify-content:center;
}
.check-preview img{ width:100%; height:100%; object-fit:cover; }
.check-preview .ph-label{ font-size:11px; color:var(--text-muted); }

/* ── Feedback modals (replace toast for error/success states) ──────
   Error uses a static icon on the semantic danger token. Success uses
   a small hand-drawn SVG checkmark: the circle strokes in first, then
   the check strokes in after it, using stroke-dasharray/dashoffset —
   a classic, dependency-free way to animate an SVG path. Both re-run
   their animation on every open via a clone-and-replace trick (a CSS
   animation won't restart just by re-showing an element that already
   has the class applied). ───────────────────────────────────────── */
.feedback-icon-wrap{
  width:64px; height:64px; border-radius:50%; margin:6px auto 4px;
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.feedback-icon-wrap.error{ background:var(--danger-soft); color:var(--danger); }

.success-check{ width:76px; height:76px; display:block; margin:6px auto 4px; }
.success-check .check-circle{
  stroke:var(--green); stroke-width:2.5; fill:none;
  stroke-dasharray:166; stroke-dashoffset:166;
  animation:successCircle .5s cubic-bezier(0.65,0,0.45,1) forwards;
}
.success-check .check-mark{
  stroke:var(--green); stroke-width:3.5; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:48; stroke-dashoffset:48;
  animation:successMark .35s cubic-bezier(0.65,0,0.45,1) .5s forwards;
}
[data-theme="dark"] .success-check .check-circle,
[data-theme="dark"] .success-check .check-mark{ stroke:#9fe3a2; }
@keyframes successCircle{ to{ stroke-dashoffset:0; } }
@keyframes successMark{ to{ stroke-dashoffset:0; } }



/* ============================================================
   INNER MODAL SCROLL TRACK (Hidden Scrollbar)
   ============================================================ */
#detailBody {
  max-height: 55vh;            /* Restricts height to prevent breaking screen limits */
  overflow-y: auto;            /* Activates vertical layout engine scrolling strictly here */
  padding-right: 4px;          /* Prevent content from clipping against the hidden boundary */
  
  /* Hides native scrollbar on standard modern browsers */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Internet Explorer 10+ */
}

/* Hides native scrollbar on WebKit engine layout frameworks (Chrome, Safari, Edge, Opera) */
#detailBody::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}

/* On ultra-short mobile viewports, shrink the maximum height to maximize viewing space */
@media (max-height: 600px) {
  #detailBody {
    max-height: 42vh;
  }
}


/* ============================================================
   INNER MODAL SCROLL TRACK (Hidden Scrollbar)
   ============================================================ */
#imgModalPic {
  max-height: 55vh;            /* Restricts height to prevent breaking screen limits */
  overflow-y: auto;            /* Activates vertical layout engine scrolling strictly here */
  padding-right: 4px;          /* Prevent content from clipping against the hidden boundary */
  
  /* Hides native scrollbar on standard modern browsers */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Internet Explorer 10+ */
}

/* Hides native scrollbar on WebKit engine layout frameworks (Chrome, Safari, Edge, Opera) */
#imgModalPic::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}

/* On ultra-short mobile viewports, shrink the maximum height to maximize viewing space */
@media (max-height: 600px) {
  #imgModalPic {
    max-height: 42vh;
  }
}
  /* ── PAGE CONTENT & FORM STYLES ── */
  .panel{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-lg); position:relative; }
  .transfer-tabs { display: flex; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 4px; margin-bottom: 20px; }
  .transfer-tab { flex: 1; text-align: center; padding: 10px; font-size: 0.85rem; font-weight: 600; color: var(--muted); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; }
  .transfer-tab.active { background: var(--surface); color: var(--paper); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
  
  .input-field { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 14px; position: relative; }
  .input-field input, .input-field select { width: 100%; background: transparent; border: 0; outline: 0; color: var(--paper); font-size: 0.9rem; }
  .input-field .naira { font-weight: 600; color: var(--brass-soft); margin-right: 10px; }
  
  .generate-btn { width: 100%; background: linear-gradient(160deg, var(--brass-soft), var(--brass)); border: 0; color: var(--on-brass); padding: 14px; border-radius: var(--radius-md); font-weight: 600; letter-spacing: 0.05em; margin-top: 10px; cursor: pointer; }
  .max-amount { font-size: 0.75rem; color: var(--muted-2); margin-top: -8px; margin-bottom: 14px; padding-left: 4px; }

  /* Card Swiper Styles */
  .card-swiper-wrapper { overflow: hidden; position: relative; border-radius: var(--radius-md); margin-bottom: 15px; }
  .card-swiper { display: flex; transition: transform 0.3s ease; }
  .card-slide { min-width: 100%; box-sizing: border-box; }
  .home-card { padding: 20px; border-radius: var(--radius-md); background: linear-gradient(135deg, #1e293b, #0f172a); color: #fff; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }
  .home-card.card-premier { background: linear-gradient(135deg, #1e2330, #2a3447); }
  .home-card.card-current { background: linear-gradient(135deg, #1d2d24, #122018); }
  .home-card.card-dollar { background: linear-gradient(135deg, #312518, #1c140c); }
  .home-card.card-fixed { background: linear-gradient(135deg, #2b1d2d, #190f1b); }
  .home-card.card-target { background: linear-gradient(135deg, #1d2b2c, #0e191a); }
  
  .card-top { display: flex; justify-content: space-between; align-items: flex-start; }
  .acc-name { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
  .acc-details { font-size: 0.75rem; opacity: 0.6; }
  .access-logo-row { font-size: 0.8rem; font-weight: bold; display: flex; align-items: center; gap: 5px; }
  .balance-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 15px; }
  .balance-label { font-size: 0.7rem; opacity: 0.7; }
  .balance-amt { font-size: 1.3rem; font-weight: bold; font-family: 'IBM Plex Mono', monospace; }
  .card-icon-btn { background: rgba(255,255,255,0.1); border: 0; color: #fff; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

  .swiper-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
  .swiper-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline-strong); cursor: pointer; transition: all 0.2s; }
  .swiper-dots .dot.active { background: var(--brass-soft); width: 18px; border-radius: 4px; }

  /* Beneficiary Strip */
  .benef-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 15px; }
  .beneficiary-item { display: flex; flex-direction: column; align-items: center; font-size: 0.75rem; cursor: pointer; min-width: 60px; }
  .beneficiary-avatar { width: 44px; height: 44px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-bottom: 4px; }

  /* Modals */
  .custom-modal { display: none; position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 15px; }
  .custom-modal.show { display: flex; }
  .modal-box { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); width: 100%; max-width: 440px; padding: 24px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
  .otp-group { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
  .otp-input { width: 45px; height: 50px; text-align: center; font-size: 1.2rem; font-weight: bold; border-radius: var(--radius-sm); border: 1px solid var(--hairline-strong); background: var(--surface-2); color: var(--paper); }

  /* Verified Badge */
  .verified-badge { background: rgba(61,138,95,0.1); border: 1px solid var(--sage); color: var(--sage); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.8rem; margin-bottom: 14px; display: none; }
  .lookup-loader { position: absolute; right: 15px; display: none; }

  /* Toast Bar */
  .toast-bar { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(100px); background: #1e293b; color: #fff; padding: 10px 20px; border-radius: 99px; font-size: 0.85rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; transition: all 0.3s ease; z-index: 1100; pointer-events: none; }
  .toast-bar.show { transform: translateX(-50%) translateY(0); opacity: 1; }

  /* Preloader */
  #preloader { position: fixed; inset: 0; background: var(--ink); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s; }
  #preloader.hide { opacity: 0; pointer-events: none; }
  
  
/* ============================================================
   INTERNATIONAL TRANSFER / TOPUP
   ============================================================ */
.country-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; }
.country-card{ background: var(--surface2); border: 1.5px solid transparent; border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all .2s; }
.country-card:active, .country-card.selected{ border-color: var(--brass); background: var(--orange-10); }
.country-flag{ font-size: 22px; line-height: 1; }
.country-info{ flex: 1; min-width: 0; }
.country-name{ font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.country-cur{ font-size: 10px; color: var(--text-muted); }

.rate-ticker{ background: var(--orange-08); border: 1px solid var(--orange-20); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.rate-row{ display: flex; justify-content: space-between; align-items: center; }
.rate-label{ font-size: 11px; color: var(--text-muted); }
.rate-val{ font-size: 15px; font-weight: 700; color: var(--orange); }
.rate-sub{ font-size: 10px; color: var(--text-sub); margin-top: 2px; }
.rate-spinner{ display: none; text-align: center; padding: 14px; color: var(--text-muted); font-size: 12px; }
.rate-spinner.show{ display: block; }

.amt-split{ background: var(--surface2); border-radius: 12px; padding: 14px; margin-top: 10px; }
.amt-split-row{ display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.amt-split-row:last-child{ margin-bottom: 0; padding-top: 8px; border-top: 1px solid var(--border); font-weight: 700; font-size: 13px; }
.amt-split-row span:last-child{ color: var(--brass); font-weight: 600; }

.summary-card{ background: var(--surface2); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.summary-section-title{ font-size: 10px; font-weight: 700; color: var(--orange); letter-spacing: 1px; text-transform: uppercase; padding: 10px 14px 4px; }
.summary-row{ display: flex; justify-content: space-between; align-items: flex-start; padding: 7px 14px; border-bottom: 1px solid var(--border); gap: 10px; }
.summary-row:last-child{ border-bottom: none; }
.summary-row .s-label{ font-size: 11px; color: var(--text-muted); min-width: 100px; flex-shrink: 0; }
.summary-row .s-val{ font-size: 12px; color: var(--brass); font-weight: 500; text-align: right; word-break: break-word; }
.summary-total-row{ background: var(--orange-07); padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; }
.summary-total-row .s-label{ font-size: 12px; color: var(--text-muted); }
.summary-total-row .s-val{ font-size: 18px; font-weight: 800; color: var(--orange); }

.purpose-grid{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.search-bar{ background: var(--surface2); border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; }
.search-bar input{ background: transparent; border: none; color: var(--text); font-size: 14px; outline: none; flex: 1; }
.op-search-wrap{ padding: 12px 16px; border-bottom: 1px solid var(--border); position: relative; }
.op-search-input{ width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 14px 9px 34px; font-size: 13px; color: var(--text); outline: none; transition: border-color .18s; }
.op-search-input:focus{ border-color: var(--brass); }
[data-theme="dark"] .op-search-input:focus{ border-color: var(--primary-lite); }
.op-search-ico{ position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: var(--text-sub); font-size: 12px; pointer-events: none; }

.swift-badge{ display: inline-flex; align-items: center; gap: 5px; background: var(--green-dim); border: 1px solid var(--green-soft); border-radius: 6px; padding: 3px 8px; font-size: 10px; color: var(--green); font-weight: 600; }
.compliance-notice{ background: rgba(255,193,7,.1); border: 1px solid rgba(255,193,7,.3); border-radius: 10px; padding: 12px 14px; font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }

.intl-receipt-card{ background: #fff; border-radius: 16px; padding: 20px 18px 16px; margin: 12px 0 8px; box-shadow: 0 2px 20px var(--white-25); }
.intl-rr{ display: flex; justify-content: space-between; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #f3f3f3; gap: 8px; }
.intl-rr:last-child{ border-bottom: none; }
.intl-rr .rl{ font-size: 10.5px; color: var(--brass); font-weight: 600; min-width: 110px; flex-shrink: 0; }
.intl-rr .rv{ font-size: 11px; color: var(--brass); font-weight: 500; text-align: right; word-break: break-all; }
.intl-rr .rv.green{ color: #2e7d32; font-weight: 700; }
.intl-rr .rv.mono{ font-family: var(--font-mono); font-size: 9.5px; }

.step-btns{ display: flex; gap: 10px; margin-top: 16px; }
.btn-back{ flex: 1; padding: 14px; background: var(--surface2); border: none; border-radius: 12px; color: var(--text-muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-next{ flex: 2; padding: 14px; background: var(--brass); border: none; border-radius: 12px; color: var(--text-white); font-size: 14px; font-weight: 700; cursor: pointer; letter-spacing: .3px; }
.btn-next:disabled{ opacity: .5; cursor: not-allowed; }


  /* ============================================================
     MULTISTEP TRANSFER FORM — top bar, steps, panels, modals, receipt
     (none of these had matching CSS before; markup was unstyled)
     ============================================================ */

  /* In-panel top bar (back button / title) */
  .top-bar{ display:flex; align-items:center; justify-content:space-between; padding:2px 2px 18px; }
  .top-bar h5{ margin:0; font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600; color:var(--paper); }
  .back-btn{
    width:36px; height:36px; border-radius:50%; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-2); border:1px solid var(--hairline); color:var(--muted);
    transition:color .15s ease, border-color .15s ease;
  }
  .back-btn:hover{ color:var(--brass-soft); border-color:var(--hairline-strong); }

  .content-scroll{ padding:0 2px; }

  /* Card swiper wrap (markup uses .card-swiper-wrap; alias it here) */
  .card-swiper-wrap{ overflow:hidden; position:relative; border-radius:var(--radius-md); margin-bottom:14px; }

  /* Account dots (markup uses .dots/.dot — alias of .swiper-dots) */
  .dots{ display:flex; justify-content:center; gap:6px; margin:0 0 18px; }
  .dots .dot{ width:8px; height:8px; border-radius:50%; background:var(--hairline-strong); cursor:pointer; transition:all .2s ease; }
  .dots .dot.active{ background:var(--brass-soft); width:18px; border-radius:4px; }

  /* Step progress bar */
  .step-bar{ display:flex; align-items:flex-start; padding:4px 2px 22px; }
  .step-node{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; }
  .step-circle{
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:.8rem; font-weight:700; background:var(--surface-2); border:1.5px solid var(--hairline-strong);
    color:var(--muted-2); transition:all .2s ease;
  }
  .step-circle.active{ background:linear-gradient(160deg, var(--brass-soft), var(--brass)); color:var(--on-brass); border-color:transparent; }
  .step-circle.done{ background:var(--sage); color:#fff; border-color:transparent; }
  .step-label{ font-size:.64rem; color:var(--muted-2); font-weight:500; white-space:nowrap; }
  .step-label.active{ color:var(--paper); font-weight:600; }
  .step-label.done{ color:var(--sage); }
  .step-line{ flex:1 1 auto; height:2px; background:var(--hairline-strong); margin-top:14px; }
  .step-line.done{ background:var(--sage); }

  /* Step panels — only the active one is shown */
  .step-panel{ display:none; }
  .step-panel.active{ display:block; animation:stepFadeIn .25s ease;    width: 100%; }
  @keyframes stepFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

  /* Purpose chips (step 3) */
  .purpose-chip{
    padding:8px 14px; border-radius:999px; background:var(--surface-2); border:1px solid var(--hairline);
    font-size:.78rem; color:var(--muted); cursor:pointer; transition:all .15s ease;
  }
  .purpose-chip:hover{ border-color:var(--hairline-strong); }
  .purpose-chip.selected{
    background:linear-gradient(160deg, var(--brass-soft), var(--brass)); color:var(--on-brass);
    border-color:transparent; font-weight:600;
  }

  /* Bottom-sheet modals (PIN / COT / Auth / Success) */
  .modal-overlay{
    position:fixed; inset:0; z-index:1200; background:rgba(11,18,32,.6);
    display:flex; align-items:center; justify-content:center; padding:16px;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  @supports (backdrop-filter: blur(4px)){ .modal-overlay{ backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } }
  .modal-overlay.show{ opacity:1; pointer-events:auto; }
  .modal-sheet{
    width:100%; max-width:420px; background:var(--surface);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:22px 22px 26px; box-shadow:0 -10px 40px rgba(0,0,0,.25);
    transform:translateY(24px); transition:transform .25s ease;
  }
  .modal-overlay.show .modal-sheet{ transform:translateY(0); }
  @media (min-width:576px){ .modal-sheet{ border-radius:var(--radius-lg); } }
  .modal-handle{ width:36px; height:4px; border-radius:2px; background:var(--hairline-strong); margin:0 auto 16px; }
  .modal-title{ font-family:'Fraunces',serif; font-size:1.1rem; font-weight:600; color:var(--paper); }
  .otp-wrap{ display:flex; gap:10px; justify-content:center; margin:20px 0; }

  /* Receipt (success modal) */
  .receipt-check-circle{
    width:56px; height:56px; border-radius:50%; margin:0 auto 12px;
    background:linear-gradient(160deg, var(--sage), #2E6B48);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem;
  }
  .receipt-success-title{ font-family:'Fraunces',serif; font-size:1.2rem; font-weight:600; color:var(--paper); margin-bottom:4px; }
  .receipt-success-sub{ font-size:.82rem; color:var(--muted); }

  .receipt-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .receipt-logo{ display:flex; align-items:center; }
  .receipt-logo-text{ display:flex; align-items:center; }
  .receipt-slash-wrap{ text-align:right; }
  .receipt-slash{ width:34px; height:2px; background:linear-gradient(90deg, transparent, var(--brass)); margin:0 0 3px auto; }
  .receipt-tagline{ font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:#8792A6; }
  .receipt-title-row{ text-align:center; font-weight:700; font-size:1.05rem; color:#182338; margin-bottom:2px; }
  .receipt-generated{ text-align:center; font-size:.7rem; color:#8792A6; margin-bottom:14px; }
  .receipt-divider{ height:1px; background:rgba(23,34,54,.1); margin:10px 0; }
  .receipt-footer{ text-align:center; font-size:.68rem; color:#8792A6; line-height:1.65; }

  .receipt-actions{ display:flex; gap:10px; margin-top:14px; }
  .receipt-action-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    background:var(--surface-2); border:1px solid var(--hairline); color:var(--paper);
    border-radius:var(--radius-md); padding:12px 0; font-size:.78rem; font-weight:600; cursor:pointer;
  }
  .receipt-action-btn.receipt-action-share{
    background:linear-gradient(160deg, var(--brass-soft), var(--brass)); color:var(--on-brass); border-color:transparent;
  }

  @media (max-width: 991.98px){ body{ padding-bottom:78px; } }



@media (min-width: 768px) {
  body{ align-items:flex-start !important; padding:32px 24px 60px; min-height:100vh; box-sizing:border-box; }
  .phone-wrap{ width:100% !important; max-width:900px !important; height:auto !important; margin:0 auto !important; border-radius:var(--radius) !important; box-shadow:0 24px 64px var(--shadow-elev) !important; }
  .phone-screen{ width:100% !important; height:auto !important; min-height:640px; border-radius:var(--radius) !important; display:flex; flex-direction:column; }
  .top-bar{ padding:20px 32px !important; }
  .content-scroll{ padding:28px 32px 40px !important; height:auto !important; overflow:visible !important; flex:1 1 auto; }
}

/* ── Check-deposit-specific styling ────────────────────────────────
   Built on the shared design-token system, same conventions as kyc.php:
     pending/processing → --blue (no soft token defined; shaded from its own hex)
     approved/cleared   → --green / --green-dim, with a dark-mode foreground
                           bump to #9fe3a2 since --green itself isn't
                           redefined at the [data-theme="dark"] root
     rejected            → --danger / --danger-soft (already theme-aware)
───────────────────────────────────────────────────────────────── */
.cd-intro{
  display:flex; align-items:center; gap:14px; padding:16px;
  border-radius:var(--radius-sm); background:var(--surface2);
  border:1px solid var(--border); margin-bottom:16px;
}
.cd-intro-icon{
  width:48px; height:48px; border-radius:var(--radius-xs); flex-shrink:0;
  background:var(--orange-12); color:var(--orange);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.cd-intro .title{ font-family:var(--font-heading); font-size:14px; font-weight:700; color:var(--heading); }
.cd-intro .sub{ font-family:var(--font-body); font-size:12px; color:var(--text-muted); margin-top:2px; }

.new-deposit-btn{
  width:100%; padding:13px; margin-bottom:20px; border:none; border-radius:var(--radius-sm);
  background: linear-gradient(135deg, var(--brass), var(--brass-soft)); color: var(--on-brass); font-family:var(--font-body); font-size:14px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background var(--transition-fast);
}
.new-deposit-btn:active{ background:var(--on-brass); color: var(--brass); }

.dep-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  margin-bottom:10px; cursor:pointer; background:var(--surface);
  transition:background var(--transition-fast);
}
.dep-item:active{ background:var(--surface2); }
.dep-icon{
  width:38px; height:38px; border-radius:var(--radius-xs); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.dep-icon.st-pending, .dep-icon.st-processing{ background:rgba(77,144,254,0.12); color:var(--blue); }
.dep-icon.st-approved, .dep-icon.st-cleared{ background:var(--green-dim); color:var(--green); }
[data-theme="dark"] .dep-icon.st-approved, [data-theme="dark"] .dep-icon.st-cleared{ color:#9fe3a2; }
.dep-icon.st-rejected{ background:var(--danger-soft); color:var(--danger); }

.dep-main{ flex:1; min-width:0; }
.dep-payer{ font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dep-sub{ font-family:var(--font-body); font-size:11px; color:var(--text-muted); margin-top:2px; }
.dep-amt{ font-family:var(--font-amt); font-size:13px; font-weight:700; color:var(--text); text-align:right; flex-shrink:0; }
.dep-badge{
  font-family:var(--font-body); font-size:9px; font-weight:700; padding:2px 7px; border-radius:99px;
  text-transform:uppercase; letter-spacing:.3px; display:inline-block; margin-top:4px;
}
.dep-badge.st-pending, .dep-badge.st-processing{ background:rgba(77,144,254,0.12); color:var(--blue); }
.dep-badge.st-approved, .dep-badge.st-cleared{ background:var(--green-dim); color:var(--green); }
[data-theme="dark"] .dep-badge.st-approved, [data-theme="dark"] .dep-badge.st-cleared{ color:#9fe3a2; }
.dep-badge.st-rejected{ background:var(--danger-soft); color:var(--danger); }

.select-field, .cd-input{
  width:100%; padding:12px 14px; border-radius:var(--radius-xs); border:1px solid var(--border);
  background:var(--surface2); color:var(--text); font-family:var(--font-body); font-size:13px;
  margin-bottom:12px; box-sizing:border-box; transition:border-color var(--transition-fast);
}
.select-field:focus, .cd-input:focus{ outline:none; border-color:var(--orange-focus); }
.file-drop{
  border:1.5px dashed var(--border); border-radius:var(--radius-xs); padding:16px; text-align:center;
  cursor:pointer; margin-bottom:12px; font-family:var(--font-body); font-size:12px; color:var(--text-muted);
  background:var(--surface2); transition:border-color var(--transition-fast), color var(--transition-fast);
}
.file-drop.has-file{ border-color:var(--orange); color:var(--orange); background:var(--orange-soft); }
.field-label{ font-family:var(--font-body); font-size:12px; color:var(--text-muted); display:block; margin-bottom:6px; }

.timeline{ margin:14px 0; }
.tl-row{ display:flex; gap:10px; padding:6px 0; }
.tl-dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); margin-top:5px; flex-shrink:0; }
.tl-dot.done{ background:var(--green); }
[data-theme="dark"] .tl-dot.done{ background:#9fe3a2; }
.tl-dot.bad{ background:var(--danger); }
.tl-text{ font-family:var(--font-body); font-size:12px; color:var(--text); }
.tl-time{ font-size:10.5px; color:var(--text-muted); margin-top:1px; }

.check-preview-row{ display:flex; gap:10px; margin-bottom:14px; }
.check-preview{
  flex:1; border:1px solid var(--border); border-radius:var(--radius-xs); overflow:hidden;
  background:var(--surface2); cursor:pointer; aspect-ratio:1.6/1; display:flex; align-items:center; justify-content:center;
}
.check-preview img{ width:100%; height:100%; object-fit:cover; }
.check-preview .ph-label{ font-size:11px; color:var(--text-muted); }

/* ── Feedback modals (replace toast for error/success states) ──────
   Error uses a static icon on the semantic danger token. Success uses
   a small hand-drawn SVG checkmark: the circle strokes in first, then
   the check strokes in after it, using stroke-dasharray/dashoffset —
   a classic, dependency-free way to animate an SVG path. Both re-run
   their animation on every open via a clone-and-replace trick (a CSS
   animation won't restart just by re-showing an element that already
   has the class applied). ───────────────────────────────────────── */
.feedback-icon-wrap{
  width:64px; height:64px; border-radius:50%; margin:6px auto 4px;
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.feedback-icon-wrap.error{ background:var(--danger-soft); color:var(--danger); }

.success-check{ width:76px; height:76px; display:block; margin:6px auto 4px; }
.success-check .check-circle{
  stroke:var(--green); stroke-width:2.5; fill:none;
  stroke-dasharray:166; stroke-dashoffset:166;
  animation:successCircle .5s cubic-bezier(0.65,0,0.45,1) forwards;
}
.success-check .check-mark{
  stroke:var(--green); stroke-width:3.5; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:48; stroke-dashoffset:48;
  animation:successMark .35s cubic-bezier(0.65,0,0.45,1) .5s forwards;
}
[data-theme="dark"] .success-check .check-circle,
[data-theme="dark"] .success-check .check-mark{ stroke:#9fe3a2; }
@keyframes successCircle{ to{ stroke-dashoffset:0; } }
@keyframes successMark{ to{ stroke-dashoffset:0; } }



/* ============================================================
   INNER MODAL SCROLL TRACK (Hidden Scrollbar)
   ============================================================ */
#detailBody {
  max-height: 55vh;            /* Restricts height to prevent breaking screen limits */
  overflow-y: auto;            /* Activates vertical layout engine scrolling strictly here */
  padding-right: 4px;          /* Prevent content from clipping against the hidden boundary */
  
  /* Hides native scrollbar on standard modern browsers */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Internet Explorer 10+ */
}

/* Hides native scrollbar on WebKit engine layout frameworks (Chrome, Safari, Edge, Opera) */
#detailBody::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}

/* On ultra-short mobile viewports, shrink the maximum height to maximize viewing space */
@media (max-height: 600px) {
  #detailBody {
    max-height: 42vh;
  }
}


/* ============================================================
   INNER MODAL SCROLL TRACK (Hidden Scrollbar)
   ============================================================ */
#imgModalPic {
  max-height: 55vh;            /* Restricts height to prevent breaking screen limits */
  overflow-y: auto;            /* Activates vertical layout engine scrolling strictly here */
  padding-right: 4px;          /* Prevent content from clipping against the hidden boundary */
  
  /* Hides native scrollbar on standard modern browsers */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Internet Explorer 10+ */
}

/* Hides native scrollbar on WebKit engine layout frameworks (Chrome, Safari, Edge, Opera) */
#imgModalPic::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}

/* On ultra-short mobile viewports, shrink the maximum height to maximize viewing space */
@media (max-height: 600px) {
  #imgModalPic {
    max-height: 42vh;
  }
}


      /* ============================================================
       CRYPTO INTERFACE STYLES (Theme-Compliant Remap)
       ============================================================ */
       
    /* Dynamic Theme Token Injection for the Crypto Layer Identity */
    :root {
      --crypto-accent: #5c3d91;
      --crypto-glow: rgba(92, 61, 145, 0.15);
      --crypto-accent-dim: rgba(92, 61, 145, 0.06);
    }
    html[data-theme="dark"] {
      --crypto-accent: #9b76e5;
      --crypto-glow: rgba(155, 118, 229, 0.2);
      --crypto-accent-dim: rgba(155, 118, 229, 0.1);
    }

    .coin-grid { 
      display: grid !important; 
      grid-template-columns: repeat(3, 1fr) !important; 
      gap: 10px !important; 
      margin-top: 10px !important; 
      width: 100% !important;
      box-sizing: border-box !important;
    }
    
    .coin-card {
      background: var(--surface-2); 
      border: 1px solid var(--hairline); 
      border-radius: var(--radius-md);
      padding: 14px 8px; 
      text-align: center; 
      cursor: pointer; 
      transition: all .15s ease;
      box-sizing: border-box !important;
    }
    .coin-card:hover {
      background: var(--wash-2);
    }
    .coin-card.selected { 
      border-color: var(--crypto-accent); 
      box-shadow: 0 0 0 1px var(--crypto-accent), 0 6px 18px var(--crypto-glow); 
      background: var(--crypto-accent-dim); 
    }
    
    .coin-icon { 
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 8px;
      font-size: 14px;
      font-weight: 700;
      color: #ffffff; 
    }
    
    /* Native token graphics using standardized design balances */
    .coin-BTC { background: linear-gradient(135deg, #f7931a 0%, #c46f00 100%); }
    .coin-ETH { background: linear-gradient(135deg, #627eea 0%, #454a75 100%); }
    .coin-USDT { background: linear-gradient(135deg, #26a17b 0%, #16624a 100%); }
    
    .coin-name { 
      font-size: 0.82rem; 
      font-weight: 700; 
      color: var(--paper); 
    }
    .coin-sym { 
      font-size: 0.68rem; 
      color: var(--muted); 
      margin-top: 2px; 
    }

    /* ── Network Selection Grid ── */
    .network-grid { 
      display: flex !important; 
      flex-direction: column !important; 
      gap: 8px !important; 
      margin-top: 10px !important; 
      width: 100% !important;
      box-sizing: border-box !important;
    }
    
    .network-row {
      display: flex; 
      align-items: center; 
      justify-content: space-between;
      background: var(--surface-2); 
      border: 1px solid var(--hairline); 
      border-radius: var(--radius-md);
      padding: 12px 14px; 
      cursor: pointer; 
      transition: all .15s ease;
      box-sizing: border-box !important;
    }
    .network-row:hover {
      background: var(--wash-2);
    }
    .network-row.selected { 
      border-color: var(--crypto-accent); 
      background: var(--crypto-accent-dim); 
    }
    
    .network-label { 
      font-size: 0.84rem; 
      font-weight: 600; 
      color: var(--paper); 
    }
    .network-fee { 
      font-size: 0.72rem; 
      color: var(--muted); 
    }

    /* ── Status Badges & Validation Strips ── */
    .wallet-badge { 
      display: none; 
    }
    .wallet-badge.show { 
      display: inline-flex !important; 
      align-items: center; 
      gap: 4px; 
      font-size: 0.68rem; 
      font-weight: 700;
      color: var(--sage); 
      background: rgba(61, 138, 95, 0.1); 
      border: 1px solid rgba(61, 138, 95, 0.2);
      padding: 3px 9px; 
      border-radius: 20px; 
    }

    /* ── Live Crypto Rate Tickers ── */
    .crypto-rate-ticker {
      background: linear-gradient(135deg, var(--crypto-accent-dim), var(--surface-2));
      border: 1px solid var(--hairline-strong); 
      border-radius: var(--radius-lg); 
      padding: 14px; 
      margin-bottom: 14px; 
      width: 100% !important;
      box-sizing: border-box !important;
    }
    
    .crypto-price-flash { 
      animation: priceFlash .6s ease; 
    }
    @keyframes priceFlash { 
      0% { color: var(--crypto-accent); } 
      100% { color: inherit; } 
    }

    /* ── Typography Framework Fixes ── */
    .mono-address { 
      font-family: var(--font-mono); 
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: .3px; 
      word-break: break-all; 
      color: var(--paper);
    }


  
  /* ── Main Scroll Container ─────────────────────── */
.content-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Selected Operator Banner ──────────────────── */
.sel-op-banner {
  display: none;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--brass);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.sel-op-banner.show { 
  display: flex; 
}

.sob-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #FFFFFF;
  flex-shrink: 0;
}

.sob-name { 
  font-size: 14px; 
  font-weight: 700; 
  color: var(--paper); 
}

.sob-country { 
  font-size: 11px; 
  color: var(--muted); 
  margin-top: 1px; 
}

.sob-clear { 
  margin-left: auto; 
  background: none; 
  border: none; 
  color: var(--muted-2); 
  font-size: 18px; 
  cursor: pointer; 
  padding: 4px; 
  transition: color .2s ease;
}

.sob-clear:hover {
  color: var(--rose);
}

/* ── Region Heading ────────────────────────────── */
.region-block { 
  margin: 0 0 18px; 
  width: 100%;
}

.region-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
  margin-bottom: 10px;
}

.region-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--muted);
}

.show-more-btn {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--brass-soft);
  cursor: pointer;
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .2s ease;
}

.show-more-btn:hover {
  color: var(--brass);
}

.show-more-btn i { 
  font-size: 9px; 
  transition: transform .25s ease; 
}

.show-more-btn.open i { 
  transform: rotate(180deg); 
}

/* ── Operator Grid ─────────────────────────────── */
.operator-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.op-extra-wrap {
  display: contents; /* participates directly in grid */
}

.op-extra-wrap.hidden {
  display: none;
}

.operator-card {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--hairline);
  padding: 10px 4px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color .18s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.operator-card:hover {
  border-color: var(--hairline-strong);
  background: var(--wash-2);
}

.operator-card.selected,
.operator-card:active {
  border-color: var(--brass);
  background: var(--orange-10);
}

.op-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -.3px;
  flex-shrink: 0;
}

.op-name {
  font-size: 9.5px;
  color: var(--muted);
  text-align: center;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.op-flag { 
  font-size: 14px; 
  line-height: 1; 
}

/* ── Form Common Labels ────────────────────────── */
.section-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 16px 0 6px;
}

/* ── Data Form Area (Revealed Container) ───────── */
.data-form-area { 
  display: none; 
}

.data-form-area.show { 
  display: block; 
}

/* ── Recipient Number Input Field ──────────────── */
.input-field {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  transition: border-color .18s ease;
}

.input-field:focus-within {
  border-color: var(--brass);
}

.input-field i {
  color: var(--muted-2) !important;
}

.input-field input {
  color: var(--paper) !important;
  font-family: inherit;
}

.input-field input::placeholder {
  color: var(--muted-2);
  opacity: 0.7;
}

#dialCodeHint {
  color: var(--brass-soft) !important;
  font-weight: 600;
}

/* ── Plan Type Tabs ────────────────────────────── */
.plan-type-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.plan-type-tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.pt-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--hairline);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
}

.pt-tab:hover {
  border-color: var(--hairline-strong);
  color: var(--paper);
}

.pt-tab.active {
  border-color: var(--brass);
  color: var(--brass-soft);
  background: var(--orange-10);
  font-weight: 600;
}

/* ── Plans Grid & Items ────────────────────────── */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.plan-card {
  background: var(--surface-2);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  transition: all .18s ease;
}

.plan-card:hover {
  border-color: var(--hairline-strong);
}

.plan-card.selected {
  border-color: var(--brass);
  background: var(--orange-10);
}

/* ── Selected Plan Strip ───────────────────────── */
.sel-plan-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-top: 14px;
}

.sps-icon {
  font-size: 20px;
  line-height: 1;
}

.sps-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--paper);
}

.sps-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.sps-price {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--brass-soft);
}

/* ── Info Notice Callout ───────────────────────── */
.data-form-area > div[style*="background"] {
  background: var(--orange-08) !important;
  border: 1px solid var(--orange-20) !important;
  border-radius: var(--radius-sm) !important;
}

.data-form-area > div[style*="background"] p {
  color: var(--muted) !important;
}

/* ── Submit / Proceed Button Area ──────────────── */
.proceed-wrap { 
  margin-top: 20px; 
}

.generate-btn {
  background: var(--brass);
  color: var(--on-brass);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .1s ease;
}

.generate-btn:hover {
  background: var(--brass-soft);
}

.generate-btn:active {
  transform: scale(0.99);
}



    /* ── Period chips ───────────────────────────────── */
    .period-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
    .period-chip {
      padding:7px 14px; border-radius:20px;
      border:1.5px solid #333; background:var(--surface2);
      font-size:12px; color:#777; cursor:pointer; transition:all .18s;
    }
    .period-chip.active {
      border-color:var(--brass); color:var(--brass);
      background:var(--orange-10);
    }

    /* ── Email option cards ─────────────────────────── */
    .email-option {
      display:flex; align-items:center; gap:12px;
      background:var(--surface2); border-radius:12px;
      border:1.5px solid transparent;
      padding:12px 14px; cursor:pointer; transition:all .18s;
      margin-bottom:10px;
    }
    .email-option.selected {
      border-color:var(--brass); background:var(--orange-07);
    }
    .eo-radio {
      width:18px; height:18px; border-radius:50%;
      border:2px solid #555; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      transition:all .18s;
    }
    .email-option.selected .eo-radio {
      border-color:var(--brass); background:var(--brass);
    }
    .email-option.selected .eo-radio::after {
      content:''; width:6px; height:6px;
      border-radius:50%; background:#fff;
    }
    .eo-label { font-size:13px;    color: var(--text-white);   text-shadow: var(--text-shadow-default); font-weight:600; }
    .eo-sub   { font-size:11px; color:var(--text-muted); margin-top:1px; }

    /* ── Summary strip (on result) ──────────────────── */
    .stmt-summary-strip {
      display:flex; gap:1px; background:var(--surface-hover);
      border-radius:12px; overflow:hidden; margin-bottom:16px;
    }
    .sss-item {
      flex:1; padding:12px 8px; text-align:center;
      background:var(--surface2);
    }
    .sss-item:first-child { border-radius:12px 0 0 12px; }
    .sss-item:last-child  { border-radius:0 12px 12px 0; }
    .sss-val  { font-size:13px; font-weight:800;    color: var(--text-white);   text-shadow: var(--text-shadow-default); }
    .sss-lbl  { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; margin-top:2px; }

    /* ── Transaction rows in statement ─────────────── */
    .stmt-tx-row {
      display:flex; align-items:flex-start; gap:10px;
      padding:11px 0; border-bottom:1px solid var(--white-05);
    }
    .stmt-tx-row:last-child { border-bottom:none; }
    .stmt-tx-icon {
      width:36px; height:36px; border-radius:10px;
      display:flex; align-items:center; justify-content:center;
      font-size:14px; flex-shrink:0; margin-top:1px;
    }
    .stmt-tx-info { flex:1; min-width:0; }
    .stmt-tx-name { font-size:13px; font-weight:600;    color: var(--brass);   text-shadow: var(--text-shadow-default); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .stmt-tx-meta { font-size:10px; color:var(--text-muted); margin-top:2px; }
    .stmt-tx-meta .intl-badge {
      display:inline-block; background:rgba(21,101,192,.25);
      color:#90caf9; font-size:9px; font-weight:700;
      padding:1px 6px; border-radius:4px; margin-left:4px; vertical-align:middle;
    }
    .stmt-tx-amt { text-align:right; flex-shrink:0; }
    .stmt-tx-amt .amount { font-size:13px; font-weight:700; }
    .stmt-tx-amt .amount.debit  { color:#ff6b6b; }
    .stmt-tx-amt .amount.credit { color:#66bb6a; }
    .stmt-tx-amt .bal { font-size:10px; color:var(--text-muted); margin-top:1px; }

    /* ── Date divider ───────────────────────────────── */
    .date-divider {
      font-size:10px; font-weight:700; color:var(--text-muted);
      text-transform:uppercase; letter-spacing:.8px;
      padding:10px 0 4px; border-top:1px solid var(--surface-hover);
      margin-top:4px;
    }
    .date-divider:first-child { border-top:none; padding-top:0; }

    /* ── Generate button spinner ────────────────────── */
    .gen-spinner { display:none; }
    .generating .gen-spinner { display:inline-block; }
    .generating .gen-text    { display:none; }

    /* ── Section labels ─────────────────────────────── */
    .section-lbl {
      font-size:11px; font-weight:700; color:var(--text-muted);
      text-transform:uppercase; letter-spacing:.8px;
      margin:14px 0 8px;
    }
  
  
  
  
/* Base Container Support for Desktop */
.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 992px) {
  .dashboard-grid {
    grid-template-columns: 2fr 1fr;
  }
  
  .cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
  }
  
  .card-swiper-desktop {
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
  }
  
  #swiperDots {
    display: none;
  }
}


  .brand-mark{
    display:flex; align-items:center; gap:.65rem;
    margin-bottom:2.5rem;
  }
  .brand-mark .dot{
    width:34px; height:34px; border-radius:50%;
    border:1.5px solid var(--brass);
    position:relative;
    flex:0 0 auto;
  }
  .brand-mark .dot::before{
    content:"";
    position:absolute; inset:8px;
    border-radius:50%;
    background:var(--brass);
  }
  .brand-mark .dot::after{
    content:"";
    position:absolute; top:-4px; left:50%;
    width:1px; height:8px;
    background:var(--brass);
    transform:translateX(-50%);
  }
  .brand-name{
    font-family:'Fraunces', serif;
    font-size:1.28rem;
    letter-spacing:.03em;
    line-height:1;
  }
  .brand-sub{
    font-size:.66rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted-2);
  }

  .nav-meridian .nav-link{
    color:var(--muted);
    font-size:.92rem;
    font-weight:500;
    padding:.68rem .8rem;
    border-radius:var(--radius-sm);
    display:flex; align-items:center; gap:.75rem;
    margin-bottom:.15rem;
    border-left:2px solid transparent;
    transition:background .15s ease, color .15s ease;
  }
  .nav-meridian .nav-link i{ font-size:1.05rem; width:20px; text-align:center; color:var(--muted-2); }
  .nav-meridian .nav-link:hover{ background:var(--wash-2); color:var(--paper); }
  .nav-meridian .nav-link.active{
    background:linear-gradient(90deg, rgba(201,162,75,.14), transparent);
    color:var(--paper);
    border-left-color:var(--brass);
  }
  .nav-meridian .nav-link.active i{ color:var(--brass-soft); }

  .sidebar-support{
    margin-top:2.5rem;
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    padding:1.1rem;
    background:linear-gradient(160deg, rgba(201,162,75,.08), transparent 70%);
  }
  .sidebar-support .icon-ring{
    width:34px; height:34px; border-radius:50%;
    border:1px solid var(--hairline-strong);
    display:flex; align-items:center; justify-content:center;
    color:var(--brass-soft); margin-bottom:.7rem;
  }

  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem;
    padding:1.1rem 0;
    top:0;
    background:var(--ink);
    border-bottom:1px solid var(--hairline);
    z-index: 1020;
  }
  @supports (backdrop-filter: blur(10px)){
    .topbar{
      background:var(--shell);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }
  }
  .search-shell{
    display:flex; align-items:center; gap:.6rem;
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:999px;
    padding:.55rem 1.1rem;
    min-width:260px;
  }
  .search-shell input{
    background:transparent; border:0; outline:0;
    color:var(--paper); font-size:.86rem; width:100%;
  }
  .search-shell input::placeholder{ color:var(--muted-2); }
  .search-shell i{ color:var(--muted-2); }

  .icon-btn{
    width:40px; height:40px; border-radius:50%;
    border:1px solid var(--hairline);
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); position:relative;
    background:var(--surface);
    transition:border-color .15s ease, color .15s ease;
  }
  .icon-btn:hover{ color:var(--brass-soft); border-color:var(--hairline-strong); }
  .icon-btn .badge-dot{
    position:absolute; top:7px; right:8px;
    width:7px; height:7px; border-radius:50%;
    background:var(--rose); border:1.5px solid var(--ink-2);
    display: none;
  }

  .avatar-ring{
    width:42px; height:42px; border-radius:50%;
    background:linear-gradient(160deg, var(--brass-soft), var(--brass));
    display:flex; align-items:center; justify-content:center;
    color:var(--on-brass); font-family:'Fraunces',serif; font-weight:600; font-size:.95rem;
  }

  .panel{
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    position:relative;
  }
  .panel-tight{ border-radius:var(--radius-md); }

  .hero-card{
    padding:1.9rem 2rem;
    background:
      radial-gradient(560px 220px at 100% 0%, rgba(201,162,75,.10), transparent 60%),
      var(--surface);
    overflow:hidden;
  }
  .hero-top{
    display:flex; justify-content:space-between; align-items:flex-start;
    flex-wrap:wrap; gap:1rem;
  }
  .balance-figure{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:clamp(2.1rem, 4vw, 3.1rem);
    line-height:1;
    letter-spacing:-.01em;
    margin:.35rem 0 0;
  }
  .balance-figure .cents{ font-size:.5em; color:var(--muted); }

  .pill{
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:.76rem; font-weight:600;
    padding:.28rem .65rem; border-radius:999px;
  }
  .pill-up{ background:rgba(116,185,140,.14); color:var(--sage); }
  .pill-down{ background:rgba(209,120,104,.14); color:var(--rose); }

  .sparkline-wrap{ height:64px; }

  .quick-actions{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:.7rem;
    margin-top:1.6rem;
  }
  .quick-actions .qa-btn{
    border:1px solid var(--hairline);
    background:var(--wash-1);
    border-radius:var(--radius-md);
    padding:.85rem .5rem;
    text-align:center;
    color:var(--paper);
    transition:border-color .15s ease, transform .15s ease, background .15s ease;
  }
  .quick-actions .qa-btn:hover{
    border-color:var(--hairline-strong);
    background:rgba(201,162,75,.06);
    transform:translateY(-2px);
  }
  .quick-actions .qa-btn i{
    font-size:1.15rem; color:var(--brass-soft); display:block; margin-bottom:.4rem;
  }
  .quick-actions .qa-btn span{ font-size:.74rem; color:var(--muted); font-weight:500; }

  .dial-card{
    padding:1.9rem 1.8rem;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
  }
  .dial-figure{ position:relative; width:190px; height:190px; margin:.2rem auto 0; }
  .dial-center{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
  }
  .dial-center .pct{ font-family:'Fraunces',serif; font-size:2.1rem; font-weight:500; line-height:1; }
  .dial-center .lbl{ font-size:.68rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.1em; margin-top:.3rem; }
  .dial-legend{
    display:flex; justify-content:center; gap:1.4rem; margin-top:1.3rem;
  }
  .dial-legend .item{ font-size:.74rem; color:var(--muted); display:flex; align-items:center; gap:.4rem; }
  .dial-legend .swatch{ width:8px; height:8px; border-radius:2px; }

  .acct-card{
    padding:1.4rem 1.5rem;
    height:100%;
    display:flex; flex-direction:column; justify-content:space-between;
    background:
      linear-gradient(155deg, var(--wash-3), transparent 45%),
      var(--surface);
    min-height:168px;
  }
  .acct-top{ display:flex; justify-content:space-between; align-items:flex-start; }
  .acct-type{
    font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-2);
  }
  .acct-name{ font-family:'Fraunces',serif; font-size:1.02rem; margin-top:.15rem; }
  .acct-chip{
    width:34px; height:24px; border-radius:5px;
    background:linear-gradient(155deg, var(--brass-soft), var(--brass));
    position:relative; opacity:.9;
  }
  .acct-chip::before, .acct-chip::after{
    content:""; position:absolute; left:6px; right:6px; height:1px; background:rgba(0,0,0,.25);
  }
  .acct-chip::before{ top:8px; } .acct-chip::after{ top:14px; }
  .acct-number{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--muted); letter-spacing:.08em; }
  .acct-balance{ font-family:'Fraunces',serif; font-size:1.55rem; margin-top:.3rem; }
  .acct-balance.negative{ color:var(--rose); }

  .section-head{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;
  }
  .section-title{ font-family:'Fraunces',serif; font-size:1.18rem; }
  .link-more{ font-size:.8rem; color:var(--brass-soft); font-weight:500; }
  .link-more:hover{ color:var(--brass); }

  .tx-row{
    display:flex; align-items:center; gap:.9rem;
    padding:.85rem 0;
    border-bottom:1px solid var(--hairline);
    cursor: pointer;
    font-size: 10.5px;
  }
  .tx-row:last-child{ border-bottom:0; }
  .tx-icon{
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--wash-2);
    border:1px solid var(--hairline);
    flex:0 0 auto; color:var(--brass); font-size:1.05rem;
  }
  .tx-merchant{ font-weight:600; font-size:10.5px; }
  .tx-meta{ font-size:10.5px; color:var(--muted-2); }
  .tx-amount{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500; white-space:nowrap; }
  .tx-amount.debit{ color:var(--paper); }
  .tx-amount.credit{ color:var(--sage); }
  .no-tx{ display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:2rem 0; color:var(--muted-2); font-size:.85rem; text-align:center; }
  .no-tx i{ font-size:1.4rem; opacity:.6; }

  /* ── Transaction Receipt Modal ─────────────────────────────────── */
  .trc-overlay{
    position:fixed; inset:0; z-index:9000;
    background:rgba(11,18,32,.72);
    display:flex; align-items:flex-end; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
    padding:0;
  backdrop-filter: blur(4px);                  /* Blurs content behind the overlay */
  -webkit-backdrop-filter: blur(4px);          /* Safari support */
  }
  .trc-overlay.show{ opacity:1; pointer-events:auto; }
  @media (min-width:576px){
    .trc-overlay{ align-items:center; padding:20px; }
  }
  .trc-sheet{
    width:100%; max-width:420px;
    max-height:92vh; overflow-y:auto;
    background:transparent;
    border-radius:20px 20px 0 0;
    padding:10px 14px 22px;
    transform:translateY(24px);
    transition:transform .25s ease;
  }
  .trc-overlay.show .trc-sheet{ transform:translateY(0); }
  @media (min-width:576px){
    .trc-sheet{ border-radius:20px; padding:16px; }
  }
  .trc-drag{
    width:36px; height:4px; border-radius:2px;
    background:rgba(255,255,255,.25);
    margin:2px auto 12px;
  }
  .trc-card{
    background:#fff; color:#182338;
    border-radius:18px;
    padding:22px 22px 20px;
    box-shadow:0 16px 44px rgba(0,0,0,.35);
  }
  .trc-brand-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  .trc-brand{ display:flex; align-items:center; gap:8px; }
  .trc-brand-logo{ width:30px; height:30px; border-radius:6px; object-fit:contain; }
  .trc-brand-name{ font-weight:800; font-size:1.05rem; color:var(--brass); letter-spacing:.02em; }
  .trc-tagline{ font-size:.62rem; color:#8792A6; text-transform:uppercase; letter-spacing:.06em; text-align:right; }
  .trc-title{ text-align:center; font-weight:700; font-size:1.15rem; color:#182338; margin-bottom:4px; }
  .trc-gendate{ text-align:center; font-size:.74rem; color:#8792A6; margin-bottom:16px; }
  .trc-gendate b{ color:#5B6B85; }
  .trc-hero{ text-align:center; padding:2px 0 18px; border-bottom:1px solid rgba(23,34,54,.10); margin-bottom:14px; }
  .trc-hero-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#8792A6; margin-bottom:6px; }
  .trc-hero-amt{ font-family:'IBM Plex Mono',monospace; font-size:2rem; font-weight:700; }
  .trc-hero-amt.debit{ color:#182338; }
  .trc-hero-amt.credit{ color:var(--sage); }
  .trc-rows{ display:flex; flex-direction:column; }
  .trc-row{
    display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
    padding:10px 0; border-bottom:1px solid rgba(23,34,54,.07);
    font-size: 10.5px;;
  }
  .trc-row:last-child{ border-bottom:0; }
  .trc-row .rk{ color:#5B6B85; flex:0 0 auto; padding-top:1px; }
  .trc-row .rv{ font-weight:700; color:#182338; text-align:right; }
  .trc-row .rv small{ display:block; font-weight:500; color:#8792A6; font-size:.72rem; margin-top:2px; word-break:break-all; }
  .rv.s-success{ color:var(--sage); }
  .rv.s-pending{ color:#e6a23c; }
  .rv.s-failed{ color:var(--rose); }
  .trc-footer{ text-align:center; margin-top:16px; padding-top:14px; border-top:1px solid rgba(23,34,54,.10); }
  .trc-footer p{ font-size:.72rem; color:#8792A6; margin:0 0 4px; }
  .trc-footer p b{ color:#5B6B85; }
  .trc-actions{ display:flex; gap:10px; margin-top:14px; }
  .trc-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
    color:#EAF6FF; border-radius:12px; padding:12px 0; font-size:.82rem; font-weight:600;
    cursor:pointer; transition:background .15s ease;
  }
  .trc-btn:hover{ background:rgba(255,255,255,.14); }
  .trc-btn i{ font-size:1rem; }
  .trc-close{
    display:block; text-align:center; color:rgba(255,255,255,.65);
    font-size:.85rem; margin-top:14px; cursor:pointer; background:none; border:0; width:100%;
  }
  .trc-close:hover{ color:#fff; }

  .goal-row + .goal-row{ margin-top:1.15rem; }
  .goal-top{ display:flex; justify-content:space-between; font-size:.84rem; margin-bottom:.4rem; }
  .goal-top .name{ font-weight:600; }
  .goal-top .figs{ color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:.76rem; }
  .progress-track{
    height:6px; border-radius:999px; background:var(--wash-4); overflow:hidden;
  }
  .progress-fill{ height:100%; border-radius:999px; }

  .bill-row{
    display:flex; align-items:center; gap:.8rem; padding:.7rem 0;
    border-bottom:1px solid var(--hairline);
  }
  .bill-row:last-child{ border-bottom:0; }
  .bill-date{
    width:44px; text-align:center; flex:0 0 auto;
    border:1px solid var(--hairline); border-radius:8px; padding:.3rem 0;
  }
  .bill-date .d{ font-family:'Fraunces',serif; font-size:1rem; line-height:1; }
  .bill-date .m{ font-size:.6rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.06em; }
  .bill-name{ font-size:.86rem; font-weight:600; }
  .bill-amt{ font-family:'IBM Plex Mono',monospace; font-size:.84rem; color:var(--muted); }

  .offcanvas{ background:var(--ink-2); color:var(--paper); border-right:1px solid var(--hairline); width:270px; }
  .offcanvas .btn-close{ filter:invert(1) grayscale(1); opacity:.6; }

  .bottom-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:1030;
    display:flex; align-items:flex-end; justify-content:space-around;
    background:var(--ink-2);
    border-top:1px solid var(--hairline);
    padding:.55rem .4rem calc(.55rem + env(safe-area-inset-bottom));
  }
  .bottom-nav .bn-item{
    display:flex; flex-direction:column; align-items:center; gap:.22rem;
    color:var(--muted-2);
    font-size:.62rem; font-weight:500;
    padding:.3rem .5rem;
    border-radius:var(--radius-sm);
    flex:1 1 0;
    min-width:0;
  }
  .bottom-nav .bn-item i{ font-size:1.2rem; }
  .bottom-nav .bn-item.active{ color:var(--brass-soft); }
  .bottom-nav .bn-item:active{ background:var(--wash-6); }
  button.bn-item{ background:transparent; border:0; }
  .bottom-nav .bn-center{ margin-top:-30px; }
  .bottom-nav .bn-center .circle{
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(160deg, var(--brass-soft), var(--brass));
    display:flex; align-items:center; justify-content:center;
    color:var(--on-brass); font-size:1.3rem;
    border:4px solid var(--ink-2);
  }
  .bottom-nav .bn-center span{ color:var(--muted); margin-top:.3rem; }

  @media (max-width: 991.98px){
    body{ padding-bottom:78px; }
  }
  @media (max-width: 575.98px){
    .search-shell{ display:none; }
  }

  .focus-ring:focus-visible{
    outline:2px solid var(--brass-soft);
    outline-offset:2px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }


  .modal-content{
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    color:var(--paper);
    position:relative;
    overflow:visible;
  }
  .modal-header, .modal-footer{ border-color:var(--hairline); }
  .modal-header{ padding-top:2.5rem; }
  .modal-header .btn-close{
    filter:invert(var(--close-invert,0));
    opacity:.6;
  }
  html[data-theme="dark"] .modal-header .btn-close{ filter:invert(1); }

  .modal-avatar{
    position:absolute;
    top:0; left:50%;
    transform:translate(-50%, -50%);
    width:72px; height:72px;
    border-radius:50%;
    border:3px solid var(--surface);
    overflow:hidden;
    background:var(--brass);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--on-brass);
  }

  .card-swiper-wrap { margin-top: 1rem; }
  .card-swiper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .card-slide { min-width: 100%; scroll-snap-align: start; padding: 0.2rem; }
  .home-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
  }
  .card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
  .access-logo-row i { color: var(--brass-soft); margin-right: 4px; }
  .balance-row { display: flex; justify-content: space-between; align-items: center; }
  .card-actions { display: flex; gap: 0.5rem; }
  .card-icon-btn {
    border: 1px solid var(--hairline);
    background: var(--surface-2);
    color: var(--paper);
    border-radius: 50%;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
  }
  .dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline-strong); }
  .dot.active { background: var(--brass-soft); }

  .quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin: 1.2rem 0;
  }
  .quick-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.8rem 0.4rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    font-size: 0.72rem;
    color: var(--paper);
  }
  .quick-action-item i { font-size: 1.2rem; color: var(--brass-soft); margin-bottom: 0.4rem; }

  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 1.2rem; }
  .stat-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 1rem;
  }
  .stat-label { font-size: 0.75rem; color: var(--muted-2); }
  .stat-value { font-size: 1.1rem; font-weight: 600; margin: 0.3rem 0; }
  .stat-change { font-size: 0.68rem; }
  .stat-change.down { color: var(--rose); }
  .stat-change.up { color: var(--sage); }

  .recent-section, .featured-section {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    margin-bottom: 1.2rem;
  }
  .rs-header, .fs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
  .period-toggle { display: flex; gap: 0.4rem; }
  .period-btn {
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--muted);
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
  }
  .period-btn.active { background: var(--wash-4); color: var(--paper); }

  .featured-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--wash-2);
    border-radius: var(--radius-md);
    padding: 1rem;
  }
  .banner-text h4 { font-family: 'Fraunces', serif; font-size: 1.1rem; margin: 0 0 0.2rem 0; }
  .banner-text p { font-size: 0.78rem; margin: 0 0 0.4rem 0; }
  .small-text { font-size: 0.68rem; color: var(--muted-2); }
  .lock-img { font-size: 2rem; }
  
  
  
  :root{
    --ink:#F3F1E9;
    --ink-2:#EBE7DA;
    --surface:#FFFFFF;
    --surface-2:#F7F4EC;
    --hairline: rgba(23,34,54,.10);
    --hairline-strong: rgba(23,34,54,.20);
    --brass:#A8792F;
    --brass-soft:#C9A24B;
    --paper:#182338;
    --muted:#5B6B85;
    --muted-2:#8792A6;
    --sage:#3D8A5F;
    --rose:#B14E3F;
    --wash-1: rgba(23,34,54,.035);
    --wash-2: rgba(23,34,54,.05);
    --wash-3: rgba(23,34,54,.05);
    --wash-4: rgba(23,34,54,.09);
    --wash-5: rgba(23,34,54,.14);
    --wash-6: rgba(23,34,54,.06);
    --shell:rgba(255,255,255,.7);
    --on-brass:#1E160A;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --text-sub: var(--muted-2);

    /* ── Aliases ──────────────────────────────────────────────────
       The multistep international-transfer markup below was adapted
       from a page that used a different variable naming scheme
       (--text, --surface2, --orange, --brass, etc). Rather
       than rewrite every rule, alias those names onto this page's
       real brass/paper tokens so they resolve to something instead
       of silently falling back to inherited/transparent values. */
    --text: var(--paper);
    --text-muted: var(--muted);
    --text-white: #FFFFFF;
    --surface2: var(--surface-2);
    --border: var(--hairline);
    --brass: var(--paper);
    --primary-lite: var(--brass-soft);
    --orange: var(--brass-soft);
    --orange-07: rgba(168,121,47,.07);
    --orange-08: rgba(168,121,47,.08);
    --orange-10: rgba(168,121,47,.10);
    --orange-20: rgba(168,121,47,.20);
    --green: var(--sage);
    --green-soft: rgba(61,138,95,.35);
    --green-dim: rgba(61,138,95,.12);
    --white-25: rgba(23,34,54,.12);
    --font-mono: 'IBM Plex Mono', monospace;
  }

  html[data-theme="dark"]{
    --ink:#0B1220;
    --ink-2:#111B2E;
    --surface:#17223A;
    --surface-2:#1E2C48;
    --hairline: rgba(201,162,75,.16);
    --hairline-strong: rgba(201,162,75,.32);
    --brass:#C9A24B;
    --brass-soft:#E4C57A;
    --paper:#F5F1E8;
    --muted:#93A0B8;
    --muted-2:#66738C;
    --sage:#74B98C;
    --rose:#D17868;
    --wash-1: rgba(255,255,255,.015);
    --wash-2: rgba(255,255,255,.03);
    --wash-3: rgba(255,255,255,.035);
    --wash-4: rgba(255,255,255,.06);
    --wash-5: rgba(255,255,255,.10);
    --wash-6: rgba(255,255,255,.04);
    --shell:rgba(11,18,32,.86);

    /* ── Alias overrides (dark) ── */
    --orange-07: rgba(201,162,75,.09);
    --orange-08: rgba(201,162,75,.10);
    --orange-10: rgba(201,162,75,.14);
    --orange-20: rgba(201,162,75,.26);
    --green-dim: rgba(116,185,140,.14);
    --green-soft: rgba(116,185,140,.35);
    --white-25: rgba(0,0,0,.35);
  }

  *{ box-sizing:border-box; }

  html,body{
    background:var(--ink);
    color:var(--paper);
    font-family:'Inter',sans-serif;
    min-height:100vh;
  }

  body{ transition:background .2s ease, color .2s ease; }
  ::selection{ background:var(--brass); color:var(--on-brass); }

  .serif{ font-family:'Fraunces', serif; }
  .mono{ font-family:'IBM Plex Mono', monospace; }

  .eyebrow{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:400;
    font-size:.78rem;
    letter-spacing:.06em;
    color:var(--brass-soft);
  }

  a{ color:inherit; text-decoration:none; }

  /* ── SIDEBAR STYLES ── */
  .sidebar{
    background:
      radial-gradient(1200px 400px at -10% -10%, rgba(201,162,75,.08), transparent 60%),
      var(--ink-2);
    border-right:1px solid var(--hairline);
    min-height:100vh;
    padding:1.75rem 1.4rem;
  }
  .brand-mark{
    display:flex; align-items:center; gap:.65rem;
    margin-bottom:2.5rem;
  }
  .brand-mark .dot{
    width:34px; height:34px; border-radius:50%;
    border:1.5px solid var(--brass);
    position:relative; flex:0 0 auto;
  }
  .brand-mark .dot::before{
    content:""; position:absolute; inset:8px; border-radius:50%; background:var(--brass);
  }
  .brand-mark .dot::after{
    content:""; position:absolute; top:-4px; left:50%; width:1px; height:8px;
    background:var(--brass); transform:translateX(-50%);
  }
  .brand-name{ font-family:'Fraunces', serif; font-size:1.28rem; letter-spacing:.03em; line-height:1; }
  .brand-sub{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }

  .nav-meridian .nav-link{
    color:var(--muted); font-size:.92rem; font-weight:500; padding:.68rem .8rem;
    border-radius:var(--radius-sm); display:flex; align-items:center; gap:.75rem;
    margin-bottom:.15rem; border-left:2px solid transparent; transition:background .15s ease, color .15s ease;
  }
  .nav-meridian .nav-link i{ font-size:1.05rem; width:20px; text-align:center; color:var(--muted-2); }
  .nav-meridian .nav-link:hover{ background:var(--wash-2); color:var(--paper); }
  .nav-meridian .nav-link.active{
    background:linear-gradient(90deg, rgba(201,162,75,.14), transparent);
    color:var(--paper); border-left-color:var(--brass);
  }
  .nav-meridian .nav-link.active i{ color:var(--brass-soft); }

  .sidebar-support{
    margin-top:2.5rem; border:1px solid var(--hairline); border-radius:var(--radius-md);
    padding:1.1rem; background:linear-gradient(160deg, rgba(201,162,75,.08), transparent 70%);
  }
  .sidebar-support .icon-ring{
    width:34px; height:34px; border-radius:50%; border:1px solid var(--hairline-strong);
    display:flex; align-items:center; justify-content:center; color:var(--brass-soft); margin-bottom:.7rem;
  }

  /* ── TOPBAR STYLES ── */
  .topbar{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 0;
    top:0; background:var(--ink); border-bottom:1px solid var(--hairline); z-index: 1020;
  }
  @supports (backdrop-filter: blur(10px)){
    .topbar{ background:var(--shell); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  }
  .search-shell{
    display:flex; align-items:center; gap:.6rem; background:var(--surface);
    border:1px solid var(--hairline); border-radius:999px; padding:.55rem 1.1rem; min-width:260px;
  }
  .search-shell input{ background:transparent; border:0; outline:0; color:var(--paper); font-size:.86rem; width:100%; }
  .search-shell input::placeholder{ color:var(--muted-2); }
  .search-shell i{ color:var(--muted-2); }

  .icon-btn{
    width:40px; height:40px; border-radius:50%; border:1px solid var(--hairline);
    display:flex; align-items:center; justify-content:center; color:var(--muted); position:relative;
    background:var(--surface); transition:border-color .15s ease, color .15s ease;
  }
  .icon-btn:hover{ color:var(--brass-soft); border-color:var(--hairline-strong); }
  .icon-btn .badge-dot{
    position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%;
    background:var(--rose); border:1.5px solid var(--ink-2); display: none;
  }

  .avatar-ring{
    width:42px; height:42px; border-radius:50%; background:linear-gradient(160deg, var(--brass-soft), var(--brass));
    display:flex; align-items:center; justify-content:center; color:var(--on-brass);
    font-family:'Fraunces',serif; font-weight:600; font-size:.95rem;
  }

  /* ── BOTTOM NAV ── */
  .bottom-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:1030; display:flex; align-items:flex-end;
    justify-content:space-around; background:var(--ink-2); border-top:1px solid var(--hairline);
    padding:.55rem .4rem calc(.55rem + env(safe-area-inset-bottom));
  }
  .bottom-nav .bn-item{
    display:flex; flex-direction:column; align-items:center; gap:.22rem; color:var(--muted-2);
    font-size:.62rem; font-weight:500; padding:.3rem .5rem; border-radius:var(--radius-sm); flex:1 1 0; min-width:0;
  }
  .bottom-nav .bn-item i{ font-size:1.2rem; }
  .bottom-nav .bn-item.active{ color:var(--brass-soft); }
  .bottom-nav .bn-item:active{ background:var(--wash-6); }
  button.bn-item{ background:transparent; border:0; }
  .bottom-nav .bn-center{ margin-top:-30px; }
  .bottom-nav .bn-center .circle{
    width:52px; height:52px; border-radius:50%; background:linear-gradient(160deg, var(--brass-soft), var(--brass));
    display:flex; align-items:center; justify-content:center; color:var(--on-brass); font-size:1.3rem;
    border:4px solid var(--ink-2);
  }
  .bottom-nav .bn-center span{ color:var(--muted); margin-top:.3rem; }

  .offcanvas{ background:var(--ink-2); color:var(--paper); border-right:1px solid var(--hairline); width:270px; }
  .offcanvas .btn-close{ filter:invert(1) grayscale(1); opacity:.6; }

  /* ── PAGE CONTENT & FORM STYLES ── */
  .panel{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-lg); position:relative; }
  .transfer-tabs { display: flex; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 4px; margin-bottom: 20px; }
  .transfer-tab { flex: 1; text-align: center; padding: 10px; font-size: 0.85rem; font-weight: 600; color: var(--muted); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; }
  .transfer-tab.active { background: var(--surface); color: var(--paper); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
  
  .input-field { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 14px; position: relative; }
  .input-field input, .input-field select { width: 100%; background: transparent; border: 0; outline: 0; color: var(--paper); font-size: 0.9rem; }
  .input-field .naira { font-weight: 600; color: var(--brass-soft); margin-right: 10px; }
  
  .generate-btn { width: 100%; background: linear-gradient(160deg, var(--brass-soft), var(--brass)); border: 0; color: var(--on-brass); padding: 14px; border-radius: var(--radius-md); font-weight: 600; letter-spacing: 0.05em; margin-top: 10px; cursor: pointer; }
  .max-amount { font-size: 0.75rem; color: var(--muted-2); margin-top: -8px; margin-bottom: 14px; padding-left: 4px; }

  /* Card Swiper Styles */
  .card-swiper-wrapper { overflow: hidden; position: relative; border-radius: var(--radius-md); margin-bottom: 15px; }
  .card-swiper { display: flex; transition: transform 0.3s ease; }
  .card-slide { min-width: 100%; box-sizing: border-box; }
  .home-card { padding: 20px; border-radius: var(--radius-md); background: linear-gradient(135deg, #1e293b, #0f172a); color: #fff; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }
  .home-card.card-premier { background: linear-gradient(135deg, #1e2330, #2a3447); }
  .home-card.card-current { background: linear-gradient(135deg, #1d2d24, #122018); }
  .home-card.card-dollar { background: linear-gradient(135deg, #312518, #1c140c); }
  .home-card.card-fixed { background: linear-gradient(135deg, #2b1d2d, #190f1b); }
  .home-card.card-target { background: linear-gradient(135deg, #1d2b2c, #0e191a); }
  
  .card-top { display: flex; justify-content: space-between; align-items: flex-start; }
  .acc-name { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
  .acc-details { font-size: 0.75rem; opacity: 0.6; }
  .access-logo-row { font-size: 0.8rem; font-weight: bold; display: flex; align-items: center; gap: 5px; }
  .balance-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 15px; }
  .balance-label { font-size: 0.7rem; opacity: 0.7; }
  .balance-amt { font-size: 1.3rem; font-weight: bold; font-family: 'IBM Plex Mono', monospace; }
  .card-icon-btn { background: rgba(255,255,255,0.1); border: 0; color: #fff; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

  .swiper-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
  .swiper-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline-strong); cursor: pointer; transition: all 0.2s; }
  .swiper-dots .dot.active { background: var(--brass-soft); width: 18px; border-radius: 4px; }

  /* Beneficiary Strip */
  .benef-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 15px; }
  .beneficiary-item { display: flex; flex-direction: column; align-items: center; font-size: 0.75rem; cursor: pointer; min-width: 60px; }
  .beneficiary-avatar { width: 44px; height: 44px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-bottom: 4px; }

  /* Modals */
  .custom-modal { display: none; position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 15px; }
  .custom-modal.show { display: flex; }
  .modal-box { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); width: 100%; max-width: 440px; padding: 24px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
  .otp-group { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
  .otp-input { width: 45px; height: 50px; text-align: center; font-size: 1.2rem; font-weight: bold; border-radius: var(--radius-sm); border: 1px solid var(--hairline-strong); background: var(--surface-2); color: var(--paper); }

  /* Verified Badge */
  .verified-badge { background: rgba(61,138,95,0.1); border: 1px solid var(--sage); color: var(--sage); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.8rem; margin-bottom: 14px; display: none; }
  .lookup-loader { position: absolute; right: 15px; display: none; }

  /* Toast Bar */
  .toast-bar { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(100px); background: #1e293b; color: #fff; padding: 10px 20px; border-radius: 99px; font-size: 0.85rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; transition: all 0.3s ease; z-index: 1100; pointer-events: none; }
  .toast-bar.show { transform: translateX(-50%) translateY(0); opacity: 1; }

  /* Preloader */
  #preloader { position: fixed; inset: 0; background: var(--ink); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s; }
  #preloader.hide { opacity: 0; pointer-events: none; }
  
  
/* ============================================================
   INTERNATIONAL TRANSFER / TOPUP
   ============================================================ */
.country-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; }
.country-card{ background: var(--surface2); border: 1.5px solid transparent; border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all .2s; }
.country-card:active, .country-card.selected{ border-color: var(--brass); background: var(--orange-10); }
.country-flag{ font-size: 22px; line-height: 1; }
.country-info{ flex: 1; min-width: 0; }
.country-name{ font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.country-cur{ font-size: 10px; color: var(--text-muted); }

.rate-ticker{ background: var(--orange-08); border: 1px solid var(--orange-20); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.rate-row{ display: flex; justify-content: space-between; align-items: center; }
.rate-label{ font-size: 11px; color: var(--text-muted); }
.rate-val{ font-size: 15px; font-weight: 700; color: var(--orange); }
.rate-sub{ font-size: 10px; color: var(--text-sub); margin-top: 2px; }
.rate-spinner{ display: none; text-align: center; padding: 14px; color: var(--text-muted); font-size: 12px; }
.rate-spinner.show{ display: block; }

.amt-split{ background: var(--surface2); border-radius: 12px; padding: 14px; margin-top: 10px; }
.amt-split-row{ display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.amt-split-row:last-child{ margin-bottom: 0; padding-top: 8px; border-top: 1px solid var(--border); font-weight: 700; font-size: 13px; }
.amt-split-row span:last-child{ color: var(--brass); font-weight: 600; }

.summary-card{ background: var(--surface2); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.summary-section-title{ font-size: 10px; font-weight: 700; color: var(--orange); letter-spacing: 1px; text-transform: uppercase; padding: 10px 14px 4px; }
.summary-row{ display: flex; justify-content: space-between; align-items: flex-start; padding: 7px 14px; border-bottom: 1px solid var(--border); gap: 10px; }
.summary-row:last-child{ border-bottom: none; }
.summary-row .s-label{ font-size: 11px; color: var(--text-muted); min-width: 100px; flex-shrink: 0; }
.summary-row .s-val{ font-size: 12px; color: var(--brass); font-weight: 500; text-align: right; word-break: break-word; }
.summary-total-row{ background: var(--orange-07); padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; }
.summary-total-row .s-label{ font-size: 12px; color: var(--text-muted); }
.summary-total-row .s-val{ font-size: 18px; font-weight: 800; color: var(--orange); }

.purpose-grid{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.search-bar{ background: var(--surface2); border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; }
.search-bar input{ background: transparent; border: none; color: var(--text); font-size: 14px; outline: none; flex: 1; }
.op-search-wrap{ padding: 12px 16px; border-bottom: 1px solid var(--border); position: relative; }
.op-search-input{ width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 14px 9px 34px; font-size: 13px; color: var(--text); outline: none; transition: border-color .18s; }
.op-search-input:focus{ border-color: var(--brass); }
[data-theme="dark"] .op-search-input:focus{ border-color: var(--primary-lite); }
.op-search-ico{ position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: var(--text-sub); font-size: 12px; pointer-events: none; }

.swift-badge{ display: inline-flex; align-items: center; gap: 5px; background: var(--green-dim); border: 1px solid var(--green-soft); border-radius: 6px; padding: 3px 8px; font-size: 10px; color: var(--green); font-weight: 600; }
.compliance-notice{ background: rgba(255,193,7,.1); border: 1px solid rgba(255,193,7,.3); border-radius: 10px; padding: 12px 14px; font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }

.intl-receipt-card{ background: #fff; border-radius: 16px; padding: 20px 18px 16px; margin: 12px 0 8px; box-shadow: 0 2px 20px var(--white-25); }
.intl-rr{ display: flex; justify-content: space-between; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #f3f3f3; gap: 8px; }
.intl-rr:last-child{ border-bottom: none; }
.intl-rr .rl{ font-size: 10.5px; color: var(--brass); font-weight: 600; min-width: 110px; flex-shrink: 0; }
.intl-rr .rv{ font-size: 11px; color: var(--brass); font-weight: 500; text-align: right; word-break: break-all; }
.intl-rr .rv.green{ color: #2e7d32; font-weight: 700; }
.intl-rr .rv.mono{ font-family: var(--font-mono); font-size: 9.5px; }

.step-btns{ display: flex; gap: 10px; margin-top: 16px; }
.btn-back{ flex: 1; padding: 14px; background: var(--surface2); border: none; border-radius: 12px; color: var(--text-muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-next{ flex: 2; padding: 14px; background: var(--brass); border: none; border-radius: 12px; color: var(--text-white); font-size: 14px; font-weight: 700; cursor: pointer; letter-spacing: .3px; }
.btn-next:disabled{ opacity: .5; cursor: not-allowed; }


  /* ============================================================
     MULTISTEP TRANSFER FORM — top bar, steps, panels, modals, receipt
     (none of these had matching CSS before; markup was unstyled)
     ============================================================ */

  /* In-panel top bar (back button / title) */
  .top-bar{ display:flex; align-items:center; justify-content:space-between; padding:2px 2px 18px; }
  .top-bar h5{ margin:0; font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600; color:var(--paper); }
  .back-btn{
    width:36px; height:36px; border-radius:50%; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-2); border:1px solid var(--hairline); color:var(--muted);
    transition:color .15s ease, border-color .15s ease;
  }
  .back-btn:hover{ color:var(--brass-soft); border-color:var(--hairline-strong); }

  .content-scroll{ padding:0 2px; }

  /* Card swiper wrap (markup uses .card-swiper-wrap; alias it here) */
  .card-swiper-wrap{ overflow:hidden; position:relative; border-radius:var(--radius-md); margin-bottom:14px; }

  /* Account dots (markup uses .dots/.dot — alias of .swiper-dots) */
  .dots{ display:flex; justify-content:center; gap:6px; margin:0 0 18px; }
  .dots .dot{ width:8px; height:8px; border-radius:50%; background:var(--hairline-strong); cursor:pointer; transition:all .2s ease; }
  .dots .dot.active{ background:var(--brass-soft); width:18px; border-radius:4px; }

  /* Step progress bar */
  .step-bar{ display:flex; align-items:flex-start; padding:4px 2px 22px; }
  .step-node{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; }
  .step-circle{
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:.8rem; font-weight:700; background:var(--surface-2); border:1.5px solid var(--hairline-strong);
    color:var(--muted-2); transition:all .2s ease;
  }
  .step-circle.active{ background:linear-gradient(160deg, var(--brass-soft), var(--brass)); color:var(--on-brass); border-color:transparent; }
  .step-circle.done{ background:var(--sage); color:#fff; border-color:transparent; }
  .step-label{ font-size:.64rem; color:var(--muted-2); font-weight:500; white-space:nowrap; }
  .step-label.active{ color:var(--paper); font-weight:600; }
  .step-label.done{ color:var(--sage); }
  .step-line{ flex:1 1 auto; height:2px; background:var(--hairline-strong); margin-top:14px; }
  .step-line.done{ background:var(--sage); }

  /* Step panels — only the active one is shown */
  .step-panel{ display:none; }
  .step-panel.active{ display:block; animation:stepFadeIn .25s ease; }
  @keyframes stepFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

  /* Purpose chips (step 3) */
  .purpose-chip{
    padding:8px 14px; border-radius:999px; background:var(--surface-2); border:1px solid var(--hairline);
    font-size:.78rem; color:var(--muted); cursor:pointer; transition:all .15s ease;
  }
  .purpose-chip:hover{ border-color:var(--hairline-strong); }
  .purpose-chip.selected{
    background:linear-gradient(160deg, var(--brass-soft), var(--brass)); color:var(--on-brass);
    border-color:transparent; font-weight:600;
  }

  /* Bottom-sheet modals (PIN / COT / Auth / Success) */
  .modal-overlay{
    position:fixed; inset:0; z-index:1200; background:rgba(11,18,32,.6);
    display:flex; align-items:center; justify-content:center; padding:16px;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  @supports (backdrop-filter: blur(4px)){ .modal-overlay{ backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } }
  .modal-overlay.show{ opacity:1; pointer-events:auto; }
  .modal-sheet{
    width:100%; max-width:420px; background:var(--surface);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:22px 22px 26px; box-shadow:0 -10px 40px rgba(0,0,0,.25);
    transform:translateY(24px); transition:transform .25s ease;
  }
  .modal-overlay.show .modal-sheet{ transform:translateY(0); }
  @media (min-width:576px){ .modal-sheet{ border-radius:var(--radius-lg); } }
  .modal-handle{ width:36px; height:4px; border-radius:2px; background:var(--hairline-strong); margin:0 auto 16px; }
  .modal-title{ font-family:'Fraunces',serif; font-size:1.1rem; font-weight:600; color:var(--paper); }
  .otp-wrap{ display:flex; gap:10px; justify-content:center; margin:20px 0; }

  /* Receipt (success modal) */
  .receipt-check-circle{
    width:56px; height:56px; border-radius:50%; margin:0 auto 12px;
    background:linear-gradient(160deg, var(--sage), #2E6B48);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem;
  }
  .receipt-success-title{ font-family:'Fraunces',serif; font-size:1.2rem; font-weight:600; color:var(--paper); margin-bottom:4px; }
  .receipt-success-sub{ font-size:.82rem; color:var(--muted); }

  .receipt-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .receipt-logo{ display:flex; align-items:center; }
  .receipt-logo-text{ display:flex; align-items:center; }
  .receipt-slash-wrap{ text-align:right; }
  .receipt-slash{ width:34px; height:2px; background:linear-gradient(90deg, transparent, var(--brass)); margin:0 0 3px auto; }
  .receipt-tagline{ font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:#8792A6; }
  .receipt-title-row{ text-align:center; font-weight:700; font-size:1.05rem; color:#182338; margin-bottom:2px; }
  .receipt-generated{ text-align:center; font-size:.7rem; color:#8792A6; margin-bottom:14px; }
  .receipt-divider{ height:1px; background:rgba(23,34,54,.1); margin:10px 0; }
  .receipt-footer{ text-align:center; font-size:.68rem; color:#8792A6; line-height:1.65; }

  .receipt-actions{ display:flex; gap:10px; margin-top:14px; }
  .receipt-action-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    background:var(--surface-2); border:1px solid var(--hairline); color:var(--paper);
    border-radius:var(--radius-md); padding:12px 0; font-size:.78rem; font-weight:600; cursor:pointer;
  }
  .receipt-action-btn.receipt-action-share{
    background:linear-gradient(160deg, var(--brass-soft), var(--brass)); color:var(--on-brass); border-color:transparent;
  }

  @media (max-width: 991.98px){ body{ padding-bottom:78px; } }
  
  
  
  
  /* ── Responsive Shell ────────────────────────────────────────────── */
@media (min-width: 768px) {
  body { 
    align-items: flex-start !important; 
    padding: 32px 24px 60px; 
    min-height: 100vh; 
    box-sizing: border-box; 
  }
  .phone-wrap { 
    width: 100% !important; 
    max-width: 960px !important; 
    height: auto !important; 
    margin: 0 auto !important; 
    border-radius: var(--radius) !important; 
    box-shadow: 0 24px 64px var(--shadow-elev) !important; 
  }
  .phone-screen { 
    width: 100% !important; 
    height: auto !important; 
    min-height: 640px; 
    border-radius: var(--radius) !important; 
    display: flex; 
    flex-direction: column; 
    background: var(--surface);
  }
  .top-bar { 
    padding: 20px 32px !important; 
  }
  .content-scroll { 
    padding: 28px 32px 40px !important; 
    height: auto !important; 
    overflow: visible !important; 
    flex: 1 1 auto; 
  }
}

/* ── Investment-specific styling ────────────────────────────────────
   Token conventions:
     gains  → var(--green) / dark mode bump (#9fe3a2)
     losses → var(--danger)
     risks  → LOW=green MEDIUM=blue HIGH=orange VERY_HIGH=danger
───────────────────────────────────────────────────────────────── */

/* ── Summary Cards ───────────────────────────────────────────────── */
.summary-row { 
  display: flex; 
  gap: 10px; 
  overflow-x: auto; 
  padding-bottom: 4px; 
  margin-bottom: 18px; 
}
.summary-card {
  flex: 0 0 auto; 
  min-width: 150px; 
  background: var(--surface2); 
  border: 1px solid var(--border);
  border-radius: var(--radius-sm); 
  padding: 14px 16px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.summary-card .lbl { 
  font-family: var(--font-body); 
  font-size: 10.5px; 
  color: var(--text-muted); 
  text-transform: uppercase; 
  letter-spacing: .04em; 
}
.summary-card .val { 
  font-family: var(--font-amt); 
  font-size: 17px; 
  font-weight: 700; 
  color: var(--heading); 
  margin-top: 4px; 
}
.summary-card .chg { 
  font-family: var(--font-body); 
  font-size: 11.5px; 
  margin-top: 4px; 
  font-weight: 600; 
}
.summary-card .chg.up { color: var(--green); } 
[data-theme="dark"] .summary-card .chg.up { color: #9fe3a2; }
.summary-card .chg.down { color: var(--danger); }

/* ── Primary Action Button ───────────────────────────────────────── */
.new-inv-btn {
  width: 100%; 
  padding: 13px; 
  margin-bottom: 20px; 
  border: none; 
  border-radius: var(--radius-sm);
  background: var(--brass); 
  color: #ffffff; 
  font-family: var(--font-body); 
  font-size: 14px; 
  font-weight: 700;
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.new-inv-btn:active { background: var(--primary-deep); }

/* ── Status filter tabs ────────────────────────────────────────── */
.status-tabs {
  display: flex; 
  gap: 8px; 
  overflow-x: auto; 
  padding-bottom: 4px; 
  margin-bottom: 14px;
  scrollbar-width: none;
}
.status-tabs::-webkit-scrollbar { display: none; }
.status-tab {
  flex: 0 0 auto; 
  padding: 7px 14px; 
  border-radius: 99px; 
  border: 1px solid var(--border);
  background: var(--surface2); 
  color: var(--text-muted); 
  font-family: var(--font-body);
  font-size: 12px; 
  font-weight: 600; 
  cursor: pointer; 
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.status-tab .cnt { opacity: .65; margin-left: 5px; font-weight: 700; }
.status-tab.active { 
  background: var(--brass); 
  border-color: var(--brass); 
  color: #ffffff; 
}
[data-theme="dark"] .status-tab.active {
  background: var(--primary-lite);
  border-color: var(--primary-lite);
  color: var(--primary-deep);
}
.status-tab.active .cnt { opacity: .9; }

/* ── Investment Items List ──────────────────────────────────────── */
.inv-item {
  display: flex; 
  align-items: center; 
  gap: 12px; 
  padding: 12px 14px;
  border: 1px solid var(--border); 
  border-radius: var(--radius-sm);
  margin-bottom: 10px; 
  cursor: pointer; 
  background: var(--surface);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.inv-item:active { background: var(--surface2); }
.inv-icon {
  width: 42px; 
  height: 42px; 
  border-radius: var(--radius-xs); 
  flex-shrink: 0;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 16px;
  background: var(--surface3); 
  color: var(--brass);
  transition: background var(--transition-fast), color var(--transition-fast);
}
[data-theme="dark"] .inv-icon { color: var(--primary-lite); }

.inv-main { flex: 1; min-width: 0; }
.inv-name { 
  font-family: var(--font-body); 
  font-size: 13px; 
  font-weight: 600; 
  color: var(--text); 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
.inv-sub { font-family: var(--font-body); font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.inv-right { text-align: right; flex-shrink: 0; }
.inv-value { font-family: var(--font-amt); font-size: 13px; font-weight: 700; color: var(--text); }
.inv-gain { font-family: var(--font-body); font-size: 11px; font-weight: 600; margin-top: 2px; }
.inv-gain.up { color: var(--green); } 
[data-theme="dark"] .inv-gain.up { color: #9fe3a2; }
.inv-gain.down { color: var(--danger); }

/* ── Badges ─────────────────────────────────────────────────────── */
.risk-badge { 
  font-family: var(--font-body); 
  font-size: 9px; 
  font-weight: 700; 
  padding: 2px 7px; 
  border-radius: 99px; 
  text-transform: uppercase; 
  letter-spacing: .3px; 
}
.risk-badge.LOW { background: var(--green-dim); color: var(--green); } 
[data-theme="dark"] .risk-badge.LOW { color: #9fe3a2; }
.risk-badge.MEDIUM { background: rgba(77,144,254,0.12); color: var(--blue); }
.risk-badge.HIGH { background: var(--orange-12); color: var(--orange); }
.risk-badge.VERY_HIGH { background: var(--danger-soft); color: var(--danger); }

.status-badge { 
  font-family: var(--font-body); 
  font-size: 9px; 
  font-weight: 700; 
  padding: 2px 7px; 
  border-radius: 99px; 
  text-transform: uppercase; 
  letter-spacing: .3px; 
}
.status-badge.ACTIVE { background: var(--green-dim); color: var(--green); } 
[data-theme="dark"] .status-badge.ACTIVE { color: #9fe3a2; }
.status-badge.PENDING { background: rgba(77,144,254,0.12); color: var(--blue); }
.status-badge.SUSPENDED { background: var(--danger-soft); color: var(--danger); }
.status-badge.CLOSED { background: var(--surface3); color: var(--text-muted); }

.lock-badge {
  font-family: var(--font-body); 
  font-size: 9px; 
  font-weight: 700; 
  padding: 2px 7px; 
  border-radius: 99px;
  text-transform: uppercase; 
  letter-spacing: .3px; 
  background: var(--orange-12); 
  color: var(--orange);
  display: inline-flex; 
  align-items: center; 
  gap: 4px;
}
.lock-badge i { font-size: 8px; }

/* ── Pagination ─────────────────────────────────────────────────── */
.pagination-row {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 6px;
  margin-top: 6px; 
  margin-bottom: 6px; 
  flex-wrap: wrap;
}
.page-btn {
  min-width: 30px; 
  height: 30px; 
  padding: 0 8px; 
  border-radius: var(--radius-xs);
  border: 1px solid var(--border); 
  background: var(--surface2); 
  color: var(--text);
  font-family: var(--font-body); 
  font-size: 12px; 
  font-weight: 600; 
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.page-btn:disabled { opacity: .4; cursor: default; }
.page-btn.active { 
  background: var(--brass); 
  border-color: var(--brass); 
  color: #ffffff; 
}
[data-theme="dark"] .page-btn.active {
  background: var(--primary-lite);
  border-color: var(--primary-lite);
  color: var(--primary-deep);
}
.page-info { 
  font-family: var(--font-body); 
  font-size: 11px; 
  color: var(--text-muted); 
  width: 100%; 
  text-align: center; 
  margin-top: 2px; 
}

/* ── Product Cards ──────────────────────────────────────────────── */
.product-card {
  border: 1px solid var(--border); 
  border-radius: var(--radius-sm); 
  padding: 14px 16px;
  margin-bottom: 10px; 
  cursor: pointer; 
  background: var(--surface);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.product-card:hover, .product-card.selected { 
  border-color: var(--primary-lite); 
  background: var(--surface2); 
}
.product-card .pname { font-family: var(--font-heading); font-size: 13.5px; font-weight: 700; color: var(--heading); }
.product-card .pdesc { font-family: var(--font-body); font-size: 11.5px; color: var(--text-muted); margin: 4px 0 8px; line-height: 1.4; }
.product-card .prange { font-family: var(--font-body); font-size: 11px; color: var(--text-muted); }

/* ── Expected Performance Box ───────────────────────────────────── */
.perf-expect-box {
  background: var(--surface2); 
  border: 1px solid var(--border); 
  border-radius: var(--radius-sm);
  padding: 12px 14px; 
  margin-bottom: 14px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.perf-expect-title {
  font-family: var(--font-body); 
  font-size: 11.5px; 
  font-weight: 700; 
  color: var(--heading);
  text-transform: uppercase; 
  letter-spacing: .03em; 
  margin-bottom: 8px; 
  display: flex; 
  align-items: center; 
  gap: 6px;
}
.perf-expect-title .perf-expect-n {
  font-weight: 600; 
  text-transform: none; 
  letter-spacing: 0; 
  color: var(--text-muted); 
  margin-left: auto; 
  font-size: 10.5px;
}
.perf-expect-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12.5px; }
.perf-expect-row .pel { color: var(--text-muted); }
.perf-expect-row .pev { font-weight: 700; color: var(--text); }
.perf-expect-row .pev.up { color: var(--green); } 
[data-theme="dark"] .perf-expect-row .pev.up { color: #9fe3a2; }
.perf-expect-row .pev.down { color: var(--danger); }
.perf-expect-projection {
  font-family: var(--font-body); 
  font-size: 12px; 
  color: var(--text); 
  margin-top: 6px; 
  padding-top: 8px; 
  border-top: 1px solid var(--border);
}
.perf-expect-projection strong { font-family: var(--font-amt); }
.perf-expect-disclaimer { font-family: var(--font-body); font-size: 10px; color: var(--text-muted); margin-top: 8px; line-height: 1.4; }
.perf-expect-empty { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.perf-expect-empty i { margin-right: 5px; }

/* ── Form Inputs ────────────────────────────────────────────────── */
.select-field, .inv-input {
  width: 100%; 
  padding: 12px 14px; 
  border-radius: var(--radius-xs); 
  border: 1px solid var(--border);
  background: var(--surface2); 
  color: var(--text); 
  font-family: var(--font-body); 
  font-size: 13px;
  margin-bottom: 12px; 
  box-sizing: border-box; 
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.select-field:focus, .inv-input:focus { outline: none; border-color: var(--orange); }
.field-label { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 6px; }

/* ── Performance & Transaction Rows ────────────────────────────── */
.perf-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.perf-row .pl { color: var(--text-muted); }
.perf-row .pv { color: var(--text); font-weight: 600; }
.perf-row .pg.up { color: var(--green); } 
[data-theme="dark"] .perf-row .pg.up { color: #9fe3a2; }
.perf-row .pg.down { color: var(--danger); }

.tx-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.tx-row:last-child { border-bottom: none; }
.tx-row .ttype { font-size: 12px; font-weight: 600; color: var(--text); }
.tx-row .ttime { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.tx-row .tamt { font-family: var(--font-amt); font-size: 12.5px; font-weight: 700; }
.tx-row .tamt.credit { color: var(--green); } 
[data-theme="dark"] .tx-row .tamt.credit { color: #9fe3a2; }
.tx-row .tamt.debit { color: var(--text); }

/* ── Feedback Modals ────────────────────────────────────────────── */
.feedback-icon-wrap {
  width: 64px; 
  height: 64px; 
  border-radius: 50%; 
  margin: 6px auto 4px;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 26px;
}
.feedback-icon-wrap.error { background: var(--danger-soft); color: var(--danger); }

.success-check { width: 76px; height: 76px; display: block; margin: 6px auto 4px; }
.success-check .check-circle {
  stroke: var(--green); 
  stroke-width: 2.5; 
  fill: none;
  stroke-dasharray: 166; 
  stroke-dashoffset: 166;
  animation: successCircle .5s cubic-bezier(0.65,0,0.45,1) forwards;
}
.success-check .check-mark {
  stroke: var(--green); 
  stroke-width: 3.5; 
  fill: none; 
  stroke-linecap: round; 
  stroke-linejoin: round;
  stroke-dasharray: 48; 
  stroke-dashoffset: 48;
  animation: successMark .35s cubic-bezier(0.65,0,0.45,1) .5s forwards;
}

[data-theme="dark"] .success-check .check-circle,
[data-theme="dark"] .success-check .check-mark { stroke: #9fe3a2; }

@keyframes successCircle { to { stroke-dashoffset: 0; } }
@keyframes successMark { to { stroke-dashoffset: 0; } }



/* ── Shell & Media Queries ──────────────────────────────────────── */
@media (min-width: 768px) {
  body { 
    align-items: flex-start !important; 
    padding: 32px 24px 60px; 
    min-height: 100vh; 
    box-sizing: border-box; 
  }
  .phone-wrap { 
    width: 100% !important; 
    max-width: 900px !important; 
    height: auto !important; 
    margin: 0 auto !important; 
    border-radius: var(--radius) !important; 
    box-shadow: 0 24px 64px var(--shadow-elev) !important; 
  }
  .phone-screen { 
    width: 100% !important; 
    height: auto !important; 
    min-height: 640px; 
    border-radius: var(--radius) !important; 
    display: flex; 
    flex-direction: column; 
    background: var(--surface);
  }
  .top-bar { 
    padding: 20px 32px !important; 
  }
  .content-scroll { 
    padding: 28px 32px 40px !important; 
    height: auto !important; 
    overflow: visible !important; 
    flex: 1 1 auto; 
  }
}

/* ── KYC-specific styling ───────────────────────────────────────── */

/* ── KYC Hero Section ────────────────────────────────────────────── */
.kyc-hero {
  display: flex; 
  align-items: center; 
  gap: 14px;
  padding: 16px; 
  border-radius: var(--radius-sm);
  background: var(--surface2); 
  margin-bottom: 20px;
  border: 1px solid var(--border);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.kyc-hero-icon {
  width: 48px; 
  height: 48px; 
  border-radius: var(--radius-xs); 
  flex-shrink: 0;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 20px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.kyc-hero .title { 
  font-family: var(--font-heading); 
  font-size: 14px; 
  font-weight: 700; 
  color: var(--heading); 
}
.kyc-hero .sub { 
  font-family: var(--font-body); 
  font-size: 12px; 
  color: var(--text-muted); 
  margin-top: 2px; 
}

/* KYC Hero Status Variations */
.kyc-status-not_submitted .kyc-hero-icon { 
  background: var(--orange-12); 
  color: var(--orange); 
}
.kyc-status-pending .kyc-hero-icon { 
  background: rgba(77, 144, 254, 0.12); 
  color: var(--blue); 
}
.kyc-status-approved .kyc-hero-icon { 
  background: var(--green-dim); 
  color: var(--green); 
}
[data-theme="dark"] .kyc-status-approved .kyc-hero-icon { 
  color: #9fe3a2; 
}
.kyc-status-rejected .kyc-hero-icon,
.kyc-status-expired .kyc-hero-icon { 
  background: var(--danger-soft); 
  color: var(--danger); 
}

/* ── Tier Cards & Requirement Rows ─────────────────────────────── */
.tier-card {
  border: 1px solid var(--border); 
  border-radius: var(--radius-sm);
  background: var(--surface); 
  padding: 14px 16px; 
  margin-bottom: 14px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.tier-card-head { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  margin-bottom: 8px; 
}
.tier-card-head .tname { 
  font-family: var(--font-heading); 
  font-size: 13px; 
  font-weight: 700; 
  color: var(--heading); 
}
.tier-card-head .tcount { 
  font-family: var(--font-body); 
  font-size: 11px; 
  color: var(--text-muted); 
}

.req-row { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  padding: 9px 0; 
  border-bottom: 1px solid var(--border); 
}
.req-row:last-child { border-bottom: none; }

.req-icon { 
  width: 30px; 
  height: 30px; 
  border-radius: var(--radius-xs); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 12px; 
  flex-shrink: 0; 
  transition: background var(--transition-fast), color var(--transition-fast);
}
.req-icon.st-none { 
  background: var(--surface2); 
  color: var(--text-muted); 
}
.req-icon.st-pending { 
  background: rgba(77, 144, 254, 0.12); 
  color: var(--blue); 
}
.req-icon.st-approved { 
  background: var(--green-dim); 
  color: var(--green); 
}
[data-theme="dark"] .req-icon.st-approved { 
  color: #9fe3a2; 
}
.req-icon.st-rejected { 
  background: var(--danger-soft); 
  color: var(--danger); 
}

.req-label { 
  font-family: var(--font-body); 
  font-size: 12.5px; 
  font-weight: 600; 
  color: var(--text); 
  flex: 1; 
  min-width: 0; 
}
.req-sub { 
  font-family: var(--font-body); 
  font-size: 10.5px; 
  color: var(--text-muted); 
  margin-top: 1px; 
}

/* Action Buttons within Rows */
.req-btn {
  font-family: var(--font-body); 
  font-size: 11px; 
  font-weight: 600; 
  padding: 6px 12px;
  border-radius: 99px; 
  border: none; 
  cursor: pointer; 
  flex-shrink: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.req-btn:active { opacity: 0.75; }
.req-btn.upload { 
  background: var(--orange-12); 
  color: var(--orange); 
}
.req-btn.view { 
  background: var(--surface2); 
  color: var(--text-muted); 
}
.req-btn.view:hover { 
  background: var(--surface3); 
  color: var(--text); 
}

/* ── Document Item & Status Badges ─────────────────────────────── */
.doc-item { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  padding: 11px 0; 
  border-bottom: 1px solid var(--border); 
}
.doc-item:last-child { border-bottom: none; }

.doc-badge { 
  font-family: var(--font-body); 
  font-size: 9.5px; 
  font-weight: 700; 
  padding: 3px 8px; 
  border-radius: 99px; 
  text-transform: uppercase; 
  letter-spacing: .3px; 
}
.doc-badge.PENDING { 
  background: rgba(77, 144, 254, 0.12); 
  color: var(--blue); 
}
.doc-badge.APPROVED { 
  background: var(--green-dim); 
  color: var(--green); 
}
[data-theme="dark"] .doc-badge.APPROVED { 
  color: #9fe3a2; 
}
.doc-badge.REJECTED, 
.doc-badge.EXPIRED { 
  background: var(--danger-soft); 
  color: var(--danger); 
}

.doc-actions { 
  display: flex; 
  gap: 8px; 
  flex-shrink: 0; 
}
.doc-actions button { 
  background: none; 
  border: none; 
  cursor: pointer; 
  color: var(--text-muted); 
  font-size: 13px; 
  padding: 4px; 
  transition: color var(--transition-fast); 
}
.doc-actions button:hover { color: var(--text); }
.doc-actions button.danger { color: var(--danger); }
.doc-actions button.danger:hover { opacity: 0.8; }

/* ── Form Inputs & Upload Zone ──────────────────────────────────── */
.select-field, 
.profile-edit-field select {
  width: 100%; 
  padding: 12px 14px; 
  border-radius: var(--radius-xs); 
  border: 1px solid var(--border);
  background: var(--surface2); 
  color: var(--text); 
  font-family: var(--font-body); 
  font-size: 13px;
  margin-bottom: 12px; 
  box-sizing: border-box; 
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.select-field:focus, 
.profile-edit-field select:focus { 
  outline: none; 
  border-color: var(--orange-focus, var(--orange)); 
}

.file-drop {
  border: 1.5px dashed var(--border); 
  border-radius: var(--radius-xs); 
  padding: 18px; 
  text-align: center;
  cursor: pointer; 
  margin-bottom: 12px; 
  font-family: var(--font-body); 
  font-size: 12px; 
  color: var(--text-muted);
  background: var(--surface2); 
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.file-drop:hover {
  border-color: var(--text-sub);
  color: var(--text);
}
.file-drop.has-file { 
  border-color: var(--orange); 
  color: var(--orange); 
  background: var(--orange-soft, var(--orange-12)); 
}




/* ── Loan Card ─────────────────────────────────────────────── */
.loan-card {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  overflow: hidden;
  margin-bottom: 14px;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: 0 4px 16px var(--wash-5);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.loan-card:active { transform: scale(0.98); }

/* Card Gradients (Using surface & wash layers for light/dark compatibility) */
.lc-quickbucks  { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }
.lc-mortgage     { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }
.lc-auto         { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }
.lc-business     { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }
.lc-education    { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }
.lc-personal     { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }
.lc-overdraft    { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }

/* Glossy overlay */
.loan-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--wash-4) 0%, var(--wash-1) 40%, transparent 65%);
  border-radius: inherit;
  pointer-events: none;
}
.loan-card::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--wash-2);
  right: -50px; bottom: -50px;
  pointer-events: none;
}
.loan-card-circle-2 {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  right: 18px; bottom: 8px;
  pointer-events: none;
}

/* ── Loan Card Header ──────────────────────────────────────── */
.lc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.lc-bank-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--paper);
}
.lc-bank-name span { color: var(--brass); }
.lc-type-pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--muted);
  text-transform: uppercase;
  border: 1px solid var(--hairline);
}

/* ── Loan Amount Block ─────────────────────────────────────── */
.lc-amount-row {
  margin-bottom: 14px;
}
.lc-amount-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted-2);
  margin-bottom: 3px;
}
.lc-amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--paper);
  letter-spacing: -0.5px;
  line-height: 1;
}
.lc-amount-sub {
  font-size: 11px;
  color: var(--muted-2);
  margin-top: 3px;
}

/* ── Progress Bar ──────────────────────────────────────────── */
.lc-progress-wrap {
  margin-bottom: 14px;
}
.lc-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.lc-progress-label {
  font-size: 9px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.lc-progress-val {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
}
.lc-progress-bar-bg {
  width: 100%;
  height: 5px;
  background: var(--wash-4);
  border-radius: 3px;
  overflow: hidden;
}
.lc-progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brass-soft), var(--brass));
  transition: width .6s ease;
}

/* ── Loan Card Footer ──────────────────────────────────────── */
.lc-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.lc-meta-item .lc-meta-label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted-2);
  margin-bottom: 2px;
}
.lc-meta-item .lc-meta-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--paper);
}

/* ── Status Badges ─────────────────────────────────────────── */
.lc-status-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}
.badge-pending    { background: var(--orange-10); color: var(--brass-soft); border: 1px solid var(--orange-20); }
.badge-approved   { background: var(--orange-20); color: var(--brass); border: 1px solid var(--brass); }
.badge-active     { background: var(--green-dim); color: var(--sage); border: 1px solid var(--green-soft); }
.badge-completed  { background: var(--wash-4); color: var(--muted); border: 1px solid var(--hairline); }
.badge-defaulted  { background: rgba(177,78,63,0.15); color: var(--rose); border: 1px solid rgba(177,78,63,0.3); }
.badge-rejected   { background: rgba(177,78,63,0.12); color: var(--rose); border: 1px solid rgba(177,78,63,0.2); }
.badge-written_off{ background: var(--wash-5); color: var(--muted-2); border: 1px solid var(--hairline); }

/* ── Loan Icon ─────────────────────────────────────────────── */
.lc-icon {
  width: 38px; height: 38px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--paper);
}

/* ── Inactive/Rejected Card Dim ────────────────────────────── */
.loan-card-dim { filter: grayscale(0.5); opacity: 0.75; }

/* ── Loan Action Pills ─────────────────────────────────────── */
.loan-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.loan-action-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.loan-action-pill i { font-size: 14px; }
.loan-action-pill:active { background: var(--surface-2); color: var(--paper); }
.lap-primary { color: var(--brass); border-color: var(--orange-20); }
.lap-green   { color: var(--sage); border-color: var(--green-soft); }

/* ── Summary Strip ─────────────────────────────────────────── */
.loans-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 16px 18px;
}
.lss-item {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  text-align: center;
}
.lss-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--paper);
  line-height: 1;
  margin-bottom: 4px;
}
.lss-label {
  font-size: 9px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .8px;
}

/* ── Empty State ───────────────────────────────────────────── */
.loans-empty-state {
  text-align: center;
  padding: 60px 24px 40px;
}
.les-icon {
  width: 80px; height: 80px;
  background: var(--orange-10);
  border: 2px dashed var(--orange-20);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 32px;
  color: var(--brass);
}
.les-title { font-size: 16px; font-weight: 700; color: var(--paper); margin-bottom: 8px; }
.les-sub   { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ── Skeleton ──────────────────────────────────────────────── */
.skeleton-loan {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  margin-bottom: 14px;
}
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── Page Header ───────────────────────────────────────────── */
.page-header-loans {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 10px;
}
.page-header-loans .back-btn {
  width: 36px; height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  font-size: 14px; cursor: pointer;
  text-decoration: none;
  transition: background .2s ease;
}
.page-header-loans .back-btn:hover { background: var(--wash-4); }
.page-header-loans h5 {
  flex: 1; margin: 0;
  font-size: 17px; font-weight: 800; color: var(--paper);
}
.apply-loan-btn {
  width: 36px; height: 36px;
  background: var(--brass);
  border: none; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--on-brass); font-size: 16px; cursor: pointer;
  transition: background .2s ease, transform .1s ease;
}
.apply-loan-btn:active { transform: scale(0.95); }

/* ── Tabs ──────────────────────────────────────────────────── */
.loans-tabs {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.loans-tabs::-webkit-scrollbar { display: none; }
.ltab {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--hairline);
  color: var(--muted); background: var(--surface-2);
  cursor: pointer; transition: all .2s;
  white-space: nowrap;
}
.ltab.active { background: var(--brass); color: var(--on-brass); border-color: var(--brass); }

/* ── Apply Modal ───────────────────────────────────────────── */
.modal-sheet { padding: 24px 20px; background: var(--surface); border-top: 1px solid var(--hairline); }

.loan-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}
.loan-type-option {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--surface-2);
}
.loan-type-option.selected,
.loan-type-option:active {
  border-color: var(--brass);
  background: var(--orange-10);
}
.lto-icon { font-size: 22px; margin-bottom: 6px; }
.lto-name { font-size: 11px; font-weight: 700; color: var(--paper); }
.lto-rate { font-size: 9px; color: var(--brass); margin-top: 2px; font-weight: 700; }

.apply-input {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  width: 100%;
  margin-bottom: 10px;
  outline: none;
  transition: border-color .2s;
}
.apply-input:focus { border-color: var(--brass); }
.apply-input option { background: var(--surface-2); color: var(--paper); }
.apply-input-label {
  font-size: 11px; color: var(--muted);
  margin-bottom: 5px; display: block;
}

/* Range input */
.apply-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: var(--wash-4);
  border-radius: 3px; outline: none;
  margin: 6px 0 4px;
}
.apply-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brass);
  cursor: pointer;
  box-shadow: 0 0 0 4px var(--orange-10);
}
.range-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--muted-2);
}

/* Monthly estimate pill */
.monthly-estimate {
  background: var(--orange-08);
  border: 1px solid var(--orange-20);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.me-label { font-size: 11px; color: var(--paper); }
.me-val   { font-size: 16px; font-weight: 800; color: var(--brass); }

.apply-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--brass);
  border: none; border-radius: var(--radius-md);
  color: var(--on-brass); font-size: 15px; font-weight: 700;
  cursor: pointer; margin-top: 8px; transition: opacity .2s, background .2s;
}
.apply-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.apply-submit-btn:active:not(:disabled) { opacity: 0.85; }

/* ── Detail Modal ──────────────────────────────────────────── */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.detail-row:last-child { border-bottom: none; }
.dr-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.dr-val   { font-size: 13px; font-weight: 600; color: var(--paper); }
.dr-val.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; }

/* Repayment schedule mini list */
.repay-schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  border: 1px solid var(--hairline);
}
.rsi-month { font-size: 11px; color: var(--muted); }
.rsi-amount { font-size: 12px; font-weight: 700; color: var(--paper); }
.rsi-status { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.rsi-due     { background: var(--orange-10); color: var(--brass); }
.rsi-paid    { background: var(--green-dim); color: var(--sage); }
.rsi-overdue { background: rgba(177,78,63,0.15); color: var(--rose); }

/* ── Repay Modal ───────────────────────────────────────────── */
.repay-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.repay-option.selected {
  border-color: var(--brass);
  background: var(--orange-08);
}
.repay-option-icon {
  width: 40px; height: 40px;
  background: var(--orange-10);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--brass);
  flex-shrink: 0;
}
.repay-option-info .ro-title { font-size: 13px; font-weight: 700; color: var(--paper); }
.repay-option-info .ro-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Notice banner */
.notice-banner {
  background: var(--orange-08);
  border: 1px solid var(--orange-20);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.nb-title { font-size: 11px; color: var(--brass); font-weight: 700; margin-bottom: 4px; }
.nb-body  { font-size: 11px; color: var(--paper); line-height: 1.7; }

/* Step indicator for apply modal */
.apply-steps {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
}
.apply-step-dot {
  height: 4px; flex: 1;
  border-radius: 2px;
  background: var(--wash-4);
  transition: background .3s;
}
.apply-step-dot.active { background: var(--brass); }


/* ── Modal Base & Overlays ─────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-sheet {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-radius: 20px 20px 0 0;
  padding: 16px 20px max(24px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px var(--wash-5);
  animation: slideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.modal-handle {
  width: 36px;
  height: 4px;
  background: var(--wash-5);
  border-radius: 99px;
  margin: 0 auto 20px;
}

.modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--paper);
  text-align: center;
  margin-bottom: 4px;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── OTP & PIN Input Wrap ──────────────────────────────────── */
.otp-wrap {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
}

.otp-input {
  width: 48px;
  height: 52px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--paper);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.otp-input:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--orange-10);
}

/* ── Common Action Buttons ─────────────────────────────────── */
.generate-btn {
  width: 100%;
  padding: 14px;
  background: var(--brass);
  color: var(--on-brass);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.generate-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* ── Account Blocked Error Modal ───────────────────────────── */
#accountBlockedModal .modal-sheet,
#accountBlockedModal > div {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-top: 1px solid var(--hairline-strong);
  border-radius: 24px 24px 0 0;
  padding: 16px 24px max(32px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 48px rgba(177, 78, 63, 0.2), 0 -2px 0 var(--rose);
  animation: slideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.blocked-icon-wrap {
  width: 64px;
  height: 64px;
  background: rgba(177, 78, 63, 0.12);
  border: 1px solid rgba(177, 78, 63, 0.3);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 20px;
  box-shadow: 0 4px 24px rgba(177, 78, 63, 0.2);
}

.blocked-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--paper);
  text-align: center;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
}

.blocked-divider {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose), transparent);
  margin: 0 auto 16px;
  border-radius: 99px;
}

#pinErrorMessage {
  color: var(--paper);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  background: rgba(177, 78, 63, 0.1);
  border: 1px solid rgba(177, 78, 63, 0.25);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 24px;
}

.btn-blocked-confirm {
  width: 100%;
  padding: 14px;
  background: var(--rose);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(177, 78, 63, 0.35);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

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

/* ── Receipt & Success Modal ───────────────────────────────── */
.receipt-check-circle {
  width: 52px;
  height: 52px;
  background: var(--green-dim);
  border: 1px solid var(--green-soft);
  color: var(--sage);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 12px;
}

.receipt-success-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--paper);
  margin-bottom: 4px;
}

.receipt-success-sub {
  font-size: 13px;
  color: var(--muted);
}

/* Internal Printable/White Receipt Card */
.receipt-card {
  background: #ffffff;
  color: #1a1a1a;
  border-radius: var(--radius-md);
  padding: 20px 18px;
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.receipt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.receipt-slash-wrap {
  text-align: right;
}

.receipt-slash {
  height: 2px;
  width: 30px;
  background: var(--brass);
  margin-left: auto;
  margin-bottom: 2px;
}

.receipt-tagline {
  font-size: 9px;
  text-transform: uppercase;
  color: #666666;
  letter-spacing: 0.5px;
}

.receipt-title-row {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
  margin-top: 10px;
}

.receipt-generated {
  font-size: 11px;
  color: #666666;
  margin-top: 2px;
  margin-bottom: 14px;
}

.receipt-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 12px 0;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px dashed #f0f0f0;
}

.rr-label {
  color: #666666;
}

.rr-value {
  font-weight: 600;
  color: #1a1a1a;
  text-align: right;
}

.rr-ref {
  font-family: var(--font-mono);
  font-size: 11px;
}

.rr-status {
  color: var(--sage);
  font-weight: 700;
}

.receipt-footer {
  font-size: 10px;
  color: #777777;
  text-align: center;
  line-height: 1.5;
}

/* Receipt Actions */
.receipt-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.receipt-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.receipt-action-btn:active {
  background: var(--wash-4);
}





/* ── Region Heading ────────────────────────────────────────── */
.region-block {
  margin: 0 0 18px;
  width: 100%;
}

#portfolioList {
    width: 100%;
}

.region-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
  margin-bottom: 10px;
}

.region-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--muted);
}

.show-more-btn {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--paper);
  cursor: pointer;
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.show-more-btn i {
  font-size: 9px;
  transition: transform .25s ease;
}

.show-more-btn.open i {
  transform: rotate(180deg);
}

/* ── Operator Grid ─────────────────────────────────────────── */
.operator-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.op-extra-wrap {
  display: contents;
}

.op-extra-wrap.hidden {
  display: none;
}

.operator-card {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--hairline);
  padding: 10px 4px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color .18s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.operator-card.selected,
.operator-card:active {
  border-color: var(--brass);
  background: var(--orange-10);
}

.op-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-white);
  letter-spacing: -.3px;
  flex-shrink: 0;
}

.op-name {
  font-size: 9.5px;
  color: var(--muted);
  text-align: center;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.op-flag {
  font-size: 14px;
  line-height: 1;
}

/* ── Selected Operator Banner ──────────────────────────────── */
.sel-op-banner {
  display: none;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--orange-20);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.sel-op-banner.show {
  display: flex;
}

.sob-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-white);
  flex-shrink: 0;
}

.sob-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--paper);
}

.sob-country {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.sob-clear {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted-2);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  transition: color .15s ease;
}

.sob-clear:hover {
  color: var(--paper);
}

/* ── Top-up Form Area ──────────────────────────────────────── */
.topup-form-area {
  display: none;
}

.topup-form-area.show {
  display: block;
}

.section-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 14px 0 6px;
}

.quick-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.qa-chip {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--paper);
  cursor: pointer;
  transition: all .18s ease;
}

.qa-chip.active {
  border-color: var(--brass);
  color: var(--brass);
  background: var(--orange-10);
}

/* ── Proceed Button Wrapper ────────────────────────────────── */
.proceed-wrap {
  margin-top: 20px;
}



/* ── Hero ─────────────────────────────────────────────────── */
.refer-hero {
  margin: 0 16px 20px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: 28px 20px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.refer-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--orange-10), transparent 60%);
  pointer-events: none;
}

.refer-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brass-soft), var(--brass));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--on-brass);
  margin: 0 auto 14px;
  box-shadow: 0 8px 24px var(--orange-20);
}

.refer-hero h2 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--paper);
  margin-bottom: 6px;
}

.refer-hero p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 0;
  line-height: 1.6;
}

.refer-hero .pts-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange-08);
  border: 1px solid var(--orange-20);
  border-radius: 99px;
  padding: 6px 14px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brass);
}

/* ── Code Box ─────────────────────────────────────────────── */
.refer-code-box {
  margin: 0 16px 16px;
  background: var(--surface);
  border: 1.5px dashed var(--orange-20);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  text-align: center;
  width: 100%;
}

.refer-code-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.refer-code {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--brass);
  letter-spacing: 4px;
  margin-bottom: 14px;
}

.refer-code-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.refer-action-btn {
  flex: 1;
  max-width: 130px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.refer-action-btn:hover {
  background: var(--wash-4);
}

.refer-action-btn.primary {
  background: var(--brass);
  color: var(--on-brass);
  border-color: var(--brass);
}

.refer-action-btn.primary:hover {
  background: var(--brass-soft);
}

/* ── How It Works ─────────────────────────────────────────── */
.how-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.how-step:last-child {
  border-bottom: none;
}

.how-step-num {
  width: 32px;
  height: 32px;
  border-radius: 99px;
  flex-shrink: 0;
  background: var(--orange-10);
  border: 1px solid var(--orange-20);
  color: var(--brass);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 2px;
}

.how-step-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Stats Row ────────────────────────────────────────────── */
.refer-stats {
  display: flex;
  gap: 10px;
  margin: 0 16px 16px;
  width: 100%;
}

.refer-stat {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: center;
}

.refer-stat-val {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--paper);
}

.refer-stat-label {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Referral History ─────────────────────────────────────── */
.ref-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
}

.ref-row:last-child {
  border-bottom: none;
}

.ref-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.ref-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
}

.ref-date {
  font-size: 11px;
  color: var(--muted-2);
  margin-top: 1px;
}

.ref-pts {
  font-size: 13px;
  font-weight: 700;
  color: var(--sage);
  white-space: nowrap;
}

.ref-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 2px;
}

.ref-status.pending {
  background: var(--orange-10);
  color: var(--brass-soft);
  border: 1px solid var(--orange-20);
}

.ref-status.earned {
  background: var(--green-dim);
  color: var(--sage);
  border: 1px solid var(--green-soft);
}

.section-card-plain {
  margin: 0 16px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.acc-section-title {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 18px 16px 8px;
}

/* ── Shimmer Loading ──────────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.empty-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--muted);
  font-size: 13px;
}

.empty-state i {
  font-size: 32px;
  color: var(--muted-2);
  margin-bottom: 10px;
  display: block;
}



/* ═══════════════════════════════════════════════════════════════════
   SUPPORT / HELP CENTER PAGE
   Consolidated from a page-level <style> block.
   NOTE: modal-overlay rules dropped to prevent conflicts with top-level modal sheet styles.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────── */
.support-hero {
  margin: 0 16px 16px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 60%, var(--surface) 100%);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: 22px 20px 20px;
  position: relative;
  overflow: hidden;
}

.support-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, var(--wash-5), transparent 60%);
  pointer-events: none;
}

.support-hero h2 {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--paper);
  margin-bottom: 4px;
}

.support-hero p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.status-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-dim);
  border: 1px solid var(--green-soft);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sage);
  margin-top: 10px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  animation: pdot 1.8s infinite;
}

@keyframes pdot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ── Quick Actions ────────────────────────────────────────── */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0 16px 16px;
}

.qa-btn {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 15px 14px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  text-decoration: none;
}

.qa-btn:hover {
  background: var(--surface-2);
}

.qa-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.qa-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
}

.qa-sub {
  font-size: 11px;
  color: var(--muted);
}

/* ── Chat Window ──────────────────────────────────────────── */
.chat-window {
  margin: 0 16px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.chat-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--wash-5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brass);
  font-size: 15px;
  flex-shrink: 0;
}

.chat-messages {
  padding: 12px;
  min-height: 170px;
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.chat-bubble {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.bubble-agent {
  background: var(--surface-2);
  color: var(--paper);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}

.bubble-user {
  background: var(--brass);
  color: var(--on-brass);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.bubble-time {
  font-size: 10px;
  opacity: 0.65;
  margin-top: 3px;
}

.chat-input-row {
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.chat-input-row input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 99px;
  padding: 9px 16px;
  color: var(--paper);
  font-size: 13px;
  outline: none;
  transition: border-color .2s ease;
}

.chat-input-row input:focus {
  border-color: var(--brass);
}

.chat-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brass);
  border: none;
  color: var(--on-brass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s ease, opacity .15s ease;
}

.chat-send:active {
  transform: scale(0.95);
}

.chat-send:hover {
  transform: scale(1.05);
}

/* ── Tickets ──────────────────────────────────────────────── */
.ticket-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background .2s ease;
}

.ticket-row:last-child {
  border-bottom: none;
}

.ticket-row:hover {
  background: var(--surface-2);
}

.ticket-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.ticket-subject {
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
}

.ticket-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.ticket-status {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.s-open {
  background: var(--orange-10);
  color: var(--brass-soft);
  border: 1px solid var(--orange-20);
}

.s-progress {
  background: var(--wash-5);
  color: var(--paper);
  border: 1px solid var(--hairline);
}

.s-resolved {
  background: var(--green-dim);
  color: var(--sage);
  border: 1px solid var(--green-soft);
}

.s-closed {
  background: var(--wash-4);
  color: var(--muted-2);
}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid var(--hairline);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-q {
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: background .2s ease;
}

.faq-q:hover {
  background: var(--surface-2);
}

.faq-q i {
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.faq-q.open i {
  transform: rotate(180deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  padding: 0 16px;
}

.faq-a.open {
  max-height: 300px;
  padding: 0 16px 14px;
}

/* ── Contact Rows ─────────────────────────────────────────── */
.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background .2s ease;
  text-decoration: none;
}

.contact-row:last-child {
  border-bottom: none;
}

.contact-row:hover {
  background: var(--surface-2);
}

.contact-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* ── New Ticket Form ──────────────────────────────────────── */
.ticket-field {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin-bottom: 10px;
  transition: border-color .2s ease;
}

.ticket-field label {
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ticket-field input,
.ticket-field select,
.ticket-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--paper);
  font-size: 14px;
  outline: none;
  resize: none;
}

.ticket-field:focus-within {
  border-color: var(--brass);
}

/* ── Star Rating ──────────────────────────────────────────── */
.star-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 10px 0;
}

.star-btn {
  font-size: 26px;
  cursor: pointer;
  color: var(--muted-2);
  transition: color 0.15s ease, transform 0.15s ease;
}

.star-btn.lit {
  color: var(--brass);
}

.star-btn:hover {
  transform: scale(1.2);
}

/* ── Utility Cards & Empty States ─────────────────────────── */
.section-card-plain {
  margin: 0 16px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.acc-section-title {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 16px 16px 8px;
}

.shimmer {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.empty-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--muted);
  font-size: 13px;
}

.empty-state i {
  font-size: 32px;
  color: var(--muted-2);
  margin-bottom: 10px;
  display: block;
}