/* 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;
  /* Segmented toggle (Crypto/Cash) — track + raised selected pill. */
  --rs-segmented-track: #e4e4e7;
  --rs-segmented-active-bg: #ffffff;
  --rs-segmented-active-fg: #18181b;
  --rs-segmented-idle-fg: #52525c;

  /* 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;
  /* Segmented toggle (Crypto/Cash) — dark track + raised selected pill. */
  --rs-segmented-track: #27272a;
  --rs-segmented-active-bg: #52525c;
  --rs-segmented-active-fg: #fafafa;
  --rs-segmented-idle-fg: #9f9fa9;
  --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%;
}

/* Expandable "Fees" row on the Swapped receipt. Summary matches a detail row;
   the breakdown reveals below. */
.rs-fees-accordion {
  display: flex;
  flex-direction: column;
}

.rs-fees-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: var(--rs-muted);
  cursor: pointer;
}

.rs-fees-accordion-summary:disabled {
  cursor: default;
}

.rs-fees-accordion-summary:focus-visible {
  outline: 2px solid var(--rs-border-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.rs-fees-accordion-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rs-muted);
  transition: transform 0.18s ease;
}

.rs-fees-accordion-chevron svg {
  width: 16px;
  height: 16px;
}

.rs-fees-accordion-chevron--open {
  transform: rotate(180deg);
}

.rs-fees-accordion-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.rs-fees-accordion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--rs-muted);
}

.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--square {
  border-radius: 2px;
}

.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;
}

/* DappImportAssetSelectSkeleton rows. `-fill` floods a shaped container
   (token icon / chain badge circles); `-text` mimics a one-line text block
   at the asset row's font sizes. */
.rs-skeleton-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.rs-skeleton-text {
  display: inline-block;
  height: 12px;
  border-radius: 6px;
}

.rs-skeleton-text--name {
  width: 96px;
  height: 14px;
}

.rs-skeleton-text--balance {
  width: 64px;
}

.rs-skeleton-text--usd {
  width: 48px;
}

.rs-asset-row--skeleton {
  cursor: default;
  pointer-events: none;
}

/* 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;
  min-width: 0;
}

/* Row that holds the title/subtitle block plus an optional right-aligned
   aside (the Crypto/Cash toggle on the method picker). */
.rs-body-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rs-body-header-aside {
  flex-shrink: 0;
}

.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;
}

/* Segmented toggle (Crypto / Cash) — Figma "toggle container". */
.rs-segmented {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  padding: var(--rs-segmented-inset);
  background: var(--rs-segmented-track);
  border-radius: var(--rs-radius-full);
  isolation: isolate;
}

.rs-segmented-thumb {
  position: absolute;
  z-index: 0;
  top: var(--rs-segmented-inset);
  bottom: var(--rs-segmented-inset);
  left: calc(var(--rs-segmented-inset) + var(--rs-segmented-thumb-offset));
  width: var(--rs-segmented-thumb-width);
  border-radius: var(--rs-radius-full);
  background: var(--rs-segmented-active-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: left 180ms ease;
  pointer-events: none;
}

.rs-segmented-option {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 12px;
  min-width: 70px;
  border-radius: var(--rs-radius-full);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--rs-segmented-idle-fg);
  cursor: pointer;
  transition:
    color 0.15s;
}

.rs-segmented-option:focus-visible {
  outline: 2px solid var(--rs-border-accent);
  outline-offset: 2px;
}

.rs-segmented-option--active {
  color: var(--rs-segmented-active-fg);
}

/* 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;
}

.rs-list-row-meta-icons > * {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  /* Ring in the row's surface color so overlapping marks read cleanly. */
  box-shadow: 0 0 0 1.5px var(--rs-background-secondary);
}

/* Overlap each subsequent mark for the stacked-cluster look. */
.rs-list-row-meta-icons > * + * {
  margin-left: -6px;
}

.rs-list-row-meta-icons img,
.rs-list-row-meta-icons svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rs-list-row-meta-icons--exchanges > * {
  border-radius: 4px;
}

/* Card-network chips: exported Figma tiles are all 38×24. */
.rs-list-row-meta-icons--cards > .rs-card-network {
  width: 29px;
  height: 18px;
  border-radius: 3.25px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.rs-list-row-meta-icons--cards > .rs-card-network + .rs-card-network {
  margin-left: -7px;
}

.rs-list-row-meta-icons--cards .rs-card-network svg {
  width: 100%;
  height: 100%;
}

.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. The Swapped iframe
   phase intentionally omits the BodyHeader so the embedded widget starts
   immediately below the modal nav chrome. */

.rs-fiat-onramp-body {
  gap: 0;
}

.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×586 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: 586px;
  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: 586px;
  min-height: 586px;
  border: 0;
  background: var(--rs-background);
}

.rs-fiat-onramp[data-variant="connect"] .rs-fiat-onramp-iframe {
  height: 585px;
  min-height: 585px;
}

/* Finalising deposit — compact centered spinner screen (Swapped Connect). */
.rs-finalising-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 326px;
  gap: 34px;
  padding: 0;
  text-align: center;
}

.rs-finalising-spinner {
  width: 80px;
  height: 80px;
  animation: rs-spin 1s linear infinite;
  overflow: visible;
}

.rs-finalising-spinner-track,
.rs-finalising-spinner-head {
  fill: none;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.rs-finalising-spinner-track {
  stroke: #bae6fd;
}

.rs-finalising-spinner-head {
  stroke: #0ea5e9;
  stroke-linecap: round;
  stroke-dasharray: 54 214;
  stroke-dashoffset: -8;
}

.rs-finalising-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.rs-finalising-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rs-foreground);
  margin: 0;
}

.rs-finalising-subtitle {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--rs-muted);
  margin: 0;
  max-width: 410px;
}

.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(3, 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: 32px;
  height: 32px;
  border-radius: 4px;
  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;
}

/* Bundled branded logos fill the tile edge-to-edge (their own brand-colour
   background), clipped to the tile's rounded corners. */
.rs-exchange-card-logo--brand {
  background: transparent;
}

.rs-exchange-card-logo--brand img,
.rs-exchange-card-logo--brand svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.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×586 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×586). 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: 699px;
}
.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: 698px;
}

/* =============================================================================
   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;
  gap: 8px;
}

.rs-swapped-tracker-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 0;
}

.rs-swapped-tracker-step:last-child {
  min-height: 17px;
}

/* Dashed vertical connector below each marker. */
.rs-swapped-tracker-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 7.5px;
  width: 1px;
  height: 16px;
  background: repeating-linear-gradient(
    to bottom,
    #5f5f5f 0,
    #5f5f5f 3px,
    transparent 3px,
    transparent 6px
  );
}

.rs-swapped-tracker-step-label {
  font-size: 15px;
  line-height: 17px;
  color: var(--rs-muted);
  flex-grow: 1;
}

.rs-swapped-tracker-step-marker {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.rs-swapped-tracker-step-ring {
  width: 16px;
  height: 16px;
  overflow: visible;
}

.rs-swapped-tracker-step-ring circle {
  fill: none;
  stroke: #5f5f5f;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 3 3;
}

.rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker {
  border-color: transparent;
  border-width: 0;
  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 {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

/* 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;
  border-style: solid;
  color: #fff;
}

.rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker svg {
  width: 10px;
  height: 10px;
  stroke-width: 4;
}

/* 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;
  border-style: solid;
  color: #fff;
}

.rs-swapped-tracker-step--failed .rs-swapped-tracker-step-marker svg {
  width: 10px;
  height: 10px;
  stroke-width: 4;
}

/* 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--active .rs-swapped-tracker-step-marker {
  border-color: transparent;
  color: #fafafa;
}

.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker {
  background: #fafafa;
  border-color: #fafafa;
  color: #18181b;
}