@rhinestone/deposit-modal 0.0.0-dev-20260608080045

package/dist/styles.css

@@ -0,0 +1,5143 @@
+/* ABOUTME: Styles for the deposit-modal component. */
+/* ABOUTME: Uses CSS variables for theming - matches deposit-widget design exactly. */
+
+/* Self-host the Figma typefaces so the modal renders with the correct
+   weights regardless of whether the consumer app loads Inter / Geist Mono. */
+@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@500&family=Inter:wght@400;500;600;700&display=swap");
+
+/* =============================================================================
+   CSS Variables (Light Mode Default) - Using Radix Gray Scale
+   ============================================================================= */
+
+.rs-modal {
+  /* Tailwind zinc scale (matches Figma design tokens) */
+  --color-gray1: #fafafa;
+  --color-gray2: #f4f4f5;
+  --color-gray3: #f4f4f5;
+  --color-gray4: #e4e4e7;
+  --color-gray5: #d4d4d8;
+  --color-gray6: #d4d4d8;
+  --color-gray7: #a1a1aa;
+  --color-gray8: #9f9fa9;
+  --color-gray9: #9f9fa9;
+  --color-gray10: #71717b;
+  --color-gray11: #52525c;
+  --color-gray12: #27272a;
+
+  /* Blue (info) */
+  --color-blue3: #e6f4fe;
+  --color-blue4: #d5efff;
+  --color-blue9: #0090ff;
+  --color-blue10: #0588f0;
+  --color-blue11: #0d74ce;
+
+  /* Neutral accent (primary action) — zinc */
+  --color-neutral3: #f4f4f5;
+  --color-neutral4: #e4e4e7;
+  --color-neutral9: #27272a;
+  --color-neutral10: #18181b;
+  --color-neutral11: #09090b;
+
+  /* Green (success) */
+  --color-green3: #e6f6eb;
+  --color-green4: #d6f1df;
+  --color-green9: #30a46c;
+  --color-green10: #2b9a66;
+
+  /* Red (error/destructive) */
+  --color-red3: #feebec;
+  --color-red4: #ffdbdc;
+  --color-red9: #e5484d;
+  --color-red10: #dc3e42;
+
+  /* Amber (warning) */
+  --color-amber3: #fff7c2;
+  --color-amber8: #e2a336;
+  --color-amber11: #92400e;
+
+  /* Semantic colors */
+  --rs-background: #ffffff;
+  --rs-background-secondary: var(--color-gray1);
+  --rs-surface-subtle: #fcfbfb;
+  --rs-surface: var(--color-gray3);
+  --rs-surface-hover: var(--color-gray4);
+  /* Figma coin-select/selected — zinc-100 fill + zinc-300 border. */
+  --rs-asset-selected-bg: #f4f4f5;
+  --rs-asset-selected-border: #d4d4d8;
+  /* Figma: icon-wrapper tokens. Same as surface in light, but dark mode
+     diverges so we keep them separate. */
+  --rs-icon-wrapper-bg: #f4f4f5;
+  --rs-icon-wrapper-icon: #9f9fa9;
+  /* Figma input/label + view/icon-secondary — differ from the generic
+     gray scale: light-mode label/icon is zinc-600 (#52525c), dark mode
+     falls to zinc-400 (#9f9fa9). */
+  --rs-input-label: #52525c;
+  --rs-icon-secondary: #52525c;
+  /* Figma button-dark-ghost token — used by amount-step presets. */
+  --rs-button-ghost-bg: #e4e4e7;
+  --rs-button-ghost-bg-hover: #d4d4d8;
+  --rs-button-ghost-text: #27272a;
+
+  /* Primary (CTA). Default theme uses the dark-on-light pair.
+     A custom theme overrides these directly via inline CSS vars,
+     which short-circuits the [data-theme="dark"] block below so
+     a custom color stays consistent across modes. */
+  --rs-primary: var(--color-neutral9);
+  --rs-primary-hover: var(--color-neutral10);
+  --rs-primary-active: var(--color-neutral11);
+  --rs-primary-disabled-bg: var(--color-gray4);
+  --rs-primary-disabled-fg: var(--color-gray11);
+  --rs-primary-tint: var(--color-neutral3);
+  --rs-primary-foreground: #fafafa;
+
+  --rs-success: var(--color-green9);
+  --rs-success-tint: var(--color-green3);
+  /* Figma alert palette — alert/red (error) + alert/amber (warning). Amber
+     has no distinct border token in the design, so its border matches its bg. */
+  --rs-error: #fb2c36;
+  --rs-error-tint: #fef2f2;
+  --rs-error-border: #ffc9c9;
+  --rs-warning: #7b3306;
+  --rs-warning-tint: #fee685;
+  --rs-warning-border: #fee685;
+  /* Callout (generic error/warning notice) — lighter translucent "glass"
+     tints so the modal surface shows through. Kept separate from the solid
+     alert palette above, which input-error states and badges still use. */
+  --rs-callout-error-bg: rgba(251, 44, 54, 0.07);
+  --rs-callout-error-border: rgba(251, 44, 54, 0.18);
+  --rs-callout-error-text: #e7000b;
+  --rs-callout-warning-bg: rgba(245, 158, 11, 0.12);
+  --rs-callout-warning-border: rgba(245, 158, 11, 0.24);
+  --rs-callout-warning-text: #b45309;
+
+  --rs-foreground: var(--color-gray12);
+  --rs-muted: var(--color-gray10);
+  --rs-muted-foreground: var(--color-gray9);
+  --rs-icon: var(--color-gray11);
+
+  --rs-border: var(--color-gray2);
+  --rs-border-surface: var(--color-gray4);
+  --rs-border-accent: var(--color-neutral9);
+
+  --rs-secondary: var(--color-gray3);
+  --rs-secondary-hover: var(--color-gray4);
+
+  /* Figma: dropdown/select menu uses a tight 0/2/4 shadow at 0.25 so it
+     reads on every edge (including the side that sits against the modal). */
+  --rs-shadow-dropdown: 0 2px 4px rgba(0, 0, 0, 0.25);
+
+  /* Sizing */
+  --rs-height-button: 42px;
+  --rs-height-titlebar: 36px;
+  --rs-width-dialog: 380px;
+
+  /* Radius */
+  --rs-radius-none: 0;
+  --rs-radius-sm: 8px;
+  --rs-radius-md: 10px;
+  --rs-radius-lg: 14px;
+  --rs-radius-full: 9999px;
+  --rs-radius: var(--rs-radius-md);
+
+  /* Typography. Figma uses Inter; we list it first and fall back to the
+     system stack so consumers that load Inter get the exact design, and
+     everyone else gets a sensible default. */
+  font-family:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--rs-foreground);
+  background-color: var(--rs-background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  /* Flex column so children (header + body) can split available height with
+     the body region scrolling when it overflows. Figma: modal applies a
+     16px padding and 16px gap between the header row and the body. */
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 16px;
+  gap: 16px;
+}
+
+/* =============================================================================
+   Dark Mode
+   ============================================================================= */
+
+.rs-modal[data-theme="dark"] {
+  /* Zinc dark scale (matches Figma) */
+  --color-gray1: #0c0c0c;
+  --color-gray2: #18181b;
+  --color-gray3: #18181b;
+  --color-gray4: #27272a;
+  --color-gray5: #3f3f46;
+  --color-gray6: #3f3f46;
+  --color-gray7: #52525c;
+  --color-gray8: #71717b;
+  --color-gray9: #71717b;
+  --color-gray10: #9f9fa9;
+  --color-gray11: #d4d4d8;
+  --color-gray12: #e4e4e7;
+
+  /* Dark mode tints: translucent overlays instead of light pastels */
+  --color-blue3: rgba(0, 144, 255, 0.1);
+  --color-blue4: rgba(0, 144, 255, 0.16);
+  --color-blue10: #3b9eff;
+  --color-green3: rgba(48, 164, 108, 0.1);
+  --color-green4: rgba(48, 164, 108, 0.16);
+  --color-green10: #3cb179;
+  --color-red3: rgba(229, 72, 77, 0.1);
+  --color-red4: rgba(229, 72, 77, 0.16);
+  --color-red10: #f16a6e;
+  --color-amber3: rgba(226, 163, 54, 0.12);
+  --color-amber11: #fcd34d;
+
+  /* Inverted neutral pair: light-on-dark CTA */
+  --color-neutral3: rgba(244, 244, 245, 0.08);
+  --color-neutral4: rgba(244, 244, 245, 0.14);
+  --color-neutral9: #fafafa;
+  --color-neutral10: #e4e4e7;
+  --color-neutral11: #d4d4d8;
+
+  --rs-background: #0a0a0a;
+  /* Well / dropdown / QR-card surface in dark mode. Used by anything that
+     renders an elevated container (asset rows, QR well, select inputs). */
+  --rs-background-secondary: #18181b;
+  --rs-surface-subtle: #18181b;
+  --rs-surface: #27272a;
+  /* Figma: icon-wrapper/background — separate from --rs-surface so the
+     deposit-header icon tile stays #18181b in dark mode. */
+  --rs-icon-wrapper-bg: #18181b;
+  --rs-icon-wrapper-icon: #52525c;
+  --rs-input-label: #9f9fa9;
+  --rs-icon-secondary: #9f9fa9;
+  --rs-button-ghost-bg: #27272a;
+  --rs-button-ghost-bg-hover: #3f3f46;
+  --rs-button-ghost-text: #e4e4e7;
+  --rs-surface-hover: #3f3f46;
+  /* Figma coin-select/selected (dark) — zinc-900 fill + zinc-700 border. */
+  --rs-asset-selected-bg: #18181b;
+  --rs-asset-selected-border: #3f3f46;
+  /* Figma button-dark in dark mode: zinc-200 disc, near-black label. */
+  --rs-primary: #e4e4e7;
+  --rs-primary-hover: #d4d4d8;
+  --rs-primary-active: #9f9fa9;
+  --rs-primary-foreground: #09090b;
+  --rs-primary-disabled-bg: #27272a;
+  --rs-primary-disabled-fg: #71717b;
+  --rs-icon: var(--color-gray10);
+
+  --rs-shadow-dropdown:
+    0 4px 20px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
+
+  /* Figma alert palette (dark) — alert/red red-950 bg / red-800 border,
+     alert/amber amber-600 bg / amber-50 text (border matches bg). */
+  --rs-error-tint: #460809;
+  --rs-error-border: #9f0712;
+  --rs-warning: #fffbeb;
+  --rs-warning-tint: #e17100;
+  --rs-warning-border: #e17100;
+  /* Callout glass tints (dark) — translucent over the near-black surface. */
+  --rs-callout-error-bg: rgba(251, 44, 54, 0.13);
+  --rs-callout-error-border: rgba(251, 44, 54, 0.3);
+  --rs-callout-error-text: #ff6467;
+  --rs-callout-warning-bg: rgba(245, 158, 11, 0.13);
+  --rs-callout-warning-border: rgba(245, 158, 11, 0.28);
+  --rs-callout-warning-text: #fcd34d;
+
+  color-scheme: dark;
+}
+
+/* =============================================================================
+   Modal Overlay & Content
+   ============================================================================= */
+
+.rs-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.rs-modal-overlay--open {
+  opacity: 1;
+}
+
+.rs-modal-content {
+  --rs-radius-lg: 16px;
+  --rs-background: #ffffff;
+  --rs-border: #f4f4f5;
+
+  position: relative;
+  width: 100%;
+  max-width: var(--rs-width-dialog, 380px);
+  /* Cap the modal at 600px (or viewport-40 on tiny screens) so long lists
+     scroll inside instead of growing the modal. */
+  max-height: min(600px, calc(100vh - 40px));
+  /* Explicit 0 (not the `auto` default) so the min-height transition
+     below has a definite starting value when :has() rules later raise
+     it to the iframe-mounted height. Transitions from `auto` are
+     unreliable in browsers and tend to apply instantly. */
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  margin: 20px;
+  overflow: hidden;
+  background-color: var(--rs-background);
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-lg);
+  transform: scale(0.95);
+  transition:
+    transform 0.2s ease,
+    /* Smooth resize when the user moves between steps with different
+       widths (e.g. ConnectStep 400 → Connect-via-Swapped 469) instead of
+       a hard pop. */
+    max-width 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    /* Same for height: when a flow starts that pre-reserves the iframe
+       size (via the min-height :has() rules below), grow smoothly from
+       the previous step's height instead of jumping. Min-height is on
+       modal-content rather than modal-body so the transitioned property
+       lives on an element that survives step swaps. */
+    min-height 280ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.rs-modal-content[data-theme="dark"] {
+  --rs-background: #0a0a0a;
+  --rs-border: #18181b;
+}
+
+.rs-modal-overlay--open .rs-modal-content {
+  transform: scale(1);
+}
+
+.rs-modal-content--inline {
+  position: static;
+  margin: 0;
+  max-width: 100%;
+  transform: none;
+  max-height: none;
+}
+
+/* =============================================================================
+   Modal Header
+   ============================================================================= */
+
+.rs-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--rs-height-titlebar);
+  padding: 0 12px;
+  background-color: var(--rs-background-secondary);
+  border-bottom: 1px solid var(--rs-border);
+}
+
+.rs-modal-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.rs-modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--rs-foreground);
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.rs-modal-close:hover {
+  opacity: 0.65;
+}
+
+.rs-modal-close svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* =============================================================================
+   Modal Body
+   ============================================================================= */
+
+.rs-modal-body {
+  display: flex;
+  flex-direction: column;
+  min-height: 280px;
+  overflow-y: auto;
+  overscroll-behavior: none;
+  /* overflow-y:auto forces overflow-x to clip too, which would cut the left/
+     right shadow of absolutely-positioned popups (e.g. the chain/token select
+     menus) that sit flush against this scroll container's edge. Pull the box
+     out to the modal's padding edge and pad it back so content stays put but
+     the clip region gains room for the popup shadow to render. */
+  margin-inline: -16px;
+  padding-inline: 16px;
+}
+
+/* Scrollbars are hidden throughout the modal UI. The portfolio list
+   (.rs-asset-list) is the sole exception — it keeps a visible scrollbar since
+   it's a long, independently-scrolling list. The :not() exemption also keeps
+   this rule's specificity above the per-container scrollbar rules elsewhere. */
+.rs-modal *:not(.rs-asset-list) {
+  scrollbar-width: none;
+}
+
+.rs-modal *:not(.rs-asset-list)::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+/* =============================================================================
+   Button Styles
+   ============================================================================= */
+
+.rs-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-weight: 500;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-radius: var(--rs-radius-sm);
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s,
+    color 0.15s;
+}
+
+/* Pill variant — opt-in for places that still want a fully rounded button. */
+.rs-button--pill {
+  border-radius: var(--rs-radius-full);
+}
+
+.rs-button:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--rs-background),
+    0 0 0 4px var(--rs-border-accent);
+}
+
+.rs-button:disabled {
+  pointer-events: none;
+}
+
+/* Sizes */
+.rs-button--size-default {
+  height: var(--rs-height-button);
+  padding: 0 16px;
+  font-size: 14px;
+}
+
+.rs-button--size-small {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 13px;
+}
+
+/* Variants */
+.rs-button--accent {
+  background-color: var(--rs-primary);
+  border-color: var(--rs-primary);
+  color: var(--rs-primary-foreground);
+}
+
+.rs-button--accent:hover:not(:disabled) {
+  background-color: var(--rs-primary-hover);
+  border-color: var(--rs-primary-hover);
+}
+
+.rs-button--accent:active:not(:disabled) {
+  background-color: var(--rs-primary-active);
+  border-color: var(--rs-primary-active);
+}
+
+.rs-button--accent:disabled {
+  background-color: var(--rs-primary-disabled-bg);
+  border-color: var(--rs-primary-disabled-bg);
+  color: var(--rs-primary-disabled-fg);
+}
+
+.rs-button--default {
+  background-color: var(--rs-surface);
+  border-color: var(--rs-surface);
+  color: var(--rs-foreground);
+}
+
+.rs-button--default:hover:not(:disabled) {
+  background-color: var(--rs-surface-hover);
+}
+
+.rs-button--destructive {
+  background-color: var(--rs-error-tint);
+  color: var(--rs-error);
+}
+
+.rs-button--destructive:hover:not(:disabled) {
+  background-color: var(--color-red4);
+}
+
+.rs-button--outline {
+  background-color: transparent;
+  border-color: var(--rs-primary);
+  color: var(--rs-primary);
+}
+
+.rs-button--outline:hover:not(:disabled) {
+  background-color: var(--rs-surface);
+}
+
+.rs-button--full-width {
+  width: 100%;
+}
+
+.rs-button__content--hidden {
+  opacity: 0;
+}
+
+.rs-button__spinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rs-button__loading-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* =============================================================================
+   Input Styles
+   ============================================================================= */
+
+.rs-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.rs-input-label {
+  font-size: 13px;
+  color: var(--rs-muted);
+}
+
+.rs-input {
+  display: flex;
+  height: 40px;
+  width: 100%;
+  padding: 0 16px;
+  font-size: 15px;
+  color: var(--rs-foreground);
+  background-color: var(--rs-background);
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-full);
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+
+.rs-input::placeholder {
+  color: var(--rs-muted);
+}
+
+.rs-input:focus {
+  outline: none;
+  border-color: var(--rs-primary);
+  box-shadow: 0 0 0 1px var(--rs-primary);
+}
+
+.rs-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.rs-input--error {
+  border-color: var(--rs-error);
+}
+
+.rs-input--error:focus {
+  border-color: var(--rs-error);
+  box-shadow: 0 0 0 1px var(--rs-error);
+}
+
+.rs-input-error {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  color: var(--rs-error);
+}
+
+.rs-input-error-icon {
+  width: 14px;
+  height: 14px;
+}
+
+/* =============================================================================
+   Spinner
+   ============================================================================= */
+
+.rs-spinner {
+  width: 20px;
+  height: 20px;
+  animation: rs-spin 1s linear infinite;
+}
+
+.rs-spinner--sm {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-spinner--lg {
+  width: 32px;
+  height: 32px;
+}
+
+@keyframes rs-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* =============================================================================
+   Step Content Styles
+   ============================================================================= */
+
+.rs-step {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.rs-step-header {
+  padding: 12px;
+  padding-bottom: 8px;
+}
+
+.rs-step-header-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.rs-step-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.rs-step-icon--accent {
+  background-color: var(--rs-primary-tint);
+  color: var(--rs-primary);
+}
+
+.rs-step-icon--success {
+  background-color: var(--rs-success-tint);
+  color: var(--rs-success);
+}
+
+.rs-step-icon--error {
+  background-color: var(--rs-error-tint);
+  color: var(--rs-error);
+}
+
+.rs-step-icon--warning {
+  background-color: var(--rs-warning-tint);
+  color: var(--color-amber8);
+}
+
+.rs-step-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.rs-step-title {
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--rs-foreground);
+}
+
+.rs-step-title--error {
+  color: var(--rs-error);
+}
+
+.rs-step-description {
+  margin-top: 8px;
+  margin-bottom: 4px;
+  font-size: 15px;
+  line-height: 22px;
+  color: var(--rs-muted);
+}
+
+.rs-step-body {
+  flex-grow: 1;
+  padding: 12px;
+  padding-top: 6px;
+}
+
+/* Info panel (wallet details) */
+.rs-info-panel {
+  background-color: var(--rs-background-secondary);
+  border: 1px solid var(--rs-border-surface);
+  border-radius: var(--rs-radius-sm);
+}
+
+.rs-info-panel-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+}
+
+.rs-info-panel-row + .rs-info-panel-row {
+  border-top: 1px solid var(--rs-border-surface);
+}
+
+.rs-info-panel-label {
+  font-size: 12px;
+  color: var(--rs-muted-foreground);
+}
+
+.rs-info-panel-value {
+  font-family:
+    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+    Consolas, monospace;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+}
+
+.rs-step-footer {
+  padding: 0 12px 4px;
+}
+
+.rs-step-footer--connect-empty {
+  padding-bottom: 14px;
+  margin-top: auto;
+}
+
+.rs-step-footer-buttons {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+
+/* =============================================================================
+   Card Styles (Processing step details)
+   ============================================================================= */
+
+.rs-card {
+  background-color: var(--rs-surface);
+  border-radius: var(--rs-radius-md);
+}
+
+.rs-card-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+}
+
+.rs-card-row + .rs-card-row {
+  border-top: 1px solid var(--rs-border-surface);
+}
+
+.rs-card-label {
+  font-size: 13px;
+  color: var(--rs-muted);
+}
+
+.rs-card-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+}
+
+.rs-card-value--mono {
+  font-family:
+    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+    Consolas, monospace;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.rs-card-value--accent {
+  color: var(--rs-primary);
+}
+
+/* =============================================================================
+   Processing Phase Board
+   ============================================================================= */
+
+.rs-phase-board {
+  padding: 14px;
+  border-radius: var(--rs-radius-md);
+  border: 1px solid var(--rs-border-surface);
+  background: var(--rs-background-secondary);
+}
+
+.rs-modal[data-theme="dark"] .rs-phase-board {
+  background: var(--rs-surface);
+}
+
+/* Horizontal progress track */
+.rs-track {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  position: relative;
+  padding: 0 4px;
+}
+
+.rs-track-rail {
+  position: absolute;
+  top: 11px;
+  left: 16px;
+  right: 16px;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--rs-border-surface);
+  overflow: hidden;
+}
+
+.rs-track-fill {
+  height: 100%;
+  border-radius: 2px;
+  background: var(--rs-success);
+  transition: width 0.6s ease;
+}
+
+.rs-track-fill--failed {
+  background: var(--rs-error);
+}
+
+.rs-track-checkpoint {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+  z-index: 1;
+  min-width: 48px;
+}
+
+.rs-track-node {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--rs-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+
+.rs-track-check-icon {
+  width: 11px;
+  height: 11px;
+}
+
+.rs-track-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  white-space: nowrap;
+}
+
+@keyframes rs-track-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(24, 24, 27, 0.15); }
+  50% { box-shadow: 0 0 0 6px rgba(24, 24, 27, 0.08); }
+}
+
+.rs-modal[data-theme="dark"] .rs-track-checkpoint--active .rs-track-node {
+  animation-name: rs-track-pulse-dark;
+}
+
+@keyframes rs-track-pulse-dark {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.15); }
+  50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08); }
+}
+
+.rs-track-checkpoint--active .rs-track-node {
+  background: var(--rs-primary);
+  animation: rs-track-pulse 2s ease-in-out infinite;
+}
+
+.rs-track-checkpoint--active .rs-track-label {
+  font-weight: 600;
+  color: var(--rs-foreground);
+}
+
+.rs-track-checkpoint--warning .rs-track-node {
+  background: var(--color-amber8);
+  box-shadow: 0 0 0 4px var(--rs-warning-tint);
+}
+
+.rs-track-checkpoint--warning .rs-track-label {
+  color: var(--color-amber8);
+}
+
+.rs-track-checkpoint--complete .rs-track-node {
+  background: var(--rs-success);
+}
+
+.rs-track-checkpoint--complete .rs-track-check-icon {
+  stroke: white;
+}
+
+.rs-track-checkpoint--complete .rs-track-label {
+  color: var(--rs-success);
+}
+
+.rs-track-checkpoint--failed .rs-track-node {
+  background: var(--rs-error);
+}
+
+.rs-track-checkpoint--failed .rs-track-check-icon {
+  stroke: white;
+}
+
+.rs-track-checkpoint--failed .rs-track-label {
+  color: var(--rs-error);
+}
+
+.rs-phase-divider {
+  height: 1px;
+  margin: 8px 0;
+  background: var(--rs-border-surface);
+}
+
+.rs-phase-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rs-phase-detail-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 24px;
+}
+
+.rs-phase-detail-label {
+  font-size: 12px;
+  color: var(--rs-muted);
+}
+
+.rs-phase-detail-value {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--rs-foreground);
+}
+
+/* =============================================================================
+   Asset Row
+   ============================================================================= */
+
+.rs-asset-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 12px;
+  background-color: transparent;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  transition: background-color 0.15s;
+}
+
+.rs-asset-row:hover:not(:disabled) {
+  background-color: var(--rs-surface-subtle);
+}
+
+.rs-asset-row:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+}
+
+/* Figma coin-select/selected: zinc-100 fill + 1px zinc-300 border (dark:
+   zinc-900 fill + zinc-700 border). The inset box-shadow draws the border
+   without shifting layout. Listed with :hover so the selected fill persists
+   when the row is hovered (a bare :hover out-specifies a single class). */
+.rs-asset-row--selected,
+.rs-asset-row--selected:hover:not(:disabled) {
+  background-color: var(--rs-asset-selected-bg);
+  box-shadow: inset 0 0 0 1px var(--rs-asset-selected-border);
+}
+
+.rs-asset-info {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  gap: 16px;
+}
+
+/* Icon group — token glyph (32px) with the chain glyph (14px) overlapping
+   the bottom-right corner via flex `items-end` + negative right margin
+   on the token icon (matches Figma's `mr-[-10px]` layout). */
+.rs-asset-icon-wrapper {
+  display: flex;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+
+.rs-asset-icon {
+  width: 28px;
+  height: 28px;
+  margin-right: -10px;
+  border-radius: 50%;
+  background-color: var(--rs-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--rs-muted);
+  overflow: hidden;
+}
+
+.rs-asset-icon img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.rs-asset-chain-badge {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background-color: var(--rs-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 7px;
+  font-weight: 700;
+  overflow: hidden;
+}
+
+.rs-asset-chain-badge img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.rs-asset-text {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rs-asset-name-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+.rs-asset-name {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--rs-foreground);
+  line-height: normal;
+}
+
+.rs-asset-chain {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: normal;
+}
+
+.rs-asset-balance-small {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: normal;
+}
+
+.rs-asset-balance {
+  flex-shrink: 0;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+  text-align: right;
+  font-feature-settings: "tnum";
+  line-height: normal;
+}
+
+.rs-asset-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  /* Figma's asset list is 284px — exactly 4 rows (4×68 + 3×4 gaps). Cap here
+     so wallets with many assets scroll inside instead of growing the modal
+     past the design's height. */
+  max-height: 284px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  /* Pull rows back to the row's natural left edge inside a scrollable
+     container so the scrollbar gutter doesn't visually shift content. */
+  scrollbar-gutter: stable;
+}
+
+.rs-asset-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.rs-asset-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.rs-asset-list::-webkit-scrollbar-thumb {
+  background-color: var(--rs-surface-hover);
+  border-radius: var(--rs-radius-full);
+}
+
+.rs-asset-list::-webkit-scrollbar-thumb:hover {
+  background-color: var(--rs-muted-foreground);
+}
+
+/* =============================================================================
+   Alert Boxes
+   ============================================================================= */
+
+.rs-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px;
+  border-radius: var(--rs-radius-md);
+}
+
+.rs-alert--info {
+  background-color: var(--rs-primary-tint);
+}
+
+.rs-alert--info .rs-alert-icon,
+.rs-alert--info .rs-alert-text {
+  color: var(--color-blue10);
+}
+
+.rs-alert--success {
+  background-color: var(--rs-success-tint);
+}
+
+.rs-alert--success .rs-alert-icon,
+.rs-alert--success .rs-alert-text {
+  color: var(--color-green10);
+}
+
+.rs-alert--error {
+  background-color: var(--rs-error-tint);
+}
+
+.rs-alert--error .rs-alert-icon,
+.rs-alert--error .rs-alert-text {
+  color: var(--color-red10);
+}
+
+.rs-alert--warning {
+  background-color: var(--rs-warning-tint);
+}
+
+.rs-alert--warning .rs-alert-icon,
+.rs-alert--warning .rs-alert-text {
+  color: var(--color-amber8);
+}
+
+.rs-alert-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+}
+
+.rs-alert-text {
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* =============================================================================
+   Utility Classes
+   ============================================================================= */
+
+.rs-text-primary {
+  color: var(--rs-foreground);
+}
+
+.rs-text-secondary {
+  color: var(--rs-muted);
+}
+
+.rs-text-tertiary {
+  color: var(--rs-muted-foreground);
+}
+
+.rs-text-accent {
+  color: var(--rs-primary);
+}
+
+.rs-text-success {
+  color: var(--rs-success);
+}
+
+.rs-text-error {
+  color: var(--rs-error);
+}
+
+.rs-text-sm {
+  font-size: 13px;
+}
+
+.rs-text-xs {
+  font-size: 12px;
+}
+
+.rs-text-lg {
+  font-size: 15px;
+}
+
+.rs-text-xl {
+  font-size: 18px;
+}
+
+.rs-font-medium {
+  font-weight: 500;
+}
+
+.rs-font-mono {
+  font-family:
+    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+    Consolas, monospace;
+}
+
+.rs-mt-2 {
+  margin-top: 8px;
+}
+
+.rs-mt-3 {
+  margin-top: 12px;
+}
+
+.rs-mb-2 {
+  margin-bottom: 8px;
+}
+
+.rs-mb-3 {
+  margin-bottom: 12px;
+}
+
+.rs-space-y-3 > * + * {
+  margin-top: 12px;
+}
+
+.rs-flex {
+  display: flex;
+}
+
+.rs-flex-col {
+  flex-direction: column;
+}
+
+.rs-items-center {
+  align-items: center;
+}
+
+.rs-justify-between {
+  justify-content: space-between;
+}
+
+.rs-gap-2 {
+  gap: 8px;
+}
+
+.rs-gap-3 {
+  gap: 12px;
+}
+
+.rs-w-full {
+  width: 100%;
+}
+
+.rs-text-center {
+  text-align: center;
+}
+
+.rs-text-right {
+  text-align: right;
+}
+
+/* =============================================================================
+   Powered By Footer
+   ============================================================================= */
+
+.rs-powered-by {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  /* `border-box` so the 16px side padding counts INTO the 100% width
+     instead of adding 32px on top of it (which otherwise pushes the
+     footer past containers with their own horizontal padding — e.g.
+     the tracker — and paints a phantom horizontal scrollbar). */
+  box-sizing: border-box;
+  padding: 0 16px 16px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-muted);
+}
+
+.rs-powered-by-link {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+}
+
+.rs-powered-by-logo {
+  display: block;
+  width: 72px;
+  height: 16px;
+  color: currentColor;
+}
+
+/* =============================================================================
+   Loading State
+   ============================================================================= */
+
+.rs-loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 12px;
+  gap: 12px;
+}
+
+.rs-loading-text {
+  text-align: center;
+}
+
+.rs-loading-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+}
+
+.rs-loading-subtitle {
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--rs-muted-foreground);
+}
+
+/* =============================================================================
+   Empty State
+   ============================================================================= */
+
+.rs-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 12px 16px;
+  gap: 6px;
+}
+
+.rs-empty-icon {
+  width: 32px;
+  height: 32px;
+  color: var(--rs-muted-foreground);
+}
+
+.rs-empty-text {
+  font-size: 13px;
+  color: var(--rs-muted-foreground);
+}
+
+.rs-empty-address {
+  font-size: 12px;
+  font-family: monospace;
+  color: var(--rs-muted-foreground);
+  opacity: 0.7;
+  margin-top: 4px;
+  padding: 4px 10px;
+  background: var(--rs-surface);
+  border-radius: 6px;
+}
+
+.rs-empty-disconnect {
+  margin-top: 8px;
+  padding: 0;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--rs-muted-foreground);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s;
+  font-family: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.rs-empty-disconnect:hover {
+  color: var(--rs-foreground);
+}
+
+/* =============================================================================
+   Link Styles
+   ============================================================================= */
+
+.rs-link {
+  color: var(--color-blue10);
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.rs-link:hover {
+  text-decoration: underline;
+}
+
+.rs-link-external {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.rs-link-external svg {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+   Chain Switch Warning
+   ============================================================================= */
+
+.rs-chain-switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px;
+  background-color: var(--rs-warning-tint);
+  border-radius: var(--rs-radius-md);
+}
+
+.rs-chain-switch-text {
+  font-size: 13px;
+  color: var(--rs-foreground);
+}
+
+/* =============================================================================
+   Animations
+   ============================================================================= */
+
+@keyframes rs-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes rs-scaleIn {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.rs-animate-fadeIn {
+  animation: rs-fadeIn 0.3s ease-out forwards;
+}
+
+.rs-animate-scaleIn {
+  animation: rs-scaleIn 0.4s ease-out forwards;
+}
+
+/* =============================================================================
+   Progress Bar
+   ============================================================================= */
+
+.rs-progress-bar {
+  width: 100%;
+  height: 4px;
+  background-color: var(--rs-surface);
+  border-radius: var(--rs-radius-full);
+  overflow: hidden;
+}
+
+.rs-progress-bar-fill {
+  height: 100%;
+  background-color: var(--rs-primary);
+  border-radius: var(--rs-radius-full);
+}
+
+.rs-progress-bar-fill--indeterminate {
+  width: 30%;
+  animation: rs-progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes rs-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
+/* =============================================================================
+   Connect Step Centered Layout
+   ============================================================================= */
+
+.rs-connect-centered {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.rs-connect-centered--wallets {
+  padding: 16px;
+}
+
+.rs-connect-centered--minimal {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 16px;
+}
+
+.rs-connect-wallet-list {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.rs-connect-wallet-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid var(--rs-border-surface);
+  border-radius: var(--rs-radius-lg);
+  background: var(--rs-background-secondary);
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.rs-connect-wallet-row:hover {
+  border-color: var(--rs-border);
+  background: var(--rs-surface);
+}
+
+.rs-connect-wallet-row--selected {
+  border-color: var(--rs-primary);
+  background: var(--rs-primary-tint);
+}
+
+.rs-connect-wallet-row--action {
+  border-style: dashed;
+}
+
+.rs-connect-wallet-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  border-radius: 50%;
+  background: var(--rs-surface);
+  color: var(--rs-muted);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.rs-connect-wallet-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.rs-connect-wallet-icon--selected {
+  background: var(--rs-primary-tint);
+  color: var(--rs-primary);
+}
+
+.rs-connect-wallet-icon--action {
+  background: var(--rs-background-secondary);
+  color: var(--rs-muted-foreground);
+}
+
+.rs-connect-wallet-row:hover .rs-connect-wallet-icon--action {
+  background: var(--rs-surface);
+}
+
+.rs-connect-wallet-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  color: var(--rs-muted-foreground);
+  margin-left: auto;
+  transition: color 0.15s ease;
+}
+
+.rs-connect-wallet-indicator svg {
+  width: 14px;
+  height: 14px;
+}
+
+.rs-connect-wallet-row--selected .rs-connect-wallet-indicator {
+  color: var(--rs-primary);
+}
+
+.rs-connect-wallet-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.rs-connect-wallet-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--rs-foreground);
+}
+
+.rs-connect-wallet-address {
+  font-size: 12px;
+  color: var(--rs-muted);
+}
+
+/* Modal screen container — shared layout primitive. 12px padding all
+   around, 16px gap between the body slot and the powered-by footer,
+   footer anchored to the modal bottom edge. Used by every screen
+   (deposit method, asset select, amount, confirm, …) so the vertical
+   rhythm stays consistent. */
+.rs-screen {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  /* Outer padding now lives on the parent .rs-modal; this container only
+     manages the vertical rhythm between body slot and powered-by. */
+  padding: 0;
+  gap: 16px;
+  /* Each screen fades in on mount so step-to-step transitions feel
+     progressive instead of a hard swap. Short enough that the user
+     doesn't perceive a delay; long enough to look intentional. */
+  animation: rs-screen-enter 180ms ease-out;
+}
+
+@keyframes rs-screen-enter {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Body slot — direct child of .rs-screen. Always uses a 16px internal
+   gap (per the compact sizing pass). */
+.rs-screen-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Retained as a no-op alias for callers that still pass the legacy
+   modifier; the gap matches the default now. */
+.rs-screen-body--gap-32 {
+  gap: 16px;
+}
+
+/* Tiny utility row for things like the "Disconnect wallet" link that
+   live between the body slot and powered-by. The negative margin
+   shrinks the parent's gap to a tight visual gap above the link. */
+.rs-screen-tight-row {
+  display: flex;
+  justify-content: center;
+  margin-top: -4px;
+}
+
+.rs-screen-tight-row .rs-connect-wallet-manage {
+  margin-top: 0;
+}
+
+/* Powered-by sits inside the screen container, so its own padding would
+   double up on the 16px container padding — reset it, and use
+   `margin-top: auto` so it anchors to the bottom edge. */
+.rs-screen > .rs-powered-by {
+  padding: 0;
+  margin-top: auto;
+}
+
+.rs-connect-wallet-manage {
+  margin-top: 10px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-size: 12px;
+  color: var(--rs-muted);
+  cursor: pointer;
+}
+
+.rs-connect-wallet-manage:hover {
+  color: var(--rs-foreground);
+}
+
+/* Inline "Disconnect" pill that sits inside a connected-wallet ListRow's
+   meta slot. 14/Medium text, transparent background so the row's surface
+   shows through. Vertical padding stays under the 36px title+subtitle block
+   so the pill never inflates the row past the 60px the other method cards
+   use — keeps Transfer crypto / External wallet / Polymarket rows uniform. */
+.rs-list-row-action {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.rs-list-row-action:hover {
+  background: var(--rs-surface-hover);
+}
+
+.rs-list-row-action:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+}
+
+.rs-connect-transfer-link {
+  margin-top: 10px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  color: var(--rs-muted);
+  cursor: pointer;
+  text-align: center;
+  width: 100%;
+}
+
+.rs-connect-transfer-link:hover {
+  color: var(--rs-foreground);
+}
+
+.rs-connect-empty {
+  width: 100%;
+  max-width: 280px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.rs-connect-empty-graphic {
+  position: relative;
+  width: 128px;
+  height: 128px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+.rs-connect-empty-orbit {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid var(--rs-border);
+}
+
+.rs-connect-empty-orbit--outer {
+  inset: 0;
+  opacity: 0.5;
+  animation: rs-orbit-spin 14s linear infinite;
+}
+
+.rs-connect-empty-orbit--inner {
+  inset: 14px;
+  opacity: 0.35;
+  border-style: dashed;
+  animation: rs-orbit-spin 10s linear infinite reverse;
+}
+
+.rs-connect-empty-core {
+  width: 68px;
+  height: 68px;
+  border-radius: 50%;
+  border: 1px solid var(--rs-border-surface);
+  background:
+    radial-gradient(circle at 30% 30%, var(--rs-primary-tint), transparent 70%),
+    var(--rs-background-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-primary);
+}
+
+.rs-connect-empty-core svg {
+  width: 30px;
+  height: 30px;
+}
+
+.rs-connect-empty-dot {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--rs-primary);
+  box-shadow: 0 0 0 4px var(--rs-primary-tint);
+}
+
+.rs-connect-empty-dot--left {
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.rs-connect-empty-dot--right {
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.rs-connect-empty-title {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--rs-foreground);
+}
+
+.rs-connect-empty-subtitle {
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--rs-muted);
+}
+
+@keyframes rs-orbit-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* =============================================================================
+   Connect Step – Option Selection
+   ============================================================================= */
+
+.rs-connect-options {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 16px 0;
+}
+
+.rs-connect-options-title {
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--rs-foreground);
+}
+
+.rs-connect-options-subtitle {
+  font-size: 13px;
+  color: var(--rs-muted);
+  margin-top: 4px;
+}
+
+.rs-connect-options-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 20px;
+}
+
+.rs-connect-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 14px 12px;
+  border-radius: var(--rs-radius-md);
+  border: 1px solid var(--rs-border-surface);
+  background: var(--rs-background);
+  color: var(--rs-foreground);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    border-color 0.15s,
+    background-color 0.15s;
+  font-family: inherit;
+}
+
+.rs-connect-option:hover {
+  background: var(--rs-surface);
+}
+
+.rs-connect-option--selected {
+  border-color: var(--rs-primary);
+  background: var(--rs-primary-tint);
+}
+
+.rs-connect-option-radio {
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  border-radius: 50%;
+  border: 2px solid var(--rs-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s;
+}
+
+.rs-connect-option--selected .rs-connect-option-radio {
+  border-color: var(--rs-primary);
+}
+
+.rs-connect-option-radio-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--rs-primary);
+}
+
+.rs-connect-option-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.rs-connect-option-label {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.rs-connect-option-detail {
+  font-size: 12px;
+  color: var(--rs-muted);
+  margin-top: 2px;
+}
+
+.rs-connect-option-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--rs-muted-foreground);
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+   Redesigned Header (Two-Line Layout)
+   ============================================================================= */
+
+.rs-modal-header--redesigned {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+  /* Padding/gap now live on the parent .rs-modal (matches Figma 1:1). */
+  padding: 0;
+  background-color: transparent;
+  border-bottom: none;
+}
+
+.rs-modal-header-nav-left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  min-width: 24px;
+  min-height: 24px;
+}
+
+.rs-modal-header-nav-center {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+
+.rs-modal-header-nav-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  gap: 12px;
+}
+
+.rs-modal-header-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--rs-foreground);
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.rs-modal-header-back:hover:not(:disabled) {
+  opacity: 0.65;
+}
+
+.rs-modal-header-back svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* =============================================================================
+   Amount Step Redesign
+   ============================================================================= */
+
+/* Amount screen — matches Figma "Wallet deposit" (Enter amount) frame.
+   Composed of: big $amount input + balance/min row, quick-select buttons,
+   transfer detail rows, Continue button. */
+
+.rs-amount-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.rs-amount-display {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rs-amount-input-row {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  width: 100%;
+  font-size: 64px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--rs-foreground);
+  font-feature-settings: "tnum";
+}
+
+.rs-amount-prefix {
+  flex: none;
+  user-select: none;
+}
+
+/* The number wrapper layers the real <input> transparently over a visual
+   glyph layer so the caret/editing stays native while the visible digits
+   are the ones we animate. Sized by the visual layer; the input fills it. */
+.rs-amount-number-wrap {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.rs-amount-number-wrap > input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  font: inherit;
+  color: transparent;
+  font-feature-settings: "tnum";
+  padding: 0;
+  caret-color: var(--rs-foreground);
+}
+
+.rs-amount-number-wrap > input::placeholder {
+  color: transparent;
+}
+
+.rs-amount-number-wrap > input::-webkit-outer-spin-button,
+.rs-amount-number-wrap > input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.rs-amount-visual {
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  font-feature-settings: "tnum";
+}
+
+.rs-amount-char-slot {
+  display: inline-block;
+  overflow: hidden;
+  height: 1em;
+  line-height: 1;
+}
+
+.rs-amount-char-inner {
+  display: block;
+}
+
+.rs-amount-visual--placeholder {
+  color: var(--rs-muted);
+}
+
+.rs-amount-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+}
+
+.rs-amount-meta-balance,
+.rs-amount-meta-minimum {
+  font-feature-settings: "tnum";
+}
+
+.rs-amount-presets {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+}
+
+.rs-amount-preset-btn {
+  flex: 1 0 0;
+  min-width: 0;
+  padding: 12px 16px;
+  background: var(--rs-button-ghost-bg);
+  border: none;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-button-ghost-text);
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.rs-amount-preset-btn:hover:not(:disabled) {
+  background: var(--rs-button-ghost-bg-hover);
+}
+
+.rs-amount-preset-btn:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+}
+
+.rs-amount-preset-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.rs-amount-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rs-amount-detail-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: normal;
+}
+
+/* Review-deposit detail rows (ConfirmStep) — Figma uses 14px Medium with
+   8px stack gap, vs the wallet-deposit-amount rows which are 12px / 4px. */
+.rs-review-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.rs-review-detail-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: normal;
+}
+
+.rs-review-detail-value {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--rs-muted);
+  font-feature-settings: "tnum";
+}
+
+.rs-review-detail-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--rs-background);
+}
+
+.rs-review-detail-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.rs-review-detail-info {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-icon-secondary);
+  cursor: help;
+}
+
+.rs-review-detail-info svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-review-detail-link {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-muted);
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.rs-review-detail-link:hover {
+  opacity: 0.7;
+}
+
+.rs-review-detail-link svg {
+  width: 14px;
+  height: 14px;
+}
+
+.rs-review-detail-value--strike {
+  text-decoration: line-through;
+}
+
+.rs-amount-detail-value {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--rs-muted);
+  font-feature-settings: "tnum";
+}
+
+.rs-amount-detail-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--rs-background);
+}
+
+.rs-amount-detail-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.rs-amount-detail-info {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-muted);
+  cursor: help;
+}
+
+.rs-amount-detail-info svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-amount-detail-link {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-muted);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.rs-amount-detail-link:hover {
+  color: var(--rs-foreground);
+}
+
+.rs-amount-detail-link svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Side-by-side button row used by success / failure footers
+   ("New deposit" + "Done", "Cancel" + "Try again"). */
+.rs-screen-button-row {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+
+.rs-screen-button-row > * {
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+.rs-amount-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: var(--rs-error-tint);
+  border-radius: var(--rs-radius-sm);
+  font-size: 13px;
+  color: var(--rs-error);
+}
+
+.rs-amount-error--warning {
+  background: var(--rs-warning-tint);
+  color: var(--rs-warning);
+  border: 1px solid var(--rs-warning-border);
+}
+
+/* Generic inline error / warning notice (Callout). Two-line truncation keeps
+   long messages from blowing out the modal height. */
+.rs-callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid transparent;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.rs-callout-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+}
+
+.rs-callout-icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.rs-callout-text {
+  min-width: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+
+.rs-callout--error {
+  background: var(--rs-callout-error-bg);
+  border-color: var(--rs-callout-error-border);
+  color: var(--rs-callout-error-text);
+}
+
+.rs-callout--warning {
+  background: var(--rs-callout-warning-bg);
+  border-color: var(--rs-callout-warning-border);
+  color: var(--rs-callout-warning-text);
+}
+
+/* =============================================================================
+   Confirm Step Redesign (Polymarket Style)
+   ============================================================================= */
+
+.rs-confirm-section {
+  margin-bottom: 12px;
+}
+
+.rs-confirm-section-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  margin-bottom: 8px;
+}
+
+.rs-confirm-details {
+  background: var(--rs-surface);
+  border-radius: var(--rs-radius-md);
+  overflow: hidden;
+}
+
+.rs-confirm-details summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  cursor: pointer;
+  list-style: none;
+}
+
+.rs-confirm-details summary::-webkit-details-marker {
+  display: none;
+}
+
+.rs-confirm-details summary::before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 5px solid var(--rs-muted);
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  transition: transform 0.2s;
+}
+
+.rs-confirm-details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.rs-confirm-details-content {
+  padding: 0 12px 12px;
+}
+
+.rs-confirm-terms {
+  font-size: 12px;
+  color: var(--rs-muted-foreground);
+  text-align: center;
+  margin-top: 16px;
+  line-height: 1.5;
+}
+
+.rs-confirm-terms a {
+  color: var(--rs-primary);
+  text-decoration: none;
+}
+
+.rs-confirm-terms a:hover {
+  text-decoration: underline;
+}
+
+/* =============================================================================
+   Processing Step Success State Redesign
+   ============================================================================= */
+
+.rs-success-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0 8px;
+  text-align: center;
+}
+
+.rs-success-checkmark {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--rs-success-tint);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+  animation: rs-scaleIn 0.4s ease-out;
+}
+
+.rs-success-checkmark svg {
+  width: 24px;
+  height: 24px;
+  color: var(--rs-success);
+}
+
+.rs-success-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--rs-foreground);
+  margin-bottom: 2px;
+}
+
+.rs-success-subtitle {
+  font-size: 13px;
+  color: var(--rs-muted);
+}
+
+/* =============================================================================
+   Withdraw Form Step
+   ============================================================================= */
+
+.rs-withdraw-loading {
+  min-height: 240px;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  text-align: center;
+  row-gap: 8px;
+}
+
+.rs-withdraw-loading-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--rs-foreground);
+}
+
+.rs-withdraw-loading-subtitle {
+  font-size: 13px;
+  color: var(--rs-muted);
+}
+
+.rs-withdraw-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rs-withdraw-label {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-input-label);
+}
+
+.rs-withdraw-label--sm {
+  font-size: 12px;
+}
+
+.rs-withdraw-input-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background: var(--rs-surface-subtle);
+  border-radius: 8px;
+  border: 1px solid var(--rs-surface-subtle);
+}
+
+.rs-withdraw-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--rs-foreground);
+  outline: none;
+  min-width: 0;
+  font-family: inherit;
+}
+
+.rs-withdraw-input::placeholder {
+  color: var(--rs-muted-foreground);
+}
+
+.rs-withdraw-input--address {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.rs-withdraw-input--amount {
+  font-size: 14px;
+  font-weight: 400;
+  font-feature-settings: "tnum";
+}
+
+.rs-withdraw-input--amount::-webkit-outer-spin-button,
+.rs-withdraw-input--amount::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.rs-withdraw-input--amount[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.rs-withdraw-use-connected {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--rs-background);
+  border: 1px solid var(--rs-border-surface);
+  border-radius: var(--rs-radius-sm);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s,
+    color 0.15s;
+}
+
+.rs-withdraw-use-connected:hover {
+  background: var(--rs-surface);
+  border-color: var(--rs-border);
+}
+
+/* Active state: address matches the connected wallet. Collapses to a small
+   circular badge (icon-only), matching the Figma. */
+.rs-withdraw-use-connected--active {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: 999px;
+  background: var(--rs-surface);
+  border-color: var(--rs-surface);
+  color: var(--rs-foreground);
+  flex-shrink: 0;
+  justify-content: center;
+}
+
+.rs-withdraw-use-connected--active:hover {
+  background: var(--rs-surface);
+  border-color: var(--rs-surface);
+}
+
+.rs-withdraw-use-connected-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.rs-withdraw-use-connected--active .rs-withdraw-use-connected-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+}
+
+.rs-withdraw-amount-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.rs-withdraw-token-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--rs-foreground);
+}
+
+.rs-withdraw-max-btn {
+  padding: 12px 16px;
+  background: transparent;
+  border: 1.191px solid var(--rs-foreground);
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-foreground);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+}
+
+.rs-withdraw-max-btn:hover:not(:disabled) {
+  background: var(--rs-surface);
+}
+
+.rs-withdraw-max-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.rs-withdraw-amount-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  padding: 0;
+}
+
+.rs-withdraw-usd {
+  color: var(--rs-muted);
+  font-feature-settings: "tnum";
+}
+
+.rs-withdraw-balance {
+  color: var(--rs-muted);
+  font-feature-settings: "tnum";
+}
+
+/* Receive row - inline selects side by side */
+.rs-withdraw-receive-row {
+  display: flex;
+  gap: 16px;
+}
+
+.rs-withdraw-receive-col {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rs-withdraw-dropdown {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  background: var(--rs-surface-subtle);
+  border-radius: 8px;
+  border: 1px solid var(--rs-surface-subtle);
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    background-color 0.15s;
+  width: 100%;
+  font-size: 14px;
+  line-height: normal;
+}
+
+.rs-withdraw-dropdown:hover {
+  background: var(--rs-surface);
+  border-color: var(--rs-surface);
+}
+
+.rs-withdraw-dropdown-value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+  min-width: 0;
+}
+
+.rs-withdraw-dropdown-value > span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rs-withdraw-dropdown-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.rs-withdraw-dropdown-arrow {
+  width: 24px;
+  height: 24px;
+  color: #9f9fa9;
+  transition: transform 0.15s;
+}
+
+.rs-withdraw-dropdown-container {
+  position: relative;
+}
+
+.rs-withdraw-dropdown-menu {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 20;
+  background: var(--rs-background);
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-md);
+  box-shadow: var(--rs-shadow-dropdown);
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 200px;
+  overflow-y: auto;
+  animation: rs-dropdown-in 0.12s ease-out;
+}
+
+@keyframes rs-dropdown-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.rs-withdraw-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: calc(var(--rs-radius-md) - 2px);
+  border: none;
+  background: transparent;
+  color: var(--rs-foreground);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.1s;
+}
+
+.rs-withdraw-dropdown-item:hover {
+  background: var(--rs-surface);
+}
+
+/* Receive summary */
+.rs-withdraw-receive-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: var(--rs-surface);
+  border-radius: var(--rs-radius-sm);
+}
+
+.rs-withdraw-receive-label {
+  font-size: 12px;
+  color: var(--rs-muted);
+}
+
+.rs-withdraw-receive-value {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  text-align: right;
+}
+
+.rs-withdraw-receive-amount {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--rs-foreground);
+  font-feature-settings: "tnum";
+}
+
+.rs-withdraw-receive-usd {
+  font-size: 12px;
+  color: var(--rs-muted-foreground);
+}
+
+.rs-withdraw-breakdown {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 2px;
+}
+
+.rs-withdraw-breakdown-label {
+  font-size: 12px;
+  color: var(--rs-muted-foreground);
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.rs-withdraw-breakdown-value {
+  font-size: 12px;
+  color: var(--rs-muted-foreground);
+  font-feature-settings: "tnum";
+}
+
+.rs-withdraw-breakdown-arrow {
+  margin-left: 2px;
+  font-size: 12px;
+}
+
+.rs-withdraw-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: var(--rs-error-tint);
+  border-radius: var(--rs-radius-md);
+  font-size: 13px;
+  color: var(--rs-error);
+}
+
+.rs-withdraw-error svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.rs-space-y-4 > * + * {
+  margin-top: 16px;
+}
+
+/* =============================================================================
+   Deposit Address Step
+   ============================================================================= */
+
+/* Transfer crypto screen — matches Figma 1855:119996. Layout:
+   chain/token select row → QR well (280px QR + truncated mono address) →
+   text-only "Copy address" button → "Price impact" accordion. */
+
+.rs-deposit-address {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 16px;
+  width: 100%;
+}
+
+.rs-deposit-address-selectors {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  width: 100%;
+}
+
+.rs-deposit-address-dropdown {
+  position: relative;
+  flex: 1 0 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rs-deposit-address-dropdown-label {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-input-label);
+  margin: 0;
+}
+
+.rs-deposit-address-dropdown-label--with-min {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.rs-deposit-address-min {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--rs-input-label);
+}
+
+.rs-deposit-address-min-icon {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  color: var(--rs-icon-secondary);
+}
+
+/* Price impact accordion — sits at the bottom of the transfer-crypto
+   screen. Header is a thin row with the value + info tooltip + chevron. */
+.rs-price-impact {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.rs-price-impact-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  line-height: normal;
+  color: var(--rs-muted);
+  text-align: left;
+}
+
+.rs-price-impact-header-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.rs-price-impact-row-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--rs-icon-secondary);
+  flex-shrink: 0;
+}
+
+.rs-price-impact-row-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-price-impact-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+}
+
+.rs-price-impact-label strong {
+  color: var(--rs-muted);
+  font-weight: 500;
+}
+
+.rs-price-impact-info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-muted);
+}
+
+.rs-price-impact-info .rs-tooltip-trigger svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.rs-price-impact-chevron {
+  width: 16px;
+  height: 16px;
+  color: var(--rs-muted);
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.rs-price-impact--open .rs-price-impact-chevron {
+  transform: rotate(180deg);
+}
+
+.rs-price-impact-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.25s ease;
+}
+
+.rs-price-impact--open .rs-price-impact-panel {
+  grid-template-rows: 1fr;
+}
+
+.rs-price-impact-panel-inner {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.rs-price-impact-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 8px;
+  font-size: 12px;
+  color: var(--rs-muted);
+}
+
+/* =============================================================================
+   Tooltip
+   ============================================================================= */
+
+.rs-tooltip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rs-tooltip-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: inherit;
+  outline: none;
+  border-radius: 50%;
+}
+
+.rs-tooltip-trigger:focus-visible {
+  box-shadow: 0 0 0 2px var(--rs-primary-tint);
+}
+
+.rs-tooltip-bubble {
+  position: fixed;
+  z-index: 2147483000;
+  transform: translate(-50%, calc(-100% - 8px));
+  min-width: 120px;
+  max-width: 220px;
+  padding: 6px 8px;
+  background: #202020;
+  color: #fcfcfc;
+  border-radius: 6px;
+  font-size: 10.5px;
+  line-height: 1.35;
+  font-weight: 500;
+  text-align: center;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+    sans-serif;
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.18),
+    0 1px 3px rgba(0, 0, 0, 0.12);
+  pointer-events: none;
+  white-space: normal;
+  animation: rs-tooltip-in 0.12s ease-out;
+}
+
+.rs-tooltip-bubble::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: #202020;
+}
+
+@keyframes rs-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, calc(-100% - 6px));
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, calc(-100% - 8px));
+  }
+}
+
+.rs-deposit-address-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  /* 11px vertical (not 12) so the 1px border lands the input at Figma's
+     48px total height — Figma draws the stroke inside the box, CSS adds it
+     outside. Horizontal stays 12px to match the design. */
+  padding: 11px 12px;
+  background: var(--rs-surface-subtle);
+  border-radius: 8px;
+  border: 1px solid var(--rs-surface-subtle);
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    background-color 0.15s;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-foreground);
+  font-family: inherit;
+}
+
+.rs-deposit-address-dropdown-trigger:hover {
+  background: var(--rs-surface);
+  border-color: var(--rs-surface);
+}
+
+.rs-deposit-address-dropdown-trigger--open {
+  border-color: #9f9fa9;
+}
+
+.rs-deposit-address-dropdown-trigger--open:hover {
+  border-color: #9f9fa9;
+}
+
+.rs-deposit-address-dropdown-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.rs-deposit-address-dropdown-chevron {
+  width: 24px;
+  height: 24px;
+  color: #9f9fa9;
+  margin-left: auto;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.rs-deposit-address-dropdown-trigger--open
+  .rs-deposit-address-dropdown-chevron {
+  transform: rotate(180deg);
+}
+
+.rs-deposit-address-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 20;
+  background: var(--rs-surface-subtle);
+  border: 1px solid var(--rs-surface-subtle);
+  border-radius: var(--rs-radius-sm);
+  box-shadow: var(--rs-shadow-dropdown);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  max-height: 240px;
+  overflow-y: auto;
+  overscroll-behavior: none;
+  animation: rs-dropdown-in 0.12s ease-out;
+}
+
+.rs-deposit-address-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 8px 4px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: var(--rs-foreground);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.1s;
+  font-family: inherit;
+}
+
+.rs-deposit-address-dropdown-item:hover {
+  background: var(--rs-surface);
+}
+
+.rs-deposit-address-dropdown-item--active {
+  color: var(--rs-foreground);
+}
+
+/* Well-card containing the 280px QR + truncated mono address. */
+.rs-deposit-address-well {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background: var(--rs-surface-subtle);
+  border-radius: 8px;
+}
+
+.rs-deposit-address-qr {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.rs-deposit-address-qr canvas,
+.rs-deposit-address-qr svg {
+  display: block;
+  width: 190px;
+  height: 190px;
+}
+
+.rs-deposit-address-value {
+  width: 100%;
+  padding: 0 16px 12px;
+  font-family:
+    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    "Liberation Mono", monospace;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-muted);
+  text-align: center;
+  word-break: break-all;
+}
+
+/* Visually hidden but exposed to assistive tech — used by the skeleton's
+   "Preparing…" status, whose visual placeholders are all aria-hidden. */
+.rs-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Loading placeholders for DepositAddressSkeleton — grey blocks that pulse
+   while the smart account / deposit address are being prepared. Uses
+   --color-gray4 (zinc-200 light / zinc-800 dark) so it reads on the well in
+   both themes. */
+.rs-skeleton {
+  background: var(--color-gray4);
+  border-radius: 8px;
+  animation: rs-skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+.rs-skeleton-qr {
+  width: 190px;
+  height: 190px;
+}
+
+.rs-skeleton-address {
+  height: 12px;
+  margin: 0 16px 12px;
+  border-radius: 8px;
+}
+
+/* Inline placeholder sized to the fee value (e.g. "$0.04") while the
+   pre-deposit quote resolves. Stays put if the quote fails. */
+.rs-skeleton-fee {
+  display: inline-block;
+  width: 36px;
+  height: 13px;
+  border-radius: 4px;
+  vertical-align: middle;
+}
+
+@keyframes rs-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.rs-deposit-address-copy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--rs-foreground);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.rs-deposit-address-copy:hover {
+  background: var(--rs-surface-subtle);
+}
+
+.rs-deposit-address-copy svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-deposit-address-balance {
+  font-size: 12px;
+  color: var(--rs-muted-foreground);
+  text-align: center;
+}
+
+.rs-deposit-address-error {
+  font-size: 12px;
+  color: var(--rs-error);
+  text-align: center;
+}
+
+.rs-deposit-address-rails {
+  display: flex;
+  width: 100%;
+  gap: 0;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius);
+  overflow: hidden;
+}
+
+.rs-deposit-address-rail {
+  flex: 1;
+  padding: 8px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  background: transparent;
+  color: var(--rs-muted-foreground);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.rs-deposit-address-rail:not(:first-child) {
+  border-left: 1px solid var(--rs-border);
+}
+
+.rs-deposit-address-rail:hover {
+  background: var(--rs-muted);
+}
+
+.rs-deposit-address-rail--active {
+  background: var(--rs-accent);
+  color: var(--rs-accent-foreground, #fff);
+}
+
+.rs-deposit-address-rail--active:hover {
+  background: var(--rs-accent);
+}
+
+.rs-deposit-address-tokens-label {
+  font-size: 11px;
+  color: var(--rs-muted-foreground);
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.rs-deposit-address-tokens-row {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.rs-deposit-address-token-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius);
+  background: var(--rs-card);
+  color: var(--rs-foreground);
+}
+
+/* =============================================================================
+   Deposit Notifications (QR flow toast cards)
+   ============================================================================= */
+
+.rs-step--with-notifications {
+  position: relative;
+}
+
+/* Outer card that groups one-or-more deposit entries. Positioned over
+   the bottom of the deposit-address screen. Figma: card/background +
+   16px padding/gap + drop-shadow. */
+.rs-deposit-notifications {
+  position: absolute;
+  bottom: 12px;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  background: var(--rs-surface-subtle);
+  border-radius: 16px;
+  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.14));
+  max-height: calc(100% - 24px);
+  overflow-y: auto;
+  animation: rs-notification-slide-up 0.3s ease-out;
+}
+
+.rs-deposit-notification {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+@keyframes rs-notification-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.rs-deposit-notification-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0;
+}
+
+.rs-deposit-notification-icon {
+  flex-shrink: 0;
+  width: 42px;
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rs-deposit-notification-badge {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rs-deposit-notification-badge--complete svg,
+.rs-deposit-notification-badge--failed svg {
+  width: 20px;
+  height: 20px;
+}
+
+.rs-deposit-notification-badge--complete {
+  background-color: #00bc7d;
+  color: #ffffff;
+}
+
+.rs-deposit-notification-badge--failed {
+  background-color: #fb2c36;
+  color: #ffffff;
+}
+
+.rs-deposit-notification-badge--processing {
+  background-color: transparent;
+  color: var(--rs-icon-secondary);
+}
+
+.rs-deposit-notification-spinner {
+  width: 42px;
+  height: 42px;
+  animation: rs-spin 1s linear infinite;
+}
+
+/* Spinner ring/arc colors flip with the theme. Light: a faint zinc-200 ring
+   with a zinc-600 arc on the near-white card. Dark: the Figma values — a
+   zinc-300 ring with a zinc-600 arc on the #18181b card. */
+.rs-deposit-notification-spinner-track {
+  stroke: #e4e4e7;
+}
+
+.rs-deposit-notification-spinner-head {
+  stroke: #52525c;
+}
+
+.rs-modal[data-theme="dark"] .rs-deposit-notification-spinner-track {
+  stroke: #d4d4d8;
+}
+
+.rs-modal[data-theme="dark"] .rs-deposit-notification-spinner-head {
+  stroke: #52525c;
+}
+
+.rs-deposit-notification-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-self: stretch;
+}
+
+.rs-deposit-notification-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+}
+
+.rs-deposit-notification-title {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: normal;
+  color: var(--rs-foreground);
+}
+
+.rs-deposit-notification-subtitle {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-muted);
+  margin-top: 0;
+  word-break: break-word;
+}
+
+.rs-deposit-notification-close {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--rs-icon-secondary);
+  cursor: pointer;
+  padding: 0;
+  transition: opacity 0.15s;
+}
+
+.rs-deposit-notification-close:hover {
+  opacity: 0.7;
+}
+
+.rs-deposit-notification-close svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-deposit-notification-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 33px;
+  padding: 8px 0 8px 54px;
+  border: none;
+  background: transparent;
+  color: var(--rs-muted);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  font-family: inherit;
+  cursor: pointer;
+  margin: 0;
+  text-align: left;
+}
+
+.rs-deposit-notification-toggle-chevron {
+  width: 16px;
+  height: 16px;
+  color: var(--rs-icon-secondary);
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.rs-deposit-notification--expanded .rs-deposit-notification-toggle-chevron {
+  transform: rotate(180deg);
+}
+
+.rs-deposit-notification-details {
+  margin: 4px 0 0 54px;
+  padding: 8px 10px;
+  background: var(--rs-background);
+  border-radius: var(--rs-radius-sm);
+}
+
+.rs-deposit-notification-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 0;
+}
+
+.rs-deposit-notification-row + .rs-deposit-notification-row {
+  border-top: 1px solid var(--rs-border-surface);
+}
+
+.rs-deposit-notification-label {
+  font-size: 12px;
+  color: var(--rs-muted);
+}
+
+.rs-deposit-notification-value {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+  font-family: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+    Monaco, Consolas, monospace;
+}
+
+.rs-deposit-notification-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--rs-foreground);
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.rs-deposit-notification-link:hover {
+  opacity: 0.7;
+}
+
+.rs-deposit-notification-link-icon {
+  width: 10px;
+  height: 10px;
+}
+
+/* =============================================================================
+   Processing Badges (centered icon badges)
+   ============================================================================= */
+
+.rs-step-header--centered {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 16px 16px 0;
+}
+
+.rs-step-header--centered .rs-step-title {
+  margin-top: 0;
+}
+
+.rs-step-header--centered .rs-step-description {
+  max-width: 280px;
+}
+
+.rs-success-badge {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background-color: var(--rs-success);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  animation: rs-success-glow 2s ease-in-out infinite;
+}
+
+.rs-success-badge svg {
+  width: 22px;
+  height: 22px;
+}
+
+@keyframes rs-success-glow {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(48, 164, 108, 0.3); }
+  50% { box-shadow: 0 0 0 12px rgba(48, 164, 108, 0); }
+}
+
+.rs-modal[data-theme="dark"] .rs-success-badge {
+  animation-name: rs-success-glow-dark;
+}
+
+@keyframes rs-success-glow-dark {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(60, 177, 121, 0.3); }
+  50% { box-shadow: 0 0 0 12px rgba(60, 177, 121, 0); }
+}
+
+.rs-processing-badge {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background-color: var(--rs-primary-tint);
+  color: var(--rs-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+}
+
+.rs-processing-badge .rs-spinner {
+  width: 28px;
+  height: 28px;
+}
+
+.rs-failed-badge {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background-color: var(--rs-error-tint);
+  color: var(--rs-error);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+}
+
+.rs-failed-badge svg {
+  width: 28px;
+  height: 28px;
+}
+
+/* =============================================================================
+   Card Value Status Colors + External Link
+   ============================================================================= */
+
+.rs-card-value--success {
+  color: var(--rs-success);
+}
+
+.rs-card-value--error {
+  color: var(--rs-error);
+}
+
+.rs-card-external-link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--rs-muted-foreground);
+  transition: color 0.15s;
+  text-decoration: none;
+}
+
+.rs-card-external-link:hover {
+  color: var(--rs-foreground);
+}
+
+.rs-card-external-link svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* =============================================================================
+   Details Toggle
+   ============================================================================= */
+
+.rs-details-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  padding: 8px 0;
+  border: none;
+  background: transparent;
+  color: var(--rs-muted-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+  transition: color 0.15s;
+}
+
+.rs-details-toggle:hover {
+  color: var(--rs-foreground);
+}
+
+.rs-details-toggle svg {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.2s;
+}
+
+.rs-details-toggle--open svg {
+  transform: rotate(180deg);
+}
+
+/* =============================================================================
+   History Button (Header)
+   ============================================================================= */
+
+.rs-modal-header-history {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--rs-foreground);
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.rs-modal-header-history:hover:not(:disabled) {
+  opacity: 0.65;
+}
+
+.rs-modal-header-history:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.rs-modal-header-history svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* =============================================================================
+   Deposit History Panel — matches Figma 1878:142660 / 1878:142727.
+   The panel overlays the deposit flow inside .rs-modal-content; its own
+   layout uses the .rs-screen pattern (padded container + scrollable body
+   + powered-by anchored to the bottom).
+   ============================================================================= */
+
+.rs-history-panel {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 16px;
+  background: var(--rs-background);
+  border-radius: inherit;
+  animation: rs-history-slide-in 0.2s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+@keyframes rs-history-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* The screen body inside the history panel scrolls when the list grows
+   beyond the capped modal height. The BodyHeader stays pinned at the
+   top of the screen body; only the list itself moves under scroll. */
+.rs-history-screen {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 0;
+  gap: 16px;
+  min-height: 0;
+}
+
+.rs-history-screen-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
+}
+
+.rs-history-screen > .rs-powered-by {
+  padding: 0;
+  margin-top: auto;
+}
+
+/* Empty / loading / error state with the big faint history glyph behind
+   centered title + hint copy. */
+.rs-history-empty {
+  position: relative;
+  flex: 1;
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.rs-history-empty-glyph {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 256px;
+  height: 256px;
+  transform: translate(-50%, -50%);
+  color: var(--rs-surface);
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rs-history-empty-glyph svg {
+  width: 100%;
+  height: 100%;
+}
+
+.rs-history-empty-text {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+
+.rs-history-empty-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+  line-height: normal;
+}
+
+.rs-history-empty-hint {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: normal;
+}
+
+/* List of transaction cards. */
+.rs-history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  padding-right: 2px;
+}
+
+/* Card */
+.rs-history-card {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 12px 8px;
+  background: var(--rs-surface-subtle);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  color: var(--rs-foreground);
+  transition: background-color 0.15s;
+}
+
+.rs-history-card:hover:not(:disabled) {
+  background: var(--rs-surface);
+}
+
+.rs-history-card:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+}
+
+.rs-history-card-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.rs-history-card-icons {
+  display: flex;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+
+.rs-history-card-token {
+  width: 28px;
+  height: 28px;
+  margin-right: -10px;
+  border-radius: 50%;
+  background: var(--rs-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--rs-muted);
+}
+
+.rs-history-card-token img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.rs-history-card-chain {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--rs-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.rs-history-card-chain img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.rs-history-card-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rs-history-card-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--rs-foreground);
+  line-height: normal;
+  white-space: nowrap;
+}
+
+.rs-history-card-date {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: normal;
+  white-space: nowrap;
+}
+
+.rs-history-card-side {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.rs-history-card-amount {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+  line-height: normal;
+  font-feature-settings: "tnum";
+  white-space: nowrap;
+}
+
+/* Collapsing wrapper that animates the detail block between closed/open. */
+.rs-history-card-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.25s ease;
+}
+
+.rs-history-card--expanded .rs-history-card-panel {
+  grid-template-rows: 1fr;
+}
+
+.rs-history-card-panel-inner {
+  overflow: hidden;
+  min-height: 0;
+  /* Keep the collapsed panel (and its tx link) out of the tab order.
+     visibility stays "visible" through the collapse so the content is
+     present during the height animation, then flips hidden at the end. */
+  visibility: hidden;
+  transition: visibility 0.25s;
+}
+
+.rs-history-card--expanded .rs-history-card-panel-inner {
+  visibility: visible;
+}
+
+/* Expanded detail block under the row. */
+.rs-history-card-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  padding-top: 16px;
+}
+
+.rs-history-card-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  color: #0084d1;
+  text-decoration: none;
+  font-family: inherit;
+}
+
+.rs-history-card-link svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-history-card-link:hover {
+  text-decoration: underline;
+}
+
+/* Status badges */
+.rs-history-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  white-space: nowrap;
+}
+
+.rs-history-badge--completed {
+  background: #a4f4cf;
+  color: #004f3b;
+}
+
+.rs-history-badge--processing {
+  background: #bee3ff;
+  color: #00407f;
+}
+
+.rs-history-badge--pending {
+  background: #fde68a;
+  color: #78350f;
+}
+
+.rs-history-badge--failed {
+  background: #ffc9c9;
+  color: #82181a;
+}
+
+.rs-history-badge--spam {
+  background: var(--rs-surface);
+  color: var(--rs-muted);
+}
+
+/* Dark-mode badge overrides — Figma swaps to deeper saturated fills with
+   light text for contrast against the #18181b card surface. */
+.rs-modal[data-theme="dark"] .rs-history-badge--completed {
+  background: #006045;
+  color: #d0fae5;
+}
+
+.rs-modal[data-theme="dark"] .rs-history-badge--failed {
+  background: #9f0712;
+  color: #ffe2e2;
+}
+
+.rs-modal[data-theme="dark"] .rs-history-badge--processing {
+  background: #00407f;
+  color: #bee3ff;
+}
+
+.rs-modal[data-theme="dark"] .rs-history-badge--pending {
+  background: #78350f;
+  color: #fde68a;
+}
+
+/* Load more button at the end of the list. */
+.rs-history-load-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 16px;
+  border: 1px solid var(--rs-border-surface);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--rs-muted);
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
+}
+
+.rs-history-load-more:hover:not(:disabled) {
+  color: var(--rs-foreground);
+  background: var(--rs-surface);
+  border-color: var(--rs-border);
+}
+
+.rs-history-load-more:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+   Shell — matches Figma "modal" frame (padded container, no fixed title bar)
+   ============================================================================= */
+
+.rs-shell {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 16px;
+}
+
+.rs-shell-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+}
+
+.rs-shell-nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.rs-shell-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--rs-foreground);
+  cursor: pointer;
+  transition: opacity 0.15s;
+  font-family: inherit;
+}
+
+.rs-shell-icon-btn:hover:not(:disabled) {
+  opacity: 0.65;
+}
+
+.rs-shell-icon-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.rs-shell-icon-btn:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+}
+
+.rs-shell-icon-btn svg {
+  width: 24px;
+  height: 24px;
+}
+
+.rs-shell-body {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.rs-shell-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Body header — icon wrapper + title + subtitle */
+
+.rs-body-header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Figma gives subtitle headers a 12px icon→title gap (vs 8px for title-only
+   headers like the QR screen). */
+.rs-body-header:has(.rs-body-header-subtitle) {
+  gap: 12px;
+}
+
+.rs-body-header-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 8px;
+  background: var(--rs-icon-wrapper-bg);
+  border: 1px solid var(--rs-icon-wrapper-bg);
+  border-radius: 8px;
+  color: var(--rs-icon-wrapper-icon);
+  box-sizing: border-box;
+}
+
+.rs-body-header-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.rs-body-header-icon--success {
+  background: var(--rs-success);
+  border-color: var(--rs-success);
+  color: #ffffff;
+}
+
+.rs-body-header-icon--error {
+  background: var(--rs-error);
+  border-color: var(--rs-error);
+  color: #ffffff;
+}
+
+.rs-body-header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rs-body-header-title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--rs-foreground);
+  margin: 0;
+}
+
+.rs-body-header-subtitle {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-muted);
+  margin: 0;
+}
+
+/* Ticker — per-digit odometer-style animation for the live timer.
+   Each slot clips its content; the outgoing digit slides up and out while
+   the incoming digit slides up from below. Static chars (e.g. ":") never
+   change so they never animate. */
+
+.rs-ticker {
+  display: inline-flex;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.rs-ticker-slot {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  height: 1em;
+  line-height: 1;
+  vertical-align: baseline;
+}
+
+.rs-ticker-in,
+.rs-ticker-out {
+  display: inline-block;
+  line-height: 1;
+}
+
+.rs-ticker-out {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  animation: rs-ticker-out 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.rs-ticker-in {
+  animation: rs-ticker-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes rs-ticker-out {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-70%);
+    opacity: 0;
+  }
+}
+
+@keyframes rs-ticker-in {
+  from {
+    transform: translateY(70%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rs-ticker-in,
+  .rs-ticker-out {
+    animation: none;
+  }
+  .rs-ticker-out {
+    display: none;
+  }
+}
+
+/* List row — Figma "oauth button" pattern */
+
+.rs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rs-list-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px;
+  background: var(--rs-background-secondary);
+  border: 1px solid var(--rs-background-secondary);
+  border-radius: 8px;
+  color: var(--rs-foreground);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.rs-list-row:hover:not(:disabled) {
+  background: var(--rs-surface-hover);
+  border-color: var(--rs-surface-hover);
+}
+
+.rs-list-row:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.rs-list-row:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+}
+
+.rs-list-row-leading {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  /* Figma: oauth-button/default/icon — same value light/dark. */
+  color: #71717b;
+}
+
+.rs-list-row-leading svg {
+  width: 24px;
+  height: 24px;
+}
+
+.rs-list-row-leading--media {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--rs-surface);
+}
+
+.rs-list-row-leading--media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.rs-list-row-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.rs-list-row-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.rs-list-row-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rs-list-row-subtitle {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rs-list-row-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  padding: 2px 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  border-radius: 20px;
+}
+
+.rs-list-row-meta-icons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.rs-list-row-meta-icons > * {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.rs-list-row-meta-icons img,
+.rs-list-row-meta-icons svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.rs-list-row-chevron {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  /* Figma: oauth-button/default/icon — same #71717b in both themes. */
+  color: #71717b;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rs-list-row-chevron svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Powered-by footer in shell */
+
+.rs-shell-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--rs-muted);
+}
+
+/* When the shell is active the dialog content no longer needs a separate
+   border or background — the shell paints everything inside the same padded
+   container, matching Figma. */
+.rs-modal-content:has(.rs-shell) {
+  border: 1px solid var(--rs-border);
+  background-color: var(--rs-background);
+}
+
+/* =============================================================================
+   Fiat On-Ramp (Swapped iframe flow)
+   ============================================================================= */
+
+/* `.rs-fiat-onramp` is a marker class on the .rs-screen root so the
+   modal-content `:has()` rules below can size correctly. Layout (padding,
+   gap, flex direction) comes from .rs-screen itself, identical to
+   ConnectStep — keeps the top of the page visually unchanged across the
+   payment-method picker → Swapped iframe transition. */
+
+.rs-fiat-onramp-banner {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+  border-radius: var(--rs-radius-sm);
+  font-size: 12px;
+  line-height: 1.35;
+  border: 1px solid var(--rs-border);
+}
+
+.rs-fiat-onramp-banner--info {
+  background: var(--rs-background-secondary);
+  color: var(--rs-foreground);
+}
+
+.rs-fiat-onramp-banner--success {
+  background: rgba(34, 197, 94, 0.08);
+  border-color: rgba(34, 197, 94, 0.35);
+  color: var(--rs-foreground);
+}
+
+.rs-fiat-onramp-banner--warning {
+  background: rgba(234, 179, 8, 0.08);
+  border-color: rgba(234, 179, 8, 0.4);
+  color: var(--rs-foreground);
+}
+
+.rs-fiat-onramp-banner-title {
+  font-weight: 600;
+}
+
+.rs-fiat-onramp-banner-detail {
+  color: var(--rs-muted);
+}
+
+/* Iframe wrap sized to Swapped's documented dimensions — 400×482 for the
+   fiat on-ramp, 445×585 for Connect (overrides below). Centered horizontally
+   inside the modal so the step body can have header padding. */
+.rs-fiat-onramp-iframe-wrap {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  min-height: 482px;
+  margin: 0 auto;
+  border-radius: var(--rs-radius);
+  overflow: hidden;
+}
+
+.rs-fiat-onramp[data-variant="connect"] .rs-fiat-onramp-iframe-wrap {
+  max-width: 445px;
+  min-height: 585px;
+}
+
+.rs-fiat-onramp-iframe {
+  display: block;
+  width: 100%;
+  height: 482px;
+  min-height: 482px;
+  border: 0;
+  background: var(--rs-background);
+}
+
+.rs-fiat-onramp[data-variant="connect"] .rs-fiat-onramp-iframe {
+  height: 585px;
+  min-height: 585px;
+}
+
+.rs-fiat-onramp-loading,
+.rs-fiat-onramp-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: center;
+  background: var(--rs-background);
+  color: var(--rs-foreground);
+  padding: 16px;
+}
+
+.rs-fiat-onramp-retry {
+  padding: 6px 14px;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-background-secondary);
+  color: var(--rs-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.rs-fiat-onramp-retry:hover {
+  background: var(--rs-border);
+}
+
+/* =============================================================================
+   Exchange picker (Swapped Connect)
+   ============================================================================= */
+
+.rs-exchange-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.rs-exchange-card {
+  display: flex;
+  min-width: 0;
+  min-height: 104px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 12px 8px;
+  border: 1px solid var(--rs-background-secondary);
+  border-radius: 8px;
+  background: var(--rs-background-secondary);
+  color: var(--rs-foreground);
+  font-family: inherit;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+}
+
+.rs-exchange-card:hover:not(:disabled) {
+  background: var(--rs-surface-hover);
+  border-color: var(--rs-surface-hover);
+}
+
+.rs-exchange-card:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+}
+
+.rs-exchange-card-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: var(--rs-surface);
+  color: #71717b;
+  overflow: hidden;
+}
+
+.rs-exchange-card-logo img,
+.rs-exchange-card-logo svg {
+  width: 28px;
+  height: 28px;
+  display: block;
+  object-fit: contain;
+}
+
+.rs-exchange-card-name {
+  width: 100%;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--rs-foreground);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rs-exchange-select-state {
+  min-height: 184px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--rs-foreground);
+}
+
+.rs-exchange-select-state-title {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+/* =============================================================================
+   Modal sizing for the Swapped iframe step
+   =============================================================================
+   Modal stays at the default 400px width for the fiat variant (matches
+   Swapped's 400×482 iframe edge-to-edge). Connect needs 445px because its
+   iframe is 445×585. Height grows with the Rhinestone chrome (header
+   icon/title/subtitle + iframe + PoweredBy); cap to viewport so smaller
+   laptops get a scrollable modal-body instead of overflowing the screen. */
+
+/* Connect's iframe is 445×585 (vs fiat's 400×482). To preserve the same
+   12px horizontal padding as ConnectStep while still giving Swapped's
+   Connect iframe its documented width, widen the modal by 24px (12 each
+   side) → 469px. Applied from the moment the user enters exchange-connect
+   mode (`data-flow-mode` on rs-modal-body) — not just the iframe step —
+   so the modal width is stable across SetupStep → SwappedIframeStep.
+   Fiat keeps the default 400px modal; its iframe renders at 376px
+   content-width, matching the visual width of ConnectStep's list rows. */
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"]) {
+  max-width: 469px;
+}
+
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"]),
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"]) {
+  max-height: calc(100vh - 40px);
+}
+
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"]) .rs-modal-body,
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"]) .rs-modal-body {
+  /* `overflow-x: hidden` is explicit because a `visible` x-axis with an
+     `auto` y-axis gets promoted to `auto` on both axes, which paints a
+     phantom horizontal scrollbar even when content fits horizontally. */
+  overflow: hidden auto;
+}
+
+/* Pre-size the modal-content to the eventual iframe-mounted height for
+   the iframe-phase only:
+   - `[data-step-type="setup"]` — brief pre-flight before SwappedIframeStep mounts
+   - `:has(...) .rs-fiat-onramp` — SwappedIframeStep's iframe phase is in DOM
+   The tracker phase (.rs-swapped-tracker) is naturally shorter and is
+   excluded so the modal shrinks down to its content instead of leaving
+   a tall empty area below the tracker. Applied on modal-content (not
+   modal-body) so the transition on its min-height animates smoothly
+   when the iframe→tracker phase swap fires. */
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"][data-step-type="setup"]),
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"] .rs-fiat-onramp) {
+  min-height: 691px;
+}
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"][data-step-type="setup"]),
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"] .rs-fiat-onramp) {
+  min-height: 794px;
+}
+
+/* =============================================================================
+   Custom order tracker
+   =============================================================================
+   Shown after the user creates an order with Swapped — replaces the iframe
+   until the deposit-processor reports bridge-complete. */
+/* Layout lives in rs-screen now — tracker just contributes the entrance
+   animation and a marker class for any future tracker-only tweaks. The
+   icon + title come from the shared BodyHeader so the header position
+   matches ConnectStep and SwappedIframeStep exactly. */
+.rs-swapped-tracker {
+  animation: rs-swapped-tracker-enter 250ms ease-out;
+}
+
+@keyframes rs-swapped-tracker-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes rs-tracker-step-complete {
+  0% {
+    transform: scale(0.72);
+  }
+  60% {
+    transform: scale(1.08);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.rs-swapped-tracker-steps {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.rs-swapped-tracker-step {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 0;
+}
+
+/* Dotted vertical connector between adjacent step markers. */
+.rs-swapped-tracker-step + .rs-swapped-tracker-step::before {
+  content: "";
+  position: absolute;
+  top: -14px;
+  right: 11px;
+  width: 0;
+  height: 28px;
+  border-left: 1.5px dotted #d4d4d8;
+}
+
+.rs-swapped-tracker-step-label {
+  font-size: 15px;
+  color: var(--rs-foreground);
+  flex-grow: 1;
+}
+
+.rs-swapped-tracker-step-marker {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1.5px solid #d4d4d8;
+  color: transparent;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker {
+  border-color: #d4d4d8;
+  background: transparent;
+  /* Spinner SVG uses currentColor; base marker class sets color:transparent
+     for the (hidden) ring glyph — re-establish a visible color here so the
+     active-state spinner actually paints. */
+  color: #18181b;
+}
+
+.rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker .rs-spinner {
+  width: 14px;
+  height: 14px;
+}
+
+/* Satisfying scale-pop when a step ticks complete — the color transition
+   alone is too subtle to register as "that just happened". */
+.rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker {
+  animation: rs-tracker-step-complete 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  background: #18181b;
+  border-color: #18181b;
+  color: #fff;
+}
+
+.rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker svg {
+  width: 14px;
+  height: 14px;
+  stroke-width: 3;
+}
+
+/* Failed step marker — terminal processor failure or cancellation. Red in
+   both themes (the failure color reads on light and dark). */
+.rs-swapped-tracker-step--failed .rs-swapped-tracker-step-marker {
+  background: #fb2c36;
+  border-color: #fb2c36;
+  color: #fff;
+}
+
+.rs-swapped-tracker-step--failed .rs-swapped-tracker-step-marker svg {
+  width: 14px;
+  height: 14px;
+  stroke-width: 3;
+}
+
+/* Terminal message block shown below the steps on failure / cancellation. */
+.rs-swapped-tracker-terminal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+}
+
+.rs-swapped-tracker-terminal-message {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--rs-foreground-secondary, #71717a);
+}
+
+.rs-swapped-tracker-terminal--failed .rs-swapped-tracker-terminal-message {
+  color: #fb2c36;
+}
+
+.rs-swapped-tracker-retry {
+  padding: 8px 16px;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-background-secondary);
+  color: var(--rs-foreground);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.rs-swapped-tracker-retry:hover {
+  background: var(--rs-border);
+}
+
+.rs-modal[data-theme="dark"] .rs-swapped-tracker-step + .rs-swapped-tracker-step::before {
+  border-left-color: #3f3f46;
+}
+
+.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--pending .rs-swapped-tracker-step-marker,
+.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker {
+  border-color: #3f3f46;
+}
+
+.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker {
+  background: #fafafa;
+  border-color: #fafafa;
+  color: #18181b;
+}