@seams/wallet 0.24.0 → 0.27.0

package/dist/esm/react/styles/styles.css

@@ -1,9 +1,390 @@
 /* React Component Styles for @seams/wallet/react */
 
+/* Reset controls only inside SDK-owned surfaces. Theme can also wrap app content.
+   Native control selectors add their element type above this baseline. */
+[data-seams-root].seams-theme-provider {
+  display: revert;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+[data-seams-root].seams-theme-provider
+  :is(.seams-profile-button-morphable, .seams-settings-page, .qr-code-container) {
+  font-family: var(--seams-font-family, system-ui, sans-serif);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+[data-seams-root].seams-theme-provider
+  :is(
+    .seams-profile-button-morphable,
+    .seams-settings-page,
+    .seams-linked-devices-modal-content,
+    .qr-scanner-modal,
+    .qr-code-container,
+    .seams-link-device-failure,
+    .seams-wallet-picker
+  )
+  :where(button, input, select, textarea, a) {
+  box-sizing: border-box;
+  appearance: auto;
+  display: inline-block;
+  width: auto;
+  height: auto;
+  min-width: 0;
+  min-height: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: normal;
+  text-transform: none;
+  text-indent: 0;
+  text-decoration: none;
+  white-space: normal;
+  vertical-align: middle;
+  box-shadow: none;
+}
+
+[data-seams-root].seams-theme-provider
+  :is(
+    .seams-profile-button-morphable,
+    .seams-settings-page,
+    .seams-linked-devices-modal-content,
+    .qr-scanner-modal,
+    .qr-code-container,
+    .seams-link-device-failure,
+    .seams-wallet-picker
+  )
+  :where(button) {
+  appearance: none;
+}
+
+svg[data-seams-root].seams-icon[viewBox],
+[data-seams-root].seams-theme-provider svg.seams-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--seams-icon-width, 24px);
+  height: var(--seams-icon-height, 24px);
+  fill: var(--seams-icon-fill, none);
+  stroke: var(--seams-icon-stroke, currentColor);
+  stroke-width: var(--seams-icon-stroke-width, 2);
+}
+
+
+
+[data-seams-root].seams-theme-provider .seams-wallet-picker {
+  color: var(--seams-wallet-picker-text, #f5f5f5);
+  background: var(--seams-wallet-picker-background, #202020);
+  padding: clamp(20px, 4vw, 40px);
+  border-radius: 28px;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--seams-font-family, system-ui, sans-serif);
+  font-size: 14px;
+  line-height: 1.5;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker h2 {
+  font-size: clamp(22px, 4vw, 32px);
+  font-weight: 500;
+  margin: 0;
+}
+[data-seams-root].seams-theme-provider .seams-near-network {
+  opacity: 0.7;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker-options button {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  color: inherit;
+  background: var(--seams-wallet-picker-card, #262626);
+  border: 1px solid var(--seams-wallet-picker-border, #383838);
+  border-radius: 24px;
+  padding: 24px;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  min-width: 0;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker-options strong {
+  font-size: 20px;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker-options small {
+  font-size: 12px;
+  opacity: 0.7;
+  overflow-wrap: anywhere;
+}
+[data-seams-root].seams-theme-provider .seams-near-icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #181818;
+  font-size: 24px;
+}
+[data-seams-root].seams-theme-provider .seams-near-meteor {
+  background: #fff;
+  color: #4824e9;
+  font-weight: 700;
+}
+[data-seams-root].seams-theme-provider .seams-near-intear {
+  background: #fff;
+  color: #1685ff;
+  font-weight: 700;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker-options button:hover:enabled {
+  background: var(--seams-wallet-picker-hover, #303030);
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker button:focus-visible {
+  outline: 3px solid #8faaff;
+  outline-offset: 3px;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+[data-seams-root].seams-theme-provider button.seams-near-disconnect {
+  margin-top: 20px;
+  padding: 10px 16px;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 1px solid #666;
+  border-radius: 10px;
+}
+
+[data-seams-root].seams-theme-provider .seams-wallet-picker form,
+[data-seams-root].seams-theme-provider .seams-wallet-picker label {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+}
+[data-seams-root].seams-theme-provider .seams-external-evm {
+  display: grid;
+  gap: 20px;
+}
+[data-seams-root].seams-theme-provider .seams-external-evm :is(button, select) {
+  width: 100%;
+  min-height: 44px;
+  padding: 10px 16px;
+  border: 1px solid var(--seams-wallet-picker-border, #383838);
+  border-radius: 10px;
+  color: inherit;
+  background: var(--seams-wallet-picker-card, #262626);
+  font: inherit;
+  cursor: pointer;
+}
+@media (max-width: 380px) {
+  [data-seams-root].seams-theme-provider .seams-wallet-picker-options {
+    grid-template-columns: 1fr;
+  }
+}
+
+:where([data-seams-root]) .seams-wallet-connector {
+  box-sizing: border-box;
+  position: relative;
+  width: min(100%, 420px);
+  border-radius: var(--seams-shape-card, 16px);
+  background: var(--seams-colors-colorBackground);
+  box-shadow: var(--seams-shadows-md);
+  color: var(--seams-colors-textPrimary);
+  font-family: var(--seams-font-family, system-ui, sans-serif);
+  font-size: var(--seams-font-size-base, 1rem);
+  line-height: 1.5;
+  transition: height 200ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+:where([data-seams-root]) .seams-wallet-connector[data-connector-view='auth'] {
+  background: transparent;
+  box-shadow: none;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-content {
+  width: 100%;
+  min-width: 0;
+  border-radius: inherit;
+}
+
+:where([data-seams-root])
+  .seams-wallet-connector[data-connector-view='auth']
+  .seams-wallet-connector-content {
+  animation: seams-connector-enter 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+:where([data-seams-root]) .seams-wallet-connector-choices {
+  box-sizing: border-box;
+  padding: calc(var(--seams-spacing-lg) + var(--seams-spacing-xs)) var(--seams-spacing-lg)
+    var(--seams-spacing-lg);
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: inherit;
+}
+
+:where([data-seams-root]) .seams-wallet-connector h2 {
+  margin: 0 calc(var(--seams-spacing-lg) + var(--seams-spacing-xs))
+    calc(var(--seams-spacing-sm) + var(--seams-spacing-xs)) 0;
+  font-size: 1.375em;
+  line-height: 1.25;
+  font-weight: 500;
+  letter-spacing: -0.04em;
+  outline: none;
+}
+
+:where([data-seams-root]) .seams-wallet-connector p {
+  margin: 0 0 var(--seams-spacing-lg);
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.8125em;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-options {
+  display: grid;
+  gap: var(--seams-spacing-sm);
+}
+
+:where([data-seams-root]) .seams-wallet-connector-option {
+  display: flex;
+  align-items: center;
+  gap: var(--seams-spacing-md);
+  width: 100%;
+  min-width: 0;
+  min-height: calc(var(--seams-shape-controlHeight, 44px) + 2 * var(--seams-spacing-md));
+  padding: var(--seams-spacing-md);
+  box-sizing: border-box;
+  border: 1px solid var(--seams-colors-secondaryButtonBorder, var(--seams-colors-borderPrimary));
+  border-radius: var(--seams-shape-control, 10px);
+  background: var(--seams-colors-secondaryButtonBackground, var(--seams-colors-surface));
+  color: var(--seams-colors-secondaryButtonText, var(--seams-colors-textPrimary));
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-option:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-icon {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  flex: none;
+}
+:where([data-seams-root]) .seams-wallet-connector-icon img {
+  display: block;
+  object-fit: contain;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-label {
+  display: grid;
+  gap: var(--seams-spacing-xs);
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-label strong {
+  font-size: 0.8125em;
+  font-weight: 500;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-label small {
+  font-size: 0.75em;
+  color: var(--seams-colors-textSecondary);
+}
+
+:where([data-seams-root]) .seams-wallet-connector-option > svg {
+  flex: none;
+  color: var(--seams-colors-textSecondary);
+}
+
+:where([data-seams-root]) .seams-wallet-connector-close,
+:where([data-seams-root]) .seams-wallet-connector-back {
+  position: absolute;
+  z-index: calc(var(--seams-wallet-inline-dialog-z, 0) + 1);
+  inset: 12px 12px auto auto;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: var(--seams-colors-textSecondary);
+  background: transparent;
+  cursor: pointer;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-back:has(+ .seams-wallet-connector-close) {
+  right: 52px;
+}
+
+:where([data-seams-root]) .seams-wallet-connector button:focus-visible {
+  outline: 2px solid var(--seams-colors-focus, currentColor);
+  outline-offset: 3px;
+}
+
+:where([data-seams-root]) .seams-wallet-connector p[role] {
+  margin: var(--seams-spacing-md) 0 0;
+}
+
+:where([data-seams-root]) .seams-wallet-connector .seams-wallet-connector-error {
+  color: var(--seams-colors-error);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :where([data-seams-root]) .seams-wallet-connector-option:not(:disabled):hover {
+    background: var(--seams-colors-secondaryButtonHoverBackground, var(--seams-colors-hover));
+    border-color: var(--seams-colors-borderHover);
+  }
+  :where([data-seams-root]) .seams-wallet-connector-close:hover,
+  :where([data-seams-root]) .seams-wallet-connector-back:hover {
+    background: var(--seams-colors-hover);
+  }
+}
+
+@keyframes seams-connector-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-seams-root]) .seams-wallet-connector {
+    transition: none;
+  }
+  :where([data-seams-root]) .seams-wallet-connector-content {
+    animation: none;
+  }
+}
+
+
 /* Import AccountMenuButton styles */
 /* Expander (ExportKeysSection) — same grid-rows collapse mechanism as the
    Transaction Settings / Accounts expanders so all sections open with one motion */
-.seams-dropdown-export-keys-root {
+[data-seams-root].seams-theme-provider .seams-dropdown-export-keys-root {
   background-color: var(--seams-expander-surface, var(--seams-colors-surface));
   transform-origin: top;
   display: grid;
@@ -11,122 +392,997 @@
   transition: grid-template-rows 200ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.seams-dropdown-export-keys-root.is-expanded {
-  border-top: 1px solid var(--seams-colors-borderPrimary);
-  border-bottom: 1px solid var(--seams-colors-borderPrimary);
-  grid-template-rows: 1fr;
+[data-seams-root].seams-theme-provider .seams-dropdown-export-keys-root.is-expanded {
+  border-top: 1px solid var(--seams-colors-borderPrimary);
+  border-bottom: 1px solid var(--seams-colors-borderPrimary);
+  grid-template-rows: 1fr;
+}
+
+[data-seams-root].seams-theme-provider .seams-dropdown-export-keys-clip {
+  overflow: hidden;
+  min-height: 0;
+  min-width: 0;
+}
+
+[data-seams-root].seams-theme-provider .seams-dropdown-export-keys-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+  transition:
+    opacity 100ms ease,
+    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
+  opacity: 0;
+  transform: translateY(4px);
+}
+
+[data-seams-root].seams-theme-provider
+  .seams-dropdown-export-keys-root.is-expanded
+  .seams-dropdown-export-keys-content {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+[data-seams-root].seams-theme-provider button.seams-export-keys-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border: none;
+  border-radius: var(--seams-shape-item, 8px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+[data-seams-root].seams-theme-provider button.seams-export-keys-row:hover:not(:disabled) {
+  /* a shade off the expander surface behind the rows, which is often surface2;
+     mixing follows a theme's surface where a fixed surface step does not */
+  background: color-mix(
+    in srgb,
+    var(--seams-colors-textPrimary) 7%,
+    var(--seams-expander-surface, var(--seams-colors-surface))
+  );
+}
+
+[data-seams-root].seams-theme-provider button.seams-export-keys-row:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+[data-seams-root].seams-theme-provider .seams-export-keys-row-label {
+  flex: 0 0 auto;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--seams-colors-textPrimary);
+  white-space: nowrap;
+}
+
+[data-seams-root].seams-theme-provider .seams-export-keys-row-description {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+  font-size: 12px;
+  color: var(--seams-colors-textSecondary);
+}
+
+/* always-present slot: reserves the spinner's footprint so toggling the
+   export loading state never changes the row (or menu) size */
+[data-seams-root].seams-theme-provider .seams-export-keys-row-spinner {
+  flex: 0 0 auto;
+  width: 14px;
+  height: 14px;
+  color: var(--seams-colors-textSecondary);
+}
+
+[data-seams-root].seams-theme-provider .seams-export-keys-row-spinner svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* A phone-width menu left the description beside the label only a few
+   characters, so it moves to a line of its own under the label. */
+@media (max-width: 480px) {
+  [data-seams-root].seams-theme-provider .seams-account-screen button.seams-export-keys-row {
+    flex-wrap: wrap;
+    row-gap: 2px;
+  }
+
+  [data-seams-root].seams-theme-provider .seams-account-screen .seams-export-keys-row-spinner {
+    margin-left: auto;
+  }
+
+  [data-seams-root].seams-theme-provider .seams-account-screen .seams-export-keys-row-description {
+    flex-basis: 100%;
+    order: 1;
+    white-space: normal;
+    text-align: left;
+  }
+}
+
+/* Expander (AccountsSection) — same grid-rows collapse mechanism as the
+   Transaction Settings expander so the two sections open with one motion */
+[data-seams-root].seams-theme-provider .seams-dropdown-accounts-root {
+  background-color: var(--seams-expander-surface, var(--seams-colors-surface));
+  transform-origin: top;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+[data-seams-root].seams-theme-provider .seams-dropdown-accounts-root.is-expanded {
+  border-top: 1px solid var(--seams-colors-borderPrimary);
+  border-bottom: 1px solid var(--seams-colors-borderPrimary);
+  grid-template-rows: 1fr;
+}
+
+[data-seams-root].seams-theme-provider .seams-dropdown-accounts-clip {
+  overflow: hidden;
+  min-height: 0;
+  min-width: 0;
+}
+
+[data-seams-root].seams-theme-provider .seams-dropdown-accounts-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+  transition:
+    opacity 100ms ease,
+    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
+  opacity: 0;
+  transform: translateY(4px);
+}
+
+[data-seams-root].seams-theme-provider
+  .seams-dropdown-accounts-root.is-expanded
+  .seams-dropdown-accounts-content {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+[data-seams-root].seams-theme-provider a.seams-accounts-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--seams-shape-item, 8px);
+  text-decoration: none;
+  color: inherit;
+  transition: background 150ms ease;
+}
+
+[data-seams-root].seams-theme-provider a.seams-accounts-row:hover {
+  /* a shade off the expander surface behind the rows, which is often surface2;
+     mixing follows a theme's surface where a fixed surface step does not */
+  background: color-mix(
+    in srgb,
+    var(--seams-colors-textPrimary) 7%,
+    var(--seams-expander-surface, var(--seams-colors-surface))
+  );
+}
+
+[data-seams-root].seams-theme-provider .seams-accounts-row-chain {
+  flex: 0 0 auto;
+  min-width: 56px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--seams-colors-textPrimary);
+}
+
+[data-seams-root].seams-theme-provider .seams-accounts-row-address {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  color: var(--seams-colors-textSecondary);
+}
+
+[data-seams-root].seams-theme-provider .seams-accounts-row-arrow {
+  flex: 0 0 auto;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  color: var(--seams-colors-textSecondary);
+}
+
+[data-seams-root].seams-theme-provider a.seams-accounts-row:hover .seams-accounts-row-arrow {
+  color: var(--seams-colors-textPrimary);
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(
+    --seams-z-underlay-backdrop,
+    calc(
+      var(--seams-wallet-overlay-z, 2147483646) - var(--seams-wallet-underlay-backdrop-offset, 2)
+    )
+  );
+  background: rgb(0 0 0 / 0.26);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--seams-spacing-sm, 12px);
+  box-sizing: border-box;
+  overflow: auto;
+  overscroll-behavior: none;
+  animation: seams-linked-devices-backdrop-opacity 80ms ease-out;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-content {
+  position: relative;
+  z-index: var(
+    --seams-z-underlay-content,
+    calc(var(--seams-wallet-overlay-z, 2147483646) - var(--seams-wallet-underlay-content-offset, 1))
+  );
+  display: flex;
+  flex-direction: column;
+  /* One width for every account-menu dialog: their rows are short, and a
+     narrow card keeps each row readable at a glance. */
+  width: min(420px, 100%);
+  max-width: 100%;
+  min-width: 0;
+  max-height: calc(100vh - 24px);
+  max-height: calc(100dvh - 24px);
+  overflow: hidden;
+  padding: 0;
+  color: var(--seams-colors-textPrimary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.18);
+  border: none;
+  border-radius: var(--seams-shape-card, 1.5rem);
+  background: var(--seams-colors-colorBackground);
+  box-sizing: border-box;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-content:focus {
+  outline: none;
+}
+
+[data-seams-root].seams-theme-provider .seams-account-menu-dialog-main {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  padding: 1.5rem;
+  text-wrap: pretty;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-seams-root].seams-theme-provider .seams-linked-devices-modal-content {
+    animation: seams-linked-devices-modal-content-enter 80ms ease-out both;
+  }
+}
+
+[data-seams-root].seams-theme-provider .seams-auth-methods-modal-intro {
+  margin: -0.25rem 0 0.75rem;
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-title {
+  margin: 0 0 0.75rem;
+  font-size: 1.375rem;
+  font-weight: 500;
+  letter-spacing: -0.025em;
+  line-height: 1.25;
+  color: var(--seams-colors-textPrimary);
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-subtitle {
+  margin: -0.5rem 0 1rem;
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-body {
+  display: grid;
+  min-height: 0;
+  gap: var(--seams-spacing-sm, 0.5rem);
+  overflow-y: auto;
+  scrollbar-width: none;
+  overscroll-behavior: none;
+}
+
+/* Both the loading and the loaded state render one card per row, so the box
+   the list occupies does not jump when the devices arrive. */
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-placeholder {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 3.5rem;
+  padding: 0.75rem 0.9rem;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 0.75rem;
+  background: var(--seams-colors-surface);
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.86rem;
+  font-weight: 600;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-list {
+  display: grid;
+  gap: var(--seams-spacing-sm, 0.5rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-item {
+  display: grid;
+  gap: 0.35rem;
+  padding: 0.75rem 0.9rem;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 0.75rem;
+  background: var(--seams-colors-surface);
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-item-main {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-item-name {
+  color: var(--seams-colors-textPrimary);
+  font-size: 0.95rem;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+/* The state chip carries the only status a person needs. A normal state is a
+   quiet neutral tag; colour marks only the states that need attention. */
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-standing {
+  flex: none;
+  padding: 0.1875rem 0.5rem;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--seams-colors-textPrimary), transparent 93%);
+  color: var(--seams-colors-textPrimary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-standing.tone-pending {
+  background: color-mix(in srgb, oklch(0.72 0.15 85), transparent 88%);
+  color: oklch(0.5 0.13 85);
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-standing.tone-off {
+  background: color-mix(in srgb, var(--seams-colors-textSecondary), transparent 90%);
+  color: var(--seams-colors-textSecondary);
+}
+
+[data-seams-root].seams-theme-provider
+  .theme-dark
+  .seams-linked-devices-modal-standing.tone-pending {
+  color: oklch(0.82 0.13 85);
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-item-detail {
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+/* A grouped inventory is a plain list: no box around it, a hairline under
+   every row, so the rows read as entries on the card itself. */
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-list--grouped {
+  gap: 0;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-item--row {
+  position: relative;
+  grid-template-columns: 24px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0 0.875rem;
+  padding: 0.875rem 0;
+  border: none;
+  border-bottom: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 0;
+  background: transparent;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: start;
+  width: 24px;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+  color: var(--seams-colors-textSecondary);
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-item-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Section labels name each group of rows, in small caps above it. */
+[data-seams-root].seams-theme-provider .seams-account-menu-section {
+  display: grid;
+  gap: 0.5rem;
+}
+
+[data-seams-root].seams-theme-provider .seams-account-menu-section-label {
+  margin: 0;
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  line-height: 1.4;
+  text-transform: uppercase;
+}
+
+[data-seams-root].seams-theme-provider
+  .seams-account-menu-section
+  > .seams-linked-devices-modal-list--grouped {
+  margin-top: -0.25rem;
+}
+
+/* A section's main action is a full-width outline button; an add action leads
+   with its plus sign. */
+[data-seams-root].seams-theme-provider
+  .seams-linked-devices-modal-content
+  .seams-account-menu-wide-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: stretch;
+  gap: 0.5rem;
+  min-height: 44px;
+  border-radius: var(--seams-shape-control, 10px);
+  background: transparent;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-item-content {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+/* Title on the left, status chip at the end of the row. */
+[data-seams-root].seams-theme-provider
+  .seams-linked-devices-modal-item--row
+  .seams-linked-devices-modal-item-main {
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  min-height: 1.25rem;
+}
+
+[data-seams-root].seams-theme-provider
+  .seams-linked-devices-modal-item--row
+  .seams-linked-devices-modal-item-name {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+
+[data-seams-root].seams-theme-provider
+  .seams-linked-devices-modal-item--row
+  .seams-linked-devices-modal-item-detail {
+  margin-top: 0.125rem;
+  font-size: 0.8125rem;
+  font-weight: 400;
+}
+
+/* Why this row cannot be removed right now, shaped as part of the row. */
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-hint {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  margin-top: 0.6rem;
+  padding: 0.6rem 0.75rem;
+  border-radius: 0.5rem;
+  background: color-mix(in srgb, var(--seams-colors-textSecondary), transparent 92%);
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.78rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-hint svg {
+  flex: none;
+  margin-top: 1px;
+}
+
+[data-seams-root].seams-theme-provider button.seams-linked-devices-modal-remove {
+  align-self: start;
+  margin-top: 2px;
+  color: oklch(0.52 0.17 25);
+}
+
+[data-seams-root].seams-theme-provider .theme-dark button.seams-linked-devices-modal-remove {
+  color: oklch(0.74 0.15 25);
+}
+
+[data-seams-root].seams-theme-provider
+  .seams-linked-devices-modal-item--row
+  .seams-linked-devices-modal-confirm {
+  margin-top: 0.6rem;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-confirm {
+  display: grid;
+  gap: 0.5rem;
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.82rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-confirm-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-confirm-actions > button {
+  flex: 1 1 0;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-add-method {
+  display: grid;
+  gap: 0.65rem;
+  padding: 0.85rem;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 0.75rem;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-add-method h3 {
+  margin: 0;
+  color: var(--seams-colors-textPrimary);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  line-height: 1.35;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-security-note {
+  margin: 0;
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.82rem;
+  font-weight: 500;
+  line-height: 1.45;
+}
+
+[data-seams-root].seams-theme-provider input.seams-linked-devices-modal-otp-input {
+  width: 100%;
+  min-height: 44px;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 0.6rem;
+  background: var(--seams-colors-colorBackground);
+  color: var(--seams-colors-textPrimary);
+  font: inherit;
+  font-size: 1rem;
+  box-sizing: border-box;
+}
+
+[data-seams-root].seams-theme-provider input.seams-linked-devices-modal-otp-input:focus-visible {
+  outline: none;
+  border-color: transparent;
+  background:
+    linear-gradient(var(--seams-colors-colorBackground), var(--seams-colors-colorBackground))
+      padding-box,
+    var(
+        --seams-colors-focusGradient,
+        linear-gradient(
+          var(--seams-colors-focus, var(--seams-colors-primary)),
+          var(--seams-colors-focus, var(--seams-colors-primary))
+        )
+      )
+      border-box;
+}
+
+[data-seams-root].seams-theme-provider button.seams-linked-devices-modal-secondary,
+[data-seams-root].seams-theme-provider button.seams-linked-devices-modal-danger {
+  justify-self: start;
+  min-height: 36px;
+  padding: 0.4rem 0.75rem;
+  border-radius: 0.6rem;
+  font-size: 0.86rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 140ms ease;
+}
+
+[data-seams-root].seams-theme-provider button.seams-linked-devices-modal-secondary {
+  border: 1px solid var(--seams-colors-borderPrimary);
+  background: var(--seams-colors-colorBackground);
+  color: var(--seams-colors-textPrimary);
+}
+
+[data-seams-root].seams-theme-provider
+  button.seams-linked-devices-modal-secondary:hover:not(:disabled) {
+  background: var(--seams-colors-surface2, var(--seams-colors-surface));
+}
+
+[data-seams-root].seams-theme-provider button.seams-linked-devices-modal-danger {
+  justify-self: stretch;
+  border: 1px solid transparent;
+  background: oklch(0.55 0.19 25);
+  color: #ffffff;
+}
+
+[data-seams-root].seams-theme-provider button.seams-linked-devices-modal-danger:hover {
+  background: oklch(0.49 0.19 25);
+}
+
+[data-seams-root].seams-theme-provider button.seams-linked-devices-modal-secondary:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+[data-seams-root].seams-theme-provider button.seams-linked-devices-modal-danger:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+[data-seams-root].seams-theme-provider button.seams-linked-devices-modal-secondary:focus-visible,
+[data-seams-root].seams-theme-provider button.seams-linked-devices-modal-danger:focus-visible {
+  outline: 2px solid var(--seams-colors-primary);
+  outline-offset: 2px;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-error {
+  padding: 0.6rem 0.75rem;
+  border: 1px solid color-mix(in srgb, oklch(0.58 0.18 25), transparent 75%);
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, oklch(0.58 0.18 25), transparent 93%);
+  color: oklch(0.52 0.17 25);
+  font-size: 0.82rem;
+  font-weight: 600;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+[data-seams-root].seams-theme-provider .theme-dark .seams-linked-devices-modal-error {
+  color: oklch(0.74 0.15 25);
+}
+
+/* Announced only — a visible copy would shift the card as it changes. */
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes seams-linked-devices-backdrop-opacity {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes seams-linked-devices-modal-content-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 480px) {
+  [data-seams-root].seams-theme-provider .seams-linked-devices-modal-backdrop {
+    align-items: flex-start;
+    padding: var(--seams-spacing-sm, 8px);
+  }
+
+  [data-seams-root].seams-theme-provider .seams-linked-devices-modal-content {
+    max-height: calc(100vh - 16px);
+    max-height: calc(100dvh - 16px);
+    border-radius: var(--seams-shape-card, 1rem);
+  }
+
+  [data-seams-root].seams-theme-provider .seams-account-menu-dialog-main {
+    padding: var(--seams-spacing-md, 1rem);
+  }
+
+  [data-seams-root].seams-theme-provider .seams-linked-devices-modal-item-main {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  /* Row layout keeps the chip beside the title; it wraps on its own. */
+  [data-seams-root].seams-theme-provider
+    .seams-linked-devices-modal-item--row
+    .seams-linked-devices-modal-item-main {
+    align-items: center;
+    flex-direction: row;
+  }
+}
+
+@media (max-height: 520px) {
+  [data-seams-root].seams-theme-provider .seams-linked-devices-modal-backdrop {
+    align-items: flex-start;
+  }
+}
+
+[data-seams-root].seams-theme-provider
+  .seams-linked-devices-modal-backdrop[data-presentation='page'] {
+  position: static;
+  display: block;
+  padding: 0;
+  background: transparent;
+  overflow: visible;
+  animation: none;
+}
+[data-seams-root].seams-theme-provider
+  .seams-linked-devices-modal-backdrop[data-presentation='page']
+  .seams-linked-devices-modal-content {
+  width: 100%;
+  box-shadow: none;
+  max-height: none;
+  overflow: visible;
+  padding: 24px;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  animation: none;
+}
+[data-seams-root].seams-theme-provider
+  .seams-linked-devices-modal-backdrop[data-presentation='page']
+  .seams-account-menu-dialog-main {
+  padding: 0;
+}
+[data-seams-root].seams-theme-provider
+  .seams-linked-devices-modal-backdrop[data-presentation='page']
+  .seams-linked-devices-modal-body {
+  overflow: visible;
+}
+
+[data-seams-root].seams-theme-provider
+  .seams-auth-methods-modal-content
+  .seams-auth-methods-modal-intro {
+  margin-bottom: 1.5rem;
+  font-size: 0.875rem;
+}
+/* The body scrolls, so the last action needs its own room above the card edge. */
+[data-seams-root].seams-theme-provider
+  .seams-auth-methods-modal-content
+  .seams-linked-devices-modal-body {
+  gap: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+/* A method's icon sits on a tile, like the recovery-code row. */
+[data-seams-root].seams-theme-provider
+  .seams-auth-methods-modal-content
+  .seams-linked-devices-modal-item--row {
+  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
+}
+[data-seams-root].seams-theme-provider
+  .seams-auth-methods-modal-content
+  .seams-linked-devices-modal-item-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  margin-top: 0;
+  border-radius: var(--seams-shape-control, 10px);
+  background: color-mix(in srgb, var(--seams-colors-textPrimary), transparent 93%);
+  color: var(--seams-colors-textPrimary);
+}
+[data-seams-root].seams-theme-provider
+  .seams-auth-methods-modal-content
+  .seams-linked-devices-modal-item-detail {
+  font-weight: 400;
+  line-height: 1.5;
+}
+[data-seams-root].seams-theme-provider
+  .seams-auth-methods-modal-content
+  .seams-linked-devices-modal-add-method {
+  padding: 0;
+  border: 0;
+  gap: 0.5rem;
+}
+[data-seams-root].seams-theme-provider
+  .seams-auth-methods-modal-content
+  button.seams-linked-devices-modal-secondary {
+  min-height: 44px;
+  font-size: 0.8125rem;
+}
+[data-seams-root].seams-theme-provider
+  .seams-linked-devices-modal-backdrop[data-presentation='page']
+  .seams-auth-methods-modal-content {
+  max-width: 40rem;
+}
+
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-content *,
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-content *::before,
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-content *::after {
+  box-sizing: border-box;
 }
 
-.seams-dropdown-export-keys-clip {
-  overflow: hidden;
-  min-height: 0;
-  min-width: 0;
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-body::-webkit-scrollbar {
+  display: none;
 }
 
-.seams-dropdown-export-keys-content {
+/* Each method is a card: icon, name and state, one trailing control, then an
+   optional footer for further actions or a removal confirmation. */
+[data-seams-root].seams-theme-provider
+  .seams-auth-methods-modal-content
+  .seams-account-menu-section
+  > .seams-account-method-tiles {
+  margin-top: 0;
+}
+[data-seams-root].seams-theme-provider
+  .seams-auth-methods-modal-content
+  .seams-account-method-tiles
+  .seams-linked-devices-modal-item--row {
+  padding: 0.75rem 0.875rem;
+  border-radius: 0.875rem;
+}
+[data-seams-root].seams-theme-provider
+  .seams-auth-methods-modal-content
+  .seams-linked-devices-modal-item--row
+  .seams-linked-devices-modal-item-icon {
+  align-self: center;
+}
+[data-seams-root].seams-theme-provider
+  .seams-auth-methods-modal-content
+  .seams-linked-devices-modal-item--row
+  .seams-linked-devices-modal-item-main {
+  justify-content: flex-start;
+}
+[data-seams-root].seams-theme-provider .seams-auth-method-footer {
+  grid-column: 1 / -1;
   display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 8px 12px;
-  transition:
-    opacity 100ms ease,
-    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
-  opacity: 0;
-  transform: translateY(4px);
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  min-height: 2.75rem;
+  margin: 0.75rem -0.875rem -0.75rem;
+  padding: 0.25rem 0.875rem;
+  border-top: 1px solid var(--seams-colors-borderPrimary);
 }
-
-.seams-dropdown-export-keys-root.is-expanded .seams-dropdown-export-keys-content {
-  opacity: 1;
-  transform: translateY(0);
+[data-seams-root].seams-theme-provider
+  .seams-auth-method-footer
+  > .seams-linked-devices-modal-confirm {
+  flex: 1;
+  margin: 0;
+  padding-block: 0.5rem;
 }
 
-.seams-export-keys-row {
-  display: flex;
+/* Quiet text actions; Remove carries the error tone, mixed toward the text
+   colour so it keeps its contrast on both themes. */
+[data-seams-root].seams-theme-provider button.seams-auth-method-text-action {
+  display: inline-flex;
   align-items: center;
-  gap: 10px;
-  padding: 8px 10px;
-  border: none;
-  border-radius: var(--seams-shape-item, 8px);
+  gap: 0.125rem;
+  min-height: 2.25rem;
+  margin-inline: -0.5rem;
+  padding: 0.375rem 0.5rem;
+  border: 0;
+  border-radius: var(--seams-shape-control, 10px);
   background: transparent;
-  color: inherit;
+  color: var(--seams-colors-textPrimary);
   font: inherit;
-  text-align: left;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  white-space: nowrap;
   cursor: pointer;
-  transition: background 150ms ease;
+  transition: background-color 140ms ease;
 }
-
-.seams-export-keys-row:hover:not(:disabled) {
-  /* a shade off the expander surface behind the rows, which is often surface2;
-     mixing follows a theme's surface where a fixed surface step does not */
-  background: color-mix(
-    in srgb,
-    var(--seams-colors-textPrimary) 7%,
-    var(--seams-expander-surface, var(--seams-colors-surface))
-  );
+[data-seams-root].seams-theme-provider button.seams-auth-method-text-action > svg {
+  color: var(--seams-colors-textSecondary);
 }
-
-.seams-export-keys-row:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+[data-seams-root].seams-theme-provider button.seams-auth-method-text-action:dir(rtl) > svg {
+  transform: scaleX(-1);
 }
-
-.seams-export-keys-row-label {
-  flex: 0 0 auto;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--seams-colors-textPrimary);
-  white-space: nowrap;
+[data-seams-root].seams-theme-provider button.seams-auth-method-text-action[data-tone='danger'],
+[data-seams-root].seams-theme-provider .seams-linked-devices-modal-item-detail [data-tone='error'],
+[data-seams-root].seams-theme-provider .seams-auth-method-field-error {
+  color: color-mix(in oklab, var(--seams-colors-error) 65%, var(--seams-colors-textPrimary));
+}
+[data-seams-root].seams-theme-provider button.seams-auth-method-text-action:hover:not(:disabled) {
+  background: var(--seams-colors-surface2, var(--seams-colors-surface));
+}
+[data-seams-root].seams-theme-provider button.seams-auth-method-text-action:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+[data-seams-root].seams-theme-provider button.seams-auth-method-text-action:focus-visible {
+  outline: 2px solid var(--seams-colors-textPrimary);
+  outline-offset: 2px;
+}
+@media (pointer: coarse) {
+  [data-seams-root].seams-theme-provider button.seams-auth-method-text-action {
+    min-height: 2.75rem;
+  }
 }
 
-.seams-export-keys-row-description {
+/* Email OTP's address form opens in its card footer, below a divider. */
+[data-seams-root].seams-theme-provider .seams-auth-method-form {
+  display: grid;
   flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: right;
-  font-size: 12px;
-  color: var(--seams-colors-textSecondary);
+  gap: 0.5rem;
+  padding-block: 0.625rem 0.5rem;
+  color: var(--seams-colors-textPrimary);
+  font-size: 0.8125rem;
 }
-
-/* always-present slot: reserves the spinner's footprint so toggling the
-   export loading state never changes the row (or menu) size */
-.seams-export-keys-row-spinner {
-  flex: 0 0 auto;
-  width: 14px;
-  height: 14px;
+[data-seams-root].seams-theme-provider .seams-auth-method-form label {
+  font-weight: 600;
+}
+[data-seams-root].seams-theme-provider .seams-auth-method-note,
+[data-seams-root].seams-theme-provider .seams-auth-method-field-error {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+[data-seams-root].seams-theme-provider .seams-auth-method-note {
   color: var(--seams-colors-textSecondary);
 }
-
-.seams-export-keys-row-spinner svg {
-  display: block;
-  width: 100%;
-  height: 100%;
+[data-seams-root].seams-theme-provider .seams-auth-method-field-error {
+  font-weight: 500;
 }
-
-/* A phone-width menu left the description beside the label only a few
-   characters, so it moves to a line of its own under the label. */
-@media (max-width: 480px) {
-  .seams-account-screen .seams-export-keys-row {
-    flex-wrap: wrap;
-    row-gap: 2px;
-  }
-
-  .seams-account-screen .seams-export-keys-row-spinner {
-    margin-left: auto;
-  }
-
-  .seams-account-screen .seams-export-keys-row-description {
-    flex-basis: 100%;
-    order: 1;
-    white-space: normal;
-    text-align: left;
-  }
+[data-seams-root].seams-theme-provider
+  .seams-auth-method-form
+  .seams-linked-devices-modal-confirm-actions {
+  margin-top: 0.25rem;
+}
+[data-seams-root].seams-theme-provider button.seams-auth-method-primary {
+  min-height: 2.5rem;
+  padding: 0.4rem 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 0.6rem;
+  background: var(--seams-colors-textPrimary);
+  color: var(--seams-colors-colorBackground);
+  font: inherit;
+  font-size: 0.86rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 140ms ease;
+}
+[data-seams-root].seams-theme-provider button.seams-auth-method-primary:hover:not(:disabled) {
+  background: color-mix(
+    in srgb,
+    var(--seams-colors-textPrimary) 84%,
+    var(--seams-colors-colorBackground)
+  );
+}
+[data-seams-root].seams-theme-provider button.seams-auth-method-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+[data-seams-root].seams-theme-provider button.seams-auth-method-primary:focus-visible {
+  outline: 2px solid var(--seams-colors-textPrimary);
+  outline-offset: 2px;
 }
 
 /* MenuItem Component Styles */
 
-.seams-dropdown-menu-item {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item {
   --seams-dropdown-menu-item-opacity: 1;
   display: flex;
   align-items: center;
@@ -150,38 +1406,38 @@
   border-radius: 0;
 }
 
-.seams-dropdown-menu-item:hover {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item:hover {
   background-color: var(--seams-colors-hover);
   background: var(--seams-colors-hover);
 }
-.seams-dropdown-menu-item:hover:not(:disabled) {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item:hover:not(:disabled) {
   background-color: var(--seams-colors-hover);
   background: var(--seams-colors-hover);
 }
 
-.seams-dropdown-menu-item:active {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item:active {
   transform: scale(0.98);
   background: var(--seams-colors-surface2);
 }
 
-.seams-dropdown-menu-item:focus {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item:focus {
   outline: none;
 }
 
-.seams-dropdown-menu-item:focus-visible {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item:focus-visible {
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--seams-colors-focus), transparent 60%);
 }
 
-.seams-dropdown-menu-item:disabled {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item:disabled {
   --seams-dropdown-menu-item-opacity: 0.5;
   cursor: not-allowed;
 }
 
-.seams-dropdown-menu-item:disabled:hover {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item:disabled:hover {
   background-color: transparent;
 }
 
-.seams-dropdown-menu-item-icon {
+[data-seams-root].seams-theme-provider .seams-dropdown-menu-item-icon {
   flex-shrink: 0;
   width: 32px;
   height: 32px;
@@ -190,13 +1446,13 @@
   justify-content: center;
 }
 
-.seams-dropdown-menu-item-icon svg {
+[data-seams-root].seams-theme-provider .seams-dropdown-menu-item-icon svg {
   width: 20px;
   height: 20px;
   color: var(--seams-colors-textSecondary);
 }
 
-.seams-menu-spinner-icon {
+[data-seams-root].seams-theme-provider .seams-menu-spinner-icon {
   display: block;
   will-change: transform;
   transform: translateZ(0);
@@ -204,26 +1460,26 @@
   animation: seams-menu-spinner-rotate 850ms linear infinite;
 }
 
-.seams-menu-spinner-icon-track,
-.seams-menu-spinner-icon-head {
+[data-seams-root].seams-theme-provider .seams-menu-spinner-icon-track,
+[data-seams-root].seams-theme-provider .seams-menu-spinner-icon-head {
   stroke: currentColor;
   stroke-width: 2.25;
 }
 
-.seams-menu-spinner-icon-track {
+[data-seams-root].seams-theme-provider .seams-menu-spinner-icon-track {
   opacity: 0.22;
 }
 
-.seams-menu-spinner-icon-head {
+[data-seams-root].seams-theme-provider .seams-menu-spinner-icon-head {
   opacity: 0.95;
 }
 
-.seams-dropdown-menu-item-content {
+[data-seams-root].seams-theme-provider .seams-dropdown-menu-item-content {
   flex: 1;
   min-width: 0;
 }
 
-.seams-dropdown-menu-item-label {
+[data-seams-root].seams-theme-provider .seams-dropdown-menu-item-label {
   font-weight: 500;
   color: var(--seams-colors-textPrimary);
   font-size: 14px;
@@ -231,11 +1487,13 @@
   margin: 0;
 }
 
-.seams-dropdown-menu-item.disabled .seams-dropdown-menu-item-label {
+[data-seams-root].seams-theme-provider
+  button.seams-dropdown-menu-item.disabled
+  .seams-dropdown-menu-item-label {
   color: var(--seams-colors-textSecondary);
 }
 
-.seams-dropdown-menu-item-description {
+[data-seams-root].seams-theme-provider .seams-dropdown-menu-item-description {
   font-size: 12px;
   font-weight: 500;
   color: var(--seams-colors-textSecondary);
@@ -243,11 +1501,13 @@
   line-height: 1.5;
 }
 
-.seams-dropdown-menu-item.disabled .seams-dropdown-menu-item-description {
+[data-seams-root].seams-theme-provider
+  button.seams-dropdown-menu-item.disabled
+  .seams-dropdown-menu-item-description {
   color: var(--seams-colors-textSecondary);
 }
 
-.seams-dropdown-menu-item.highlighted {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item.highlighted {
   background: color-mix(in srgb, var(--seams-colors-focus), transparent 75%);
   box-shadow:
     0 0 0 1px color-mix(in srgb, var(--seams-colors-focus), transparent 45%),
@@ -255,36 +1515,40 @@
   transform: translateX(0);
 }
 
-.seams-dropdown-menu-item.highlighted:hover {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item.highlighted:hover {
   background: color-mix(in srgb, var(--seams-colors-focus), transparent 65%);
 }
 
 /* A chosen item blinks once, highlight off then on, before its menu closes
    (blinkMenuItem). No transition, so each phase lands on its own frame. */
-.seams-dropdown-menu-item[data-blink] {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item[data-blink] {
   transition: none;
 }
 
-.seams-dropdown-menu-item[data-blink='off'],
-.seams-dropdown-menu-item[data-blink='off']:hover {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item[data-blink='off'],
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item[data-blink='off']:hover {
   background: transparent;
   box-shadow: none;
 }
 
-.seams-dropdown-menu-item[data-blink='on'],
-.seams-dropdown-menu-item[data-blink='on']:hover {
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item[data-blink='on'],
+[data-seams-root].seams-theme-provider button.seams-dropdown-menu-item[data-blink='on']:hover {
   background: var(--seams-colors-hover);
 }
 
 /* Menu item animation states (within ProfileDropdown) */
 
-.seams-profile-dropdown-morphed[data-state='closed'] .seams-dropdown-menu-item {
+[data-seams-root].seams-theme-provider
+  .seams-profile-dropdown-morphed[data-state='closed']
+  button.seams-dropdown-menu-item {
   opacity: 0;
   transform: translateX(-1rem);
   animation: none;
 }
 
-.seams-profile-dropdown-morphed[data-state='open'] .seams-dropdown-menu-item {
+[data-seams-root].seams-theme-provider
+  .seams-profile-dropdown-morphed[data-state='open']
+  button.seams-dropdown-menu-item {
   opacity: 0;
   transform: translateX(-1rem);
   animation: seams-profile-menu-item-enter 240ms linear forwards;
@@ -323,15 +1587,15 @@
   }
 }
 
-.seams-account-menu-group {
+[data-seams-root].seams-theme-provider .seams-account-menu-group {
   margin-top: 16px;
 }
-.seams-account-menu-group + .seams-account-menu-group {
+[data-seams-root].seams-theme-provider .seams-account-menu-group + .seams-account-menu-group {
   border-top: 1px solid var(--seams-colors-borderPrimary);
   padding-top: 12px;
   margin-top: 10px;
 }
-.seams-account-menu-group h3 {
+[data-seams-root].seams-theme-provider .seams-account-menu-group h3 {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 1px;
@@ -339,10 +1603,12 @@
   color: var(--seams-colors-textSecondary);
   margin: 0 0 4px;
 }
-.seams-profile-dropdown-menu {
+[data-seams-root].seams-theme-provider .seams-profile-dropdown-menu {
   --seams-expander-surface: var(--seams-colors-surface2);
 }
-.seams-profile-dropdown-menu .seams-dropdown-menu-item {
+[data-seams-root].seams-theme-provider
+  .seams-profile-dropdown-menu
+  button.seams-dropdown-menu-item {
   position: relative;
   isolation: isolate;
   min-height: 40px;
@@ -359,37 +1625,53 @@
   align-items: center;
   cursor: pointer;
 }
-.seams-profile-dropdown-menu .seams-dropdown-menu-item:disabled {
+[data-seams-root].seams-theme-provider
+  .seams-profile-dropdown-menu
+  button.seams-dropdown-menu-item:disabled {
   color: var(--seams-colors-textSecondary);
   opacity: 0.6;
   cursor: default;
 }
-.seams-profile-dropdown-menu .seams-dropdown-menu-item-icon {
+[data-seams-root].seams-theme-provider .seams-profile-dropdown-menu .seams-dropdown-menu-item-icon {
   width: 22px;
   height: 22px;
   color: var(--seams-colors-textSecondary);
   flex-shrink: 0;
 }
-.seams-profile-dropdown-menu .seams-dropdown-menu-item-icon svg {
+[data-seams-root].seams-theme-provider
+  .seams-profile-dropdown-menu
+  .seams-dropdown-menu-item-icon
+  svg {
   width: 20px;
   height: 20px;
 }
-.seams-profile-dropdown-menu .seams-dropdown-menu-item-label {
+[data-seams-root].seams-theme-provider
+  .seams-profile-dropdown-menu
+  .seams-dropdown-menu-item-label {
   font-size: 14px;
   font-weight: 400;
 }
-.seams-profile-dropdown-menu .seams-dropdown-menu-item-description {
+[data-seams-root].seams-theme-provider
+  .seams-profile-dropdown-menu
+  .seams-dropdown-menu-item-description {
   display: none;
 }
-.seams-profile-dropdown-menu .seams-dropdown-menu-item-content {
+[data-seams-root].seams-theme-provider
+  .seams-profile-dropdown-menu
+  .seams-dropdown-menu-item-content {
   flex: 1;
 }
-.seams-profile-dropdown-menu .seams-dropdown-menu-item > .seams-hover-arrow {
+[data-seams-root].seams-theme-provider
+  .seams-profile-dropdown-menu
+  button.seams-dropdown-menu-item
+  > .seams-hover-arrow {
   margin-inline-end: 4px;
 }
 /* The hover shade bleeds past the row edges so the icons and labels stay
    aligned with the group headings. */
-.seams-profile-dropdown-menu .seams-dropdown-menu-item:not(.seams-lock-menu-item)::before {
+[data-seams-root].seams-theme-provider
+  .seams-profile-dropdown-menu
+  button.seams-dropdown-menu-item:not(button.seams-lock-menu-item)::before {
   content: '';
   position: absolute;
   z-index: -1;
@@ -399,37 +1681,51 @@
   opacity: 0;
   transition: opacity 150ms ease;
 }
-.seams-profile-dropdown-menu .seams-dropdown-menu-item:focus-visible::before {
+[data-seams-root].seams-theme-provider
+  .seams-profile-dropdown-menu
+  button.seams-dropdown-menu-item:focus-visible::before {
   opacity: 1;
 }
-.seams-profile-dropdown-menu .seams-lock-menu-item {
+[data-seams-root].seams-theme-provider .seams-profile-dropdown-menu button.seams-lock-menu-item {
   border: 1px solid var(--seams-colors-borderPrimary);
   border-radius: 11px;
   justify-content: center;
   margin-top: 12px;
 }
-.seams-lock-menu-item .seams-dropdown-menu-item-content {
+[data-seams-root].seams-theme-provider
+  button.seams-lock-menu-item
+  .seams-dropdown-menu-item-content {
   flex: 0 1 auto;
 }
 @media (hover: hover) {
-  .seams-profile-dropdown-menu .seams-dropdown-menu-item:not(:disabled):hover {
+  [data-seams-root].seams-theme-provider
+    .seams-profile-dropdown-menu
+    button.seams-dropdown-menu-item:not(:disabled):hover {
     background: transparent;
   }
-  .seams-profile-dropdown-menu .seams-dropdown-menu-item:not(:disabled):hover::before {
+  [data-seams-root].seams-theme-provider
+    .seams-profile-dropdown-menu
+    button.seams-dropdown-menu-item:not(:disabled):hover::before {
     opacity: 1;
   }
-  .seams-profile-dropdown-menu .seams-lock-menu-item:not(:disabled):hover {
+  [data-seams-root].seams-theme-provider
+    .seams-profile-dropdown-menu
+    button.seams-lock-menu-item:not(:disabled):hover {
     background: var(--seams-colors-surface2);
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .seams-profile-dropdown-menu .seams-dropdown-menu-item::before {
+  [data-seams-root].seams-theme-provider
+    .seams-profile-dropdown-menu
+    button.seams-dropdown-menu-item::before {
     transition: none;
   }
 }
 
 @media (pointer: coarse) {
-  .seams-profile-dropdown-menu .seams-dropdown-menu-item {
+  [data-seams-root].seams-theme-provider
+    .seams-profile-dropdown-menu
+    button.seams-dropdown-menu-item {
     min-height: 44px;
   }
 }
@@ -437,7 +1733,7 @@
 /* HoverArrowIcon: a chevron that grows a shaft (">" to "->") when its
    direct parent is hovered or focused from the keyboard. */
 
-.seams-hover-arrow {
+[data-seams-root].seams-theme-provider .seams-hover-arrow {
   flex: 0 0 auto;
   fill: none;
   stroke: currentColor;
@@ -445,7 +1741,13 @@
   color: var(--seams-colors-textSecondary);
   transition: color 140ms ease;
 }
-.seams-hover-arrow-line {
+[data-seams-root].seams-theme-provider .seams-hover-arrow--left {
+  transform: rotate(180deg);
+}
+[data-seams-root].seams-theme-provider .seams-hover-arrow--up-right {
+  transform: rotate(-45deg);
+}
+[data-seams-root].seams-theme-provider .seams-hover-arrow-line {
   opacity: 0;
   filter: blur(2px);
   transform: scaleX(0.45);
@@ -455,39 +1757,57 @@
     filter 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
     transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
-.seams-hover-arrow-tip {
+[data-seams-root].seams-theme-provider .seams-hover-arrow-tip {
   transition: transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
-:hover > .seams-hover-arrow,
-:focus-visible > .seams-hover-arrow {
+[data-seams-root].seams-theme-provider :focus-visible > .seams-hover-arrow {
   color: var(--seams-colors-textPrimary);
 }
-:hover > .seams-hover-arrow .seams-hover-arrow-line,
-:focus-visible > .seams-hover-arrow .seams-hover-arrow-line {
+[data-seams-root].seams-theme-provider :focus-visible > .seams-hover-arrow .seams-hover-arrow-line {
   opacity: 1;
   filter: blur(0);
   transform: scaleX(1);
 }
-:hover > .seams-hover-arrow .seams-hover-arrow-tip,
-:focus-visible > .seams-hover-arrow .seams-hover-arrow-tip {
+[data-seams-root].seams-theme-provider :focus-visible > .seams-hover-arrow .seams-hover-arrow-tip {
   transform: translateX(3px);
 }
+@media (hover: hover) and (pointer: fine) {
+  [data-seams-root].seams-theme-provider
+    :hover:not(:disabled):not([aria-disabled='true'])
+    > .seams-hover-arrow {
+    color: var(--seams-colors-textPrimary);
+  }
+  [data-seams-root].seams-theme-provider
+    :hover:not(:disabled):not([aria-disabled='true'])
+    > .seams-hover-arrow
+    .seams-hover-arrow-line {
+    opacity: 1;
+    filter: blur(0);
+    transform: scaleX(1);
+  }
+  [data-seams-root].seams-theme-provider
+    :hover:not(:disabled):not([aria-disabled='true'])
+    > .seams-hover-arrow
+    .seams-hover-arrow-tip {
+    transform: translateX(3px);
+  }
+}
 @media (prefers-reduced-motion: reduce) {
-  .seams-hover-arrow,
-  .seams-hover-arrow-line,
-  .seams-hover-arrow-tip {
+  [data-seams-root].seams-theme-provider .seams-hover-arrow,
+  [data-seams-root].seams-theme-provider .seams-hover-arrow-line,
+  [data-seams-root].seams-theme-provider .seams-hover-arrow-tip {
     transition: none;
   }
 }
 
 /* TouchIcon specific styles and animations */
 
-.seams-fingerprint-icon path {
+[data-seams-root].seams-theme-provider .seams-fingerprint-icon path {
   /* Normalize path length so dash animations are simple */
   stroke: currentColor;
 }
 
-.seams-fingerprint-icon.open path {
+[data-seams-root].seams-theme-provider .seams-fingerprint-icon.open path {
   /* Draw the fingerprint when expanding/opening */
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
@@ -495,7 +1815,7 @@
 }
 
 /* Animate when closing the menu */
-.seams-fingerprint-icon.closed path {
+[data-seams-root].seams-theme-provider .seams-fingerprint-icon.closed path {
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
   animation: seams-fp-close 1.6s ease-out 0.1s both;
@@ -522,21 +1842,23 @@
 /* Transaction settings: a review switch, then the review layout as cards
    with a small drawing. The settings page and the account menu share these
    rules; the menu adds a compact variant. */
-.seams-transaction-page {
+[data-seams-root].seams-theme-provider .seams-transaction-page {
   display: grid;
   gap: 40px;
 }
-.seams-transaction-group {
+[data-seams-root].seams-theme-provider .seams-transaction-group {
   min-width: 0;
   margin: 0;
   padding: 0;
   border: 0;
 }
-.seams-transaction-review-setting + .seams-transaction-group {
+[data-seams-root].seams-theme-provider
+  .seams-transaction-review-setting
+  + .seams-transaction-group {
   padding-top: 40px;
   border-top: 1px solid var(--seams-colors-borderPrimary);
 }
-.seams-transaction-group legend {
+[data-seams-root].seams-theme-provider .seams-transaction-group legend {
   /* A floated legend leaves the fieldset border, so the divider above a
      group runs above its title, not through it. */
   float: inline-start;
@@ -545,21 +1867,21 @@
   font-size: 18px;
   font-weight: 600;
 }
-.seams-transaction-group legend + * {
+[data-seams-root].seams-theme-provider .seams-transaction-group legend + * {
   clear: both;
 }
-.seams-transaction-group > p {
+[data-seams-root].seams-theme-provider .seams-transaction-group > p {
   margin: 6px 0 20px;
   color: var(--seams-colors-textSecondary);
   font-size: 14px;
   line-height: 1.5;
 }
-.seams-transaction-choices {
+[data-seams-root].seams-theme-provider .seams-transaction-choices {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px;
 }
-.seams-transaction-choice {
+[data-seams-root].seams-theme-provider button.seams-transaction-choice {
   display: flex;
   flex-direction: column;
   gap: 14px;
@@ -575,27 +1897,27 @@
     border-color 120ms ease,
     background-color 120ms ease;
 }
-.seams-transaction-choice-text {
+[data-seams-root].seams-theme-provider .seams-transaction-choice-text {
   display: grid;
   gap: 6px;
   padding-inline: 4px;
 }
-.seams-transaction-choice-head {
+[data-seams-root].seams-theme-provider .seams-transaction-choice-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
 }
-.seams-transaction-choice strong {
+[data-seams-root].seams-theme-provider button.seams-transaction-choice strong {
   font-size: 15px;
   font-weight: 600;
 }
-.seams-transaction-choice-description {
+[data-seams-root].seams-theme-provider .seams-transaction-choice-description {
   color: var(--seams-colors-textSecondary);
   font-size: 13px;
   line-height: 1.5;
 }
-.seams-transaction-choice-indicator {
+[data-seams-root].seams-theme-provider .seams-transaction-choice-indicator {
   flex-shrink: 0;
   width: 18px;
   height: 18px;
@@ -603,21 +1925,24 @@
   border: 1.5px solid var(--seams-colors-borderPrimary);
   border-radius: 50%;
 }
-.seams-transaction-choice[aria-pressed='true'] {
+[data-seams-root].seams-theme-provider button.seams-transaction-choice[aria-pressed='true'] {
   border-color: var(--seams-colors-primary);
   box-shadow: inset 0 0 0 1px var(--seams-colors-primary);
 }
-.seams-transaction-choice[aria-pressed='true'] .seams-transaction-choice-indicator {
+[data-seams-root].seams-theme-provider
+  button.seams-transaction-choice[aria-pressed='true']
+  .seams-transaction-choice-indicator {
   border: 5px solid var(--seams-colors-primary);
 }
-.seams-transaction-choice:hover:not(:disabled):not([aria-pressed='true']) {
+[data-seams-root].seams-theme-provider
+  button.seams-transaction-choice:hover:not(:disabled):not([aria-pressed='true']) {
   background: var(--seams-colors-surface);
 }
-.seams-transaction-choice:focus-visible {
+[data-seams-root].seams-theme-provider button.seams-transaction-choice:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 4px;
 }
-.seams-transaction-choice:disabled {
+[data-seams-root].seams-theme-provider button.seams-transaction-choice:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
@@ -625,22 +1950,22 @@
 /* The switch row uses the card grid, so its edge lines up with the cards. It has its
    own class: the transaction confirmer's review is .seams-transaction-review, and a
    page that loads both must not lay that review out on this grid. */
-.seams-transaction-review-setting {
+[data-seams-root].seams-theme-provider .seams-transaction-review-setting {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px 16px;
 }
-.seams-transaction-review-setting > * {
+[data-seams-root].seams-theme-provider .seams-transaction-review-setting > * {
   grid-column: span 2;
 }
-.seams-transaction-review-setting > p {
+[data-seams-root].seams-theme-provider .seams-transaction-review-setting > p {
   margin: 0;
   padding-inline: 4px;
   color: var(--seams-colors-textSecondary);
   font-size: 13px;
   line-height: 1.5;
 }
-.seams-transaction-review-row {
+[data-seams-root].seams-theme-provider .seams-transaction-review-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -650,20 +1975,20 @@
   border-radius: 16px;
   background: var(--seams-colors-colorBackground);
 }
-.seams-transaction-review-text {
+[data-seams-root].seams-theme-provider .seams-transaction-review-text {
   display: grid;
   gap: 6px;
 }
-.seams-transaction-review-text strong {
+[data-seams-root].seams-theme-provider .seams-transaction-review-text strong {
   font-size: 16px;
   font-weight: 600;
 }
-.seams-transaction-review-text > span {
+[data-seams-root].seams-theme-provider .seams-transaction-review-text > span {
   color: var(--seams-colors-textSecondary);
   font-size: 14px;
   line-height: 1.5;
 }
-.seams-transaction-switch {
+[data-seams-root].seams-theme-provider button.seams-transaction-switch {
   position: relative;
   flex-shrink: 0;
   width: 44px;
@@ -675,7 +2000,7 @@
   cursor: pointer;
   transition: background-color 150ms ease;
 }
-.seams-transaction-switch > span {
+[data-seams-root].seams-theme-provider button.seams-transaction-switch > span {
   position: absolute;
   inset-block-start: 3px;
   inset-inline-start: 3px;
@@ -686,32 +2011,34 @@
   box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
   transition: transform 150ms ease;
 }
-.seams-transaction-switch[aria-checked='true'] {
+[data-seams-root].seams-theme-provider button.seams-transaction-switch[aria-checked='true'] {
   background: var(--seams-colors-primary);
 }
-.seams-transaction-switch[aria-checked='true'] > span {
+[data-seams-root].seams-theme-provider button.seams-transaction-switch[aria-checked='true'] > span {
   transform: translateX(18px);
 }
-[dir='rtl'] .seams-transaction-switch[aria-checked='true'] > span {
+[data-seams-root].seams-theme-provider
+  button.seams-transaction-switch[aria-checked='true']:dir(rtl)
+  > span {
   transform: translateX(-18px);
 }
-.seams-transaction-switch:focus-visible {
+[data-seams-root].seams-theme-provider button.seams-transaction-switch:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 3px;
 }
-.seams-transaction-switch:disabled {
+[data-seams-root].seams-theme-provider button.seams-transaction-switch:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 @media (prefers-reduced-motion: reduce) {
-  .seams-transaction-switch,
-  .seams-transaction-switch > span {
+  [data-seams-root].seams-theme-provider button.seams-transaction-switch,
+  [data-seams-root].seams-theme-provider button.seams-transaction-switch > span {
     transition: none;
   }
 }
 
 /* The preview draws a page with the review surface on top of it. */
-.seams-transaction-preview {
+[data-seams-root].seams-theme-provider .seams-transaction-preview {
   position: relative;
   display: block;
   aspect-ratio: 16 / 9;
@@ -720,38 +2047,40 @@
   background: var(--seams-colors-surface);
   color: var(--seams-colors-textSecondary);
 }
-.seams-transaction-choice[aria-pressed='true'] .seams-transaction-preview {
+[data-seams-root].seams-theme-provider
+  button.seams-transaction-choice[aria-pressed='true']
+  .seams-transaction-preview {
   color: var(--seams-colors-textPrimary);
 }
-.seams-tp-page {
+[data-seams-root].seams-theme-provider .seams-tp-page {
   position: absolute;
   inset: 14% 12%;
   display: grid;
   align-content: start;
   gap: 8%;
 }
-.seams-tp-page i,
-.seams-tp-panel i {
+[data-seams-root].seams-theme-provider .seams-tp-page i,
+[data-seams-root].seams-theme-provider .seams-tp-panel i {
   display: block;
   height: 6px;
   border-radius: 3px;
   background: currentColor;
   opacity: 0.18;
 }
-.seams-tp-page i:nth-child(1) {
+[data-seams-root].seams-theme-provider .seams-tp-page i:nth-child(1) {
   width: 38%;
   height: 8px;
   opacity: 0.28;
 }
-.seams-tp-page i:nth-child(3) {
+[data-seams-root].seams-theme-provider .seams-tp-page i:nth-child(3) {
   width: 72%;
 }
-.seams-tp-scrim {
+[data-seams-root].seams-theme-provider .seams-tp-scrim {
   position: absolute;
   inset: 0;
   background: rgb(0 0 0 / 0.1);
 }
-.seams-tp-panel {
+[data-seams-root].seams-theme-provider .seams-tp-panel {
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -762,11 +2091,11 @@
   background: var(--seams-colors-colorBackground);
   box-shadow: 0 6px 16px rgb(0 0 0 / 0.08);
 }
-.seams-tp-panel i:nth-child(1) {
+[data-seams-root].seams-theme-provider .seams-tp-panel i:nth-child(1) {
   width: 60%;
   opacity: 0.32;
 }
-.seams-tp-panel b {
+[data-seams-root].seams-theme-provider .seams-tp-panel b {
   display: block;
   align-self: flex-end;
   width: 48%;
@@ -775,10 +2104,10 @@
   border-radius: 4px;
   background: var(--seams-colors-primary);
 }
-[data-preview='modal'] .seams-tp-panel {
+[data-seams-root].seams-theme-provider [data-preview='modal'] .seams-tp-panel {
   inset: 18% 26%;
 }
-[data-preview='drawer'] .seams-tp-panel {
+[data-seams-root].seams-theme-provider [data-preview='drawer'] .seams-tp-panel {
   inset-block: 0;
   inset-inline: auto 0;
   width: 40%;
@@ -789,44 +2118,49 @@
 }
 
 @media (max-width: 600px) {
-  [data-presentation='page'] .seams-transaction-review-setting > * {
+  [data-seams-root].seams-theme-provider
+    [data-presentation='page']
+    .seams-transaction-review-setting
+    > * {
     grid-column: 1 / -1;
   }
-  [data-presentation='page'] .seams-transaction-review-row {
+  [data-seams-root].seams-theme-provider [data-presentation='page'] .seams-transaction-review-row {
     padding: 16px;
   }
-  [data-presentation='page'] .seams-transaction-choices {
+  [data-seams-root].seams-theme-provider [data-presentation='page'] .seams-transaction-choices {
     grid-template-columns: minmax(0, 1fr);
     gap: 12px;
   }
-  [data-presentation='page'] .seams-transaction-choice {
+  [data-seams-root].seams-theme-provider
+    [data-presentation='page']
+    button.seams-transaction-choice {
     flex-direction: row;
     align-items: center;
     gap: 14px;
     padding: 10px 14px 10px 10px;
   }
-  [data-presentation='page'] .seams-transaction-preview {
+  [data-seams-root].seams-theme-provider [data-presentation='page'] .seams-transaction-preview {
     flex-shrink: 0;
     width: 104px;
   }
-  [data-presentation='page'] .seams-transaction-choice-text {
+  [data-seams-root].seams-theme-provider [data-presentation='page'] .seams-transaction-choice-text {
     flex: 1;
     min-width: 0;
     padding-inline: 0;
   }
-  [data-presentation='page'] .seams-tp-panel {
+  [data-seams-root].seams-theme-provider [data-presentation='page'] .seams-tp-panel {
     gap: 4px;
     padding: 6px;
     border-radius: 5px;
   }
-  [data-presentation='page'] .seams-tp-page i,
-  [data-presentation='page'] .seams-tp-panel i {
+  [data-seams-root].seams-theme-provider [data-presentation='page'] .seams-tp-page i,
+  [data-seams-root].seams-theme-provider [data-presentation='page'] .seams-tp-panel i {
     height: 4px;
   }
-  [data-presentation='page'] .seams-tp-page i:nth-child(1) {
+  [data-seams-root].seams-theme-provider [data-presentation='page'] .seams-tp-page i:nth-child(1) {
     height: 5px;
   }
-  [data-presentation='page'] .seams-tp-panel b {
+  [data-seams-root].seams-theme-provider [data-presentation='page'] .seams-tp-panel b {
     height: 6px;
     border-radius: 2px;
   }
@@ -834,42 +2168,50 @@
 
 /* The account menu is about 300px wide: three small cards per row, labels
    only, and smaller drawings. */
-.seams-transaction-page[data-presentation='menu'] {
+[data-seams-root].seams-theme-provider .seams-transaction-page[data-presentation='menu'] {
   gap: 16px;
   padding-bottom: 4px;
 }
-[data-presentation='menu'] .seams-transaction-review-setting + .seams-transaction-group {
+[data-seams-root].seams-theme-provider
+  [data-presentation='menu']
+  .seams-transaction-review-setting
+  + .seams-transaction-group {
   padding-top: 16px;
 }
-[data-presentation='menu'] .seams-transaction-group legend {
+[data-seams-root].seams-theme-provider [data-presentation='menu'] .seams-transaction-group legend {
   font-size: 14px;
 }
-[data-presentation='menu'] .seams-transaction-group > p {
+[data-seams-root].seams-theme-provider [data-presentation='menu'] .seams-transaction-group > p {
   margin: 2px 0 10px;
   font-size: 12px;
   line-height: 1.4;
 }
-[data-presentation='menu'] .seams-transaction-choices {
+[data-seams-root].seams-theme-provider [data-presentation='menu'] .seams-transaction-choices {
   gap: 8px;
 }
-[data-presentation='menu'] .seams-transaction-choice {
+[data-seams-root].seams-theme-provider [data-presentation='menu'] button.seams-transaction-choice {
   gap: 8px;
   padding: 5px 5px 8px;
   border-radius: 12px;
 }
-[data-presentation='menu'] .seams-transaction-choice-text {
+[data-seams-root].seams-theme-provider [data-presentation='menu'] .seams-transaction-choice-text {
   padding-inline: 3px;
 }
-[data-presentation='menu'] .seams-transaction-choice {
+[data-seams-root].seams-theme-provider [data-presentation='menu'] button.seams-transaction-choice {
   position: relative;
 }
-[data-presentation='menu'] .seams-transaction-choice strong {
+[data-seams-root].seams-theme-provider
+  [data-presentation='menu']
+  button.seams-transaction-choice
+  strong {
   font-size: 12px;
   font-weight: 500;
   line-height: 1.3;
 }
 /* The dot sits on the drawing's corner, so a long label gets the full width. */
-[data-presentation='menu'] .seams-transaction-choice-indicator {
+[data-seams-root].seams-theme-provider
+  [data-presentation='menu']
+  .seams-transaction-choice-indicator {
   position: absolute;
   inset-block-start: 10px;
   inset-inline-end: 10px;
@@ -877,55 +2219,75 @@
   height: 14px;
   background: var(--seams-colors-colorBackground);
 }
-[data-presentation='menu'] .seams-transaction-choice[aria-pressed='true'] .seams-transaction-choice-indicator {
+[data-seams-root].seams-theme-provider
+  [data-presentation='menu']
+  button.seams-transaction-choice[aria-pressed='true']
+  .seams-transaction-choice-indicator {
   border-width: 4px;
 }
-[data-presentation='menu'] .seams-transaction-preview {
+[data-seams-root].seams-theme-provider [data-presentation='menu'] .seams-transaction-preview {
   border-radius: 8px;
 }
-[data-presentation='menu'] .seams-tp-panel {
+[data-seams-root].seams-theme-provider [data-presentation='menu'] .seams-tp-panel {
   gap: 3px;
   padding: 5px;
   border-radius: 4px;
 }
-[data-presentation='menu'] .seams-tp-page i,
-[data-presentation='menu'] .seams-tp-panel i {
+[data-seams-root].seams-theme-provider [data-presentation='menu'] .seams-tp-page i,
+[data-seams-root].seams-theme-provider [data-presentation='menu'] .seams-tp-panel i {
   height: 3px;
   border-radius: 2px;
 }
-[data-presentation='menu'] .seams-tp-page i:nth-child(1) {
+[data-seams-root].seams-theme-provider [data-presentation='menu'] .seams-tp-page i:nth-child(1) {
   height: 4px;
 }
-[data-presentation='menu'] .seams-tp-panel b {
+[data-seams-root].seams-theme-provider [data-presentation='menu'] .seams-tp-panel b {
   height: 5px;
   border-radius: 2px;
 }
-[data-presentation='menu'] [data-preview='drawer'] .seams-tp-panel {
+[data-seams-root].seams-theme-provider
+  [data-presentation='menu']
+  [data-preview='drawer']
+  .seams-tp-panel {
   padding-top: 7px;
 }
-[data-presentation='menu'] .seams-transaction-review-setting > * {
+[data-seams-root].seams-theme-provider
+  [data-presentation='menu']
+  .seams-transaction-review-setting
+  > * {
   grid-column: 1 / -1;
 }
-[data-presentation='menu'] .seams-transaction-review-setting {
+[data-seams-root].seams-theme-provider
+  [data-presentation='menu']
+  .seams-transaction-review-setting {
   gap: 8px;
 }
-[data-presentation='menu'] .seams-transaction-review-row {
+[data-seams-root].seams-theme-provider [data-presentation='menu'] .seams-transaction-review-row {
   gap: 14px;
   padding: 14px;
   border-radius: 12px;
 }
-[data-presentation='menu'] .seams-transaction-review-text strong {
+[data-seams-root].seams-theme-provider
+  [data-presentation='menu']
+  .seams-transaction-review-text
+  strong {
   font-size: 14px;
 }
-[data-presentation='menu'] .seams-transaction-review-text > span,
-[data-presentation='menu'] .seams-transaction-review-setting > p {
+[data-seams-root].seams-theme-provider
+  [data-presentation='menu']
+  .seams-transaction-review-text
+  > span,
+[data-seams-root].seams-theme-provider
+  [data-presentation='menu']
+  .seams-transaction-review-setting
+  > p {
   font-size: 12px;
   line-height: 1.4;
 }
 
 /* UserAccountButton Component Styles */
 
-.seams-user-account-button-root {
+[data-seams-root].seams-theme-provider .seams-user-account-button-root {
   width: fit-content;
   display: flex;
   flex-direction: row;
@@ -933,7 +2295,7 @@
   align-items: center;
 }
 
-.seams-user-account-button-trigger {
+[data-seams-root].seams-theme-provider .seams-user-account-button-trigger {
   display: flex;
   align-items: center;
   gap: 0;
@@ -943,60 +2305,68 @@
   cursor: pointer;
 }
 
-.seams-user-account-button-trigger .hide-username {
+[data-seams-root].seams-theme-provider .seams-user-account-button-trigger .hide-username {
   padding: 4px;
 }
 
-.seams-user-account-button-trigger:hover {
+[data-seams-root].seams-theme-provider .seams-user-account-button-trigger:hover {
   color: var(--seams-colors-textPrimary);
   transition: color 0.1s ease;
 }
 
-.seams-user-account-button-trigger:hover svg {
+[data-seams-root].seams-theme-provider .seams-user-account-button-trigger:hover svg {
   color: inherit;
 }
 
 /* Profile Button Trigger States */
-.seams-user-account-button-trigger.closed .seams-user-account--user-content {
+[data-seams-root].seams-theme-provider
+  .seams-user-account-button-trigger.closed
+  .seams-user-account--user-content {
   gap: 0px;
 }
 
-.seams-user-account-button-trigger.hide-username {
+[data-seams-root].seams-theme-provider .seams-user-account-button-trigger.hide-username {
   padding: 4px;
 }
 
-.seams-user-account-button-trigger.open .seams-user-account--user-content {
+[data-seams-root].seams-theme-provider
+  .seams-user-account-button-trigger.open
+  .seams-user-account--user-content {
   gap: 4px;
   padding: 8px 12px 8px 8px;
   width: 100%;
 }
 
 /* Avatar States and CSS animations */
-.seams-user-account--avatar.shrunk {
+[data-seams-root].seams-theme-provider .seams-user-account--avatar.shrunk {
   transform: scale(0.8);
 }
 
-.seams-user-account--avatar.hide-username {
+[data-seams-root].seams-theme-provider .seams-user-account--avatar.hide-username {
   margin-right: 0px;
 }
 
-.seams-user-account--avatar.expanded {
+[data-seams-root].seams-theme-provider .seams-user-account--avatar.expanded {
   transform: scale(1);
 }
 
-.seams-user-account--avatar.shrunk svg {
+[data-seams-root].seams-theme-provider .seams-user-account--avatar.shrunk svg {
   transform: scale(1.1);
   color: var(--seams-colors-textPrimary);
 }
 
-.seams-user-account--avatar.expanded svg {
+[data-seams-root].seams-theme-provider .seams-user-account--avatar.expanded svg {
   transform: scale(1.1);
   color: var(--seams-colors-textSecondary); /* same as other MenuItem svg icons */
 }
 
 /* User Details States */
-.seams-user-account--user-details .seams-user-account--account-id.hidden,
-.seams-user-account--user-details .seams-user-account--email.hidden {
+[data-seams-root].seams-theme-provider
+  .seams-user-account--user-details
+  .seams-user-account--account-id.hidden,
+[data-seams-root].seams-theme-provider
+  .seams-user-account--user-details
+  .seams-user-account--email.hidden {
   position: absolute;
   opacity: 0;
   transform: scale(0.7);
@@ -1012,8 +2382,12 @@
     max-height 0s ease;
 }
 
-.seams-user-account--user-details .seams-user-account--account-id.visible,
-.seams-user-account--user-details .seams-user-account--email.visible {
+[data-seams-root].seams-theme-provider
+  .seams-user-account--user-details
+  .seams-user-account--account-id.visible,
+[data-seams-root].seams-theme-provider
+  .seams-user-account--user-details
+  .seams-user-account--email.visible {
   opacity: 1;
   display: block;
   transform: scale(1);
@@ -1027,22 +2401,28 @@
 }
 
 /* Username is always visible */
-.seams-user-account--user-details .seams-user-account--username {
+[data-seams-root].seams-theme-provider
+  .seams-user-account--user-details
+  .seams-user-account--username {
   display: block;
   transition: margin-top 0.2s ease;
 }
 
 /* Username margin animation based on open/closed state */
-.seams-user-account-button-trigger.closed .seams-user-account--username {
+[data-seams-root].seams-theme-provider
+  .seams-user-account-button-trigger.closed
+  .seams-user-account--username {
   margin-top: 0rem;
 }
 
-.seams-user-account-button-trigger.open .seams-user-account--username {
+[data-seams-root].seams-theme-provider
+  .seams-user-account-button-trigger.open
+  .seams-user-account--username {
   margin-top: 0rem;
 }
 
 /* User details container is always visible to show username */
-.seams-user-account--user-details {
+[data-seams-root].seams-theme-provider .seams-user-account--user-details {
   display: block;
   transform: translateY(0);
   transition: transform 100ms linear;
@@ -1051,14 +2431,14 @@
   min-width: 0;
 }
 
-.seams-user-account--user-content {
+[data-seams-root].seams-theme-provider .seams-user-account--user-content {
   display: flex;
   align-items: center;
   gap: 12px;
   transition: gap 0.1s ease;
 }
 
-.seams-user-account--avatar {
+[data-seams-root].seams-theme-provider .seams-user-account--avatar {
   width: 40px;
   height: 40px;
   margin-right: 4px;
@@ -1069,7 +2449,7 @@
   justify-content: center;
 }
 
-.seams-user-account--username {
+[data-seams-root].seams-theme-provider .seams-user-account--username {
   font-weight: 500;
   color: var(--seams-colors-textPrimary);
   font-size: 14px;
@@ -1082,8 +2462,8 @@
   white-space: nowrap;
 }
 
-.seams-user-account--account-id,
-.seams-user-account--email {
+[data-seams-root].seams-theme-provider .seams-user-account--account-id,
+[data-seams-root].seams-theme-provider .seams-user-account--email {
   font-size: 12px;
   color: var(--seams-colors-textSecondary);
   margin: 0;
@@ -1098,11 +2478,11 @@
     transform 0s ease;
 }
 
-.seams-user-account--email {
+[data-seams-root].seams-theme-provider .seams-user-account--email {
   color: var(--seams-colors-textMuted);
 }
 
-.seams-profile-button-morphable {
+[data-seams-root].seams-theme-provider .seams-profile-button-morphable {
   box-sizing: border-box;
   position: relative;
   background: var(--seams-colors-colorBackground);
@@ -1117,7 +2497,10 @@
   width: fit-content;
   max-width: 100%;
 }
-.seams-profile-button-morphable.open {
+[data-seams-root].seams-theme-provider .seams-profile-button-morphable * {
+  box-sizing: border-box;
+}
+[data-seams-root].seams-theme-provider .seams-profile-button-morphable.open {
   width: 420px;
   overflow: hidden;
   /* The panel replaces the Settings button; a short fade keeps that from
@@ -1129,14 +2512,14 @@
     opacity: 0;
   }
 }
-.seams-account-resize {
+[data-seams-root].seams-theme-provider .seams-account-resize {
   overflow: hidden;
 }
-.seams-account-panel-content {
+[data-seams-root].seams-theme-provider .seams-account-panel-content {
   width: 100%;
   display: flow-root;
 }
-.seams-account-origin {
+[data-seams-root].seams-theme-provider .seams-account-origin {
   display: flex;
   align-items: center;
   gap: 9px;
@@ -1144,12 +2527,12 @@
   font-size: 13px;
   color: var(--seams-colors-textSecondary);
 }
-.seams-account-origin > span {
+[data-seams-root].seams-theme-provider .seams-account-origin > span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.seams-account-origin > button {
+[data-seams-root].seams-theme-provider button.seams-account-close {
   margin-left: auto;
   background: none;
   border: 0;
@@ -1161,10 +2544,27 @@
   place-items: center;
   cursor: pointer;
 }
-.seams-account-main {
+[data-seams-root].seams-theme-provider .seams-account-origin > svg {
+  width: 14px;
+  height: 14px;
+}
+[data-seams-root].seams-theme-provider button.seams-account-close > svg,
+[data-seams-root].seams-theme-provider button.seams-account-back > svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+}
+[data-seams-root].seams-theme-provider button.seams-account-close > svg {
+  stroke-width: 1.5;
+}
+[data-seams-root].seams-theme-provider button.seams-account-back > svg {
+  stroke-width: 1.75;
+}
+[data-seams-root].seams-theme-provider .seams-account-main {
   padding: 16px 20px;
 }
-.seams-account-heading h2 {
+[data-seams-root].seams-theme-provider .seams-account-heading h2 {
   font: inherit;
   font-size: 24px;
   font-weight: 600;
@@ -1173,16 +2573,16 @@
   margin: 0;
   color: var(--seams-colors-textPrimary);
 }
-.seams-account-heading {
+[data-seams-root].seams-theme-provider .seams-account-heading {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 10px;
 }
-.seams-account-heading h2:focus {
+[data-seams-root].seams-theme-provider .seams-account-heading h2:focus {
   outline: none;
 }
-.seams-account-back {
+[data-seams-root].seams-theme-provider button.seams-account-back {
   width: 24px;
   height: 30px;
   padding: 0;
@@ -1195,7 +2595,7 @@
   cursor: pointer;
   flex-shrink: 0;
 }
-.seams-account-identity {
+[data-seams-root].seams-theme-provider .seams-account-identity {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -1204,7 +2604,7 @@
   border-radius: 12px;
   background: var(--seams-colors-surface2);
 }
-.seams-account-avatar {
+[data-seams-root].seams-theme-provider .seams-account-avatar {
   display: grid;
   place-items: center;
   width: 36px;
@@ -1218,20 +2618,20 @@
   color: var(--seams-colors-textSecondary);
   flex-shrink: 0;
 }
-.seams-account-identity > div {
+[data-seams-root].seams-theme-provider .seams-account-identity > div {
   min-width: 0;
   overflow-wrap: anywhere;
 }
-.seams-account-identity strong {
+[data-seams-root].seams-theme-provider .seams-account-identity strong {
   font-size: 15px;
   font-weight: 500;
 }
-.seams-account-identity small {
+[data-seams-root].seams-theme-provider .seams-account-identity small {
   display: block;
   color: var(--seams-colors-textSecondary);
   margin-top: 4px;
 }
-.seams-account-footer {
+[data-seams-root].seams-theme-provider .seams-account-footer {
   border-top: 1px solid color-mix(in srgb, var(--seams-colors-borderPrimary) 60%, transparent);
   display: flex;
   justify-content: center;
@@ -1243,18 +2643,20 @@
   line-height: 16px;
   letter-spacing: 0.01em;
 }
-.seams-account-wordmark {
+[data-seams-root].seams-theme-provider .seams-account-wordmark {
   flex: none;
+  fill: currentColor;
+  stroke: none;
   width: 50px;
   height: 10px;
 }
-.seams-account-description {
+[data-seams-root].seams-theme-provider .seams-account-description {
   font-size: 14px;
   line-height: 1.5;
   color: var(--seams-colors-textSecondary);
   margin: 0 0 16px;
 }
-.seams-account-action {
+[data-seams-root].seams-theme-provider button.seams-account-action {
   display: flex;
   width: 100%;
   align-items: center;
@@ -1275,7 +2677,7 @@
     border-color 150ms ease,
     transform 120ms ease;
 }
-.seams-account-action:hover:not(:disabled) {
+[data-seams-root].seams-theme-provider button.seams-account-action:hover:not(:disabled) {
   background: var(--seams-colors-surface2);
   border-color: color-mix(
     in srgb,
@@ -1283,15 +2685,15 @@
     var(--seams-colors-borderPrimary)
   );
 }
-.seams-account-action:active:not(:disabled) {
+[data-seams-root].seams-theme-provider button.seams-account-action:active:not(:disabled) {
   transform: scale(0.98);
 }
-.seams-account-action.primary {
+[data-seams-root].seams-theme-provider button.seams-account-action.primary {
   background: var(--seams-colors-textPrimary);
   color: var(--seams-colors-colorBackground);
   border-color: transparent;
 }
-.seams-account-action.primary:hover:not(:disabled) {
+[data-seams-root].seams-theme-provider button.seams-account-action.primary:hover:not(:disabled) {
   background: color-mix(
     in srgb,
     var(--seams-colors-textPrimary) 84%,
@@ -1299,64 +2701,64 @@
   );
   border-color: transparent;
 }
-.seams-account-action:disabled {
+[data-seams-root].seams-theme-provider button.seams-account-action:disabled {
   opacity: 0.5;
   cursor: default;
 }
 @media (prefers-reduced-motion: reduce) {
-  .seams-account-action {
+  [data-seams-root].seams-theme-provider button.seams-account-action {
     transition: none;
   }
 }
-.seams-account-note {
+[data-seams-root].seams-theme-provider .seams-account-note {
   color: var(--seams-colors-textSecondary);
   font-size: 12px;
   line-height: 1.5;
   margin: 10px 0 0;
 }
-.seams-account-inset {
+[data-seams-root].seams-theme-provider .seams-account-inset {
   padding: 10px 12px;
   background: var(--seams-colors-surface2);
   border-radius: 12px;
   font-size: 13px;
   line-height: 1.5;
 }
-.seams-account-detail-row {
+[data-seams-root].seams-theme-provider .seams-account-detail-row {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   padding: 6px 0;
 }
-.seams-account-detail-row dt {
+[data-seams-root].seams-theme-provider .seams-account-detail-row dt {
   color: var(--seams-colors-textSecondary);
 }
-.seams-account-detail-row dd {
+[data-seams-root].seams-theme-provider .seams-account-detail-row dd {
   margin: 0;
   text-align: right;
   overflow-wrap: anywhere;
 }
-.seams-account-device-hero {
+[data-seams-root].seams-theme-provider .seams-account-device-hero {
   text-align: center;
   padding: 8px 0 12px;
 }
-.seams-account-device-hero .seams-account-avatar {
+[data-seams-root].seams-theme-provider .seams-account-device-hero .seams-account-avatar {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   margin: 0 auto 8px;
 }
-.seams-account-device-hero h3 {
+[data-seams-root].seams-theme-provider .seams-account-device-hero h3 {
   font-size: 24px;
   font-weight: 500;
   letter-spacing: -0.6px;
   margin: 0 0 6px;
 }
-.seams-account-device-hero p {
+[data-seams-root].seams-theme-provider .seams-account-device-hero p {
   color: var(--seams-colors-textSecondary);
   font-size: 13px;
   margin: 0;
 }
-.seams-account-method-button {
+[data-seams-root].seams-theme-provider button.seams-account-method-button {
   position: relative;
   isolation: isolate;
   display: flex;
@@ -1374,7 +2776,7 @@
 }
 /* The hover shade bleeds past the row edges so the content and the
    separators stay aligned with the rest of the screen. */
-.seams-account-method-button::before {
+[data-seams-root].seams-theme-provider button.seams-account-method-button::before {
   content: '';
   position: absolute;
   z-index: -1;
@@ -1384,59 +2786,65 @@
   opacity: 0;
   transition: opacity 150ms ease;
 }
-.seams-account-method-button:hover::before,
-.seams-account-method-button:focus-visible::before {
+[data-seams-root].seams-theme-provider button.seams-account-method-button:hover::before,
+[data-seams-root].seams-theme-provider button.seams-account-method-button:focus-visible::before {
   opacity: 1;
 }
-.seams-account-method-button .seams-account-avatar {
+[data-seams-root].seams-theme-provider button.seams-account-method-button .seams-account-avatar {
   transition: background-color 150ms ease;
 }
-.seams-account-method-button:hover .seams-account-avatar,
-.seams-account-method-button:focus-visible .seams-account-avatar {
+[data-seams-root].seams-theme-provider
+  button.seams-account-method-button:hover
+  .seams-account-avatar,
+[data-seams-root].seams-theme-provider
+  button.seams-account-method-button:focus-visible
+  .seams-account-avatar {
   background: var(--seams-colors-colorBackground);
 }
-.seams-account-method-button > div {
+[data-seams-root].seams-theme-provider button.seams-account-method-button > div {
   flex: 1;
 }
-.seams-account-method-button > .seams-hover-arrow {
+[data-seams-root].seams-theme-provider button.seams-account-method-button > .seams-hover-arrow {
   margin-inline-end: 2px;
 }
-.seams-account-method-button strong {
+[data-seams-root].seams-theme-provider button.seams-account-method-button strong {
   font-size: 15px;
   font-weight: 500;
 }
-.seams-account-method-button small {
+[data-seams-root].seams-theme-provider button.seams-account-method-button small {
   display: block;
   margin-top: 4px;
   color: var(--seams-colors-textSecondary);
   font-size: 12px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .seams-account-method-button::before,
-  .seams-account-method-button .seams-account-avatar {
+  [data-seams-root].seams-theme-provider button.seams-account-method-button::before,
+  [data-seams-root].seams-theme-provider button.seams-account-method-button .seams-account-avatar {
     transition: none;
   }
 }
-.seams-account-screen .seams-dropdown-accounts-root,
-.seams-account-screen .seams-dropdown-export-keys-root {
+[data-seams-root].seams-theme-provider .seams-account-screen .seams-dropdown-accounts-root,
+[data-seams-root].seams-theme-provider .seams-account-screen .seams-dropdown-export-keys-root {
   border: 0;
   border-radius: 12px;
 }
-.seams-account-screen .seams-linked-devices-modal-body {
+[data-seams-root].seams-theme-provider .seams-account-screen .seams-linked-devices-modal-body {
   max-height: none;
   overflow: visible;
 }
-.seams-account-screen .seams-linked-devices-modal-list {
+[data-seams-root].seams-theme-provider .seams-account-screen .seams-linked-devices-modal-list {
   margin: 0;
 }
-.seams-account-screen .seams-linked-devices-modal-item {
+[data-seams-root].seams-theme-provider .seams-account-screen .seams-linked-devices-modal-item {
   background: transparent;
 }
-.seams-account-screen .seams-linked-devices-modal-item-icon {
+[data-seams-root].seams-theme-provider .seams-account-screen .seams-linked-devices-modal-item-icon {
   background: var(--seams-colors-surface2);
   border-radius: 10px;
 }
-.seams-account-screen .qr-scanner-modal[data-presentation='embedded'] {
+[data-seams-root].seams-theme-provider
+  .seams-account-screen
+  .qr-scanner-modal[data-presentation='embedded'] {
   position: static;
   inset: auto;
   width: 100%;
@@ -1447,7 +2855,10 @@
   display: block;
   animation: none;
 }
-.seams-account-screen .qr-scanner-modal[data-presentation='embedded'] .qr-scanner-panel {
+[data-seams-root].seams-theme-provider
+  .seams-account-screen
+  .qr-scanner-modal[data-presentation='embedded']
+  .qr-scanner-panel {
   width: 100%;
   max-width: 100%;
   max-height: none;
@@ -1457,40 +2868,43 @@
   box-shadow: none;
   border-radius: 0;
 }
-.seams-account-screen .qr-scanner-modal[data-presentation='embedded'] .qr-scanner-close {
+[data-seams-root].seams-theme-provider
+  .seams-account-screen
+  .qr-scanner-modal[data-presentation='embedded']
+  button.qr-scanner-close {
   display: none;
 }
-.seams-account-screen .qr-scanner-camera-container {
+[data-seams-root].seams-theme-provider .seams-account-screen .qr-scanner-camera-container {
   width: 100%;
   height: 208px;
   aspect-ratio: auto;
   border-radius: 15px;
   overflow: hidden;
 }
-.seams-account-screen .qr-scanner-video {
+[data-seams-root].seams-theme-provider .seams-account-screen .qr-scanner-video {
   /* The base video is a fixed 400px; the menu's box is narrower, which cut the
      camera off on the right and moved it from under the scan frame. */
   width: 100%;
   height: 208px;
   object-fit: cover;
 }
-.seams-account-screen .qr-scanner-instructions {
+[data-seams-root].seams-theme-provider .seams-account-screen .qr-scanner-instructions {
   color: var(--seams-colors-textSecondary);
   font-size: 12px;
   padding: 12px 0 0;
   text-align: center;
 }
-.seams-account-screen .qr-scanner-overlay {
+[data-seams-root].seams-theme-provider .seams-account-screen .qr-scanner-overlay {
   animation: none;
 }
-.seams-account-recovery-codes {
+[data-seams-root].seams-theme-provider .seams-account-recovery-codes {
   list-style: none;
   display: grid;
   gap: 8px;
   padding: 0;
   margin: 14px 0;
 }
-.seams-account-recovery-codes li {
+[data-seams-root].seams-theme-provider .seams-account-recovery-codes li {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -1498,116 +2912,133 @@
   border: 1px solid var(--seams-colors-borderPrimary);
   border-radius: 8px;
 }
-.seams-account-recovery-codes li > span {
+[data-seams-root].seams-theme-provider .seams-account-recovery-codes li > span {
   color: var(--seams-colors-textSecondary);
   font-size: 11px;
   font-variant-numeric: tabular-nums;
 }
-.seams-account-recovery-codes code {
+[data-seams-root].seams-theme-provider .seams-account-recovery-codes code {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 14px;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
 @media (prefers-reduced-motion: no-preference) {
-  .seams-account-resize {
+  [data-seams-root].seams-theme-provider .seams-account-resize {
     transition: height 240ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 }
 @media (max-width: 480px) {
-  .seams-account-main {
+  [data-seams-root].seams-theme-provider .seams-account-main {
     padding-right: 20px;
     padding-left: 20px;
   }
-  .seams-account-origin {
+  [data-seams-root].seams-theme-provider .seams-account-origin {
     padding-right: 20px;
     padding-left: 20px;
   }
 }
-.seams-account-method-list-item {
+[data-seams-root].seams-theme-provider .seams-account-method-list-item {
   list-style: none;
 }
 /* Separators go between rows only; the footer rule closes the screen. */
-.seams-account-method-list-item:last-child > .seams-account-method-button {
+[data-seams-root].seams-theme-provider
+  .seams-account-method-list-item:last-child
+  > button.seams-account-method-button {
   border-bottom: 0;
 }
-.seams-account-screen ul {
+[data-seams-root].seams-theme-provider .seams-account-screen ul {
   padding-left: 0;
 }
-.seams-account-error {
+[data-seams-root].seams-theme-provider .seams-account-error {
   color: var(--seams-colors-error, #ae3344);
   font-size: 13px;
   margin: 16px 0 0;
 }
-.seams-account-screen {
+[data-seams-root].seams-theme-provider .seams-account-screen {
   --seams-expander-surface: var(--seams-colors-surface2);
   opacity: 1;
   transition: opacity 140ms ease;
 }
 @starting-style {
-  .seams-account-screen {
+  [data-seams-root].seams-theme-provider .seams-account-screen {
     opacity: 0;
   }
 }
-.seams-profile-button-morphable {
+[data-seams-root].seams-theme-provider .seams-profile-button-morphable {
   font-family: var(--seams-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
 }
-.seams-account-screen [data-detail='true'] > .seams-linked-devices-modal-item-icon,
-.seams-account-screen [data-detail='true'] .seams-linked-devices-modal-item-main,
-.seams-account-screen [data-detail='true'] .seams-linked-devices-modal-item-detail {
+[data-seams-root].seams-theme-provider
+  .seams-account-screen
+  [data-detail='true']
+  > .seams-linked-devices-modal-item-icon,
+[data-seams-root].seams-theme-provider
+  .seams-account-screen
+  [data-detail='true']
+  .seams-linked-devices-modal-item-main,
+[data-seams-root].seams-theme-provider
+  .seams-account-screen
+  [data-detail='true']
+  .seams-linked-devices-modal-item-detail {
   display: none;
 }
-.seams-profile-dropdown-menu .seams-dropdown-menu-item {
+[data-seams-root].seams-theme-provider
+  .seams-profile-dropdown-menu
+  button.seams-dropdown-menu-item {
   transform: none;
 }
-.seams-account-identity:focus {
+[data-seams-root].seams-theme-provider .seams-account-identity:focus {
   outline: none;
 }
-.seams-account-screen .seams-transaction-page {
+[data-seams-root].seams-theme-provider .seams-account-screen .seams-transaction-page {
   margin-top: 14px;
 }
 
-.seams-account-method-tiles {
+[data-seams-root].seams-theme-provider .seams-account-method-tiles {
   list-style: none;
   padding: 0;
   margin: 16px 0 0;
   display: grid;
   gap: 8px;
 }
-.seams-account-method-tiles .seams-linked-devices-modal-item {
+[data-seams-root].seams-theme-provider
+  .seams-account-method-tiles
+  .seams-linked-devices-modal-item {
   border: 1px solid var(--seams-colors-borderPrimary);
   border-radius: 12px;
   padding: 10px;
 }
 
-.seams-account-screen .seams-dropdown-toggle-tx-settings-content {
+[data-seams-root].seams-theme-provider
+  .seams-account-screen
+  .seams-dropdown-toggle-tx-settings-content {
   padding: 8px 0;
 }
 @media (pointer: coarse) {
-  .seams-account-action {
+  [data-seams-root].seams-theme-provider button.seams-account-action {
     min-height: 44px;
   }
 }
 
-.seams-recovery-code-actions {
+[data-seams-root].seams-theme-provider .seams-recovery-code-actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
 }
-.seams-recovery-code-actions .seams-account-action {
+[data-seams-root].seams-theme-provider .seams-recovery-code-actions button.seams-account-action {
   margin-top: 0;
 }
-.seams-recovery-code-action-status {
+[data-seams-root].seams-theme-provider .seams-recovery-code-action-status {
   margin: 6px 0 0;
   font-size: 12px;
   color: var(--seams-colors-textSecondary);
 }
 
-.seams-recovery-code-action-status:empty {
+[data-seams-root].seams-theme-provider .seams-recovery-code-action-status:empty {
   margin: 0;
 }
 
-.seams-account-recovery-acknowledgement {
+[data-seams-root].seams-theme-provider .seams-account-recovery-acknowledgement {
   display: flex;
   align-items: center;
   gap: 10px;
@@ -1619,7 +3050,7 @@
   line-height: 1.45;
   cursor: pointer;
 }
-.seams-account-recovery-acknowledgement input {
+[data-seams-root].seams-theme-provider .seams-account-recovery-acknowledgement input {
   width: 16px;
   height: 16px;
   margin: 0;
@@ -1627,16 +3058,52 @@
   accent-color: var(--seams-colors-textPrimary);
 }
 
-.seams-settings-page {
+[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-modal {
+  display: none;
+  position: fixed;
+  inset: 0;
+  box-sizing: border-box;
+  width: min(420px, calc(100vw - 32px));
+  height: fit-content;
+  min-width: 0;
+  min-height: 0;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100dvh - 32px);
+  margin: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 27px;
+  outline: none;
+  overflow: auto;
+  overscroll-behavior: contain;
+  background: transparent;
+  color: var(--seams-colors-textPrimary);
+  box-shadow: none;
+}
+[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-modal[open] {
+  display: block;
+}
+[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-modal::backdrop {
+  background: rgb(0 0 0 / 0.26);
+}
+[data-seams-root].seams-theme-provider .seams-account-modal .seams-profile-button-morphable.open {
+  width: 100%;
+}
+html:has(dialog[data-seams-root].seams-account-modal[open]) {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+
+[data-seams-root].seams-theme-provider .seams-settings-page {
   min-height: 100dvh;
   color: var(--seams-colors-textPrimary);
   background: var(--seams-colors-colorBackground);
   font-family: var(--seams-fonts-sans, system-ui, sans-serif);
 }
-.seams-settings-page * {
+[data-seams-root].seams-theme-provider .seams-settings-page * {
   box-sizing: border-box;
 }
-.seams-settings-header {
+[data-seams-root].seams-theme-provider .seams-settings-header {
   display: flex;
   align-items: center;
   gap: 24px;
@@ -1644,17 +3111,19 @@
   padding: 20px 36px;
   border-bottom: 1px solid var(--seams-colors-borderPrimary);
 }
-.seams-settings-wordmark {
+[data-seams-root].seams-theme-provider .seams-settings-wordmark {
+  fill: currentColor;
+  stroke: none;
   width: 108px;
   height: auto;
   display: block;
 }
-.seams-settings-header > span {
+[data-seams-root].seams-theme-provider .seams-settings-header > span {
   padding-inline-start: 24px;
   border-inline-start: 1px solid var(--seams-colors-borderPrimary);
   color: var(--seams-colors-textSecondary);
 }
-.seams-settings-theme-toggle {
+[data-seams-root].seams-theme-provider button.seams-settings-theme-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1670,54 +3139,54 @@
   font: inherit;
   cursor: pointer;
 }
-.seams-settings-theme-toggle:hover {
+[data-seams-root].seams-theme-provider button.seams-settings-theme-toggle:hover {
   background: var(--seams-colors-surface2);
 }
-.seams-settings-theme-toggle svg {
+[data-seams-root].seams-theme-provider button.seams-settings-theme-toggle svg {
   flex-shrink: 0;
 }
 @media (max-width: 480px) {
-  .seams-settings-theme-toggle > span {
+  [data-seams-root].seams-theme-provider button.seams-settings-theme-toggle > span {
     display: none;
   }
 }
-.seams-settings-shell {
+[data-seams-root].seams-theme-provider .seams-settings-shell {
   display: grid;
   grid-template-columns: 320px minmax(0, 1fr);
   min-height: calc(100dvh - 80px);
 }
-.seams-settings-sidebar {
+[data-seams-root].seams-theme-provider .seams-settings-sidebar {
   padding: 28px 18px 20px;
   border-inline-end: 1px solid var(--seams-colors-borderPrimary);
 }
-.seams-settings-identity {
+[data-seams-root].seams-theme-provider .seams-settings-identity {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 0 14px 28px;
   overflow-wrap: anywhere;
 }
-.seams-settings-identity > svg {
+[data-seams-root].seams-theme-provider .seams-settings-identity > svg {
   width: 28px;
   height: 28px;
   flex-shrink: 0;
 }
-.seams-settings-identity strong {
+[data-seams-root].seams-theme-provider .seams-settings-identity strong {
   display: block;
   font-size: 14px;
   font-weight: 500;
 }
-.seams-settings-identity small {
+[data-seams-root].seams-theme-provider .seams-settings-identity small {
   display: block;
   margin-top: 4px;
   color: var(--seams-colors-textSecondary);
 }
-.seams-settings-navigation {
+[data-seams-root].seams-theme-provider .seams-settings-navigation {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
-.seams-settings-navigation button {
+[data-seams-root].seams-theme-provider .seams-settings-navigation button {
   width: 100%;
   display: flex;
   align-items: center;
@@ -1732,84 +3201,84 @@
   font: inherit;
   cursor: pointer;
 }
-.seams-settings-navigation button:hover {
+[data-seams-root].seams-theme-provider .seams-settings-navigation button:hover {
   background: var(--seams-colors-surface);
 }
-.seams-settings-navigation button[aria-current='page'] {
+[data-seams-root].seams-theme-provider .seams-settings-navigation button[aria-current='page'] {
   background: var(--seams-colors-surface2);
 }
 /* A row chosen from the open mobile list blinks once, highlight off then on,
    before the list closes (blinkMenuItem). */
-.seams-settings-navigation button[data-blink='off'] {
+[data-seams-root].seams-theme-provider .seams-settings-navigation button[data-blink='off'] {
   background: transparent;
 }
-.seams-settings-navigation button[data-blink='on'] {
+[data-seams-root].seams-theme-provider .seams-settings-navigation button[data-blink='on'] {
   background: var(--seams-colors-surface);
 }
-.seams-settings-theme-toggle:focus-visible,
-.seams-settings-navigation button:focus-visible,
-.seams-settings-action:focus-visible,
-.seams-settings-mobile-toggle:focus-visible {
+[data-seams-root].seams-theme-provider button.seams-settings-theme-toggle:focus-visible,
+[data-seams-root].seams-theme-provider .seams-settings-navigation button:focus-visible,
+[data-seams-root].seams-theme-provider button.seams-settings-action:focus-visible,
+[data-seams-root].seams-theme-provider button.seams-settings-mobile-toggle:focus-visible {
   outline: 2px solid var(--seams-colors-textPrimary);
   outline-offset: 2px;
 }
-.seams-settings-nav-icon {
+[data-seams-root].seams-theme-provider .seams-settings-nav-icon {
   display: flex;
   flex-shrink: 0;
   color: var(--seams-colors-textSecondary);
 }
-.seams-settings-nav-icon svg {
+[data-seams-root].seams-theme-provider .seams-settings-nav-icon svg {
   width: 22px;
   height: 22px;
 }
-.seams-settings-navigation strong {
+[data-seams-root].seams-theme-provider .seams-settings-navigation strong {
   display: block;
   font-size: 14px;
   font-weight: 500;
 }
-.seams-settings-navigation small {
+[data-seams-root].seams-theme-provider .seams-settings-navigation small {
   display: block;
   margin-top: 4px;
   font-size: 12px;
   color: var(--seams-colors-textSecondary);
 }
-.seams-settings-lock {
+[data-seams-root].seams-theme-provider .seams-settings-lock {
   margin-top: 24px;
   padding-top: 12px;
   border-top: 1px solid var(--seams-colors-borderPrimary);
 }
-.seams-settings-main {
+[data-seams-root].seams-theme-provider .seams-settings-main {
   display: flex;
   flex-direction: column;
   min-width: 0;
   padding: 38px clamp(24px, 4vw, 64px);
 }
-.seams-settings-breadcrumb {
+[data-seams-root].seams-theme-provider .seams-settings-breadcrumb {
   margin: 0 0 32px;
   color: var(--seams-colors-textSecondary);
   font-size: 13px;
 }
-.seams-settings-main h1 {
+[data-seams-root].seams-theme-provider .seams-settings-main h1 {
   margin: 0 0 12px;
   font-size: clamp(24px, 3vw, 32px);
   font-weight: 500;
   letter-spacing: -0.035em;
 }
-.seams-settings-description {
+[data-seams-root].seams-theme-provider .seams-settings-description {
   margin: 0 0 32px;
   color: var(--seams-colors-textSecondary);
 }
-.seams-settings-content {
+[data-seams-root].seams-theme-provider .seams-settings-content {
   width: 100%;
   max-width: 800px;
 }
-.seams-settings-main footer {
+[data-seams-root].seams-theme-provider .seams-settings-main footer {
   margin-top: auto;
   padding-top: 64px;
   font-size: 12px;
   color: var(--seams-colors-textSecondary);
 }
-.seams-settings-action {
+[data-seams-root].seams-theme-provider button.seams-settings-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1822,40 +3291,40 @@
   font: inherit;
   cursor: pointer;
 }
-.seams-settings-action:disabled {
+[data-seams-root].seams-theme-provider button.seams-settings-action:disabled {
   opacity: 0.55;
   cursor: default;
 }
-.seams-settings-mobile-toggle {
+[data-seams-root].seams-theme-provider button.seams-settings-mobile-toggle {
   display: none;
 }
-.seams-settings-sign-in {
+[data-seams-root].seams-theme-provider .seams-settings-sign-in {
   max-width: 520px;
   margin: 64px auto;
   padding: 24px;
 }
-.seams-settings-content .seams-dropdown-accounts-root,
-.seams-settings-content .seams-dropdown-export-keys-root {
+[data-seams-root].seams-theme-provider .seams-settings-content .seams-dropdown-accounts-root,
+[data-seams-root].seams-theme-provider .seams-settings-content .seams-dropdown-export-keys-root {
   margin: 0;
   border: 1px solid var(--seams-colors-borderPrimary);
   border-radius: 16px;
   overflow: hidden;
 }
 @media (max-width: 760px) {
-  .seams-settings-header {
+  [data-seams-root].seams-theme-provider .seams-settings-header {
     padding: 20px 24px;
   }
-  .seams-settings-shell {
+  [data-seams-root].seams-theme-provider .seams-settings-shell {
     display: block;
   }
-  .seams-settings-sidebar {
+  [data-seams-root].seams-theme-provider .seams-settings-sidebar {
     border-inline-end: 0;
     border-bottom: 1px solid var(--seams-colors-borderPrimary);
   }
-  .seams-settings-identity {
+  [data-seams-root].seams-theme-provider .seams-settings-identity {
     padding-bottom: 18px;
   }
-  .seams-settings-mobile-toggle {
+  [data-seams-root].seams-theme-provider button.seams-settings-mobile-toggle {
     display: block;
     width: 100%;
     min-height: 44px;
@@ -1867,36 +3336,44 @@
     text-align: start;
     padding: 12px 14px;
   }
-  .seams-settings-navigation {
+  [data-seams-root].seams-theme-provider .seams-settings-navigation {
     margin-top: 12px;
   }
-  .seams-settings-navigation[data-expanded='false'] {
+  [data-seams-root].seams-theme-provider .seams-settings-navigation[data-expanded='false'] {
     display: none;
   }
-  .seams-settings-main {
+  [data-seams-root].seams-theme-provider .seams-settings-main {
     padding: 28px 24px;
   }
 }
 
-.seams-settings-content .seams-dropdown-accounts-root[data-presentation='page'],
-.seams-settings-content .seams-dropdown-export-keys-root[data-presentation='page'] {
+[data-seams-root].seams-theme-provider
+  .seams-settings-content
+  .seams-dropdown-accounts-root[data-presentation='page'],
+[data-seams-root].seams-theme-provider
+  .seams-settings-content
+  .seams-dropdown-export-keys-root[data-presentation='page'] {
   display: block;
   border: 0;
   border-radius: 0;
   background: transparent;
   overflow: visible;
 }
-[data-presentation='page'] > .seams-dropdown-accounts-clip,
-[data-presentation='page'] > .seams-dropdown-export-keys-clip {
+[data-seams-root].seams-theme-provider [data-presentation='page'] > .seams-dropdown-accounts-clip,
+[data-seams-root].seams-theme-provider
+  [data-presentation='page']
+  > .seams-dropdown-export-keys-clip {
   overflow: visible;
 }
-[data-presentation='page'] .seams-dropdown-accounts-content,
-[data-presentation='page'] .seams-dropdown-export-keys-content {
+[data-seams-root].seams-theme-provider [data-presentation='page'] .seams-dropdown-accounts-content,
+[data-seams-root].seams-theme-provider
+  [data-presentation='page']
+  .seams-dropdown-export-keys-content {
   padding: 0;
   gap: 16px;
   transition: none;
 }
-[data-presentation='page'] .seams-accounts-row {
+[data-seams-root].seams-theme-provider [data-presentation='page'] a.seams-accounts-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto 20px;
   gap: 12px;
@@ -1905,10 +3382,10 @@
   border-radius: 16px;
   background: var(--seams-colors-colorBackground);
 }
-[data-presentation='page'] .seams-accounts-row-chain {
+[data-seams-root].seams-theme-provider [data-presentation='page'] .seams-accounts-row-chain {
   font-size: 20px;
 }
-[data-presentation='page'] .seams-accounts-row-address {
+[data-seams-root].seams-theme-provider [data-presentation='page'] .seams-accounts-row-address {
   grid-row: 2;
   grid-column: 1 / -1;
   font-size: 14px;
@@ -1916,19 +3393,21 @@
   overflow-wrap: anywhere;
   white-space: normal;
 }
-.seams-accounts-explorer-label {
+[data-seams-root].seams-theme-provider .seams-accounts-explorer-label {
   font-size: 13px;
   color: var(--seams-colors-textSecondary);
 }
-[data-presentation='page'] .seams-accounts-row-arrow {
+[data-seams-root].seams-theme-provider [data-presentation='page'] .seams-accounts-row-arrow {
   width: 20px;
   height: 20px;
 }
-[data-presentation='page'] .seams-dropdown-export-keys-content {
+[data-seams-root].seams-theme-provider
+  [data-presentation='page']
+  .seams-dropdown-export-keys-content {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-[data-presentation='page'] .seams-export-keys-row {
+[data-seams-root].seams-theme-provider [data-presentation='page'] button.seams-export-keys-row {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1940,7 +3419,7 @@
   border-radius: 16px;
   background: var(--seams-colors-colorBackground);
 }
-.seams-export-keys-card-icon {
+[data-seams-root].seams-theme-provider .seams-export-keys-card-icon {
   display: grid;
   place-items: center;
   width: 44px;
@@ -1949,21 +3428,23 @@
   border-radius: 12px;
   background: var(--seams-colors-surface2);
 }
-.seams-export-keys-card-icon svg {
+[data-seams-root].seams-theme-provider .seams-export-keys-card-icon svg {
   width: 24px;
   height: 24px;
 }
-[data-presentation='page'] .seams-export-keys-row-label {
+[data-seams-root].seams-theme-provider [data-presentation='page'] .seams-export-keys-row-label {
   font-size: 20px;
   white-space: normal;
 }
-[data-presentation='page'] .seams-export-keys-row-description {
+[data-seams-root].seams-theme-provider
+  [data-presentation='page']
+  .seams-export-keys-row-description {
   flex: none;
   font-size: 14px;
   text-align: start;
   white-space: normal;
 }
-.seams-export-keys-action {
+[data-seams-root].seams-theme-provider .seams-export-keys-action {
   display: flex;
   justify-content: space-between;
   width: 100%;
@@ -1973,37 +3454,45 @@
   font-weight: 600;
   color: var(--seams-colors-textPrimary);
 }
-[data-presentation='page'] .seams-export-keys-row-spinner {
+[data-seams-root].seams-theme-provider [data-presentation='page'] .seams-export-keys-row-spinner {
   position: absolute;
   inset-block-start: 28px;
   inset-inline-end: 28px;
 }
-[data-presentation='page'] .seams-accounts-row:hover,
-[data-presentation='page'] .seams-export-keys-row:hover:not(:disabled) {
+[data-seams-root].seams-theme-provider [data-presentation='page'] a.seams-accounts-row:hover,
+[data-seams-root].seams-theme-provider
+  [data-presentation='page']
+  button.seams-export-keys-row:hover:not(:disabled) {
   background: var(--seams-colors-surface2);
 }
-[data-presentation='page'] .seams-accounts-row:focus-visible,
-[data-presentation='page'] .seams-export-keys-row:focus-visible {
+[data-seams-root].seams-theme-provider
+  [data-presentation='page']
+  a.seams-accounts-row:focus-visible,
+[data-seams-root].seams-theme-provider
+  [data-presentation='page']
+  button.seams-export-keys-row:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 4px;
 }
 @media (max-width: 600px) {
-  [data-presentation='page'] .seams-dropdown-export-keys-content {
+  [data-seams-root].seams-theme-provider
+    [data-presentation='page']
+    .seams-dropdown-export-keys-content {
     grid-template-columns: minmax(0, 1fr);
   }
-  [data-presentation='page'] .seams-accounts-row,
-  [data-presentation='page'] .seams-export-keys-row {
+  [data-seams-root].seams-theme-provider [data-presentation='page'] a.seams-accounts-row,
+  [data-seams-root].seams-theme-provider [data-presentation='page'] button.seams-export-keys-row {
     padding: 20px;
   }
-  .seams-accounts-explorer-label {
+  [data-seams-root].seams-theme-provider .seams-accounts-explorer-label {
     display: none;
   }
-  [data-presentation='page'] .seams-accounts-row {
+  [data-seams-root].seams-theme-provider [data-presentation='page'] a.seams-accounts-row {
     grid-template-columns: minmax(0, 1fr) 20px;
   }
 }
 
-.seams-region-field {
+[data-seams-root].seams-theme-provider .seams-region-field {
   display: grid;
   gap: 8px;
   max-width: 360px;
@@ -2013,11 +3502,11 @@
 }
 /* The wrapper draws the chevron, so the closed control looks the same in
    every browser. */
-.seams-region-select {
+[data-seams-root].seams-theme-provider .seams-region-select {
   position: relative;
   display: block;
 }
-.seams-region-select::after {
+[data-seams-root].seams-theme-provider .seams-region-select::after {
   content: '';
   position: absolute;
   inset-block-start: 50%;
@@ -2029,7 +3518,7 @@
   transform: translateY(-70%) rotate(45deg);
   pointer-events: none;
 }
-.seams-region-select select {
+[data-seams-root].seams-theme-provider .seams-region-select select {
   appearance: none;
   width: 100%;
   min-height: 48px;
@@ -2043,24 +3532,24 @@
   font-weight: 400;
   cursor: pointer;
 }
-.seams-region-select select:hover {
+[data-seams-root].seams-theme-provider .seams-region-select select:hover {
   background: var(--seams-colors-surface);
 }
-.seams-region-select select:focus-visible {
+[data-seams-root].seams-theme-provider .seams-region-select select:focus-visible {
   outline: 2px solid var(--seams-colors-textPrimary);
   outline-offset: 2px;
 }
 /* Browsers with customizable select also style the open list. Others keep
    the native list. */
 @supports (appearance: base-select) {
-  .seams-region-select select,
-  .seams-region-select ::picker(select) {
+  [data-seams-root].seams-theme-provider .seams-region-select select,
+  [data-seams-root].seams-theme-provider .seams-region-select ::picker(select) {
     appearance: base-select;
   }
-  .seams-region-select select::picker-icon {
+  [data-seams-root].seams-theme-provider .seams-region-select select::picker-icon {
     display: none;
   }
-  .seams-region-select ::picker(select) {
+  [data-seams-root].seams-theme-provider .seams-region-select ::picker(select) {
     margin-block: 6px;
     padding: 6px;
     border: 1px solid var(--seams-colors-borderPrimary);
@@ -2069,7 +3558,7 @@
     color: var(--seams-colors-textPrimary);
     box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
   }
-  .seams-region-select option {
+  [data-seams-root].seams-theme-provider .seams-region-select option {
     display: flex;
     align-items: center;
     gap: 10px;
@@ -2079,15 +3568,15 @@
     font: inherit;
     cursor: pointer;
   }
-  .seams-region-select option:hover,
-  .seams-region-select option:focus-visible {
+  [data-seams-root].seams-theme-provider .seams-region-select option:hover,
+  [data-seams-root].seams-theme-provider .seams-region-select option:focus-visible {
     outline: none;
     background: var(--seams-colors-surface2);
   }
-  .seams-region-select option:checked {
+  [data-seams-root].seams-theme-provider .seams-region-select option:checked {
     font-weight: 500;
   }
-  .seams-region-select option::checkmark {
+  [data-seams-root].seams-theme-provider .seams-region-select option::checkmark {
     order: 1;
     margin-inline-start: auto;
     color: var(--seams-colors-textSecondary);
@@ -2095,17 +3584,18 @@
 }
 
 
-
 /* Import QR Code Scanner styles */
 /* QRCodeScanner Component Styles */
 
-.qr-scanner-modal {
+[data-seams-root].seams-theme-provider .qr-scanner-modal {
   position: fixed;
   inset: 0;
   /* Stay below the wallet iframe overlay so Tx confirmer always sits on top */
   z-index: var(
     --seams-z-underlay-backdrop,
-    calc(var(--seams-wallet-overlay-z, 2147483646) - var(--seams-wallet-underlay-backdrop-offset, 2))
+    calc(
+      var(--seams-wallet-overlay-z, 2147483646) - var(--seams-wallet-underlay-backdrop-offset, 2)
+    )
   );
   display: flex;
   justify-content: center;
@@ -2126,7 +3616,7 @@
 }
 
 /* Themed panel similar to ShowQRCode modal content */
-.qr-scanner-panel {
+[data-seams-root].seams-theme-provider .qr-scanner-panel {
   display: flex;
   flex-direction: column;
   overflow: visible;
@@ -2135,7 +3625,7 @@
   border-radius: 2rem;
 }
 
-.qr-scanner-progress-panel {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-panel {
   width: min(100%, 360px);
   min-height: 0;
   box-sizing: border-box;
@@ -2151,7 +3641,7 @@
   );
 }
 
-.qr-scanner-progress {
+[data-seams-root].seams-theme-provider .qr-scanner-progress {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2159,7 +3649,7 @@
   text-align: center;
 }
 
-.qr-scanner-progress h2 {
+[data-seams-root].seams-theme-provider .qr-scanner-progress h2 {
   margin: 0;
   font-size: 1.3125rem;
   font-weight: 600;
@@ -2167,13 +3657,13 @@
   letter-spacing: -0.02em;
 }
 
-.qr-scanner-progress-message {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-message {
   margin: 12px 0 0;
   color: var(--seams-colors-textSecondary);
   line-height: 1.5;
 }
 
-.qr-scanner-progress-dots {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-dots {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2183,7 +3673,7 @@
   color: var(--seams-colors-textPrimary);
 }
 
-.qr-scanner-progress-dots span {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-dots span {
   width: 7px;
   height: 7px;
   background: currentcolor;
@@ -2192,22 +3682,22 @@
   animation: qr-scanner-progress-dot 1.2s ease-in-out infinite;
 }
 
-.qr-scanner-progress-dots span:nth-child(2) {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-dots span:nth-child(2) {
   animation-delay: 160ms;
 }
 
-.qr-scanner-progress-dots span:nth-child(3) {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-dots span:nth-child(3) {
   animation-delay: 320ms;
 }
 
-.qr-scanner-progress-actions {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-actions {
   display: grid;
   width: 100%;
   gap: 10px;
   margin-top: 28px;
 }
 
-.qr-scanner-progress-actions button {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-actions button {
   width: 100%;
   min-height: 44px;
   padding: 9px 16px;
@@ -2222,39 +3712,39 @@
     color 160ms ease;
 }
 
-.qr-scanner-progress-cancel {
+[data-seams-root].seams-theme-provider button.qr-scanner-progress-cancel {
   color: var(--seams-colors-textPrimary);
   background: transparent;
   border-color: var(--seams-colors-borderPrimary);
 }
 
-.qr-scanner-progress-primary {
+[data-seams-root].seams-theme-provider button.qr-scanner-progress-primary {
   color: var(--seams-colors-textButton);
   background: var(--seams-colors-buttonBackground, var(--seams-colors-primary));
   border-color: transparent;
 }
 
-.qr-scanner-progress-cancel:hover {
+[data-seams-root].seams-theme-provider button.qr-scanner-progress-cancel:hover {
   background: var(--seams-colors-surface2);
   border-color: var(--seams-colors-borderHover);
 }
 
-.qr-scanner-progress-primary:hover {
+[data-seams-root].seams-theme-provider button.qr-scanner-progress-primary:hover {
   background: var(--seams-colors-buttonHoverBackground, var(--seams-colors-primaryHover));
 }
 
-.qr-scanner-progress-actions button:focus-visible {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-actions button:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 3px;
 }
 
-.qr-scanner-panel:focus-visible,
-.qr-scanner-progress h2:focus-visible {
+[data-seams-root].seams-theme-provider .qr-scanner-panel:focus-visible,
+[data-seams-root].seams-theme-provider .qr-scanner-progress h2:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 4px;
 }
 
-.qr-scanner-email-selection {
+[data-seams-root].seams-theme-provider .qr-scanner-email-selection {
   width: min(100%, 420px);
   box-sizing: border-box;
   padding: 28px;
@@ -2264,19 +3754,19 @@
   box-shadow: 0 16px 48px oklch(0 0 0 / 0.24);
 }
 
-.qr-scanner-email-selection h2 {
+[data-seams-root].seams-theme-provider .qr-scanner-email-selection h2 {
   margin: 0;
   font-size: 20px;
   line-height: 1.3;
 }
 
-.qr-scanner-email-selection > p {
+[data-seams-root].seams-theme-provider .qr-scanner-email-selection > p {
   margin: 10px 0 0;
   color: var(--seams-colors-textSecondary);
   line-height: 1.5;
 }
 
-.qr-scanner-email-choice-list {
+[data-seams-root].seams-theme-provider .qr-scanner-email-choice-list {
   display: grid;
   gap: 10px;
   margin: 22px 0 0;
@@ -2284,13 +3774,13 @@
   border: 0;
 }
 
-.qr-scanner-email-choice-legend {
+[data-seams-root].seams-theme-provider .qr-scanner-email-choice-legend {
   margin-bottom: 8px;
   color: var(--seams-colors-textSecondary);
   font-size: 13px;
 }
 
-.qr-scanner-email-choice {
+[data-seams-root].seams-theme-provider .qr-scanner-email-choice {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -2303,23 +3793,23 @@
   cursor: pointer;
 }
 
-.qr-scanner-email-choice:has(input:checked) {
+[data-seams-root].seams-theme-provider .qr-scanner-email-choice:has(input:checked) {
   border-color: var(--seams-colors-primary);
 }
 
-.qr-scanner-email-choice input {
+[data-seams-root].seams-theme-provider .qr-scanner-email-choice input {
   width: 18px;
   height: 18px;
   margin: 0;
   accent-color: var(--seams-colors-primary);
 }
 
-.qr-scanner-email-choice:focus-within {
+[data-seams-root].seams-theme-provider .qr-scanner-email-choice:focus-within {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 2px;
 }
 
-.qr-scanner-email-continue {
+[data-seams-root].seams-theme-provider button.qr-scanner-email-continue {
   width: 100%;
   min-height: 44px;
   margin-top: 22px;
@@ -2333,17 +3823,17 @@
   font-weight: 600;
 }
 
-.qr-scanner-email-continue:disabled {
+[data-seams-root].seams-theme-provider button.qr-scanner-email-continue:disabled {
   cursor: not-allowed;
   opacity: 0.55;
 }
 
-.qr-scanner-email-continue:focus-visible {
+[data-seams-root].seams-theme-provider button.qr-scanner-email-continue:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 3px;
 }
 
-.qr-scanner-visually-hidden {
+[data-seams-root].seams-theme-provider .qr-scanner-visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -2356,12 +3846,12 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .qr-scanner-modal {
+  [data-seams-root].seams-theme-provider .qr-scanner-modal {
     animation: none;
     transition: none;
   }
 
-  .qr-scanner-progress-dots span {
+  [data-seams-root].seams-theme-provider .qr-scanner-progress-dots span {
     animation: none;
     opacity: 0.5;
   }
@@ -2401,7 +3891,7 @@
   }
 }
 
-.qr-scanner-camera-container {
+[data-seams-root].seams-theme-provider .qr-scanner-camera-container {
   background: var(--seams-colors-surface);
   position: relative;
   display: inline-block;
@@ -2409,7 +3899,7 @@
   border-radius: 12px;
 }
 
-.qr-scanner-video {
+[data-seams-root].seams-theme-provider .qr-scanner-video {
   width: 400px;
   height: 400px;
   object-fit: cover; /* Crop to square format */
@@ -2421,24 +3911,24 @@
   opacity: 0;
 }
 
-.qr-scanner-video.is-ready {
+[data-seams-root].seams-theme-provider .qr-scanner-video.is-ready {
   animation: qr-scanner-video-fade-in 200ms ease-out both;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .qr-scanner-video {
+  [data-seams-root].seams-theme-provider .qr-scanner-video {
     opacity: 1;
   }
-  .qr-scanner-video.is-ready {
+  [data-seams-root].seams-theme-provider .qr-scanner-video.is-ready {
     animation: none;
   }
 }
 
-.qr-scanner-canvas {
+[data-seams-root].seams-theme-provider .qr-scanner-canvas {
   display: none;
 }
 
-.qr-scanner-overlay {
+[data-seams-root].seams-theme-provider .qr-scanner-overlay {
   position: absolute;
   inset: -1px;
   display: flex;
@@ -2447,7 +3937,7 @@
   pointer-events: none;
 }
 
-.qr-scanner-box {
+[data-seams-root].seams-theme-provider .qr-scanner-box {
   width: 402px;
   height: 402px;
   border: 3px solid var(--seams-colors-primary);
@@ -2455,7 +3945,7 @@
   background: transparent;
 }
 
-.qr-scanner-instructions {
+[data-seams-root].seams-theme-provider .qr-scanner-instructions {
   margin-top: 24px;
   color: var(--seams-colors-textPrimary);
   text-align: center;
@@ -2464,7 +3954,7 @@
   max-width: 400px;
 }
 
-.qr-scanner-sub-instruction {
+[data-seams-root].seams-theme-provider .qr-scanner-sub-instruction {
   font-size: 13px;
   font-weight: 400;
   opacity: 0.7;
@@ -2472,18 +3962,18 @@
   line-height: 1.4;
 }
 
-.qr-scanner-sub-instruction--small {
+[data-seams-root].seams-theme-provider .qr-scanner-sub-instruction--small {
   font-size: 12px;
   opacity: 0.7;
 }
 
-.qr-scanner-camera-controls {
+[data-seams-root].seams-theme-provider .qr-scanner-camera-controls {
   margin-top: 16px;
   display: flex;
   justify-content: center;
 }
 
-.qr-scanner-camera-selector {
+[data-seams-root].seams-theme-provider select.qr-scanner-camera-selector {
   background: var(--seams-colors-surface);
   color: var(--seams-colors-textPrimary);
   border: 1px solid var(--seams-colors-borderPrimary);
@@ -2493,7 +3983,7 @@
   max-width: 220px;
 }
 
-.qr-scanner-close {
+[data-seams-root].seams-theme-provider button.qr-scanner-close {
   position: absolute;
   top: 20px;
   right: 20px;
@@ -2511,24 +4001,27 @@
   align-items: center;
   justify-content: center;
   z-index: 10;
-  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
   padding: 0;
   line-height: 1;
   box-sizing: border-box;
 }
 
-.qr-scanner-close:hover {
+[data-seams-root].seams-theme-provider button.qr-scanner-close:hover {
   background: var(--seams-colors-surface2);
   border-color: var(--seams-colors-borderHover);
   color: var(--seams-colors-textPrimary);
 }
 
-.qr-scanner-close:focus-visible {
+[data-seams-root].seams-theme-provider button.qr-scanner-close:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 3px;
 }
 
-.qr-scanner-error-message {
+[data-seams-root].seams-theme-provider .qr-scanner-error-message {
   background-color: var(--seams-colors-error);
   color: var(--seams-colors-textButton);
   padding: 20px;
@@ -2540,17 +4033,17 @@
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
 }
 
-.qr-scanner-error-message h2 {
+[data-seams-root].seams-theme-provider .qr-scanner-error-message h2 {
   margin: 0;
   font-size: 18px;
   line-height: 1.3;
 }
 
-.qr-scanner-error-message p {
+[data-seams-root].seams-theme-provider .qr-scanner-error-message p {
   line-height: 1.45;
 }
 
-.qr-scanner-error-button {
+[data-seams-root].seams-theme-provider button.qr-scanner-error-button {
   margin-top: 12px;
   margin-left: 6px;
   margin-right: 6px;
@@ -2565,32 +4058,123 @@
   transition: all 0.2s ease;
 }
 
-.qr-scanner-error-button:hover {
+[data-seams-root].seams-theme-provider button.qr-scanner-error-button:hover {
   background-color: var(--seams-colors-surface2);
   border-color: var(--seams-colors-borderHover);
 }
 
-.qr-scanner-error-button:focus-visible {
+[data-seams-root].seams-theme-provider button.qr-scanner-error-button:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 3px;
 }
 
 @media (max-width: 480px) {
-  .qr-scanner-progress-panel {
+  [data-seams-root].seams-theme-provider .qr-scanner-progress-panel {
     padding: 1rem;
   }
 
-  .qr-scanner-progress h2 {
+  [data-seams-root].seams-theme-provider .qr-scanner-progress h2 {
     font-size: 1.375rem;
   }
 }
 
-.qr-code-container {
-  padding-top: 0.25rem;
+[data-seams-root].seams-theme-provider .qr-code-container {
+  box-sizing: border-box;
+  width: min(100%, 420px);
+  padding: 24px;
+  border-radius: var(--seams-shape-card, 24px);
+  background: var(--seams-colors-colorBackground);
+  color: var(--seams-colors-textPrimary);
+}
+
+[data-seams-root].seams-theme-provider .seams-otp-prompt {
+  display: grid;
+  justify-items: center;
+  gap: 16px;
+  width: 100%;
+}
+[data-seams-root].seams-theme-provider .seams-otp-prompt-copy {
+  display: grid;
+  gap: 8px;
+  text-align: center;
+}
+[data-seams-root].seams-theme-provider .seams-otp-title {
+  margin: 0;
+  font: 600 21px / 1.25 var(--seams-font-family, system-ui, sans-serif);
+  color: var(--seams-colors-textPrimary);
+}
+[data-seams-root].seams-theme-provider .seams-otp-description,
+[data-seams-root].seams-theme-provider .seams-otp-helper {
+  margin: 0;
+  color: var(--seams-colors-textSecondary);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+[data-seams-root].seams-theme-provider .seams-field-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--seams-colors-textSecondary);
+}
+[data-seams-root].seams-theme-provider .seams-otp-code-field {
+  display: grid;
+  gap: 10px;
+  width: min(100%, 320px);
+  margin: 0;
+}
+[data-seams-root].seams-theme-provider input.seams-otp-input {
+  grid-column: 1;
+  grid-row: 2;
+  z-index: 1;
+  width: 100%;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: transparent;
+  caret-color: transparent;
+  font-size: 16px;
+}
+[data-seams-root].seams-theme-provider .seams-otp-slots {
+  grid-column: 1;
+  grid-row: 2;
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 6px;
+  pointer-events: none;
+}
+[data-seams-root].seams-theme-provider .seams-otp-slot {
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  height: 44px;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 6px;
+  background: var(--seams-colors-surface);
+  color: var(--seams-colors-textPrimary);
+  font-size: 20px;
+  font-variant-numeric: tabular-nums;
+}
+[data-seams-root].seams-theme-provider .seams-otp-code-field:focus-within .seams-otp-slot {
+  outline: 2px solid var(--seams-colors-focus);
+  outline-offset: 1px;
+}
+[data-seams-root].seams-theme-provider .seams-otp-error {
+  margin: 0;
+  color: var(--seams-colors-error);
+  font-size: 13px;
+  line-height: 1.5;
+}
+[data-seams-root].seams-theme-provider button.seams-otp-resend {
+  padding: 8px;
+  color: var(--seams-colors-primary);
+  font: inherit;
+  cursor: pointer;
 }
 
 /* Modal Header */
-.qr-header {
+[data-seams-root].seams-theme-provider .qr-header {
   position: relative;
   display: grid;
   place-content: center;
@@ -2600,7 +4184,7 @@
 /* Sized off the auth menu's own title (21px) rather than louder than it: this
    heading sits inside the same card, so a heavier scale reads as a second,
    competing header. */
-.qr-title {
+[data-seams-root].seams-theme-provider .qr-title {
   font-size: 1.3125rem;
   font-weight: 600;
   letter-spacing: -0.01em;
@@ -2611,7 +4195,7 @@
   text-wrap: balance;
 }
 
-.qr-body {
+[data-seams-root].seams-theme-provider .qr-body {
   padding: 0rem;
   flex: 1;
   display: flex;
@@ -2619,14 +4203,14 @@
   align-items: center;
 }
 
-.seams-device-link-email-field {
+[data-seams-root].seams-theme-provider .seams-device-link-email-field {
   display: grid;
   width: min(100%, 320px);
   gap: 0.4rem;
   margin-top: 0.25rem;
 }
 
-.seams-device-link-factor-options {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-options {
   box-sizing: border-box;
   display: grid;
   width: min(100%, 320px);
@@ -2636,11 +4220,11 @@
   border: 0;
 }
 
-.seams-device-link-factor-options > legend {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-options > legend {
   margin-bottom: 0.25rem;
 }
 
-.seams-device-link-factor-option {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-option {
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -2654,51 +4238,53 @@
   cursor: pointer;
 }
 
-.seams-device-link-factor-option:has(input:checked) {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-option:has(input:checked) {
   border-color: var(--seams-colors-textPrimary, #1e293b);
   background: var(--seams-colors-surface2, #f1f5f9);
 }
 
-.seams-device-link-factor-icon {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-icon {
   display: grid;
   flex: 0 0 22px;
   place-items: center;
   color: var(--seams-colors-textSecondary, #64748b);
 }
 
-.seams-device-link-factor-icon svg {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-icon svg {
   display: block;
+  width: 22px;
+  height: 22px;
 }
 
-.seams-device-link-factor-label {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-label {
   flex: 1;
   text-align: start;
 }
 
-.seams-device-link-factor-label span {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-label span {
   color: var(--seams-colors-textSecondary, #64748b);
   font-size: 0.8125rem;
 }
 
-.seams-device-link-factor-option input {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-option input {
   flex: 0 0 auto;
   width: 1rem;
   height: 1rem;
   margin: 0 0 0 auto;
 }
 
-.seams-device-link-factor-option input:focus-visible {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-option input:focus-visible {
   outline: 2px solid var(--seams-colors-primary, #3b82f6);
   outline-offset: 3px;
 }
 
-.seams-device-link-email-field .seams-field-label {
+[data-seams-root].seams-theme-provider .seams-device-link-email-field .seams-field-label {
   color: var(--seams-colors-textSecondary, #64748b);
   font-size: 0.8125rem;
   font-weight: 600;
 }
 
-.seams-device-link-email-field input {
+[data-seams-root].seams-theme-provider .seams-device-link-email-field input {
   box-sizing: border-box;
   width: 100%;
   min-height: 44px;
@@ -2710,7 +4296,7 @@
   font: inherit;
 }
 
-.seams-device-link-email-field input:focus-visible {
+[data-seams-root].seams-theme-provider .seams-device-link-email-field input:focus-visible {
   outline: none;
   border-color: transparent;
   background:
@@ -2726,7 +4312,7 @@
       border-box;
 }
 
-.qr-code-section {
+[data-seams-root].seams-theme-provider .qr-code-section {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -2738,7 +4324,7 @@
    so on a dark theme an unbacked image reads as a raw white rectangle. The
    plate is a fixed square in both states — the placeholder below occupies the
    same box, so nothing under it moves when the image arrives. */
-.qr-code-display {
+[data-seams-root].seams-theme-provider .qr-code-display {
   display: grid;
   place-items: center;
   width: min(100%, 232px);
@@ -2751,7 +4337,7 @@
     0 14px 28px -20px rgba(15, 23, 42, 0.45);
 }
 
-.qr-code-placeholder {
+[data-seams-root].seams-theme-provider .qr-code-placeholder {
   display: grid;
   place-items: center;
   width: 100%;
@@ -2763,7 +4349,7 @@
 
 /* On the white plate a translucent-white spinner track is invisible; state the
    track against the plate rather than the card. */
-.qr-code-placeholder .seams-spinner {
+[data-seams-root].seams-theme-provider .qr-code-placeholder .seams-spinner {
   width: 28px;
   height: 28px;
   border-radius: 999px;
@@ -2794,13 +4380,13 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .qr-code-placeholder {
+  [data-seams-root].seams-theme-provider .qr-code-placeholder {
     animation: none;
   }
 }
 
-.qr-instruction,
-.qr-status {
+[data-seams-root].seams-theme-provider .qr-instruction,
+[data-seams-root].seams-theme-provider .qr-status {
   margin: 0;
   font-weight: 500;
   color: var(--seams-colors-textSecondary, #1e293b);
@@ -2808,7 +4394,7 @@
   text-wrap: pretty;
 }
 
-.qr-instruction {
+[data-seams-root].seams-theme-provider .qr-instruction {
   max-width: 34ch;
   font-size: 0.95rem;
   line-height: 1.45;
@@ -2817,20 +4403,20 @@
 /* The status is a running commentary on the pairing, not a peer of the
    instruction — one step quieter and smaller so the two lines stack as a
    hierarchy instead of a paragraph. */
-.qr-status {
+[data-seams-root].seams-theme-provider .qr-status {
   margin-bottom: 0.25rem;
   color: color-mix(in srgb, var(--seams-colors-textSecondary, #64748b), transparent 25%);
   font-size: 0.8125rem;
   line-height: 1.4;
 }
 
-.animated-ellipsis {
+[data-seams-root].seams-theme-provider .animated-ellipsis {
   display: inline-block;
   width: 1.2em;
   text-align: left;
 }
 
-.animated-ellipsis::after {
+[data-seams-root].seams-theme-provider .animated-ellipsis::after {
   content: '...';
   animation: ellipsis 1.5s infinite;
 }
@@ -2853,7 +4439,7 @@
   }
 }
 
-.qr-code-image {
+[data-seams-root].seams-theme-provider .qr-code-image {
   width: 100%;
   max-width: 200px;
   height: auto;
@@ -2863,7 +4449,7 @@
 /* Failure view. Same skeleton as the link-device confirmation — badge, title,
    copy, one control. Styles are restated here because ShowQRCode is also
    shared by device-linking surfaces. */
-.seams-link-device-failure {
+[data-seams-root].seams-theme-provider .seams-link-device-failure {
   min-height: 300px;
   width: min(100%, 360px);
   margin-inline: auto;
@@ -2876,7 +4462,7 @@
   text-align: center;
 }
 
-.seams-link-device-failure-icon {
+[data-seams-root].seams-theme-provider .seams-link-device-failure-icon {
   width: 56px;
   height: 56px;
   display: grid;
@@ -2886,11 +4472,15 @@
   background: color-mix(in srgb, var(--seams-colors-error, #ef4444), transparent 88%);
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--seams-colors-error, #ef4444), transparent 80%);
 }
+[data-seams-root].seams-theme-provider .seams-link-device-failure-icon > svg {
+  width: 26px;
+  height: 26px;
+}
 
 /* The detail is a raw error string, so it is sized and coloured as evidence
    rather than as prose: quiet, tight, and allowed to break mid-token so a long
    technical message wraps instead of forcing the card wider. */
-.seams-link-device-failure-detail {
+[data-seams-root].seams-theme-provider .seams-link-device-failure-detail {
   max-width: 34ch;
   margin: 0;
   color: color-mix(in srgb, var(--seams-colors-textSecondary, #64748b), transparent 15%);
@@ -2901,9 +4491,8 @@
   overflow-wrap: anywhere;
 }
 
-/* Device-linking button styling keeps the button looking
-   the same whether or not that sheet is loaded alongside this one. */
-.seams-link-device-failure .seams-link-device-btn {
+/* Every device-link step uses the same action control. */
+[data-seams-root].seams-theme-provider button.seams-link-device-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2912,7 +4501,7 @@
   margin-top: 0.25rem;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
-  height: calc(var(--seams-shape-controlHeight, 44px) - 4px);
+  min-height: var(--seams-shape-controlHeight, 44px);
   background: var(--seams-colors-surface, #f8fafc);
   border: 1px solid var(--seams-colors-borderPrimary, #e2e8f0);
   border-radius: var(--seams-shape-control, 10px);
@@ -2923,10 +4512,19 @@
   font-size: 0.875rem;
 }
 
-.seams-link-device-failure .seams-link-device-btn:hover,
-.seams-link-device-failure .seams-link-device-btn:focus-visible {
+[data-seams-root].seams-theme-provider button.seams-link-device-btn:hover:not(:disabled) {
   background: var(--seams-colors-surface2, #f1f5f9);
 }
+[data-seams-root].seams-theme-provider button.seams-link-device-btn:focus-visible,
+[data-seams-root].seams-theme-provider button.seams-otp-resend:focus-visible {
+  outline: 2px solid var(--seams-colors-focus);
+  outline-offset: 3px;
+}
+[data-seams-root].seams-theme-provider button.seams-link-device-btn:disabled,
+[data-seams-root].seams-theme-provider button.seams-otp-resend:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 
 /* Global default z-index tokens for wallet overlay + SDK modals */