:root {
  --ink: #07142b;
  --muted: #697386;
  --line: #e5e7eb;
  --canvas: #f8f9fb;
  --surface: #ffffff;
  --blue: #367af6;
  --blue-pale: #eef5ff;
  --success: #20b878;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(110deg, #fafbfc, #f7f7fb 48%, #f0fbff);
  font: 13px 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
button, select { font: inherit; }
button { cursor: pointer; }
.portal-header {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid #eef0f3;
  background: linear-gradient(100deg, #fff, #f8f7fd, #effbff);
}
.portal-logo { width: 103px; height: auto; }
.company-control {
  width: 275px;
  margin-left: 24px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
}
.company-control::after { float: right; color: var(--muted); content: '⌄'; }
.company-control small, .company-choice small { color: var(--muted); }
.header-actions { display: flex; gap: 14px; align-items: center; margin-left: auto; }
.header-action { border: 0; color: var(--ink); font-weight: 600; background: transparent; }
.profile-mark { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #cbd5e1; border-radius: 50%; }
.portal-layout { display: flex; min-height: calc(100vh - 64px); }
.sidebar { width: 240px; padding: 13px 16px; border-right: 1px solid var(--line); background: #fafbfc; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  margin: 2px 0;
  padding: 0 12px;
  border: 1px solid transparent;
  color: var(--ink);
  text-align: left;
  font-weight: 600;
  background: transparent;
}
.nav-item img { width: 16px; height: 16px; object-fit: contain; }
.nav-item.active { border-color: #b9dcff; border-radius: 3px; background: var(--surface); }
.nav-divider { height: 1px; margin: 14px 0; background: var(--line); }
.main-panel { flex: 1; padding: 22px 40px; }
.page-title { margin: 0 0 30px; color: var(--ink); font-size: 16px; font-weight: 600; }
.placeholder {
  max-width: 760px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}
.placeholder h2 { margin: 0 0 8px; font-size: 14px; }
.placeholder p { margin: 0; color: var(--muted); line-height: 1.6; }
.balance-summary, .account-card { margin-bottom: 16px; padding: 18px; border-radius: 7px; background: var(--surface); }
.balance-summary { display: flex; gap: 14px; align-items: center; }
.account-card header { display: flex; gap: 14px; align-items: center; min-height: 42px; }
.account-card header span { margin-left: auto; color: var(--muted); }
.account-card small { color: var(--success); }
.account-card table { width: 100%; margin-top: 12px; border-collapse: collapse; }
.account-card th, .account-card td { padding: 10px; border-top: 1px solid var(--line); text-align: left; }
.account-card td:last-child { text-align: right; }
.scenario-controls { margin-top: 12px; color: var(--muted); }
.control-note { color: var(--muted); }
@media (max-width: 900px) { body { min-width: 0; } .portal-header { padding: 0 14px; } .company-control { width: 210px; margin-left: 12px; } .sidebar { width: 190px; } .main-panel { padding: 20px; } .balance-summary { flex-wrap: wrap; } }
@media (max-width: 640px) { .portal-header { height: auto; min-height: 58px; flex-wrap: wrap; gap: 8px; padding: 10px; } .header-actions { margin-left: 0; } .portal-layout { display: block; } .sidebar { width: 100%; display: flex; overflow-x: auto; padding: 8px; } .nav-item { min-width: max-content; } .nav-divider { display: none; } .main-panel { padding: 16px; } .account-card { overflow-x: auto; } .dialog-panel { width: calc(100vw - 24px); } }
.company-menu {
  position: absolute;
  z-index: 4;
  top: 60px;
  left: 150px;
  display: none;
  width: 300px;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 10px 22px rgb(15 23 42 / 8%);
}
.company-menu.open { display: block; }
.company-choice { width: 100%; padding: 10px; border: 0; text-align: left; background: var(--surface); }
.company-choice:hover { background: var(--blue-pale); }
.company-add-oristapay { display: flex; align-items: flex-start; gap: 8px; width: 100%; margin-top: 6px; padding: 10px 11px; border: 0; border-radius: 8px; color: #3279ef; text-align: left; background: #eef4ff; }
.company-add-oristapay:hover { background: #e4efff; }
.company-add-icon { flex: 0 0 auto; font-size: 20px; font-weight: 400; line-height: 1.05; }
.company-add-oristapay > span:last-child { display: grid; gap: 2px; min-width: 0; }
.company-add-oristapay strong { font-size: 13px; font-weight: 600; }
.company-add-oristapay small { color: #4e87ec; font-size: 11px; line-height: 1.3; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgb(7 20 43 / 24%); }
.dialog-panel { width: min(440px, calc(100vw - 48px)); padding: 24px; border-radius: 8px; background: var(--surface); box-shadow: 0 18px 48px rgb(7 20 43 / 20%); }
.dialog-panel h2 { margin: 0 0 12px; font-size: 16px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.msb-agreement-backdrop { z-index: 30; background: rgb(7 12 27 / 74%); }
.msb-agreement-dialog { width: min(500px, calc(100vw - 48px)); padding: 30px 36px 26px; border-radius: 12px; text-align: center; }
.msb-agreement-dialog h2 { margin-bottom: 14px; font-size: 17px; }
.msb-agreement-dialog > div:not(.dialog-actions) { color: #263047; font-size: 13px; line-height: 1.65; }
.msb-agreement-dialog .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; }
.msb-agreement-dialog .dialog-actions button { min-height: 42px; border: 1px solid #aab5c7; border-radius: 8px; color: #111827; font: inherit; background: #fff; }
.msb-agreement-dialog .dialog-actions .button-primary { order: 2; border-color: #0b0f17; color: #fff; background: #0b0f17; }
.msb-agreement-dialog .dialog-actions button:not(.button-primary) { order: 1; }
.button-primary { padding: 8px 13px; border: 0; border-radius: 4px; color: #fff; background: var(--blue); }
.button-secondary { padding: 8px 13px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--surface); }
.notification-stack { position: fixed; right: 24px; bottom: 24px; z-index: 8; display: grid; gap: 8px; width: 300px; }
.notification { padding: 12px 14px; border-left: 3px solid var(--success); border-radius: 4px; color: var(--ink); background: var(--surface); box-shadow: 0 8px 20px rgb(7 20 43 / 12%); }
.payee-toolbar, .payee-list, .payee-drawer { margin-bottom: 16px; padding: 18px; border-radius: 7px; background: var(--surface); }
.payee-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.payee-toolbar .mode-hint { flex: 1 1 100%; color: #68748e; font-size: 12px; }
/* Company-wide Whitelisting and Contacts actions sit in the upper-right, as
   in the approved reference.  These pages intentionally do not render an
   account selector; the list is shared by the whole company. */
.payee-toolbar { justify-content: flex-end; }
.payee-toolbar > [data-control^="add-"] { border-color: #3478ef; color: #fff; background: #3478ef; }
.payee-toolbar > [data-control^="add-"]:hover { border-color: #1f65d6; background: #1f65d6; }
.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.tabs button[aria-selected="true"] { border-bottom: 2px solid var(--blue); color: var(--blue); }
.payee-list { overflow-x: auto; }
.payee-list table { width: 100%; border-collapse: collapse; }
.payee-list th, .payee-list td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.payee-list input, .payee-list select { margin: 0 6px 12px 0; padding: 7px; border: 1px solid var(--line); border-radius: 4px; }
.payee-drawer { max-width: 420px; border-left: 3px solid var(--blue); }
.payee-drawer button { margin-right: 8px; }
.payee-list table, .main-panel table { width: 100%; border-collapse: collapse; }
.main-panel table td, .main-panel table th { padding: 10px; border-bottom: 1px solid var(--line); }
.dialog-panel label { display: grid; gap: 5px; margin: 10px 0; }
.dialog-panel input { padding: 8px; border: 1px solid var(--line); border-radius: 4px; }
@media (max-width: 640px) { .payee-toolbar { align-items: stretch; } .payee-toolbar > * { width: 100%; } }

/* Fiat conversion follows the two-step right-hand drawer from the approved
   Fixes flow. The generic dialog remains unchanged for other Demo actions. */
.dialog-backdrop-drawer { place-items: stretch end; }
.fiat-convert-dialog { display: flex; width: min(520px, 100vw); height: 100dvh; max-height: none; padding: 0; overflow: hidden; border-radius: 16px 0 0 16px; }
.fiat-convert-dialog > h2 { display: none; }
.fiat-convert-dialog > div:not(.dialog-actions) { display: flex; min-width: 0; min-height: 0; flex: 1; padding: 0; overflow: hidden; }
.fiat-convert-dialog .dialog-actions { display: none; }
.fiat-convert-flow { display: flex; min-width: 0; min-height: 100%; flex: 1; flex-direction: column; color: #171d2d; background: #fff; }
.fiat-convert-header { flex: 0 0 auto; border-bottom: 1px solid #edf0f4; background: #fff; }
.fiat-convert-titlebar { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 22px; }
.fiat-convert-title { color: #111827; font-size: 18px; font-weight: 600; }
.fiat-convert-close { position: absolute; top: 18px; right: 20px; width: 30px; height: 30px; padding: 0; border: 0; color: #111827; font-size: 27px; line-height: 25px; background: transparent; }
.fiat-convert-steps { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 0 24px 17px; color: #a4adbd; font-size: 14px; font-weight: 600; }
.fiat-convert-steps .active { color: #151a28; }
.fiat-convert-steps .complete { color: #9ca7b7; }
.fiat-convert-steps b { color: #9ca7b7; font-size: 22px; font-weight: 400; line-height: 12px; }
.fiat-convert-content { min-width: 0; flex: 1; padding: 22px 24px 24px; overflow-y: auto; }
.fiat-convert-route { padding: 15px; border-radius: 10px; background: #f8f9fb; }
.fiat-convert-field-label { margin: 0 0 7px; color: #697386; font-size: 12px; font-weight: 600; }
.fiat-convert-account-card { display: grid; gap: 5px; min-width: 0; padding: 13px 14px; border: 1px solid #e4e8ee; border-radius: 8px; background: #fff; }
.fiat-convert-account-card span { color: #7a8598; font-size: 11px; }
.fiat-convert-account-card strong { overflow-wrap: anywhere; color: #1d2536; font-size: 14px; font-weight: 600; }
.fiat-convert-route-line { width: 1px; height: 14px; margin: 0 0 0 17px; background: #cbd3df; }
.fiat-convert-address { display: grid; gap: 3px; margin-top: 11px; padding-top: 11px; border-top: 1px solid #eaedf2; }
.fiat-convert-address span { color: #7a8598; font-size: 11px; }
.fiat-convert-address code, .fiat-convert-summary code { overflow-wrap: anywhere; color: #34435a; font: 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fiat-convert-amount-section { margin-top: 20px; }
.fiat-convert-amount-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: #333d50; font-size: 13px; font-weight: 600; }
.fiat-convert-amount-label small { color: #8590a2; font-size: 10px; font-weight: 400; text-align: right; }
.fiat-convert-amount-input { display: flex; align-items: center; gap: 8px; padding: 5px 7px 5px 12px; border: 1px solid #dfe4ec; border-radius: 8px; background: #fff; }
.fiat-convert-amount-input:focus-within { border-color: #77a7ff; box-shadow: 0 0 0 2px rgb(54 122 246 / 12%); }
.fiat-convert-amount-input input { min-width: 0; flex: 1; padding: 8px 0; border: 0; outline: 0; color: #151b2a; font-size: 22px; font-weight: 600; background: transparent; }
.fiat-convert-amount-input input::-webkit-outer-spin-button, .fiat-convert-amount-input input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.fiat-convert-amount-input select { padding: 8px 6px; border: 1px solid #dfe4ec; border-radius: 6px; color: #283348; background: #fff; }
.fiat-convert-limit { margin: 8px 0 0; color: #8791a3; font-size: 11px; }
.fiat-convert-error { min-height: 16px; margin: 5px 0 0; color: #c83e50; font-size: 11px; }
.fiat-convert-metrics { display: grid; gap: 7px; margin: 14px 0; padding: 12px 14px; border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; color: #66738a; font-size: 11px; }
.fiat-convert-receive { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid #d9e6ff; border-radius: 8px; background: linear-gradient(115deg, #f5f9ff, #fbf9ff); }
.fiat-convert-receive span { color: #69758a; font-size: 12px; }
.fiat-convert-receive strong { color: #1e2b44; font-size: 19px; }
.fiat-convert-receive select { padding: 7px 8px; border: 1px solid #dfe4ec; border-radius: 6px; color: #283348; background: #fff; }
.fiat-convert-footer { display: flex; gap: 10px; flex: 0 0 auto; padding: 16px 24px 20px; border-top: 1px solid #edf0f4; background: #fff; }
.fiat-convert-footer button { min-height: 40px; flex: 1; }
.fiat-convert-footer .button-primary:disabled { cursor: not-allowed; color: #9ca5b4; background: #e3e6eb; }
.fiat-convert-confirm-hint { margin: 0 0 20px; color: #778398; font-size: 12px; line-height: 1.5; }
.fiat-convert-summary-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.fiat-convert-summary-pair .fiat-convert-account-card { min-height: 116px; align-content: center; padding: 15px; background: #f8f9fb; }
.fiat-convert-summary-pair .fiat-convert-account-card strong { font-size: 15px; }
.fiat-convert-summary-pair .target { border-color: #d7e5ff; background: #f4f8ff; }
.fiat-convert-arrow { color: #78869b; font-size: 22px; }
.fiat-convert-summary { margin-top: 18px; padding: 17px; border-radius: 9px; background: #f8f9fb; }
.fiat-convert-summary dl { display: grid; gap: 14px; margin: 0; }
.fiat-convert-summary dl div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.fiat-convert-summary dt { color: #7b8799; font-size: 11px; }
.fiat-convert-summary dd { min-width: 0; margin: 0; color: #283449; font-size: 12px; text-align: right; }
@media (max-width: 560px) { .fiat-convert-dialog { width: 100vw; border-radius: 0; }.fiat-convert-content { padding: 18px 16px 20px; }.fiat-convert-footer { padding-right: 16px; padding-left: 16px; }.fiat-convert-summary-pair { grid-template-columns: 1fr; }.fiat-convert-arrow { justify-self: center; transform: rotate(90deg); }.fiat-convert-summary dl div { grid-template-columns: 80px minmax(0, 1fr); } }

/* Digital account fiat payout, adapted from the Payout / Select recipient Figma node. */
.fiat-payout-dialog { display: flex; width: min(960px, 100vw); height: 100dvh; max-height: none; padding: 0; overflow: hidden; border-radius: 16px 0 0 16px; }
.fiat-payout-dialog > h2 { display: none; }
.fiat-payout-dialog > div:not(.dialog-actions) { display: flex; min-width: 0; min-height: 0; flex: 1; padding: 0; overflow: hidden; }
.fiat-payout-dialog .dialog-actions { display: none; }
.payout-flow { display: flex; min-width: 0; min-height: 100%; flex: 1; flex-direction: column; color: #151b2a; background: #fff; }
.payout-header { position: relative; display: grid; min-height: 64px; flex: 0 0 auto; place-items: center; border-bottom: 1px solid #e5e8ee; background: #fff; }
.payout-steps { display: flex; align-items: center; gap: 10px; color: #a4adbd; font-size: 17px; font-weight: 600; }
.payout-steps .active { color: #121827; }
.payout-steps b { color: #a6afbd; font-size: 25px; font-weight: 400; line-height: 16px; }
.payout-close { position: absolute; top: 17px; right: 20px; width: 31px; height: 31px; padding: 0; border: 0; color: #101725; font-size: 28px; line-height: 26px; background: transparent; }
.payout-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: 359px minmax(0, 1fr); }
.payout-recipients { min-width: 0; padding: 16px 24px; border-right: 1px solid #e5e8ee; overflow-y: auto; }
.payout-search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid #dbe1ea; border-radius: 4px; color: #151d2c; background: #fff; }
.payout-search span { font-size: 23px; line-height: 1; }
.payout-search input { min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; color: #242c3c; font: inherit; background: transparent; }
.payout-search input::placeholder { color: #778399; }
.payout-recipient-card { position: relative; display: grid; width: 100%; gap: 4px; margin-top: 8px; padding: 13px 15px 12px; border: 1px solid #dfe4ec; border-radius: 5px; color: #1b2434; text-align: left; background: #fff; }
.payout-recipient-card:hover, .payout-recipient-card.selected { border-color: #3478ef; background: #edf4ff; }
.payout-recipient-card.selected::after { position: absolute; top: 0; right: 0; width: 20px; height: 20px; border-radius: 0 4px 0 16px; content: '✓'; color: #fff; font-size: 12px; text-align: center; background: #3478ef; }
.payout-recipient-card strong { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.payout-recipient-card strong i { width: 7px; height: 7px; border-radius: 50%; background: #1dbb83; }
.payout-recipient-card span { overflow: hidden; color: #252e40; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.payout-recipient-card small { overflow: hidden; color: #59667c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.payout-recipient-card .payout-recipient-account { margin-top: 2px; color: #7b879b; }
.payout-recipient-card em { position: absolute; right: 8px; bottom: 9px; padding: 2px 5px; border: 1px solid #c9d1dd; border-radius: 3px; color: #455267; font-size: 9px; font-style: normal; background: #fff; }
.payout-recipient-card .payout-owner { right: 62px; color: #fff; border-color: #3478ef; background: #3478ef; }
.payout-empty { margin: 18px 0; color: #8a95a7; font-size: 12px; }
.payout-main { min-width: 0; padding: 16px 24px 20px; overflow-y: auto; }
.payout-alert { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; padding: 8px 11px; border: 1px solid #6d9fff; border-radius: 4px; color: #1e2738; font-size: 12px; background: #f7faff; }
.payout-alert span { color: #3478ef; font-size: 16px; }
.payout-amount-card { padding: 14px 15px 11px; border: 1px solid #dce3ed; border-radius: 4px; background: #fff; }
.payout-amount-card > label, .payout-received > label { display: flex; align-items: baseline; gap: 5px; color: #283348; font-size: 12px; font-weight: 500; }
.payout-amount-card > label small { color: #6f7c91; font-size: 11px; font-weight: 400; }
.payout-amount-input { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.payout-amount-input input { min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; color: #111827; font-size: 31px; font-weight: 600; background: transparent; }
.payout-amount-input input::-webkit-outer-spin-button, .payout-amount-input input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.payout-amount-input select, .payout-received select { min-width: 126px; padding: 10px 11px; border: 1px solid #d6dde8; border-radius: 5px; color: #1e2737; font-size: 14px; font-weight: 600; background: #fff; }
.payout-slider { display: block; width: 100%; margin: 24px 0 7px; accent-color: #3478ef; }
.payout-slider-labels { display: flex; justify-content: space-between; color: #66748a; font-size: 11px; }
.payout-rate { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: #29354a; font-size: 12px; }
.payout-rate i { width: 20px; height: 20px; border: 2px solid #397bf4; border-radius: 50%; background: #fff; }
.payout-select-field { display: grid; gap: 7px; margin: 14px 0; color: #6f7c91; font-size: 12px; }
.payout-select-field select { width: 100%; padding: 12px 13px; border: 1px solid #dce2eb; border-radius: 4px; color: #253047; font: inherit; background: #fff; }
.payout-fee { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: #8993a5; font-size: 12px; }
.payout-fee b { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #111827; border-radius: 50%; color: #111827; font-size: 14px; font-weight: 400; }
.payout-received { padding: 12px 15px; border: 1px solid #dce3ed; border-radius: 4px; }
.payout-received > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.payout-received strong { color: #111827; font-size: 29px; font-weight: 600; }
.payout-received select { color: #7d889a; background: #f6f7f9; }
.payout-limit { display: flex; justify-content: space-between; margin: 9px 0 16px; color: #7c8799; font-size: 11px; }
.payout-limit b { color: #1e2735; font-weight: 500; }
.payout-error { min-height: 16px; margin: 5px 0 0; color: #c23e51; font-size: 11px; }
.payout-footer { display: flex; gap: 10px; flex: 0 0 auto; padding: 16px 24px 32px; border-top: 1px solid #e5e8ee; background: #fff; }
.payout-footer button { min-height: 44px; flex: 1; }
.payout-footer .button-primary:disabled { cursor: not-allowed; color: #9ca5b4; background: #dfe3e9; }
.payout-confirm { min-width: 0; flex: 1; padding: 22px 24px; overflow-y: auto; }
.payout-confirm-hint { margin: 0 0 18px; color: #778398; font-size: 12px; }
.payout-confirm-recipient h2, .payout-confirm-summary h2 { margin: 0 0 9px; color: #263146; font-size: 14px; }
.payout-confirm-recipient .payout-recipient-card { max-width: 100%; margin-top: 0; }
.payout-confirm-summary { margin-top: 18px; padding: 16px; border-radius: 7px; background: #f7f8fa; }
.payout-confirm-meta { display: grid; gap: 12px; margin: 0; padding: 14px 16px; border-radius: 7px; background: #f7f8fa; }
.payout-confirm-meta div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.payout-confirm-meta dt { color: #7b8799; font-size: 11px; }
.payout-confirm-meta dd { margin: 0; color: #263146; font-size: 12px; text-align: right; overflow-wrap: anywhere; }
.payout-declaration { min-width: 0; flex: 1; padding: 22px 24px; overflow-y: auto; }
.payout-declaration-alert { display: flex; gap: 10px; margin: 0 0 18px; padding: 13px 15px; border: 1px solid #ffb15c; border-radius: 7px; color: #5f4a30; background: #fff8ef; font-size: 13px; line-height: 1.45; }
.payout-declaration-alert span { color: #f08322; font-size: 18px; }
.payout-declaration-form { display: grid; gap: 12px; }
.payout-declaration-field { display: grid; gap: 6px; color: #707c90; font-size: 12px; }
.payout-declaration-field input, .payout-declaration-field select { min-height: 48px; box-sizing: border-box; padding: 10px 13px; border: 1px solid #dbe1ea; border-radius: 6px; color: #263146; background: #fff; font: inherit; }
.payout-declaration-form .payout-error { min-height: 18px; margin: 0; }
.history-category-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid #e3e8f0; overflow-x: auto; }
.history-category-tabs button { flex: 0 0 auto; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; color: #606d83; background: transparent; font-weight: 600; }
.history-category-tabs button[aria-selected="true"] { border-bottom-color: #367af6; color: #367af6; }
.payee-source-tabs { display: flex; gap: 8px; margin: 12px 0; }
.payee-source-tabs button { padding: 8px 12px; border: 1px solid #e1e6ef; border-radius: 6px; color: #536077; background: #fff; }
.payee-source-tabs button[aria-selected="true"] { border-color: #367af6; color: #367af6; background: #f2f6ff; }
.payout-confirm-summary dl { display: grid; gap: 13px; margin: 0; }
.payout-confirm-summary dl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.payout-confirm-summary dt { color: #7b8799; font-size: 11px; }
.payout-confirm-summary dd { margin: 0; color: #263146; font-size: 12px; text-align: right; }
@media (max-width: 700px) { .fiat-payout-dialog { width: 100vw; border-radius: 0; }.payout-workspace { display: flex; flex-direction: column; overflow-y: auto; }.payout-recipients { max-height: 270px; border-right: 0; border-bottom: 1px solid #e5e8ee; }.payout-main { overflow: visible; padding: 16px; }.payout-footer { padding-right: 16px; padding-left: 16px; }.payout-confirm { padding: 18px 16px; }.payout-confirm-summary dl div { grid-template-columns: 120px minmax(0, 1fr); } }

/* Digital asset withdrawal follows the compact Withdraw / Confirm Figma drawer. */
.crypto-withdraw-dialog { display: flex; width: min(576px, 100vw); height: 100dvh; max-height: none; padding: 0; overflow: hidden; border-radius: 16px 0 0 16px; }
.crypto-withdraw-dialog > h2 { display: none; }
.crypto-withdraw-dialog > div:not(.dialog-actions) { display: flex; min-width: 0; min-height: 0; flex: 1; padding: 0; overflow: hidden; }
.crypto-withdraw-dialog .dialog-actions { display: none; }
.crypto-withdraw-flow { display: flex; min-width: 0; min-height: 100%; flex: 1; flex-direction: column; color: #151b2a; background: #fff; }
.crypto-withdraw-header { position: relative; display: grid; min-height: 64px; flex: 0 0 auto; place-items: center; border-bottom: 1px solid #e5e8ee; background: #fff; }
.crypto-withdraw-steps { display: flex; align-items: center; gap: 10px; color: #a4adbd; font-size: 17px; font-weight: 600; }
.crypto-withdraw-steps .active { color: #111827; }
.crypto-withdraw-steps b { color: #a4adbd; font-size: 25px; font-weight: 400; line-height: 16px; }
.crypto-withdraw-close { position: absolute; top: 17px; right: 20px; width: 31px; height: 31px; padding: 0; border: 0; color: #101725; font-size: 28px; line-height: 26px; background: transparent; }
.crypto-withdraw-content { display: grid; align-content: start; gap: 16px; min-width: 0; flex: 1; padding: 16px 24px; overflow-y: auto; }
.crypto-withdraw-field { display: grid; gap: 0; min-width: 0; color: #6f7c91; font-size: 12px; }
.crypto-withdraw-field > select, .crypto-withdraw-field > input { width: 100%; height: 64px; padding: 0 15px; border: 1px solid #dce2eb; border-radius: 4px; outline: 0; color: #263147; font: inherit; background: #fff; }
.crypto-withdraw-field > select:focus, .crypto-withdraw-field > input:focus { border-color: #6d9fff; box-shadow: 0 0 0 2px rgb(54 122 246 / 12%); }
.crypto-withdraw-field > input::placeholder { color: #6f7c91; opacity: 1; }
.crypto-withdraw-amount { gap: 4px; padding: 11px 15px; border: 1px solid #dce2eb; border-radius: 4px; }
.crypto-withdraw-amount > div { display: flex; align-items: center; gap: 10px; height: 34px; padding-left: 0; border: 0; border-radius: 0; }
.crypto-withdraw-amount > div:focus-within { border-color: transparent; box-shadow: none; }
.crypto-withdraw-amount input { min-width: 0; flex: 1; height: 100%; padding: 0; border: 0; outline: 0; color: #111827; font-size: 16px; background: transparent; }
.crypto-withdraw-amount input::-webkit-outer-spin-button, .crypto-withdraw-amount input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.crypto-withdraw-amount select { align-self: stretch; width: 126px; margin: 0; padding: 0 10px; border: 1px solid #d6dde8; border-radius: 5px; color: #1e2737; font: inherit; font-weight: 600; background: #fff; }
.crypto-withdraw-error { min-height: 17px; margin: -6px 0 0; color: #c23e51; font-size: 11px; }
.crypto-withdraw-footer { display: flex; gap: 10px; flex: 0 0 auto; padding: 16px 24px 32px; border-top: 1px solid #e5e8ee; background: #fff; }
.crypto-withdraw-footer button { min-height: 44px; flex: 1; }
.crypto-withdraw-footer .button-primary:disabled { cursor: not-allowed; color: #9ca5b4; background: #dfe3e9; }
.crypto-withdraw-confirm { min-width: 0; flex: 1; padding: 22px 24px; overflow-y: auto; }
.crypto-withdraw-hint { margin: 0 0 18px; color: #778398; font-size: 12px; line-height: 1.5; }
.crypto-withdraw-summary { padding: 16px; border-radius: 7px; background: #f7f8fa; }
.crypto-withdraw-summary h2 { margin: 0 0 14px; color: #263146; font-size: 14px; }
.crypto-withdraw-summary dl { display: grid; gap: 14px; margin: 0; }
.crypto-withdraw-summary dl div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.crypto-withdraw-summary dt { color: #7b8799; font-size: 11px; }
.crypto-withdraw-summary dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #263146; font-size: 12px; text-align: right; }
.crypto-withdraw-summary code { overflow-wrap: anywhere; color: #34435a; font: 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.crypto-withdraw-approval { margin: 16px 0 0; padding: 12px; border: 1px solid #dbe7fb; border-radius: 5px; color: #52627a; font-size: 11px; background: #f5f9ff; }
@media (max-width: 560px) { .crypto-withdraw-dialog { width: 100vw; border-radius: 0; }.crypto-withdraw-content, .crypto-withdraw-confirm { padding-right: 16px; padding-left: 16px; }.crypto-withdraw-footer { padding-right: 16px; padding-left: 16px; }.crypto-withdraw-summary dl div { grid-template-columns: 120px minmax(0, 1fr); } }

/* Withdrawal method selector and payout recipient onboarding. Both flows use
   the same right-hand drawer treatment as the existing financial dialogs. */
.withdraw-choice-dialog { display: flex; width: min(560px, 100vw); height: 100dvh; max-height: none; padding: 0; overflow: hidden; border-radius: 16px 0 0 16px; }
.withdraw-choice-dialog > h2 { display: none; }
.withdraw-choice-dialog > div:not(.dialog-actions) { display: flex; min-width: 0; min-height: 0; flex: 1; padding: 0; overflow: hidden; }
.withdraw-choice-dialog .dialog-actions { display: none; }
.withdraw-choice-flow { display: flex; min-width: 0; min-height: 100%; flex: 1; flex-direction: column; color: #151b2a; background: #fff; }
.withdraw-choice-header, .payout-add-header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 70px; flex: 0 0 auto; border-bottom: 1px solid #e6e9ef; background: #fff; }
.withdraw-choice-header h2, .payout-add-header h1 { margin: 0; color: #111827; font-size: 20px; font-weight: 600; }
.withdraw-choice-header button, .payout-add-header button { position: absolute; top: 18px; right: 20px; width: 34px; height: 34px; padding: 0; border: 0; color: #101725; font-size: 28px; line-height: 28px; background: transparent; }
.withdraw-choice-content { flex: 1; padding: 24px; overflow-y: auto; }
.withdraw-choice-intro { margin: 0 0 18px; color: #69758a; font-size: 13px; }
.withdraw-choice-cards { display: grid; gap: 14px; }
.withdraw-choice-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 13px; align-items: center; width: 100%; padding: 18px; border: 1px solid #dce3ed; border-radius: 10px; color: #192235; text-align: left; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.withdraw-choice-card:hover, .withdraw-choice-card:focus-visible { border-color: #3478ef; box-shadow: 0 0 0 2px rgb(52 120 239 / 12%); outline: 0; }
.withdraw-choice-card strong, .withdraw-choice-card small { display: block; }
.withdraw-choice-card strong { margin-bottom: 7px; font-size: 15px; font-weight: 600; }
.withdraw-choice-card small { color: #69758a; font-size: 12px; line-height: 1.5; }
.withdraw-choice-card > b { color: #111827; font-size: 28px; font-weight: 400; }
.withdraw-choice-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #3478ef; font-size: 22px; font-weight: 700; background: #edf4ff; }
.payout-add-payee { width: 100%; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #3478ef; border-radius: 5px; color: #3478ef; font-size: 12px; font-weight: 600; background: #fff; }
.payout-add-payee:hover { background: #edf4ff; }
.payout-add-header { justify-content: flex-start; padding: 0 58px; }
.payout-add-header h1 { font-size: 18px; }
.payout-add-header button:first-child { right: auto; left: 18px; font-size: 34px; line-height: 28px; }
.payout-add-content { min-width: 0; flex: 1; padding: 22px 24px 18px; overflow-y: auto; }
.payout-add-section { margin: 0 0 22px; }
.payout-add-section h2 { margin: 0 0 13px; color: #212b3e; font-size: 15px; font-weight: 600; }
.payout-owner-radios { display: flex; gap: 25px; margin-bottom: 14px; }
.payout-owner-radios label { display: flex; align-items: center; gap: 8px; color: #263146; font-size: 13px; }
.payout-owner-radios input { width: 16px; height: 16px; margin: 0; accent-color: #3478ef; }
.payout-add-field { display: grid; gap: 7px; margin: 10px 0; color: #778398; font-size: 11px; }
.payout-add-field input, .payout-add-field select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid #dce2eb; border-radius: 5px; outline: 0; color: #1e293b; font: inherit; background: #fff; }
.payout-add-field input:focus, .payout-add-field select:focus { border-color: #6d9fff; box-shadow: 0 0 0 2px rgb(54 122 246 / 12%); }
.payout-bank-details { display: grid; gap: 9px; margin: 12px 0; padding: 13px 14px; border-radius: 6px; background: #f6f8fa; }
.payout-bank-details div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.payout-bank-details span { color: #7d899b; font-size: 11px; }
.payout-bank-details b { overflow-wrap: anywhere; color: #2a3548; font-size: 11px; font-weight: 500; text-align: right; }
.payout-add-content + .payout-footer { padding-top: 13px; }
.payout-add-success { display: grid; align-content: center; justify-items: center; gap: 12px; flex: 1; padding: 30px; text-align: center; }
.payout-success-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; color: #fff; font-size: 30px; background: #1dbb83; }
.payout-add-success h2 { margin: 0; color: #1d2738; font-size: 20px; }
.payout-add-success p { max-width: 330px; margin: 0 0 12px; color: #718096; font-size: 13px; line-height: 1.55; }
.payout-add-success button { width: min(330px, 100%); }
.payee-bank-dialog { display: flex; width: min(560px, 100vw); height: 100dvh; max-height: none; padding: 0; overflow: hidden; border-radius: 16px 0 0 16px; }
.payee-bank-dialog > h2 { display: none; }
.payee-bank-dialog > div:not(.dialog-actions) { display: flex; min-width: 0; min-height: 0; flex: 1; padding: 0; overflow: hidden; }
.payee-bank-dialog .dialog-actions { display: none; }
.payee-bank-form { position: relative; display: flex; min-width: 0; min-height: 100%; flex: 1; flex-direction: column; color: #151b2a; background: #fff; }
.payee-bank-form-header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 70px; flex: 0 0 auto; padding: 0 54px; border-bottom: 1px solid #e6e9ef; }
.payee-bank-form-header h1 { margin: 0; color: #111827; font-size: 20px; font-weight: 600; }
.payee-bank-form-header button { position: absolute; top: 18px; right: 20px; width: 34px; height: 34px; padding: 0; border: 0; color: #101725; font-size: 28px; line-height: 28px; background: transparent; }
.payee-bank-form-content { min-width: 0; min-height: 0; flex: 1; padding: 22px 24px 18px; overflow-y: auto; }
.payee-bank-section { margin: 0 0 23px; }
.payee-bank-section h2 { margin: 0 0 13px; color: #212b3e; font-size: 15px; font-weight: 600; }
.payee-bank-owner { display: flex; gap: 26px; margin: 0 0 14px; }
.payee-bank-owner label { display: flex; align-items: center; gap: 8px; color: #263146; font-size: 13px; }
.payee-bank-owner input { width: 16px; height: 16px; margin: 0; accent-color: #3478ef; }
.payee-bank-field { display: grid; gap: 7px; margin: 10px 0; color: #778398; font-size: 11px; }
.payee-bank-field span { color: #778398; font-size: 11px; font-weight: 400; }
.payee-bank-field input, .payee-bank-field select { box-sizing: border-box; width: 100%; min-height: 50px; padding: 12px; border: 1px solid #dce2eb; border-radius: 5px; outline: 0; color: #1e293b; font: inherit; background: #fff; }
.payee-bank-field input:focus, .payee-bank-field select:focus { border-color: #6d9fff; box-shadow: 0 0 0 2px rgb(54 122 246 / 12%); }
.payee-bank-details { display: grid; gap: 9px; margin: 12px 0; padding: 13px 14px; border-radius: 6px; background: #f6f8fa; }
.payee-bank-details div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.payee-bank-details span { color: #7d899b; font-size: 11px; }
.payee-bank-details b { overflow-wrap: anywhere; color: #2a3548; font-size: 11px; font-weight: 500; text-align: right; }
.payee-bank-form-content [role="alert"] { min-height: 15px; margin: 4px 0 0; color: #c23e51; font-size: 11px; }
.payee-bank-form-footer { display: flex; flex: 0 0 auto; padding: 13px 24px 28px; border-top: 1px solid #e5e8ee; background: #fff; }
.payee-bank-form-footer button { width: 100%; min-height: 44px; }
.payee-bank-form-footer button:disabled { cursor: not-allowed; color: #9ca5b4; background: #dfe3e9; }
.payee-msb-overlay { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 24px; background: rgb(17 24 39 / 70%); }
.payee-msb-card { width: min(440px, 100%); padding: 30px 28px 24px; border-radius: 10px; box-shadow: 0 18px 48px rgb(15 23 42 / 24%); background: #fff; }
.payee-msb-card h2 { margin: 0 0 14px; color: #121827; font-size: 18px; }
.payee-msb-card p { margin: 0; color: #69758a; font-size: 13px; line-height: 1.6; text-align: center; }
.payee-msb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.payee-msb-actions button { min-height: 42px; border: 1px solid #aab5c7; border-radius: 8px; color: #111827; font: inherit; background: #fff; }
.payee-msb-actions .button-primary { border-color: #0b0f17; color: #fff; background: #0b0f17; }
@media (max-width: 560px) { .payee-bank-dialog { width: 100vw; border-radius: 0; }.payee-bank-form-content { padding-right: 16px; padding-left: 16px; }.payee-bank-form-footer { padding-right: 16px; padding-left: 16px; }.payee-bank-form-header { padding-left: 52px; } }
.payout-agreement-overlay { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 24px; background: rgb(17 24 39 / 42%); }
.payout-agreement-card { position: relative; width: min(440px, 100%); padding: 30px 28px 24px; border-radius: 10px; box-shadow: 0 18px 48px rgb(15 23 42 / 24%); background: #fff; }
.payout-agreement-card h2 { margin: 0 24px 14px 0; color: #121827; font-size: 18px; }
.payout-agreement-card p { margin: 0; color: #69758a; font-size: 13px; line-height: 1.6; text-align: center; }.payout-agreement-card p + p { margin-top: 10px; }.payout-agreement-card a { color: #3478ef; text-decoration: underline; }
.payout-agreement-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; padding: 0; border: 0; color: #121827; font-size: 25px; background: transparent; }
.payout-agreement-actions { display: flex; gap: 10px; margin-top: 24px; }
.payout-agreement-actions button { min-height: 42px; flex: 1; }
.crypto-withdraw-alert { display: flex; align-items: flex-start; gap: 9px; margin: -2px 0 2px; padding: 10px 12px; border: 1px solid #6d9fff; border-radius: 5px; color: #2b3a55; font-size: 12px; line-height: 1.5; background: #f7faff; }
.crypto-withdraw-alert span { flex: 0 0 auto; color: #3478ef; font-size: 16px; }
@media (max-width: 560px) { .withdraw-choice-dialog { width: 100vw; border-radius: 0; }.withdraw-choice-content, .payout-add-content { padding-right: 16px; padding-left: 16px; }.payout-add-header { padding-left: 52px; }.payout-agreement-card { padding-right: 20px; padding-left: 20px; } }

.home-heading, .section-heading, .quick-actions, .balance-split, .domain-counts, .asset-bars {
  display: flex;
  align-items: center;
}
.home-heading { justify-content: space-between; margin-bottom: 22px; }
.home-heading h1 { margin: 3px 0 0; font-size: 24px; }
.eyebrow { margin: 0; color: var(--muted); }
.quick-actions { gap: 10px; }
.quick-actions button, .filter-chips button, .section-heading button, .balance-summary button, .account-card button, .payee-toolbar button, .tabs button, .main-panel select {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: var(--surface);
}
.quick-actions button:first-child { border-color: var(--blue); color: #fff; background: var(--blue); }
.home-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.hero-balance, .account-overview, .asset-profile, .recent-transactions {
  padding: 22px;
  border: 1px solid rgb(229 231 235 / 80%);
  border-radius: 10px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 9px 28px rgb(30 41 59 / 4%);
}
.section-heading { justify-content: space-between; gap: 12px; }
.section-heading h2 { margin: 0; font-size: 15px; }
.section-heading button { padding: 4px 7px; border: 0; color: var(--blue); background: transparent; }
.hero-balance > strong { display: inline-block; margin: 24px 8px 24px 0; font-size: 32px; }
.account-overview > strong { display: inline-block; margin: 24px 7px 25px 0; font-size: 32px; }
.balance-split, .domain-counts { gap: 34px; padding-top: 16px; border-top: 1px solid var(--line); }
.balance-split span, .domain-counts span { display: grid; gap: 4px; color: var(--muted); }
.balance-split b, .domain-counts b { color: var(--ink); }
.local-dot, .global-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #667085; }
.global-dot { background: #7c3aed; }
.asset-profile, .recent-transactions { margin-top: 16px; }
.asset-bars { gap: 34px; margin-top: 18px; }
.asset-bars > div { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; flex: 1; }
.asset-bars progress { grid-column: 1 / -1; width: 100%; height: 7px; accent-color: var(--blue); }
.filter-chips { display: flex; gap: 6px; margin: 16px 0 8px; }
.filter-chips button.active { border-color: #b9dcff; color: var(--blue); background: var(--blue-pale); }
.domain-pill { display: inline-block; padding: 2px 7px; border-radius: 999px; color: #475467; font-size: 10px; font-weight: 700; background: #f2f4f7; }
.domain-pill.global { color: #6941c6; background: #f4f3ff; }
.account-card[data-domain="GLOBAL"] { border: 1px solid #ddd6fe; }
.transaction-detail { margin-top: 16px; padding: 18px; border-left: 3px solid var(--blue); background: var(--surface); }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #f79009; }
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } .asset-bars { align-items: stretch; flex-direction: column; } }
@media (max-width: 640px) { .home-heading { align-items: flex-start; flex-direction: column; gap: 14px; } .quick-actions { width: 100%; flex-wrap: wrap; } .balance-split, .domain-counts { gap: 14px; } .recent-transactions { overflow-x: auto; } }

/* Home desktop frame — aligned to Figma node 349:5843. */
.figma-shell-header {
  height: 82px;
  padding: 0 40px;
  border: 0;
  background:
    radial-gradient(circle at 68% 10%, rgb(217 232 255 / 80%) 0 2px, transparent 2.5px) 0 0 / 32px 32px,
    linear-gradient(99deg, #fff 0%, #f8f7ff 46%, #effcff 100%);
}
.figma-shell-header .portal-logo { width: 128px; }
.figma-shell-header .company-control {
  position: relative;
  display: grid;
  gap: 1px;
  width: 226px;
  margin-left: 39px;
  padding: 10px 34px 10px 16px;
  border: 1px solid #dfe4ef;
  border-radius: 7px;
  color: #20263a;
  background: rgb(255 255 255 / 88%);
}
.figma-shell-header .company-control b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.figma-shell-header .company-control small { overflow: hidden; color: #8790a5; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.figma-shell-header .company-control::after { position: absolute; top: 19px; right: 13px; font-size: 16px; }
.plus-activation {
  min-width: 225px;
  margin-left: auto;
  padding: 9px 17px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(95deg, #7254f7, #21bce6);
  box-shadow: 0 6px 16px rgb(78 90 220 / 22%);
}
.plus-activation span { margin-right: 8px; color: #ffec65; font-size: 15px; }
.figma-shell-header .header-actions { gap: 17px; margin-left: 30px; }
.figma-shell-header .header-action { color: #37415b; font-size: 12px; font-weight: 500; }
.figma-shell-header .icon-action { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #e2e5ef; border-radius: 50%; color: #5c6680; font-size: 15px; background: rgb(255 255 255 / 82%); }
.company-menu { top: 72px; left: 202px; width: 242px; border-radius: 8px; }
.company-choice { display: grid; gap: 2px; border-radius: 5px; }
.figma-shell-header .company-add-oristapay { margin-top: 7px; padding: 11px 12px; }

.portal-layout { min-height: calc(100vh - 82px); }
.figma-sidebar {
  position: relative;
  width: 270px;
  padding: 29px 24px 23px;
  border: 0;
  background: linear-gradient(135deg, #fdfdff, #f5f8ff 60%, #f4fcff);
}
.figma-nav { display: grid; gap: 5px; }
.figma-sidebar .nav-item {
  position: relative;
  height: 42px;
  margin: 0;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #4f5971;
  font-size: 12px;
  font-weight: 500;
}
.figma-sidebar .nav-item img { width: 17px; height: 17px; opacity: .72; }
.figma-sidebar .nav-item.active { border-color: #d8e8ff; color: #425171; background: rgb(255 255 255 / 90%); box-shadow: 0 3px 10px rgb(81 104 151 / 4%); }
.figma-sidebar .nav-item span { flex: 1; }
.figma-sidebar .nav-item em { min-width: 18px; padding: 1px 5px; border-radius: 12px; color: #fff; text-align: center; font-size: 10px; font-style: normal; background: #45c5e7; }
.nav-chevron { margin-left: auto; color: #68748e; font-size: 12px; font-weight: 500; cursor: pointer; transition: transform .16s ease; }
.nav-chevron[aria-expanded="false"] { transform: rotate(-90deg); }
.figma-nav-group { display: grid; gap: 2px; }
.nav-subitems { display: grid; gap: 1px; margin: 0 0 1px 42px; }
.figma-sidebar .nav-subitems[hidden] { display: none; }
.nav-subitems button { padding: 6px 0; border: 0; color: #68748e; text-align: left; font-size: 11px; background: transparent; }
.nav-subitems button:hover { color: #3478ef; }
.figma-sidebar .nav-divider { margin: 11px 0; background: #e6e9f0; }
.sidebar-role { position: absolute; bottom: 21px; left: 24px; width: calc(100% - 48px); padding: 8px 10px; border: 0; border-radius: 5px; color: #747f95; text-align: left; font-size: 10px; background: rgb(255 255 255 / 55%); }
.sidebar-role span { margin-right: 7px; color: #8b98ae; }

.main-panel { min-width: 0; padding: 33px 48px 48px; background: #f8f9fc; }
.main-panel > .page-title, .main-panel > .placeholder { display: none; }
.figma-home { max-width: 1430px; margin: 0 auto; }
.figma-home-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 26px; }
.figma-home-cta h1 { margin: 0; color: #333d56; font-size: 22px; font-weight: 500; letter-spacing: -.2px; }
.figma-action-buttons { display: flex; gap: 9px; }
.figma-action-buttons button { min-width: 90px; padding: 9px 12px; border: 0; border-radius: 5px; color: #fff; font-size: 11px; font-weight: 500; background: #30395a; box-shadow: 0 2px 5px rgb(36 47 79 / 13%); }
.figma-action-buttons button:hover { background: #47567f; }
.figma-action-buttons span { margin-right: 7px; color: #c6d7ff; font-size: 13px; }
.figma-balance-tiles { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.figma-tile { min-height: 144px; padding: 22px 23px; border: 1px solid #ecedf3; border-radius: 10px; background: #fff; box-shadow: 0 9px 20px rgb(31 47 83 / 3%); }
.figma-total-tile { color: #fff; border-color: transparent; background: linear-gradient(112deg, #5169ed, #6b6de5 42%, #895add 100%); box-shadow: 0 12px 26px rgb(90 91 225 / 23%); }
.figma-tile-label { display: flex; align-items: center; gap: 8px; color: rgb(255 255 255 / 85%); font-size: 11px; }
.figma-tile-label select { margin-left: auto; padding: 0 15px 0 0; border: 0; color: #fff; font-size: 11px; background: transparent; }
.figma-tile-label option { color: #17213b; }
.figma-tile-label button { padding: 0; border: 0; color: #fff; background: transparent; }
.figma-total-tile > strong { display: block; margin-top: 27px; color: #fff; font-size: 26px; font-weight: 500; letter-spacing: -.7px; }
.figma-breakdown-tile h2, .figma-panel h2, .figma-quote-panel h2 { margin: 0; color: #35405a; font-size: 12px; font-weight: 600; }
.figma-tile-content { display: flex; align-items: center; gap: 19px; margin-top: 16px; }
.figma-donut { position: relative; display: block; width: 74px; height: 74px; flex: 0 0 74px; border-radius: 50%; background: conic-gradient(#5281f2 0 var(--available), #a894f3 var(--available) 100%); }
.figma-donut::after { position: absolute; inset: 13px; border-radius: 50%; content: ''; background: #fff; }
.figma-donut.assets { background: conic-gradient(#50cfd2 0 var(--available), #ffba74 var(--available) 100%); }
.figma-legend { display: grid; gap: 8px; width: 100%; }
.figma-legend p { display: grid; grid-template-columns: 8px 1fr; column-gap: 7px; margin: 0; color: #7f899c; font-size: 10px; }
.figma-legend b { grid-column: 2; margin-top: 2px; color: #3e4962; font-size: 10px; font-weight: 500; }
.legend-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; }
.legend-dot.blue { background: #5281f2; }.legend-dot.purple { background: #a894f3; }.legend-dot.teal { background: #50cfd2; }.legend-dot.orange { background: #ffba74; }
.figma-home-columns { display: grid; grid-template-columns: minmax(0, 2.16fr) minmax(286px, .84fr); gap: 20px; align-items: start; }
.figma-main-column, .figma-side-column { display: grid; gap: 20px; }
.figma-panel, .figma-quote-panel { overflow: hidden; border: 1px solid #edf0f5; border-radius: 10px; background: #fff; box-shadow: 0 8px 19px rgb(31 47 83 / 3%); }
.figma-panel > header, .figma-quote-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 19px 21px 10px; }
.figma-panel header small { color: #a4adbe; font-size: 10px; }
.figma-panel header > button, .figma-quote-panel header > button { padding: 0; border: 0; color: #7d8ca7; font-size: 10px; background: transparent; }
.figma-panel header > button:hover, .figma-quote-panel header > button:hover { color: #4a74cf; }
.figma-panel header b { margin-left: 4px; font-size: 14px; }
.figma-tabs { display: flex; gap: 11px; padding: 6px 21px 10px; border-bottom: 1px solid #edf0f5; overflow-x: auto; }
.figma-tabs button { flex: 0 0 auto; padding: 4px 10px; border: 1px solid transparent; border-radius: 4px; color: #828c9e; font-size: 10px; background: #fff; }
.figma-tabs button.active { border-color: #e6ebff; color: #5874df; background: #f2f5ff; }
.figma-table-scroll { overflow-x: auto; }
.figma-table { min-width: 740px; color: #59647b; font-size: 10px; }
.figma-table th { padding: 11px 13px; color: #9ba3b4; text-align: left; font-size: 9px; font-weight: 500; background: #fbfcff; }
.figma-table td { padding: 11px 13px; border-top: 1px solid #f0f1f5; vertical-align: middle; }
.figma-table td small { color: #9ba3b4; font-size: 9px; }
.figma-table td b { display: inline-block; margin-left: 5px; color: #4b556c; font-weight: 500; }
.figma-table td > small { display: block; margin: 2px 0 0 27px; }
.figma-table .positive { color: #36a58a; white-space: nowrap; }
.figma-link, .figma-detail-icon { padding: 0; border: 0; color: #567be1; font-size: 10px; background: transparent; }
.figma-detail-icon { float: right; color: #aab2c2; }
.figma-total-row td { color: #3f4b63; font-weight: 500; background: #fafbfe; }
.asset-coin { display: inline-grid; width: 20px; height: 20px; margin-right: 6px; place-items: center; border-radius: 50%; color: #fff; font-style: normal; font-size: 9px; background: #4bccd6; }
.asset-coin.fiat { background: #6d85ed; }
.asset-icon { display: inline-grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; line-height: 1; font-family: Arial, sans-serif; font-size: 13px; font-weight: 700; }
.asset-icon-stablecoin { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%), 0 1px 2px rgb(24 41 76 / 12%); }
.asset-icon-usdt { background: #26a17b; }
.asset-icon-usdc { background: #2775ca; }
.asset-icon-fiat { position: relative; width: 25px; height: 25px; overflow: hidden; font-size: 0; font-weight: 400; background: #f7f8fa; }
.asset-icon-usd { border: 1px solid #d9deea; background: repeating-linear-gradient(to bottom, #b22234 0 10%, #fff 10% 20%); }
.asset-icon-usd::before { position: absolute; inset: 0 auto auto 0; width: 47%; height: 53%; content: ''; background: #3c3b6e; }
.asset-icon-usd::after { position: absolute; top: 1px; left: 2px; content: '✦'; color: #fff; font-size: 7px; line-height: 1; }
.asset-icon-hkd { background: #de2910; }
.asset-icon-hkd::after { position: absolute; inset: 0; display: grid; place-items: center; content: '✦'; color: #fff; font-size: 14px; line-height: 1; }
.asset-icon-cnh { background: #de2910; }
.asset-icon-cnh::after { position: absolute; top: 4px; left: 5px; content: '★'; color: #ffde00; font-size: 12px; line-height: 1; }
.asset-icon-unknown { color: #fff; font-size: 10px; background: #8792a7; }
.asset-inline { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.asset-inline .asset-icon { width: 20px; height: 20px; flex-basis: 20px; font-size: 11px; }
.asset-inline .asset-icon-fiat { font-size: 17px; }
.figma-quote-panel { padding-bottom: 17px; }.figma-quote-panel header { padding-bottom: 17px; }.figma-quote-panel header > button { padding: 7px 10px; border-radius: 4px; color: #fff; background: #4f66d9; }
.quote-field { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 5px; margin: 0 18px; padding: 10px 12px; border: 1px solid #e6e9f0; border-radius: 6px; }.quote-field span { color: #9aa3b5; font-size: 9px; }.quote-field strong { color: #46516a; font-size: 14px; font-weight: 500; }.quote-field button { grid-row: 1 / span 2; grid-column: 2; padding: 0; border: 0; color: #59647a; font-size: 10px; background: transparent; }
.quote-swap { display: block; width: 25px; height: 25px; margin: -3px auto; border: 1px solid #e1e5ee; border-radius: 50%; color: #73819b; background: #fff; }

@media (max-width: 1100px) { .figma-shell-header { padding: 0 24px; }.figma-sidebar { width: 230px; padding: 25px 16px; }.figma-home-columns { grid-template-columns: 1fr; }.figma-side-column { grid-template-columns: 1fr 1fr; }.main-panel { padding: 28px; } }
@media (max-width: 780px) { .figma-shell-header { height: auto; min-height: 68px; flex-wrap: wrap; padding: 12px 16px; }.figma-shell-header .company-control { margin-left: 16px; }.plus-activation { margin-left: auto; }.portal-layout { min-height: 0; }.figma-sidebar { width: 100%; display: block; }.figma-nav { display: flex; overflow-x: auto; }.figma-sidebar .nav-item { min-width: max-content; }.figma-nav-group, .nav-subitems, .figma-sidebar .nav-divider, .sidebar-role { display: none; }.figma-balance-tiles, .figma-side-column { grid-template-columns: 1fr; }.figma-home-cta { align-items: flex-start; flex-direction: column; }.main-panel { padding: 22px 16px; } }
@media (max-width: 560px) { .figma-shell-header .company-control { order: 3; width: calc(100% - 145px); margin: 0; }.plus-activation { min-width: 0; padding: 9px; font-size: 10px; }.figma-shell-header .header-actions { margin-left: 0; }.figma-action-buttons { width: 100%; flex-wrap: wrap; }.figma-action-buttons button { flex: 1 1 42%; }.figma-balance-tiles { grid-template-columns: 1fr; } }

/* Corrected 1440px Home reference supplied by the user. */
.correct-reference-header { height: 64px; padding: 0 16px; background: linear-gradient(100deg, #fff 0%, #faf9ff 52%, #f0fbff 100%); }
.correct-reference-header .portal-logo { width: 100px; }
.correct-reference-header .company-control { width: 287px; height: 48px; margin-left: 27px; padding: 9px 37px 9px 13px; border-color: #e2e5ec; background: #fff; }
.correct-reference-header .company-control b { font-size: 13px; }.correct-reference-header .company-control small { display: inline; margin-left: 10px; color: #3977ed; font-size: 11px; }.correct-reference-header .company-control::after { top: 14px; }
.correct-reference-header .header-actions { gap: 18px; margin-left: auto; }.correct-reference-header .header-action { padding: 0; font-size: 13px; }.correct-reference-header .icon-action { width: auto; height: auto; border: 0; border-radius: 0; background: transparent; }.notification-action { color: #090d1b !important; font-size: 15px !important; }.notification-action::first-letter { color: #ee4269; }.signout-action { display: none; }
.company-menu { top: 59px; left: 143px; }
.portal-layout { min-height: calc(100vh - 64px); }
.figma-sidebar { width: 240px; }
.correct-reference-sidebar.figma-sidebar { width: 240px; padding: 12px 16px 16px; background: linear-gradient(119deg, #fff 0%, #fbfcff 32%, #edf5ff 75%, #e8edff 100%); }
.correct-reference-sidebar .figma-nav { gap: 4px; }.correct-reference-sidebar .nav-item { height: 40px; padding: 0 11px; color: #080b16; font-weight: 500; }.correct-reference-sidebar .nav-item img { width: 16px; height: 16px; opacity: .9; }.correct-reference-sidebar .nav-item.active { border-color: #c6dcff; color: #101525; background: #fff; box-shadow: 0 2px 7px rgb(68 100 150 / 7%); }.correct-reference-sidebar .nav-subitems { margin: 3px 0 3px 39px; gap: 12px; }.correct-reference-sidebar .nav-subitems button { padding: 1px 0; color: #1e2535; font-size: 12px; }.correct-reference-sidebar .nav-divider { margin: 13px 0; }.correct-reference-sidebar .sidebar-role { display: none; }
.help-center { position: absolute; bottom: 17px; left: 20px; padding: 4px; border: 0; color: #101525; font-size: 12px; background: transparent; }.help-center span { margin-right: 10px; font-size: 16px; }
.main-panel { padding: 25px 32px 40px; background: #f5f5f6; }.figma-home { max-width: none; }.figma-home-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 16px; }.figma-home-greeting { margin: 0; }.figma-home-greeting h1 { margin: 0; color: #0c0e18; font-size: 19px; font-weight: 500; }.figma-home-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 8px; }.figma-home-actions button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 17px; border: 0; border-radius: 9px; color: #fff; font-size: 13px; font-weight: 500; background: #151c2a; box-shadow: 0 3px 7px rgb(17 28 49 / 12%); cursor: pointer; }.figma-home-actions button:hover { background: #283348; }.figma-home-actions button span { font-size: 20px; line-height: 1; }
.correct-reference-home .figma-balance-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }.correct-reference-home .figma-tile { min-height: 112px; padding: 15px 16px; border: 0; border-radius: 12px; box-shadow: none; }.correct-reference-home .figma-total-tile { color: #111624; background: linear-gradient(110deg, #f5edff, #fff 58%, #f5fbff); }.correct-reference-home .figma-tile-label { color: #141827; font-size: 12px; font-weight: 500; }.correct-reference-home .figma-tile-label select { margin-left: 7px; padding: 4px 20px 4px 8px; border: 1px solid #e0e2e8; border-radius: 4px; color: #151928; background: #fff; }.correct-reference-home .figma-tile-label button { margin-left: 2px; color: #737b8d; }.correct-reference-home .figma-total-tile > strong { margin-top: 15px; color: #111624; font-size: 30px; font-weight: 500; }.correct-reference-home .figma-breakdown-tile h2 { color: #171a27; font-size: 12px; }.correct-reference-home .figma-tile-content { gap: 17px; margin-top: 10px; }.correct-reference-home .figma-donut { width: 54px; height: 54px; flex-basis: 54px; }.correct-reference-home .figma-donut::after { inset: 9px; }.correct-reference-home .figma-legend { gap: 7px; }.correct-reference-home .figma-legend p { font-size: 12px; }.correct-reference-home .figma-legend b { margin-top: 0; color: #1c2232; font-size: 12px; font-weight: 500; }
.figma-home-content-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(300px, .95fr); gap: 16px; align-items: start; margin-bottom: 16px; }.correct-reference-transactions { margin-bottom: 0; border: 0; border-radius: 12px; box-shadow: none; }.correct-reference-transactions > header { padding: 16px 16px 12px; }.correct-reference-transactions .figma-table { min-width: 850px; font-size: 12px; }.correct-reference-transactions .figma-table th { padding: 11px 12px; color: #747d91; font-size: 12px; background: #fff; }.correct-reference-transactions .figma-table th b { margin-left: 5px; color: #6f93ef; font-weight: 500; }.correct-reference-transactions .figma-table td { padding: 10px 12px; border-top: 0; }.correct-reference-transactions .figma-table tbody tr:nth-child(even) { background: #f8f8f9; }.figma-table .numeric { text-align: right; }.transaction-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }.transaction-status i { width: 8px; height: 8px; border-radius: 50%; background: #a4adbe; }.transaction-status.success i { background: #22c58b; }.correct-reference-transactions .figma-detail-icon { float: none; color: #3375fa; font-size: 15px; }
.figma-home-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 363px; gap: 16px; align-items: start; }.correct-reference-assets { border: 0; border-radius: 12px; box-shadow: none; }.correct-reference-assets > header { padding: 14px 16px 8px; }.correct-reference-assets .figma-tabs { gap: 15px; padding: 6px 16px 9px; border-bottom: 0; }.correct-reference-assets .figma-tabs button { padding: 5px 10px; font-size: 12px; }.correct-reference-assets .figma-tabs button.active { border-color: #e3e6ed; color: #181d2c; background: #fff; }.correct-reference-assets .figma-table { min-width: 620px; }.correct-reference-assets .figma-table th { padding: 9px 12px; color: #747d91; font-size: 12px; background: #fff; }.correct-reference-assets .figma-table td { padding: 8px 12px; border-top: 0; color: #141926; font-size: 12px; }.correct-reference-assets .asset-coin { width: 23px; height: 23px; margin-right: 7px; }.asset-name { display: inline-grid; vertical-align: middle; }.asset-name b { margin: 0 !important; }.asset-name small { color: #747d91; font-size: 10px; }.correct-reference-quote { min-height: 222px; padding: 12px 8px 8px; border: 0; border-radius: 16px; background: conic-gradient(from -52deg at 64% 48%, #f8f9fa, #f8f9fa 39%, #f0e9fe 43%, #c6f3ff 48%, #c4f3ff 80%, #e9ebfe 91%, #f8f9fa); box-shadow: none; }.correct-reference-quote > header { padding: 0 8px 10px; }.correct-reference-quote header > button { padding: 4px 12px; border-radius: 8px; color: #fff; font-size: 12px; background: linear-gradient(93deg, #00ccff, #b28bfa); }.correct-reference-quote .quote-field { display: block; margin: 0; padding: 12px 16px; border: 0; border-radius: 12px; background: #fff; }.correct-reference-quote .quote-field > span { display: block; margin-bottom: 4px; font-size: 12px; }.correct-reference-quote .quote-field > div { display: flex; align-items: center; justify-content: space-between; }.correct-reference-quote .quote-field strong { font-family: 'Chivo Mono', 'Poppins', sans-serif; color: #22222d; font-size: 28px; font-weight: 500; }.correct-reference-quote .quote-field button { position: static; padding: 7px 10px; border: 1px solid #e5e7eb; border-radius: 12px; color: #151928; font-size: 12px; background: #fff; }.correct-reference-quote .quote-swap { position: relative; z-index: 1; width: 32px; height: 32px; margin: -4px auto; border: 1px solid #f4f4f5; color: #fff; background: #181818; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Global collection desktop page and its three-step order drawer. */
.global-collection { max-width: 1320px; margin: 0 auto; }
.collection-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.collection-heading h1 { margin: 0; color: #151927; font-size: 22px; font-weight: 600; }
.collection-eyebrow { margin: 0 0 5px; color: #778198; font-size: 11px; }
.collection-heading .button-primary { padding: 10px 17px; border-radius: 6px; box-shadow: 0 5px 12px rgb(54 122 246 / 18%); }
.collection-tabs { display: flex; gap: 24px; margin-bottom: 14px; border-bottom: 1px solid #e8ebf0; }
.collection-tabs button { padding: 0 0 11px; border: 0; border-bottom: 2px solid transparent; color: #7b8497; font-size: 13px; background: transparent; }
.collection-tabs button[aria-selected="true"] { border-color: #3478ef; color: #1b2435; font-weight: 600; }
.collection-card { overflow: hidden; border: 1px solid #e9ebf0; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgb(38 54 88 / 3%); }
.collection-toolbar { display: flex; gap: 10px; align-items: center; padding: 16px; border-bottom: 1px solid #edf0f4; }
.collection-toolbar input, .collection-toolbar select, .collection-drawer input, .collection-drawer select, .collection-drawer textarea { width: 100%; padding: 9px 10px; border: 1px solid #dde2ea; border-radius: 6px; color: #242b3b; font: inherit; background: #fff; }
.collection-search { width: min(360px, 100%); }
.collection-clear { padding: 8px 5px; border: 0; color: #4d78da; background: transparent; }
.collection-row-action { padding: 5px 7px; border: 0; color: #3b76dd; font: inherit; background: transparent; }
.collection-list-notice { margin: 12px 16px 0; padding: 9px 11px; border: 1px solid #dbe8ff; border-radius: 6px; color: #426391; font-size: 11px; background: #f5f9ff; }
.collection-table { min-width: 760px; color: #414a5c; }
.collection-table th { padding: 12px 16px; color: #7c8494; text-align: left; font-size: 11px; font-weight: 500; background: #fbfcfd; }
.collection-table td { padding: 14px 16px; border-bottom: 1px solid #f0f1f4; vertical-align: middle; }
.collection-table tr:last-child td { border-bottom: 0; }
.collection-table strong { color: #202738; font-weight: 600; }.collection-table small { display: block; margin-top: 3px; color: #939bac; }
.collection-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; color: #677085; font-size: 11px; background: #f2f4f7; }.collection-status::before { width: 6px; height: 6px; border-radius: 50%; content: ''; background: currentColor; }.collection-status.processing { color: #9a6800; background: #fff6dd; }.collection-status.completed { color: #16865b; background: #e8f8f0; }
.collection-drawer { position: fixed; z-index: 12; top: 0; right: 0; display: flex; flex-direction: column; width: min(530px, 100vw); height: 100dvh; border-left: 1px solid #e4e7ee; background: #fff; box-shadow: -16px 0 42px rgb(20 30 54 / 16%); }
.collection-method-content { display: grid; gap: 14px; padding: 28px; }
.collection-method-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 22px; border: 1px solid #dfe4ec; border-radius: 10px; color: #1d2535; text-align: left; background: #fff; cursor: pointer; }
.collection-method-card:hover, .collection-method-card:focus-visible { border-color: #3279ef; box-shadow: 0 0 0 2px rgb(50 121 239 / 14%); outline: 0; }
.collection-method-card strong { font-size: 15px; font-weight: 600; }
.collection-method-card span { grid-column: 1; color: #7a8497; font-size: 12px; line-height: 1.55; }
.collection-method-card b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 28px; font-weight: 400; }
.collection-drawer > header { display: flex; align-items: flex-start; justify-content: space-between; padding: 25px 28px 17px; border-bottom: 1px solid #edf0f3; }.collection-drawer header span { color: #8390a7; font-size: 11px; }.collection-drawer header h1 { margin: 5px 0 0; color: #1d2535; font-size: 20px; font-weight: 600; }.collection-drawer header button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; color: #758096; font-size: 25px; line-height: 1; background: #f4f6f9; }
.collection-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0; padding: 18px 28px; list-style: none; border-bottom: 1px solid #edf0f3; }.collection-steps li { display: flex; align-items: center; gap: 6px; color: #9aa2b2; font-size: 10px; white-space: nowrap; }.collection-steps span { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid #dfe3e9; border-radius: 50%; font-size: 10px; }.collection-steps .active { color: #3177ee; font-weight: 600; }.collection-steps .active span { border-color: #3177ee; color: #fff; background: #3177ee; }.collection-steps .complete { color: #238963; }.collection-steps .complete span { border-color: #99dec1; background: #e9f8ef; }
.collection-drawer-content { flex: 1; padding: 23px 28px; overflow-y: auto; }.collection-drawer-content h2 { margin: 0; color: #202838; font-size: 17px; }.collection-drawer-content > p { margin: 7px 0 21px; color: #788399; line-height: 1.55; }.collection-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 12px; }.collection-drawer label { display: grid; gap: 7px; color: #4f596d; font-size: 12px; }.collection-span-two { grid-column: 1 / -1; }.collection-drawer textarea { resize: vertical; }.collection-field-error { margin: 7px 0 0; color: #c43c4d; font-size: 11px; }.collection-agreement { display: flex !important; grid-template-columns: 16px 1fr; align-items: start; gap: 9px !important; margin-top: 20px; padding: 13px; border-radius: 7px; color: #59647a !important; line-height: 1.5; background: #f7f9fc; }.collection-agreement input { width: 16px; margin: 2px 0 0; }
.collection-account-section { margin-bottom: 23px; }.collection-account-section h2 { margin-bottom: 13px; font-size: 15px; }.collection-owner-radios { display: flex; gap: 26px; margin-bottom: 14px; }.collection-owner-radios label { display: flex; align-items: center; gap: 8px; color: #263146; font-size: 13px; }.collection-owner-radios input { width: 16px; height: 16px; margin: 0; accent-color: #3478ef; }.collection-data-field { display: grid !important; gap: 7px !important; margin: 10px 0; color: #778398 !important; font-size: 11px !important; }.collection-data-field span { color: #778398; font-weight: 400; }.collection-data-field input, .collection-data-field select { box-sizing: border-box; width: 100%; min-height: 50px; padding: 12px; border: 1px solid #dce2eb; border-radius: 5px; color: #1e293b; font: inherit; background: #fff; }.collection-bank-details { display: grid; gap: 9px; margin: 12px 0; padding: 13px 14px; border-radius: 6px; background: #f6f8fa; }.collection-bank-details div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: baseline; }.collection-bank-details span { color: #7d899b; font-size: 11px; }.collection-bank-details b { overflow-wrap: anywhere; color: #2a3548; font-size: 11px; font-weight: 500; text-align: right; }
.collection-bank-card, .collection-input-card, .collection-confirmation, .collection-amount-card, .collection-source-amount { margin-bottom: 16px; padding: 16px; border: 1px solid #e7eaf0; border-radius: 9px; background: #fff; }.collection-bank-card { border-color: #dbe8ff; background: linear-gradient(135deg, #f8fbff, #fff); }.collection-bank-card h3, .collection-input-card h3 { margin: 0 0 13px; color: #30394d; font-size: 13px; }.collection-bank-card dl, .collection-confirmation dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }.collection-bank-card dl div, .collection-confirmation dl div { min-width: 0; }.collection-bank-card dt, .collection-confirmation dt { margin-bottom: 4px; color: #8b94a7; font-size: 10px; }.collection-bank-card dd, .collection-confirmation dd { margin: 0; overflow-wrap: anywhere; color: #30394a; font-size: 12px; font-weight: 500; }.collection-input-card { display: grid; gap: 13px; }.collection-input-card p { margin: -5px 0 0; color: #788399; font-size: 11px; }.collection-attachment { padding: 10px; border: 1px dashed #cbd4e3; border-radius: 6px; color: #8792a8; text-align: left; font: inherit; background: #f9fafc; }.collection-source-amount { display: flex; align-items: baseline; justify-content: space-between; border-color: #e3dfff; background: #fbfaff; }.collection-source-amount span, .collection-amount-card span { color: #788399; font-size: 11px; }.collection-source-amount strong { color: #39305d; font-size: 18px; }.collection-amount-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.collection-amount-card { display: grid; gap: 6px; margin: 0; border: 0; background: linear-gradient(112deg, #f2f5ff, #faf7ff 55%, #effbff); }.collection-amount-card strong { color: #1d2638; font-size: 20px; font-weight: 600; }.collection-rate { margin: -5px 0 16px !important; color: #66738c !important; font-size: 11px; }
.collection-drawer footer { display: flex; justify-content: flex-end; gap: 10px; padding: 17px 28px; border-top: 1px solid #edf0f3; }.collection-drawer footer .button-primary { min-width: 138px; padding: 10px 17px; }.collection-drawer footer [data-control="collection-submit-order"] { width: 100%; }
@media (max-width: 640px) { .collection-heading { align-items: flex-start; flex-direction: column; }.collection-toolbar { align-items: stretch; flex-wrap: wrap; }.collection-search { width: 100%; }.collection-table { min-width: 680px; }.collection-card { overflow-x: auto; }.collection-drawer-content, .collection-drawer > header, .collection-drawer footer { padding-right: 18px; padding-left: 18px; }.collection-steps { padding-right: 18px; padding-left: 18px; gap: 2px; }.collection-steps li { font-size: 9px; }.collection-field-grid, .collection-bank-card dl, .collection-confirmation dl { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .correct-reference-sidebar.figma-sidebar { width: 220px; }.figma-home-bottom { grid-template-columns: 1fr; }.correct-reference-quote { max-width: none; }.correct-reference-home .figma-balance-tiles { grid-template-columns: 1fr; } }
@media (max-width: 780px) { .correct-reference-header .company-control { width: 230px; margin-left: 14px; }.correct-reference-sidebar.figma-sidebar { width: 100%; }.help-center { display: none; }.main-panel { padding: 18px 14px; } }

/* MSB application status banner shown on Home after a non-Hong Kong payee triggers Global Accounts onboarding. */
.home-msb-review { display: grid; gap: 22px; margin: 0 0 20px; padding: 20px 24px; border: 1px solid transparent; border-radius: 14px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(96deg, #37c9ed, #6d7cff 55%, #d4b4ff) border-box; box-shadow: 0 7px 18px rgb(77 98 174 / 7%); }
.home-msb-review-copy h2 { margin: 0 0 7px; color: #111827; font-size: 20px; font-weight: 600; }
.home-msb-review-copy p { margin: 0; color: #263047; font-size: 14px; line-height: 1.45; }
.home-msb-review-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.15fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.home-msb-review-steps li { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; color: #606b7f; font-size: 13px; font-weight: 500; white-space: nowrap; }
.home-msb-review-steps li:not(:last-child)::after { height: 3px; flex: 1; margin: 0 14px 0 9px; border-radius: 999px; content: ''; background: #dfe5ed; }
.home-msb-review-steps li.complete { color: #111827; }
.home-msb-review-steps li.complete::after { background: linear-gradient(90deg, #1fc68e, #27c9b5); }
.home-msb-review-steps li.active { color: #111827; }
.home-msb-review-steps span { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 600; background: linear-gradient(145deg, #55bfff, #9b73f6); }
.home-msb-review-steps li.complete span { background: #2acb8c; }
@media (max-width: 780px) { .home-msb-review { padding: 17px; }.home-msb-review-steps { grid-template-columns: 1fr; gap: 12px; }.home-msb-review-steps li:not(:last-child)::after { display: none; } }

/* Home reference layout: keep Recent transition and Quick quote on one row. */
.figma-home-content-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(300px, .95fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.correct-reference-transactions { margin-bottom: 0; }
.quote-chart { height: 90px; margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: rgb(255 255 255 / 82%); }
.quote-chart svg { display: block; width: 100%; height: 100%; }
.quote-chart polyline { fill: none; stroke: #27c78b; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
@media (max-width: 1100px) { .figma-home-content-row { grid-template-columns: 1fr; } }
@media (max-width: 780px) { .figma-home-topline { align-items: flex-start; flex-direction: column; gap: 14px; }.figma-home-actions { width: 100%; }.figma-home-actions button { flex: 1 1 0; justify-content: center; padding: 0 10px; } }
.figma-home-content-row { align-items: stretch; }

/* Keep the Recent transition scrollbar anchored to the bottom edge of its
   white card, even when the card is stretched to match Quick quote. */
.correct-reference-transactions { display: flex; min-height: 0; flex-direction: column; }
.correct-reference-transactions .figma-table-scroll { min-height: 0; flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; }

/* Home action routing drawer: choose asset type, then account, before opening
   the existing deposit, conversion, or withdrawal flow. */
.home-action-dialog, .home-financial-dialog { display: flex; width: min(560px, 100vw); height: 100dvh; max-height: none; padding: 0; overflow: hidden; border-radius: 16px 0 0 16px; }
.home-action-dialog > h2, .home-financial-dialog > h2 { display: none; }
.home-action-dialog > div:not(.dialog-actions), .home-financial-dialog > div:not(.dialog-actions) { display: flex; min-width: 0; min-height: 0; flex: 1; padding: 0; overflow: hidden; }
.home-action-dialog .dialog-actions, .home-financial-dialog .dialog-actions { display: none; }
.home-financial-dialog > div:not(.dialog-actions) { padding: 24px; overflow-y: auto; }
.home-action-flow { display: flex; min-width: 0; min-height: 100%; flex: 1; flex-direction: column; color: #161d2d; background: #fff; }
.home-action-header { display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 0 22px; border-bottom: 1px solid #edf0f4; }
.home-action-header h1 { margin: 0; color: #111827; font-size: 19px; font-weight: 600; }
.home-action-header > button { width: 31px; height: 31px; padding: 0; border: 0; color: #111827; font-size: 27px; line-height: 25px; background: transparent; }
.home-action-header > button:first-child { font-size: 30px; font-weight: 300; }
.home-action-content { flex: 1; padding: 25px 24px 28px; overflow-y: auto; }
.home-action-intro { margin: 0 0 20px; color: #707c91; font-size: 13px; line-height: 1.55; }
.home-action-choice-list, .home-action-account-list { display: grid; gap: 12px; }
.home-action-choice, .home-action-account { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; padding: 17px 16px; border: 1px solid #e0e5ed; border-radius: 11px; color: #151c2a; text-align: left; background: #fff; cursor: pointer; }
.home-action-choice:hover, .home-action-account:hover { border-color: #77a9ff; background: #f7faff; box-shadow: 0 3px 10px rgb(52 107 208 / 8%); }
.home-action-choice-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 10px; color: #3279ef; font-size: 22px; background: #eef5ff; }
.home-action-choice-copy, .home-action-account > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 3px; }
.home-action-choice-copy strong, .home-action-account strong { overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.home-action-choice-copy small, .home-action-account small { color: #78849a; font-size: 11px; line-height: 1.35; }
.home-action-choice > b, .home-action-account > b { color: #1c2434; font-size: 24px; font-weight: 400; }
.home-action-account { gap: 12px; padding: 14px 15px; }
.home-action-account .domain-pill { margin: 0; }
.home-action-empty { padding: 24px 16px; border: 1px dashed #d5dce7; border-radius: 10px; color: #768197; text-align: center; background: #fafbfc; }
.home-action-section-title { margin: 24px 0 12px; color: #1d2637; font-size: 14px; font-weight: 600; }
.home-action-selected { display: grid; gap: 4px; padding: 15px 16px; border: 1px solid #dce8ff; border-radius: 10px; background: #f5f9ff; }
.home-action-selected span { color: #70809a; font-size: 11px; }.home-action-selected strong { color: #1d2a42; font-size: 14px; }.home-action-selected small { color: #70809a; font-size: 11px; }
.home-action-info-card { margin-top: 18px; padding: 18px; border: 1px solid #e0e6ef; border-radius: 10px; background: #fafbfc; }.home-action-info-card h2 { margin: 0 0 9px; color: #1a2436; font-size: 15px; }.home-action-info-card p { margin: 0 0 20px; color: #6f7b90; font-size: 12px; line-height: 1.55; }.home-action-info-card button { width: 100%; }
@media (max-width: 560px) { .home-action-dialog, .home-financial-dialog { width: 100vw; border-radius: 0; }.home-action-content, .home-financial-dialog > div:not(.dialog-actions) { padding-right: 16px; padding-left: 16px; } }

/* OristaPay account onboarding entry. The demo ends at member type selection. */
.onboarding-members-page { width: min(720px, 100%); }
.onboarding-members-header { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 24px; }
.onboarding-back { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; margin-top: 2px; padding: 0; border: 1px solid #e2e7f0; border-radius: 9px; color: #273249; font-size: 26px; line-height: 1; background: #fff; }
.onboarding-back:hover { border-color: #8db6ff; color: #3279ef; }
.onboarding-eyebrow { display: block; margin-bottom: 7px; color: #758198; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.onboarding-members-header h1 { margin: 0 0 7px; color: #172238; font-size: 25px; font-weight: 600; }
.onboarding-members-header p { margin: 0; color: #718098; font-size: 13px; line-height: 1.5; }
.onboarding-member-options { display: grid; gap: 12px; padding: 20px; border: 1px solid #e4e9f2; border-radius: 12px; background: #fff; box-shadow: 0 7px 18px rgb(39 58 92 / 4%); }
.onboarding-member-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 17px 16px; border: 1px solid #e0e6ef; border-radius: 10px; color: #172238; text-align: left; background: #fff; }
.onboarding-member-card:hover { border-color: #77a9ff; background: #f7faff; box-shadow: 0 3px 10px rgb(52 107 208 / 8%); }
.onboarding-member-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 10px; color: #3279ef; font-size: 22px; background: #eef5ff; }
.onboarding-member-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
.onboarding-member-copy strong { font-size: 15px; font-weight: 600; }
.onboarding-member-copy small { color: #78849a; font-size: 12px; line-height: 1.45; }
.onboarding-member-card > b { color: #1c2434; font-size: 24px; font-weight: 400; }
.onboarding-demo-notice { margin: 14px 0 0; padding: 13px 15px; border-radius: 8px; color: #6f7b90; font-size: 12px; line-height: 1.5; background: #f5f7fb; }
@media (max-width: 560px) { .onboarding-members-header h1 { font-size: 21px; }.onboarding-member-options { padding: 14px; } }

/* Basic-only upsell banner shown directly below the Home greeting. */
.home-upgrade-banner { display: flex; align-items: stretch; justify-content: space-between; gap: 28px; min-height: 182px; margin: 0 0 16px; padding: 24px 30px; overflow: hidden; border: 1px solid rgb(255 255 255 / 72%); border-radius: 24px; background: radial-gradient(circle at 68% 20%, rgb(255 255 255 / 76%), transparent 36%), linear-gradient(110deg, #cbd8ff 0%, #d6d8ff 35%, #e4e7ff 57%, #d9f5ff 100%); box-shadow: inset 0 -18px 35px rgb(255 255 255 / 20%), 0 8px 22px rgb(82 103 174 / 11%); }
.home-upgrade-copy { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; align-items: flex-start; }
.home-upgrade-copy h2 { margin: 0 0 10px; color: #080d1b; font-size: clamp(24px, 2.15vw, 34px); font-weight: 500; letter-spacing: -.8px; line-height: 1.1; }
.home-upgrade-copy p { max-width: 760px; margin: 0; color: #111827; font-size: 14px; line-height: 1.55; }
.home-upgrade-action { margin-top: auto; padding: 12px 28px; border: 0; border-radius: 15px; color: #fff; font-size: 14px; font-weight: 500; background: #11151f; box-shadow: 0 4px 9px rgb(17 21 31 / 18%); cursor: pointer; }
.home-upgrade-action:hover { background: #273044; }
.home-upgrade-card { width: min(44%, 620px); flex: 0 1 620px; align-self: center; padding: 20px 28px; border: 1px solid rgb(255 255 255 / 90%); border-radius: 24px; background: rgb(255 255 255 / 76%); box-shadow: 0 8px 20px rgb(102 125 189 / 8%); }
.home-upgrade-card h3 { margin: 0 0 13px; color: #111624; font-size: 22px; font-weight: 500; }
.home-upgrade-card ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.home-upgrade-card li { display: flex; align-items: center; gap: 12px; color: #161c2a; font-size: 14px; line-height: 1.3; }
.home-upgrade-card li > span { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 50%; color: #fff; font-size: 16px; background: linear-gradient(145deg, #45b9f6, #8e7df4); }
.home-upgrade-card li em { margin-left: 3px; padding: 3px 7px; border: 1px solid #c8ccd5; border-radius: 6px; color: #525a6b; font-size: 11px; font-style: normal; background: rgb(255 255 255 / 72%); }
@media (max-width: 980px) { .home-upgrade-banner { gap: 18px; padding: 20px; }.home-upgrade-card { width: 46%; padding: 17px 20px; }.home-upgrade-card li { font-size: 12px; } }
@media (max-width: 700px) { .home-upgrade-banner { flex-direction: column; }.home-upgrade-card { width: auto; flex-basis: auto; }.home-upgrade-action { margin-top: 18px; } }
.collection-field-wide { grid-column: 1 / -1; }
.collection-data-drawer .collection-drawer-content { overflow:auto; max-height:calc(100vh - 170px); }
.collection-data-field { display:block; margin:14px 0; color:#6b7485; font-weight:600; }
.collection-data-field input { display:block; width:100%; margin-top:7px; padding:14px; border:1px solid #dbe1ea; border-radius:8px; font:inherit; color:#111827; box-sizing:border-box; }
.button-danger { border:1px solid #ef4444; color:#ef4444; background:#fff; padding:12px 20px; border-radius:8px; }
.collection-inline-add { display:block; margin-top:8px; }
.collection-create-reference { padding:20px; }
.collection-create-card { background:#f8f9fb; border-radius:12px; padding:18px; margin-bottom:14px; }
.collection-create-card h2 { margin:0 0 14px; }
.collection-create-card label { display:block; margin-top:12px; color:#6b7485; }
.collection-create-card input, .collection-create-card select { display:block; width:100%; box-sizing:border-box; margin-top:6px; padding:13px; border:1px solid #dbe1ea; border-radius:8px; background:#fff; }
.collection-amount-input { display:flex; gap:12px; background:#fff; border:1px solid #dbe1ea; border-radius:8px; padding:10px; }
.collection-amount-input input { border:0; margin:0; font-size:32px; font-weight:700; flex:1; }
.collection-amount-input select { width:120px; margin:0; }
.collection-rate-banner { display:flex; justify-content:space-between; padding:14px 8px; font-size:14px; }

/* My assets reference layout. The account/action data contract remains the
   same as the working Demo; these rules only present it in the approved
   account-card layout. */
.accounts-reference-view { width: 100%; max-width: 1480px; }
.accounts-reference-view .page-title { margin-bottom: 18px; font-size: 22px; }
.accounts-total-card { margin-bottom: 16px; padding: 17px 22px 20px; border: 1px solid #e6ebf2; border-radius: 11px; background: #fff; box-shadow: 0 7px 18px rgb(39 58 92 / 4%); }
.accounts-total-toolbar { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.accounts-total-toolbar > button { padding: 7px 11px; border: 1px solid #e1e6ef; border-radius: 6px; color: #253149; background: #fff; }
.accounts-total-toolbar > button:hover { border-color: #8db6ff; background: #f7faff; }
.accounts-total-toolbar > strong { margin-left: auto; color: #1c2a42; font-size: 12px; font-weight: 600; }
.accounts-currency select { min-width: 76px; padding: 7px 25px 7px 10px; border: 1px solid #e1e6ef; border-radius: 6px; color: #253149; background: #fff; }
.accounts-total-body { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0 0; }
.accounts-total-label { display: block; margin-bottom: 7px; color: #6f7c90; font-size: 12px; font-weight: 500; }
.accounts-total-value { display: block; color: #111b2d; font-size: 30px; font-weight: 600; letter-spacing: -.7px; }
.accounts-total-breakdown { display: flex; align-items: center; gap: 24px; margin-right: 10%; }
.accounts-donut { position: relative; display: block; width: 92px; height: 92px; flex: 0 0 92px; border-radius: 50%; background: conic-gradient(#3f7cf3 0 var(--stable), #5bd2ee var(--stable) calc(var(--stable) + var(--fiat)), #e9edf4 calc(var(--stable) + var(--fiat)) 100%); }
.accounts-donut::after { position: absolute; inset: 13px; border-radius: 50%; content: ''; background: #fff; }
.accounts-total-breakdown dl { display: grid; gap: 9px; min-width: 225px; margin: 0; }
.accounts-total-breakdown dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.accounts-total-breakdown dt, .accounts-total-breakdown dd { margin: 0; color: #69758a; font-size: 12px; }
.accounts-total-breakdown dt { display: flex; align-items: center; gap: 7px; }
.accounts-total-breakdown dd { color: #26334b; font-weight: 600; white-space: nowrap; }
.accounts-total-breakdown dd small { color: #8490a2; font-weight: 500; }
.stable-dot, .fiat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; content: ''; }
.stable-dot { background: #3f7cf3; }.fiat-dot { background: #5bd2ee; }
.accounts-reference-card { margin-bottom: 14px; padding: 0; overflow: hidden; border: 1px solid #e5eaf1; border-radius: 10px; background: #fff; box-shadow: 0 6px 16px rgb(39 58 92 / 3%); }
.accounts-reference-card.account-card[data-domain="GLOBAL"] { border-color: #ddd6fe; }
.accounts-reference-card .account-card-header { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 13px 20px; border-bottom: 1px solid #edf0f4; }
.accounts-reference-card .account-collapse { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; padding: 0; border: 1px solid #e3e8f0; border-radius: 6px; color: #536077; background: #fff; }
.accounts-reference-card .account-collapse:hover, .accounts-reference-card .asset-collapse:hover { border-color: #79a9ff; color: #3279ef; }
.account-identity { display: grid; min-width: 0; gap: 3px; }
.account-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.accounts-reference-card .account-name-row .domain-pill { margin-left: 0; }
.account-name-row strong { overflow-wrap: anywhere; color: #172238; font-size: 14px; font-weight: 600; }
.accounts-reference-card .account-status { color: var(--success) !important; font-size: 11px; white-space: nowrap; }
.accounts-reference-card .account-number { margin: 0 !important; color: #7c8799 !important; font-size: 11px; }
.account-estimate { display: grid; gap: 3px; margin-left: auto; text-align: right; }
.account-estimate span { margin: 0 !important; color: #7a8597 !important; font-size: 11px; }
.account-estimate strong { color: #24334c; font-size: 13px; font-weight: 600; }
.account-type-tabs { display: flex; gap: 5px; padding: 13px 20px 8px; }
.account-type-tabs button { padding: 8px 14px; border: 1px solid transparent; border-radius: 999px; color: #657187; background: transparent; }
.account-type-tabs button.active, .account-type-tabs button[aria-selected="true"] { border-color: #e2e7ef; color: #243149; font-weight: 600; background: #fff; box-shadow: 0 2px 6px rgb(34 50 78 / 7%); }
.accounts-table-wrap { width: 100%; overflow-x: auto; }
.accounts-asset-table { width: 100%; min-width: 800px; margin: 0 !important; border-collapse: collapse; }
.accounts-asset-table th, .accounts-asset-table td { padding: 11px 20px !important; border-top: 1px solid #edf0f4; text-align: left; vertical-align: middle; }
.accounts-asset-table th { color: #7b8698; font-size: 11px; font-weight: 500; white-space: nowrap; }
.accounts-asset-table td { color: #27354c; font-size: 12px; }
.accounts-asset-table tbody tr:nth-child(even) { background: #fbfcfe; }
.accounts-asset-table .asset-total-row td:nth-child(2) { font-weight: 600; }
.accounts-asset-table .asset-network-row td:first-child { min-width: 140px; }
.accounts-asset-table .asset-network-row td:nth-child(2) { color: #4d5b72; font-weight: 500; }
.accounts-asset-table .asset-network-row .account-actions { background: #fbfcfe; }
.accounts-asset-table td:nth-child(n+3):not(:last-child) { text-align: right; white-space: nowrap; }
.accounts-asset-table th:nth-child(n+3):not(:last-child) { text-align: right; }
.asset-cell { display: flex; align-items: center; gap: 9px; min-width: 140px; }
.asset-cell > span.asset-name { display: grid; gap: 2px; }
.asset-cell strong { color: #223049; font-size: 12px; font-weight: 600; }
.asset-cell small { color: #8b95a6 !important; font-size: 10px; }
.accounts-reference-card .asset-collapse { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; padding: 0; border: 1px solid #e4e9f0; border-radius: 5px; color: #66738a; background: #fff; }
.accounts-asset-table .account-actions { min-width: 190px; text-align: right !important; white-space: nowrap; }
.accounts-asset-table .account-action { padding: 5px 6px; border: 0; color: #367af6; font-size: 12px; background: transparent; }
.accounts-asset-table .account-action:hover { color: #1e61d6; text-decoration: underline; }
.accounts-empty { padding: 24px 20px !important; color: #8a95a7 !important; text-align: center !important; }
.accounts-reference-card .scenario-controls { margin: 0; padding: 12px 20px 14px; border-top: 1px solid #edf0f4; }
.accounts-reference-card .scenario-controls button { margin-right: 7px; padding: 6px 10px; border: 1px solid #e0e6ef; border-radius: 6px; color: #367af6; background: #fff; }
.accounts-reference-card .scenario-controls button:hover { border-color: #8db6ff; background: #f7faff; }
.accounts-reference-card.collapsed .account-card-header { border-bottom: 0; }
@media (max-width: 900px) { .accounts-total-breakdown { margin-right: 0; }.accounts-reference-card .account-card-header { padding-right: 14px; padding-left: 14px; }.accounts-asset-table th, .accounts-asset-table td { padding-right: 14px !important; padding-left: 14px !important; } }
@media (max-width: 640px) { .accounts-total-toolbar { align-items: stretch; flex-wrap: wrap; }.accounts-total-toolbar > strong { width: 100%; margin: 2px 0 0; order: 5; }.accounts-total-body { align-items: flex-start; flex-direction: column; }.accounts-total-breakdown { width: 100%; justify-content: space-between; }.accounts-total-breakdown dl { min-width: 0; flex: 1; }.account-estimate { display: none; }.account-name-row { flex-wrap: wrap; }.accounts-reference-card .account-card-header { padding: 12px; } }

/* Figma Create order spec: 576px drawer, 24px side padding, 528px cards. */
.collection-drawer:has(.collection-create-reference) { width:min(576px,100vw); border-radius:24px 0 0 24px; }
.collection-drawer:has(.collection-create-reference) > header { height:64px; box-sizing:border-box; padding:20px 24px; }
.collection-drawer:has(.collection-create-reference) .collection-steps { padding:0 24px; height:40px; box-sizing:border-box; }
.collection-drawer:has(.collection-create-reference) .collection-drawer-content { padding:16px 24px; }
.collection-drawer:has(.collection-create-reference) .collection-create-card { width:100%; box-sizing:border-box; min-height:282px; padding:12px; border-radius:8px; }
.collection-drawer:has(.collection-create-reference) .collection-create-card h2 { font-size:13px; line-height:18px; margin:0 0 12px 4px; }
.collection-drawer:has(.collection-create-reference) .collection-amount-input { min-height:92px; border-radius:4px; padding:12px 16px; }
.collection-drawer:has(.collection-create-reference) .collection-amount-input + p { margin:0; padding:0 16px 14px; border:1px solid #dbe1ea; border-top:0; border-radius:0 0 4px 4px; background:#fff; }
.collection-drawer:has(.collection-create-reference) .collection-amount-input input,
.collection-drawer:has(.collection-create-reference) .collection-amount-input strong { font-size:32px; line-height:48px; }
.collection-drawer:has(.collection-create-reference) .collection-amount-input select { width:126px; min-height:40px; padding:8px 12px; }
.collection-drawer:has(.collection-create-reference) .collection-create-card label { margin-top:10px; font-size:12px; line-height:16px; }
.collection-drawer:has(.collection-create-reference) .collection-create-card input,
.collection-drawer:has(.collection-create-reference) .collection-create-card select { min-height:64px; padding:12px 16px; border-radius:4px; }
.collection-drawer:has(.collection-create-reference) .collection-create-card p { font-size:12px; line-height:16px; }
.collection-drawer:has(.collection-create-reference) .collection-create-card > label { box-sizing:border-box; min-height:64px; padding:11px 16px 8px; border:1px solid #dbe1ea; border-radius:4px; background:#fff; color:#687286; }
.collection-drawer:has(.collection-create-reference) .collection-create-card > label select { margin:0; min-height:28px; padding:2px 0 0; border:0; background:transparent; color:#0d1321; }
.collection-drawer:has(.collection-create-reference) .collection-rate-banner { margin:0; padding:8px 0; min-height:48px; font-size:14px; }
.collection-drawer:has(.collection-create-reference) footer { padding:16px 24px; }