/* ──────────────────────────────────────────────────────────────────────────
   BUNN Payment UI — styles
   Design tokens and styling match /User-app PWA where possible.
   ────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Engravers Gothic";
  src: url("assets/fonts/EngraversGothicBT-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Engravers Gothic";
  src: url("assets/fonts/EngraversGothicBT-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Semantic color tokens */
  --bg:            #FAFAF7;
  --bg-soft:       #F4F3EE;
  --card-yellow:   #FFC803;
  --card-yellow-2: #FFD733;  /* gradient accent */
  --ink:           #1B1818;
  --ink-soft:      #272222;
  --ink-dark:      #1a1a1a;
  --muted:         #8a8a8a;
  --muted-2:       #b8b8b8;
  --surface:       #ffffff;
  --surface-2:     #F4F3EE;
  --surface-dark:  #141414;
  --surface-dark-2:#1f1f1f;
  --success:       #27C77A;
  --danger:        #ff4d6d;
  --pink:          #F0879A;             /* PWA pink — asset dropdown accent */
  --pink-border:   rgba(240, 135, 154, 0.55);
  --divider:       rgba(27, 24, 24, 0.08);

  /* Radius scale */
  --radius-card:   36px;
  --radius-btn:    999px;
  --radius-field:  18px;
  --radius-chip:   14px;

  /* Elevation / shadow scale */
  --shadow-card:
    drop-shadow(0 4px 2px rgba(0, 0, 0, 0.04))
    drop-shadow(0 18px 32px rgba(0, 0, 0, 0.08));
  --shadow-btn:
    0 8px 20px rgba(27, 24, 24, 0.18),
    0 2px 4px rgba(27, 24, 24, 0.08);
  --shadow-btn-yellow:
    0 10px 24px rgba(255, 200, 3, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-row:
    0 4px 16px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.03);

  /* Motion — strong Emil-style curves */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);          /* Strong UI ease-out */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);      /* On-screen movement */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);       /* iOS-style drawer */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-press: 140ms;   /* press feedback */
  --dur-fast: 160ms;    /* small UI */
  --dur-base: 220ms;    /* dropdowns, color/background */
  --dur-sheet: 420ms;   /* drawers/modals */

  /* Typography */
  --font-display: "Engravers Gothic", "Archivo Black", system-ui, sans-serif;
  --font-body:    "Engravers Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 200, 3, 0.08), transparent 60%),
    var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.02em;
  min-height: 100dvh;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
a { color: inherit; }

/* Accessible focus ring (keyboard only) */
:focus-visible {
  outline: 3px solid rgba(27, 24, 24, 0.9);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Frame (mobile container) ───────────────────────────────────────────── */
/* Paddings match the PWA: header 10px top, body 16px 40px 52px */
.frame {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  min-height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
}
.screen { padding-left: 0; padding-right: 0; }
.screen.is-active > .header { padding: 14px 0 14px; }

/* Card wrapper sits below header with visible horizontal padding (≥16px so
   the filter drop-shadow doesn't get clipped) */
.card-wrapper,
.card-wrapper--tall {
  padding-left: 20px;
  padding-right: 20px;
}

/* Sections that follow the yellow card get generous horizontal padding
   (matches PWA body: 40px horizontal, 52px bottom for CTA shadow) */
.screen > .pay-options,
.screen > .detail-card,
.screen > .btn-stack,
.screen > .row-label,
.screen > .wallet-addr,
.screen > .intro-copy,
.screen > .checkbox {
  margin-left: 40px;
  margin-right: 40px;
}
.detail-card { margin-bottom: 8px; }
.screen:last-child { padding-bottom: 24px; }
.screen.is-active[data-screen="/checkout"] { padding-bottom: 52px; }
.screen.is-active[data-screen="/pay"] { padding-bottom: 32px; }

/* Auth screens use a tighter horizontal padding */
.screen[data-screen="/login"] .auth-card,
.screen[data-screen="/signup"] .auth-card,
.screen[data-screen="/signup/kyc"] .auth-card {
  margin: 8px 16px 16px;
}

/* Show only the active screen */
.screen { display: none; }
.screen.is-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  animation: screen-in .32s var(--ease-out);
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ── Header (BUNN logo) ─────────────────────────────────────────────────── */
/* Logo sizing matches the PWA: width 24.9% of container, clamped 72–100px */
.header {
  flex-shrink: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0 8px;
}
.header__logo {
  width: 24.9%;
  min-width: 72px;
  max-width: 100px;
  height: auto;
  display: block;
}
.header__back {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .header__back:hover { background: rgba(27, 24, 24, 0.06); }
}
.header__back:active { transform: translateY(-50%) scale(0.94); }

/* ── Yellow card ────────────────────────────────────────────────────────── */
.card-wrapper {
  position: relative;
  /* Only set vertical here so the horizontal longhand from the earlier rule
     is preserved. Shadow lives on the wrapper since clip-path on the card
     itself kills filter drop-shadows. */
  padding-top: 4px;
  padding-bottom: 6px;
  filter: var(--shadow-card);
}
/* Tall variant grows to fill the screen's remaining vertical space */
.card-wrapper--tall {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.card-wrapper--tall > .card-yellow {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.card-yellow {
  background:
    radial-gradient(120% 80% at 50% 0%, #FFD733 0%, var(--card-yellow) 55%),
    var(--card-yellow);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3.5dvh, 36px) clamp(20px, 6vw, 32px) clamp(22px, 3dvh, 32px);
  position: relative;
  overflow: hidden;
  /* Smooth clip-path interpolation is unsupported, so skip transition */
}
.card-yellow::before {
  /* subtle top highlight */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(60px, 8dvh, 90px);
  background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent);
  pointer-events: none;
}
.card-yellow--tall { padding-bottom: clamp(44px, 7dvh, 72px); }

/* Landing card variant — no via/rate rows, so extra vertical whitespace
   redistributed: more top breathing, bigger invoice gap, taller bunny reveal */
.card-yellow--landing {
  /* Shift more padding to top → amount feels vertically centered */
  padding-top: clamp(32px, 5.5dvh, 52px);
  /* Taller bottom clearance for the bunny to peek more generously */
  padding-bottom: clamp(72px, 11dvh, 108px);
}
/* Invoice block on landing gets extra top margin — amount breathes freely */
.card-yellow__invoice--landing {
  margin-top: clamp(22px, 3.5dvh, 36px);
}

/* Peek bunny stuck to bottom of landing card (screen 1) */
.card-peek-bunny {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  /* Slightly larger bunny now that more vertical space is available */
  width: 64%;
  max-width: 240px;
  pointer-events: none;
  user-select: none;
}
.card-yellow--full {
  padding: clamp(34px, 5dvh, 54px) clamp(20px, 6vw, 32px) clamp(24px, 3dvh, 34px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Checkout variant: amount + QR + address all inside yellow card */
.card-yellow--checkout {
  padding: 30px 22px 24px;
}
.card-yellow__qr {
  display: flex;
  justify-content: center;
  margin: 18px auto 18px;
  padding: 10px;
  background: #fff;
  border-radius: 18px;
  width: fit-content;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.card-yellow__qr img,
.card-yellow__qr canvas {
  width: 180px !important;
  height: 180px !important;
  display: block;
}
.card-yellow__qr canvas { display: none; }

/* Network gate — selectors and QR/address swap places based on state.
   The leaving side is removed instantly (display: none) so the card
   re-flows; the entering side gets a soft "gate-in" animation with a
   subtle blur bridge so the swap feels intentional, not a hard cut. */
.card-yellow--checkout.is-network-missing .card-yellow__qr,
.card-yellow--checkout.is-network-missing .card-yellow__sublabel,
.card-yellow--checkout.is-network-missing .address-box--on-yellow,
.card-yellow--checkout.is-network-missing .copy-feedback--on-yellow,
.card-yellow--checkout.is-network-missing .card-yellow__pay-meta {
  display: none;
}
.card-yellow--checkout.is-network-set .card-yellow__selectors {
  display: none;
}

/* Entering side animation — fires whenever the gate flips and the
   element is mounted into the layout.
   NOTE: animation-fill-mode is "forwards" (not "both") so elements
   with a delay aren't held at opacity:0 before their delay ticks past.
   This prevents the brief "QR visible but address invisible" flash on
   first paint of /checkout when arriving with state.network already
   set (e.g. via the OKX login flow). */
.card-yellow--checkout.is-network-set .card-yellow__qr,
.card-yellow--checkout.is-network-set .card-yellow__sublabel,
.card-yellow--checkout.is-network-set .address-box--on-yellow,
.card-yellow--checkout.is-network-set .card-yellow__pay-meta {
  animation: gate-in 360ms var(--ease-out) forwards;
}
.card-yellow--checkout.is-network-set .card-yellow__sublabel { animation-delay: 30ms; }
.card-yellow--checkout.is-network-set .address-box--on-yellow { animation-delay: 60ms; }
.card-yellow--checkout.is-network-set .card-yellow__pay-meta { animation-delay: 90ms; }

.card-yellow--checkout.is-network-missing .card-yellow__selectors {
  animation: gate-in 360ms var(--ease-out) both;
}

@keyframes gate-in {
  from { opacity: 0; transform: scale(0.96); filter: blur(6px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
.card-yellow__sublabel {
  margin: 4px 0 8px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink);
  opacity: 0.75;
  text-transform: uppercase;
}

.card-yellow__label {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(12px, 1.5dvh, 14px);
  letter-spacing: 0.22em;
  color: var(--ink);
}
.card-yellow__label--wide {
  font-size: clamp(12px, 2.4dvh, 22px);
  letter-spacing: 0.16em;
  line-height: 1.5;
}

.card-yellow__amount {
  margin: 4px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4.6dvh, 40px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card-yellow__amount--sm { font-size: clamp(22px, 3.8dvh, 34px); }

.card-yellow__unit {
  display: block;
  font-size: clamp(22px, 4dvh, 42px);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: 6px;
}
.card-yellow__amount--sm .card-yellow__unit { font-size: clamp(18px, 3.2dvh, 34px); }

.card-yellow__via {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(10px, 1.6dvh, 18px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 2dvh, 20px);
  letter-spacing: 0.16em;
  color: var(--ink);
}
.card-yellow__via b { font-weight: 700; font-size: clamp(16px, 2.4dvh, 24px); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.card-yellow__divider {
  flex: 0 0 36px;
  height: 2px;
  background: currentColor;
  opacity: 0.8;
}

.card-yellow__rate {
  margin: 8px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink);
  opacity: 0.58;
  font-variant-numeric: tabular-nums;
}

/* Invoice / recipient info block */
.card-yellow__invoice {
  margin: 14px auto 0;
  padding: 10px 16px;
  max-width: 260px;
  border-top: 1px solid rgba(27, 24, 24, 0.14);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.card-yellow__invoice--sm {
  margin-top: 10px;
  padding: 8px 14px;
  max-width: 240px;
}
.card-yellow__to,
.card-yellow__inv {
  margin: 0;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink);
  line-height: 1.4;
}
.card-yellow__to span,
.card-yellow__inv span {
  display: inline-block;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.2em;
  opacity: 0.55;
  margin-right: 6px;
  text-transform: uppercase;
}
.card-yellow__to b {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.card-yellow__inv {
  opacity: 0.65;
}

.card-yellow__big {
  margin: clamp(10px, 1.6dvh, 18px) 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 5dvh, 52px);
  letter-spacing: 0.04em;
  color: var(--ink);
}
.card-yellow__big--muted { color: var(--ink); opacity: 0.92; }
.card-yellow__big--center {
  font-size: clamp(34px, 6.5dvh, 64px);
  margin-top: clamp(16px, 3dvh, 36px);
  letter-spacing: 0.04em;
}

/* Pending screen video (transparent webm/mov reused from PWA) */
.card-yellow--pending {
  overflow: hidden;
  justify-content: flex-start;
}
/* Fill the lower portion of the card; anchor to bottom. Transparent bg. */
.pending-video-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 62%;
  pointer-events: none;
}
/* Non-iOS: native <video> fills the wrap */
.pending-video-wrap > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  background-color: transparent !important;
}
/* iOS: hidden video + canvas pair */
.pending-video-wrap > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Success confetti layer ─────────────────────────────────────────────── */
.confetti-layer {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.confetti-layer svg { width: 100%; height: 100%; }
/* Ensure non-absolute flex children sit above the confetti */
.card-yellow--full > *:not(.confetti-layer):not(.pending-video-wrap) {
  position: relative;
  z-index: 1;
}

/* ── Close / external buttons ───────────────────────────────────────────── */
/* External close buttons sit at the card's top-right corner; the S-curve
   notch is applied via clip-path on the card so the button "pops out". */
.card-close {
  width: clamp(52px, 14vw, 60px);
  height: clamp(52px, 14vw, 60px);
  border-radius: 50%;
  background: var(--ink-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.card-close svg { width: 44%; height: 44%; }
@media (hover: hover) and (pointer: fine) {
  .card-close:hover { filter: brightness(1.15); }
}
.card-close:active { transform: scale(0.94); }

/* Single external close — positioned relative to the card-wrapper,
   top-right corner, exactly flush with the card's corner */
.card-close--external {
  position: absolute;
  top: 4px;
  right: 20px;
}

.card-close--light {
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.card-close-group {
  position: absolute;
  top: 4px;
  right: 20px;
  left: auto;
  width: auto;
  display: inline-flex;
  gap: 10px;
  z-index: 10;
}

/* ── Intro copy + buttons (screen 1) ────────────────────────────────────── */
.intro-copy {
  text-align: center;
  margin: 26px 8px 20px;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--ink);
  opacity: 0.72;
  line-height: 1.55;
  font-weight: 400;
}

.btn-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.btn-stack--bottom { margin-top: 22px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  height: 58px;
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  position: relative;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }

.btn--dark {
  background: linear-gradient(180deg, #2A2626 0%, #1A1717 100%);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
@media (hover: hover) and (pointer: fine) {
  .btn--dark:hover { filter: brightness(1.1); }
}

.btn--primary-yellow {
  background: linear-gradient(180deg, #FFD733 0%, #FFC803 100%);
  color: var(--ink);
  box-shadow: var(--shadow-btn-yellow);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary-yellow:hover { filter: brightness(1.04); }
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink-dark);
}
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover { background: rgba(27, 24, 24, 0.04); }
}

.btn--ghost {
  color: var(--ink);
  opacity: 0.65;
  height: 48px;
  letter-spacing: 0.16em;
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { opacity: 0.9; }
}

.btn--disabled,
.btn[disabled] {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  filter: saturate(0.7);
}

.btn--okx .btn__okx-logo {
  height: 18px;
  filter: brightness(0) invert(1);
}
.btn--receipt {
  align-self: center;
  margin-top: auto;
  padding: 0 26px;
  gap: 10px;
}

/* ── Auth card ──────────────────────────────────────────────────────────── */
.auth-card {
  background: var(--surface);
  border-radius: 32px;
  padding: clamp(22px, 3.2dvh, 32px) clamp(20px, 5vw, 26px) clamp(20px, 3dvh, 28px);
  margin-top: 8px;
  box-shadow: var(--shadow-row);
  border: 1px solid var(--divider);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.auth-card .page-title {
  margin: 4px 0 6px;
  font-size: clamp(24px, 3.6dvh, 32px);
  letter-spacing: 0.02em;
}
.auth-card .page-subtitle { margin-bottom: clamp(18px, 2.4dvh, 24px); }
.auth-card .form { flex: 1; }

/* Staggered entrance for auth content — runs once when screen activates */
.screen.is-active .auth-card .page-title,
.screen.is-active .auth-card .page-subtitle,
.screen.is-active .auth-card .form > *,
.screen.is-active .auth-card .checkbox,
.screen.is-active .auth-card .btn-stack--bottom {
  animation: auth-stagger 460ms var(--ease-out) both;
}
.screen.is-active .auth-card .page-title { animation-delay: 60ms; }
.screen.is-active .auth-card .page-subtitle { animation-delay: 100ms; }
.screen.is-active .auth-card .form > *:nth-child(1) { animation-delay: 140ms; }
.screen.is-active .auth-card .form > *:nth-child(2) { animation-delay: 180ms; }
.screen.is-active .auth-card .form > *:nth-child(3) { animation-delay: 220ms; }
.screen.is-active .auth-card .form > *:nth-child(4) { animation-delay: 260ms; }
.screen.is-active .auth-card .form > *:nth-child(5) { animation-delay: 300ms; }
.screen.is-active .auth-card .form > *:nth-child(6) { animation-delay: 340ms; }
.screen.is-active .auth-card .checkbox { animation-delay: 320ms; }
.screen.is-active .auth-card .btn-stack--bottom { animation-delay: 360ms; }
@keyframes auth-stagger {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .screen.is-active .auth-card .page-title,
  .screen.is-active .auth-card .page-subtitle,
  .screen.is-active .auth-card .form > *,
  .screen.is-active .auth-card .checkbox,
  .screen.is-active .auth-card .btn-stack--bottom {
    animation: none;
  }
}

.auth-switch {
  text-align: center;
  margin: 4px 0 4px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.auth-switch .link {
  color: var(--ink);
  font-weight: 700;
}

/* ── Steps (register) ───────────────────────────────────────────────────── */
.step-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin: 8px 0 24px;
}
.step {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  background: #f2f2f2;
  color: var(--muted);
  font-size: 14px;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.step--active { background: var(--ink-dark); color: #fff; }
.step--done { background: var(--card-yellow); color: var(--ink); transform: scale(0.94); }
.step-divider {
  width: 48px;
  height: 2px;
  background: #e6e6e6;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.step-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms var(--ease-in-out);
}
.step-divider--done::after { transform: scaleX(1); }

.page-title {
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.04em;
}
.page-subtitle {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.field__hint {
  margin: 4px 2px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.field input,
.field select {
  height: 52px;
  width: 100%;
  border-radius: var(--radius-field);
  border: 1.5px solid var(--divider);
  padding: 0 18px;
  background: #fff;
  letter-spacing: 0.02em;
  font-size: 16px; /* >=16px prevents iOS auto-zoom on focus */
  transition:
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--ink-dark);
  box-shadow: 0 4px 14px rgba(27, 24, 24, 0.06);
}
.field input::placeholder { color: var(--muted-2); }

/* Inline label row: label on the left, optional action link on the right */
.field__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.field__row .link--inline { margin: 0; }

/* Password field with show/hide toggle */
.field__input-wrap {
  position: relative;
}
.field--password .field__input-wrap input {
  padding-right: 52px;
}
.field__password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  transition: color var(--dur-base) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .field__password-toggle:hover { color: var(--ink); }
}
.field__password-toggle:active { transform: translateY(-50%) scale(0.9); }
.field__password-toggle svg { width: 20px; height: 20px; }
.field__password-toggle .icon-eye-off { display: none; }
.field__password-toggle.is-visible .icon-eye { display: none; }
.field__password-toggle.is-visible .icon-eye-off { display: block; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row > .field { min-width: 0; }
.field-row select { width: 100%; min-width: 0; text-overflow: ellipsis; }

.field--upload .upload-drop {
  border: 1.5px dashed var(--muted-2);
  border-radius: var(--radius-field);
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .field--upload .upload-drop:hover {
    border-color: var(--ink-dark);
    background: rgba(27, 24, 24, 0.02);
  }
}

/* OTP */
.otp {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}
.otp__input {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0;
  border-radius: var(--radius-field);
  border: 1.5px solid var(--divider);
  background: #fff;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  box-shadow: 0 0 0 0 rgba(27, 24, 24, 0);
  transition:
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.otp__input:focus {
  outline: none;
  border-color: var(--ink-dark);
  /* Subtle lift — small enough that 8px gap absorbs the scale */
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 14px rgba(27, 24, 24, 0.10);
}

/* ── Checkbox (T&C) ─────────────────────────────────────────────────────── */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 4px 10px;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink);
  user-select: none;
  cursor: pointer;
}
.checkbox__box { margin-top: 1px; }
.checkbox input { display: none; }
.checkbox__box {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--divider);
  background: #fff;
  position: relative;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.checkbox__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  /* Anchor the check to its bottom-right corner so the pop reads as a draw-in */
  transform-origin: 80% 80%;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.checkbox input:checked + .checkbox__box {
  background: var(--ink-dark);
  border-color: var(--ink-dark);
}
.checkbox input:checked + .checkbox__box::after {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}
.checkbox input:active + .checkbox__box { transform: scale(0.92); }
.link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link--inline {
  align-self: flex-start;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--muted);
  letter-spacing: 0.04em;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link--inline:hover { color: var(--ink); }
}
.link--inline:active { transform: scale(0.96); color: var(--ink); }

/* ── Checkout-specific ──────────────────────────────────────────────────── */

/* Grouped detail card (wraps wallet + chain + token sections) */
.detail-card {
  background: var(--surface);
  border-radius: 26px;
  padding: 18px 18px 20px;
  margin-top: 20px;
  box-shadow: var(--shadow-row);
  border: 1px solid var(--divider);
}
.detail-card + .detail-card { margin-top: 14px; }

.row-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 2px 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-card .row-label:first-child { margin-top: 2px; }

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.btn-pill:active { transform: scale(0.96); }
.btn-pill--dark {
  background: var(--ink-dark);
  color: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
.btn-pill--dark:hover { filter: brightness(1.1); }

.wallet-addr {
  margin: 0 2px 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.4;
}
.wallet-addr::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(39, 199, 122, 0.2);
}

/* Chain dropdown */
.chain-select {
  position: relative;
  margin: 0 0 4px;
}
.chain-select__trigger {
  width: 100%;
  height: 54px;
  border-radius: var(--radius-field);
  background: var(--surface-2);
  border: 1.5px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.chain-select__trigger:hover { background: #ECEBE5; }
.chain-select__trigger svg {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform var(--dur-base) var(--ease-out);
}
.chain-select.is-open .chain-select__trigger { border-color: var(--ink); background: var(--surface); }
.chain-select.is-open .chain-select__trigger svg { transform: rotate(180deg); }

.chain-select__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: var(--radius-field);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  padding: 6px;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
}
.chain-select__menu li {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.chain-select__menu li:hover,
.chain-select__menu li.is-selected {
  background: #f4f4f4;
}

/* Address box + QR */
.address-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  border-radius: var(--radius-field);
  background: #f4f4f4;
  padding: 10px 10px 10px 16px;
}
.address-box__text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.address-box__text--wrap {
  white-space: normal;
  word-break: break-all;
  line-height: 1.35;
  font-size: 12px;
  flex: 1 1 auto;
}
.address-box--full {
  align-items: center;
}
.address-box__copy {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-press) var(--ease-out);
}
.address-box--on-yellow {
  background: rgba(255, 255, 255, 0.62);
  border: 1.5px solid rgba(39, 34, 34, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.address-box--on-yellow .address-box__copy {
  background: var(--ink-dark);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
@media (hover: hover) and (pointer: fine) {
  .address-box--on-yellow .address-box__copy:hover { filter: brightness(1.12); }
}
.copy-feedback--on-yellow {
  color: var(--ink);
  margin-left: 4px;
}
.address-box__copy:active { transform: scale(0.92); }

.copy-feedback {
  margin: 6px 0 0 14px;
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.copy-feedback.is-visible { opacity: 0.85; transform: translateY(0); }

.qr-wrap {
  margin: 16px auto 4px;
  padding: 10px;
  background: #fff;
  border: 1.5px solid var(--divider);
  border-radius: 20px;
  width: fit-content;
}
.qr { display: block; width: 180px; height: 180px; }

/* Token toggle (USDT/USDC) */
.token-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 2px 0 14px;
  padding: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  border: 1px solid var(--divider);
}
.token-toggle__btn {
  height: 46px;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink);
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .token-toggle__btn:hover:not(.is-active) { background: rgba(0,0,0,0.04); }
}
.token-toggle__btn.is-active {
  background: linear-gradient(180deg, #2A2626 0%, #1A1717 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(27, 24, 24, 0.18);
}
.token-toggle__btn:active { transform: scale(0.97); }

/* Total row */
.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 2px 4px;
  padding-top: 16px;
  border-top: 1px dashed var(--divider);
}
.total-row__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.total-row__amount {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.total-row__amount span { font-size: 18px; opacity: 0.65; }
.total-row__note {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.info-pill {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--divider);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  transition: background var(--dur-base) var(--ease-out);
}
.info-pill:hover { background: #ECEBE5; }

/* OKX button full width variant inside detail card */
.btn--okx-full { width: 100%; margin-top: 4px; }

/* Confirm payment via OKX — lives inside the OKX summary card,
   pinned to the bottom under the total. Pink primary, black text + logo. */
.btn--okx-confirm {
  width: 100%;
  margin-top: 18px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: #FF9BAC;
  box-shadow:
    0 1px 2px rgba(255, 155, 172, 0.35),
    0 10px 24px rgba(255, 155, 172, 0.45);
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn--okx-confirm:hover { background: #FFA8B6; }
}
.btn--okx-confirm:active { transform: scale(0.97); }
.btn--okx-confirm > span { white-space: nowrap; }
.btn--okx-confirm .btn__okx-logo {
  height: 16px;
  width: auto;
  flex-shrink: 0;
  filter: brightness(0);
}

/* Two-flow checkout: pay-to-address (default) vs OKX summary (after pick) */
.pay-options[hidden] { display: none !important; }
.pay-options {
  margin-top: 14px;
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pay-options__hint {
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.02em;
  line-height: 1.55;
}
.pay-options__hint b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pay-options__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--muted);
  margin: 4px 2px;
}
.pay-options__divider::before,
.pay-options__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--divider);
}

/* Combined chain + currency block */
.pay-with {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.okx-summary {
  margin-left: 20px;
  margin-right: 20px;
}
.okx-summary .row-label:first-child { margin-top: 0; }

/* ── Inline selectors — white panel inside yellow card ──────────────────── */
.card-yellow__selectors {
  width: 100%;
  background: #ffffff;
  border-radius: 22px;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  margin-top: 18px;
  box-shadow:
    0 1px 2px rgba(20, 16, 0, 0.05),
    0 6px 18px rgba(20, 16, 0, 0.08);
}

.card-yellow__sel-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-yellow__sel-divider {
  height: 1px;
  background: rgba(39, 34, 34, 0.08);
  margin: 0 -2px;
}

.card-yellow__sel-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.42;
  margin-left: 2px;
}

/* Inline currency toggle (override default token-toggle margins) */
.token-toggle--inline {
  margin: 0;
  padding: 4px;
  gap: 6px;
  background: #F4F3EE;
  border: none;
}
.token-toggle--inline .token-toggle__btn {
  height: 40px;
  font-size: 12px;
  letter-spacing: 0.2em;
}

/* Network chips — uniform 3-column grid */
.network-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.network-chip {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: #F4F3EE;
  border: none;
  border-radius: 14px;
  padding: 0 6px;
  min-height: 40px;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .network-chip:hover:not(.is-active) { background: #ECEAE2; }
}
.network-chip:active { transform: scale(0.97); }
.network-chip.is-active {
  background: linear-gradient(180deg, #2A2626 0%, #1A1717 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(27, 24, 24, 0.18);
}

/* Selected currency + chain meta row, sits below the wallet address */
.card-yellow__pay-meta {
  margin: 12px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.card-yellow__pay-meta-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.62;
  font-weight: 700;
}
.card-yellow__pay-meta-dot {
  opacity: 0.5;
  font-weight: 700;
}
.card-yellow__pay-meta-change {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(39, 34, 34, 0.08);
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card-yellow__pay-meta-change:hover { background: rgba(39, 34, 34, 0.14); }
}
.card-yellow__pay-meta-change:active { transform: scale(0.97); }
.selector-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.selector-field .field__label { margin-left: 2px; }
.selector-field .token-toggle { margin: 0; }

/* Chain dropdown placeholder state ("Choose network") */
.chain-select__value.is-placeholder {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Toggle switch */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 2px 0;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.toggle input { display: none; }
.toggle__track {
  display: inline-block;
  width: 40px; height: 22px;
  background: #e4e4e4;
  border-radius: 999px;
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.toggle__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  /* GPU-accelerated slide; avoid animating `left` which triggers paint */
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.toggle input:checked + .toggle__track { background: var(--ink-dark); }
.toggle input:checked + .toggle__track .toggle__thumb {
  transform: translateX(18px);
  background: var(--card-yellow);
}

/* ── OKX balance dark sheet (bottom-pinned overlay) ──────────────────────── */

/* Background screen (the one sitting beneath the modal) */
.screen.is-background {
  position: relative;
  /* Slight scale-down + dim for iOS-style modal presentation */
  transform: scale(0.98);
  transform-origin: top center;
  filter: brightness(0.7);
  transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
  pointer-events: none;
}

/* Modal screen: fills the viewport, backdrop + sheet pinned to bottom */
.screen--modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
}
.screen--modal.is-active {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 0;
  cursor: pointer;
  animation: backdrop-in 280ms var(--ease-out);
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Sheet is edge-to-edge horizontally, pinned to the bottom, rounded only
   at the top. Matches the original reference image. */
.sheet-dark {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  height: 72dvh;
  padding: 30px 22px calc(28px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(120% 60% at 50% 0%, #1f1f1f 0%, #141414 70%),
    var(--surface-dark);
  border-radius: 35px 35px 0 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  animation: sheet-slide-up var(--dur-sheet) var(--ease-drawer);
}
@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.sheet-dark::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  border-radius: 35px 35px 0 0;
  pointer-events: none;
}

/* Plain circular close button inside the sheet, top-right, no notch */
.sheet-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  z-index: 3;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sheet-close:hover { filter: brightness(0.96); }
}
.sheet-close:active { transform: scale(0.94); }
.sheet-close svg { width: 48%; height: 48%; }
.sheet-dark__title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.22em;
  color: #fff;
  margin: 10px 0 22px;
  flex-shrink: 0;
}

.chip-row {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.chip {
  flex: 1;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  background: transparent;
  color: #c8c8c8;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover:not(.chip--active) { background: rgba(255,255,255,0.04); }
}
.chip:active { transform: scale(0.97); }
.chip--active {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.chip__diamond {
  font-size: 10px;
  transform: translateY(-0.5px);
}

/* Scrollable token list area inside the dark sheet */
.token-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px 8px;
  /* Fade out the top edge where content scrolls under */
  mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
}

.token-list { display: flex; flex-direction: column; }
.token-list li { list-style: none; }
.token-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 16px 12px;
  border: none;
  background: transparent;
  border-radius: 14px;
  color: inherit;
  cursor: pointer;
  min-height: 64px;
  position: relative;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.token-list li + li .token-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}
@media (hover: hover) and (pointer: fine) {
  .token-row:hover:not([disabled]) { background: rgba(255,255,255,0.04); }
}
.token-row:active:not([disabled]) { transform: scale(0.985); background: rgba(255,255,255,0.06); }
.token-row:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
  background: rgba(255,255,255,0.04);
}
.token-row[disabled] { cursor: not-allowed; }
.token-row__left {
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 12px;
}
.token-row__symbol {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #fff;
}
.token-row__sub {
  margin: 0;
  font-size: 11px;
  color: #9a9a9a;
  letter-spacing: 0.06em;
}
.token-row__right { text-align: right; }
.token-row__amount {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.token-row__status {
  margin: 0;
  display: inline-block;
  font-size: 10px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  color: #b4b4b4;
  letter-spacing: 0.06em;
}
.token-row--warning {
  border: 1.5px solid var(--pink-border);
  border-radius: 16px;
  padding: 16px 16px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(240, 135, 154, 0.06), rgba(240, 135, 154, 0.02));
  box-shadow: 0 6px 20px rgba(240, 135, 154, 0.12);
}
.token-row--warning::before { display: none; }
.token-row--warning .token-row__amount { color: var(--pink); }
.dot { color: var(--pink); font-size: 10px; vertical-align: middle; }
.dot-small { color: var(--pink); font-size: 8px; }

/* ── Mascot + declined ──────────────────────────────────────────────────── */
.mascot {
  margin: 8px auto 16px;
  width: 240px;
  max-width: 80%;
  filter: drop-shadow(0 14px 24px rgba(27, 24, 24, 0.12));
  animation: bunny-float 3.6s ease-in-out infinite;
}
.mascot--small { width: 200px; }
.mascot img {
  width: 100%;
  height: auto;
  display: block;
}
/* Success / declined: bunny is always pinned to the geometric center of the yellow card */
.card-yellow--full { position: relative; }
.card-yellow.card-yellow--full > .mascot {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  animation: none; /* float animation moves to inner img to avoid transform conflict */
  pointer-events: none;
}
.card-yellow.card-yellow--full > .mascot img {
  animation: bunny-float 3.6s ease-in-out infinite;
}
@keyframes bunny-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.warn-icon {
  width: 28px;
  height: 28px;
  margin: 14px auto 8px;
  display: block;
  opacity: 0.75;
}
.declined-msg {
  margin: 4px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0.82;
}

/* ── Debug nav ──────────────────────────────────────────────────────────── */
#debug-nav[hidden] { display: none !important; }
#debug-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #000;
  color: #fff;
  padding: 6px 10px;
  display: flex;
  justify-content: space-around;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  z-index: 999;
}
#debug-nav a { color: #fff; text-decoration: none; padding: 4px 6px; }
#debug-nav a:hover { background: #333; }

/* ── Responsive tweaks ──────────────────────────────────────────────────── */
@media (max-height: 720px) {
  .card-yellow__amount { font-size: 34px; }
  .card-yellow__amount--sm { font-size: 28px; }
  .card-yellow__unit { font-size: 28px; }
  .card-yellow__amount--sm .card-yellow__unit { font-size: 22px; }
}

/* ── OKX login waiting screen ──────────────────────────────────────────── */
.okx-wait-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 32px 64px;
  text-align: center;
  gap: 28px;
}
.okx-wait__logo-wrap {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  background: var(--ink-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 36px rgba(27, 24, 24, 0.18);
  animation: okx-wait-pulse 1.6s var(--ease-out, ease) infinite;
}
.okx-wait__logo {
  width: 64px;
  height: 64px;
  filter: brightness(0) invert(1);
  animation: okx-wait-rock 2.4s ease-in-out infinite;
}
.okx-wait__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 280px;
}
.okx-wait__dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.okx-wait__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-dark);
  opacity: 0.35;
  animation: okx-wait-dot 1.2s ease-in-out infinite;
}
.okx-wait__dots span:nth-child(2) { animation-delay: 0.2s; }
.okx-wait__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes okx-wait-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 18px 36px rgba(27, 24, 24, 0.18); }
  50%      { transform: scale(1.04); box-shadow: 0 22px 44px rgba(27, 24, 24, 0.24); }
}
@keyframes okx-wait-rock {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
@keyframes okx-wait-dot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-4px); }
}