@rhinestone/deposit-modal 0.3.0-alpha.1 → 0.3.0-alpha.10

package/dist/styles.css

@@ -1,6 +1,10 @@
 /* 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
    ============================================================================= */
@@ -49,13 +53,30 @@
   /* 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: #fafafa;
+  --rs-surface-subtle: #fcfbfb;
   --rs-surface: var(--color-gray3);
   --rs-surface-hover: var(--color-gray4);
+  /* Figma coin-select/selected — zinc-100 fill + zinc-300 border. */
+  --rs-asset-selected-bg: #f4f4f5;
+  --rs-asset-selected-border: #d4d4d8;
+  /* Figma: icon-wrapper tokens. Same as surface in light, but dark mode
+     diverges so we keep them separate. */
+  --rs-icon-wrapper-bg: #f4f4f5;
+  --rs-icon-wrapper-icon: #9f9fa9;
+  /* Figma input/label + view/icon-secondary — differ from the generic
+     gray scale: light-mode label/icon is zinc-600 (#52525c), dark mode
+     falls to zinc-400 (#9f9fa9). */
+  --rs-input-label: #52525c;
+  --rs-icon-secondary: #52525c;
+  /* Figma button-dark-ghost token — used by amount-step presets. */
+  --rs-button-ghost-bg: #e4e4e7;
+  --rs-button-ghost-bg-hover: #d4d4d8;
+  --rs-button-ghost-text: #27272a;
 
   /* Primary (CTA). Default theme uses the dark-on-light pair.
      A custom theme overrides these directly via inline CSS vars,
@@ -71,9 +92,23 @@
 
   --rs-success: var(--color-green9);
   --rs-success-tint: var(--color-green3);
-  --rs-error: var(--color-red9);
-  --rs-error-tint: var(--color-red3);
-  --rs-warning-tint: var(--color-amber3);
+  /* 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);
@@ -87,13 +122,14 @@
   --rs-secondary: var(--color-gray3);
   --rs-secondary-hover: var(--color-gray4);
 
-  --rs-shadow-dropdown:
-    0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
+  /* 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: 400px;
+  --rs-width-dialog: 380px;
 
   /* Radius */
   --rs-radius-none: 0;
@@ -103,10 +139,12 @@
   --rs-radius-full: 9999px;
   --rs-radius: var(--rs-radius-md);
 
-  /* Typography */
+  /* 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:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
-    sans-serif;
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif;
   font-size: 14px;
   line-height: 1.5;
   color: var(--rs-foreground);
@@ -115,12 +153,15 @@
   -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. */
+     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;
 }
 
 /* =============================================================================
@@ -152,7 +193,8 @@
   --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.1);
+  --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);
@@ -161,14 +203,30 @@
   --color-neutral10: #e4e4e7;
   --color-neutral11: #d4d4d8;
 
-  --rs-background: #0c0c0c;
+  --rs-background: #0a0a0a;
   /* Well / dropdown / QR-card surface in dark mode. Used by anything that
      renders an elevated container (asset rows, QR well, select inputs). */
   --rs-background-secondary: #18181b;
   --rs-surface-subtle: #18181b;
   --rs-surface: #27272a;
+  /* Figma: icon-wrapper/background — separate from --rs-surface so the
+     deposit-header icon tile stays #18181b in dark mode. */
+  --rs-icon-wrapper-bg: #18181b;
+  --rs-icon-wrapper-icon: #52525c;
+  --rs-input-label: #9f9fa9;
+  --rs-icon-secondary: #9f9fa9;
+  --rs-button-ghost-bg: #27272a;
+  --rs-button-ghost-bg-hover: #3f3f46;
+  --rs-button-ghost-text: #e4e4e7;
   --rs-surface-hover: #3f3f46;
-  --rs-primary-foreground: #18181b;
+  /* 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);
@@ -176,6 +234,21 @@
   --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;
 }
 
@@ -201,13 +274,13 @@
 }
 
 .rs-modal-content {
-  --rs-radius-lg: 14px;
+  --rs-radius-lg: 16px;
   --rs-background: #ffffff;
   --rs-border: #f4f4f5;
 
   position: relative;
   width: 100%;
-  max-width: var(--rs-width-dialog, 400px);
+  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));
@@ -223,7 +296,7 @@
 }
 
 .rs-modal-content[data-theme="dark"] {
-  --rs-background: #0c0c0c;
+  --rs-background: #0a0a0a;
   --rs-border: #18181b;
 }
 
@@ -293,6 +366,13 @@
   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;
 }
 
 .rs-modal-body::-webkit-scrollbar {
@@ -637,8 +717,10 @@
 
 .rs-info-panel-value {
   font-family:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+    Consolas, monospace;
   font-size: 12px;
+  font-weight: 500;
   color: var(--rs-foreground);
 }
 
@@ -690,8 +772,10 @@
 
 .rs-card-value--mono {
   font-family:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+    Consolas, monospace;
   font-size: 12px;
+  font-weight: 500;
 }
 
 .rs-card-value--accent {
@@ -872,9 +956,9 @@
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 8px;
-  background-color: var(--rs-surface-subtle);
+  gap: 16px;
+  padding: 16px 12px;
+  background-color: transparent;
   border: none;
   border-radius: 8px;
   cursor: pointer;
@@ -884,7 +968,7 @@
 }
 
 .rs-asset-row:hover:not(:disabled) {
-  background-color: var(--rs-surface);
+  background-color: var(--rs-surface-subtle);
 }
 
 .rs-asset-row:focus-visible {
@@ -892,8 +976,14 @@
   outline-offset: 2px;
 }
 
-.rs-asset-row--selected {
-  background-color: var(--rs-surface);
+/* 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 {
@@ -901,7 +991,7 @@
   flex: 1;
   min-width: 0;
   align-items: center;
-  gap: 12px;
+  gap: 16px;
 }
 
 /* Icon group — token glyph (32px) with the chain glyph (14px) overlapping
@@ -914,8 +1004,8 @@
 }
 
 .rs-asset-icon {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   margin-right: -10px;
   border-radius: 50%;
   background-color: var(--rs-surface);
@@ -971,14 +1061,14 @@
 }
 
 .rs-asset-name {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--rs-foreground);
   line-height: normal;
 }
 
 .rs-asset-chain {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--rs-muted);
   line-height: normal;
@@ -993,7 +1083,7 @@
 
 .rs-asset-balance {
   flex-shrink: 0;
-  font-size: 18px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--rs-foreground);
   text-align: right;
@@ -1140,7 +1230,8 @@
 
 .rs-font-mono {
   font-family:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+    Consolas, monospace;
 }
 
 .rs-mt-2 {
@@ -1565,7 +1656,9 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  padding: 12px;
+  /* 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;
 }
 
@@ -1618,6 +1711,34 @@
   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;
@@ -1847,7 +1968,8 @@
   align-items: center;
   justify-content: space-between;
   min-height: 24px;
-  padding: 12px 12px 0;
+  /* Padding/gap now live on the parent .rs-modal (matches Figma 1:1). */
+  padding: 0;
   background-color: transparent;
   border-bottom: none;
 }
@@ -1934,30 +2056,67 @@
   font-feature-settings: "tnum";
 }
 
-.rs-amount-input-row > input {
+.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: inherit;
+  color: transparent;
   font-feature-settings: "tnum";
   padding: 0;
   caret-color: var(--rs-foreground);
 }
 
-.rs-amount-input-row > input::placeholder {
-  color: var(--rs-muted);
+.rs-amount-number-wrap > input::placeholder {
+  color: transparent;
 }
 
-.rs-amount-input-row > input::-webkit-outer-spin-button,
-.rs-amount-input-row > input::-webkit-inner-spin-button {
+.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;
@@ -1983,19 +2142,20 @@
   flex: 1 0 0;
   min-width: 0;
   padding: 12px 16px;
-  background: var(--rs-surface);
+  background: var(--rs-button-ghost-bg);
   border: none;
   border-radius: 8px;
   font-family: inherit;
   font-size: 14px;
   font-weight: 500;
-  color: var(--rs-foreground);
+  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-surface-hover);
+  background: var(--rs-button-ghost-bg-hover);
 }
 
 .rs-amount-preset-btn:focus-visible {
@@ -2011,10 +2171,30 @@
 .rs-amount-details {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 4px;
 }
 
 .rs-amount-detail-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: normal;
+}
+
+/* Review-deposit detail rows (ConfirmStep) — Figma uses 14px Medium with
+   8px stack gap, vs the wallet-deposit-amount rows which are 12px / 4px. */
+.rs-review-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.rs-review-detail-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2025,6 +2205,68 @@
   line-height: normal;
 }
 
+.rs-review-detail-value {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--rs-muted);
+  font-feature-settings: "tnum";
+}
+
+.rs-review-detail-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--rs-background);
+}
+
+.rs-review-detail-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.rs-review-detail-info {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-icon-secondary);
+  cursor: help;
+}
+
+.rs-review-detail-info svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-review-detail-link {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-muted);
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.rs-review-detail-link:hover {
+  opacity: 0.7;
+}
+
+.rs-review-detail-link svg {
+  width: 14px;
+  height: 14px;
+}
+
+.rs-review-detail-value--strike {
+  text-decoration: line-through;
+}
+
 .rs-amount-detail-value {
   display: flex;
   align-items: center;
@@ -2107,6 +2349,60 @@
   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)
    ============================================================================= */
@@ -2225,17 +2521,6 @@
    Withdraw Form Step
    ============================================================================= */
 
-.rs-withdraw-form {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.rs-step-body.rs-withdraw-loading {
-  padding: 0 12px;
-}
-
 .rs-withdraw-loading {
   min-height: 240px;
   display: grid;
@@ -2265,7 +2550,8 @@
 .rs-withdraw-label {
   font-size: 14px;
   font-weight: 500;
-  color: var(--rs-muted);
+  line-height: normal;
+  color: var(--rs-input-label);
 }
 
 .rs-withdraw-label--sm {
@@ -2278,7 +2564,7 @@
   gap: 8px;
   padding: 12px;
   background: var(--rs-surface-subtle);
-  border-radius: var(--rs-radius-md);
+  border-radius: 8px;
   border: 1px solid var(--rs-surface-subtle);
 }
 
@@ -2287,6 +2573,8 @@
   border: none;
   background: transparent;
   font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
   color: var(--rs-foreground);
   outline: none;
   min-width: 0;
@@ -2298,9 +2586,9 @@
 }
 
 .rs-withdraw-input--address {
-  font-family:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  font-family: inherit;
   font-size: 14px;
+  font-weight: 400;
 }
 
 .rs-withdraw-input--amount {
@@ -2387,12 +2675,14 @@
 }
 
 .rs-withdraw-max-btn {
-  padding: 8px 16px;
+  padding: 12px 16px;
   background: transparent;
-  border: 1.19px solid var(--rs-foreground);
+  border: 1.191px solid var(--rs-foreground);
   border-radius: 8px;
-  font-size: 14px;
+  font-family: inherit;
+  font-size: 16px;
   font-weight: 500;
+  line-height: normal;
   color: var(--rs-foreground);
   cursor: pointer;
   white-space: nowrap;
@@ -2414,8 +2704,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
+  line-height: normal;
   padding: 0;
 }
 
@@ -2449,14 +2740,15 @@
   justify-content: space-between;
   padding: 12px;
   background: var(--rs-surface-subtle);
-  border-radius: var(--rs-radius-md);
+  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: 16px;
+  font-size: 14px;
+  line-height: normal;
 }
 
 .rs-withdraw-dropdown:hover {
@@ -2488,9 +2780,9 @@
 }
 
 .rs-withdraw-dropdown-arrow {
-  width: 16px;
-  height: 16px;
-  color: var(--rs-muted-foreground);
+  width: 24px;
+  height: 24px;
+  color: var(--rs-icon-secondary);
   transition: transform 0.15s;
 }
 
@@ -2664,9 +2956,10 @@
 }
 
 .rs-deposit-address-dropdown-label {
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 500;
-  color: var(--rs-muted-foreground);
+  line-height: normal;
+  color: var(--rs-input-label);
   margin: 0;
 }
 
@@ -2681,14 +2974,16 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  color: var(--rs-muted-foreground);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--rs-input-label);
 }
 
 .rs-deposit-address-min-icon {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  color: inherit;
+  color: var(--rs-icon-secondary);
 }
 
 /* Price impact accordion — sits at the bottom of the transfer-crypto
@@ -2726,7 +3021,7 @@
   justify-content: center;
   width: 16px;
   height: 16px;
-  color: var(--rs-muted);
+  color: var(--rs-icon-secondary);
   flex-shrink: 0;
 }
 
@@ -2736,7 +3031,7 @@
 }
 
 .rs-price-impact-label {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--rs-muted);
 }
@@ -2791,7 +3086,7 @@
   align-items: center;
   gap: 8px;
   padding-top: 12px;
-  font-size: 14px;
+  font-size: 12px;
   color: var(--rs-muted);
 }
 
@@ -2871,7 +3166,7 @@
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 8px 12px;
+  padding: 12px;
   background: var(--rs-surface-subtle);
   border-radius: 8px;
   border: 1px solid var(--rs-surface-subtle);
@@ -2881,6 +3176,7 @@
     background-color 0.15s;
   font-size: 14px;
   font-weight: 500;
+  line-height: normal;
   color: var(--rs-foreground);
   font-family: inherit;
 }
@@ -2890,6 +3186,14 @@
   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;
@@ -2901,9 +3205,15 @@
 .rs-deposit-address-dropdown-chevron {
   width: 24px;
   height: 24px;
-  color: var(--rs-muted);
+  color: var(--rs-icon-secondary);
   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 {
@@ -2912,15 +3222,15 @@
   left: 0;
   right: 0;
   z-index: 20;
-  background: var(--rs-background);
-  border: 1px solid var(--rs-border);
+  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: 4px;
+  padding: 12px;
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  max-height: 200px;
+  gap: 16px;
+  max-height: 240px;
   overflow-y: auto;
   overscroll-behavior: none;
   animation: rs-dropdown-in 0.12s ease-out;
@@ -2931,26 +3241,26 @@
   align-items: center;
   gap: 6px;
   width: 100%;
-  padding: 7px 8px;
+  padding: 0;
   border-radius: calc(var(--rs-radius-sm) - 2px);
   border: none;
   background: transparent;
   color: var(--rs-foreground);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
+  line-height: normal;
   cursor: pointer;
   text-align: left;
-  transition: background-color 0.1s;
+  transition: opacity 0.1s;
   font-family: inherit;
 }
 
 .rs-deposit-address-dropdown-item:hover {
-  background: var(--rs-surface);
+  opacity: 0.7;
 }
 
 .rs-deposit-address-dropdown-item--active {
-  background: var(--rs-primary-tint);
-  color: var(--rs-primary);
+  color: var(--rs-foreground);
 }
 
 /* Well-card containing the 280px QR + truncated mono address. */
@@ -2964,28 +3274,50 @@
   border-radius: 8px;
 }
 
+/* Mid-refetch: dim the address/QR and block interaction so a stale
+   registration can't be copied or scanned until setup is ready again. */
+.rs-deposit-address-well--updating {
+  opacity: 0.4;
+  pointer-events: none;
+  filter: grayscale(0.3);
+  transition: opacity 0.15s;
+}
+
+.rs-deposit-address-updating {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rs-muted);
+}
+
 .rs-deposit-address-qr {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 20px;
+  padding: 12px;
 }
 
 .rs-deposit-address-qr canvas,
 .rs-deposit-address-qr svg {
   display: block;
-  width: 220px;
-  height: 220px;
+  width: 200px;
+  height: 200px;
 }
 
 .rs-deposit-address-value {
   width: 100%;
-  padding: 0 20px 12px;
+  padding: 0 16px 12px;
   font-family:
     "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
     "Liberation Mono", monospace;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
+  line-height: normal;
   color: var(--rs-muted);
   text-align: center;
   word-break: break-all;
@@ -3102,6 +3434,9 @@
   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;
@@ -3110,20 +3445,21 @@
   z-index: 10;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  pointer-events: none;
+  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 {
-  pointer-events: auto;
-  background: var(--rs-background);
-  border: 1px solid var(--rs-border);
-  border-radius: var(--rs-radius-lg);
-  overflow: hidden;
-  box-shadow:
-    0 -4px 20px rgba(0, 0, 0, 0.10),
-    0 -1px 6px rgba(0, 0, 0, 0.06);
-  animation: rs-notification-slide-up 0.3s ease-out;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
 }
 
 @keyframes rs-notification-slide-up {
@@ -3139,19 +3475,23 @@
 
 .rs-deposit-notification-header {
   display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 14px 14px 0;
+  align-items: center;
+  gap: 12px;
+  padding: 0;
 }
 
 .rs-deposit-notification-icon {
   flex-shrink: 0;
-  padding-top: 1px;
+  width: 42px;
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .rs-deposit-notification-badge {
-  width: 32px;
-  height: 32px;
+  width: 42px;
+  height: 42px;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -3159,68 +3499,80 @@
 }
 
 .rs-deposit-notification-badge svg {
-  width: 14px;
-  height: 14px;
-}
-
-.rs-deposit-notification-badge .rs-spinner {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
 }
 
 .rs-deposit-notification-badge--complete {
-  background-color: var(--rs-success-tint);
-  color: var(--rs-success);
+  background-color: #00bc7d;
+  color: #ffffff;
 }
 
 .rs-deposit-notification-badge--failed {
-  background-color: var(--rs-error-tint);
-  color: var(--rs-error);
+  background-color: #fb2c36;
+  color: #ffffff;
 }
 
 .rs-deposit-notification-badge--processing {
-  background-color: var(--rs-primary-tint);
-  color: var(--rs-primary);
+  background-color: transparent;
+  color: var(--rs-icon-secondary);
+}
+
+.rs-deposit-notification-badge--processing .rs-spinner {
+  width: 42px;
+  height: 42px;
 }
 
 .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: 600;
+  font-weight: 700;
+  line-height: normal;
   color: var(--rs-foreground);
-  line-height: 1.3;
 }
 
 .rs-deposit-notification-subtitle {
   font-size: 12px;
-  color: var(--rs-muted-foreground);
-  line-height: 1.4;
-  margin-top: 2px;
+  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: 24px;
-  height: 24px;
-  display: flex;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
   background: transparent;
-  color: var(--rs-muted-foreground);
+  color: var(--rs-icon-secondary);
   cursor: pointer;
-  border-radius: 4px;
   padding: 0;
-  transition: color 0.15s, background 0.15s;
+  transition: opacity 0.15s;
 }
 
 .rs-deposit-notification-close:hover {
-  color: var(--rs-foreground);
-  background: var(--rs-surface);
+  opacity: 0.7;
 }
 
 .rs-deposit-notification-close svg {
@@ -3228,10 +3580,41 @@
   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: 10px 14px 0;
+  margin: 4px 0 0 54px;
   padding: 8px 10px;
-  background: var(--rs-surface);
+  background: var(--rs-background);
   border-radius: var(--rs-radius-sm);
 }
 
@@ -3248,27 +3631,28 @@
 
 .rs-deposit-notification-label {
   font-size: 12px;
-  color: var(--rs-muted-foreground);
+  color: var(--rs-muted);
 }
 
 .rs-deposit-notification-value {
   font-size: 12px;
   font-weight: 500;
-  color: var(--rs-muted);
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  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-muted);
+  color: var(--rs-foreground);
   text-decoration: none;
-  transition: color 0.15s;
+  transition: opacity 0.15s;
 }
 
 .rs-deposit-notification-link:hover {
-  color: var(--rs-foreground);
+  opacity: 0.7;
 }
 
 .rs-deposit-notification-link-icon {
@@ -3276,27 +3660,6 @@
   height: 10px;
 }
 
-.rs-deposit-notification-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 10px 0;
-  border: none;
-  border-top: 1px solid var(--rs-border-surface);
-  background: transparent;
-  color: var(--rs-muted-foreground);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: color 0.15s;
-  margin-top: 10px;
-}
-
-.rs-deposit-notification-toggle:hover {
-  color: var(--rs-foreground);
-}
-
 /* =============================================================================
    Processing Badges (centered icon badges)
    ============================================================================= */
@@ -3493,6 +3856,8 @@
   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);
@@ -3517,7 +3882,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  padding: 12px;
+  padding: 0;
   gap: 16px;
   min-height: 0;
 }
@@ -3545,7 +3910,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 8px;
 }
 
 .rs-history-empty-glyph {
@@ -3578,15 +3943,17 @@
 }
 
 .rs-history-empty-title {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--rs-foreground);
+  line-height: normal;
 }
 
 .rs-history-empty-hint {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--rs-muted);
+  line-height: normal;
 }
 
 /* List of transaction cards. */
@@ -3647,7 +4014,7 @@
 .rs-history-card-row {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 8px;
   width: 100%;
 }
 
@@ -3658,8 +4025,8 @@
 }
 
 .rs-history-card-token {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   margin-right: -10px;
   border-radius: 50%;
   background: var(--rs-surface);
@@ -3706,7 +4073,7 @@
 }
 
 .rs-history-card-title {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--rs-foreground);
   line-height: normal;
@@ -3731,7 +4098,7 @@
 }
 
 .rs-history-card-amount {
-  font-size: 18px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--rs-foreground);
   line-height: normal;
@@ -3743,7 +4110,7 @@
 .rs-history-card-details {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
   width: 100%;
 }
 
@@ -3754,15 +4121,14 @@
   font-size: 12px;
   font-weight: 500;
   line-height: 18px;
-  color: var(--color-blue9, #0084d1);
+  color: #0084d1;
   text-decoration: none;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
-    monospace;
+  font-family: inherit;
 }
 
 .rs-history-card-link svg {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
 }
 
 .rs-history-card-link:hover {
@@ -3806,6 +4172,28 @@
   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;
@@ -3917,13 +4305,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
-  padding: 10px;
-  background: var(--rs-surface);
-  border: 1px solid var(--rs-surface);
+  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-muted-foreground);
+  color: var(--rs-icon-wrapper-icon);
   box-sizing: border-box;
 }
 
@@ -3951,10 +4339,9 @@
 }
 
 .rs-body-header-title {
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 700;
   line-height: 1.2;
-  letter-spacing: -0.01em;
   color: var(--rs-foreground);
   margin: 0;
 }
@@ -3967,18 +4354,88 @@
   margin: 0;
 }
 
+/* Ticker — per-digit odometer-style animation for the live timer.
+   Each slot clips its content; the outgoing digit slides up and out while
+   the incoming digit slides up from below. Static chars (e.g. ":") never
+   change so they never animate. */
+
+.rs-ticker {
+  display: inline-flex;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.rs-ticker-slot {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  height: 1em;
+  line-height: 1;
+  vertical-align: baseline;
+}
+
+.rs-ticker-in,
+.rs-ticker-out {
+  display: inline-block;
+  line-height: 1;
+}
+
+.rs-ticker-out {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  animation: rs-ticker-out 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.rs-ticker-in {
+  animation: rs-ticker-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes rs-ticker-out {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-70%);
+    opacity: 0;
+  }
+}
+
+@keyframes rs-ticker-in {
+  from {
+    transform: translateY(70%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rs-ticker-in,
+  .rs-ticker-out {
+    animation: none;
+  }
+  .rs-ticker-out {
+    display: none;
+  }
+}
+
 /* List row — Figma "oauth button" pattern */
 
 .rs-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 }
 
 .rs-list-row {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   width: 100%;
   padding: 12px;
   background: var(--rs-background-secondary);
@@ -4016,7 +4473,8 @@
   justify-content: center;
   width: 24px;
   height: 24px;
-  color: var(--rs-muted-foreground);
+  /* Figma: oauth-button/default/icon — same value light/dark. */
+  color: #71717b;
 }
 
 .rs-list-row-leading svg {
@@ -4050,12 +4508,12 @@
 .rs-list-row-text {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
   min-width: 0;
 }
 
 .rs-list-row-title {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--rs-foreground);
   line-height: 1.25;
@@ -4065,7 +4523,7 @@
 }
 
 .rs-list-row-subtitle {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--rs-muted);
   line-height: 1.25;
@@ -4089,32 +4547,22 @@
 .rs-list-row-meta-icons {
   display: flex;
   align-items: center;
-  gap: -4px;
+  gap: 4px;
 }
 
 .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;
   justify-content: center;
-}
-
-.rs-list-row-meta-icons > *:first-child {
-  margin-left: 0;
+  flex-shrink: 0;
 }
 
 .rs-list-row-meta-icons img,
 .rs-list-row-meta-icons svg {
   width: 100%;
   height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
   display: block;
 }
 
@@ -4122,7 +4570,8 @@
   flex-shrink: 0;
   width: 16px;
   height: 16px;
-  color: var(--rs-muted-foreground);
+  /* Figma: oauth-button/default/icon — same #71717b in both themes. */
+  color: #71717b;
   display: inline-flex;
   align-items: center;
   justify-content: center;