/* CVC Wallet full Option B redesign.
   This file intentionally sits after the legacy stylesheet and owns the final UI. */

:root {
  color-scheme: light;
  --cw-bg: #f7faf6;
  --cw-bg-2: #eef8ef;
  --cw-panel: rgba(255, 255, 255, .86);
  --cw-panel-solid: #ffffff;
  --cw-ink: #0a1424;
  --cw-text: #253247;
  --cw-muted: #738096;
  --cw-line: rgba(12, 32, 24, .10);
  --cw-line-strong: rgba(12, 32, 24, .16);
  --cw-green: #087a4d;
  --cw-green-2: #0aa363;
  --cw-lime: #a9ff4d;
  --cw-mint: #e9f8ed;
  --cw-red: #ef4444;
  --cw-yellow: #f8c33c;
  --cw-blue: #1b65d8;
  --cw-radius: 18px;
  --cw-radius-lg: 24px;
  --cw-shadow: 0 22px 70px rgba(14, 31, 24, .08);
  --cw-shadow-soft: 0 12px 34px rgba(14, 31, 24, .05);
  --cw-content: 1200px;
  --cw-sidebar: 224px;
  --card-scroll-y: 0px;
  --card-scroll-x: 0px;
  --card-scroll-rotate: -8deg;
  --card-scroll-flip: 0deg;
  --card-scroll-scale: 1;
}

/* Final public/auth rebuild from the supplied Option B references. */
.homepage-optionb {
  padding: 22px;
  background:
    radial-gradient(circle at 14% 2%, rgba(188, 255, 111, .25), transparent 22rem),
    radial-gradient(circle at 85% 12%, rgba(26, 173, 112, .16), transparent 24rem),
    #f4f7f3;
}

.home-frame {
  width: min(1280px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(15, 31, 25, .08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 24%, rgba(189, 255, 140, .24), transparent 24rem),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,254,251,.96));
  box-shadow: 0 24px 70px rgba(15, 31, 25, .08);
}

.homepage-optionb .topbar,
.homepage-optionb .home-hero,
.homepage-optionb .home-story,
.homepage-optionb .wallet-support-strip,
.homepage-optionb .merchant-strip,
.homepage-optionb .steps-band,
.homepage-optionb .feature-grid,
.homepage-optionb .security-band {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.homepage-optionb .home-topbar {
  height: 82px;
  padding: 0 44px;
  border-bottom: 1px solid rgba(15, 31, 25, .08);
}

.homepage-optionb .top-menu {
  gap: 44px;
  color: #172033;
  font-size: 12px;
  font-weight: 850;
}

.homepage-optionb .nav-pill,
.homepage-optionb .primary,
.homepage-optionb .button-link {
  min-height: 38px;
  border-radius: 999px;
  padding: 9px 18px;
}

.homepage-optionb .primary,
.auth-optionb .auth-form-card button[type="submit"] {
  color: #fff;
  background: linear-gradient(180deg, #0c9a61, #057447);
  box-shadow: 0 13px 28px rgba(5, 116, 71, .24), inset 0 1px 0 rgba(255,255,255,.22);
}

.home-hero {
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .88fr);
  gap: 34px;
  align-items: center;
  padding: 76px 44px 52px;
}

.homepage-optionb .hero-kicker {
  margin-bottom: 18px;
  color: #07834f;
  background: #eafff0;
  border-color: rgba(7, 131, 79, .12);
  box-shadow: none;
}

.homepage-optionb .hero-copy h1 {
  max-width: 620px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 7.2vw, 92px);
  font-weight: 500;
  line-height: .94;
}

.homepage-optionb .hero-copy h1 em {
  color: #087a4d;
  font-style: normal;
}

.homepage-optionb .hero-copy > p {
  max-width: 580px;
  margin: 22px 0 0;
  color: #42516a;
  font-size: 16px;
  line-height: 1.65;
}

.homepage-optionb .hero-points {
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.homepage-optionb .hero-points li {
  min-height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.homepage-optionb .hero-points .ico {
  width: 30px;
  height: 30px;
  padding: 8px;
  border-radius: 999px;
  color: #087a4d;
  background: #e9f8ed;
}

.home-card-scene {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
}

.home-card-scene::before,
.home-card-scene::after {
  content: "";
  position: absolute;
  width: 420px;
  aspect-ratio: 1;
  border: 1px solid rgba(8, 122, 77, .14);
  border-radius: 999px;
  transform: rotate(-18deg);
}

.home-card-scene::after {
  width: 300px;
  opacity: .68;
}

.home-floating-card {
  position: relative;
  z-index: 2;
  width: min(420px, 92%);
  filter: drop-shadow(0 30px 46px rgba(7, 63, 50, .20));
  animation: homeCardFloat 5.2s ease-in-out infinite;
}

.home-floating-card .card-art {
  aspect-ratio: 1.586 / 1;
  min-height: auto;
  transform: rotate(-11deg);
}

@keyframes homeCardFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(.2deg); }
  50% { transform: translate3d(0, -14px, 0) rotate(-1.4deg); }
}

.home-story {
  padding: 30px 44px 32px;
  border-top: 1px solid rgba(15, 31, 25, .08);
}

.home-story .section-title {
  margin-bottom: 18px;
}

.home-story .section-title h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.story-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.story-board article {
  min-height: 154px;
  padding: 18px;
  border: 1px solid rgba(15, 31, 25, .08);
  border-radius: 12px;
  background:
    radial-gradient(circle at 80% 20%, rgba(188,255,111,.20), transparent 55%),
    rgba(255,255,255,.86);
  box-shadow: 0 16px 34px rgba(15, 31, 25, .045);
}

.story-board span {
  color: #087a4d;
  font-size: 12px;
  font-weight: 950;
}

.story-board p,
.story-board li {
  color: #43516a;
  font-size: 12px;
  line-height: 1.45;
}

.story-board ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.story-board li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-card {
  width: 150px;
  margin: 12px auto 0;
  padding: 34px 14px 14px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #064837, #0a9362);
  font-weight: 900;
  box-shadow: 0 18px 32px rgba(7, 63, 50, .15);
}

.mini-card.tilt {
  transform: rotate(7deg);
}

.wallet-support-strip,
.merchant-strip {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) 1.2fr;
  gap: 24px;
  align-items: center;
  padding: 28px 44px;
  border-top: 1px solid rgba(15, 31, 25, .08);
}

.wallet-support-strip h2,
.merchant-strip h2 {
  margin: 0;
  font-size: 22px;
}

.wallet-support-strip > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 12px;
}

.pay-logo,
.merchant-rail span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 31, 25, .08);
  border-radius: 999px;
  padding: 10px 18px;
  color: #111827;
  background: rgba(255,255,255,.86);
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(15, 31, 25, .045);
}

.google-pay { color: #1a73e8; }
.apple-pay { color: #111827; }
.visa-pay { color: #174ea6; }
.mc-pay { color: #e15d22; }

.merchant-strip p {
  max-width: 460px;
  margin: 8px 0 0;
  color: #526078;
}

.merchant-logo-slider {
  overflow: hidden;
  border-radius: 18px;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.merchant-rail {
  width: max-content;
  display: flex;
  gap: 12px;
  animation: merchantRail 24s linear infinite;
}

.merchant-rail span {
  min-width: 138px;
}

@keyframes merchantRail {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.homepage-optionb .steps-band,
.homepage-optionb .feature-grid,
.homepage-optionb .security-band {
  border-radius: 0;
  padding-inline: 44px;
}

.homepage-optionb .feature-grid {
  padding-top: 30px;
  padding-bottom: 34px;
}

.homepage-optionb .security-band {
  margin-bottom: 0;
}

.auth-optionb {
  position: relative;
  min-height: 100vh;
  grid-template-columns: minmax(260px, .78fr) minmax(420px, 1.18fr);
  gap: 46px;
  padding: clamp(30px, 5vw, 68px);
  background:
    radial-gradient(circle at 16% 18%, rgba(188,255,111,.18), transparent 23rem),
    radial-gradient(circle at 86% 68%, rgba(7, 131, 79, .20), transparent 30rem),
    linear-gradient(145deg, #fbfffc, #e7f7ed);
  overflow: hidden;
}

.auth-optionb::before,
.auth-optionb::after {
  content: "";
  position: absolute;
  inset: 5% auto auto 6%;
  width: 66vw;
  height: 66vw;
  max-width: 920px;
  max-height: 920px;
  border: 1px solid rgba(8, 122, 77, .10);
  border-radius: 42% 58% 55% 45%;
  transform: rotate(-18deg);
  pointer-events: none;
}

.auth-optionb::after {
  inset: auto -18% -34% auto;
  transform: rotate(22deg);
}

.auth-brand-panel,
.auth-panel {
  position: relative;
  z-index: 1;
}

.auth-form-card {
  width: min(100%, 470px);
  padding: 30px 34px 32px;
  border: 1px solid rgba(15, 31, 25, .08);
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 30px 90px rgba(15, 31, 25, .14);
}

.auth-form-card h2 {
  margin-bottom: 6px;
  font-size: 25px;
}

.auth-smart-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.auth-form-grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-smart-form label {
  display: block;
}

.auth-smart-form input {
  min-height: 46px;
  border-radius: 8px;
  background: rgba(255,255,255,.94);
}

.auth-smart-form input::placeholder {
  color: #7b8797;
  opacity: 1;
}

.auth-smart-form input:focus::placeholder {
  opacity: 0;
}

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.auth-consent a {
  color: #087a4d;
  font-weight: 900;
}

.auth-switch {
  margin-top: 18px;
  text-align: center;
}

.panda-watch {
  --eye-x: 0px;
  --eye-y: 0px;
  position: relative;
  width: 92px;
  height: 72px;
  margin: -6px auto 14px;
}

.panda-ear,
.panda-face {
  position: absolute;
  background: #111827;
}

.panda-ear {
  top: 3px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

.panda-ear.left { left: 12px; }
.panda-ear.right { right: 12px; }

.panda-face {
  inset: 10px 8px 0;
  border-radius: 48% 48% 44% 44%;
  background: #fff;
  border: 2px solid #111827;
  box-shadow: 0 10px 24px rgba(15, 31, 25, .08);
}

.panda-eye {
  position: absolute;
  top: 24px;
  width: 18px;
  height: 20px;
  border-radius: 999px;
  background: #111827;
}

.panda-eye::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 6px;
  left: 6px;
  border-radius: 999px;
  background: #fff;
  transform: translate(var(--eye-x), var(--eye-y));
  transition: transform .08s ease;
}

.panda-eye.left { left: 20px; }
.panda-eye.right { right: 20px; }

.panda-nose {
  position: absolute;
  left: 50%;
  top: 43px;
  width: 11px;
  height: 8px;
  border-radius: 999px;
  background: #111827;
  transform: translateX(-50%);
}

.panda-hand {
  position: absolute;
  top: 54px;
  width: 28px;
  height: 22px;
  border-radius: 999px 999px 8px 8px;
  background: #111827;
  opacity: 0;
  transform: translateY(14px);
  transition: transform .16s ease, opacity .16s ease;
}

.panda-hand.left { left: 12px; }
.panda-hand.right { right: 12px; }

.panda-watch.is-password .panda-hand {
  opacity: 1;
  transform: translateY(-19px);
}

.panda-watch.is-password .panda-eye::after {
  transform: translate(0, 0);
}

.card-slider {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(210px, 260px));
  overflow: visible;
  overscroll-behavior-inline: auto;
  scrollbar-width: none;
}

.card-slider::-webkit-scrollbar {
  display: none;
}

@media (max-width: 920px) {
  .homepage-optionb {
    padding: 12px;
  }

  .home-frame {
    border-radius: 14px;
  }

  .homepage-optionb .home-topbar {
    height: auto;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
  }

  .homepage-optionb .top-menu,
  .homepage-optionb .top-actions {
    justify-content: start;
    flex-wrap: wrap;
  }

  .home-hero,
  .wallet-support-strip,
  .merchant-strip {
    grid-template-columns: 1fr;
    padding-inline: 22px;
  }

  .homepage-optionb .hero-points,
  .story-board {
    grid-template-columns: 1fr;
  }

  .wallet-support-strip > div {
    justify-content: start;
  }

  .auth-optionb {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .homepage-optionb .hero-copy h1 {
    font-size: 52px;
  }

  .home-hero,
  .home-story,
  .wallet-support-strip,
  .merchant-strip,
  .homepage-optionb .steps-band,
  .homepage-optionb .feature-grid,
  .homepage-optionb .security-band {
    padding-inline: 16px;
  }

  .auth-form-grid.two {
    grid-template-columns: 1fr;
  }

  .auth-form-card {
    padding: 24px 20px;
  }
}

/* Final gift/account cleanup overrides. Keep page shells unframed. */
.gift-market-optionb,
.gift-checkout-optionb,
.account-optionb:not(.admin-account-page) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gift-market-main,
.gift-checkout-main {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gift-market-main > .panel-title {
  margin-bottom: 22px;
}

.gift-market-main .gift-filter-row {
  margin-bottom: 20px;
}

.gift-market-main .small-title {
  align-items: center;
  margin: 24px 0 18px;
  padding: 0;
}

.gift-market-main .small-title h3 {
  font-size: 18px;
}

.gift-market-main .small-title a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-left: 18px;
  color: #087a4d;
  font-weight: 900;
}

.gift-card.optionb {
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

.gift-card.optionb:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(15, 23, 42, .10);
}

.gift-checkout-optionb {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 28px;
}

.gift-checkout-main,
.gift-checkout-side article {
  box-shadow: none;
}

.gift-checkout-main .checkout-product-card,
.gift-checkout-main .before-pay,
.gift-checkout-side article {
  border-color: rgba(15, 23, 42, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
}

.account-optionb:not(.admin-account-page) {
  grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr);
  gap: 18px;
}

.account-optionb:not(.admin-account-page) .account-password-card {
  grid-column: 1 / -1;
}

.account-optionb:not(.admin-account-page) .account-profile-card {
  grid-row: span 2;
}

.account-optionb:not(.admin-account-page) .profile-large > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.account-optionb:not(.admin-account-page) .profile-large strong,
.account-optionb:not(.admin-account-page) .profile-large span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.account-optionb:not(.admin-account-page) .account-profile-card > .button-link {
  margin: 18px 0 20px;
}

.account-optionb:not(.admin-account-page) .account-profile-card h3 {
  margin: 0 0 12px;
}

.account-optionb:not(.admin-account-page) .copy-lines.compact {
  margin-top: 8px;
}

.account-optionb:not(.admin-account-page) .account-password-card.form-panel {
  grid-template-columns: minmax(220px, .32fr) minmax(0, 1fr);
  align-items: end;
}

.account-optionb:not(.admin-account-page) .account-password-card.form-panel form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

:root.dark .gift-market-optionb,
:root.dark .gift-checkout-optionb,
:root.dark .account-optionb:not(.admin-account-page),
:root.dark .gift-market-main,
:root.dark .gift-checkout-main {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 980px) {
  .gift-checkout-optionb,
  .account-optionb:not(.admin-account-page),
  .account-optionb:not(.admin-account-page) .account-password-card.form-panel,
  .account-optionb:not(.admin-account-page) .account-password-card.form-panel form {
    grid-template-columns: 1fr;
  }

  .account-optionb:not(.admin-account-page) .account-password-card,
  .account-optionb:not(.admin-account-page) .account-referral-card,
  .account-optionb:not(.admin-account-page) .account-security-card,
  .account-optionb:not(.admin-account-page) .account-edit-card {
    grid-column: auto;
  }
}

.deposit-verifier-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(8px);
}

.deposit-verifier-overlay article {
  width: min(460px, 100%);
  padding: 34px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  background: rgba(3, 7, 18, .78);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
}

.deposit-verifier-overlay h2 {
  margin: 18px 0 10px;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: 0;
}

.deposit-verifier-overlay p {
  margin: 0 auto 16px;
  max-width: 34ch;
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  line-height: 1.55;
}

.deposit-verifier-overlay small {
  display: inline-flex;
  padding: 8px 12px;
  color: rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}

.deposit-verifier-progress {
  height: 8px;
  margin: 20px 0 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}

.deposit-verifier-progress span {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #a3e635);
  transition: width .35s ease;
}

.deposit-verifier-spinner {
  width: 74px;
  height: 74px;
  margin: 0 auto;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, .18);
  border-top-color: #22c55e;
  animation: deposit-spin .9s linear infinite;
}

.deposit-verifier-overlay.is-soft-pending article {
  background: linear-gradient(145deg, rgba(2, 132, 85, .24), rgba(15, 23, 42, .82));
}

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

/* Launch readiness guard: animated rails and compact auth panels must never
   create page-level horizontal scroll on phones/tablets. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.merchant-strip,
.merchant-logo-slider {
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 920px) {
  .auth-optionb,
  .auth-brand-panel,
  .auth-panel,
  .auth-form-card {
    min-width: 0;
    max-width: 100%;
  }

  .auth-form-card {
    width: min(100%, 520px);
  }
}

@media (max-width: 560px) {
  .homepage-optionb .hero-copy h1 {
    font-size: clamp(42px, 13vw, 58px);
    overflow-wrap: anywhere;
  }

  .homepage-optionb .home-topbar,
  .home-hero,
  .home-story,
  .wallet-support-strip,
  .merchant-strip,
  .homepage-optionb .steps-band,
  .homepage-optionb .feature-grid,
  .homepage-optionb .security-band {
    padding-inline: 16px;
  }
}

.withdrawal-admin-panel .withdrawal-table .row {
  grid-template-columns: minmax(180px, 1fr) minmax(170px, .9fr) minmax(140px, .75fr) minmax(220px, 1.15fr) minmax(130px, .65fr) minmax(230px, 1.15fr);
  align-items: start;
}

.withdrawal-row code {
  display: block;
  max-width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 10px;
  background: rgba(15, 23, 42, .04);
  color: var(--cw-ink);
  white-space: normal;
  overflow-wrap: anywhere;
}

.withdrawal-actions,
.reject-withdrawal-form {
  display: grid;
  gap: 8px;
}

.reject-withdrawal-form input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--cw-line);
  border-radius: 10px;
  padding: 0 10px;
  background: rgba(255, 255, 255, .9);
  color: var(--cw-ink);
}

.withdrawal-actions form {
  margin: 0;
}

.withdrawal-actions button {
  width: 100%;
  justify-content: center;
}

@media (max-width: 1180px) {
  .withdrawal-admin-panel .withdrawal-table .row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Gift/account cleanup: avoid double framed panels and keep spacing readable. */
.gift-market-optionb,
.gift-checkout-optionb,
.account-optionb:not(.admin-account-page) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gift-market-main,
.gift-checkout-main {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gift-market-main > .panel-title {
  margin-bottom: 22px;
}

.gift-market-main .gift-filter-row {
  margin-bottom: 20px;
}

.gift-market-main .small-title {
  align-items: center;
  margin: 24px 0 18px;
  padding: 0;
}

.gift-market-main .small-title h3 {
  font-size: 18px;
}

.gift-market-main .small-title a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-left: 18px;
  color: #087a4d;
  font-weight: 900;
}

.gift-card.optionb {
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

.gift-card.optionb:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(15, 23, 42, .10);
}

.gift-checkout-optionb {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 28px;
}

.gift-checkout-main,
.gift-checkout-side article {
  box-shadow: none;
}

.gift-checkout-main .checkout-product-card,
.gift-checkout-main .before-pay,
.gift-checkout-side article {
  border-color: rgba(15, 23, 42, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
}

.account-optionb:not(.admin-account-page) {
  grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr);
  gap: 18px;
}

.account-optionb:not(.admin-account-page) .account-password-card {
  grid-column: 1 / -1;
}

.account-optionb:not(.admin-account-page) .account-profile-card {
  grid-row: span 2;
}

.account-optionb:not(.admin-account-page) .profile-large > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.account-optionb:not(.admin-account-page) .profile-large strong,
.account-optionb:not(.admin-account-page) .profile-large span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.account-optionb:not(.admin-account-page) .account-profile-card > .button-link {
  margin: 18px 0 20px;
}

.account-optionb:not(.admin-account-page) .account-profile-card h3 {
  margin: 0 0 12px;
}

.account-optionb:not(.admin-account-page) .copy-lines.compact {
  margin-top: 8px;
}

.account-optionb:not(.admin-account-page) .account-password-card.form-panel {
  grid-template-columns: minmax(220px, .32fr) minmax(0, 1fr);
  align-items: end;
}

.account-optionb:not(.admin-account-page) .account-password-card.form-panel form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

:root.dark .gift-market-optionb,
:root.dark .gift-checkout-optionb,
:root.dark .account-optionb:not(.admin-account-page),
:root.dark .gift-market-main,
:root.dark .gift-checkout-main {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 980px) {
  .gift-checkout-optionb,
  .account-optionb:not(.admin-account-page),
  .account-optionb:not(.admin-account-page) .account-password-card.form-panel,
  .account-optionb:not(.admin-account-page) .account-password-card.form-panel form {
    grid-template-columns: 1fr;
  }

  .account-optionb:not(.admin-account-page) .account-password-card,
  .account-optionb:not(.admin-account-page) .account-referral-card,
  .account-optionb:not(.admin-account-page) .account-security-card,
  .account-optionb:not(.admin-account-page) .account-edit-card {
    grid-column: auto;
  }
}

/* Live flow fixes: Mobile TopUp + gift checkout */
.app aside {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 16px;
  overflow-y: auto;
  color: var(--cw-ink);
  border-right: 1px solid var(--cw-line);
  box-shadow: inset -1px 0 rgba(255, 255, 255, .45);
  backdrop-filter: blur(18px);
}

.app:not(.admin) aside {
  height: calc(100vh - 28px);
  top: 14px;
  padding: 30px 22px 22px;
}

.gift-market-main,
.gift-checkout-main,
.gift-checkout-side article {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.topup-optionb {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 320px;
  gap: 52px;
  align-items: start;
  min-height: calc(100vh - 86px);
  padding: 34px 54px 54px;
  overflow: hidden;
}

.topup-optionb::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 54% 20%, rgba(16, 185, 129, .14), transparent 16rem),
    radial-gradient(circle at 86% 6%, rgba(167, 243, 208, .28), transparent 18rem);
}

.topup-optionb > * {
  position: relative;
}

.topup-flow-card {
  max-width: 620px;
}

.topup-country-filter.optionb,
.topup-form.optionb {
  display: grid;
  gap: 22px;
}

.topup-country-filter.optionb {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  margin: 34px 0 22px;
}

.topup-country-filter.optionb button {
  min-height: 56px;
  padding-inline: 24px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 16px 34px rgba(5, 120, 70, .18);
}

.operator-select-wrap.compact {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 5px 14px 5px 6px;
  border: 1px solid var(--cw-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

.operator-select-wrap.compact select {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  font-weight: 800;
  color: var(--cw-ink);
  appearance: none;
}

.operator-select-wrap.compact .ico:last-child {
  width: 18px;
  height: 18px;
  color: #64748b;
}

.operator-selected-logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16, 185, 129, .16);
  border-radius: 12px;
  background: rgba(220, 252, 231, .72);
  overflow: hidden;
}

.operator-selected-logo img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.currency-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.currency-input b {
  color: var(--cw-ink);
  font-size: 15px;
}

.topup-summary-card {
  margin-top: 78px;
}

.topup-summary-card footer {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--cw-line);
  color: #64748b;
  line-height: 1.5;
}

.topup-summary-card footer .ico {
  flex: 0 0 auto;
  color: var(--cw-primary);
}

.gift-checkout-side [data-provider-fee] {
  color: #0f766e;
}

.location-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.location-fields label:first-child {
  grid-column: 1 / -1;
}

.location-fields select[hidden],
.location-fields input[hidden] {
  display: none;
}

.location-fields select,
.location-fields input {
  width: 100%;
}

@media (max-width: 980px) {
  .topup-optionb {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 20px;
  }

  .topup-flow-card {
    max-width: none;
  }

  .topup-summary-card {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .topup-country-filter.optionb {
    grid-template-columns: 1fr;
  }

  .location-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .dashboard-balance-card .balance-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .dashboard-balance-card a {
    width: 100%;
  }
}

/* Premium homepage conversion sections */
.homepage-optionb .premium-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, .74fr) minmax(0, 1.26fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: stretch;
  margin-top: 18px;
  padding: clamp(34px, 5vw, 66px);
  overflow: hidden;
  color: #fff;
  border-radius: 0;
  background:
    radial-gradient(circle at 8% 8%, rgba(188, 255, 111, .28), transparent 19rem),
    radial-gradient(circle at 88% 20%, rgba(34, 197, 94, .22), transparent 20rem),
    linear-gradient(135deg, #042d24, #07543c 56%, #0a7d50);
}

.homepage-optionb .premium-flow::before,
.homepage-optionb .premium-security::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.premium-flow .flow-copy,
.premium-security .security-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 16px;
}

.premium-flow .flow-copy > span,
.premium-security .security-copy > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  color: #baff62;
  background: rgba(186, 255, 98, .12);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.premium-flow .flow-copy h2,
.premium-security .security-copy h2 {
  max-width: 520px;
  margin: 0;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: .96;
  letter-spacing: 0;
}

.premium-flow .flow-copy p,
.premium-security .security-copy p {
  max-width: 520px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 17px;
  line-height: 1.65;
}

.flow-cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  padding: 0 18px;
  color: #063625;
  background: linear-gradient(135deg, #baff62, #5ee57b);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
  font-weight: 950;
  text-decoration: none;
}

.flow-cta .ico {
  width: 19px;
  height: 19px;
}

.homepage-optionb .premium-flow ol {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.homepage-optionb .premium-flow li {
  position: relative;
  min-height: 230px;
  padding: 24px 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 24px 44px rgba(0,0,0,.10);
  backdrop-filter: blur(16px);
}

.homepage-optionb .premium-flow li:not(:last-child)::after {
  right: -27px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #063625;
  background: #baff62;
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(0,0,0,.20);
}

.homepage-optionb .premium-flow b {
  width: 54px;
  height: 54px;
  color: #053827;
  background: linear-gradient(135deg, #baff62, #6ee987);
  box-shadow: 0 16px 30px rgba(0,0,0,.16);
}

.homepage-optionb .premium-flow strong {
  color: #fff;
  font-size: 17px;
}

.homepage-optionb .premium-flow li p {
  color: rgba(255,255,255,.76);
  font-size: 14px;
  line-height: 1.55;
}

.homepage-optionb .premium-security {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
  margin: 24px 0 0;
  padding: clamp(34px, 5vw, 66px);
  overflow: hidden;
  color: #fff;
  border-radius: 0;
  background:
    radial-gradient(circle at 85% 10%, rgba(186,255,98,.22), transparent 21rem),
    linear-gradient(135deg, #052a23, #073f35 55%, #0b6f4d);
}

.homepage-optionb .premium-security .security-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.homepage-optionb .premium-security .security-list span {
  min-height: 118px;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  gap: 6px 14px;
  align-content: center;
  padding: 18px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 18px 36px rgba(0,0,0,.10);
  backdrop-filter: blur(14px);
}

.homepage-optionb .premium-security .security-list span .ico {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  padding: 12px;
  color: #063625;
  border-radius: 15px;
  background: linear-gradient(135deg, #baff62, #62df82);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}

.homepage-optionb .premium-security .security-list b {
  color: #fff;
  font-size: 16px;
  font-weight: 950;
}

.homepage-optionb .premium-security .security-list small {
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.premium-security .security-cta {
  color: #073827;
}

@media (max-width: 1180px) {
  .homepage-optionb .premium-flow,
  .homepage-optionb .premium-security {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .homepage-optionb .premium-flow ol,
  .homepage-optionb .premium-security .security-list {
    grid-template-columns: 1fr;
  }

  .homepage-optionb .premium-flow li:not(:last-child)::after {
    display: none;
  }
}

/* User-requested homepage widening and brand-logo polish. */
.homepage-optionb {
  padding: 10px;
}

.home-frame {
  width: calc(100vw - 20px);
  max-width: 1760px;
}

.homepage-optionb .home-topbar {
  padding-inline: clamp(24px, 4.2vw, 78px);
}

.homepage-optionb .top-menu a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.homepage-optionb .top-menu .ico {
  width: 15px;
  height: 15px;
  color: #087a4d;
}

.home-hero,
.home-story,
.wallet-support-strip,
.merchant-strip,
.homepage-optionb .steps-band,
.homepage-optionb .feature-grid,
.homepage-optionb .security-band {
  padding-inline: clamp(24px, 4.2vw, 78px);
}

.home-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr);
}

.homepage-optionb .hero-copy h1 {
  max-width: 760px;
  font-size: clamp(66px, 7.8vw, 118px);
}

.homepage-optionb .hero-copy > p {
  max-width: 700px;
  font-size: 18px;
}

.homepage-optionb .hero-points b {
  font-size: 13px;
}

.homepage-optionb .hero-points small {
  font-size: 12px;
}

.home-card-scene {
  min-height: 430px;
}

.home-floating-card {
  width: min(500px, 94%);
}

.wallet-support-strip h2,
.merchant-strip h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
}

.wallet-support-strip h2 .ico,
.merchant-strip h2 .ico {
  width: 26px;
  height: 26px;
  padding: 6px;
  color: #087a4d;
  background: #e9f8ed;
  border-radius: 999px;
}

.pay-logo,
.merchant-rail span {
  gap: 10px;
  min-height: 52px;
  padding: 12px 20px;
  font-size: 14px;
}

.pay-logo img,
.merchant-rail img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 28px;
}

.merchant-rail span {
  min-width: 176px;
  justify-content: flex-start;
}

.forgot-link {
  justify-self: end;
  margin-top: -4px;
  color: #087a4d;
  font-size: 12px;
  font-weight: 900;
}

.auth-wide-link {
  width: 100%;
  margin-top: 16px;
}

@media (max-width: 920px) {
  .home-frame {
    width: calc(100vw - 12px);
  }

  .home-hero {
    grid-template-columns: 1fr;
  }

  .homepage-optionb .hero-copy h1 {
    font-size: clamp(52px, 14vw, 76px);
  }
}

/* Auth spacing refinement: keep trust copy visually tied to the form. */
.auth-optionb {
  grid-template-columns: minmax(300px, .68fr) minmax(440px, .9fr);
  justify-content: center;
  gap: clamp(24px, 3vw, 42px);
}

.auth-brand-panel {
  justify-self: end;
  width: min(100%, 360px);
}

.auth-panel {
  justify-self: start;
}

.auth-benefits span {
  grid-template-columns: 38px 1fr;
  column-gap: 16px;
  padding-left: 8px;
}

.auth-benefits b,
.auth-benefits small {
  margin-left: 4px;
}

@media (max-width: 920px) {
  .auth-optionb {
    grid-template-columns: 1fr;
  }

  .auth-brand-panel,
  .auth-panel {
    justify-self: center;
  }
}

.twofa-card {
  display: grid;
  gap: 14px;
}

.twofa-setup {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 14px;
  border: 1px solid rgba(8, 122, 77, .12);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(233, 248, 237, .92), rgba(255,255,255,.92));
}

.twofa-setup img {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 31, 25, .08);
  box-shadow: 0 14px 28px rgba(15, 31, 25, .06);
}

.twofa-setup p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

.twofa-setup code {
  width: 100%;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  border-radius: 10px;
  color: #064837;
  background: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 850;
}

.twofa-inline-form {
  display: grid;
  gap: 10px;
}

.admin-account-page {
  align-items: start;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--cw-ink);
  background:
    radial-gradient(circle at 9% 2%, rgba(169, 255, 77, .28), transparent 28rem),
    radial-gradient(circle at 82% 4%, rgba(10, 163, 99, .16), transparent 26rem),
    linear-gradient(180deg, var(--cw-bg), #fff 48%, #f4f8f3));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

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

.ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button,
.primary,
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  color: #fff;
  background: linear-gradient(180deg, #0a9d62, #067849);
  box-shadow: 0 14px 28px rgba(6, 120, 73, .18);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

button:hover,
.primary:hover,
.button-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(6, 120, 73, .22);
}

.button-link.ghost,
.ghost,
.nav-pill,
.action,
.filter-link {
  color: var(--cw-ink);
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--cw-line);
  box-shadow: 0 10px 26px rgba(14, 31, 24, .04);
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--cw-line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--cw-ink);
  background: rgba(255, 255, 255, .82);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(8, 122, 77, .42);
  box-shadow: 0 0 0 4px rgba(8, 122, 77, .08);
  background: #fff;
}

label {
  display: grid;
  gap: 7px;
  color: var(--cw-text);
  font-size: 13px;
  font-weight: 700;
}

label span,
.muted {
  color: var(--cw-muted);
  font-size: 12px;
  line-height: 1.45;
}

h1,
h2,
h3,
p {
  letter-spacing: 0;
}

h1 {
  margin: 4px 0 0;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.08;
}

h2 {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.2;
}

h3 {
  margin: 0 0 7px;
  font-size: 15px;
}

/* Brand */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cw-ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.05;
}

.brand-logo.has-image {
  gap: 0;
}

.brand-logo i,
.brand-logo img {
  width: 33px;
  height: 33px;
  border-radius: 10px;
}

.brand-logo i {
  display: inline-grid;
  place-items: center;
  color: #06351f;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.55), transparent 32%),
    linear-gradient(135deg, var(--cw-lime), var(--cw-green-2));
  font-style: normal;
  font-weight: 1000;
}

.brand-logo img {
  object-fit: contain;
}

.brand-logo.has-image img {
  width: auto;
  height: 34px;
  max-width: 168px;
  border-radius: 0;
  object-fit: contain;
}

/* Public homepage */
.marketing {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 4%, rgba(169, 255, 77, .30), transparent 28rem),
    radial-gradient(circle at 78% 8%, rgba(10, 163, 99, .17), transparent 25rem),
    linear-gradient(180deg, #f8fff8 0%, #fff 50%, #f6faf5 100%);
}

.topbar,
.hero,
.product-band,
.feature-grid,
.steps-band,
.security-band {
  width: min(var(--cw-content), calc(100% - 48px));
  margin-inline: auto;
}

.topbar {
  height: 76px;
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--cw-line);
}

.top-menu,
.top-actions,
.topbar > div {
  display: flex;
  align-items: center;
}

.top-menu {
  justify-content: center;
  gap: 34px;
  color: #1d2939;
  font-size: 12px;
  font-weight: 850;
}

.top-actions {
  justify-content: end;
  gap: 10px;
}

.nav-pill {
  min-height: 38px;
  border-radius: 999px;
  padding: 8px 14px;
}

.hero.privacy-hero {
  min-height: 704px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, .88fr);
  align-items: center;
  gap: 58px;
  padding: 46px 0 70px;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 7px 12px;
  border: 1px solid rgba(8, 122, 77, .18);
  border-radius: 999px;
  color: var(--cw-green);
  background: rgba(255, 255, 255, .76);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: var(--cw-shadow-soft);
}

.hero h1 {
  max-width: 660px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(62px, 8vw, 104px);
  font-weight: 500;
  letter-spacing: -1px;
  line-height: .92;
}

.hero h1 em {
  color: var(--cw-green);
  font-style: normal;
}

.hero-copy > p {
  max-width: 560px;
  margin: 22px 0 0;
  color: #46556a;
  font-size: 17px;
  line-height: 1.58;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 650px;
  padding: 0;
  margin: 28px 0 0;
  list-style: none;
}

.hero-points li {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-content: center;
  padding: 14px;
  border: 1px solid var(--cw-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .74);
  box-shadow: var(--cw-shadow-soft);
}

.hero-points .ico {
  grid-row: span 2;
  color: var(--cw-green);
}

.hero-points b,
.hero-points small {
  display: block;
}

.hero-points b {
  font-size: 12px;
}

.hero-points small {
  color: var(--cw-muted);
  font-size: 11px;
  font-weight: 650;
}

.hero-visual {
  display: grid;
  gap: 16px;
}

.hero-device {
  position: relative;
  min-height: 520px;
  padding: 24px;
  border: 1px solid rgba(8, 122, 77, .12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 70% 10%, rgba(169, 255, 77, .22), transparent 32%),
    rgba(255, 255, 255, .80);
  box-shadow: var(--cw-shadow);
  overflow: visible;
}

.hero-device::before,
.hero-device::after {
  content: "";
  position: absolute;
  width: 340px;
  aspect-ratio: 1;
  inset: 86px 64px auto auto;
  border: 1px solid rgba(8, 122, 77, .14);
  border-radius: 999px;
  transform: rotate(-16deg);
}

.hero-device::after {
  width: 248px;
  inset: 132px 108px auto auto;
}

.device-top,
.hero-ledger-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  color: #34443b;
  font-size: 14px;
  font-weight: 900;
}

.device-top span,
.hero-ledger-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-device .floating-card,
.scroll-card-clone {
  position: relative;
  z-index: 5;
  transform:
    translate3d(var(--card-scroll-x), var(--card-scroll-y), 0)
    rotate(var(--card-scroll-rotate))
    rotateY(var(--card-scroll-flip))
    scale(var(--card-scroll-scale));
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform .16s linear;
  will-change: transform;
}

.hero-device .floating-card .card-art {
  max-width: 420px;
  margin: 28px auto 14px;
}

.scroll-card-clone {
  position: fixed;
  top: 118px;
  right: max(38px, calc((100vw - var(--cw-content)) / 2 + 70px));
  width: min(420px, 33vw);
  display: none;
  z-index: 40;
  pointer-events: none;
}

.hero-ledger-row {
  grid-template-columns: 1fr auto auto;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid var(--cw-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
}

.hero-ledger-row em {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--cw-green);
  background: var(--cw-mint);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.hero-chart {
  height: 86px;
  display: flex;
  align-items: end;
  gap: 11px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--cw-line);
}

.hero-chart i {
  flex: 1;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--cw-lime), var(--cw-green-2));
}

.hero-widget-grid {
  display: grid;
  grid-template-columns: 1.05fr .8fr .8fr;
  gap: 14px;
}

.mini-ledger,
.hero-widget {
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--cw-shadow-soft);
}

.mini-ledger {
  color: #fff;
  background:
    radial-gradient(circle at 92% 20%, rgba(169,255,77,.25), transparent 36%),
    #173e32;
}

.mini-ledger span,
.mini-ledger small {
  display: block;
  color: rgba(255,255,255,.68);
}

.mini-ledger strong {
  display: block;
  margin: 8px 0;
  font-size: 30px;
}

.hero-widget {
  display: grid;
  gap: 8px;
  border: 1px solid var(--cw-line);
  background: rgba(255,255,255,.78);
}

.hero-widget b {
  font-size: 24px;
}

.product-band.scroll-story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.scroll-story .section-title {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 520px);
  gap: 28px;
  align-items: end;
}

.scroll-story .section-title h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.05;
}

.scroll-story .section-title p {
  color: #475569;
  line-height: 1.45;
}

.scroll-story article {
  position: relative;
  min-height: 230px;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 26px;
  border: 1px solid var(--cw-line);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--cw-shadow-soft);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.scroll-story article.is-docked {
  border-color: rgba(8, 122, 77, .34);
  box-shadow: 0 26px 70px rgba(8, 122, 77, .12);
  transform: translateY(-2px);
}

.scroll-story article span {
  width: 50px;
  height: 50px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  color: var(--cw-green);
  background: var(--cw-mint);
  font-weight: 900;
}

.scroll-story article::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 150px;
  aspect-ratio: 1.586 / 1;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(135deg, #0a4939, #149467);
  background-size: 12px 12px, 12px 12px, auto;
  box-shadow: 0 22px 44px rgba(8, 122, 77, .18);
  transform: rotate(-8deg);
  opacity: .82;
}

.steps-band {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 28px;
  margin-bottom: 30px;
  padding: 36px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 96% 0%, rgba(169,255,77,.22), transparent 34%),
    linear-gradient(135deg, #0b4234, #163d31);
}

.steps-band span {
  color: var(--cw-lime);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.steps-band h2 {
  max-width: 380px;
  margin: 8px 0 0;
  color: #fff;
  font-size: clamp(30px, 4vw, 42px);
}

.steps-band ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps-band li {
  position: relative;
  padding: 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
}

.steps-band li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -18px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #10351f;
  background: var(--cw-lime);
  font-weight: 950;
  transform: translateY(-50%);
  z-index: 3;
}

.steps-band b {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 999px;
  color: #10351f;
  background: var(--cw-lime);
}

.steps-band strong,
.steps-band p {
  display: block;
  margin: 0;
}

.steps-band p {
  margin-top: 9px;
  color: rgba(255,255,255,.76);
  line-height: 1.45;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 54px;
}

.feature-grid article {
  min-height: 172px;
  padding: 26px;
  border: 1px solid var(--cw-line);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--cw-shadow-soft);
}

.feature-grid p {
  color: var(--cw-muted);
  line-height: 1.55;
}

.security-band {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 28px;
  margin-bottom: 60px;
  padding: 34px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(169,255,77,.16), transparent 34%),
    #0d4235;
}

.security-band h2 {
  color: #fff;
  font-size: clamp(28px, 4vw, 40px);
}

.security-band p {
  color: rgba(255,255,255,.72);
  line-height: 1.6;
}

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

.security-list span {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  font-weight: 850;
}

/* Auth */
.auth-screen.stripe-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(360px, 440px);
  place-items: center;
  gap: clamp(34px, 8vw, 96px);
  padding: clamp(28px, 7vw, 88px);
  background:
    radial-gradient(circle at 8% 15%, rgba(169,255,77,.28), transparent 28rem),
    radial-gradient(circle at 95% 84%, rgba(10,163,99,.16), transparent 27rem),
    linear-gradient(135deg, #f7fff8, #f5fbf7);
}

.auth-copy {
  justify-self: end;
  width: min(410px, 100%);
}

.auth-copy h1 {
  max-width: 360px;
  margin: 34px 0 12px;
  font-size: 34px;
}

.auth-copy p {
  color: var(--cw-muted);
  line-height: 1.6;
}

.auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cw-green);
  font-size: 12px;
  font-weight: 900;
}

.auth-trust {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.auth-trust span {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--cw-line);
  border-radius: 15px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--cw-shadow-soft);
}

.auth-panel {
  width: 100%;
}

.auth-form-card {
  width: 100%;
  padding: 34px;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(14, 31, 24, .10);
}

.auth-form-card h2 {
  font-size: 26px;
}

.auth-form-card form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.auth-form-card button {
  width: 100%;
}

.auth-switch a {
  color: var(--cw-green);
  font-weight: 900;
}

/* App shell */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--cw-sidebar) minmax(0, 1fr);
  background:
    radial-gradient(circle at 26% 0%, rgba(169,255,77,.18), transparent 28rem),
    radial-gradient(circle at 96% 7%, rgba(10,163,99,.11), transparent 24rem),
    var(--cw-bg);
}

body.sidebar-collapsed .app {
  grid-template-columns: 74px minmax(0, 1fr);
}

body.sidebar-collapsed .app aside {
  padding-inline: 12px;
}

body.sidebar-collapsed .app aside .brand-logo span,
body.sidebar-collapsed .app aside .side-nav span,
body.sidebar-collapsed .app aside .brand small {
  display: none;
}

body.sidebar-collapsed .app aside .side-nav a {
  justify-content: center;
}

.app aside {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 16px;
  overflow-y: auto;
  color: var(--cw-ink);
  background: rgba(255,255,255,.74);
  border-right: 1px solid var(--cw-line);
  box-shadow: inset -1px 0 rgba(255,255,255,.45);
  backdrop-filter: blur(18px);
}

.side-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.side-top .brand-logo {
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}

.side-top .brand-logo i,
.side-top .brand-logo img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.side-top .brand-logo.has-image img {
  width: auto;
  height: 32px;
  max-width: 150px;
  border-radius: 0;
}

.side-nav {
  display: grid;
  gap: 4px;
}

.side-nav a,
aside a:not(.brand) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 9px;
  border-radius: 10px;
  color: #354156;
  font-size: 11px;
  font-weight: 850;
}

.side-nav a.active,
aside a.active,
.side-nav a:hover,
aside a:not(.brand):hover {
  color: var(--cw-green);
  background: var(--cw-mint);
}

.sidebar-toggle,
.theme-toggle,
.mobile-bar button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  color: var(--cw-ink);
  background: #fff;
  border: 1px solid var(--cw-line);
  box-shadow: var(--cw-shadow-soft);
}

.workspace {
  width: min(100%, 1480px);
  margin-inline: auto;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 28px 30px 18px;
}

.mobile-bar {
  display: none;
}

.page-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.eyebrow {
  color: var(--cw-green);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.head-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 6px 8px 6px 14px;
  border: 1px solid var(--cw-line);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--cw-shadow-soft);
  font-size: 13px;
  font-weight: 850;
}

.head-user b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--cw-green);
  background: #dcffec;
}

.panel,
.metric,
.wallet-tile,
.feature-grid article {
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius);
  background: var(--cw-panel);
  box-shadow: var(--cw-shadow-soft);
  backdrop-filter: blur(18px);
}

.panel {
  padding: 22px;
  overflow: hidden;
}

.notice {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #f4d06f;
  border-radius: 12px;
  color: #704d00;
  background: #fff8df;
  font-size: 13px;
  font-weight: 800;
}

.notice.success {
  border-color: #a8e6c1;
  color: #087a4d;
  background: #ecfff4;
}

.notice.error {
  border-color: #fecaca;
  color: #b42318;
  background: #fff1f1;
}

.notice.info {
  border-color: #bfdbfe;
  color: #1d4ed8;
  background: #eff6ff;
}

.notice.info.compact-notice,
.card-pending-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.notice.info.compact-notice .ico,
.card-pending-notice .ico,
.card-controls-page .notice .ico {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.card-pending-notice p {
  margin: 4px 0 0;
  color: inherit;
  font-weight: 650;
  line-height: 1.45;
}

.empty-state {
  min-height: 190px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px;
  border: 1px dashed var(--cw-line-strong);
  border-radius: 16px;
  background: rgba(248,252,250,.82);
}

.empty-state p {
  margin: 0;
  color: var(--cw-muted);
}

.panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.panel-title a {
  color: var(--cw-green);
  font-size: 13px;
  font-weight: 900;
}

/* Dashboard */
.dashboard-grid {
  display: grid;
  gap: 18px;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: minmax(360px, 1.45fr) repeat(3, minmax(190px, .55fr));
  gap: 18px;
}

.balance-hero {
  position: relative;
  min-height: 224px;
  display: grid;
  align-content: space-between;
  padding: 28px;
  border: 0;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(169,255,77,.28), transparent 28%),
    linear-gradient(135deg, #0b7a54, #073f32);
  box-shadow: 0 24px 60px rgba(7, 63, 50, .20);
  overflow: hidden;
}

.balance-hero::after {
  content: "";
  position: absolute;
  inset: 28px 22px 18px 42%;
  opacity: .65;
  background:
    radial-gradient(circle at 18% 58%, rgba(169,255,77,.46), transparent 9%),
    linear-gradient(135deg, transparent 0 28%, rgba(255,255,255,.28) 29% 30%, transparent 31%),
    linear-gradient(165deg, transparent 0 52%, rgba(255,255,255,.18) 53% 54%, transparent 55%);
  border-radius: 30px;
}

.balance-hero > * {
  position: relative;
  z-index: 1;
}

.balance-hero span,
.balance-hero small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.74);
}

.balance-hero strong {
  font-size: clamp(44px, 5vw, 62px);
  line-height: 1;
}

.balance-hero div {
  display: flex;
  gap: 12px;
}

.balance-hero a {
  flex: 1;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.15);
  font-size: 13px;
  font-weight: 900;
}

.balance-hero a:first-child {
  background: #0fc878;
}

.wallet-tile {
  min-height: 162px;
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 22px;
}

.wallet-tile i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--cw-green);
  background: var(--cw-mint);
  font-style: normal;
}

.wallet-tile strong {
  font-size: 28px;
}

.wallet-tile.warn {
  background: rgba(255, 247, 247, .88);
}

.dashboard-main-row,
.dashboard-lower-grid {
  display: grid;
  gap: 18px;
  align-items: start;
}

.dashboard-main-row {
  grid-template-columns: minmax(320px, .66fr) minmax(540px, 1.22fr);
}

.dashboard-lower-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .55fr);
}

.dashboard-side-stack {
  display: grid;
  gap: 18px;
}

.quick-actions {
  min-height: 250px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.quick-actions h2 {
  grid-column: 1 / -1;
}

.quick-actions div {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 900;
}

.quick-actions a {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--cw-green);
  background: var(--cw-mint);
}

.card-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap: 14px;
}

.card-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.card-insights span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--cw-line);
  border-radius: 13px;
  color: var(--cw-muted);
  background: rgba(248,252,250,.82);
  font-size: 12px;
}

.quick-send-widget form,
.paypal-send-form,
.money-form form,
.topup-form,
.gift-buy-form {
  display: grid;
  gap: 14px;
}

.mini-list {
  display: grid;
  gap: 10px;
}

.mini-list div {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--cw-line);
  border-radius: 13px;
  background: rgba(248,252,250,.82);
}

.mini-list span {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Card art */
.card-art {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1.586 / 1;
  min-height: 0;
  display: grid;
  align-content: space-between;
  padding: 24px;
  border-radius: 20px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.09) 1px, transparent 1px),
    radial-gradient(circle at 86% 18%, rgba(169,255,77,.28), transparent 23%),
    linear-gradient(135deg, #073e33, #0b9360);
  background-size: 18px 18px, 18px 18px, auto, auto;
  box-shadow: 0 24px 55px rgba(7, 63, 50, .24);
}

.card-art.master,
.card-art.mastercard,
.card-art.master-card {
  background:
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.09) 1px, transparent 1px),
    radial-gradient(circle at 86% 18%, rgba(87, 139, 255, .30), transparent 23%),
    linear-gradient(135deg, #101827, #154da3);
  background-size: 18px 18px, 18px 18px, auto, auto;
}

.card-top,
.card-chip-row,
.card-meta,
.card-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.card-chip-row {
  justify-content: flex-start;
  gap: 18px;
}

.chip {
  width: 42px;
  height: 32px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 30%, rgba(150, 102, 22, .18) 31% 33%, transparent 34% 66%, rgba(150, 102, 22, .18) 67% 69%, transparent 70%),
    linear-gradient(180deg, #f9d779, #d6a849);
}

.nfc-logo {
  display: inline-flex;
  gap: 3px;
}

.nfc-logo span {
  width: 8px;
  height: 18px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-radius: 0 999px 999px 0;
}

.network-logo {
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0;
}

.network-logo.mastercard::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 20px;
  margin-right: 7px;
  vertical-align: -4px;
  background:
    radial-gradient(circle at 35% 50%, #ff5f00 0 42%, transparent 43%),
    radial-gradient(circle at 65% 50%, #f6c000 0 42%, transparent 43%);
}

.card-art > strong {
  font-size: clamp(21px, 2.8vw, 32px);
  letter-spacing: 0;
}

.card-balance {
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.22);
}

.card-balance span,
.card-meta {
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 800;
}

/* Forms and split pages */
.split,
.send-page,
.money-action-page,
.topup-page {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(300px, .56fr);
  gap: 18px;
  align-items: start;
}

.send-card,
.money-form {
  min-height: 500px;
  display: grid;
  align-content: center;
}

.send-info,
.money-action-page .compact,
.topup-page .compact,
.qr {
  background:
    radial-gradient(circle at 60% 0%, rgba(10,163,99,.12), transparent 42%),
    var(--cw-panel);
}

.recipient-box {
  padding: 16px;
  border: 1px solid var(--cw-line);
  border-radius: 14px;
  background: rgba(248,252,250,.80);
}

.recipient-box span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.send-amount-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

.send-amount-row strong {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 14px;
  border: 1px solid var(--cw-line);
  border-radius: 10px;
  background: rgba(248,252,250,.82);
}

.ledger-widget,
.copy-lines,
.compact {
  display: grid;
  gap: 10px;
}

.ledger-widget > div,
.copy-lines,
.ref-stats span,
.card-detail-list div,
.reveal-panel div,
.checkout-total {
  border: 1px solid var(--cw-line);
  border-radius: 14px;
  background: rgba(248,252,250,.82);
}

.ledger-widget > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
}

.ledger-widget span,
.merchant-cell,
.checkout-total span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.copy-lines {
  padding: 16px;
}

.copy-lines strong {
  overflow-wrap: anywhere;
  font-size: 17px;
}

.qr {
  text-align: center;
}

.qr img {
  width: 180px;
  height: 180px;
  border: 10px solid #fff;
  border-radius: 18px;
  box-shadow: var(--cw-shadow-soft);
}

/* Tables */
.table {
  width: 100%;
  display: grid;
  gap: 0;
  overflow-x: auto;
}

.row {
  min-width: 760px;
  display: grid;
  grid-template-columns: 1fr 2.1fr .85fr .8fr .85fr;
  gap: 14px;
  align-items: center;
  padding: 13px 10px;
  border-bottom: 1px solid var(--cw-line);
  font-size: 12px;
}

.row.head {
  color: var(--cw-muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.row span:last-child {
  text-align: right;
  font-weight: 850;
}

.row small {
  display: block;
  margin-top: 4px;
  color: var(--cw-muted);
}

.positive {
  color: var(--cw-green);
}

.negative {
  color: var(--cw-red);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--cw-green);
  background: var(--cw-mint);
  font-size: 11px;
  font-weight: 900;
}

.merchant-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #111827;
  font-style: normal;
  font-weight: 950;
}

.merchant-logo-img {
  object-fit: contain;
  padding: 7px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

/* Cards overview */
.cards-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0;
  gap: 18px;
  align-items: start;
  transition: grid-template-columns .28s ease;
}

.cards-overview.create-open {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
}

.cards-overview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.cards-overview-head > div:last-child {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.card-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.mini-card {
  min-height: 136px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(135deg, #073e33, #0b9360);
  background-size: 16px 16px, 16px 16px, auto;
  box-shadow: 0 20px 42px rgba(7, 63, 50, .14);
}

.mini-card.active {
  outline: 3px solid rgba(10, 163, 99, .18);
  border-color: rgba(10, 163, 99, .65);
}

.mini-card small {
  color: rgba(255,255,255,.72);
}

.mini-card.create-tile {
  place-content: center;
  text-align: center;
  color: var(--cw-ink);
  border: 1px dashed rgba(8, 122, 77, .28);
  background: rgba(255,255,255,.80);
  box-shadow: none;
}

.mini-card.create-tile span {
  margin-inline: auto;
}

.card-picker {
  margin-bottom: 14px;
}

.card-detail-panel .card-art {
  margin-block: 16px;
}

.card-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.card-detail-list div,
.reveal-panel div {
  padding: 12px;
}

.card-detail-list dt,
.reveal-panel span {
  color: var(--cw-muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.card-detail-list dd {
  margin: 4px 0 0;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.button-row form {
  display: contents;
}

.create-card-panel {
  width: 100%;
  opacity: 0;
  transform: translateX(28px) scale(.98);
  pointer-events: none;
  transition: opacity .24s ease, transform .28s ease;
}

.cards-overview:not(.create-open) .create-card-panel {
  min-width: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.cards-overview.create-open .create-card-panel {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.create-card-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.create-card-form select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #e6eee9;
  border-radius: 9px;
  color: var(--cw-ink);
  background: rgba(255, 255, 255, .92);
  font-weight: 750;
}

.create-card-form select:focus {
  outline: 0;
  border-color: rgba(8, 122, 77, .48);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}

.create-card-form button {
  width: 100%;
}

.close-create {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
}

.card-action-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 20px;
}

.card-action-modal.open {
  display: grid;
}

.card-action-summary {
  display: grid;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 14px;
  border: 1px solid rgba(8, 122, 77, .12);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(236, 253, 245, .85), rgba(255, 255, 255, .92));
}

.card-action-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #607086;
  font-size: 13px;
  font-weight: 750;
}

.card-action-summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.card-action-summary .ico {
  width: 16px;
  height: 16px;
  color: #07814f;
}

.card-action-summary strong {
  color: var(--cw-ink);
  font-size: 15px;
}

/* Cards overview - Option B screenshot match */
.cards-optionb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0;
  gap: 22px;
  align-items: start;
  transition: grid-template-columns .28s ease;
}

.cards-optionb.create-open {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
}

.cards-main-panel {
  min-width: 0;
  padding: 26px;
  border: 1px solid #e3ebe7;
  border-radius: 18px;
  background: radial-gradient(circle at 74% 0%, rgba(10, 163, 99, .11), transparent 25rem), rgba(255,255,255,.86);
  box-shadow: 0 22px 70px rgba(14, 31, 24, .07);
}

.cards-optionb .cards-overview-head {
  margin-bottom: 22px;
}

.cards-optionb .cards-overview-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.card-create-button {
  min-height: 38px;
  color: #087a4d;
  background: #fff;
  border: 1px solid rgba(8,122,77,.34);
  box-shadow: 0 10px 24px rgba(8,122,77,.05);
}

.icon-only-button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  color: #334155;
  background: #fff;
  border: 1px solid #e3ebe7;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .035);
}

.card-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 260px);
  gap: 14px;
  margin-bottom: 20px;
  padding: 2px 2px 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.overview-card {
  position: relative;
  min-height: 148px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 18px;
  overflow: hidden;
  color: #fff;
  border-radius: 10px;
  background: radial-gradient(circle at 86% 38%, rgba(255,255,255,.18), transparent 19%), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(135deg, #064837, #0a9362);
  background-size: auto, 16px 16px, 16px 16px, auto;
  box-shadow: 0 20px 42px rgba(7, 63, 50, .16);
}

.overview-card-master {
  background: radial-gradient(circle at 82% 42%, rgba(43, 104, 255, .24), transparent 21%), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(135deg, #0b172d, #174c98);
  background-size: auto, 16px 16px, 16px 16px, auto;
}

.overview-card.active {
  outline: 3px solid rgba(8, 122, 77, .18);
  box-shadow: 0 22px 45px rgba(7, 63, 50, .22);
}

.overview-card.frozen::after {
  content: "Frozen";
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .94);
  font-size: 21px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(135deg, rgba(15, 23, 42, .68), rgba(8, 122, 77, .5));
  backdrop-filter: grayscale(1) blur(2px);
}

.card-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 950;
}

.card-brand-row i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.86);
}

.overview-card strong {
  margin-top: 8px;
  font-size: 16px;
  letter-spacing: 1.5px;
}

.overview-card small,
.overview-card em {
  color: rgba(255,255,255,.82);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.card-status-pill {
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: #dcfff0;
  background: rgba(4, 120, 87, .45);
  font-size: 10px;
  font-weight: 900;
}

.card-balance-pill {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  color: #f7fffb;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 11px;
  font-weight: 950;
}

.overview-create-tile {
  min-height: 148px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: #334155;
  text-align: center;
  border: 1px dashed rgba(8, 122, 77, .28);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}

.overview-create-tile span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #087a4d;
  background: #eaf6ef;
  border-radius: 999px;
}

.overview-create-tile small {
  color: #8a95a4;
  font-size: 11px;
}

.card-tabs {
  display: flex;
  gap: 0;
  margin: 6px 0 18px;
  border-bottom: 1px solid #e6eee9;
}

.card-tabs a {
  position: relative;
  padding: 12px 18px;
  color: #667085;
  font-size: 13px;
  font-weight: 850;
}

.card-tabs a.active {
  color: #087a4d;
}

.card-tabs a.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: #087a4d;
}

.card-overview-grid {
  display: grid;
  grid-template-columns: minmax(190px, .82fr) minmax(210px, .9fr) minmax(230px, 1fr);
  gap: 14px;
}

.card-info-box,
.card-controls-box,
.card-recent-box,
.transaction-tab-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e6eee9;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .035);
}

.card-info-box h3,
.card-controls-box h3,
.card-recent-box h3 {
  margin: 0 0 16px;
  color: #111827;
  font-size: 15px;
}

.card-info-box dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.card-info-box dl div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #eef2f0;
}

.card-info-box dt {
  color: #6b7280;
  font-size: 12px;
}

.card-info-box dd {
  margin: 0;
  color: #111827;
  text-align: right;
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.secure-card-field {
  display: inline-flex;
  min-width: 118px;
  min-height: 20px;
  vertical-align: middle;
}

.secure-card-field iframe {
  width: 100% !important;
  min-width: 118px;
  height: 20px !important;
  border: 0;
  display: block;
}

.card-controls-page {
  display: grid;
  gap: 18px;
}

.provider-controls-form,
.create-control-block {
  display: grid;
  gap: 16px;
}

.provider-controls-form {
  max-width: 820px;
}

.provider-controls-form .rich-control {
  min-height: 66px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #e6eee9;
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
}

.provider-controls-form .rich-control span {
  display: grid;
  gap: 4px;
}

.provider-controls-form .rich-control b {
  color: #0f172a;
  font-size: 14px;
}

.provider-controls-form .rich-control small,
.spending-limit-grid small {
  color: #64748b;
  font-size: 12px;
}

.spending-limit-editor {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e6eee9;
  border-radius: 16px;
  background: rgba(3, 132, 78, .045);
}

.spending-limit-editor h3 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
}

.spending-limit-editor p {
  margin: 4px 0 0;
}

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

.spending-limit-grid label {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #e6eee9;
  border-radius: 14px;
  background: rgba(255, 255, 255, .76);
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

.spending-limit-grid input,
.spending-limit-grid select {
  width: 100%;
  height: 42px;
  border: 1px solid #d9e5df;
  border-radius: 10px;
  padding: 0 12px;
  color: #0f172a;
  background: #fff;
  font-weight: 800;
}

.delete-limit-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  color: #b42318;
  font-size: 13px;
  font-weight: 850;
}

.delete-limit-check input {
  width: 16px;
  height: 16px;
  accent-color: #b42318;
}

.provider-controls-form > button {
  justify-self: start;
  min-width: 190px;
}

.create-control-block {
  padding: 14px;
  border: 1px solid #e6eee9;
  border-radius: 16px;
  background: rgba(3, 132, 78, .045);
}

.create-control-block h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #0f172a;
  font-size: 14px;
}

.mini-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mini-toggle-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid #dce9e2;
  border-radius: 10px;
  background: rgba(255, 255, 255, .78);
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.mini-toggle-grid input {
  accent-color: #087f4f;
}

.spending-limit-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.spending-limit-grid.compact label {
  padding: 10px;
  font-size: 12px;
}

.email-settings-panel .mailer-section {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dfeae4;
  border-radius: 16px;
  background: rgba(248, 252, 250, .78);
}

.email-settings-panel .mailer-section[hidden] {
  display: none;
}

.email-settings-panel .mailer-section h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #0f172a;
  font-size: 15px;
}

@media (max-width: 780px) {
  .spending-limit-grid,
  .spending-limit-grid.compact,
  .mini-toggle-grid {
    grid-template-columns: 1fr;
  }
}

.card-info-box dd a {
  display: inline-flex;
  margin-left: 4px;
  color: #94a3b8;
  vertical-align: middle;
}

.status-green {
  color: #087a4d;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.control-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #eef2f0;
  color: #334155;
  font-size: 12px;
  font-weight: 780;
}

.control-line label {
  position: relative;
  width: 34px;
  height: 20px;
}

.control-line input {
  position: absolute;
  opacity: 0;
}

.control-line i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #dce5e0;
}

.control-line i::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(15,23,42,.14);
  transition: transform .16s ease;
}

.control-line input:checked + i {
  background: #10a56a;
}

.control-line input:checked + i::after {
  transform: translateX(14px);
}

.provider-controls-form .control-line.rich-control {
  position: relative;
}

.provider-controls-form .control-line.rich-control input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.provider-controls-form .control-line.rich-control > i {
  position: relative;
  inset: auto;
  width: 38px;
  height: 22px;
  flex: 0 0 38px;
  display: block;
  border-radius: 999px;
  background: #dce5e0;
}

.provider-controls-form .control-line.rich-control > i::after {
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
}

.provider-controls-form .control-line.rich-control input[type="checkbox"]:checked + i {
  background: #10a56a;
}

.provider-controls-form .control-line.rich-control input[type="checkbox"]:checked + i::after {
  transform: translateX(16px);
}

.card-control-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.card-control-actions form {
  display: contents;
}

.danger-action,
.mini-action {
  width: 100%;
  min-height: 40px;
  justify-content: flex-start;
  color: #d92d20;
  background: #fff;
  border: 1px solid #f4d6d2;
  box-shadow: none;
}

.mini-action {
  color: #087a4d;
  border-color: #d9eee4;
}

.danger-action.disabled {
  opacity: .7;
  pointer-events: none;
}

.card-recent-box .panel-title {
  margin-bottom: 10px;
}

.card-recent-box .panel-title h3 {
  margin: 0;
}

.card-recent-box .panel-title a {
  color: #087a4d;
  font-size: 12px;
  font-weight: 850;
}

.card-recent-box .provider-table .row,
.transaction-tab-panel .provider-table .row {
  min-width: 0;
}

.card-recent-box .provider-table .row {
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 0;
}

.card-recent-box .provider-table .row.head {
  display: none;
}

.card-recent-box .provider-table .row span:nth-child(2),
.card-recent-box .provider-table .row span:nth-child(3),
.card-recent-box .provider-table .row span:nth-child(4) {
  display: none;
}

.card-recent-box .merchant-cell em {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-tab-panel {
  padding: 20px;
}

.transaction-range-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
  margin: 14px 0 16px;
}

.transaction-range-filter label {
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 11px;
  font-weight: 850;
}

.transaction-range-filter input {
  min-height: 38px;
}

.cards-optionb .create-card-panel {
  max-height: calc(100vh - 92px);
  overflow: auto;
  padding: 22px;
  border: 1px solid #e6eee9;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 24px 70px rgba(15,23,42,.11);
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.cards-optionb:not(.create-open) .create-card-panel {
  min-width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  transform: translateX(24px) scale(.98);
  pointer-events: none;
  overflow: hidden;
}

.create-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.create-head h2 {
  margin: 0 0 4px;
  font-size: 17px;
}

.create-head p {
  margin: 0;
  color: #8a95a4;
  font-size: 12px;
}

.create-head .close-create {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #6b7280;
  background: #fff;
  border: 1px solid #e6eee9;
  border-radius: 999px;
}

.card-network-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.card-network-choice span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #e6eee9;
  border-radius: 9px;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

.card-network-choice span.active {
  color: #087a4d;
  border-color: rgba(8,122,77,.42);
  background: #f1fbf5;
}

.card-empty-state {
  min-height: 310px;
  display: grid;
  place-content: center;
  text-align: center;
}

/* Option B page refreshes */
.profile-menu {
  position: relative;
}

.head-user {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  color: #111827;
  background: rgba(255,255,255,.9);
  border: 1px solid #e3ebe7;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(15,23,42,.045);
}

.head-user img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
}

.head-user span {
  max-width: 150px;
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.head-user .ico {
  width: 14px;
  height: 14px;
  color: #667085;
}

.profile-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 30;
  min-width: 190px;
  display: none;
  padding: 8px;
  border: 1px solid #e3ebe7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15,23,42,.12);
}

.profile-menu.open .profile-dropdown {
  display: grid;
}

.profile-dropdown a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  color: #334155;
  font-size: 14px;
  font-weight: 780;
}

.profile-dropdown a:hover {
  color: #087a4d;
  background: #eaf6ef;
}

.gift-market-optionb,
.gift-checkout-optionb,
.transactions-optionb,
.account-optionb {
  position: relative;
  padding: 24px;
  border: 1px solid #e6eee9;
  border-radius: 18px;
  background: radial-gradient(circle at 84% 0%, rgba(10,163,99,.12), transparent 24rem), rgba(255,255,255,.86);
  box-shadow: 0 22px 70px rgba(14,31,24,.07);
}

.gift-filter-row,
.transaction-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(260px, 1fr) auto;
  gap: 12px;
  margin: 18px 0;
}

.gift-filter-row label,
.transaction-toolbar label {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid #e3ebe7;
  border-radius: 10px;
  background: #fff;
}

.gift-filter-row input,
.gift-filter-row select,
.transaction-toolbar input,
.transaction-toolbar select {
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.gift-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.gift-categories span {
  min-width: 76px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #334155;
  text-align: center;
  background: #fff;
  border: 1px solid #e6eee9;
  font-size: 12px;
  font-weight: 820;
}

.gift-categories span:first-child {
  color: #fff;
  background: #087a4d;
}

.small-title h3 {
  margin: 0;
  font-size: 15px;
}

.gift-grid.optionb {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 18px;
}

.gift-card.optionb {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.gift-card.optionb img,
.gift-hero-logo {
  width: 100%;
  aspect-ratio: 1.72;
  object-fit: contain;
  padding: 18px;
  border-radius: 10px;
  background: #111827;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

.gift-card.optionb i {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 7px;
  color: #fff;
  background: rgba(15,23,42,.82);
  border-radius: 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.gift-card.optionb h3 {
  margin: 4px 0 0;
  color: #111827;
  font-size: 13px;
}

.gift-card.optionb p {
  margin: 0;
  color: #667085;
  font-size: 11px;
}

.gift-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid #e6eee9;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}

.gift-benefits span {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 10px;
  align-items: center;
}

.gift-benefits .ico {
  grid-row: span 2;
  width: 32px;
  height: 32px;
  padding: 8px;
  color: #087a4d;
  background: #eaf6ef;
  border-radius: 999px;
}

.gift-benefits b {
  font-size: 12px;
}

.gift-benefits small {
  color: #667085;
  font-size: 10px;
}

.gift-checkout-optionb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: 28px;
}

.back-link {
  display: inline-flex;
  gap: 8px;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.checkout-product-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: center;
  margin: 22px 0;
  padding: 16px;
  border: 1px solid #e6eee9;
  border-radius: 14px;
  background: #fff;
}

.gift-buy-form {
  display: grid;
  gap: 14px;
}

.gift-buy-form textarea {
  min-height: 88px;
}

.before-pay {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e6eee9;
  border-radius: 14px;
  background: #fff;
  color: #667085;
  font-size: 12px;
}

.gift-checkout-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.gift-checkout-side article {
  padding: 22px;
  border: 1px solid #e6eee9;
  border-radius: 14px;
  background: #fff;
}

.gift-checkout-side article div,
.gift-checkout-side strong {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
}

.gift-checkout-side em {
  color: #111827;
  font-style: normal;
}

.secure-purchase .ico {
  width: 42px;
  height: 42px;
  padding: 10px;
  color: #087a4d;
  background: #eaf6ef;
  border-radius: 999px;
}

.center {
  text-align: center;
}

.transactions-optionb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 280px);
  gap: 18px;
}

.transaction-toolbar {
  grid-template-columns: minmax(150px, 180px) 150px 150px minmax(220px, 1fr) 42px;
}

.transaction-table-optionb .tx-type-cell {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.tx-type-cell i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #087a4d;
  background: #eaf6ef;
  border-radius: 999px;
}

.transactions-side {
  display: grid;
  gap: 14px;
}

.transactions-side article,
.account-profile-card,
.account-referral-card,
.account-stats-card,
.account-security-card,
.account-edit-card,
.account-password-card {
  padding: 20px;
  border: 1px solid #e6eee9;
  border-radius: 14px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 14px 34px rgba(15,23,42,.035);
}

.mini-line-chart {
  height: 90px;
  margin: 14px 0;
  border-radius: 12px;
  background: linear-gradient(160deg, transparent 55%, rgba(10,163,99,.16)), #f8fcfa;
}

.filter-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f0;
  color: #334155;
  font-size: 12px;
}

.account-optionb {
  display: grid;
  grid-template-columns: minmax(220px, .85fr) minmax(280px, 1.35fr) minmax(240px, .9fr);
  gap: 18px;
}

.account-security-card,
.account-edit-card {
  grid-column: span 2;
}

.profile-large {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 14px;
  align-items: center;
}

.profile-large img,
.profile-large > b {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  object-fit: cover;
  border-radius: 999px;
  color: #087a4d;
  background: #eaf6ef;
  font-size: 26px;
}

.profile-large small {
  display: inline-flex;
  gap: 6px;
  color: #087a4d;
}

.copy-lines.compact strong {
  font-size: 13px;
}

.account-referral-card label div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.ref-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.ref-stats span {
  padding: 12px;
  border-radius: 10px;
  background: #f8fcfa;
  color: #667085;
  font-size: 11px;
}

.ref-stats b {
  display: block;
  color: #111827;
  font-size: 16px;
}

.auth-optionb {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.4fr);
  gap: 42px;
  align-items: center;
  padding: clamp(28px, 5vw, 70px);
  background: radial-gradient(circle at 82% 8%, rgba(10,163,99,.16), transparent 26rem), linear-gradient(145deg, #f5fbf8, #e3f6eb);
}

.auth-brand-panel {
  display: grid;
  gap: 42px;
}

.auth-benefits {
  display: grid;
  gap: 22px;
}

.auth-benefits span {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  align-items: center;
}

.auth-benefits .ico {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  padding: 9px;
  color: #087a4d;
  background: #eaf6ef;
  border-radius: 999px;
}

.auth-form-card {
  width: min(100%, 380px);
  margin-inline: auto;
  padding: 36px;
  border: 1px solid #e6eee9;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 26px 80px rgba(15,23,42,.14);
}

.auth-divider {
  display: grid;
  place-items: center;
  margin: 22px 0 14px;
  color: #98a2b3;
  font-size: 12px;
}

.oauth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.oauth-row button {
  color: #111827;
  background: #fff;
  border: 1px solid #e6eee9;
  box-shadow: none;
}

.public-page-hero,
.public-content-grid {
  width: min(var(--cw-content), calc(100% - 48px));
  margin-inline: auto;
}

.public-page-hero {
  padding: 90px 0 38px;
}

.public-page-hero h1 {
  max-width: 780px;
  margin: 18px 0;
  font-size: clamp(46px, 8vw, 92px);
}

.public-content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding-bottom: 70px;
}

.public-content-grid article {
  padding: 26px;
  border: 1px solid #e6eee9;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 50px rgba(15,23,42,.05);
}

.hero-visual .floating-card {
  animation: card-float 5s ease-in-out infinite;
}

@keyframes card-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-12px) rotate(-5deg); }
}

.confirm-modal,
.confirm-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}

.confirm-modal.open {
  display: grid;
  place-items: center;
}

.confirm-modal__backdrop {
  display: block;
  background: rgba(7, 19, 15, .42);
  backdrop-filter: blur(10px);
}

.confirm-modal__panel {
  position: relative;
  z-index: 101;
  width: min(440px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--cw-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(7, 19, 15, .22);
}

.confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.confirm-modal__input {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  color: #0f172a;
  font-weight: 800;
  text-align: left;
}

.confirm-modal__input input {
  width: 100%;
  height: 44px;
  border: 1px solid #dce9e2;
  border-radius: 12px;
  padding: 0 12px;
  color: #0f172a;
  background: #fff;
}

/* Gift cards, checkout, topup */
.catalog-filter {
  display: grid;
  grid-template-columns: 190px minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.gift-card {
  min-height: 214px;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--cw-line);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--cw-shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease;
}

.gift-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cw-shadow);
}

.gift-card img {
  width: 100%;
  height: 92px;
  object-fit: contain;
  padding: 16px;
  border-radius: 14px;
  background: #111827;
}

.gift-card h3 {
  color: var(--cw-ink);
}

.gift-card p,
.gift-card strong {
  color: var(--cw-muted);
  font-size: 12px;
}

.gift-hero-logo {
  width: 140px;
  height: 90px;
  object-fit: contain;
  padding: 16px;
  border-radius: 16px;
  background: #111827;
}

.gift-detail {
  display: grid;
  gap: 14px;
}

.checkout-total {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 16px;
}

.checkout-total strong {
  text-align: right;
}

.operator-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.operator-logo-grid span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--cw-line);
  border-radius: 13px;
  background: rgba(248,252,250,.82);
}

.operator-logo-grid img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.phone-input {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}

.phone-input strong {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--cw-line);
  border-radius: 10px;
  background: rgba(248,252,250,.82);
}

/* Account */
.drop-uploader {
  grid-column: 1 / -1;
  min-height: 164px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 20px;
  border: 1.5px dashed rgba(8, 122, 77, .28);
  border-radius: 18px;
  background: rgba(233, 248, 237, .54);
  text-align: center;
  cursor: pointer;
}

.drop-uploader input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.drop-uploader strong {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.drop-uploader img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 999px;
}

.drop-uploader.dragging {
  background: #dcffec;
  border-color: var(--cw-green);
}

.ref-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.ref-stats span {
  display: grid;
  gap: 4px;
  padding: 13px;
}

.ref-stats b {
  color: var(--cw-ink);
  font-size: 19px;
}

.form-panel form,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-panel button,
.settings-grid + button {
  justify-self: start;
}

/* Admin: GitHub-like */
.admin.app {
  background: #f6f8fa;
}

.admin aside {
  color: #24292f;
  background: #ffffff;
  border-right: 1px solid #d0d7de;
  box-shadow: none;
}

.admin .side-nav a,
.admin aside a:not(.brand) {
  color: #57606a;
}

.admin .side-nav a.active,
.admin aside a.active,
.admin .side-nav a:hover,
.admin aside a:not(.brand):hover {
  color: #24292f;
  background: #f6f8fa;
  box-shadow: inset 3px 0 #1f883d;
}

.admin .panel,
.admin .metric,
.admin .feature-grid article {
  border-color: #d0d7de;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
}

.admin button,
.admin .primary,
.admin .button-link:not(.ghost) {
  border-radius: 6px;
  background: #1f883d;
  box-shadow: none;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 14px;
}

.metric {
  min-height: 112px;
  display: grid;
  align-content: space-between;
  padding: 18px;
}

.metric span {
  color: var(--cw-muted);
  font-size: 12px;
}

.metric strong {
  font-size: 26px;
}

.metric.primary {
  color: #fff;
  background: var(--cw-green);
}

.metric.primary span {
  color: rgba(255,255,255,.76);
}

.metric.green {
  background: #e9fff4;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-link {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850;
}

.filter-link.active,
.filter-link:hover {
  color: var(--cw-green);
  background: var(--cw-mint);
}

.user-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.adjust-balance-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(7, 19, 15, .42);
  backdrop-filter: blur(10px);
}

.adjust-balance-modal.open {
  display: grid;
}

.adjust-balance-modal article {
  position: relative;
  width: min(430px, 100%);
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--cw-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(7, 19, 15, .22);
}

.modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  padding: 0;
}

.settings-grid > div {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--cw-line);
  border-radius: 14px;
  background: rgba(248,252,250,.82);
}

/* Footer */
.site-footer {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  gap: 24px;
  align-items: center;
  padding: 30px max(24px, calc((100vw - var(--cw-content)) / 2));
  border-top: 1px solid var(--cw-line);
  background: rgba(255,255,255,.82);
}

.site-footer p {
  max-width: 520px;
  margin: 8px 0 0;
  color: var(--cw-muted);
  font-size: 13px;
  line-height: 1.5;
}

.site-footer nav {
  display: flex;
  gap: 16px;
  font-size: 13px;
  font-weight: 850;
}

.site-footer small {
  color: var(--cw-muted);
}

.site-footer.app,
.site-footer.admin {
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--cw-line);
  border-radius: 14px;
  box-shadow: none;
}

.site-footer.app p,
.site-footer.admin p,
.site-footer.app nav,
.site-footer.admin nav {
  display: none;
}

/* Dark mode */
:root.dark {
  color-scheme: dark;
  --cw-bg: #07130f;
  --cw-bg-2: #0c2119;
  --cw-panel: rgba(14, 31, 25, .86);
  --cw-panel-solid: #0f211b;
  --cw-ink: #edf8f2;
  --cw-text: #d7e8df;
  --cw-muted: #9db2a8;
  --cw-line: rgba(213, 238, 224, .12);
  --cw-line-strong: rgba(213, 238, 224, .18);
  --cw-mint: rgba(10, 163, 99, .16);
}

:root.dark body,
:root.dark .marketing,
:root.dark .auth-screen,
:root.dark .app:not(.admin) {
  color: var(--cw-ink);
  background:
    radial-gradient(circle at 12% 4%, rgba(10,163,99,.16), transparent 28rem),
    radial-gradient(circle at 82% 4%, rgba(169,255,77,.08), transparent 26rem),
    #07130f;
}

:root.dark input,
:root.dark select,
:root.dark textarea,
:root.dark .panel,
:root.dark .wallet-tile,
:root.dark .metric,
:root.dark .gift-card,
:root.dark .mini-card.create-tile,
:root.dark .hero-widget,
:root.dark .hero-ledger-row,
:root.dark .auth-trust span,
:root.dark .scroll-story article,
:root.dark .site-footer,
:root.dark .head-user,
:root.dark .theme-toggle,
:root.dark .app:not(.admin) aside,
:root.dark .copy-lines,
:root.dark .ledger-widget > div,
:root.dark .operator-logo-grid span,
:root.dark .phone-input strong,
:root.dark .send-amount-row strong,
:root.dark .recipient-box,
:root.dark .checkout-total,
:root.dark .ref-stats span,
:root.dark .card-detail-list div,
:root.dark .reveal-panel div {
  color: var(--cw-ink);
  background: var(--cw-panel);
  border-color: var(--cw-line);
}

:root.dark label span,
:root.dark .muted,
:root.dark .row.head,
:root.dark .gift-card p,
:root.dark .gift-card strong,
:root.dark .wallet-tile span,
:root.dark .wallet-tile small {
  color: var(--cw-muted);
}

:root.dark .row {
  border-color: var(--cw-line);
}

:root.dark .gift-card h3,
:root.dark .ref-stats b,
:root.dark .brand-logo,
:root.dark .top-menu,
:root.dark .top-actions > a:not(.primary),
:root.dark .button-link.ghost,
:root.dark .ghost {
  color: var(--cw-ink);
}

/* Responsive */
@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: auto auto;
  }

  .top-menu {
    display: none;
  }

  .hero.privacy-hero,
  .dashboard-metrics,
  .dashboard-main-row,
  .dashboard-lower-grid,
  .split,
  .send-page,
  .money-action-page,
  .topup-page,
  .cards-overview,
  .cards-overview.create-open,
  .steps-band,
  .security-band {
    grid-template-columns: 1fr;
  }

  .cards-overview:not(.create-open) .create-card-panel {
    display: none;
  }

  .create-card-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps-band ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps-band li:not(:last-child)::after {
    display: none;
  }
}

/* Action feedback and provider flows */
.ajax-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 16px;
  border: 1px solid rgba(16, 185, 129, .28);
  border-radius: 14px;
  color: #053f2c;
  background: #ecfff5;
  box-shadow: 0 18px 50px rgba(5, 63, 44, .18);
  font-weight: 850;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.ajax-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.ajax-toast.error {
  color: #7f1d1d;
  border-color: rgba(239, 68, 68, .28);
  background: #fff1f2;
}

.button-spinner {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  vertical-align: -3px;
  animation: cvc-spin .7s linear infinite;
}

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

form.is-loading {
  opacity: .82;
}

.reveal-card-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  margin-left: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(5, 150, 105, .22);
  border-radius: 999px;
  color: var(--cw-green);
  background: rgba(220, 252, 231, .7);
  font-size: 12px;
  font-weight: 900;
}

.ajax-reveal-panel {
  margin-top: 14px;
}

.operator-logo-grid {
  display: none !important;
}

.money-flow-page.topup-page {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
  gap: 26px;
  align-items: start;
}

.topup-flow-card {
  display: grid;
  gap: 18px;
  padding: 34px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 8%, rgba(16, 185, 129, .13), transparent 18rem),
    rgba(255,255,255,.88);
}

.topup-country-filter {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.topup-country-filter label,
.operator-select-field {
  display: grid;
  gap: 8px;
}

.topup-country-filter span,
.operator-select-field > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cw-ink);
  font-weight: 900;
}

.operator-select-wrap {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: center;
}

.operator-selected-logo {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cw-line);
  border-radius: 14px;
  background: rgba(220,252,231,.72);
}

.operator-selected-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.topup-form {
  display: grid;
  gap: 16px;
}

.topup-form button,
.topup-country-filter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gift-market-optionb {
  display: block;
}

.gift-market-main,
.gift-checkout-main,
.gift-checkout-side article {
  background:
    radial-gradient(circle at 82% 4%, rgba(16,185,129,.14), transparent 18rem),
    rgba(255,255,255,.9);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

.gift-market-main {
  padding: 28px;
}

.gift-grid.optionb {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 18px;
}

.gift-card.optionb {
  position: relative;
  min-height: 184px;
  padding: 0 0 14px;
  overflow: hidden;
  border-radius: 18px;
  text-decoration: none;
}

.gift-card.optionb img {
  width: 100%;
  height: 112px;
  padding: 18px;
  object-fit: contain;
  border-radius: 0;
}

.gift-card.optionb i {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(15,23,42,.7);
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
}

.gift-card.optionb h3,
.gift-card.optionb p {
  padding-inline: 12px;
}

.gift-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.gift-benefits span {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--cw-line);
  border-radius: 16px;
  background: rgba(248,252,250,.8);
}

.gift-benefits .ico {
  grid-row: span 2;
  color: var(--cw-green);
}

.gift-benefits b {
  color: var(--cw-ink);
}

.gift-benefits small {
  color: var(--cw-muted);
}

:root.dark .ajax-toast {
  color: #dfffee;
  background: #073b2a;
}

:root.dark .ajax-toast.error {
  color: #fee2e2;
  background: #4c1010;
}

:root.dark .topup-flow-card,
:root.dark .gift-market-main,
:root.dark .gift-checkout-main,
:root.dark .gift-checkout-side article,
:root.dark .gift-benefits span,
:root.dark .operator-selected-logo,
:root.dark .summary-ledger-chart,
:root.dark .ledger-chart-tip {
  color: var(--cw-ink);
  background: var(--cw-panel);
  border-color: var(--cw-line);
}

:root.dark .dashboard-ledger-chart {
  background: linear-gradient(180deg, rgba(16,185,129,.10), rgba(255,255,255,.02));
}

@media (max-width: 980px) {
  .dashboard-balance-card {
    grid-template-columns: 1fr;
  }

  .dashboard-ledger-chart {
    width: 100%;
  }

  .money-flow-page.topup-page,
  .topup-country-filter {
    grid-template-columns: 1fr;
  }

  .gift-grid.optionb {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gift-benefits {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .gift-grid.optionb,
  .gift-benefits {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  :root {
    --cw-sidebar: 1fr;
  }

  .topbar,
  .hero,
  .product-band,
  .feature-grid,
  .steps-band,
  .security-band {
    width: min(100% - 28px, var(--cw-content));
  }

  .topbar {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 14px 0;
  }

  .top-actions {
    width: 100%;
    justify-content: space-between;
  }

  .hero.privacy-hero {
    min-height: auto;
    padding-top: 28px;
  }

  .hero h1 {
    font-size: clamp(48px, 14vw, 72px);
  }

  .hero-points,
  .hero-widget-grid,
  .product-band.scroll-story,
  .feature-grid,
  .security-list,
  .form-panel form,
  .settings-grid,
  .card-summary-grid,
  .card-insights,
  .card-detail-list,
  .catalog-filter,
  .ref-stats,
  .metrics,
  .steps-band ol {
    grid-template-columns: 1fr;
  }

  .scroll-story .section-title,
  .cards-overview-head,
  .panel-title {
    display: grid;
  }

  .scroll-card-clone {
    display: none;
  }

  .hero-device .floating-card {
    transform: none;
  }

  .app,
  body.sidebar-collapsed .app {
    grid-template-columns: 1fr;
  }

  .app aside,
  body.sidebar-collapsed aside {
    position: fixed;
    z-index: 50;
    inset: 0 auto 0 0;
    width: min(300px, 88vw);
    transform: translateX(-105%);
    transition: transform .22s ease;
  }

  body.sidebar-open .app aside {
    transform: translateX(0);
  }

  .workspace {
    padding: 18px;
  }

  .mobile-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -18px -18px 6px;
    padding: 10px;
    border-bottom: 1px solid var(--cw-line);
    background: rgba(247,250,246,.90);
    backdrop-filter: blur(16px);
  }

  .head-actions {
    display: none;
  }

  .site-footer {
    grid-template-columns: 1fr;
    padding-inline: 18px;
  }

  .site-footer nav {
    flex-wrap: wrap;
  }

  .inline-adjust {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .hero-device {
    padding: 16px;
    min-height: 450px;
  }

  .panel,
  .balance-hero {
    padding: 18px;
  }

  .button-row,
  .hero-actions,
  .balance-hero div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .row {
    min-width: 680px;
  }
}

/* Dashboard image match pass */
.app:not(.admin) {
  grid-template-columns: var(--cw-sidebar) minmax(0, 1fr);
  padding: 14px;
  background: #fbfdfb;
}

.app:not(.admin)::before {
  content: none;
}

.app:not(.admin) aside {
  height: calc(100vh - 28px);
  top: 14px;
  padding: 30px 22px 22px;
  background: rgba(255, 255, 255, .82);
  border-right: 1px solid #e6eee9;
  box-shadow: none;
  justify-content: flex-start;
}

.app:not(.admin) .side-top {
  margin-bottom: 22px;
}

.app:not(.admin) .side-top .brand-logo {
  font-size: 20px;
  line-height: .95;
  gap: 12px;
}

.app:not(.admin) .side-top .brand-logo i,
.app:not(.admin) .side-top .brand-logo img {
  width: 34px;
  height: 34px;
}

.app:not(.admin) .side-top .brand-logo.has-image img {
  width: auto;
  height: 38px;
  max-width: 170px;
}

.app:not(.admin) .sidebar-toggle {
  display: none;
}

.app:not(.admin) .side-nav {
  gap: 9px;
  flex: 1;
  align-content: start;
}

.app:not(.admin) .side-nav a,
.app:not(.admin) aside a:not(.brand) {
  min-height: 40px;
  padding: 10px 13px;
  border-radius: 10px;
  color: #5f6e7f;
  font-size: 15px;
  font-weight: 760;
}

.app:not(.admin) .side-nav a .ico {
  width: 17px;
  height: 17px;
  color: #7a8898;
  stroke-width: 2.15;
  transition: color .16s ease, transform .16s ease;
}

.app:not(.admin) .side-nav a::before {
  content: "";
  width: 0;
  height: 0;
}

.app:not(.admin) .side-nav a.active {
  color: #087a4d;
  background: #eaf6ef;
}

.app:not(.admin) .side-nav a.active .ico,
.app:not(.admin) .side-nav a:hover .ico {
  color: #087a4d;
  transform: translateY(-1px);
}

.workspace {
  width: 100%;
  max-width: none;
  padding: 34px clamp(24px, 3vw, 42px) 22px;
}

.page-head {
  min-height: 58px;
  margin-bottom: 8px;
}

.page-head h1 {
  font-size: 25px;
  font-weight: 760;
}

.page-head .eyebrow {
  color: #6bc38f;
  font-size: 10px;
  text-transform: none;
}

.head-actions {
  gap: 14px;
}

.theme-toggle {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 999px;
  color: #667085;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.head-user {
  min-height: 36px;
  width: 36px;
  padding: 0;
  border: 0;
  background: #fff0f0;
  box-shadow: none;
}

.head-user span {
  display: none;
}

.head-user b {
  width: 36px;
  height: 36px;
  color: #b35656;
  background: #fff0f0;
  font-size: 12px;
}

.dashboard-optionb {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.dashboard-optionb .panel,
.dashboard-optionb .wallet-tile,
.dashboard-optionb .balance-hero {
  border: 1px solid #e3ebe7;
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .045);
}

.dashboard-balance-card {
  min-height: 186px;
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: center;
  padding: 30px;
  color: #0a1424;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .045);
}

.dashboard-balance-card span,
.dashboard-balance-card small {
  color: #667085;
  font-size: 13px;
}

.dashboard-balance-card .balance-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.dashboard-balance-card strong {
  margin-top: 6px;
  color: #06111f;
  font-size: 40px;
  font-weight: 760;
}

.dashboard-balance-card::after {
  display: none;
}

.dashboard-balance-card .balance-actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
}

.dashboard-balance-card a {
  flex: 0 0 auto;
  min-width: 104px;
  padding: 10px 16px;
  border-radius: 8px;
  color: #fff;
  background: #087a4d;
  box-shadow: 0 10px 22px rgba(8, 122, 77, .18);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  line-height: 1;
}

.dashboard-balance-card a .ico {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  transform: translateY(.5px);
}

.dashboard-balance-card a + a {
  color: #263445;
  background: #fff;
  border: 1px solid #e3ebe7;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.ledger-chart {
  position: relative;
  min-height: 132px;
  border-radius: 16px;
}

.ledger-chart svg {
  width: 100%;
  height: 132px;
  display: block;
  overflow: visible;
}

.ledger-chart-line {
  fill: none;
  stroke: #10b981;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  animation: ledgerLineDraw 1.15s ease forwards;
  filter: drop-shadow(0 8px 12px rgba(16, 185, 129, .18));
}

.ledger-chart-area {
  opacity: .9;
}

.ledger-chart circle {
  fill: #ffffff;
  stroke: #10b981;
  stroke-width: 3;
  opacity: .18;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .16s ease, transform .16s ease, stroke-width .16s ease;
  cursor: pointer;
}

.ledger-chart:hover circle,
.ledger-chart circle:hover {
  opacity: 1;
}

.ledger-chart circle:hover {
  transform: scale(1.45);
  stroke-width: 4;
}

.ledger-chart-tip {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid rgba(8, 122, 77, .14);
  border-radius: 10px;
  color: #0f172a;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -118%);
  transition: opacity .12s ease;
}

.ledger-chart-tip.show {
  opacity: 1;
}

.dashboard-ledger-chart {
  display: block;
  min-height: 150px;
  margin-top: 0;
  padding: 10px 4px 0;
  background:
    radial-gradient(circle at 85% 10%, rgba(16,185,129,.13), transparent 12rem),
    linear-gradient(180deg, rgba(236,253,245,.72), rgba(255,255,255,.34));
}

.dashboard-ledger-chart svg {
  height: 150px;
}

.summary-ledger-chart {
  display: block;
  margin-top: 16px;
  padding: 8px;
  border: 1px solid #e6eee9;
  background: linear-gradient(180deg, #f8fffb, #ffffff);
}

:root.dark .summary-ledger-chart,
:root.dark .ledger-chart-tip {
  color: var(--cw-ink);
  background: var(--cw-panel);
  border-color: var(--cw-line);
}

:root.dark .dashboard-ledger-chart {
  background: linear-gradient(180deg, rgba(16,185,129,.10), rgba(255,255,255,.02));
}

@keyframes ledgerLineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.dashboard-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-stat-row .wallet-tile {
  min-height: 116px;
  grid-template-columns: 48px 1fr;
  align-content: center;
  column-gap: 14px;
  padding: 22px;
}

.dashboard-stat-row .wallet-tile i {
  grid-row: span 3;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #087a4d;
  background: linear-gradient(135deg, #e9fff3, #d6f5e3);
}

.dashboard-stat-row .wallet-tile.warn i {
  color: #d84b63;
  background: linear-gradient(135deg, #fff0f3, #ffe2e7);
}

.dashboard-stat-row .wallet-tile:nth-child(3) i {
  color: #0d9488;
  background: linear-gradient(135deg, #e4fffb, #d6f7f1);
}

.dashboard-stat-row .wallet-tile i .ico,
.dashboard-action-row .quick-actions a .ico,
.dashboard-tx-list i .ico {
  width: 19px;
  height: 19px;
}

.dashboard-stat-row .wallet-tile span {
  color: #5f6e7f;
  font-size: 14px;
}

.dashboard-stat-row .wallet-tile strong {
  color: #0a1424;
  font-size: 24px;
}

.dashboard-stat-row .wallet-tile small {
  color: #667085;
  font-size: 13px;
}

.dashboard-action-row,
.dashboard-bottom-row {
  display: grid;
  grid-template-columns: minmax(520px, 1.6fr) minmax(320px, .82fr);
  gap: 16px;
  align-items: stretch;
}

.dashboard-action-row .quick-actions {
  min-height: 150px;
  grid-template-columns: repeat(6, minmax(74px, 1fr));
  align-content: center;
  padding: 22px 24px;
}

.dashboard-action-row .quick-actions h2 {
  margin-bottom: 10px;
}

.dashboard-action-row .quick-actions div {
  gap: 10px;
  font-size: 13px;
  min-width: 0;
  white-space: nowrap;
}

.dashboard-action-row .quick-actions a {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #087a4d;
  background: linear-gradient(135deg, #ecfff4, #dff8ea);
  box-shadow: none;
}

.dashboard-action-row .quick-actions div:nth-of-type(2) a {
  color: #0f8f67;
  background: linear-gradient(135deg, #e8fff4, #d8f8ea);
}

.dashboard-action-row .quick-actions div:nth-of-type(3) a {
  color: #15803d;
  background: linear-gradient(135deg, #ecfdf3, #dcfce7);
}

.dashboard-action-row .quick-actions div:nth-of-type(4) a {
  color: #0b7a4d;
  background: linear-gradient(135deg, #e9fff3, #d7f5e5);
}

.dashboard-action-row .quick-actions div:nth-of-type(5) a {
  color: #1d4ed8;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.dashboard-action-row .quick-actions div:nth-of-type(6) a {
  color: #0f766e;
  background: linear-gradient(135deg, #ecfeff, #ccfbf1);
}

.dashboard-action-row .quick-send-widget {
  min-height: 150px;
  padding: 20px;
}

.dashboard-action-row .quick-send-widget h2 {
  margin-bottom: 2px;
}

.dashboard-action-row .quick-send-widget form {
  gap: 8px;
}

.dashboard-action-row .quick-send-widget input {
  min-height: 30px;
  border-radius: 6px;
  font-size: 12px;
}

.dashboard-action-row .quick-send-widget button {
  min-height: 32px;
  width: 100%;
  border-radius: 6px;
  background: #087a4d;
  font-size: 12px;
}

.dashboard-bottom-row .card-summary,
.dashboard-bottom-row .dashboard-latest {
  min-height: 226px;
  padding: 20px;
}

.dashboard-bottom-row .panel-title h2 {
  font-size: 15px;
}

.dashboard-bottom-row .panel-title a {
  color: #087a4d;
  font-size: 11px;
}

.dashboard-bottom-row .card-summary-grid {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.dashboard-bottom-row .card-art {
  max-width: none;
  border-radius: 10px;
  padding: 14px;
  box-shadow: none;
}

.dashboard-bottom-row .card-art > strong {
  font-size: clamp(15px, 1.6vw, 19px);
  overflow-wrap: anywhere;
}

.dashboard-bottom-row .card-top,
.dashboard-bottom-row .card-meta,
.dashboard-bottom-row .card-balance {
  font-size: 10px;
}

.dashboard-bottom-row .chip {
  width: 28px;
  height: 22px;
  border-radius: 5px;
}

.dashboard-bottom-row .network-logo {
  font-size: 13px;
}

.dashboard-tx-list {
  display: grid;
  gap: 0;
}

.dashboard-tx-list > div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #edf2ef;
}

.dashboard-tx-list i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #667085;
  background: #f4f7f5;
  font-style: normal;
}

.dashboard-tx-list b {
  display: block;
  color: #182230;
  font-size: 12px;
  font-weight: 850;
}

.dashboard-tx-list small {
  color: #667085;
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.dashboard-tx-list strong {
  font-size: 12px;
}

.site-footer.app {
  display: none;
}

/* Send money page - Option B screenshot match */
.send-optionb {
  position: relative;
  min-height: calc(100vh - 130px);
  display: grid;
  grid-template-columns: minmax(520px, .98fr) minmax(290px, 340px);
  gap: 62px;
  align-items: center;
  padding: 10px clamp(22px, 4vw, 56px) 48px;
  overflow: hidden;
}

.send-optionb::before {
  content: "";
  position: absolute;
  inset: auto -10% -18% 18%;
  height: 330px;
  opacity: .52;
  background:
    repeating-radial-gradient(ellipse at center, rgba(9, 92, 64, .09) 0 1px, transparent 1px 13px);
  transform: rotate(-7deg);
  pointer-events: none;
}

.send-optionb::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 280px;
  left: 35%;
  top: 22%;
  background: radial-gradient(circle, rgba(10, 163, 99, .16), transparent 62%);
  filter: blur(8px);
  pointer-events: none;
}

.send-form-wrap,
.send-protected-card {
  position: relative;
  z-index: 1;
}

.send-title-block {
  margin-bottom: 32px;
}

.send-title-block h2 {
  margin: 0 0 10px;
  color: #111827;
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 780;
}

.send-title-block p {
  margin: 0;
  color: #7b8797;
  font-size: 14px;
}

.send-money-form {
  width: min(100%, 560px);
  display: grid;
  gap: 28px;
}

.send-tabs {
  width: 310px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid #eef2f0;
  border-radius: 10px;
  background: rgba(255,255,255,.56);
  box-shadow: 0 10px 25px rgba(15, 23, 42, .025);
  overflow: hidden;
}

.send-tabs button {
  min-height: 50px;
  color: #374151;
  background: rgba(255,255,255,.58);
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}

.send-tabs button.active {
  position: relative;
  color: #087a4d;
  background: #fff;
}

.send-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #087a4d;
}

.send-field {
  display: grid;
  gap: 10px;
  color: #2f3a4a;
  font-size: 14px;
  font-weight: 800;
}

.send-field > span {
  color: #2f3a4a;
  font-size: 14px;
}

.send-field span em {
  color: #8a95a4;
  font-style: normal;
  font-weight: 650;
}

.send-field > div {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid #dfe8e3;
  border-radius: 10px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .035);
}

.send-field input {
  min-height: 54px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #121a2b;
  font-size: 16px;
  font-weight: 650;
}

.send-field input::placeholder {
  color: #9aa4b2;
}

.send-field i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #6f7c8a;
  font-style: normal;
}

.field-icon-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #6f7c8a;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.field-icon-button:hover {
  color: #087a4d;
  background: #eaf6ef;
  box-shadow: none;
}

.field-icon-button .ico {
  width: 18px;
  height: 18px;
}

.send-field b {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  color: #182230;
  background: #fff;
  font-size: 14px;
}

.send-field b .ico {
  width: 15px;
  height: 15px;
  padding: 0;
  color: #566273;
  border-radius: 0;
  background: transparent;
}

.send-field > small {
  color: #7b8797;
  font-size: 13px;
  font-weight: 650;
}

.note-field div small {
  color: #8a95a4;
  font-size: 12px;
}

.send-continue {
  width: min(100%, 560px);
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 9px;
  background: linear-gradient(180deg, #0b8f59, #087a4d);
  box-shadow: 0 16px 34px rgba(8, 122, 77, .18);
  font-size: 16px;
  font-weight: 860;
}

.send-protected-card {
  min-height: 610px;
  display: grid;
  align-content: center;
  gap: 22px;
  padding: 42px 36px;
  border: 1px solid #e6eee9;
  border-radius: 22px;
  background:
    repeating-radial-gradient(circle at 58% 12%, rgba(8, 122, 77, .075) 0 1px, transparent 1px 10px),
    rgba(255,255,255,.84);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .065);
}

.security-emblem {
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  justify-self: center;
  margin-bottom: 16px;
  color: #087a4d;
  background:
    radial-gradient(circle, rgba(10, 163, 99, .20), transparent 63%),
    #eaf8ef;
  border-radius: 36px;
  box-shadow: inset 0 0 0 12px rgba(10, 163, 99, .08);
}

.security-emblem .ico {
  width: 50px;
  height: 50px;
  padding: 12px;
  color: #fff;
  border-radius: 14px;
  background: linear-gradient(180deg, #0a9d62, #087a4d);
  filter: drop-shadow(0 8px 16px rgba(8, 122, 77, .22));
}

.send-protected-card h2 {
  margin: 0;
  text-align: center;
  font-size: 18px;
}

.send-protected-card ul {
  display: grid;
  gap: 22px;
  margin: 10px 0 6px;
  padding: 0;
  list-style: none;
}

.send-protected-card li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  align-items: start;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.5;
}

.send-protected-card li .ico {
  width: 18px;
  height: 18px;
  color: #0a9d62;
  stroke-width: 2.8;
}

.send-protected-card > div:last-child {
  margin-top: 14px;
  padding-top: 24px;
  border-top: 1px solid #e6eee9;
}

.send-protected-card strong {
  display: block;
  color: #1f2937;
  font-size: 14px;
}

.send-protected-card p {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 13px;
}

/* Receive, add money and withdraw - Option B match */
.receive-optionb,
.add-money-optionb,
.withdraw-optionb {
  position: relative;
  min-height: calc(100vh - 128px);
  display: grid;
  grid-template-columns: minmax(520px, .98fr) minmax(292px, 340px);
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
  padding: 10px clamp(22px, 4vw, 58px) 48px;
  overflow: hidden;
}

.receive-optionb::before,
.add-money-optionb::before,
.withdraw-optionb::before {
  content: "";
  position: absolute;
  inset: 18% -8% -8% 5%;
  opacity: .58;
  background:
    repeating-radial-gradient(ellipse at 54% 52%, transparent 0 12px, rgba(16, 126, 82, .07) 13px 14px, transparent 15px 28px);
  pointer-events: none;
}

.receive-optionb::after,
.add-money-optionb::after,
.withdraw-optionb::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 360px;
  right: 18%;
  top: 13%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(28, 185, 112, .14), transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}

.receive-main,
.money-form-wrap,
.receive-steps-card,
.money-summary-card {
  position: relative;
  z-index: 1;
}

.receive-main,
.money-form-wrap {
  width: min(100%, 580px);
}

.receive-tabs {
  margin-bottom: 30px;
}

.receive-card {
  display: grid;
  gap: 22px;
  padding: 26px;
  border: 1px solid #e3ebe7;
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .055);
}

.receive-card .send-field > div {
  min-height: 56px;
}

.receive-qr-block {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-top: 10px;
}

.receive-qr-block strong {
  color: #1f2937;
  font-size: 15px;
  font-weight: 820;
}

.receive-qr-block img {
  width: 176px;
  height: 176px;
  padding: 10px;
  border: 1px solid #e6eee9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.receive-qr-block > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.receive-qr-block .button-link {
  min-width: 128px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #334155;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #e3ebe7;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 780;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.receive-qr-block .button-link .ico,
.send-continue .ico {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.receive-steps-card,
.money-summary-card {
  min-height: 410px;
  padding: 34px 30px;
  border: 1px solid #e6eee9;
  border-radius: 22px;
  background:
    repeating-radial-gradient(circle at 58% 14%, rgba(8, 122, 77, .055) 0 1px, transparent 1px 10px),
    rgba(255,255,255,.84);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .065);
}

.receive-steps-card h2,
.money-summary-card h2 {
  margin: 0;
  color: #111827;
  text-align: center;
  font-size: 17px;
  font-weight: 850;
}

.receive-steps-card ol {
  display: grid;
  gap: 0;
  margin: 42px 0 28px;
  padding: 0;
  list-style: none;
}

.receive-steps-card li {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  min-height: 86px;
  color: #334155;
  font-size: 14px;
  line-height: 1.45;
}

.receive-steps-card li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 42px;
  bottom: 4px;
  border-left: 1px solid #e3ebe7;
}

.receive-steps-card li b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #087a4d;
  background: #eaf6ef;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 850;
}

.receive-steps-card li span {
  align-self: center;
}

.receive-steps-card p {
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid #e6eee9;
  color: #6b7280;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
}

.add-money-form,
.withdraw-form {
  display: grid;
  gap: 20px;
}

.gateway-picker-field > .gateway-picker {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gateway-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.gateway-picker-trigger {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 14px;
  color: #172033;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #dfe8e3;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .035);
  font-size: 15px;
  font-weight: 800;
  text-align: left;
}

.gateway-picker-trigger:hover,
.gateway-picker-trigger:focus-visible,
.gateway-picker.open .gateway-picker-trigger {
  transform: none;
  color: #172033;
  background: #fff;
  border-color: rgba(8, 122, 77, .42);
  box-shadow: 0 0 0 4px rgba(8, 122, 77, .08), 0 14px 34px rgba(15, 23, 42, .06);
  outline: none;
}

.gateway-picker-current {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.gateway-picker-current strong {
  overflow: hidden;
  color: inherit;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gateway-picker-trigger > i {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #758294;
  transition: transform .18s ease;
}

.gateway-picker.open .gateway-picker-trigger > i { transform: rotate(180deg); }

.gateway-logo-wrap {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 5px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 10px;
  background: #fff;
}

.gateway-logo-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.gateway-logo-wrap.bkash {
  border-color: rgba(226, 0, 94, .15);
  background: #e6005e;
}

.gateway-logo-wrap.bkash img { border-radius: 5px; }
.gateway-logo-wrap.nowpayments { padding: 4px; background: #0b1220; }

.gateway-picker-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid #dfe8e3;
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .14);
  backdrop-filter: blur(18px);
}

.gateway-picker-menu[hidden] { display: none; }

.gateway-picker-option {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 7px 9px;
  color: #172033;
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  text-align: left;
}

.gateway-picker-option:hover,
.gateway-picker-option:focus-visible,
.gateway-picker-option.active {
  transform: none;
  color: #172033;
  background: #edf8f2;
  box-shadow: none;
  outline: none;
}

.gateway-picker-option > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.gateway-picker-option .withdraw-picker-option-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.gateway-picker-option .withdraw-picker-option-copy strong,
.gateway-picker-option .withdraw-picker-option-copy small {
  display: block;
  width: 100%;
  line-height: 1.25;
}

.gateway-picker-option strong {
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gateway-picker-option small {
  overflow: hidden;
  color: #7b8797;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gateway-picker-option > .ico {
  width: 18px;
  height: 18px;
  color: #078052;
  opacity: 0;
}

.gateway-picker-option.active > .ico { opacity: 1; }

.amount-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.amount-presets button {
  min-height: 46px;
  color: #334155;
  background: rgba(255,255,255,.82);
  border: 1px solid #e3ebe7;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .035);
  font-size: 14px;
  font-weight: 780;
}

.amount-presets button.active {
  color: #087a4d;
  background: rgba(255,255,255,.94);
  border-color: rgba(8, 122, 77, .45);
  box-shadow: inset 0 0 0 1px rgba(8, 122, 77, .28), 0 10px 24px rgba(8, 122, 77, .06);
}

.pay-line {
  margin: 8px 0 26px;
  color: #1f2937;
  text-align: center;
  font-size: 15px;
}

.pay-line strong {
  font-weight: 820;
}

.now-payments {
  margin: 8px 0 0;
  color: #7b8797;
  text-align: center;
  font-size: 17px;
}

.now-payments b {
  color: #1683ff;
  font-weight: 850;
}

.summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -4px -30px 26px;
  padding: 0 30px 26px;
  border-bottom: 1px solid #e6eee9;
}

.summary-head h2 {
  text-align: left;
}

.summary-head span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #087a4d;
  background: #eaf6ef;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.summary-head span .ico {
  width: 13px;
  height: 13px;
}

.money-summary-card dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  margin: 0;
  color: #2f3a4a;
  font-size: 14px;
}

.money-summary-card dt {
  color: #4b5563;
}

.money-summary-card dd {
  margin: 0;
  color: #1f2937;
  text-align: right;
  font-weight: 760;
}

.money-summary-card dd:first-of-type {
  grid-column: 1 / -1;
  margin: 6px 0 10px;
  text-align: left;
}

.money-summary-card dd:first-of-type strong {
  color: #087a4d;
  font-size: 34px;
  font-weight: 760;
}

.withdraw-summary dd:first-of-type strong,
.withdraw-summary dd:nth-of-type(4) strong {
  color: #111827;
}

.money-summary-card > p {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: center;
  margin: 34px 0 0;
  padding-top: 24px;
  border-top: 1px solid #e6eee9;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.35;
}

.money-summary-card > p .ico {
  width: 36px;
  height: 36px;
  padding: 9px;
  color: #087a4d;
  background: #eaf6ef;
  border-radius: 999px;
}

.withdraw-form .send-field > small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.withdraw-form .send-field > small button {
  min-height: 36px;
  padding: 0 16px;
  color: #087a4d;
  background: #eaf6ef;
  border-radius: 8px;
  box-shadow: none;
  font-size: 12px;
}

.withdraw-form select {
  width: 100%;
  min-height: 54px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #121a2b;
  font-size: 16px;
  font-weight: 650;
  appearance: none;
}

.withdraw-form .send-field i {
  color: #6f7c8a;
}

@media (max-width: 1180px) {
  .gift-grid.optionb {
    grid-template-columns: repeat(3, 1fr);
  }

  .gift-checkout-optionb,
  .transactions-optionb,
  .account-optionb,
  .auth-optionb {
    grid-template-columns: 1fr;
  }

  .account-security-card,
  .account-edit-card {
    grid-column: auto;
  }

  .cards-optionb,
  .cards-optionb.create-open {
    grid-template-columns: 1fr;
  }

  .cards-optionb:not(.create-open) .create-card-panel {
    display: none;
  }

  .card-overview-grid {
    grid-template-columns: 1fr;
  }

  .transaction-range-filter {
    grid-template-columns: 1fr 1fr;
  }

  .send-optionb {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }

  .send-money-form {
    width: 100%;
  }

  .send-protected-card {
    min-height: 0;
  }

  .receive-optionb,
  .add-money-optionb,
  .withdraw-optionb {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }

  .receive-main,
  .money-form-wrap {
    width: 100%;
  }

  .receive-steps-card,
  .money-summary-card {
    min-height: 0;
  }
}

@media (max-width: 1180px) {
  .app:not(.admin) {
    grid-template-columns: 224px minmax(0, 1fr);
  }

  .workspace {
    max-width: none;
  }

  .dashboard-action-row,
  .dashboard-bottom-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .gift-grid.optionb,
  .gift-benefits,
  .public-content-grid {
    grid-template-columns: 1fr;
  }

  .gift-filter-row,
  .transaction-toolbar,
  .transaction-range-filter,
  .checkout-product-card,
  .ref-stats {
    grid-template-columns: 1fr;
  }

  .auth-optionb {
    padding: 18px;
  }

  .auth-form-card {
    padding: 24px;
  }

  .app:not(.admin),
  body.sidebar-collapsed .app:not(.admin) {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .app:not(.admin)::before {
    display: none;
  }

  .app:not(.admin) aside,
  body.sidebar-collapsed .app:not(.admin) aside {
    height: 100vh;
    top: 0;
  }

  .app:not(.admin) .sidebar-toggle {
    display: inline-flex;
  }

  .workspace {
    padding: 18px;
  }

  .dashboard-stat-row,
  .dashboard-action-row .quick-actions,
  .dashboard-bottom-row .card-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* Last-mile public/auth override: keep this at EOF so the reference redesign wins. */
.homepage-optionb {
  padding: 10px;
  background: radial-gradient(circle at 14% 2%, rgba(188, 255, 111, .25), transparent 22rem), radial-gradient(circle at 85% 12%, rgba(26, 173, 112, .16), transparent 24rem), #f4f7f3;
}

.home-frame {
  width: min(1720px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(15, 31, 25, .08);
  border-radius: 18px;
  background: radial-gradient(circle at 82% 24%, rgba(189, 255, 140, .24), transparent 24rem), linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,254,251,.96));
  box-shadow: 0 24px 70px rgba(15, 31, 25, .08);
}

.homepage-optionb .topbar,
.homepage-optionb .home-hero,
.homepage-optionb .home-story,
.homepage-optionb .wallet-support-strip,
.homepage-optionb .merchant-strip,
.homepage-optionb .steps-band,
.homepage-optionb .feature-grid,
.homepage-optionb .security-band {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.homepage-optionb .home-topbar {
  height: 82px;
  padding: 0 clamp(28px, 4vw, 72px);
  border-bottom: 1px solid rgba(15, 31, 25, .08);
}

.homepage-optionb .top-menu {
  gap: 44px;
  color: #172033;
  font-size: 12px;
  font-weight: 850;
}

.homepage-optionb .nav-pill,
.homepage-optionb .primary,
.homepage-optionb .button-link {
  min-height: 38px;
  border-radius: 999px;
  padding: 9px 18px;
}

.homepage-optionb .primary,
.auth-optionb .auth-form-card button[type="submit"] {
  color: #fff;
  background: linear-gradient(180deg, #0c9a61, #057447);
  box-shadow: 0 13px 28px rgba(5, 116, 71, .24), inset 0 1px 0 rgba(255,255,255,.22);
}

.home-hero {
  min-height: 590px;
  display: grid;
  grid-template-columns: minmax(620px, 1.12fr) minmax(430px, .88fr);
  gap: clamp(36px, 6vw, 92px);
  align-items: center;
  padding: 86px clamp(28px, 4vw, 72px) 62px;
}

.homepage-optionb .hero-kicker {
  margin-bottom: 18px;
  color: #07834f;
  background: #eafff0;
  border-color: rgba(7, 131, 79, .12);
  box-shadow: none;
}

.homepage-optionb .hero-copy h1 {
  max-width: 760px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 7.2vw, 92px);
  font-weight: 500;
  line-height: .94;
}

.homepage-optionb .hero-copy h1 em {
  color: #087a4d;
  font-style: normal;
}

.homepage-optionb .hero-copy > p {
  max-width: 680px;
  margin: 22px 0 0;
  color: #42516a;
  font-size: 16px;
  line-height: 1.65;
}

.homepage-optionb .hero-points {
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.homepage-optionb .hero-points li {
  min-height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.homepage-optionb .hero-points .ico {
  width: 30px;
  height: 30px;
  padding: 8px;
  border-radius: 999px;
  color: #087a4d;
  background: #e9f8ed;
}

.home-card-scene {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
}

.home-card-scene::before,
.home-card-scene::after {
  content: "";
  position: absolute;
  width: 420px;
  aspect-ratio: 1;
  border: 1px solid rgba(8, 122, 77, .14);
  border-radius: 999px;
  transform: rotate(-18deg);
}

.home-card-scene::after {
  width: 300px;
  opacity: .68;
}

.home-floating-card {
  position: relative;
  z-index: 2;
  width: min(420px, 92%);
  filter: drop-shadow(0 30px 46px rgba(7, 63, 50, .20));
  animation: homeCardFloat 5.2s ease-in-out infinite;
}

.home-floating-card .card-art {
  aspect-ratio: 1.586 / 1;
  min-height: auto;
  transform: rotate(-11deg);
}

@keyframes homeCardFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(.2deg); }
  50% { transform: translate3d(0, -14px, 0) rotate(-1.4deg); }
}

.home-story {
  padding: 34px clamp(28px, 4vw, 72px) 36px;
  border-top: 1px solid rgba(15, 31, 25, .08);
}

.home-story .section-title {
  margin-bottom: 18px;
}

.home-story .section-title h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.story-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.story-board article {
  min-height: 154px;
  padding: 18px;
  border: 1px solid rgba(15, 31, 25, .08);
  border-radius: 12px;
  background: radial-gradient(circle at 80% 20%, rgba(188,255,111,.20), transparent 55%), rgba(255,255,255,.86);
  box-shadow: 0 16px 34px rgba(15, 31, 25, .045);
}

.story-board span {
  color: #087a4d;
  font-size: 12px;
  font-weight: 950;
}

.story-board p,
.story-board li {
  color: #43516a;
  font-size: 12px;
  line-height: 1.45;
}

.story-board ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.story-board li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.story-visual {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(8, 122, 77, .12);
  background: linear-gradient(135deg, rgba(234, 255, 240, .9), rgba(255,255,255,.76));
}

.story-visual .ico {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  padding: 12px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #0cc477, #087a4d);
  box-shadow: 0 14px 28px rgba(8, 122, 77, .16);
}

.story-lock-visual .ico {
  background: linear-gradient(135deg, #3b82f6, #0f766e);
}

.story-visual strong {
  color: #132033;
  font-size: 15px;
  font-weight: 950;
}

.wallet-support-strip,
.merchant-strip {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) 1.2fr;
  gap: 24px;
  align-items: center;
  padding: 32px clamp(28px, 4vw, 72px);
  border-top: 1px solid rgba(15, 31, 25, .08);
}

.wallet-support-strip h2,
.merchant-strip h2 {
  margin: 0;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.1;
}

.wallet-support-strip > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 12px;
}

.pay-logo,
.merchant-rail span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 31, 25, .08);
  border-radius: 999px;
  padding: 10px 18px;
  color: #111827;
  background: rgba(255,255,255,.86);
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(15, 31, 25, .045);
}

.google-pay { color: #1a73e8; }
.apple-pay { color: #111827; }
.visa-pay { color: #174ea6; }
.mc-pay { color: #e15d22; }

.merchant-strip p {
  max-width: 460px;
  margin: 8px 0 0;
  color: #526078;
}

.merchant-logo-slider {
  overflow: hidden;
  border-radius: 18px;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.merchant-rail {
  width: max-content;
  display: flex;
  gap: 12px;
  animation: merchantRail 24s linear infinite;
}

.merchant-rail span {
  min-width: 150px;
}

.merchant-rail img,
.pay-logo img {
  width: 24px;
  height: 24px;
  margin-right: 9px;
  object-fit: contain;
}

.merchant-rail img.aws-logo {
  width: 40px !important;
  height: 24px;
  flex: 0 0 40px;
  object-fit: contain;
}

@keyframes merchantRail {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.homepage-optionb .steps-band,
.homepage-optionb .feature-grid,
.homepage-optionb .security-band {
  border-radius: 0;
  padding-inline: clamp(28px, 4vw, 72px);
}

.homepage-optionb .feature-grid {
  padding-top: 30px;
  padding-bottom: 34px;
}

.homepage-optionb .feature-grid article {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 210px;
}

.feature-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  box-shadow: 0 18px 34px rgba(15, 31, 25, .12);
}

.feature-icon .ico {
  width: 30px;
  height: 30px;
  stroke-width: 2.2;
}

.feature-icon.green { background: linear-gradient(135deg, #0cc477, #087a4d); }
.feature-icon.blue { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.feature-icon.lime { background: linear-gradient(135deg, #a3e635, #16a34a); }
.feature-icon.mint { background: linear-gradient(135deg, #2dd4bf, #059669); }
.feature-icon.cyan { background: linear-gradient(135deg, #22d3ee, #0284c7); }
.feature-icon.amber { background: linear-gradient(135deg, #fbbf24, #f97316); }

@media (max-width: 1180px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr);
    gap: 34px;
  }
}

@media (max-width: 1040px) {
  .home-hero {
    grid-template-columns: 1fr;
  }

  .home-card-scene {
    min-height: 320px;
  }
}

/* My account cleanup */
.account-optionb:not(.admin-account-page) {
  grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr);
  align-items: start;
}

.account-optionb:not(.admin-account-page) .account-referral-card,
.account-optionb:not(.admin-account-page) .account-security-card,
.account-optionb:not(.admin-account-page) .account-password-card {
  grid-column: 2;
}

.account-optionb:not(.admin-account-page) .account-profile-card {
  grid-row: span 2;
}

.account-optionb:not(.admin-account-page) .account-edit-card {
  grid-column: 1 / -1;
}

.account-password-card {
  align-self: start;
}

.account-password-card.form-panel {
  display: grid;
  gap: 16px;
  min-height: 0;
}

.account-password-card h2 {
  margin: 0 0 4px;
}

.account-password-card .muted {
  margin: 0;
}

.account-password-card.form-panel form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
}

.account-password-card.form-panel label {
  min-width: 0;
}

.account-password-card.form-panel input {
  min-height: 42px;
}

.account-password-card.form-panel button {
  min-height: 42px;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .account-optionb:not(.admin-account-page),
  .account-password-card.form-panel form {
    grid-template-columns: 1fr;
  }

  .account-optionb:not(.admin-account-page) .account-referral-card,
  .account-optionb:not(.admin-account-page) .account-security-card,
  .account-optionb:not(.admin-account-page) .account-password-card,
  .account-optionb:not(.admin-account-page) .account-edit-card {
    grid-column: auto;
  }

  .account-optionb:not(.admin-account-page) .account-profile-card {
    grid-row: auto;
  }
}

.homepage-optionb .security-band {
  margin-bottom: 0;
}

.auth-optionb {
  position: relative;
  min-height: 100vh;
  grid-template-columns: minmax(260px, .78fr) minmax(420px, 1.18fr);
  gap: 46px;
  padding: clamp(30px, 5vw, 68px);
  background: radial-gradient(circle at 16% 18%, rgba(188,255,111,.18), transparent 23rem), radial-gradient(circle at 86% 68%, rgba(7, 131, 79, .20), transparent 30rem), linear-gradient(145deg, #fbfffc, #e7f7ed);
  overflow: hidden;
}

.auth-optionb::before,
.auth-optionb::after {
  content: "";
  position: absolute;
  inset: 5% auto auto 6%;
  width: 66vw;
  height: 66vw;
  max-width: 920px;
  max-height: 920px;
  border: 1px solid rgba(8, 122, 77, .10);
  border-radius: 42% 58% 55% 45%;
  transform: rotate(-18deg);
  pointer-events: none;
}

.auth-optionb::after {
  inset: auto -18% -34% auto;
  transform: rotate(22deg);
}

.auth-brand-panel,
.auth-panel {
  position: relative;
  z-index: 1;
}

.auth-form-card {
  width: min(100%, 470px);
  padding: 30px 34px 32px;
  border: 1px solid rgba(15, 31, 25, .08);
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 30px 90px rgba(15, 31, 25, .14);
}

.auth-form-card h2 {
  margin-bottom: 6px;
  font-size: 25px;
}

.auth-smart-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.auth-form-grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-smart-form label {
  display: block;
}

.auth-smart-form input {
  min-height: 46px;
  border-radius: 8px;
  background: rgba(255,255,255,.94);
}

.auth-smart-form input::placeholder {
  color: #7b8797;
  opacity: 1;
}

.auth-smart-form input:focus::placeholder {
  opacity: 0;
}

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.auth-consent a {
  color: #087a4d;
  font-weight: 900;
}

.auth-switch {
  margin-top: 18px;
  text-align: center;
}

.panda-watch {
  --eye-x: 0px;
  --eye-y: 0px;
  position: relative;
  width: 92px;
  height: 72px;
  margin: -6px auto 14px;
}

.panda-ear,
.panda-face {
  position: absolute;
  background: #111827;
}

.panda-ear {
  top: 3px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

.panda-ear.left { left: 12px; }
.panda-ear.right { right: 12px; }

.panda-face {
  inset: 10px 8px 0;
  border-radius: 48% 48% 44% 44%;
  background: #fff;
  border: 2px solid #111827;
  box-shadow: 0 10px 24px rgba(15, 31, 25, .08);
}

.panda-eye {
  position: absolute;
  top: 24px;
  width: 18px;
  height: 20px;
  border-radius: 999px;
  background: #111827;
}

.panda-eye::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 6px;
  left: 6px;
  border-radius: 999px;
  background: #fff;
  transform: translate(var(--eye-x), var(--eye-y));
  transition: transform .08s ease;
}

.panda-eye.left { left: 20px; }
.panda-eye.right { right: 20px; }

.panda-nose {
  position: absolute;
  left: 50%;
  top: 43px;
  width: 11px;
  height: 8px;
  border-radius: 999px;
  background: #111827;
  transform: translateX(-50%);
}

.panda-hand {
  position: absolute;
  top: 54px;
  width: 28px;
  height: 22px;
  border-radius: 999px 999px 8px 8px;
  background: #111827;
  opacity: 0;
  transform: translateY(14px);
  transition: transform .16s ease, opacity .16s ease;
}

.panda-hand.left { left: 12px; }
.panda-hand.right { right: 12px; }

.panda-watch.is-password .panda-hand {
  opacity: 1;
  transform: translateY(-19px);
}

.panda-watch.is-password .panda-eye::after {
  transform: translate(0, 0);
}

.card-slider {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(210px, 260px));
  overflow: visible;
  overscroll-behavior-inline: auto;
  scrollbar-width: none;
}

.card-slider::-webkit-scrollbar {
  display: none;
}

@media (max-width: 920px) {
  .homepage-optionb {
    padding: 12px;
  }

  .home-frame {
    border-radius: 14px;
  }

  .homepage-optionb .home-topbar {
    height: auto;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
  }

  .homepage-optionb .top-menu,
  .homepage-optionb .top-actions {
    justify-content: start;
    flex-wrap: wrap;
  }

  .home-hero,
  .wallet-support-strip,
  .merchant-strip {
    grid-template-columns: 1fr;
    padding-inline: 22px;
  }

  .homepage-optionb .hero-points,
  .story-board {
    grid-template-columns: 1fr;
  }

  .wallet-support-strip > div {
    justify-content: start;
  }

  .auth-optionb {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .homepage-optionb .hero-copy h1 {
    font-size: 52px;
  }

  .home-hero,
  .home-story,
  .wallet-support-strip,
  .merchant-strip,
  .homepage-optionb .steps-band,
  .homepage-optionb .feature-grid,
  .homepage-optionb .security-band {
    padding-inline: 16px;
  }

  .auth-form-grid.two {
    grid-template-columns: 1fr;
  }

  .auth-form-card {
    padding: 24px 20px;
  }
}

/* Final gift/account cleanup overrides. Keep page shells unframed. */
.gift-market-optionb,
.gift-checkout-optionb,
.account-optionb:not(.admin-account-page) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gift-market-main,
.gift-checkout-main {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gift-market-main > .panel-title { margin-bottom: 22px; }
.gift-market-main .gift-filter-row { margin-bottom: 20px; }
.gift-market-main .small-title {
  align-items: center;
  margin: 24px 0 18px;
  padding: 0;
}
.gift-market-main .small-title h3 { font-size: 18px; }
.gift-market-main .small-title a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-left: 18px;
  color: #087a4d;
  font-weight: 900;
}

.gift-card.optionb {
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}
.gift-card.optionb:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(15, 23, 42, .10);
}

.gift-checkout-optionb {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 28px;
}
.gift-checkout-main,
.gift-checkout-side article { box-shadow: none; }
.gift-checkout-main .checkout-product-card,
.gift-checkout-main .before-pay,
.gift-checkout-side article {
  border-color: rgba(15, 23, 42, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
}

.account-optionb:not(.admin-account-page) {
  grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr);
  gap: 18px;
}
.account-optionb:not(.admin-account-page) .account-password-card { grid-column: 1 / -1; }
.account-optionb:not(.admin-account-page) .account-profile-card { grid-row: span 2; }
.account-optionb:not(.admin-account-page) .profile-large > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.account-optionb:not(.admin-account-page) .profile-large strong,
.account-optionb:not(.admin-account-page) .profile-large span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.account-optionb:not(.admin-account-page) .account-profile-card > .button-link { margin: 18px 0 20px; }
.account-optionb:not(.admin-account-page) .account-profile-card h3 { margin: 0 0 12px; }
.account-optionb:not(.admin-account-page) .copy-lines.compact { margin-top: 8px; }
.account-optionb:not(.admin-account-page) .account-password-card.form-panel {
  grid-template-columns: minmax(220px, .32fr) minmax(0, 1fr);
  align-items: end;
}
.account-optionb:not(.admin-account-page) .account-password-card.form-panel form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

:root.dark .gift-market-optionb,
:root.dark .gift-checkout-optionb,
:root.dark .account-optionb:not(.admin-account-page),
:root.dark .gift-market-main,
:root.dark .gift-checkout-main {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 980px) {
  .gift-checkout-optionb,
  .account-optionb:not(.admin-account-page),
  .account-optionb:not(.admin-account-page) .account-password-card.form-panel,
  .account-optionb:not(.admin-account-page) .account-password-card.form-panel form {
    grid-template-columns: 1fr;
  }
  .account-optionb:not(.admin-account-page) .account-password-card,
  .account-optionb:not(.admin-account-page) .account-referral-card,
  .account-optionb:not(.admin-account-page) .account-security-card,
  .account-optionb:not(.admin-account-page) .account-edit-card {
    grid-column: auto;
  }
}

/* Payment gateway and admin review refinements */
.gateway-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  gap: 18px;
  align-items: start;
}
.gateway-admin-grid .panel,
.manual-gateway-list,
.manual-deposit-admin-panel,
.withdrawal-admin-panel { border-radius: 18px; }
.gateway-fee-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.rich-editor { display: grid; gap: 8px; }
.rich-toolbar { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rich-toolbar button {
  width: 38px;
  height: 34px;
  padding: 0;
  justify-content: center;
  border-radius: 10px;
  background: rgba(3, 132, 78, .08);
  color: var(--cw-green);
}
.rich-surface {
  min-height: 150px;
  padding: 14px;
  border: 1px solid var(--cw-line);
  border-radius: 14px;
  background: #fff;
  color: var(--cw-ink);
  line-height: 1.55;
}
.gateway-card-list,
.manual-request-list { display: grid; gap: 12px; }
.gateway-card-list article,
.manual-request-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .05);
}
.gateway-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.gateway-card-actions form { margin: 0; }
.gateway-card-actions .button-link { white-space: nowrap; }
.manual-request-card { grid-template-columns: minmax(210px, 1.1fr) minmax(130px, .7fr) minmax(130px, .7fr) minmax(120px, .6fr) auto; }
.manual-request-card > div { display: grid; gap: 4px; }
.manual-request-actions { display: flex !important; gap: 8px; align-items: center; flex-wrap: wrap; }
.manual-request-actions form,
.user-row-actions form,
.withdrawal-actions form { margin: 0; }
.manual-deposit-instructions {
  display: grid;
  gap: 10px;
  margin: 6px 0 4px;
  padding: 16px;
  border: 1px solid rgba(3, 132, 78, .16);
  border-radius: 16px;
  background: rgba(3, 132, 78, .055);
  color: var(--cw-ink);
}
.manual-deposit-instructions h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.manual-rich-text { line-height: 1.6; }
.manual-reference-note {
  padding: 10px 12px;
  border: 1px solid rgba(3, 132, 78, .16);
  border-radius: 12px;
  background: rgba(3, 132, 78, .06);
  color: var(--cw-ink);
  line-height: 1.5;
}
.manual-reference-note code {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 8px;
  color: var(--cw-green);
  background: rgba(3, 132, 78, .1);
  font-weight: 900;
}
.manual-proof-uploader { margin-top: 8px; }
.manual-deposit-instructions[hidden],
.manual-paid-check[hidden],
.manual-proof-uploader[hidden] {
  display: none !important;
}
.user-row-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adjust-balance-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(7, 19, 15, .42);
  backdrop-filter: blur(10px);
}
.adjust-balance-modal.open { display: grid; }
.adjust-balance-modal article {
  position: relative;
  width: min(430px, 100%);
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--cw-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(7, 19, 15, .22);
}
.modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  padding: 0;
}
.withdrawal-admin-panel .withdrawal-table .row {
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
}
.withdrawal-admin-panel .withdrawal-table .row.head {
  background: rgba(3, 132, 78, .08);
  color: #145c3b;
}
.reject-withdrawal-form { display: block; }
@media (max-width: 1180px) {
  .gateway-admin-grid,
  .manual-request-card { grid-template-columns: 1fr; }
}

.manual-paid-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(3, 132, 78, .18);
  border-radius: 14px;
  background: rgba(3, 132, 78, .055);
  color: var(--cw-ink);
  font-weight: 850;
}
.manual-paid-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--cw-green);
}

/* Dark mode final pass. Light mode stays untouched. */
:root.dark {
  --cw-bg: #07130f;
  --cw-bg-2: #0c2119;
  --cw-panel: rgba(13, 30, 24, .88);
  --cw-panel-solid: #0f211b;
  --cw-ink: #edf8f2;
  --cw-text: #d7e8df;
  --cw-muted: #9db2a8;
  --cw-line: rgba(213, 238, 224, .13);
  --cw-line-strong: rgba(213, 238, 224, .22);
  --cw-mint: rgba(10, 163, 99, .16);
  --cw-shadow: 0 22px 70px rgba(0, 0, 0, .32);
  --cw-shadow-soft: 0 12px 34px rgba(0, 0, 0, .22);
}

:root.dark body,
:root.dark .app,
:root.dark .workspace,
:root.dark .homepage-optionb,
:root.dark .home-frame,
:root.dark .auth-optionb {
  color: var(--cw-ink);
  background:
    radial-gradient(circle at 14% 2%, rgba(10, 163, 99, .18), transparent 26rem),
    radial-gradient(circle at 86% 8%, rgba(169, 255, 77, .08), transparent 28rem),
    var(--cw-bg);
}

:root.dark .page-head h1,
:root.dark h1,
:root.dark h2,
:root.dark h3,
:root.dark h4,
:root.dark strong,
:root.dark b,
:root.dark dt,
:root.dark label,
:root.dark .brand-logo,
:root.dark .side-nav a,
:root.dark .top-menu a,
:root.dark .profile-dropdown a {
  color: var(--cw-ink);
}

:root.dark p,
:root.dark small,
:root.dark dd,
:root.dark .muted,
:root.dark .eyebrow,
:root.dark label span,
:root.dark .copy-lines span,
:root.dark .profile-large span,
:root.dark .summary-head span,
:root.dark .row.head,
:root.dark .send-title-block p,
:root.dark .panel-title p {
  color: var(--cw-muted);
}

:root.dark input,
:root.dark select,
:root.dark textarea,
:root.dark .rich-surface,
:root.dark [contenteditable="true"] {
  color: var(--cw-ink);
  background: rgba(8, 20, 16, .88);
  border-color: var(--cw-line);
}

:root.dark input::placeholder,
:root.dark textarea::placeholder {
  color: rgba(157, 178, 168, .72);
}

:root.dark .app aside,
:root.dark .mobile-bar,
:root.dark .panel,
:root.dark .metric,
:root.dark .wallet-tile,
:root.dark .dashboard-balance-card,
:root.dark .quick-actions-card,
:root.dark .virtual-card-widget,
:root.dark .quick-send-widget,
:root.dark .latest-transactions-card,
:root.dark .money-form-wrap,
:root.dark .money-summary-card,
:root.dark .send-field > div,
:root.dark .protected-card,
:root.dark .receive-details-card,
:root.dark .receive-steps-card,
:root.dark .topup-flow-card,
:root.dark .gift-card.optionb,
:root.dark .gift-checkout-main .checkout-product-card,
:root.dark .gift-checkout-main .before-pay,
:root.dark .gift-checkout-side article,
:root.dark .gift-benefits span,
:root.dark .account-profile-card,
:root.dark .account-referral-card,
:root.dark .account-security-card,
:root.dark .account-edit-card,
:root.dark .account-password-card,
:root.dark .cards-main-panel,
:root.dark .card-tab-panel,
:root.dark .card-info-box,
:root.dark .card-controls-box,
:root.dark .card-recent-box,
:root.dark .create-card-panel,
:root.dark .card-action-modal .confirm-modal__panel,
:root.dark .confirm-modal__panel,
:root.dark .profile-dropdown,
:root.dark .head-user,
:root.dark .theme-toggle,
:root.dark .table .row,
:root.dark .gateway-card-list article,
:root.dark .manual-request-card,
:root.dark .manual-deposit-instructions,
:root.dark .manual-paid-check,
:root.dark .adjust-balance-modal article,
:root.dark .withdrawal-admin-panel .withdrawal-table .row,
:root.dark .operator-selected-logo,
:root.dark .phone-input strong,
:root.dark .send-amount-row strong,
:root.dark .recipient-box,
:root.dark .checkout-total,
:root.dark .ref-stats span,
:root.dark .copy-lines,
:root.dark .reveal-panel,
:root.dark .reveal-panel div,
:root.dark .ledger-widget > div,
:root.dark .summary-ledger-chart,
:root.dark .ledger-chart-tip {
  color: var(--cw-ink);
  background: var(--cw-panel);
  border-color: var(--cw-line);
  box-shadow: var(--cw-shadow-soft);
}

:root.dark .gift-market-optionb,
:root.dark .gift-checkout-optionb,
:root.dark .account-optionb:not(.admin-account-page),
:root.dark .gift-market-main,
:root.dark .gift-checkout-main {
  color: var(--cw-ink);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

:root.dark .table .row.head,
:root.dark .withdrawal-admin-panel .withdrawal-table .row.head {
  color: var(--cw-muted);
  background: rgba(10, 163, 99, .13);
  border-color: var(--cw-line);
}

/* Searchable admin user directory and configurable withdrawal routes */
.admin-user-directory .panel-title {
  align-items: end;
  margin-bottom: 18px;
}

.admin-user-search {
  min-width: min(100%, 620px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

.admin-user-search label {
  min-width: min(100%, 380px);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  background: var(--cw-surface);
}

.admin-user-search label .ico {
  width: 17px;
  height: 17px;
  color: var(--cw-muted);
}

.admin-user-search input {
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-user-search button,
.admin-user-search .button-link {
  min-height: 44px;
  margin: 0;
  white-space: nowrap;
}

.admin-users-table .row {
  grid-template-columns: minmax(170px, 1.15fr) minmax(220px, 1.45fr) minmax(110px, .7fr) minmax(110px, .7fr) minmax(110px, .65fr) minmax(132px, .75fr);
  gap: 14px;
}

.admin-users-table .row > span {
  min-width: 0;
}

.admin-users-table .row > span strong,
.admin-users-table .row > span small {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-users-table .user-row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.admin-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}

.admin-pagination a,
.admin-pagination > span {
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  color: var(--cw-muted);
  border: 1px solid var(--cw-line);
  border-radius: 7px;
  background: var(--cw-surface);
  font-size: 13px;
  font-weight: 750;
}

.admin-pagination a.active {
  color: #fff;
  border-color: var(--cw-green);
  background: var(--cw-green);
}

.admin-pagination a.disabled {
  pointer-events: none;
  opacity: .42;
}

.admin-pagination .ico {
  width: 15px;
  height: 15px;
}

.withdraw-select-field > .withdraw-picker {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.withdraw-select-field > .withdraw-picker.open {
  z-index: 90;
}

.withdraw-picker .gateway-picker-trigger {
  min-height: 62px;
  padding: 10px 14px;
  border-radius: 11px;
}

.withdraw-picker .gateway-picker-current {
  gap: 12px;
}

.withdraw-picker-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.withdraw-picker-copy strong,
.withdraw-picker-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.withdraw-picker-copy strong {
  color: #172033;
  font-size: 15px;
  font-weight: 800;
}

.withdraw-picker-copy small {
  color: #7b8797;
  font-size: 11px;
  font-weight: 650;
}

.withdraw-picker [hidden] {
  display: none !important;
}

.withdraw-picker-symbol {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  color: #087a4d;
  border: 1px solid rgba(8, 122, 77, .12);
  border-radius: 10px;
  background: #edf8f2;
}

.withdraw-picker-symbol .ico {
  width: 18px;
  height: 18px;
}

.withdraw-currency-symbol {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  color: #087a4d;
  border: 1px solid rgba(8, 122, 77, .14);
  border-radius: 10px;
  background: #edf8f2;
  font-size: 16px;
  font-weight: 850;
  line-height: 1;
}

.withdraw-picker .gateway-picker-menu {
  max-height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.withdraw-picker .gateway-logo-wrap.no-image::before {
  content: "$";
  color: #087a4d;
  font-size: 15px;
  font-weight: 850;
}

.withdraw-picker .gateway-logo-wrap.no-image img {
  display: none;
}

.withdraw-coin-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 5px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 9px;
  background: #fff;
}

.withdraw-coin-icon.large {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  padding: 7px;
  border-radius: 12px;
}

.withdraw-coin-icon img,
.withdraw-coin-icon .ico {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.withdraw-coin-icon.no-image::before {
  content: "$";
  color: var(--cw-green);
  font-weight: 850;
}

.withdraw-coin-icon.no-image img {
  display: none;
}

.withdraw-summary-asset {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0 24px;
  padding: 14px;
  border: 1px solid rgba(8, 122, 77, .12);
  border-radius: 12px;
  background: rgba(234, 246, 239, .66);
}

.withdraw-summary-asset > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.withdraw-summary-asset strong {
  color: var(--cw-ink);
  font-size: 15px;
}

.withdraw-summary-asset small {
  color: var(--cw-muted);
  font-size: 12px;
}

.withdraw-gateway-admin {
  display: grid;
  grid-template-columns: minmax(330px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.withdraw-gateway-editor {
  position: sticky;
  top: 18px;
}

.withdraw-gateway-editor form {
  display: grid;
  gap: 14px;
}

.withdraw-gateway-editor .gateway-fee-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.withdraw-route-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.withdraw-route-cards > article {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  background: var(--cw-surface);
}

.withdraw-route-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.withdraw-route-brand > div {
  min-width: 0;
}

.withdraw-route-brand h3,
.withdraw-route-brand p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.withdraw-route-brand h3 {
  color: var(--cw-ink);
  font-size: 15px;
}

.withdraw-route-brand p {
  margin-top: 3px;
  color: var(--cw-muted);
  font-size: 12px;
}

.withdraw-route-cards dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 12px;
  margin: 0;
  color: var(--cw-muted);
  font-size: 12px;
}

.withdraw-route-cards dd {
  margin: 0;
  color: var(--cw-ink);
  text-align: right;
  font-weight: 750;
}

.withdraw-route-cards .gateway-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--cw-line);
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

:root.dark .admin-user-search label,
:root.dark .admin-pagination a,
:root.dark .admin-pagination > span,
:root.dark .withdraw-route-cards > article {
  background: var(--cw-surface);
}

:root.dark .withdraw-summary-asset {
  border-color: rgba(84, 214, 151, .18);
  background: rgba(20, 112, 75, .16);
}

@media (max-width: 1180px) {
  .withdraw-gateway-admin {
    grid-template-columns: 1fr;
  }

  .withdraw-gateway-editor {
    position: static;
  }
}

@media (max-width: 900px) {
  .admin-user-directory .panel-title,
  .admin-user-search {
    align-items: stretch;
  }

  .admin-user-directory .panel-title,
  .admin-user-search {
    flex-direction: column;
  }

  .admin-user-search,
  .admin-user-search label {
    width: 100%;
    min-width: 0;
  }

  .admin-users-table .row.head {
    display: none;
  }

  .admin-users-table .row:not(.head) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    padding: 16px 0;
  }

  .admin-users-table .row:not(.head) > span::before {
    display: block;
    margin-bottom: 4px;
    color: var(--cw-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .admin-users-table .row:not(.head) > span:nth-child(1)::before { content: "User"; }
  .admin-users-table .row:not(.head) > span:nth-child(2)::before { content: "Contact"; }
  .admin-users-table .row:not(.head) > span:nth-child(3)::before { content: "Cards"; }
  .admin-users-table .row:not(.head) > span:nth-child(4)::before { content: "Balance"; }
  .admin-users-table .row:not(.head) > span:nth-child(5)::before { content: "Status"; }
  .admin-users-table .row:not(.head) > span:nth-child(6)::before { content: "Action"; }

  .withdraw-route-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .admin-users-table .row:not(.head),
  .withdraw-gateway-editor .gateway-fee-row {
    grid-template-columns: 1fr;
  }

  .admin-user-search button,
  .admin-user-search .button-link {
    width: 100%;
    justify-content: center;
  }

  .admin-pagination a span {
    display: none;
  }
}

:root.dark .table .row.empty-row span,
:root.dark .gift-card.optionb h3,
:root.dark .gift-card.optionb strong,
:root.dark .gift-card.optionb b,
:root.dark .gift-card.optionb p,
:root.dark .gift-card.optionb small,
:root.dark .account-profile-card *,
:root.dark .account-referral-card *,
:root.dark .account-security-card *,
:root.dark .account-edit-card *,
:root.dark .account-password-card *,
:root.dark .manual-deposit-instructions *,
:root.dark .manual-paid-check *,
:root.dark .manual-request-card *,
:root.dark .gateway-card-list article *,
:root.dark .gift-checkout-main .checkout-product-card *,
:root.dark .gift-checkout-main .before-pay *,
:root.dark .gift-checkout-side article * {
  color: inherit;
}

:root.dark .button-link,
:root.dark .button-link.ghost,
:root.dark .ghost,
:root.dark .icon-only-button,
:root.dark .close-create,
:root.dark .sidebar-toggle,
:root.dark .rich-toolbar button {
  color: var(--cw-ink);
  background: rgba(255, 255, 255, .06);
  border-color: var(--cw-line);
}

:root.dark .button-link:hover,
:root.dark .button-link.ghost:hover,
:root.dark .ghost:hover,
:root.dark .icon-only-button:hover,
:root.dark .close-create:hover {
  background: rgba(10, 163, 99, .18);
  color: #ffffff;
}

:root.dark .side-nav a.active,
:root.dark .side-nav a:hover,
:root.dark .filter-link.active,
:root.dark .card-tabs a.active,
:root.dark .gift-market-main .small-title a,
:root.dark a:not(.primary):not(.button-link) {
  color: #7ff0b7;
}

:root.dark .pill,
:root.dark .status-green,
:root.dark .card-status-pill,
:root.dark .card-balance-pill {
  color: #7ff0b7;
  background: rgba(16, 185, 129, .15);
  border-color: rgba(127, 240, 183, .22);
}

:root.dark .notice,
:root.dark .notice.info,
:root.dark .notice.success {
  color: var(--cw-ink);
  background: rgba(10, 163, 99, .12);
  border-color: rgba(127, 240, 183, .22);
}

:root.dark .notice.error,
:root.dark .ajax-toast.error {
  color: #fee2e2;
  background: rgba(127, 29, 29, .72);
  border-color: rgba(254, 202, 202, .24);
}

:root.dark .merchant-logo-img {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .12);
}

:root.dark .positive { color: #78f0b3; }
:root.dark .negative,
:root.dark .danger-action { color: #ff9b9b; }

:root.dark .gateway-picker-field > .gateway-picker {
  background: transparent;
  border: 0;
  box-shadow: none;
}

:root.dark .gateway-picker-trigger,
:root.dark .gateway-picker-trigger:hover,
:root.dark .gateway-picker-trigger:focus-visible,
:root.dark .gateway-picker.open .gateway-picker-trigger {
  color: var(--cw-ink);
  background: rgba(8, 20, 16, .94);
  border-color: var(--cw-line);
}

:root.dark .gateway-picker-menu {
  background: rgba(8, 20, 16, .98);
  border-color: var(--cw-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

:root.dark .gateway-picker-option,
:root.dark .gateway-picker-option strong { color: var(--cw-ink); }

:root.dark .gateway-picker-option:hover,
:root.dark .gateway-picker-option:focus-visible,
:root.dark .gateway-picker-option.active {
  color: var(--cw-ink);
  background: rgba(16, 185, 129, .12);
}

:root.dark .withdraw-select-field > .withdraw-picker {
  background: transparent;
  border: 0;
  box-shadow: none;
}

:root.dark .withdraw-picker-copy strong { color: var(--cw-ink); }
:root.dark .withdraw-picker-copy small { color: var(--cw-muted); }

:root.dark .withdraw-picker-symbol {
  color: #62dda4;
  border-color: rgba(98, 221, 164, .18);
  background: rgba(16, 185, 129, .12);
}

:root.dark .withdraw-currency-symbol {
  color: #62dda4;
  border-color: rgba(98, 221, 164, .18);
  background: rgba(16, 185, 129, .12);
}