@rhinestone/deposit-modal 0.2.5-alpha.0 → 0.3.0-alpha.0

package/dist/styles.css

@@ -6,19 +6,19 @@
    ============================================================================= */
 
 .rs-modal {
-  /* Radix gray scale */
-  --color-gray1: #fcfcfc;
-  --color-gray2: #f9f9f9;
-  --color-gray3: #f0f0f0;
-  --color-gray4: #e8e8e8;
-  --color-gray5: #e0e0e0;
-  --color-gray6: #d9d9d9;
-  --color-gray7: #cecece;
-  --color-gray8: #bbbbbb;
-  --color-gray9: #8d8d8d;
-  --color-gray10: #838383;
-  --color-gray11: #646464;
-  --color-gray12: #202020;
+  /* 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;
@@ -27,11 +27,12 @@
   --color-blue10: #0588f0;
   --color-blue11: #0d74ce;
 
-  /* Neutral accent (primary action) */
+  /* Neutral accent (primary action) — zinc */
   --color-neutral3: #f4f4f5;
   --color-neutral4: #e4e4e7;
-  --color-neutral9: #18181b;
-  --color-neutral10: #27272a;
+  --color-neutral9: #27272a;
+  --color-neutral10: #18181b;
+  --color-neutral11: #09090b;
 
   /* Green (success) */
   --color-green3: #e6f6eb;
@@ -50,14 +51,24 @@
   --color-amber8: #e2a336;
 
   /* Semantic colors */
-  --rs-background: var(--color-gray1);
-  --rs-background-secondary: var(--color-gray2);
+  --rs-background: #ffffff;
+  --rs-background-secondary: var(--color-gray1);
+  --rs-surface-subtle: #fafafa;
   --rs-surface: var(--color-gray3);
   --rs-surface-hover: var(--color-gray4);
+
+  /* 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: #ffffff;
+  --rs-primary-foreground: #fafafa;
+
   --rs-success: var(--color-green9);
   --rs-success-tint: var(--color-green3);
   --rs-error: var(--color-red9);
@@ -67,9 +78,9 @@
   --rs-foreground: var(--color-gray12);
   --rs-muted: var(--color-gray10);
   --rs-muted-foreground: var(--color-gray9);
-  --rs-icon: var(--color-gray10);
+  --rs-icon: var(--color-gray11);
 
-  --rs-border: var(--color-gray5);
+  --rs-border: var(--color-gray2);
   --rs-border-surface: var(--color-gray4);
   --rs-border-accent: var(--color-neutral9);
 
@@ -103,6 +114,13 @@
   -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. */
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 /* =============================================================================
@@ -110,18 +128,19 @@
    ============================================================================= */
 
 .rs-modal[data-theme="dark"] {
-  --color-gray1: #141414;
-  --color-gray2: #1a1a1a;
-  --color-gray3: #212121;
-  --color-gray4: #282828;
-  --color-gray5: #303030;
-  --color-gray6: #393939;
-  --color-gray7: #474747;
-  --color-gray8: #5e5e5e;
-  --color-gray9: #7a7a7a;
-  --color-gray10: #a0a0a0;
-  --color-gray11: #b8b8b8;
-  --color-gray12: #eeeeee;
+  /* 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);
@@ -135,12 +154,24 @@
   --color-red10: #f16a6e;
   --color-amber3: rgba(226, 163, 54, 0.1);
 
+  /* 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: #f4f4f5;
+  --color-neutral9: #fafafa;
   --color-neutral10: #e4e4e7;
-
+  --color-neutral11: #d4d4d8;
+
+  --rs-background: #0c0c0c;
+  /* 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;
+  --rs-surface-hover: #3f3f46;
   --rs-primary-foreground: #18181b;
+  --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);
@@ -171,13 +202,17 @@
 
 .rs-modal-content {
   --rs-radius-lg: 14px;
-  --rs-background: #fcfcfc;
-  --rs-border: #e0e0e0;
+  --rs-background: #ffffff;
+  --rs-border: #f4f4f5;
 
   position: relative;
   width: 100%;
   max-width: var(--rs-width-dialog, 400px);
-  max-height: calc(100vh - 40px);
+  /* 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));
+  display: flex;
+  flex-direction: column;
   margin: 20px;
   overflow: hidden;
   background-color: var(--rs-background);
@@ -187,6 +222,11 @@
   transition: transform 0.2s ease;
 }
 
+.rs-modal-content[data-theme="dark"] {
+  --rs-background: #0c0c0c;
+  --rs-border: #18181b;
+}
+
 .rs-modal-overlay--open .rs-modal-content {
   transform: scale(1);
 }
@@ -219,69 +259,28 @@
   gap: 8px;
 }
 
-.rs-modal-logo {
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  object-fit: contain;
-}
-
-.rs-modal-title {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--rs-foreground);
-}
-
 .rs-modal-close {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   background: transparent;
   border: none;
-  border-radius: var(--rs-radius-sm);
-  color: var(--rs-icon);
+  border-radius: 4px;
+  color: var(--rs-foreground);
   cursor: pointer;
-  transition:
-    background-color 0.15s,
-    color 0.15s;
+  transition: opacity 0.15s;
 }
 
 .rs-modal-close:hover {
-  background-color: var(--rs-surface);
-  color: var(--rs-foreground);
+  opacity: 0.65;
 }
 
 .rs-modal-close svg {
-  width: 18px;
-  height: 18px;
-}
-
-/* Progress indicator */
-.rs-modal-progress {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.rs-modal-progress-dot {
-  height: 6px;
-  border-radius: 3px;
-  transition:
-    width 0.2s,
-    background-color 0.2s;
-}
-
-.rs-modal-progress-dot--active {
-  width: 16px;
-  background-color: var(--rs-primary);
-}
-
-.rs-modal-progress-dot--inactive {
-  width: 6px;
-  background-color: var(--rs-surface);
+  width: 24px;
+  height: 24px;
 }
 
 /* =============================================================================
@@ -326,7 +325,7 @@
   font-weight: 500;
   white-space: nowrap;
   border: 1px solid transparent;
-  border-radius: var(--rs-radius-full);
+  border-radius: var(--rs-radius-sm);
   cursor: pointer;
   transition:
     background-color 0.15s,
@@ -334,6 +333,11 @@
     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:
@@ -343,14 +347,13 @@
 
 .rs-button:disabled {
   pointer-events: none;
-  opacity: 0.5;
 }
 
 /* Sizes */
 .rs-button--size-default {
   height: var(--rs-height-button);
-  padding: 0 20px;
-  font-size: 15px;
+  padding: 0 16px;
+  font-size: 14px;
 }
 
 .rs-button--size-small {
@@ -371,6 +374,17 @@
   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);
@@ -391,13 +405,13 @@
 }
 
 .rs-button--outline {
-  background-color: var(--rs-surface);
-  border-color: var(--rs-border);
-  color: var(--rs-foreground);
+  background-color: transparent;
+  border-color: var(--rs-primary);
+  color: var(--rs-primary);
 }
 
 .rs-button--outline:hover:not(:disabled) {
-  background-color: var(--rs-surface-hover);
+  background-color: var(--rs-surface);
 }
 
 .rs-button--full-width {
@@ -416,6 +430,12 @@
   justify-content: center;
 }
 
+.rs-button__loading-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
 /* =============================================================================
    Input Styles
    ============================================================================= */
@@ -849,42 +869,54 @@
    ============================================================================= */
 
 .rs-asset-row {
+  width: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  background-color: var(--rs-background);
-  border-radius: var(--rs-radius-sm);
-  box-shadow: inset 0 0 0 1px var(--rs-border-surface);
+  gap: 12px;
+  padding: 10px 8px;
+  background-color: var(--rs-surface-subtle);
+  border: none;
+  border-radius: 8px;
   cursor: pointer;
-  transition:
-    background-color 0.15s,
-    box-shadow 0.15s;
+  text-align: left;
+  font-family: inherit;
+  transition: background-color 0.15s;
 }
 
-.rs-asset-row:hover {
-  background-color: var(--rs-background-secondary);
+.rs-asset-row:hover:not(:disabled) {
+  background-color: var(--rs-surface);
+}
+
+.rs-asset-row:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
 }
 
 .rs-asset-row--selected {
-  box-shadow:
-    inset 0 0 0 2px var(--rs-border-accent),
-    0 1px 2px rgba(0, 0, 0, 0.05);
+  background-color: var(--rs-surface);
 }
 
 .rs-asset-info {
   display: flex;
+  flex: 1;
+  min-width: 0;
   align-items: center;
   gap: 12px;
 }
 
+/* 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 {
-  position: relative;
+  display: flex;
+  align-items: flex-end;
+  flex-shrink: 0;
 }
 
 .rs-asset-icon {
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
+  margin-right: -10px;
   border-radius: 50%;
   background-color: var(--rs-surface);
   display: flex;
@@ -893,6 +925,7 @@
   font-size: 11px;
   font-weight: 600;
   color: var(--rs-muted);
+  overflow: hidden;
 }
 
 .rs-asset-icon img {
@@ -903,59 +936,98 @@
 }
 
 .rs-asset-chain-badge {
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-  width: 16px;
-  height: 16px;
-  border-radius: 3px;
-  border: 2px solid var(--rs-background);
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
   background-color: var(--rs-background);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 8px;
+  font-size: 7px;
   font-weight: 700;
+  overflow: hidden;
 }
 
 .rs-asset-chain-badge img {
   width: 100%;
   height: 100%;
-  border-radius: 3px;
+  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: 500;
+  font-size: 16px;
+  font-weight: 700;
   color: var(--rs-foreground);
-  line-height: 1.3;
+  line-height: normal;
 }
 
 .rs-asset-chain {
-  color: var(--rs-muted-foreground);
-  font-weight: 400;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: normal;
 }
 
 .rs-asset-balance-small {
   font-size: 12px;
-  color: var(--rs-muted-foreground);
-  margin-top: 2px;
-  line-height: 1.3;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: normal;
 }
 
 .rs-asset-balance {
-  font-size: 14px;
+  flex-shrink: 0;
+  font-size: 18px;
   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: 6px;
+  gap: 4px;
+  max-height: 320px;
+  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);
 }
 
 /* =============================================================================
@@ -1135,23 +1207,29 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  padding: 10px 12px;
+  gap: 4px;
+  width: 100%;
+  padding: 0 16px 16px;
   font-size: 11px;
-  color: var(--rs-muted-foreground);
-}
-
-.rs-powered-by svg {
-  width: 12px;
-  height: 12px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-muted);
 }
 
-.rs-powered-by a {
-  font-weight: 500;
+.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
    ============================================================================= */
@@ -1478,6 +1556,54 @@
   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;
+  padding: 12px;
+  gap: 16px;
+}
+
+/* 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;
@@ -1719,18 +1845,20 @@
 .rs-modal-header--redesigned {
   display: flex;
   align-items: center;
-  height: auto;
-  padding: 8px 12px;
-  background-color: var(--rs-background);
-  border-bottom: 1px solid var(--rs-border-surface);
+  justify-content: space-between;
+  min-height: 24px;
+  padding: 12px 12px 0;
+  background-color: transparent;
+  border-bottom: none;
 }
 
 .rs-modal-header-nav-left {
-  width: 28px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-shrink: 0;
+  min-width: 24px;
+  min-height: 24px;
 }
 
 .rs-modal-header-nav-center {
@@ -1739,13 +1867,7 @@
   flex-direction: column;
   align-items: center;
   gap: 2px;
-}
-
-.rs-modal-header-title-row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
+  min-width: 0;
 }
 
 .rs-modal-header-nav-right {
@@ -1753,256 +1875,234 @@
   align-items: center;
   justify-content: flex-end;
   flex-shrink: 0;
-  gap: 2px;
-}
-
-.rs-modal-header-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--rs-foreground);
+  gap: 12px;
 }
 
 .rs-modal-header-back {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   background: transparent;
   border: none;
-  border-radius: var(--rs-radius-sm);
-  color: var(--rs-icon);
+  border-radius: 4px;
+  color: var(--rs-foreground);
   cursor: pointer;
-  transition:
-    background-color 0.15s,
-    color 0.15s;
+  transition: opacity 0.15s;
 }
 
-.rs-modal-header-back:hover {
-  background-color: var(--rs-surface);
-  color: var(--rs-foreground);
+.rs-modal-header-back:hover:not(:disabled) {
+  opacity: 0.65;
 }
 
 .rs-modal-header-back svg {
-  width: 18px;
-  height: 18px;
+  width: 24px;
+  height: 24px;
 }
 
-.rs-modal-header-balance {
+/* =============================================================================
+   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;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  margin-top: 2px;
-  font-size: 12px;
-  color: var(--rs-muted-foreground);
-}
-
-.rs-modal-header-balance-value {
-  font-weight: 500;
-  color: var(--rs-muted);
+  flex-direction: column;
+  gap: 12px;
 }
 
-/* =============================================================================
-   Amount Step Redesign
-   ============================================================================= */
-
 .rs-amount-display {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  padding: 20px 16px 12px;
+  gap: 4px;
 }
 
-.rs-amount-input-wrapper {
+.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-input-large {
+.rs-amount-input-row > input {
+  flex: 1;
+  min-width: 0;
   width: 100%;
-  font-size: 48px;
-  font-weight: 600;
-  text-align: center;
-  border: none;
   background: transparent;
-  color: var(--rs-foreground);
+  border: none;
   outline: none;
-  font-family: inherit;
+  font: inherit;
+  color: inherit;
   font-feature-settings: "tnum";
+  padding: 0;
+  caret-color: var(--rs-foreground);
 }
 
-.rs-amount-input-large::placeholder {
-  color: var(--rs-muted-foreground);
+.rs-amount-input-row > input::placeholder {
+  color: var(--rs-muted);
 }
 
-.rs-amount-input-large::-webkit-outer-spin-button,
-.rs-amount-input-large::-webkit-inner-spin-button {
+.rs-amount-input-row > input::-webkit-outer-spin-button,
+.rs-amount-input-row > input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-.rs-amount-input-large[type="number"] {
-  -moz-appearance: textfield;
+.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-token-value {
-  width: 100%;
-  text-align: center;
-  font-size: 14px;
-  color: var(--rs-muted);
-  margin-top: 2px;
+.rs-amount-meta-balance,
+.rs-amount-meta-minimum {
   font-feature-settings: "tnum";
 }
 
-.rs-flow-pill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 8px 16px;
+.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-surface);
-  border-radius: var(--rs-radius-full);
+  border: none;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+  cursor: pointer;
+  transition: background-color 0.15s;
 }
 
-.rs-flow-pill-side {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
+.rs-amount-preset-btn:hover:not(:disabled) {
+  background: var(--rs-surface-hover);
 }
 
-.rs-flow-pill-label {
-  font-size: 10px;
-  color: var(--rs-muted-foreground);
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
+.rs-amount-preset-btn:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
 }
 
-.rs-flow-pill-token {
-  display: flex;
-  align-items: center;
-  gap: 6px;
+.rs-amount-preset-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.rs-flow-pill-token-icon-wrapper {
-  position: relative;
-  flex-shrink: 0;
+.rs-amount-details {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
-.rs-flow-pill-token-icon {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
+.rs-amount-detail-row {
   display: flex;
   align-items: center;
-  justify-content: center;
-  background: var(--rs-background);
-  font-size: 10px;
-  font-weight: 600;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 14px;
+  font-weight: 500;
   color: var(--rs-muted);
-  overflow: hidden;
-  flex-shrink: 0;
+  line-height: normal;
 }
 
-.rs-flow-pill-token-icon img {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  object-fit: contain;
-}
-
-.rs-flow-pill-chain-badge {
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-  width: 12px;
-  height: 12px;
-  border-radius: 3px;
-  border: 1.5px solid var(--rs-surface);
-  background-color: var(--rs-background);
+.rs-amount-detail-value {
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 6px;
-  font-weight: 700;
+  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-flow-pill-chain-badge img {
+.rs-amount-detail-icon img {
   width: 100%;
   height: 100%;
-  border-radius: 3px;
   object-fit: cover;
 }
 
-.rs-flow-pill-token-symbol {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--rs-foreground);
-}
-
-.rs-flow-pill-arrow {
-  display: flex;
+.rs-amount-detail-info {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
   align-items: center;
-  color: var(--rs-muted-foreground);
+  justify-content: center;
+  color: var(--rs-muted);
+  cursor: help;
 }
 
-.rs-flow-pill-arrow svg {
+.rs-amount-detail-info svg {
   width: 16px;
   height: 16px;
 }
 
-.rs-amount-presets {
-  display: flex;
-  gap: 6px;
+.rs-amount-detail-link {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
   justify-content: center;
-  margin: 16px 0 0;
+  color: var(--rs-muted);
+  text-decoration: none;
+  transition: color 0.15s;
 }
 
-.rs-amount-preset-btn {
-  padding: 6px 14px;
-  background: var(--rs-secondary);
-  border: none;
-  border-radius: var(--rs-radius-full);
-  font-size: 12px;
-  font-weight: 500;
+.rs-amount-detail-link:hover {
   color: var(--rs-foreground);
-  cursor: pointer;
-  transition: background-color 0.15s;
-}
-
-.rs-amount-preset-btn:hover {
-  background: var(--rs-secondary-hover);
 }
 
-.rs-amount-preset-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.rs-amount-detail-link svg {
+  width: 14px;
+  height: 14px;
 }
 
-.rs-amount-available {
+/* Side-by-side button row used by success / failure footers
+   ("New deposit" + "Done", "Cancel" + "Try again"). */
+.rs-screen-button-row {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  color: var(--rs-muted-foreground);
-  margin-top: 4px;
+  gap: 8px;
+  width: 100%;
 }
 
-.rs-amount-available-value {
-  font-feature-settings: "tnum";
+.rs-screen-button-row > * {
+  flex: 1 0 0;
+  min-width: 0;
 }
 
 .rs-amount-error {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 6px;
-  margin-top: 12px;
-  padding: 8px 12px;
+  gap: 8px;
+  padding: 10px 12px;
   background: var(--rs-error-tint);
-  border-radius: var(--rs-radius-md);
+  border-radius: var(--rs-radius-sm);
   font-size: 13px;
   color: var(--rs-error);
 }
@@ -2126,10 +2226,10 @@
    ============================================================================= */
 
 .rs-withdraw-form {
-  padding: 14px;
+  padding: 16px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
 }
 
 .rs-step-body.rs-withdraw-loading {
@@ -2164,23 +2264,22 @@
 
 .rs-withdraw-label {
   font-size: 14px;
-  font-weight: 600;
-  color: var(--rs-foreground);
+  font-weight: 500;
+  color: var(--rs-muted);
+}
+
+.rs-withdraw-label--sm {
+  font-size: 12px;
 }
 
 .rs-withdraw-input-row {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 12px 14px;
-  background: var(--rs-background);
+  padding: 12px;
+  background: var(--rs-surface-subtle);
   border-radius: var(--rs-radius-md);
-  border: 1px solid var(--rs-border-surface);
-  transition: border-color 0.15s;
-}
-
-.rs-withdraw-input-row:focus-within {
-  border-color: var(--rs-border-accent);
+  border: 1px solid var(--rs-surface-subtle);
 }
 
 .rs-withdraw-input {
@@ -2201,12 +2300,12 @@
 .rs-withdraw-input--address {
   font-family:
     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .rs-withdraw-input--amount {
-  font-size: 18px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 400;
   font-feature-settings: "tnum";
 }
 
@@ -2244,16 +2343,23 @@
   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 {
-  padding: 6px 10px;
-  background: var(--rs-primary-tint);
-  border-color: var(--rs-border-accent);
-  color: var(--rs-primary);
+  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-primary-tint);
-  border-color: var(--rs-border-accent);
+  background: var(--rs-surface);
+  border-color: var(--rs-surface);
 }
 
 .rs-withdraw-use-connected-icon {
@@ -2261,6 +2367,12 @@
   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;
@@ -2275,14 +2387,15 @@
 }
 
 .rs-withdraw-max-btn {
-  padding: 4px 10px;
+  padding: 8px 16px;
   background: transparent;
-  border: 1px solid var(--rs-border);
-  border-radius: var(--rs-radius-full);
-  font-size: 12px;
-  font-weight: 600;
+  border: 1.19px solid var(--rs-foreground);
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
   color: var(--rs-foreground);
   cursor: pointer;
+  white-space: nowrap;
   transition:
     background-color 0.15s,
     border-color 0.15s;
@@ -2290,7 +2403,6 @@
 
 .rs-withdraw-max-btn:hover:not(:disabled) {
   background: var(--rs-surface);
-  border-color: var(--rs-border-accent);
 }
 
 .rs-withdraw-max-btn:disabled {
@@ -2303,27 +2415,29 @@
   align-items: center;
   justify-content: space-between;
   font-size: 13px;
-  padding: 2px 2px 0;
+  font-weight: 500;
+  padding: 0;
 }
 
 .rs-withdraw-usd {
-  color: var(--rs-muted-foreground);
+  color: var(--rs-muted);
   font-feature-settings: "tnum";
 }
 
 .rs-withdraw-balance {
-  color: var(--rs-muted-foreground);
+  color: var(--rs-muted);
   font-feature-settings: "tnum";
 }
 
 /* Receive row - inline selects side by side */
 .rs-withdraw-receive-row {
   display: flex;
-  gap: 8px;
+  gap: 16px;
 }
 
 .rs-withdraw-receive-col {
   flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -2333,21 +2447,21 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 12px;
-  background: var(--rs-background);
+  padding: 12px;
+  background: var(--rs-surface-subtle);
   border-radius: var(--rs-radius-md);
-  border: 1px solid var(--rs-border-surface);
+  border: 1px solid var(--rs-surface-subtle);
   cursor: pointer;
   transition:
     border-color 0.15s,
     background-color 0.15s;
   width: 100%;
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .rs-withdraw-dropdown:hover {
-  border-color: var(--rs-border);
-  background: var(--rs-background-secondary);
+  background: var(--rs-surface);
+  border-color: var(--rs-surface);
 }
 
 .rs-withdraw-dropdown-value {
@@ -2356,13 +2470,21 @@
   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: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
   object-fit: contain;
+  flex-shrink: 0;
 }
 
 .rs-withdraw-dropdown-arrow {
@@ -2513,32 +2635,39 @@
    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: center;
-  gap: 12px;
+  align-items: stretch;
+  gap: 16px;
+  width: 100%;
 }
 
 .rs-deposit-address-selectors {
   display: flex;
-  align-items: flex-end;
-  gap: 8px;
+  align-items: flex-start;
+  gap: 16px;
   width: 100%;
 }
 
 .rs-deposit-address-dropdown {
   position: relative;
-  flex: 1;
+  flex: 1 0 0;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .rs-deposit-address-dropdown-label {
-  font-size: 11px;
-  color: var(--rs-foreground);
-  margin-bottom: 4px;
+  font-size: 12px;
   font-weight: 500;
-  opacity: 0.65;
+  color: var(--rs-muted-foreground);
+  margin: 0;
 }
 
 .rs-deposit-address-dropdown-label--with-min {
@@ -2551,83 +2680,89 @@
 .rs-deposit-address-min {
   display: inline-flex;
   align-items: center;
-  gap: 3px;
+  gap: 4px;
+  color: var(--rs-muted-foreground);
 }
 
 .rs-deposit-address-min-icon {
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
   flex-shrink: 0;
+  color: inherit;
 }
 
+/* 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%;
-  margin-top: 10px;
-  border-radius: var(--rs-radius-md);
-  background: var(--color-gray2);
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .rs-price-impact-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 8px;
   width: 100%;
-  padding: 10px 14px;
+  padding: 0;
   background: transparent;
   border: none;
   cursor: pointer;
   font-family: inherit;
-  color: var(--rs-foreground);
+  color: var(--rs-muted);
   text-align: left;
-  transition: background-color 0.15s;
 }
 
-.rs-price-impact-header:hover {
-  background: var(--rs-surface);
+.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: 14px;
-  height: 14px;
-  color: var(--rs-muted-foreground);
+  width: 16px;
+  height: 16px;
+  color: var(--rs-muted);
   flex-shrink: 0;
 }
 
 .rs-price-impact-row-icon svg {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
 }
 
 .rs-price-impact-label {
-  font-size: 11px;
-  color: var(--rs-muted-foreground);
+  font-size: 14px;
   font-weight: 500;
+  color: var(--rs-muted);
 }
 
 .rs-price-impact-label strong {
-  color: var(--rs-foreground);
-  font-weight: 600;
+  color: var(--rs-muted);
+  font-weight: 500;
 }
 
 .rs-price-impact-info {
-  color: var(--rs-muted-foreground);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-muted);
 }
 
 .rs-price-impact-info .rs-tooltip-trigger svg {
-  width: 13px;
-  height: 13px;
+  width: 16px;
+  height: 16px;
   display: block;
 }
 
 .rs-price-impact-chevron {
-  width: 14px;
-  height: 14px;
-  margin-left: auto;
-  color: var(--rs-muted-foreground);
+  width: 16px;
+  height: 16px;
+  color: var(--rs-muted);
   flex-shrink: 0;
   transition: transform 0.2s ease;
 }
@@ -2655,12 +2790,9 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 6px 14px 10px;
-  font-size: 13px;
-}
-
-.rs-price-impact-row:last-child {
-  padding-bottom: 12px;
+  padding-top: 12px;
+  font-size: 14px;
+  color: var(--rs-muted);
 }
 
 /* =============================================================================
@@ -2737,39 +2869,39 @@
 .rs-deposit-address-dropdown-trigger {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   width: 100%;
-  padding: 8px 10px;
-  background: var(--rs-surface);
-  border-radius: var(--rs-radius-sm);
-  border: 1px solid var(--rs-border-surface);
+  padding: 8px 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: 13px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--rs-foreground);
   font-family: inherit;
 }
 
 .rs-deposit-address-dropdown-trigger:hover {
-  border-color: var(--rs-border);
-  background: var(--rs-surface-hover);
+  background: var(--rs-surface);
+  border-color: var(--rs-surface);
 }
 
 .rs-deposit-address-dropdown-icon {
-  width: 18px;
-  height: 18px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  object-fit: contain;
+  object-fit: cover;
   flex-shrink: 0;
 }
 
 .rs-deposit-address-dropdown-chevron {
-  width: 14px;
-  height: 14px;
-  color: var(--rs-muted-foreground);
+  width: 24px;
+  height: 24px;
+  color: var(--rs-muted);
   margin-left: auto;
   flex-shrink: 0;
 }
@@ -2821,82 +2953,69 @@
   color: var(--rs-primary);
 }
 
-.rs-deposit-address-qr {
+/* Well-card containing the 280px QR + truncated mono address. */
+.rs-deposit-address-well {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 4px;
-  background: var(--rs-surface);
-  border-radius: var(--rs-radius-md);
-  margin: 4px 0;
-}
-
-.rs-deposit-address-qr canvas,
-.rs-deposit-address-qr svg {
-  display: block;
-  border-radius: var(--rs-radius-md);
-}
-
-.rs-deposit-address-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
   width: 100%;
+  background: var(--rs-surface-subtle);
+  border-radius: 8px;
 }
 
-.rs-deposit-address-label {
+.rs-deposit-address-qr {
   display: flex;
   align-items: center;
-  gap: 5px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--rs-muted);
-  margin-bottom: 8px;
+  justify-content: center;
+  padding: 20px;
 }
 
-.rs-deposit-address-label-icon {
-  width: 13px;
-  height: 13px;
+.rs-deposit-address-qr canvas,
+.rs-deposit-address-qr svg {
   display: block;
-  color: var(--rs-muted-foreground);
+  width: 220px;
+  height: 220px;
 }
 
 .rs-deposit-address-value {
-  font-size: 12px;
+  width: 100%;
+  padding: 0 20px 12px;
   font-family:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
-    monospace;
-  color: var(--rs-foreground);
+    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    "Liberation Mono", monospace;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  text-align: center;
   word-break: break-all;
-  text-align: left;
-  padding: 8px 12px;
-  background: transparent;
-  border: 1px solid var(--rs-border-surface);
-  border-radius: var(--rs-radius-sm) var(--rs-radius-sm) 0 0;
-  border-bottom: none;
-  width: 100%;
 }
 
 .rs-deposit-address-copy {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 8px;
   width: 100%;
-  padding: 8px 16px;
-  border: 1px solid var(--rs-border-surface);
-  border-radius: 0 0 var(--rs-radius-sm) var(--rs-radius-sm);
-  background: var(--color-gray2);
+  padding: 10px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
   color: var(--rs-foreground);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
-  cursor: pointer;
-  transition: background 0.15s;
   font-family: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s;
 }
 
 .rs-deposit-address-copy:hover {
-  background: var(--rs-surface);
+  background: var(--rs-surface-subtle);
+}
+
+.rs-deposit-address-copy svg {
+  width: 16px;
+  height: 16px;
 }
 
 .rs-deposit-address-balance {
@@ -3178,66 +3297,6 @@
   color: var(--rs-foreground);
 }
 
-/* =============================================================================
-   Step Indicator (numbered circles with dotted line)
-   ============================================================================= */
-
-.rs-step-indicator {
-  display: flex;
-  align-items: center;
-}
-
-.rs-step-indicator-node {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
-  border: 1.5px solid var(--rs-border);
-  background: transparent;
-  color: var(--rs-muted);
-}
-
-.rs-step-indicator-node--active {
-  border-color: var(--rs-foreground);
-  background: var(--rs-foreground);
-  color: var(--rs-background);
-}
-
-.rs-step-indicator-node--inactive {
-  border-color: var(--rs-border);
-  background: transparent;
-  color: var(--rs-muted);
-}
-
-.rs-step-indicator-node--complete {
-  border-color: var(--rs-success);
-  background: var(--rs-success);
-  color: white;
-}
-
-.rs-step-indicator-node--complete svg {
-  width: 14px;
-  height: 14px;
-}
-
-.rs-step-indicator-line {
-  width: 40px;
-  height: 0;
-  border-top: 2px dashed var(--rs-border);
-  margin: 0 6px;
-  transition: border-color 0.3s;
-}
-
-.rs-step-indicator-line--active {
-  border-color: var(--rs-success);
-  border-top-style: solid;
-}
-
 /* =============================================================================
    Processing Badges (centered icon badges)
    ============================================================================= */
@@ -3388,17 +3447,6 @@
   transform: rotate(180deg);
 }
 
-/* =============================================================================
-   Minimum Deposit Text
-   ============================================================================= */
-
-.rs-amount-minimum {
-  text-align: center;
-  font-size: 13px;
-  color: var(--rs-muted-foreground);
-  margin-top: 8px;
-}
-
 /* =============================================================================
    History Button (Header)
    ============================================================================= */
@@ -3407,26 +3455,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
+  width: 24px;
+  height: 24px;
   padding: 0;
-  margin-right: 2px;
   border: none;
-  border-radius: var(--rs-radius);
+  border-radius: 4px;
   background: transparent;
-  color: var(--rs-muted-foreground);
+  color: var(--rs-foreground);
   cursor: pointer;
-  transition: color 0.15s, background-color 0.15s;
+  transition: opacity 0.15s;
 }
 
 .rs-modal-header-history:hover:not(:disabled) {
-  color: var(--rs-foreground);
-  background: var(--rs-surface);
-}
-
-.rs-modal-header-history:active:not(:disabled) {
-  background: var(--rs-surface-hover);
-  transform: scale(0.96);
+  opacity: 0.65;
 }
 
 .rs-modal-header-history:disabled {
@@ -3435,12 +3476,15 @@
 }
 
 .rs-modal-header-history svg {
-  width: 15px;
-  height: 15px;
+  width: 24px;
+  height: 24px;
 }
 
 /* =============================================================================
-   Deposit History Panel
+   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 {
@@ -3465,374 +3509,646 @@
   }
 }
 
-/* Header */
-
-.rs-history-header {
+/* 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;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--rs-border-surface);
-  min-height: var(--rs-height-titlebar);
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 12px;
+  gap: 16px;
+  min-height: 0;
 }
 
-.rs-history-back {
+.rs-history-screen-body {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: none;
-  border-radius: var(--rs-radius);
-  background: transparent;
-  color: var(--rs-muted-foreground);
-  cursor: pointer;
-  transition: color 0.15s, background-color 0.15s;
-  flex-shrink: 0;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
 }
 
-.rs-history-back:hover {
-  color: var(--rs-foreground);
-  background: var(--rs-surface);
+.rs-history-screen > .rs-powered-by {
+  padding: 0;
+  margin-top: auto;
 }
 
-.rs-history-back svg {
-  width: 16px;
-  height: 16px;
+/* 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: 4px;
 }
 
-.rs-history-header-title {
-  flex: 1;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--rs-foreground);
-  letter-spacing: -0.01em;
+.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-header-spacer {
-  width: 28px;
-  flex-shrink: 0;
+.rs-history-empty-glyph svg {
+  width: 100%;
+  height: 100%;
 }
 
-/* Scrollable body */
+.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: 16px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+}
 
-.rs-history-body {
+.rs-history-empty-hint {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rs-muted);
+}
+
+/* List of transaction cards. */
+.rs-history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
   flex: 1;
   overflow-y: auto;
-  min-height: 0;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  padding-right: 2px;
 }
 
-.rs-history-body::-webkit-scrollbar {
-  width: 4px;
+.rs-history-list::-webkit-scrollbar {
+  width: 6px;
 }
 
-.rs-history-body::-webkit-scrollbar-thumb {
-  background: var(--rs-border);
-  border-radius: 2px;
+.rs-history-list::-webkit-scrollbar-thumb {
+  background-color: var(--rs-surface-hover);
+  border-radius: var(--rs-radius-full);
 }
 
-/* State screens (loading, empty, error) */
+.rs-history-list::-webkit-scrollbar-thumb:hover {
+  background-color: var(--rs-muted-foreground);
+}
+
+.rs-history-list::-webkit-scrollbar-track {
+  background: transparent;
+}
 
-.rs-history-state {
+/* Card */
+.rs-history-card {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  padding: 56px 24px;
-  text-align: center;
+  gap: 16px;
+  padding: 16px 12px;
+  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-spinner {
-  width: 24px;
-  height: 24px;
-  color: var(--rs-muted-foreground);
-  animation: rs-spinner 1s linear infinite;
+.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-spinner svg {
+.rs-history-card-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
   width: 100%;
-  height: 100%;
 }
 
-.rs-history-state-icon {
+.rs-history-card-icons {
+  display: flex;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+
+.rs-history-card-token {
   width: 32px;
   height: 32px;
-  color: var(--rs-muted-foreground);
+  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-state-icon--error {
-  color: var(--rs-error);
+.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-state-icon svg {
+.rs-history-card-chain img {
   width: 100%;
   height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
 }
 
-.rs-history-state-text {
-  font-size: 13px;
+.rs-history-card-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rs-history-card-title {
+  font-size: 16px;
+  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-state-hint {
-  font-size: 12px;
-  color: var(--rs-muted-foreground);
-  margin-top: -4px;
+.rs-history-card-side {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 4px;
+  flex-shrink: 0;
 }
 
-/* List */
+.rs-history-card-amount {
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+  line-height: normal;
+  font-feature-settings: "tnum";
+  white-space: nowrap;
+}
 
-.rs-history-list {
+/* Expanded detail block under the row. */
+.rs-history-card-details {
   display: flex;
   flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.rs-history-card-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  color: var(--color-blue9, #0084d1);
+  text-decoration: none;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    monospace;
+}
+
+.rs-history-card-link svg {
+  width: 14px;
+  height: 14px;
+}
+
+.rs-history-card-link:hover {
+  text-decoration: underline;
 }
 
-/* Row */
+/* 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-row {
+.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);
+}
+
+/* Load more button at the end of the list. */
+.rs-history-load-more {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
+  align-items: center;
+  justify-content: center;
   padding: 12px 16px;
-  border-bottom: 1px solid var(--rs-border-surface);
-  transition: background-color 0.12s;
+  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-row:last-child {
-  border-bottom: none;
+.rs-history-load-more:hover:not(:disabled) {
+  color: var(--rs-foreground);
+  background: var(--rs-surface);
+  border-color: var(--rs-border);
 }
 
-.rs-history-row:hover {
-  background: var(--rs-background-secondary);
+.rs-history-load-more:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-/* Row primary: route + status */
+/* =============================================================================
+   Shell — matches Figma "modal" frame (padded container, no fixed title bar)
+   ============================================================================= */
+
+.rs-shell {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 16px;
+}
 
-.rs-history-row-primary {
+.rs-shell-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  min-height: 24px;
 }
 
-/* Chain route with icons */
-
-.rs-history-route {
+.rs-shell-nav-actions {
   display: flex;
   align-items: center;
-  gap: 6px;
-  min-width: 0;
+  gap: 12px;
 }
 
-.rs-history-chain {
+.rs-shell-icon-btn {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-  min-width: 0;
+  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-history-chain-icon {
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  flex-shrink: 0;
-  object-fit: cover;
+.rs-shell-icon-btn:hover:not(:disabled) {
+  opacity: 0.65;
 }
 
-.rs-history-chain-name {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--rs-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.rs-shell-icon-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
 }
 
-.rs-history-route-arrow {
-  width: 12px;
-  height: 12px;
-  color: var(--rs-muted-foreground);
-  flex-shrink: 0;
+.rs-shell-icon-btn:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
 }
 
-/* Status with dot indicator */
+.rs-shell-icon-btn svg {
+  width: 24px;
+  height: 24px;
+}
 
-.rs-history-status {
+.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;
+}
+
+.rs-body-header-icon {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.01em;
-  line-height: 1;
-  white-space: nowrap;
-  flex-shrink: 0;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 10px;
+  background: var(--rs-surface);
+  border: 1px solid var(--rs-surface);
+  border-radius: 8px;
+  color: var(--rs-muted-foreground);
+  box-sizing: border-box;
 }
 
-.rs-history-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
+.rs-body-header-icon svg {
+  width: 24px;
+  height: 24px;
 }
 
-.rs-history-dot--pending {
-  background: var(--color-amber8);
+.rs-body-header-icon--success {
+  background: var(--rs-success);
+  border-color: var(--rs-success);
+  color: #ffffff;
 }
 
-.rs-history-dot--processing {
-  background: var(--color-blue9);
-  animation: rs-history-dot-pulse 1.5s ease-in-out infinite;
+.rs-body-header-icon--error {
+  background: var(--rs-error);
+  border-color: var(--rs-error);
+  color: #ffffff;
 }
 
-.rs-history-dot--completed {
-  background: var(--color-green9);
+.rs-body-header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.rs-history-dot--failed {
-  background: var(--color-red9);
+.rs-body-header-title {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: var(--rs-foreground);
+  margin: 0;
 }
 
-.rs-history-dot--spam {
-  background: var(--rs-muted-foreground);
+.rs-body-header-subtitle {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--rs-muted);
+  margin: 0;
 }
 
-@keyframes rs-history-dot-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+/* List row — Figma "oauth button" pattern */
+
+.rs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
-.rs-history-status--completed {
-  color: var(--color-green10);
+.rs-list-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  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-history-status--failed {
-  color: var(--color-red10);
+.rs-list-row:hover:not(:disabled) {
+  background: var(--rs-surface-hover);
+  border-color: var(--rs-surface-hover);
 }
 
-.rs-history-status--processing {
-  color: var(--color-blue11);
+.rs-list-row:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
-.rs-history-status--pending {
-  color: var(--color-amber8);
+.rs-list-row:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
 }
 
-.rs-history-status--spam {
+.rs-list-row-leading {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
   color: var(--rs-muted-foreground);
 }
 
-/* Row secondary: amount + time */
+.rs-list-row-leading svg {
+  width: 24px;
+  height: 24px;
+}
 
-.rs-history-row-secondary {
+.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: baseline;
+  align-items: center;
   justify-content: space-between;
   gap: 8px;
 }
 
-.rs-history-amount {
-  font-size: 12px;
-  color: var(--rs-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.rs-list-row-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
   min-width: 0;
 }
 
-.rs-history-token {
+.rs-list-row-title {
+  font-size: 16px;
   font-weight: 500;
   color: var(--rs-foreground);
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.rs-history-token-target {
-  color: var(--rs-muted-foreground);
-}
-
-.rs-history-no-amount {
-  color: var(--rs-muted-foreground);
+.rs-list-row-subtitle {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.rs-history-time {
-  font-size: 11px;
-  color: var(--rs-muted-foreground);
-  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;
 }
 
-/* Tx hash links */
-
-.rs-history-row-links {
+.rs-list-row-meta-icons {
   display: flex;
   align-items: center;
-  gap: 6px;
-  margin-top: 1px;
+  gap: -4px;
 }
 
-.rs-history-tx-link {
+.rs-list-row-meta-icons > * {
+  margin-left: -4px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--rs-background);
+  border: 1px solid var(--rs-background);
+  overflow: hidden;
   display: inline-flex;
   align-items: center;
-  gap: 3px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  background: var(--rs-surface);
-  color: var(--rs-muted-foreground);
-  text-decoration: none;
-  transition: color 0.12s, background-color 0.12s;
-  cursor: pointer;
+  justify-content: center;
 }
 
-.rs-history-tx-link:hover {
-  color: var(--rs-foreground);
-  background: var(--rs-surface-hover);
+.rs-list-row-meta-icons > *:first-child {
+  margin-left: 0;
 }
 
-.rs-history-tx-hash {
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  font-size: 10px;
-  letter-spacing: 0.01em;
+.rs-list-row-meta-icons img,
+.rs-list-row-meta-icons svg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+  display: block;
 }
 
-.rs-history-ext-icon {
-  width: 10px;
-  height: 10px;
+.rs-list-row-chevron {
   flex-shrink: 0;
-  opacity: 0.5;
+  width: 16px;
+  height: 16px;
+  color: var(--rs-muted-foreground);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.rs-history-tx-link:hover .rs-history-ext-icon {
-  opacity: 1;
+.rs-list-row-chevron svg {
+  width: 16px;
+  height: 16px;
 }
 
-/* Load more */
+/* Powered-by footer in shell */
 
-.rs-history-load-more {
+.rs-shell-footer {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 4px 16px 12px;
-  padding: 8px 16px;
-  border: 1px solid var(--rs-border-surface);
-  border-radius: var(--rs-radius);
-  background: transparent;
-  color: var(--rs-muted);
-  font-size: 12px;
+  gap: 4px;
+  font-size: 11px;
   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-background-secondary);
-  border-color: var(--rs-border);
+  color: var(--rs-muted);
 }
 
-.rs-history-load-more:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+/* 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);
 }