/*
 * SUNDEX processing system p51
 * One quiet, legible shell for buy, sell, deposit, withdraw, swap and verification.
 * Loaded last on purpose: this file retires the accumulated visual experiments above it.
 */

body.sundex-transaction-system {
  --process-bg: #010409;
  --process-panel: #040912;
  --process-panel-deep: #02060c;
  --process-field: #050a12;
  --process-field-hover: #080f19;
  --process-ink: #f4f6fa;
  --process-text: #d3dae5;
  --process-muted: #9aa6b8;
  --process-dim: #738095;
  --process-line: rgba(174, 194, 222, 0.2);
  --process-line-soft: rgba(174, 194, 222, 0.11);
  --process-line-strong: rgba(199, 220, 249, 0.52);
  --process-blue: #b9d4f7;
  --process-danger: #dc98a5;
  --process-radius: 12px;
  --process-ease: cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden !important;
  background: var(--process-bg) !important;
  color: var(--process-text);
  font-family: Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 16px;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body.sundex-transaction-system *,
body.sundex-transaction-system *::before,
body.sundex-transaction-system *::after {
  box-sizing: border-box;
}

body.sundex-transaction-system .platform-shell,
body.sundex-transaction-system .platform-main,
body.sundex-transaction-system main.platform-main {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 680px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--process-bg) !important;
}

/* Shared 43 / 57 processing shell. */
body.sundex-transaction-system .stx-shell,
body.sundex-transaction-system .stx-funding-shell {
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 680px !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: 43% minmax(0, 57%) !important;
  grid-template-rows: 152px minmax(0, 1fr) !important;
  grid-template-areas:
    "context head"
    "context stage" !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--process-bg) !important;
  box-shadow: none !important;
}

/* The reference uses one real material image — no generated orbit lines or decorative cards. */
body.sundex-transaction-system .stx-context {
  grid-area: context !important;
  position: relative !important;
  inset: auto !important;
  z-index: 1;
  display: block !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 680px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #05080d !important;
  box-shadow: inset -1px 0 rgba(173, 194, 222, 0.08) !important;
}

body.sundex-transaction-system .stx-context-media {
  position: absolute !important;
  inset: 0 !important;
  background-image: url('/assets/sundex-processing-metal-ag-p32.jpg') !important;
  background-position: 52% center !important;
  background-size: cover !important;
  filter: saturate(0.3) contrast(1.06) brightness(0.74) !important;
  transform: none !important;
}

body.sundex-transaction-system .stx-context::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(1, 4, 8, 0.02) 0%, rgba(1, 4, 8, 0.06) 38%, rgba(1, 3, 7, 0.66) 75%, #010307 100%),
    linear-gradient(90deg, rgba(1, 3, 7, 0.08), transparent 66%, rgba(1, 3, 7, 0.4)) !important;
  transform: none !important;
  filter: none !important;
}

body.sundex-transaction-system .stx-context::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(144, 178, 222, 0.035), transparent 46%) !important;
}

body.sundex-transaction-system .stx-context-brand {
  position: absolute !important;
  z-index: 3;
  top: 44px !important;
  left: 46px !important;
  color: var(--process-ink) !important;
  font-size: 36px !important;
  font-weight: 520 !important;
  line-height: 1 !important;
  letter-spacing: 0.015em !important;
  text-decoration: none !important;
}

body.sundex-transaction-system .stx-context-copy {
  position: absolute !important;
  z-index: 3;
  right: 46px !important;
  bottom: 58px !important;
  left: 46px !important;
  width: auto !important;
  max-width: 440px !important;
}

body.sundex-transaction-system .stx-context-label {
  display: block !important;
  margin: 0 0 16px !important;
  color: #aab9cf !important;
  font-size: 13px !important;
  font-weight: 540 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

body.sundex-transaction-system .stx-context-asset {
  display: flex !important;
  min-height: 48px !important;
  align-items: center !important;
  gap: 14px !important;
}

body.sundex-transaction-system .stx-context-coin {
  position: relative;
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(203, 221, 245, 0.24) !important;
  border-radius: 50% !important;
  background: rgba(176, 200, 233, 0.14) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12) !important;
}

body.sundex-transaction-system .stx-context-coin img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

body.sundex-transaction-system .stx-context-coin i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbdcf3;
}

body.sundex-transaction-system .stx-context-title {
  max-width: none !important;
  margin: 0 !important;
  color: var(--process-ink) !important;
  font-size: 46px !important;
  font-weight: 560 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.04em !important;
}

body.sundex-transaction-system .stx-context-body {
  max-width: 36ch !important;
  margin: 14px 0 18px !important;
  color: var(--process-muted) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

body.sundex-transaction-system .stx-context-rows {
  display: grid !important;
  margin: 0 !important;
  border-top: 1px solid var(--process-line) !important;
}

body.sundex-transaction-system .stx-context-rows > div {
  display: flex !important;
  min-height: 40px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  border-bottom: 0 !important;
}

body.sundex-transaction-system .stx-context-rows dt,
body.sundex-transaction-system .stx-context-rows dd {
  margin: 0 !important;
  color: #b4becd !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  font-variant-numeric: tabular-nums;
}

body.sundex-transaction-system .stx-context-rows dd {
  color: #cdd5e1 !important;
  text-align: right !important;
}

body.sundex-transaction-system .stx-context-note {
  margin: 58px 0 0 !important;
  color: #7f8ba0 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

/* One chamfered order ticket, matching the reference proportions. */
body.sundex-transaction-system .stx-ticket-frame {
  position: absolute !important;
  z-index: 0 !important;
  top: 39px !important;
  right: 44px !important;
  bottom: 39px !important;
  left: calc(43% + 40px) !important;
  width: auto !important;
  min-height: 0 !important;
  pointer-events: none;
  overflow: hidden;
  border: 0 !important;
  border-radius: 15px 0 0 15px !important;
  background: linear-gradient(135deg, rgba(125, 148, 178, 0.72), #bed8fb 52%, rgba(89, 119, 156, 0.76)) !important;
  clip-path: polygon(0 0, calc(100% - 68px) 0, 100% 28px, 100% calc(100% - 26px), calc(100% - 34px) 100%, 0 100%) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.38) !important;
}

body.sundex-transaction-system .stx-ticket-frame::before {
  content: "";
  position: absolute;
  inset: 1px;
  background:
    radial-gradient(circle at 88% 4%, rgba(76, 108, 153, 0.09), transparent 30%),
    linear-gradient(150deg, rgba(5, 10, 18, 0.995), rgba(2, 6, 12, 0.997) 76%) !important;
  clip-path: polygon(0 0, calc(100% - 67px) 0, 100% 27px, 100% calc(100% - 25px), calc(100% - 33px) 100%, 0 100%) !important;
}

body.sundex-transaction-system .stx-ticket-frame::after {
  display: none !important;
}

/* Header and compact route state. */
body.sundex-transaction-system .stx-head {
  grid-area: head !important;
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 39px 44px 0 40px !important;
  padding: 30px 50px 8px !important;
  border: 0 !important;
}

body.sundex-transaction-system .stx-shell > .stx-head > button,
body.sundex-transaction-system .stx-sell-inner > .stx-head > button,
body.stx-swap-route .sundex-swap-back {
  display: none !important;
}

body.sundex-transaction-system .stx-title-group,
body.sundex-transaction-system .stx-head > div {
  display: flex !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

body.sundex-transaction-system .stx-funding-shell .stx-title-group > div:first-child,
body.sundex-transaction-system .stx-sell-inner .stx-title-group > div:first-child {
  display: none !important;
}

body.sundex-transaction-system .stx-head h1,
body.stx-swap-route .sundex-swap-title {
  margin: 0 !important;
  color: var(--process-ink) !important;
  font-size: 36px !important;
  font-weight: 540 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
}

body.sundex-transaction-system .stx-step-meta {
  margin: 2px 0 0 !important;
  color: var(--process-muted) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

body.sundex-transaction-system .stx-head > .stx-mode-switch {
  display: grid !important;
  width: 270px !important;
  height: 54px !important;
  flex: 0 0 270px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 4px 0 0 !important;
  padding: 5px !important;
  border: 1px solid var(--process-line-soft) !important;
  border-radius: 13px !important;
  background: rgba(2, 6, 12, 0.72) !important;
  box-shadow: none !important;
}

body.sundex-transaction-system .stx-mode-option {
  min-height: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: var(--process-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 18px !important;
  font-weight: 450 !important;
  transition: color 160ms ease, background-color 160ms ease !important;
}

body.sundex-transaction-system .stx-mode-option.is-active {
  color: var(--process-ink) !important;
  background: linear-gradient(145deg, #283242, #171f2b) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08) !important;
}

body.sundex-transaction-system .stx-shell > .stx-progress,
body.sundex-transaction-system .stx-shell > .sfx-progress,
body.sundex-transaction-system .stx-shell > div:has(> .stx-progress),
body.sundex-transaction-system .stx-progress-wrap {
  display: none !important;
}

/* Main content area. */
body.sundex-transaction-system .stx-stage {
  grid-area: stage !important;
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 44px 39px 40px !important;
  padding: 0 50px 28px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(179, 200, 229, 0.2) transparent;
}

body.sundex-transaction-system .stx-stage > div,
body.sundex-transaction-system .stx-stage > div > div,
body.sundex-transaction-system .stx-stage > .w-full,
body.sundex-transaction-system .stx-stage > div > .w-full {
  width: 100% !important;
  max-width: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body.sundex-transaction-system .stx-sell-flow {
  position: relative !important;
  z-index: 2;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
}

body.sundex-transaction-system .stx-sell-inner {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  grid-template-rows: 152px minmax(0, 1fr) !important;
}

body.sundex-transaction-system .stx-sell-inner > .stx-head { grid-row: 1 !important; }
body.sundex-transaction-system .stx-sell-inner > .stx-stage { grid-row: 2 !important; }

body.sundex-transaction-system .buy-sell-intro,
body.sundex-transaction-system .stx-stage .text-center.mb-2,
body.sundex-transaction-system .stx-vf-section-head {
  margin: 0 0 32px !important;
  text-align: left !important;
}

body.sundex-transaction-system .buy-sell-intro h2,
body.sundex-transaction-system .stx-stage .text-center.mb-2 h2,
body.sundex-transaction-system .stx-stage h2,
body.sundex-transaction-system .stx-vf-title {
  max-width: none !important;
  margin: 0 0 8px !important;
  color: var(--process-ink) !important;
  font-size: 28px !important;
  font-weight: 520 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
  text-align: left !important;
}

body.sundex-transaction-system .buy-sell-intro p,
body.sundex-transaction-system .stx-stage .text-center.mb-2 p,
body.sundex-transaction-system .stx-stage h2 + p,
body.sundex-transaction-system .stx-vf-section-head p {
  max-width: 58ch !important;
  margin: 0 !important;
  color: var(--process-muted) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* Route and asset menus use calm rows, not floating SaaS cards. */
body.sundex-transaction-system .buy-sell-options,
body.sundex-transaction-system .stx-stage-menu .space-y-4 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

body.sundex-transaction-system .buy-sell-option,
body.sundex-transaction-system .stx-stage-menu button.group {
  min-height: 92px !important;
  padding: 20px 22px !important;
  border: 1px solid var(--process-line) !important;
  border-radius: var(--process-radius) !important;
  color: var(--process-ink) !important;
  background: rgba(5, 10, 18, 0.76) !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, background-color 160ms ease !important;
}

body.sundex-transaction-system .buy-sell-option strong,
body.sundex-transaction-system .stx-stage-menu button.group .font-bold {
  color: var(--process-ink) !important;
  font-size: 20px !important;
  font-weight: 540 !important;
}

body.sundex-transaction-system .buy-sell-option p,
body.sundex-transaction-system .stx-stage-menu button.group p {
  color: var(--process-muted) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

body.sundex-transaction-system .stx-stage-menu button.group > .w-14 {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(177, 201, 233, 0.08) !important;
  box-shadow: none !important;
}

/* Form rhythm and control metrics copied from the reference. */
body.sundex-transaction-system .stx-order-form {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.sundex-transaction-system .stx-order-form label,
body.sundex-transaction-system .stx-stage label,
body.stx-swap-route .stx-swap-ticket > div > div:first-child > span,
body.stx-swap-route .stx-swap-ticket > div > span:first-child {
  display: block !important;
  margin: 0 0 10px !important;
  color: var(--process-ink) !important;
  font-size: 18px !important;
  font-weight: 440 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.sundex-transaction-system .stx-order-form > div:has(> label) button,
body.sundex-transaction-system .stx-order-form > div:has(> label) input,
body.sundex-transaction-system .stx-stage input,
body.sundex-transaction-system .stx-stage select,
body.stx-swap-route .stx-swap-ticket > .rounded-2xl {
  width: 100% !important;
  min-height: 84px !important;
  padding: 0 20px !important;
  border: 1px solid var(--process-line) !important;
  border-radius: var(--process-radius) !important;
  color: var(--process-ink) !important;
  background: var(--process-field) !important;
  box-shadow: none !important;
  font-size: 20px !important;
  font-weight: 430 !important;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
}

body.sundex-transaction-system .stx-order-form > div:has(> label) button[aria-labelledby] {
  min-height: 84px !important;
  color: var(--process-ink) !important;
  background: var(--process-field) !important;
  filter: none !important;
  opacity: 1 !important;
}

body.sundex-transaction-system .stx-order-form > div:has(> label) button[aria-labelledby] :where(span, p, strong, div) {
  color: inherit !important;
}

body.sundex-transaction-system .stx-order-form > div:has(> label) button[aria-labelledby] :where(.text-muted-foreground, span:last-child) {
  color: var(--process-muted) !important;
}

body.sundex-transaction-system .stx-order-form > div:has(> label) button[aria-labelledby] img {
  width: 36px !important;
  height: 36px !important;
}

body.sundex-transaction-system .stx-order-form > div:has(> input) input,
body.sundex-transaction-system .stx-stage-amount input[type="number"],
body.stx-swap-route .stx-swap-ticket input {
  font-size: 34px !important;
  font-weight: 450 !important;
  letter-spacing: -0.025em !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

body.sundex-transaction-system .stx-stage input::placeholder {
  color: #8f9bad !important;
  opacity: 1 !important;
}

body.sundex-transaction-system .stx-stage input:focus,
body.sundex-transaction-system .stx-stage button:focus-visible,
body.stx-swap-route .stx-swap-ticket input:focus {
  outline: none !important;
  border-color: rgba(200, 221, 249, 0.74) !important;
  box-shadow: 0 0 0 3px rgba(153, 188, 231, 0.1) !important;
}

body.sundex-transaction-system .stx-quick-assets {
  display: none !important;
}

body.sundex-transaction-system .stx-order-form > div:has(.lucide-arrow-down-up) {
  position: relative !important;
  height: 1px !important;
  margin: 0 !important;
  background: linear-gradient(90deg, var(--process-line-soft), transparent 42% 58%, var(--process-line-soft)) !important;
}

body.sundex-transaction-system .stx-order-form > div:has(.lucide-arrow-down-up) > div,
body.stx-swap-route .sundex-swap-reverse {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: grid !important;
  width: 54px !important;
  height: 54px !important;
  place-items: center !important;
  border: 1px solid var(--process-line) !important;
  border-radius: 50% !important;
  background: #030810 !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) !important;
}

body.sundex-transaction-system .stx-order-summary {
  display: grid !important;
  gap: 0 !important;
  margin: -2px 0 0 !important;
  padding: 14px 22px !important;
  border: 1px solid var(--process-line) !important;
  border-radius: var(--process-radius) !important;
  background: rgba(5, 10, 18, 0.72) !important;
  box-shadow: none !important;
}

body.sundex-transaction-system .stx-order-summary > div {
  display: flex !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

body.sundex-transaction-system .stx-order-summary dt,
body.sundex-transaction-system .stx-order-summary dd {
  margin: 0 !important;
  color: #aeb8c8 !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  font-variant-numeric: tabular-nums;
}

body.sundex-transaction-system .stx-order-summary dd {
  color: #cbd3df !important;
  text-align: right !important;
}

body.sundex-transaction-system .stx-order-form > button:last-of-type,
body.sundex-transaction-system .stx-stage button.w-full.rounded-full:not([aria-labelledby]),
body.sundex-transaction-system .stx-stage button.w-full.py-3:not([aria-labelledby]),
body.stx-swap-route .stx-swap-ticket > button,
body.stx-verification-flow .stx-vf-submit {
  position: relative !important;
  width: 100% !important;
  min-height: 78px !important;
  margin: 0 !important;
  padding: 0 64px 0 24px !important;
  border: 1px solid rgba(218, 232, 250, 0.86) !important;
  border-radius: 9px !important;
  color: #07101b !important;
  background: linear-gradient(135deg, #c8dcf6 0%, #a8c9f4 50%, #c0d7f5 100%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72), 0 12px 28px rgba(49, 91, 147, 0.13) !important;
  font-size: 22px !important;
  font-weight: 520 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  transition: filter 160ms ease, transform 160ms var(--process-ease) !important;
}

body.sundex-transaction-system .stx-order-form > button:last-of-type::after,
body.sundex-transaction-system .stx-stage button.w-full.rounded-full:not([aria-labelledby])::after,
body.sundex-transaction-system .stx-stage button.w-full.py-3:not([aria-labelledby])::after,
body.stx-swap-route .stx-swap-ticket > button::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 28px;
  font-size: 30px;
  font-weight: 360;
  line-height: 1;
  transform: translateY(-52%);
}

body.sundex-transaction-system .stx-order-form > button:disabled,
body.sundex-transaction-system .stx-stage button.w-full:disabled,
body.stx-swap-route .stx-swap-ticket > button:disabled {
  color: rgba(8, 15, 24, 0.62) !important;
  background: #7f8792 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0.72 !important;
}

body.sundex-transaction-system .stx-disabled-reason {
  margin: -12px 0 0 !important;
  color: var(--process-dim) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* Coin and network selection. */
body.sundex-transaction-system .stx-stage-coins > div,
body.sundex-transaction-system .stx-stage-coins .space-y-3,
body.sundex-transaction-system .stx-stage-coins .grid {
  gap: 12px !important;
}

body.sundex-transaction-system .stx-stage input[placeholder*="Search" i] {
  min-height: 64px !important;
  padding-left: 48px !important;
  font-size: 16px !important;
  text-align: left !important;
}

body.sundex-transaction-system .stx-stage-coins button:has(img),
body.stx-verification-flow .stx-vf-coin-list > button,
body.stx-verification-flow .stx-vf-networks > button {
  min-height: 72px !important;
  padding: 12px 18px !important;
  border: 1px solid var(--process-line-soft) !important;
  border-radius: var(--process-radius) !important;
  color: var(--process-text) !important;
  background: rgba(5, 10, 18, 0.74) !important;
  box-shadow: none !important;
}

body.sundex-transaction-system .stx-stage .rounded-2xl.border.border-border.bg-card:not(.stx-order-form),
body.sundex-transaction-system .stx-stage .rounded-xl.border.border-border.bg-card {
  border: 1px solid var(--process-line-soft) !important;
  border-radius: var(--process-radius) !important;
  background: rgba(5, 10, 18, 0.72) !important;
  box-shadow: none !important;
}

/* Deposit amount fields are one control, helper included — no text colliding with the border. */
body.sundex-transaction-system .stx-funding-shell .stx-stage-amount .bg-card {
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--process-line) !important;
  border-radius: var(--process-radius) !important;
  background: var(--process-field) !important;
}

body.sundex-transaction-system .stx-funding-shell .stx-stage-amount .bg-card input {
  min-height: 98px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--process-line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.sundex-transaction-system .stx-funding-shell .stx-stage-amount .bg-card p {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 28px 20px !important;
  color: var(--process-muted) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

/* Swap is physically the same ticket. */
body.stx-swap-route .stx-swap-main,
body.stx-swap-route .stx-swap-layout {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 680px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.stx-swap-route .stx-swap-layout > .stx-context {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 43% !important;
}

body.stx-swap-route .stx-swap-layout > .stx-ticket-frame {
  left: calc(43% + 40px) !important;
}

body.stx-swap-route .sundex-swap-page-head {
  position: absolute !important;
  z-index: 2 !important;
  top: 39px !important;
  right: 44px !important;
  left: calc(43% + 40px) !important;
  width: auto !important;
  min-height: 113px !important;
  margin: 0 !important;
  padding: 30px 50px 8px !important;
}

body.stx-swap-route .sundex-swap-page-head .stx-step-meta {
  position: absolute !important;
  top: 76px !important;
  left: 50px !important;
}

body.stx-swap-route .stx-swap-ticket {
  position: absolute !important;
  z-index: 2 !important;
  top: 152px !important;
  right: 44px !important;
  bottom: 39px !important;
  left: calc(43% + 40px) !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 50px 28px !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.stx-swap-route .stx-swap-ticket > div.rounded-2xl {
  min-height: 84px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--process-line) !important;
  border-radius: var(--process-radius) !important;
  background: var(--process-field) !important;
  box-shadow: none !important;
}

/* The swap DOM is different from the order form. Normalize it to the same
   84px field / 24px rhythm instead of leaving the compact dashboard cards. */
body.stx-swap-route .stx-swap-ticket > div.rounded-2xl:has(#sundex-swap-pay-amount) {
  min-height: 230px !important;
  padding: 20px !important;
}

body.stx-swap-route .stx-swap-ticket > div.rounded-2xl:not(:has(#sundex-swap-pay-amount)) {
  min-height: 142px !important;
  padding: 20px !important;
}

body.stx-swap-route .stx-swap-ticket > div.rounded-2xl > div:first-child {
  min-height: 26px !important;
}

body.stx-swap-route .stx-swap-ticket > div.rounded-2xl > div:first-child > span {
  margin: 0 !important;
}

body.stx-swap-route .stx-swap-ticket > div.rounded-2xl > .flex.items-center.gap-3 {
  min-height: 84px !important;
  margin-top: 10px !important;
  padding: 0 16px !important;
  border: 1px solid var(--process-line) !important;
  border-radius: 10px !important;
  background: rgba(3, 8, 15, 0.46) !important;
}

body.stx-swap-route .stx-swap-ticket > div.rounded-2xl > .flex.items-center.gap-3 > button {
  min-width: 160px !important;
  min-height: 58px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-right: 1px solid var(--process-line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--process-ink) !important;
  font-size: 18px !important;
}

body.stx-swap-route .stx-swap-ticket #sundex-swap-pay-amount {
  min-height: 80px !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 34px !important;
}

body.stx-swap-route .stx-swap-ticket > div.rounded-2xl > .flex.gap-1\.5 {
  gap: 8px !important;
  min-height: 42px !important;
  margin-top: 10px !important;
}

body.stx-swap-route .stx-swap-ticket > div.rounded-2xl > .flex.gap-1\.5 > button {
  min-height: 42px !important;
  border: 1px solid var(--process-line-soft) !important;
  border-radius: 8px !important;
  background: rgba(177, 201, 233, 0.055) !important;
  box-shadow: none !important;
}

body.stx-swap-route .stx-swap-ticket > .sundex-swap-reverse {
  margin-block: 18px !important;
}

body.stx-swap-route .stx-swap-ticket > button {
  margin-top: 24px !important;
}

body.sundex-transaction-system.stx-swap-route .stx-swap-ticket > button {
  width: 100% !important;
  min-height: 78px !important;
  padding: 0 64px 0 24px !important;
  border-radius: 9px !important;
  font-size: 22px !important;
}

body.stx-swap-route .stx-swap-ticket > p {
  margin-top: 10px !important;
  color: var(--process-dim) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* Verification states: same margins, same type scale, same action hierarchy. */
body.stx-verification-flow .stx-vf-screen,
body.stx-verification-flow .stx-vf-required-screen {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 28px !important;
  text-align: left !important;
  animation: process-enter 220ms var(--process-ease) both !important;
}

body.sundex-transaction-system.stx-verification-flow .stx-head > .stx-vf-progress {
  position: absolute !important;
  top: 52px !important;
  right: 50px !important;
  display: grid !important;
  width: 174px !important;
  height: 4px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
}

body.stx-verification-flow .stx-vf-progress i {
  width: 100% !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(177, 199, 229, 0.13) !important;
}

body.stx-verification-flow .stx-vf-progress i.is-current,
body.stx-verification-flow .stx-vf-progress i.is-complete {
  background: #bfd4f0 !important;
  box-shadow: none !important;
}

body.stx-verification-flow .stx-vf-eyebrow {
  display: block !important;
  margin: 0 0 28px !important;
  color: #aec7e9 !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body.sundex-transaction-system.stx-verification-flow .stx-vf-alert-icon {
  display: grid !important;
  width: 64px !important;
  min-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  place-items: center !important;
  margin: 0 0 28px !important;
  border: 1px solid rgba(217, 153, 165, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(95, 51, 60, 0.16) !important;
  box-shadow: none !important;
}

body.stx-verification-flow .stx-vf-copy {
  max-width: 58ch !important;
  margin: 0 0 16px !important;
  color: var(--process-muted) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

body.stx-verification-flow .stx-vf-summary,
body.stx-verification-flow .stx-vf-required-amount,
body.stx-verification-flow .stx-vf-deposit-amount {
  width: 100% !important;
  max-width: none !important;
  margin: 12px 0 24px !important;
  border: 1px solid var(--process-line) !important;
  border-radius: var(--process-radius) !important;
  background: rgba(5, 10, 18, 0.72) !important;
  box-shadow: none !important;
}

body.stx-verification-flow .stx-vf-actions {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: minmax(0, 1fr) 132px !important;
  gap: 12px !important;
  margin: 0 !important;
}

body.stx-verification-flow .stx-vf-actions > button {
  min-height: 64px !important;
  margin: 0 !important;
  border-radius: 9px !important;
}

body.stx-verification-flow .stx-vf-actions > button:first-child {
  border: 1px solid rgba(218, 232, 250, 0.86) !important;
  color: #07101b !important;
  background: linear-gradient(135deg, #c8dcf6 0%, #a8c9f4 50%, #c0d7f5 100%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72) !important;
  font-size: 18px !important;
  font-weight: 520 !important;
}

body.stx-verification-flow .stx-vf-actions > button:last-child {
  width: 132px !important;
  border: 1px solid var(--process-line) !important;
  color: var(--process-text) !important;
  background: var(--process-field) !important;
  box-shadow: none !important;
}

body.stx-verification-flow .stx-vf-popular {
  display: none !important;
}

body.stx-verification-flow .stx-vf-search input {
  min-height: 64px !important;
  border: 1px solid var(--process-line) !important;
  border-radius: var(--process-radius) !important;
  background: var(--process-field) !important;
}

body.stx-verification-flow .stx-vf-coin-list {
  max-height: min(38dvh, 340px) !important;
  padding: 0 4px 0 0 !important;
}

body.stx-verification-flow .stx-vf-deposit-screen {
  display: grid !important;
  grid-template-columns: 188px minmax(0, 1fr) !important;
  grid-template-areas:
    "eyebrow eyebrow"
    "head head"
    "qr amount"
    "qr status"
    "address address"
    "memo memo"
    "warning warning"
    "close close" !important;
  column-gap: 24px !important;
  row-gap: 14px !important;
}

body.stx-verification-flow .stx-vf-qr-cell {
  min-height: 188px !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--process-line) !important;
  border-radius: var(--process-radius) !important;
  background: var(--process-field) !important;
}

body.stx-verification-flow .stx-vf-address > div > div,
body.stx-verification-flow .stx-vf-memo > div > div {
  min-height: 60px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--process-line) !important;
  border-radius: var(--process-radius) !important;
  background: var(--process-field) !important;
}

body.stx-verification-flow .stx-vf-warning {
  padding: 13px 15px !important;
  border: 1px solid rgba(217, 153, 165, 0.16) !important;
  border-radius: var(--process-radius) !important;
  background: rgba(95, 51, 60, 0.13) !important;
}

/* Transaction dialogs inherit the same ticket language. */
body.sundex-transaction-system [role="dialog"].stx-dialog {
  width: min(760px, calc(100vw - 48px)) !important;
  max-width: 760px !important;
  max-height: min(900px, calc(100dvh - 48px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(182, 207, 238, 0.42) !important;
  border-radius: 16px !important;
  background: var(--process-panel) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.6) !important;
}

body.sundex-transaction-system [role="dialog"].stx-dialog .stx-dialog-header {
  padding: 30px 36px 12px !important;
}

body.sundex-transaction-system [role="dialog"].stx-dialog .stx-dialog-content {
  padding: 20px 36px 36px !important;
  overflow-y: auto !important;
}

/* Hover states are quiet: no levitation, glow, or disappearing borders. */
@media (hover: hover) and (pointer: fine) {
  body.sundex-transaction-system .stx-mode-option:hover {
    color: var(--process-ink) !important;
  }

  body.sundex-transaction-system .buy-sell-option:hover,
  body.sundex-transaction-system .stx-stage-menu button.group:hover,
  body.sundex-transaction-system .stx-stage-coins button:has(img):hover,
  body.stx-verification-flow .stx-vf-coin-list > button:hover,
  body.stx-verification-flow .stx-vf-networks > button:hover {
    border-color: var(--process-line-strong) !important;
    background: var(--process-field-hover) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  body.sundex-transaction-system .stx-order-form > div:has(> label) button[aria-labelledby]:hover {
    border-color: var(--process-line-strong) !important;
    color: #fff !important;
    background: var(--process-field-hover) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  body.sundex-transaction-system .stx-order-form > button:last-of-type:not(:disabled):hover,
  body.sundex-transaction-system .stx-stage button.w-full:not(:disabled):hover,
  body.stx-swap-route .stx-swap-ticket > button:not(:disabled):hover {
    filter: brightness(1.05) !important;
    transform: translateY(-1px) !important;
  }
}

body.sundex-transaction-system button:active {
  transform: scale(0.99) !important;
}

/* 720–820px tall laptop view: keep the reference proportions without clipping. */
@media (max-height: 820px) and (min-width: 1001px) {
  body.sundex-transaction-system .stx-context-copy { bottom: 26px !important; }
  body.sundex-transaction-system .stx-context-label { margin-bottom: 10px !important; font-size: 11px !important; }
  body.sundex-transaction-system .stx-context-title { font-size: 38px !important; }
  body.sundex-transaction-system .stx-context-body { margin: 9px 0 12px !important; font-size: 14px !important; }
  body.sundex-transaction-system .stx-context-rows > div { min-height: 32px !important; }
  body.sundex-transaction-system .stx-context-rows dt,
  body.sundex-transaction-system .stx-context-rows dd { font-size: 13px !important; }
  body.sundex-transaction-system .stx-context-note { margin-top: 14px !important; font-size: 13px !important; }
  body.sundex-transaction-system .stx-head { padding-top: 24px !important; }
  body.sundex-transaction-system .stx-head h1 { font-size: 31px !important; }
  body.sundex-transaction-system .stx-step-meta { font-size: 16px !important; }
  body.sundex-transaction-system .stx-stage { padding-bottom: 18px !important; }
  body.sundex-transaction-system .stx-order-form { gap: 14px !important; }
  body.sundex-transaction-system .stx-order-form > div:has(> label) button,
  body.sundex-transaction-system .stx-order-form > div:has(> label) input,
  body.sundex-transaction-system .stx-stage input,
  body.sundex-transaction-system .stx-stage select,
  body.stx-swap-route .stx-swap-ticket > .rounded-2xl { min-height: 62px !important; }
  body.sundex-transaction-system .stx-order-summary { padding-block: 8px !important; }
  body.sundex-transaction-system .stx-order-summary > div { min-height: 29px !important; }
  body.sundex-transaction-system .stx-order-summary dt,
  body.sundex-transaction-system .stx-order-summary dd { font-size: 14px !important; }
  body.sundex-transaction-system .stx-order-form > button:last-of-type,
  body.sundex-transaction-system .stx-stage button.w-full.rounded-full:not([aria-labelledby]),
  body.sundex-transaction-system .stx-stage button.w-full.py-3:not([aria-labelledby]),
  body.stx-swap-route .stx-swap-ticket > button { min-height: 58px !important; font-size: 18px !important; }
}

/* Tablet: preserve the ticket, remove the cinematic panel. */
@media (max-width: 1000px) {
  body.sundex-transaction-system { overflow: auto !important; }
  body.sundex-transaction-system .platform-main,
  body.sundex-transaction-system main.platform-main {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.sundex-transaction-system .stx-shell,
  body.sundex-transaction-system .stx-funding-shell {
    height: auto !important;
    min-height: 100dvh !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 144px minmax(0, 1fr) !important;
    grid-template-areas: "head" "stage" !important;
  }

  body.sundex-transaction-system .stx-context { display: none !important; }

  body.sundex-transaction-system .stx-ticket-frame,
  body.stx-swap-route .stx-swap-layout > .stx-ticket-frame {
    top: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    left: 18px !important;
  }

  body.sundex-transaction-system .stx-head {
    margin: 18px 18px 0 !important;
    padding: 28px 34px 8px !important;
  }

  body.sundex-transaction-system .stx-stage {
    margin: 0 18px 18px !important;
    padding: 0 34px 30px !important;
  }

  body.sundex-transaction-system .stx-sell-flow { grid-column: 1 !important; }
  body.sundex-transaction-system .stx-sell-inner { grid-template-rows: 144px minmax(0, 1fr) !important; }

  body.stx-swap-route .sundex-swap-page-head {
    top: 18px !important;
    right: 18px !important;
    left: 18px !important;
    padding: 28px 34px 8px !important;
  }

  body.stx-swap-route .sundex-swap-page-head .stx-step-meta { top: 70px !important; left: 34px !important; }
  body.stx-swap-route .stx-swap-ticket { top: 144px !important; right: 18px !important; bottom: 18px !important; left: 18px !important; padding: 0 34px 30px !important; }
}

@media (max-width: 640px) {
  body.sundex-transaction-system .stx-shell,
  body.sundex-transaction-system .stx-funding-shell { grid-template-rows: 174px minmax(0, 1fr) !important; }
  body.sundex-transaction-system .stx-sell-inner { grid-template-rows: 174px minmax(0, 1fr) !important; }

  body.sundex-transaction-system .stx-ticket-frame,
  body.stx-swap-route .stx-swap-layout > .stx-ticket-frame {
    inset: 8px !important;
    border-radius: 14px !important;
    clip-path: none !important;
  }

  body.sundex-transaction-system .stx-ticket-frame::before { clip-path: none !important; }

  body.sundex-transaction-system .stx-head {
    margin: 8px 8px 0 !important;
    padding: 24px 20px 8px !important;
    flex-wrap: wrap !important;
  }

  body.sundex-transaction-system .stx-head h1 { font-size: 29px !important; }
  body.sundex-transaction-system .stx-step-meta { font-size: 15px !important; }

  body.sundex-transaction-system .stx-head > .stx-mode-switch {
    width: 100% !important;
    height: 46px !important;
    flex-basis: 100% !important;
    margin-top: 10px !important;
  }

  body.sundex-transaction-system .stx-stage {
    margin: 0 8px 8px !important;
    padding: 6px 20px 84px !important;
  }

  body.sundex-transaction-system .stx-order-form > div:has(> label) button,
  body.sundex-transaction-system .stx-order-form > div:has(> label) input,
  body.sundex-transaction-system .stx-stage input,
  body.sundex-transaction-system .stx-stage select { min-height: 68px !important; }

  body.sundex-transaction-system .stx-order-form > button:last-of-type,
  body.sundex-transaction-system .stx-stage button.w-full.rounded-full:not([aria-labelledby]),
  body.sundex-transaction-system .stx-stage button.w-full.py-3:not([aria-labelledby]),
  body.stx-swap-route .stx-swap-ticket > button {
    position: sticky !important;
    z-index: 4;
    bottom: max(12px, env(safe-area-inset-bottom));
    min-height: 64px !important;
    font-size: 18px !important;
  }

  body.stx-verification-flow .stx-vf-actions { grid-template-columns: minmax(0, 1fr) !important; }
  body.stx-verification-flow .stx-vf-actions > button:last-child { width: 100% !important; }

  body.stx-verification-flow .stx-vf-deposit-screen {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "eyebrow" "head" "qr" "amount" "status" "address" "memo" "warning" "close" !important;
  }

  body.stx-verification-flow .stx-vf-qr-cell { width: 188px !important; justify-self: start !important; }

  body.stx-swap-route .sundex-swap-page-head { top: 8px !important; right: 8px !important; left: 8px !important; padding: 24px 20px 8px !important; }
  body.stx-swap-route .sundex-swap-page-head .stx-step-meta { top: 64px !important; left: 20px !important; }
  body.stx-swap-route .stx-swap-ticket { top: 132px !important; right: 8px !important; bottom: 8px !important; left: 8px !important; padding: 6px 20px 84px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.sundex-transaction-system *,
  body.sundex-transaction-system *::before,
  body.sundex-transaction-system *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes process-enter {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}