/* ==========================================================================
   SAITO P2P ESCROW MODULE - AUTHENTIC SAITO DESIGN SYSTEM (escrow-base.css)
   Uses Saito's native CSS architecture from /saito/css-imports/:
   - :root { font-size: 12px } rem scale (saito-base.css)
   - .saito-container, .saito-sidebar, .saito-main (saito-page-layout.css)
   - .saito-sidebar-header, .saito-sidebar-element (saito-sidebar.css)
   - .menu .list.saito-menu-select-subtle .item (redsquare-menu.css + saito-menu.css)
   - .saito-button-primary, .saito-button-secondary, .saito-button-row (saito-buttons.css)
   - input.saito-input, select.saito-form-select (saito-form-elements.css)
   - .saito-overlay-panel, .saito-overlay-form, .saito-overlay-form-header (ui/saito-overlay.css)
   - .saito-identicon-box, .saito-identicon, .saito-address (ui/saito-user.css)
   ========================================================================== */

:root {
  --border-radius-sidebar-menu: var(--saito-radius);
  --border-radius-Variable: var(--saito-radius);
  --border-thickness-thin: 1px;
  --border-padding-normal: 1rem;
  --border-padding-wide: 2rem;
  --saito-border-color: color-mix(in srgb, var(--saito-border, #45423e) 65%, transparent);
  --saito-hover-wash: var(--saito-highlight, rgba(255, 255, 255, 0.04));
}

/* 1. Bounded Saito Workspace Scroll & Lean Minimalist Typography (nftstudio style) */
html:has(body.escrow-body) {
  font-size: 12px !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

body.escrow-body {
  --saito-width: 136rem;
  position: relative !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
  background-color: var(--saito-background) !important;
  color: var(--saito-foreground) !important;
  font-family: var(--saito-font) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
}

/* Prevent browser synthetic faux-bold ("fat" fonts) on Visuelt while preserving FontAwesome icons */
body.escrow-body *:not(i):not([class*="fa-"]) {
  font-synthesis: none !important;
}

body.escrow-body h1,
body.escrow-body h2,
body.escrow-body h3,
body.escrow-body h4,
body.escrow-body h5,
body.escrow-body h6,
body.escrow-body strong,
body.escrow-body b,
body.escrow-body th,
body.escrow-body label {
  font-family: var(--saito-font-medium, var(--saito-font));
  font-weight: 400 !important;
}

body.escrow-body [style*="font-weight"]:not(i):not([class*="fa-"]) {
  font-family: var(--saito-font-medium, var(--saito-font));
  font-weight: 400 !important;
}

body.escrow-body [style*="border-left:4px"],
body.escrow-body [style*="border-left: 4px"] {
  border-left-width: 2px !important;
}

body.escrow-body #saito-header {
  background-color: var(--saito-background) !important;
  border-bottom: 1px solid var(--saito-border-color);
  padding-left: max(2rem, calc((100vw - 136rem) / 2 + 2rem)) !important;
  padding-right: max(2rem, calc((100vw - 136rem) / 2 + 2rem)) !important;
  box-sizing: border-box !important;
  z-index: 50 !important;
}

body.escrow-body #saito-header .saito-header-logo-wrapper {
  display: flex;
  align-items: center;
}

body.escrow-body #saito-header #saito-header-menu-toggle {
  width: auto !important;
  justify-content: flex-end !important;
  padding-right: 0.25rem !important;
}

/* 2. Saito Two-Column Workspace Layout (Bounded below --saito-header-height) */
#escrow-app-root.saito-container {
  position: fixed !important;
  top: var(--saito-header-height) !important;
  left: 0 !important;
  right: 0 !important;
  display: grid !important;
  grid-template-columns: 22rem minmax(0, 1fr) !important;
  gap: 1.8rem !important;
  width: 100vw !important;
  max-width: none !important;
  height: calc(100dvh - var(--saito-header-height)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 1.6rem max(2rem, calc((100vw - 136rem) / 2 + 2rem)) 4.5rem !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none;
  align-items: start !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

#escrow-app-root.saito-container::-webkit-scrollbar {
  display: none;
}

/* 3. Left Native Saito Sidebar (.sidebar-left + Minimalist Menu) */
.sidebar-left.escrow-sidebar-left {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  position: sticky;
  top: 0;
  min-width: 0;
  padding-bottom: 6.5rem;
}

.sidebar-left .menu .list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

body.saitoverse-app.escrow-body .sidebar-left .menu .item,
body.escrow-body .sidebar-left .menu .item,
.sidebar-left .menu .item {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 1rem;
  min-height: 3.9rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--saito-radius);
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--saito-foreground);
  font-family: var(--saito-font-medium, var(--saito-font)) !important;
  font-weight: 400 !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

body.saitoverse-app.escrow-body .sidebar-left .menu .item[style*="display:none"],
body.saitoverse-app.escrow-body .sidebar-left .menu .item[style*="display: none"],
body.escrow-body .sidebar-left .menu .item[style*="display:none"],
body.escrow-body .sidebar-left .menu .item[style*="display: none"],
.sidebar-left .menu .item[style*="display:none"],
.sidebar-left .menu .item[style*="display: none"],
#tab-btn-admin[style*="display:none"],
#tab-btn-admin[style*="display: none"] {
  display: none !important;
}

.sidebar-left .menu .icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}

/* Solid crisp icons matching RedSquare & Command Center */
.sidebar-left .menu .icon i {
  font-size: 1.85rem;
  line-height: 1;
  color: var(--saito-muted-foreground);
  transition: color 0.15s ease-in-out;
}

.sidebar-left .menu .icon i::before {
  -webkit-text-stroke: 0 transparent;
  color: currentColor;
}

.sidebar-left .menu .label {
  font-family: var(--saito-font-medium, var(--saito-font)) !important;
  font-size: 1.52rem;
  font-weight: 400 !important;
  line-height: 1.3;
  color: var(--saito-foreground);
  white-space: nowrap;
}

/* .saito-menu-select-subtle hover & active states */
.sidebar-left .menu .saito-menu-select-subtle .item:hover {
  background-color: var(--saito-highlight);
  color: var(--saito-foreground);
}

.sidebar-left .menu .saito-menu-select-subtle .item.active {
  background-color: var(--saito-accent, var(--saito-card));
  border-color: color-mix(in srgb, var(--saito-primary) 38%, var(--saito-border-color));
  color: var(--saito-foreground);
}

.sidebar-left .menu .saito-menu-select-subtle .item:hover .icon i,
.sidebar-left .menu .saito-menu-select-subtle .item.active .icon i {
  color: var(--saito-primary);
}

.sidebar-left .menu .item.active .label {
  font-family: var(--saito-font-medium, var(--saito-font)) !important;
  font-weight: 400 !important;
  color: var(--saito-foreground);
}

.sidebar-left .menu .escrow-nav-count-pill {
  margin-left: auto;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  font-family: var(--saito-font-monospace, monospace);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

body.escrow-body .sidebar-left .menu #count-orderbook.escrow-nav-count-pill.is-seen,
.sidebar-left .menu .escrow-nav-count-pill.is-seen {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.22) !important;
}

.escrow-copy-link {
  cursor: pointer;
  border-bottom: 1px dotted var(--saito-border-color);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.escrow-copy-link:hover {
  color: var(--saito-foreground);
  border-bottom-color: var(--saito-primary);
}

/* Vault Reserves Sidebar Section (.saito-sidebar-header + .saito-sidebar-element) */
.escrow-vault-section .saito-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  padding: 0 0.25rem;
}

.escrow-vault-section .saito-sidebar-header .sidebar-title {
  font-family: var(--saito-font-medium, var(--saito-font));
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--saito-muted-foreground);
}

.escrow-por-list.saito-sidebar-element {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1.2rem !important;
  background: var(--saito-card) !important;
  border: 1px solid var(--saito-border-color) !important;
  border-radius: var(--saito-radius) !important;
}

.escrow-por-row {
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--saito-border-color);
}

.escrow-por-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.escrow-por-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--saito-muted-foreground);
  margin-bottom: 0.25rem;
}

.escrow-por-val {
  font-family: var(--saito-font-monospace, monospace);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--saito-foreground);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.escrow-por-sub {
  font-size: 1.12rem;
  font-weight: 400;
  color: var(--saito-muted-foreground);
  margin-top: 0.18rem;
}

/* 4. Main Workspace Column (.main) & Minimalist NFTStudio-style Panels (.saito-card + 1px --saito-border) */
.main.escrow-main-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
  width: 100%;
}

.main.escrow-main-column > .saito-sidebar-element.escrow-card {
  padding: 1.8rem 2.2rem !important;
  border-radius: var(--saito-radius) !important;
  background: var(--saito-card) !important;
  border: 1px solid var(--saito-border-color) !important;
  box-shadow: none !important;
}

/* Header Bars inside Panels (matches .nftstudio .panel-header) */
.escrow-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding-bottom: 1.3rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--saito-border-color);
}

.escrow-header-title {
  margin: 0;
  font-family: var(--saito-font-medium, var(--saito-font));
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--saito-foreground);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1.3;
}

.escrow-header-title i {
  color: var(--saito-primary);
  font-size: 1.45rem;
}

.escrow-subtitle {
  margin-top: 0.3rem;
  font-size: 1.28rem;
  font-weight: 400;
  color: var(--saito-muted-foreground);
  line-height: 1.45;
}

.escrow-controls-cluster {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.escrow-actor-box {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.9rem;
  background: var(--saito-background);
  border: 1px solid var(--saito-border-color);
  border-radius: var(--saito-radius);
  font-size: 1.2rem;
  font-weight: 400;
}

.escrow-actor-box select.saito-form-select {
  font-size: 1.2rem !important;
  min-height: 2.6rem !important;
  font-weight: 400 !important;
}

.escrow-top-btn-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

/* Segmented Filter Group (All / Sell Offers / Buy Bids) */
.escrow-segmented-group {
  display: inline-flex;
  align-items: center;
  background: var(--saito-background);
  border: 1px solid var(--saito-border-color);
  border-radius: var(--saito-radius);
  padding: 0.2rem;
  gap: 0.2rem;
}

.escrow-segmented-btn {
  padding: 0.45rem 1.05rem;
  font-family: var(--saito-font);
  font-size: 1.22rem;
  font-weight: 400;
  border-radius: calc(var(--saito-radius) - 2px);
  border: none;
  background: transparent;
  color: var(--saito-muted-foreground);
  cursor: pointer;
  transition: all 0.15s ease;
}

.escrow-segmented-btn:hover {
  color: var(--saito-foreground);
  background: var(--saito-highlight);
}

.escrow-segmented-btn.active {
  background: var(--saito-accent);
  color: var(--saito-accent-foreground);
  font-family: var(--saito-font-medium, var(--saito-font));
}

/* 5. Native Saito Buttons (.saito-button-primary / .saito-button-secondary.small) */
.saito-button-primary.small,
.saito-button-secondary.small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  padding: 0.55rem 1.15rem !important;
  min-width: 0 !important;
  min-height: 3rem !important;
  font-family: var(--saito-font-medium, var(--saito-font)) !important;
  font-size: 1.22rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  border-width: 1px !important;
}

.saito-button-primary,
.saito-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0;
  max-width: none !important;
  width: auto;
  height: auto;
  box-sizing: border-box;
  font-family: var(--saito-font-medium, var(--saito-font));
  font-weight: 400 !important;
}

/* 6. Status & Rail Badges (Lean 1px Pill) */
.escrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.72rem;
  border-radius: var(--saito-radius-sm, 0.35rem);
  font-family: var(--saito-font);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  background: var(--saito-background);
  color: var(--saito-foreground);
  border: 1px solid var(--saito-border-color);
  white-space: nowrap;
}

.escrow-badge-primary {
  background: color-mix(in srgb, var(--saito-primary) 12%, transparent);
  color: var(--saito-foreground);
  border-color: color-mix(in srgb, var(--saito-primary) 55%, transparent);
}

.escrow-badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: #4ade80;
  border-color: rgba(16, 185, 129, 0.38);
}

/* 7. Orderbook & Data Tables (Clean Hairline Rows) */
.escrow-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--saito-border-color);
  border-radius: var(--saito-radius);
  background: var(--saito-background);
}

.escrow-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 1.28rem;
  font-weight: 400;
}

.escrow-table th {
  padding: 1rem 0.95rem;
  font-family: var(--saito-font);
  font-size: 1.14rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--saito-muted-foreground);
  background: var(--saito-card);
  border-bottom: 1px solid var(--saito-border-color);
  white-space: nowrap;
}

.escrow-table td {
  padding: 1.15rem 0.95rem;
  border-bottom: 1px solid var(--saito-border-color);
  color: var(--saito-foreground);
  vertical-align: middle;
  line-height: 1.42;
  font-weight: 400;
}

.escrow-table tbody tr:last-child td {
  border-bottom: none;
}

.escrow-table tbody tr:hover td {
  background: var(--saito-highlight);
}

.escrow-cell-main {
  font-family: var(--saito-font-medium, var(--saito-font));
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--saito-foreground);
  white-space: nowrap;
}

.escrow-sub-cell {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--saito-muted-foreground);
  margin-top: 0.2rem;
}

.escrow-mono,
body.escrow-body code {
  font-family: var(--saito-font-monospace, monospace);
  font-size: 1.18rem;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

/* 8. Native Saito Forms (saito-form-elements.css) */
.escrow-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin-bottom: 1.5rem;
}

.escrow-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.escrow-field label {
  font-family: var(--saito-font);
  font-size: 1.26rem;
  font-weight: 400;
  color: var(--saito-foreground);
}

.escrow-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.35rem;
  flex-wrap: nowrap;
}

.escrow-field-label-row label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  line-height: 1.25;
  min-width: 0;
}

.saito-button-secondary.small.escrow-label-action-btn {
  padding: 0.18rem 0.65rem !important;
  min-height: 2.25rem !important;
  height: 2.25rem !important;
  font-size: 1.06rem !important;
  gap: 0.38rem !important;
  flex-shrink: 0;
}

.escrow-field input.saito-input {
  font-family: var(--saito-font) !important;
  font-size: 1.32rem !important;
  font-weight: 400 !important;
  padding: 0.85rem 1.1rem !important;
  min-height: 3.8rem !important;
  border: 1px solid var(--saito-border-color) !important;
}

.escrow-field select.saito-form-select,
.escrow-select {
  font-family: var(--saito-font) !important;
  font-size: 1.32rem !important;
  font-weight: 400 !important;
  padding: 0.85rem 2.6rem 0.85rem 1.1rem !important;
  min-height: 3.8rem !important;
  border: 1px solid var(--saito-border-color) !important;
  text-overflow: ellipsis;
}

select.saito-form-select.escrow-sort-select {
  width: auto !important;
  min-width: 0;
  max-width: 100%;
}

/* 8b. Neutral Realization Overview & Form Step Badges (1, 2, 3) */
.escrow-realization-banner {
  margin: 0 0 1rem 0;
  padding: 0.7rem 1rem;
  border-radius: var(--saito-radius);
  border: 1px solid var(--saito-border-color);
  background: var(--saito-background);
}

.escrow-realization-header {
  font-family: var(--saito-font-medium, var(--saito-font));
  font-size: 1.12rem;
  font-weight: 400;
  color: var(--saito-muted-foreground);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.escrow-realization-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.escrow-realization-step {
  display: flex;
  align-items: flex-start;
  padding: 0.55rem 0.75rem;
  border-radius: var(--saito-radius);
  border: 1px solid var(--saito-border-color);
  background: var(--saito-card);
  min-width: 0;
}

.escrow-realization-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.escrow-realization-body > strong {
  font-family: var(--saito-font-medium, var(--saito-font));
  font-size: 1.14rem;
  font-weight: 400;
  color: var(--saito-foreground);
  line-height: 1.28;
}

.escrow-realization-body > span {
  font-size: 1.06rem;
  color: var(--saito-muted-foreground);
  line-height: 1.34;
}

.escrow-form-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 999px;
  background: var(--saito-primary);
  color: var(--saito-primary-foreground);
  font-family: var(--saito-font-medium, var(--saito-font));
  font-size: 1.08rem;
  font-weight: 400;
  margin-right: 0.45rem;
  vertical-align: middle;
  flex-shrink: 0;
}

.escrow-field-hint {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--saito-muted-foreground);
  line-height: 1.42;
}

.escrow-helper-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 1.2rem 1.5rem;
  border-radius: var(--saito-radius);
  background: var(--saito-background);
  border: 1px solid var(--saito-border-color);
  font-size: 1.28rem;
  font-weight: 400;
}

/* 9. Callouts, Guides & 5-Step State Machine Cards (Minimalist 1px + 2px accent) */
.escrow-callout {
  padding: 1.35rem 1.7rem;
  border-radius: var(--saito-radius);
  background: var(--saito-background);
  border: 1px solid var(--saito-border-color);
  border-left: 2px solid var(--saito-primary);
  margin-bottom: 1.5rem;
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.55;
}

.escrow-callout-danger {
  border-left-color: var(--saito-destructive);
}

.escrow-callout-title {
  font-family: var(--saito-font-medium, var(--saito-font));
  font-size: 1.38rem;
  font-weight: 400;
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.escrow-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin-bottom: 1.8rem;
}

.escrow-guide-box {
  padding: 1.65rem 1.85rem;
  border-radius: var(--saito-radius);
  background: var(--saito-background);
  border: 1px solid var(--saito-border-color);
}

.escrow-guide-box h3 {
  margin: 0 0 1rem 0;
  font-family: var(--saito-font-medium, var(--saito-font));
  font-size: 1.45rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.escrow-guide-steps {
  margin: 0;
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 1.26rem;
  font-weight: 400;
  line-height: 1.52;
}

.escrow-trade-card {
  padding: 1.45rem 1.7rem;
  border-radius: var(--saito-radius);
  background: var(--saito-background);
  border: 1px solid var(--saito-border-color);
  margin-bottom: 1.15rem;
}

.escrow-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1.15rem 0;
}

.escrow-step {
  padding: 0.85rem 1rem;
  border-radius: var(--saito-radius-sm, 0.35rem);
  background: var(--saito-card);
  border: 1px solid var(--saito-border-color);
}

.escrow-step.current {
  border-color: var(--saito-primary);
}

.escrow-step.done {
  border-color: rgba(16, 185, 129, 0.42);
}

.escrow-step-num {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--saito-muted-foreground);
}

.escrow-step-title {
  font-family: var(--saito-font-medium, var(--saito-font));
  font-size: 1.18rem;
  font-weight: 400;
  margin-top: 0.2rem;
}

/* 10. Interactive Beginner Walkthrough Box */
.escrow-onboarding-card {
  padding: 1.8rem 2.2rem;
  border-radius: var(--saito-radius);
  background: var(--saito-card);
  border: 1px solid var(--saito-border-color);
  color: var(--saito-foreground);
}

.escrow-onboarding-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.2rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--saito-border-color);
}

.escrow-onboarding-title-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  min-width: 0;
}

.escrow-onboarding-heading {
  margin: 0;
  font-family: var(--saito-font-medium, var(--saito-font));
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--saito-foreground);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1.3;
}

.escrow-onboarding-step-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: var(--saito-background);
  border: 1px solid var(--saito-border-color);
  color: var(--saito-muted-foreground);
  font-family: var(--saito-font-monospace, monospace);
  font-size: 1.1rem;
  font-weight: 400;
  white-space: nowrap;
}

.escrow-onboarding-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.escrow-onboarding-steps-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.escrow-onboarding-nav-btns {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.escrow-onboarding-pill {
  padding: 0.5rem 1.05rem;
  border-radius: var(--saito-radius);
  border: 1px solid var(--saito-border-color);
  background: var(--saito-background);
  color: var(--saito-muted-foreground);
  font-family: var(--saito-font);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.15s ease;
}

.escrow-onboarding-pill.active,
.escrow-onboarding-pill:hover {
  background: var(--saito-accent);
  border-color: var(--saito-border-color);
  color: var(--saito-accent-foreground);
}

.escrow-onboard-body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.escrow-onboard-lead {
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.52;
  color: var(--saito-foreground);
  background: var(--saito-background);
  border: 1px solid var(--saito-border-color);
  border-left: 2px solid var(--saito-primary);
  padding: 0.9rem 1.25rem;
  border-radius: var(--saito-radius);
}

.escrow-onboard-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}

.escrow-glossary-grid,
.escrow-choice-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}

.escrow-onboard-mini,
.escrow-glossary-item,
.escrow-choice-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--saito-radius);
  background: var(--saito-background);
  border: 1px solid var(--saito-border-color);
  font-size: 1.26rem;
  font-weight: 400;
  line-height: 1.52;
  color: var(--saito-foreground);
}

.escrow-onboard-mini-title,
.escrow-glossary-term,
.escrow-choice-card-title {
  margin: 0 0 0.5rem 0;
  font-family: var(--saito-font-medium, var(--saito-font));
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--saito-foreground);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  line-height: 1.35;
}

.escrow-onboard-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--saito-card);
  border: 1px solid var(--saito-border-color);
  color: var(--saito-foreground);
  font-size: 1.1rem;
  font-weight: 400;
  flex-shrink: 0;
}

.escrow-onboard-text {
  margin: 0;
  font-size: 1.26rem;
  font-weight: 400;
  line-height: 1.52;
  color: var(--saito-muted-foreground);
}

.escrow-choice-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.escrow-choice-card-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding-top: 0.9rem;
  border-top: 1px solid var(--saito-border-color);
}

.escrow-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;
  border-radius: var(--saito-radius);
  border: 1px solid var(--saito-border-color);
  background: var(--saito-background);
  color: var(--saito-muted-foreground);
  font-family: var(--saito-font);
  font-size: 1.2rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.15s ease;
}

.escrow-close-btn:hover {
  border-color: var(--saito-border);
  color: var(--saito-foreground);
  background: var(--saito-highlight);
}

/* 11. Native SaitoOverlay (.saito-overlay-panel + .saito-overlay-form) Sizing */
.saito-overlay-form.escrow-overlay-form {
  width: min(84rem, 94vw) !important;
  max-height: 86vh !important;
  overflow-y: auto !important;
  padding: 1.8rem 2.2rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.35rem !important;
  font-family: var(--saito-font) !important;
  font-size: 1.28rem !important;
  font-weight: 400 !important;
  background: var(--saito-card) !important;
  border: 1px solid var(--saito-border-color) !important;
  border-radius: var(--saito-radius) !important;
}

.saito-overlay-form.escrow-overlay-form > * {
  flex-shrink: 0 !important;
}

.saito-overlay-form.escrow-overlay-form .saito-overlay-form-header {
  height: auto !important;
  min-height: 4.2rem !important;
  padding: 0.85rem 1.35rem !important;
  margin-bottom: 0 !important;
  border-radius: var(--saito-radius) !important;
}

.saito-overlay-form.escrow-overlay-form .saito-overlay-form-header-title {
  position: static !important;
  transform: none !important;
  font-family: var(--saito-font-medium, var(--saito-font)) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  white-space: normal !important;
}

.saito-overlay-form.escrow-overlay-form .saito-overlay-form-text {
  font-size: 1.28rem !important;
  font-weight: 400 !important;
  line-height: 1.52 !important;
  color: var(--saito-foreground) !important;
}

/* Toast Notification */
.escrow-toast {
  position: fixed !important;
  bottom: 2.2rem !important;
  right: 2.2rem !important;
  left: auto !important;
  z-index: 200000 !important;
  max-width: min(46rem, calc(100vw - 4.4rem)) !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
  padding: 1.15rem 1.5rem !important;
  border-radius: var(--saito-radius) !important;
  background: var(--saito-popover, #191a19) !important;
  border: 1px solid var(--saito-border-color) !important;
  border-left: 2px solid var(--saito-primary) !important;
  box-shadow: var(--saito-elevation-2) !important;
  color: var(--saito-foreground) !important;
  font-family: var(--saito-font) !important;
  font-size: 1.26rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  display: none;
}

.escrow-toast.show {
  display: block !important;
}

/* 12. Mobile & Tablet Responsive Layout (<= 1024px) */
.escrow-mobile-nav {
  display: none;
}

.escrow-mobile-header-actions {
  display: none;
}

.escrow-mobile-only-badge {
  display: none;
}

.escrow-create-helper-btns {
  display: contents;
}

.escrow-lbl-mobile {
  display: none;
}

.escrow-lbl-desktop {
  display: inline;
}

.escrow-badge-legend-col {
  min-width: 24rem;
  flex-shrink: 0;
}

@media screen and (max-width: 1024px) {
  body.escrow-body #saito-header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #escrow-app-root.saito-container {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 1rem 1rem 4.5rem 1rem !important;
    margin: 0 !important;
    gap: 0.75rem !important;
  }

  .sidebar-left.escrow-sidebar-left {
    display: none !important;
  }

  .escrow-mobile-only-badge {
    display: inline-flex !important;
    font-size: 1.02rem !important;
    padding: 0.22rem 0.6rem !important;
  }

  .main.escrow-main-column {
    gap: 0.75rem !important;
  }

  .main.escrow-main-column > .saito-sidebar-element.escrow-card {
    padding: 1rem 1.15rem !important;
    margin: 0 !important;
  }

  .escrow-top-banner-card .escrow-subtitle {
    display: none;
  }

  .escrow-top-banner-card .escrow-header-bar {
    gap: 0.55rem !important;
  }

  .escrow-title-cluster {
    width: 100%;
  }

  .escrow-controls-cluster {
    width: 100%;
    gap: 0.5rem !important;
  }

  .escrow-actor-box {
    width: 100%;
    justify-content: space-between;
    padding: 0.25rem 0.7rem;
    font-size: 1.12rem;
    box-sizing: border-box;
  }

  .escrow-actor-box select.saito-form-select {
    font-size: 1.1rem !important;
    min-height: 2.2rem !important;
    padding: 0.2rem 0.4rem !important;
  }

  /* Flexible wrapping row for all 5 top action buttons (zero text clipping) */
  .escrow-top-btn-row {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
  }

  .escrow-top-btn-row .saito-button-primary.small,
  .escrow-top-btn-row .saito-button-secondary.small {
    flex: 1 1 auto !important;
    padding: 0.45rem 0.7rem !important;
    min-height: 2.6rem !important;
    font-size: 1.06rem !important;
    gap: 0.35rem !important;
    overflow: visible !important;
  }

  .escrow-header-bar {
    padding-bottom: 0.65rem;
    margin-bottom: 0.75rem;
    gap: 0.55rem;
  }

  .escrow-header-title {
    font-size: 1.4rem !important;
  }

  /* Tablet 6-column horizontal touch nav bar (transforms to fixed bottom bar at <=600px) */
  .escrow-mobile-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.4rem;
    border-radius: var(--saito-radius);
    background: var(--saito-card);
    border: 1px solid var(--saito-border-color);
  }

  .escrow-mobile-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.35rem;
    border-radius: var(--saito-radius-sm, 0.4rem);
    border: 1px solid transparent;
    background: var(--saito-background);
    color: var(--saito-muted-foreground);
    font-family: var(--saito-font-medium, var(--saito-font));
    font-size: 1.08rem;
    font-weight: 400 !important;
    cursor: pointer;
    white-space: nowrap;
  }

  .escrow-mobile-nav-btn.active {
    background: var(--saito-accent);
    color: var(--saito-accent-foreground);
    border-color: var(--saito-primary);
  }

  .escrow-nav-count {
    font-size: 0.95rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #ef4444 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .escrow-nav-count.is-seen {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.22) !important;
  }

  .escrow-orderbook-top-left {
    gap: 0.45rem !important;
    flex-wrap: wrap !important;
  }

  .escrow-segmented-group {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
  }

  .escrow-segmented-btn {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.4rem 0.65rem;
    font-size: 1.06rem;
    white-space: nowrap;
  }

  .escrow-orderbook-top-left .saito-button-secondary.small,
  .escrow-orderbook-cta-pair .saito-button-primary.small,
  .escrow-orderbook-cta-pair .saito-button-secondary.small {
    padding: 0.45rem 0.7rem !important;
    min-height: 2.55rem !important;
    font-size: 1.08rem !important;
  }

  .escrow-orderbook-cta-pair {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem !important;
  }

  /* Compact Mobile Orderbook Cards + Full-Width Empty State Row */
  .escrow-table-wrap {
    overflow-x: hidden !important;
  }

  .escrow-table-orderbook thead,
  .escrow-table-stack-left thead {
    display: none;
  }

  .escrow-table-orderbook,
  .escrow-table-orderbook tbody,
  .escrow-table-stack-left,
  .escrow-table-stack-left tbody {
    display: block;
    width: 100%;
  }

  .escrow-table-orderbook tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
    gap: 0.45rem 0.65rem;
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--saito-border-color);
    box-sizing: border-box;
    width: 100%;
    align-items: start;
  }

  .escrow-table-orderbook tbody tr:has(td[colspan]),
  .escrow-table-stack-left tbody tr:has(td[colspan]) {
    display: block !important;
    padding: 0 !important;
  }

  .escrow-table-orderbook tbody tr td[colspan],
  .escrow-table-stack-left tbody tr td[colspan] {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 1.8rem 1.2rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 1.22rem !important;
    line-height: 1.45 !important;
  }

  .escrow-table-orderbook tbody tr td {
    padding: 0;
    border: none;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .escrow-ob-cell-side {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .escrow-ob-cell-usdt {
    text-align: right;
  }

  .escrow-ob-cell-saito .escrow-sub-cell {
    white-space: normal !important;
  }

  .escrow-ob-cell-rail {
    grid-column: 1 / -1;
    padding-top: 0.15rem !important;
  }

  .escrow-ob-cell-action {
    grid-column: 1 / -1;
    text-align: left !important;
    padding-top: 0.25rem !important;
  }

  .escrow-ob-cell-action .saito-button-primary.small,
  .escrow-ob-cell-action .saito-button-secondary.small {
    padding: 0.45rem 0.9rem !important;
    min-height: 2.5rem !important;
    font-size: 1.1rem !important;
  }

  .escrow-table-stack-left tbody tr {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--saito-border-color);
    box-sizing: border-box;
  }

  .escrow-table-stack-left tbody tr td {
    padding: 0;
    border: none;
    text-align: left !important;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .escrow-table-stack-left tbody tr td::before {
    content: attr(data-label) ": ";
    font-family: var(--saito-font-medium, var(--saito-font));
    font-weight: 400;
    color: var(--saito-muted-foreground);
  }

  .escrow-form-grid,
  .escrow-guide-grid,
  .escrow-onboard-3col,
  .escrow-glossary-grid,
  .escrow-choice-cards,
  .escrow-stepper {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* RedSquare Family Mobile Header Scaling, Helper Buttons & Badge Legend Stack (<= 768px) */
@media screen and (max-width: 768px) {
  /* Inherit global RedSquare-identical mobile #saito-header scaling from saitoverse-default-theme.css */
  html:has(body.escrow-body),
  body.escrow-body {
    --saito-header-height: 70px !important;
  }

  /* Shortened single-row helper buttons on Post Sell Offer / Post Buy Bid */
  .escrow-lbl-desktop {
    display: none !important;
  }

  .escrow-lbl-mobile {
    display: inline !important;
  }

  /* Dedicated Mobile App Shell: Replace 5-row monopage top banner with sleek 1-line Mobile App Bar */
  .escrow-desktop-header-badges,
  .escrow-controls-cluster,
  #escrow-onboarding-mount,
  .escrow-orderbook-cta-pair {
    display: none !important;
  }

  .escrow-mobile-header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }

  .escrow-mobile-header-actions > button {
    padding: 0.4rem 0.72rem !important;
    min-height: 2.5rem !important;
    font-size: 1.06rem !important;
    white-space: nowrap !important;
  }

  .main.escrow-main-column > .saito-sidebar-element.escrow-card.escrow-top-banner-card {
    padding: 0.65rem 0.9rem !important;
  }

  /* Mobile Create Offer / Buy Bid: Form 1-2-3 immediately visible at top without scrolling; Realization overview below */
  .escrow-create-flow-wrap {
    display: flex !important;
    flex-direction: column !important;
  }

  .escrow-create-form {
    order: 1 !important;
  }

  .escrow-realization-banner {
    order: 2 !important;
    padding: 0.7rem 0.85rem !important;
    margin-top: 0.85rem !important;
    margin-bottom: 0 !important;
  }

  .escrow-realization-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.45rem !important;
  }

  .escrow-realization-step {
    padding: 0.5rem 0.7rem !important;
  }

  .escrow-create-header-bar {
    padding: 0 0 0.55rem 0 !important;
    margin-bottom: 0.6rem !important;
    gap: 0.45rem !important;
  }

  .escrow-create-vault-meta {
    display: none !important;
  }

  .escrow-step-field {
    padding: 0.65rem 0.8rem !important;
    border-radius: var(--saito-radius) !important;
    border: 1px solid var(--saito-border-color) !important;
    background: var(--saito-background) !important;
  }

  .escrow-field-label-row {
    flex-wrap: wrap;
  }

  #escrow-offer-fee-preview .escrow-callout > div:nth-child(2),
  #escrow-bid-fee-preview .escrow-callout > div:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem 0.65rem !important;
    padding: 0.55rem 0.7rem !important;
  }

  #escrow-offer-fee-preview .escrow-callout,
  #escrow-bid-fee-preview .escrow-callout {
    padding: 0.7rem 0.85rem !important;
    margin: 0.55rem 0 !important;
  }

  .escrow-create-helper-btns {
    display: inline-flex !important;
    gap: 0.4rem !important;
    width: auto !important;
  }

  .escrow-create-helper-btns > button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 2.35rem !important;
    padding: 0.25rem 0.6rem !important;
    font-size: 1.02rem !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }

  /* Stack Badge Legend Overlay cards vertically so wide badges never overlap text */
  .escrow-badge-legend-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
  }

  .escrow-badge-legend-col {
    min-width: 0 !important;
    width: 100% !important;
  }

  .escrow-badge-legend-row .escrow-badge {
    white-space: normal !important;
    max-width: 100% !important;
  }

  /* High-specificity Modal Protection against Saito core .saito-overlay-panel:not(.retain-surface) padding reset */
  .saito-overlay:has(#escrow-modal-content) {
    z-index: 120 !important;
  }

  .saito-overlay-panel:has(#escrow-modal-content),
  .saito-overlay > .saito-overlay-panel:has(#escrow-modal-content) {
    width: min(96vw, 56rem) !important;
    max-width: 96vw !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #escrow-modal-content.saito-overlay-form.escrow-overlay-form {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    padding: 1.35rem 1.25rem !important;
    border: 1px solid var(--saito-border-color) !important;
    border-radius: var(--saito-radius) !important;
    background: var(--saito-card) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #escrow-modal-content.saito-overlay-form.escrow-overlay-form *:not(i):not([class*="fa-"]),
  #escrow-modal-content.saito-overlay-form.escrow-overlay-form .escrow-callout > *:not(i):not([class*="fa-"]) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #escrow-modal-content.saito-overlay-form.escrow-overlay-form .saito-overlay-form-header {
    width: calc(100% - 3.8rem) !important;
    max-width: calc(100% - 3.8rem) !important;
    margin-right: 3.8rem !important;
    padding-right: 1.1rem !important;
  }

  #escrow-modal-content .escrow-onboarding-card {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  #escrow-modal-content .escrow-onboarding-top {
    padding-right: 3.8rem !important;
  }

  #escrow-modal-content .escrow-onboarding-top .escrow-close-btn {
    display: none !important;
  }

  #escrow-modal-content.saito-overlay-form.escrow-overlay-form i,
  #escrow-modal-content.saito-overlay-form.escrow-overlay-form [class*="fa-"],
  .saito-overlay-form-header-title > i,
  .escrow-onboarding-heading > i,
  .escrow-choice-card-title > i,
  .escrow-callout-title > i {
    flex-shrink: 0 !important;
    min-width: 1.35em !important;
    text-align: center;
  }

  #escrow-modal-content.saito-overlay-form.escrow-overlay-form code {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  #escrow-modal-content.saito-overlay-form.escrow-overlay-form .escrow-mono {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  #escrow-modal-content .saito-button-row {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }

  .escrow-activity-feed-scroll {
    max-height: none !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
  }

  /* Ensure modal & form button rows wrap cleanly and never overflow on mobile */
  .saito-overlay-form.escrow-overlay-form .saito-button-primary,
  .saito-overlay-form.escrow-overlay-form .saito-button-secondary,
  .saito-overlay-form.escrow-overlay-form .saito-button-primary.small,
  .saito-overlay-form.escrow-overlay-form .saito-button-secondary.small,
  #escrow-main-view .saito-button-row .saito-button-primary,
  #escrow-main-view .saito-button-row .saito-button-secondary {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    min-height: 3.1rem !important;
    padding: 0.55rem 0.9rem !important;
    font-size: 1.14rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    text-align: center !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }

  .escrow-tos-btn-group {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
  }

  /* Action Required Banners on Mobile */
  .escrow-action-banner-text {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .escrow-action-banner-btns {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .escrow-action-banner-btns > button,
  .escrow-action-banner-btns button.saito-button-primary.small,
  .escrow-action-banner-btns button.saito-button-secondary.small {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    height: auto !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Active & Settled Trades Card & Compact Horizontal 5-Step Stepper */
  .escrow-trade-card-summary {
    text-align: left !important;
    width: 100% !important;
    padding-top: 0.55rem;
    border-top: 1px solid var(--saito-border-color);
  }

  .escrow-stepper {
    gap: 0.4rem !important;
    margin: 0.85rem 0 !important;
  }

  .escrow-step {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.6rem !important;
    padding: 0.55rem 0.85rem !important;
  }

  .escrow-step-num {
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }

  .escrow-step-title {
    text-align: right;
    min-width: 0;
  }

  .escrow-trade-card-actions {
    width: 100% !important;
  }

  .escrow-trade-card-actions > button,
  .escrow-trade-card-actions button.saito-button-primary.small,
  .escrow-trade-card-actions button.saito-button-secondary.small {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 2.9rem !important;
    padding: 0.55rem 0.7rem !important;
    font-size: 1.08rem !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Activity Log & Audit Feed cards stack text above timestamp + View Order button */
  .escrow-activity-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }

  .escrow-activity-item > div:first-child {
    min-width: 0 !important;
    width: 100% !important;
  }

  .escrow-activity-item > div:last-child {
    width: 100% !important;
    justify-content: space-between !important;
    padding-top: 0.45rem;
    border-top: 1px solid var(--saito-border-color);
  }
}

/* RedSquare Family Fixed Bottom Mobile Navigation Bar & Compact Cards (<= 600px) */
@media screen and (max-width: 600px) {
  #escrow-app-root.saito-container {
    padding: 0.75rem 0.75rem 7.2rem 0.75rem !important;
  }

  .escrow-mobile-nav {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 60 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    gap: 0.1rem !important;
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid var(--saito-border-color) !important;
    background: color-mix(in srgb, var(--saito-background) 95%, #000 5%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.35) !important;
  }

  .escrow-mobile-nav-btn {
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.15rem !important;
    padding: 0.45rem 0.1rem !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    font-size: 0.88rem !important;
    letter-spacing: -0.015em !important;
  }

  .escrow-mobile-nav-btn[style*="display:none"],
  .escrow-mobile-nav-btn[style*="display: none"] {
    display: none !important;
  }

  .escrow-mobile-nav-btn > span:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.22rem !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .escrow-mobile-nav-btn > span:first-child i {
    font-size: 1.35rem !important;
  }

  .escrow-mobile-nav-btn .escrow-nav-count {
    position: absolute !important;
    top: 0.2rem !important;
    right: 0.35rem !important;
    font-size: 0.82rem !important;
    padding: 0.02rem 0.34rem !important;
    line-height: 1.2 !important;
  }

  .escrow-mobile-nav-btn.active {
    background: var(--saito-accent) !important;
    color: var(--saito-accent-foreground) !important;
    border-color: color-mix(in srgb, var(--saito-primary) 55%, transparent) !important;
  }

  /* Compact Welcome & Overlay Modals on 360px-390px Mobile */
  .saito-overlay-panel:has(#escrow-modal-content),
  .saito-overlay > .saito-overlay-panel:has(#escrow-modal-content),
  .saito-overlay-panel:has(.escrow-overlay-form) {
    width: min(96vw, 42rem) !important;
    max-width: 96vw !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #escrow-modal-content.saito-overlay-form.escrow-overlay-form {
    padding: 1.2rem 1.05rem !important;
  }

  #escrow-modal-content.saito-overlay-form.escrow-overlay-form .saito-overlay-form-header {
    margin-right: 3.4rem !important;
    padding-right: 1.1rem !important;
  }

  #escrow-toast.escrow-toast {
    bottom: 6.4rem !important;
    left: 0.85rem !important;
    right: 0.85rem !important;
    max-width: calc(100vw - 1.7rem) !important;
  }

  .escrow-tos-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }

  .escrow-tos-btn-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0.5rem !important;
  }

  .escrow-tos-btn-group > button,
  #escrow-modal-content .saito-button-row > button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  /* Orderbook Cards on 360px-390px Phones */
  .escrow-table-orderbook tbody tr {
    padding: 0.85rem 0.75rem !important;
    gap: 0.48rem 0.5rem !important;
  }

  .escrow-ob-cell-maker > div {
    gap: 0.55rem !important;
  }

  .escrow-ob-cell-maker .saito-identicon-box {
    width: 2.35rem !important;
    height: 2.35rem !important;
  }

  .escrow-ob-cell-maker strong.escrow-mono {
    font-size: 1.08rem !important;
  }

  .escrow-table-orderbook tbody tr .escrow-badge {
    font-size: 0.92rem !important;
    padding: 0.16rem 0.46rem !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    flex-shrink: 0 !important;
  }

  .escrow-table-orderbook tbody tr .escrow-sub-cell {
    font-size: 0.98rem !important;
    white-space: nowrap !important;
  }

  .escrow-ob-cell-maker > div > div > div:first-child {
    flex-wrap: wrap !important;
    row-gap: 0.22rem !important;
  }

  .escrow-ob-cell-action > div {
    width: 100% !important;
    justify-content: stretch !important;
    gap: 0.45rem !important;
  }

  .escrow-ob-cell-action button.saito-button-primary,
  .escrow-ob-cell-action button.saito-button-secondary {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    height: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* 2x2 Filter Grid on Active & Settled Trades */
  .escrow-mytrades-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 0.35rem !important;
  }

  .escrow-mytrades-filters .escrow-segmented-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.45rem 0.4rem !important;
    font-size: 1.02rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Prevent inline min-width / minmax() grids from overflowing narrow 360px phones */
  #escrow-app-root [style*="min-width"],
  #escrow-modal-content [style*="min-width"] {
    min-width: 0 !important;
  }

  #escrow-app-root [style*="grid-template-columns"],
  #escrow-modal-content [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #escrow-offer-fee-preview .escrow-callout > div:nth-child(3),
  #escrow-bid-fee-preview .escrow-callout > div:nth-child(3) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #escrow-main-view .escrow-orderbook-top-left > h2.escrow-header-title {
    display: none !important;
  }

  #escrow-main-view code,
  #escrow-main-view .escrow-copy-link {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* [ESCROW-DESK-01] Bottom padding on left sidebar to clear floating Saito Radio pill & orderbook fit at 1024-1340px */
.sidebar-left.escrow-sidebar-left {
  padding-bottom: 5.5rem !important;
}

@media screen and (min-width: 1025px) and (max-width: 1340px) {
  .escrow-table-wrap {
    overflow-x: auto !important;
  }
  .escrow-table-orderbook th,
  .escrow-table-orderbook td {
    padding: 0.75rem 0.65rem !important;
  }
}