/* SUNDEX funding flows — deposit, card funding, internal transfers and withdrawals. */
body.sundex-funding-flow {
  --sfx-ink: #f2f5f9;
  --sfx-muted: rgba(216, 225, 236, 0.67);
  --sfx-dim: rgba(216, 225, 236, 0.55);
  --sfx-surface: #070b11;
  --sfx-raised: #0b1018;
  --sfx-recessed: #04070b;
  --sfx-positive: #9fd2b0;
  --sfx-danger: #e4a1aa;
  --sfx-ease: cubic-bezier(0.23, 1, 0.32, 1);
  background: #020407;
}

body.sundex-funding-flow .platform-shell {
  background:
    radial-gradient(ellipse 64% 48% at 52% -12%, rgba(63, 87, 119, 0.15), transparent 72%),
    #020407;
}

body.sundex-funding-flow .platform-main {
  padding: 28px 30px 48px;
  scrollbar-gutter: stable;
}

body.sundex-funding-flow .sfx-shell {
  display: grid;
  width: min(1120px, 100%) !important;
  max-width: none !important;
  min-height: min(700px, calc(100vh - 134px)) !important;
  grid-template-columns: 270px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "head stage"
    "progress stage";
  padding: 0 !important;
  overflow: hidden;
  border: 4px solid transparent;
  border-radius: 36px;
  background:
    radial-gradient(ellipse 90% 70% at 6% 12%, rgba(77, 105, 142, 0.11), transparent 64%) padding-box,
    linear-gradient(145deg, #080d14, #030609 74%) padding-box,
    linear-gradient(120deg, #b9c3cf 0%, #414b58 9%, #141b24 31%, #687482 52%, #18212b 78%, #7e8997 100%) border-box;
  box-shadow:
    0 46px 110px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -28px 70px rgba(0, 0, 0, 0.2);
}

body.sundex-funding-flow .sfx-shell > * {
  min-width: 0;
}

body.sundex-funding-flow .sfx-flow-head {
  grid-area: head;
  align-self: start;
  gap: 11px !important;
  margin: 0 !important;
  padding: 38px 31px 20px;
}

body.sundex-funding-flow .sfx-flow-head > button {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  place-items: center;
  border: 0 !important;
  border-radius: 14px !important;
  color: rgba(233, 240, 249, 0.82);
  background: rgba(229, 236, 245, 0.065) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  transition: color 160ms ease, background-color 170ms ease, transform 150ms var(--sfx-ease) !important;
}

body.sundex-funding-flow .sfx-flow-head > div {
  gap: 10px !important;
}

body.sundex-funding-flow .sfx-flow-head > div > div {
  width: 38px !important;
  height: 38px !important;
  border: 2px solid transparent;
  border-radius: 13px !important;
  color: #dbe5f2;
  background:
    linear-gradient(#080c12, #080c12) padding-box,
    linear-gradient(135deg, #cbd4df, #384351 44%, #8995a4 72%, #262f3a) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body.sundex-funding-flow .sfx-flow-head > div > div svg {
  color: #c3d3e8 !important;
}

body.sundex-funding-flow .sfx-flow-head h1 {
  color: var(--sfx-ink) !important;
  font-size: 20px !important;
  font-weight: 650 !important;
  letter-spacing: -0.025em;
}

body.sundex-funding-flow .sfx-progress {
  grid-area: progress;
  display: flex !important;
  align-self: stretch;
  flex-direction: column;
  align-items: stretch !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 8px 31px 38px !important;
}

body.sundex-funding-flow .sfx-progress > div {
  position: relative;
  display: flex !important;
  min-height: 44px;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

body.sundex-funding-flow .sfx-progress > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: -16px;
  left: 4px;
  width: 1px;
  background: rgba(198, 211, 228, 0.09);
}

body.sundex-funding-flow .sfx-progress > div > div:first-child {
  width: 9px !important;
  height: 9px !important;
  flex: 0 0 9px;
  overflow: visible !important;
  border-radius: 50% !important;
  background: #111821 !important;
  box-shadow: inset 0 0 0 1px rgba(208, 220, 235, 0.15);
}

body.sundex-funding-flow .sfx-progress > div > div:first-child > div {
  display: none;
}

body.sundex-funding-flow .sfx-progress > div.is-current > div:first-child {
  background: #cbd7e6 !important;
  box-shadow: 0 0 18px rgba(179, 202, 232, 0.32), inset 0 0 0 1px #eef4fb;
}

body.sundex-funding-flow .sfx-progress > div.is-complete > div:first-child {
  background: #708399 !important;
  box-shadow: inset 0 0 0 1px rgba(226, 235, 246, 0.22);
}

body.sundex-funding-flow .sfx-progress > div > span {
  color: var(--sfx-dim) !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  transition: color 170ms ease !important;
}

body.sundex-funding-flow .sfx-progress > div.is-current > span {
  color: rgba(239, 244, 250, 0.9) !important;
  font-weight: 620 !important;
}

body.sundex-funding-flow .sfx-progress > div.is-complete > span {
  color: rgba(214, 224, 236, 0.62) !important;
}

body.sundex-funding-flow .sfx-stage {
  grid-area: stage;
  min-height: 0;
  margin: 10px 10px 10px 0;
  overflow: hidden !important;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 58% 52% at 90% 5%, rgba(68, 94, 130, 0.08), transparent 68%),
    var(--sfx-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 24px 58px rgba(0, 0, 0, 0.2);
}

body.sundex-funding-flow .sfx-stage > div {
  width: min(620px, 100%) !important;
  min-height: 100%;
  margin-inline: auto;
  padding: 48px 46px 40px;
}

body.sundex-funding-flow .sfx-stage .text-center {
  text-align: left !important;
}

body.sundex-funding-flow .sfx-stage h2 {
  max-width: 22ch;
  color: var(--sfx-ink) !important;
  font-size: 28px !important;
  font-weight: 620 !important;
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

body.sundex-funding-flow .sfx-stage h2 + p {
  max-width: 52ch;
  margin-top: 8px !important;
  color: var(--sfx-muted) !important;
  font-size: 14px !important;
  line-height: 1.5;
  text-wrap: pretty;
}

body.sundex-funding-flow .sfx-stage .space-y-4,
body.sundex-funding-flow .sfx-stage .space-y-5 {
  --tw-space-y-reverse: 0;
}

body.sundex-funding-flow .sfx-stage button.group {
  border: 0 !important;
  border-radius: 19px !important;
  color: var(--sfx-ink);
  background:
    radial-gradient(ellipse 50% 110% at 100% 0%, rgba(84, 112, 148, 0.09), transparent 74%),
    linear-gradient(150deg, #101721, #080c12 58%, #06090e) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 14px 32px rgba(0, 0, 0, 0.22) !important;
  transition: filter 170ms ease, transform 170ms var(--sfx-ease), box-shadow 190ms ease !important;
}

body.sundex-funding-flow .sfx-stage button.group:has(> .w-14) {
  min-height: 112px;
  gap: 18px !important;
  padding: 20px 22px !important;
  border-radius: 23px !important;
}

body.sundex-funding-flow .sfx-stage button.group:has(> .w-14) > .w-14 {
  width: 58px !important;
  height: 58px !important;
  border: 3px solid transparent;
  border-radius: 19px !important;
  background:
    linear-gradient(#080c12, #080c12) padding-box,
    linear-gradient(135deg, #d5dde7, #46515f 34%, #1b232d 56%, #929dab 82%, #343e4a) border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.3);
}

body.sundex-funding-flow .sfx-stage button.group:has(> .w-14) > .w-14 svg {
  color: #c2d3e9 !important;
}

body.sundex-funding-flow .sfx-stage button.group p.font-bold {
  color: var(--sfx-ink) !important;
  font-weight: 640 !important;
  letter-spacing: -0.015em;
}

body.sundex-funding-flow .sfx-stage button.group p.text-muted-foreground {
  color: var(--sfx-muted) !important;
  font-size: 12px !important;
  line-height: 1.45;
}

body.sundex-funding-flow .sfx-stage button.group > svg:last-child {
  width: 18px;
  height: 18px;
  color: rgba(218, 228, 240, 0.44) !important;
}

body.sundex-funding-flow .sfx-stage button.group:has(> img.w-9),
body.sundex-funding-flow .sfx-stage button.group:has(> img.w-8),
body.sundex-funding-flow .sfx-stage button.group:has(> svg.w-8) {
  min-height: 62px;
  padding: 11px 14px !important;
  border-radius: 17px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 0 1px rgba(255, 255, 255, 0.018) !important;
}

body.sundex-funding-flow .sfx-stage button.group img {
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.32);
}

body.sundex-funding-flow .sfx-stage input[type="text"],
body.sundex-funding-flow .sfx-stage input[type="number"] {
  min-height: 50px;
  border: 0 !important;
  border-radius: 15px !important;
  color: var(--sfx-ink) !important;
  background: var(--sfx-recessed) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 0 0 1px rgba(213, 224, 238, 0.065),
    inset 0 14px 30px rgba(0, 0, 0, 0.18) !important;
  transition: box-shadow 170ms ease, background-color 170ms ease !important;
}

body.sundex-funding-flow .sfx-stage input::placeholder {
  color: rgba(216, 225, 236, 0.6) !important;
}

body.sundex-funding-flow .sfx-stage input[type="number"] {
  min-height: 72px;
  font-size: 36px !important;
  font-weight: 540 !important;
  letter-spacing: -0.035em;
}

body.sundex-funding-flow .sfx-stage input:focus {
  outline: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(186, 207, 234, 0.48),
    0 0 0 4px rgba(117, 151, 195, 0.1),
    inset 0 14px 30px rgba(0, 0, 0, 0.16) !important;
}

body.sundex-funding-flow .sfx-stage div:has(> input[type="number"]) {
  border: 0 !important;
  border-radius: 24px !important;
  background:
    radial-gradient(ellipse 52% 80% at 12% 10%, rgba(74, 103, 142, 0.09), transparent 70%),
    #0a0f16 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 18px 38px rgba(0, 0, 0, 0.22);
}

body.sundex-funding-flow .sfx-stage div:has(> input[type="number"]) > p.text-muted-foreground {
  color: var(--sfx-dim) !important;
  font-size: 12px !important;
}

body.sundex-funding-flow .sfx-stage div.flex.items-center.justify-center:has(img.rounded-full) {
  justify-content: flex-start !important;
  padding-block: 10px !important;
}

body.sundex-funding-flow .sfx-stage div.flex.items-center.justify-center:has(img.rounded-full) img {
  width: 42px !important;
  height: 42px !important;
}

body.sundex-funding-flow .sfx-stage label,
body.sundex-funding-flow .sfx-stage .text-xs.font-medium.text-muted-foreground {
  color: rgba(221, 229, 239, 0.68) !important;
}

body.sundex-funding-flow .sfx-stage button.w-full.rounded-full {
  min-height: 52px;
  padding: 0 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 17px !important;
  color: #10161f !important;
  background: linear-gradient(145deg, #f0f3f7, #99a5b3 58%, #d8dee6) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(27, 36, 47, 0.3),
    0 16px 36px rgba(0, 0, 0, 0.3) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  transition: filter 170ms ease, transform 150ms var(--sfx-ease), box-shadow 190ms ease !important;
}

body.sundex-funding-flow .sfx-stage button.w-full.rounded-full.bg-secondary {
  border-color: rgba(194, 209, 228, 0.11) !important;
  color: var(--sfx-ink) !important;
  background: linear-gradient(150deg, #151d27, #080c12 42%, #05080d) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.24) !important;
}

body.sundex-funding-flow .sfx-stage button.w-full.rounded-full:disabled {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(219, 226, 236, 0.32) !important;
  background: #151a21 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  opacity: 1 !important;
}

body.sundex-funding-flow .sfx-stage div:has(> svg.lucide-triangle-alert),
body.sundex-funding-flow .sfx-stage div:has(> svg.lucide-circle-alert) {
  border: 0 !important;
  border-radius: 16px !important;
  background: rgba(111, 59, 67, 0.15) !important;
  box-shadow: inset 0 0 0 1px rgba(225, 147, 160, 0.08);
}

body.sundex-funding-flow .sfx-stage div:has(> svg.lucide-triangle-alert) svg,
body.sundex-funding-flow .sfx-stage div:has(> svg.lucide-circle-alert) svg,
body.sundex-funding-flow .sfx-stage div:has(> svg.lucide-triangle-alert) p,
body.sundex-funding-flow .sfx-stage div:has(> svg.lucide-circle-alert) p {
  color: var(--sfx-danger) !important;
}

body.sundex-funding-flow .sfx-stage .bg-card.border,
body.sundex-funding-flow .sfx-stage .bg-secondary.border {
  border-color: transparent !important;
}

body.sundex-funding-flow .sfx-stage p.font-mono,
body.sundex-funding-flow .sfx-stage input.font-mono {
  letter-spacing: 0.015em;
}

body.sundex-funding-flow .sfx-stage button:focus-visible,
body.sundex-funding-flow .sfx-flow-head button:focus-visible,
body.sundex-funding-flow .sfx-stage input:focus-visible {
  outline: 2px solid rgba(224, 235, 249, 0.92) !important;
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  body.sundex-funding-flow .sfx-flow-head > button:hover {
    color: #fff;
    background: rgba(229, 237, 247, 0.105) !important;
    transform: translateY(-1px);
  }

  body.sundex-funding-flow .sfx-stage button.group:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 0 0 1px rgba(171, 195, 226, 0.08),
      0 18px 38px rgba(0, 0, 0, 0.28) !important;
  }

  body.sundex-funding-flow .sfx-stage button.w-full.rounded-full:not(:disabled):hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -1px 0 rgba(27, 36, 47, 0.3),
      0 20px 42px rgba(0, 0, 0, 0.36) !important;
  }
}

body.sundex-funding-flow .sfx-stage button:active,
body.sundex-funding-flow .sfx-flow-head > button:active {
  transform: scale(0.98) !important;
}

@media (max-width: 820px) {
  body.sundex-funding-flow .platform-main {
    padding: 18px 16px 38px;
  }

  body.sundex-funding-flow .sfx-shell {
    min-height: calc(100vh - 112px) !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "head"
      "progress"
      "stage";
    border-width: 3px;
    border-radius: 31px;
  }

  body.sundex-funding-flow .sfx-flow-head {
    padding: 24px 23px 14px;
  }

  body.sundex-funding-flow .sfx-progress {
    flex-direction: row;
    gap: 6px !important;
    padding: 3px 23px 18px !important;
  }

  body.sundex-funding-flow .sfx-progress > div {
    min-height: 36px;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
  }

  body.sundex-funding-flow .sfx-progress > div:not(:last-child)::after {
    top: 4px;
    right: -2px;
    bottom: auto;
    left: 14px;
    width: calc(100% - 16px);
    height: 1px;
  }

  body.sundex-funding-flow .sfx-progress > div > span {
    font-size: 11px !important;
  }

  body.sundex-funding-flow .sfx-stage {
    min-height: 0;
    margin: 0 8px 8px;
    border-radius: 24px;
  }

  body.sundex-funding-flow .sfx-stage > div {
    padding: 32px 28px 34px;
  }
}

@media (max-width: 520px) {
  body.sundex-funding-flow .platform-main {
    padding: 10px 8px 28px;
  }

  body.sundex-funding-flow .sfx-shell {
    border-width: 2px;
    border-radius: 27px;
  }

  body.sundex-funding-flow .sfx-flow-head {
    padding: 18px 16px 12px;
  }

  body.sundex-funding-flow .sfx-flow-head > button {
    width: 40px;
    height: 40px;
  }

  body.sundex-funding-flow .sfx-flow-head > div > div {
    width: 36px !important;
    height: 36px !important;
  }

  body.sundex-funding-flow .sfx-flow-head h1 {
    font-size: 18px !important;
  }

  body.sundex-funding-flow .sfx-progress {
    padding: 2px 17px 14px !important;
  }

  body.sundex-funding-flow .sfx-progress > div > span {
    max-width: 65px;
    overflow: hidden;
    font-size: 10px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.sundex-funding-flow .sfx-stage {
    margin: 0 5px 5px;
    border-radius: 22px;
  }

  body.sundex-funding-flow .sfx-stage > div {
    padding: 27px 18px 28px;
  }

  body.sundex-funding-flow .sfx-stage h2 {
    font-size: 25px !important;
  }

  body.sundex-funding-flow .sfx-stage button.group:has(> .w-14) {
    min-height: 96px;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  body.sundex-funding-flow .sfx-stage button.group:has(> .w-14) > .w-14 {
    width: 52px !important;
    height: 52px !important;
    border-radius: 17px !important;
  }

  body.sundex-funding-flow .sfx-stage input[type="number"] {
    min-height: 66px;
    font-size: 32px !important;
  }

  body.sundex-funding-flow .sfx-stage div:has(> input[type="number"]) {
    padding: 18px !important;
    border-radius: 21px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sundex-funding-flow :where(button, input, .sfx-progress span) {
    transition-duration: 0.01ms !important;
  }
}