:root {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--sans);
  background: #f4f6f8;
  color: #0d1726;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.app {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --ink: #0d1726;
  --ink-soft: #334155;
  --muted: #667386;
  --line: #e1e6ec;
  --line-strong: #c9d2dd;
  --accent: #0c8f6c;
  --accent-strong: #0a6b51;
  --accent-soft: #e6f5ef;
  --warn: #9a5b0b;
  --warn-soft: #fdf3e2;
  --danger: #b23a3a;
  --danger-soft: #fbecec;
  --info: #2c5c8f;
  --info-soft: #eaf1f8;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(13, 23, 38, 0.04), 0 12px 34px rgba(13, 23, 38, 0.06);
  /* 100vh 在移动端浏览器（尤其 iOS Safari）是「工具栏完全收起」时的最大视口
     高，比当前可视区大，会把内容顶高、底部多出空白。优先用 dvh。 */
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

.console {
  /* color-scheme 决定浏览器原生控件（滚动条、下拉箭头、自动填充底色）的配色，
     不声明的话深色面板里会出现白色滚动槽和浅色下拉。 */
  color-scheme: dark;
  --bg: #0b1220;
  --surface: #121b2d;
  --surface-soft: #0f1728;
  --ink: #eef2f7;
  --ink-soft: #c7d2e0;
  --muted: #8fa0b6;
  --line: #223049;
  --line-strong: #334667;
  --accent: #57dfb0;
  --accent-strong: #8af0cc;
  --accent-soft: #12352c;
  --warn: #f0b968;
  --warn-soft: #332512;
  --danger: #f19a9a;
  --danger-soft: #341b1b;
  --info: #9dc4ef;
  --info-soft: #16283c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 18px 50px rgba(0, 0, 0, 0.22);
}

.checkout {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --ink: #0d1726;
  --ink-soft: #334155;
  --muted: #667386;
  --line: #e1e6ec;
  --line-strong: #c9d2dd;
  --accent: #0c8f6c;
  --accent-strong: #0a6b51;
  --accent-soft: #e6f5ef;
  --warn: #9a5b0b;
  --warn-soft: #fdf3e2;
  --danger: #b23a3a;
  --danger-soft: #fbecec;
  --info: #2c5c8f;
  --info-soft: #eaf1f8;
  --binance-orange: #f0b90b;
}

.shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 26px 24px 64px;
}

.checkout-shell {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 20px 16px calc(48px + env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.brand em {
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
}


.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--mode {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.badge--secure {
  color: var(--accent-strong);
  border-color: transparent;
  background: var(--accent-soft);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  padding: 0 12px;
  min-height: 32px;
}

.badge svg {
  width: 13px;
  height: 13px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.console-main {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.console-main .panel {
  min-width: 0;
}

.console-main--with-toc {
  grid-template-columns: minmax(0, 1fr) 176px;
  align-items: start;
}

.console-content {
  display: grid;
  gap: 18px;
  min-width: 0;
  order: 1;
}

.console-toc {
  order: 2;
  position: sticky;
  top: 18px;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.console-toc-title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.console-toc ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.console-toc a {
  display: block;
  padding: 6px 8px;
  border-radius: 7px;
  color: var(--ink-soft);
  font-size: 12px;
  text-decoration: none;
}

.console-toc a:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.address-pairs {
  display: grid;
  gap: 14px;
}

.address-pair {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.address-pair-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.address-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}

.address-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-soft);
}

.address-metrics span {
  color: var(--muted);
  font-size: 11px;
}

.address-metrics strong {
  font-size: 13px;
  font-weight: 650;
}

.address-retired {
  margin-top: 14px;
}

.address-retired summary {
  padding: 6px 0;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.address-retired .orders-table-wrap {
  margin-top: 8px;
}

@media (max-width: 980px) {
  .console-main--with-toc {
    grid-template-columns: 1fr;
  }

  .console-toc {
    position: static;
    order: 0;
    padding: 10px 12px;
    overflow-x: auto;
  }

  .console-toc-title {
    display: none;
  }

  .console-toc ul {
    flex-direction: row;
    gap: 6px;
  }

  .console-toc a {
    border: 1px solid var(--line);
    white-space: nowrap;
  }
}

.orders-head {
  margin-bottom: 14px;
}

.orders-head h1 {
  margin: 0;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.panel-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.security-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 24px;
}

.rates-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 10px;
}

.rate-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.rate-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rate-card-head h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.rate-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rate-input input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.rate-input input::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

.rate-input input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.rate-input span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.rate-readonly {
  display: grid;
  gap: 6px;
}

.rate-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}

.rate-row strong {
  color: var(--ink);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.rate-markup {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.rate-markup h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.balance-amount {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.balance-amount span {
  margin-left: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.balance-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.balance-stats div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.balance-stats span {
  color: var(--muted);
  font-size: 11px;
}

.balance-stats strong {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.balance-form {
  margin-top: 18px;
}

.balance-history-head {
  margin: 20px 0 10px;
  font-size: 15px;
}

.security-block {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.security-block h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.allowlist-form {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.allowlist-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 10px;
  flex: 1 1 360px;
}

.allowlist-list {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.allowlist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.allowlist-row > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.allowlist-row code {
  font-size: 12.5px;
}

.allowlist-row span {
  color: var(--muted);
  font-size: 11.5px;
}

.allowlist-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.orders-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.orders-toolbar input,
.orders-toolbar select {
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 13px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.orders-toolbar input:focus,
.orders-toolbar select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.orders-search {
  flex: 1 1 280px;
  min-width: 200px;
}

.orders-toolbar select {
  flex: 0 0 auto;
}

.panel {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.panel-head h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.hint {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.form {
  display: grid;
  gap: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid--create {
  grid-template-columns: minmax(160px, 1.2fr) minmax(110px, 0.65fr) minmax(180px, 1fr) minmax(160px, 1fr) auto;
  align-items: end;
}

.form-grid--create .create-submit {
  justify-content: end;
}

.form-grid--create .btn {
  min-height: 46px;
  white-space: nowrap;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
}

.field input,
.field select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field input::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

.field input:focus,
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.btn:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--bg);
}

.console .btn--primary {
  color: #06231b;
}

.checkout .btn--primary {
  color: #ffffff;
}

.btn--primary:hover {
  background: var(--accent-strong);
  border-color: transparent;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}

.btn--ghost:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.btn--sm {
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
}

.btn--wide {
  width: 100%;
}

.form-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.form-error {
  min-height: 0;
  margin: 0;
  color: var(--danger);
  font-size: 12px;
}

.orders-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.orders-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  font-size: 12px;
}

.orders-table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.orders-table td {
  padding: 12px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}

.orders-table tbody tr:first-child td {
  border-top: 0;
}

.orders-row[data-action] {
  cursor: pointer;
}

.orders-row:hover {
  background: var(--surface-soft);
}

.orders-row.is-selected {
  background: var(--accent-soft);
}

.orders-row.is-selected:hover {
  background: var(--accent-soft);
}

.orders-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.orders-table .actions-col,
.orders-table .actions-cell {
  text-align: right;
  white-space: nowrap;
}

.orders-table .actions-col {
  width: 1%;
}

.orders-table .network-cell,
.orders-table .time-cell {
  color: var(--ink-soft);
  white-space: nowrap;
}

.orders-table code {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
}

.order-id {
  display: grid;
  gap: 2px;
  max-width: 220px;
  min-width: 0;
}

.order-id strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-id span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amount-cell strong {
  color: var(--ink);
  font-weight: 600;
}

.amount-cell span {
  margin-left: 4px;
  color: var(--muted);
  font-size: 11px;
}

.orders-empty {
  padding: 36px 16px;
  color: var(--muted);
  text-align: center;
}

.orders-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.tone-success {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.tone-info {
  background: var(--info-soft);
  color: var(--info);
}

.tone-warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.tone-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.tone-muted {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--muted);
}

.test-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.test-row:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.test-row > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.test-row strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-row span {
  color: var(--muted);
  font-size: 12px;
}

.test-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.empty {
  padding: 30px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.sweep-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.sweep-form {
  min-width: 0;
}

.sweep-auto-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}

.sweep-auto-toggle > span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.sweep-auto-toggle input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent);
}

.sweep-save {
  display: flex;
  align-items: flex-end;
}

.sweep-save .btn {
  width: 100%;
}

.sweep-result {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.sweep-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}

.sweep-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sweep-gas-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
}

.sweep-gas-line code {
  color: var(--ink);
  font-family: var(--mono);
}

.sweep-gas-line strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.sweep-hint {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.sweep-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.sweep-stats > div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.sweep-stats span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
}

.sweep-stats strong {
  display: block;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.sweep-warnings {
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--warn);
  font-size: 12px;
  line-height: 1.6;
}

.sweep-table-wrap {
  overflow-x: auto;
}

.sweep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.sweep-table th {
  padding: 0 8px 6px;
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.sweep-table td {
  padding: 8px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.sweep-table td code {
  font-family: var(--mono);
  font-size: 11px;
}

.sweep-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sweep-row-action {
  text-align: right;
  white-space: nowrap;
}

.sweep-manual-note {
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.sweep-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.sweep-tag--ok {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.sweep-tag--warn {
  border-color: transparent;
  background: var(--warn-soft);
  color: var(--warn);
}

.sweep-tag--error {
  border-color: transparent;
  background: var(--danger-soft);
  color: var(--danger);
}



.checkout-head {
  margin-bottom: 18px;
}

.checkout-head h1 {
  margin: 0;
  font-size: clamp(26px, 5.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.checkout-head h1 span {
  color: var(--accent-strong);
}

.checkout-sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.checkout-sub strong {
  color: var(--ink-soft);
  font-weight: 600;
}

.checkout-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.checkout-flow--joined {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.pay-card,
.status-card {
  padding: 22px;
}

.checkout-flow--joined .pay-card,
.checkout-flow--joined .status-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.checkout-flow--joined .status-card {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.checkout-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.checkout-toggle-icon {
  flex: none;
  font-size: 13px;
  line-height: 1;
}

.checkout-progress {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.checkout-progress > .expiry:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.pay-card-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.pay-card-head > div {
  flex: 1 1 auto;
  width: 100%;
}

.pay-card-head .label {
  margin-bottom: 10px;
  padding-right: 104px;
}

.pay-card-head > .status-pill {
  position: absolute;
  top: 0;
  right: 0;
}

.label {
  display: block;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.03em;
}

.amount-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
}

.amount-line--wrap {
  flex-wrap: wrap;
  row-gap: 6px;
}

.amount-meta {
  display: flex;
  align-items: baseline;
  align-self: stretch;
  flex: 1 1 auto;
  gap: 8px;
}

.amount-meta .asset {
  align-self: flex-end;
  margin-bottom: 2px;
}

.amount-meta .copy-btn--icon {
  align-self: center;
  margin-left: auto;
}

.amount {
  font-size: clamp(38px, 5.4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.amount--accent {
  color: var(--binance-orange, #f0b90b);
}

.asset {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.asset--accent {
  color: var(--binance-orange, #f0b90b);
  font-weight: 700;
}

.fiat-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.fiat-note strong {
  color: var(--ink-soft);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

.copy-btn:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.copy-btn--icon {
  flex: none;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 9px;
}

.copy-btn--icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.amount-line .copy-btn--icon {
  align-self: center;
  margin-left: auto;
}

.qr-wrap {
  display: grid;
  justify-items: center;
  padding: 26px 0 18px;
}

.qr {
  display: grid;
  place-items: center;
  width: 196px;
  height: 196px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
}

.qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.qr-fallback {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  word-break: break-all;
}

.qr-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.address-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.address-box > div {
  min-width: 0;
}

.address-box code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
}

.address-edge {
  color: var(--binance-orange, #f0b90b);
  font-weight: 700;
}

.value-accent {
  color: var(--binance-orange, #f0b90b);
  font-weight: 700;
}

.meta {
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.meta > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.meta dt {
  color: var(--muted);
  font-size: 12px;
}

.meta dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  text-align: right;
}

.status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}


.status-head h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.status-banner {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.status-banner--success {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.status-banner--info {
  border-color: transparent;
  background: var(--info-soft);
  color: var(--info);
}

.status-banner--warn {
  border-color: transparent;
  background: var(--warn-soft);
  color: var(--warn);
}

.status-banner--danger {
  border-color: transparent;
  background: var(--danger-soft);
  color: var(--danger);
}

.status-banner--muted {
  border-color: transparent;
  background: var(--surface-soft);
  color: var(--muted);
}


.confirm-progress {
  --confirm-bar: #0c8f6c;
  --confirm-bar-2: #19b98a;
  --confirm-ink: #0a6b51;
  --confirm-border: #d9ece4;
  --confirm-bg: #f5fbf9;
  margin: 16px 0;
  padding: 15px;
  border: 1px solid var(--confirm-border);
  border-radius: 13px;
  background: var(--confirm-bg);
}

.confirm-progress[data-tone="success"] {
  --confirm-border: #cde8dc;
  --confirm-bg: #f1faf6;
}

.confirm-progress[data-tone="warn"] {
  --confirm-bar: #c07a12;
  --confirm-bar-2: #dda03a;
  --confirm-ink: #9a5b0b;
  --confirm-border: #f0e2c6;
  --confirm-bg: #fdf8ef;
}

.confirm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.confirm-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.confirm-kicker::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--confirm-bar);
  content: "";
}

.confirm-end {
  display: flex;
  align-items: center;
  gap: 8px;
}

.confirm-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.confirm-pct {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--confirm-ink);
  font-variant-numeric: tabular-nums;
}

.confirm-pct strong {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.confirm-pct span {
  font-size: 12px;
  font-weight: 600;
}

.confirm-track {
  position: relative;
  height: 10px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eaf0;
}

.confirm-fill {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--confirm-bar), var(--confirm-bar-2));
  transition: width 1.4s cubic-bezier(0.33, 0, 0.2, 1);
}

.confirm-fill::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 80%);
  background-size: 220% 100%;
  content: "";
  opacity: 0;
}

.confirm-progress[data-tone="info"] .confirm-fill::after {
  opacity: 1;
  animation: confirmSheen 2.4s linear infinite;
}

.confirm-tip {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(13, 23, 38, 0.24);
  transform: translate(50%, -50%);
}

.confirm-tip.is-hidden {
  display: none;
}

.confirm-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 550;
}

.confirm-marks .is-active {
  color: var(--confirm-ink);
  font-weight: 650;
}

.confirm-marks .is-done {
  color: var(--ink-soft);
}

.confirm-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px dashed var(--confirm-border);
}

.confirm-stats > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.confirm-stats > div + div {
  padding-left: 12px;
  border-left: 1px solid var(--confirm-border);
}

.confirm-stats strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.confirm-stats span {
  color: var(--muted);
  font-size: 10.5px;
}

.confirm-live {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 10.5px;
}

.confirm-pulse {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--confirm-bar);
}

.confirm-pulse::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--confirm-bar);
  content: "";
  animation: confirmPing 2.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

.confirm-progress[data-tone="success"] .confirm-pulse::after {
  animation: none;
}

@keyframes confirmSheen {
  from {
    background-position: 140% 0;
  }
  to {
    background-position: -60% 0;
  }
}

@keyframes confirmPing {
  0% {
    opacity: 0.45;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

/* Merchant console order detail */

.order-detail-panel {
  scroll-margin-top: 24px;
}

.detail-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  padding: 14px 16px 4px;
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.detail-field > span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.detail-value {
  font-size: 13px;
  font-weight: 600;
  word-break: break-word;
}

.order-detail-panel code {
  font-family: var(--mono);
  font-size: 11px;
  word-break: break-all;
}

.detail-link {
  color: var(--accent);
  text-decoration: none;
}

.detail-link:hover {
  text-decoration: underline;
}

.detail-danger {
  color: var(--danger);
}

.detail-tag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.detail-tag--danger {
  border-color: var(--danger);
  color: var(--danger);
}

.detail-section {
  padding: 14px 16px 0;
}

.detail-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 650;
}

.detail-section:last-child {
  padding-bottom: 16px;
}

.detail-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.detail-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 12px;
}

.detail-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.detail-table td {
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.detail-table tbody tr:first-child td {
  border-top: 0;
}

.detail-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.detail-error-cell {
  color: var(--muted);
  max-width: 260px;
  word-break: break-word;
}

.detail-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-event {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.detail-event > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.detail-event > div span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.detail-tx-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-tx-form .field {
  flex: 1 1 320px;
}

.detail-submissions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.detail-submission {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
}

.detail-submission span {
  color: var(--muted);
}

@media (max-width: 620px) {
  .confirm-progress {
    padding: 13px;
  }

  .confirm-pct strong {
    font-size: 25px;
  }

  .confirm-stats strong {
    font-size: 11.5px;
  }
}
.timeline-label {
  margin-top: 20px;
}

.timeline {
  display: grid;
  gap: 0;
  margin: 10px 0 18px;
  padding: 0;
  list-style: none;
}

.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 18px;
}

.timeline-step:last-child {
  padding-bottom: 0;
}

.timeline-step::before {
  position: absolute;
  top: 14px;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: var(--line);
  content: "";
}

.timeline-step:last-child::before {
  display: none;
}

.dot {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--line-strong);
}

.timeline-step strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.timeline-step span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.timeline-step.is-done .dot,
.timeline-step.is-active .dot {
  background: var(--accent);
}

.timeline-step.is-active .dot {
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.timeline-step.is-pending {
  opacity: 0.62;
}

.expiry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.expiry strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.tx-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.tx-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tx-panel-head h3 {
  margin: 2px 0 0;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.step-chip {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.tx-panel-lede {
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.tx-form {
  display: grid;
  gap: 10px;
}

.tx-form .btn {
  margin-top: 2px;
}

.toast {
  position: fixed;
  z-index: 100;
  bottom: 24px;
  left: 50%;
  max-width: min(90vw, 460px);
  padding: 10px 16px;
  border-radius: 999px;
  background: #0d1726;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(13, 23, 38, 0.24);
  font-size: 13px;
  line-height: 1.4;
  transform: translateX(-50%);
  animation: toast-in 180ms ease-out;
}

.toast--danger {
  background: #8f2f2f;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.loading-card {
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
}

.noscript {
  padding: 24px;
  color: #0d1726;
  font-family: var(--sans);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .security-grid,
  .rates-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sweep-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sweep-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid--create {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid--create .create-submit {
    grid-column: 1 / -1;
  }

  .form-grid--create .btn {
    width: 100%;
  }

}

@media (max-width: 620px) {
  .shell {
    padding: 20px 16px 52px;
  }

  .checkout-shell {
    padding: 16px 12px calc(44px + env(safe-area-inset-bottom));
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .allowlist-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .allowlist-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .orders-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .orders-search,
  .orders-toolbar select {
    flex: 1 1 auto;
    width: 100%;
  }

  .orders-head {
    align-items: center;
  }

  .test-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .test-actions {
    justify-content: flex-start;
  }

  .pay-card,
  .status-card,
  .panel {
    padding: 18px;
  }

  .amount {
    font-size: 38px;
  }

  .qr {
    width: 172px;
    height: 172px;
  }

  .address-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .copy-btn {
    margin-left: 0;
  }

  .meta > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .meta dd {
    text-align: left;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Merchant sign-in */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(79, 70, 229, 0.18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(16, 185, 129, 0.14), transparent 55%),
    #f4f6f8;
}

.login-card {
  width: min(440px, 100%);
  padding: 34px 32px 30px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.login-card .brand { margin-bottom: 26px; }
.login-card .eyebrow { margin-bottom: 6px; }
.login-card h1 { margin: 0 0 10px; font-size: 26px; letter-spacing: -0.02em; color: #0f172a; }
.login-lede { margin: 0 0 22px; color: #5b6472; font-size: 14px; line-height: 1.65; }
.login-card .field { margin-bottom: 16px; }
.login-card .form-hint { margin-top: 16px; }

.field--wide { grid-column: 1 / -1; }

.fiat-summary { margin: 0 0 22px; }
.fiat-summary-label { display: block; color: var(--muted, #5b6472); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fiat-summary-amount { display: flex; align-items: baseline; gap: 9px; margin-top: 6px; color: var(--ink, #0f172a); font-size: 34px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1; }
.fiat-summary-amount strong { font-weight: 700; }
.fiat-summary-amount .fiat-currency { color: var(--muted, #5b6472); font-size: 15px; font-weight: 650; letter-spacing: .02em; }
.fiat-summary-note { margin: 8px 0 0; color: var(--muted, #5b6472); font-size: 13.5px; line-height: 1.55; }
.checkout-selectors { display: grid; gap: 10px; margin: 0 0 20px; }
.checkout-select { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--line, #e3e8ee); border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.checkout-select:hover { border-color: var(--green, #0f8a63); background: #fbfefc; }
.checkout-select:focus-visible { outline: 2px solid rgba(15, 138, 99, .35); outline-offset: 2px; }
.select-copy { flex: 1; min-width: 0; }
.select-label { display: block; color: var(--muted, #5b6472); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.select-value { display: block; margin-top: 2px; color: var(--ink, #0f172a); font-size: 15px; font-weight: 650; line-height: 1.3; }
.select-meta { display: block; margin-top: 2px; color: var(--muted, #5b6472); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-chevron { color: #94a3b8; font-size: 20px; line-height: 1; }
.selection-continue { margin: 0 0 4px; }
.selection-continue .btn { width: 100%; }
.token-icon, .network-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; line-height: 1; overflow: hidden; }
.token-icon { border-radius: 50%; background: #f1f5f9; }
.token-icon svg { display: block; width: 100%; height: 100%; }
.token-icon--usdt, .token-icon--usdc { background: transparent; }
.token-icon--placeholder { border: 1px dashed #cbd5e1; color: #94a3b8; font-size: 17px; font-weight: 700; }
.network-icon { border-radius: 13px; color: #fff; font-size: 15px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 1px 2px rgba(15, 23, 42, .1); }
.network-icon svg { display: block; width: 22px; height: 22px; }
.network-icon--ethereum { background: linear-gradient(145deg, #8e9ff7, #6174e8); }
.network-icon--polygon { background: linear-gradient(145deg, #ab7bff, #7b3fe4); }
.network-icon--tron { background: linear-gradient(145deg, #ff4b4b, #e60012); }
.network-icon--placeholder { background: #f4f6f8; color: #94a3b8; box-shadow: none; }
.pair-empty { padding: 16px; border-radius: 12px; background: #fff7ed; color: #9a3412; font-size: 14px; line-height: 1.5; }
.picker-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, .46); }
.picker-sheet { width: min(560px, 100%); max-height: min(86vh, 680px); overflow: auto; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -24px 60px rgba(15, 23, 42, .22); animation: picker-up .22s ease-out; }
@keyframes picker-up { from { opacity: .55; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.picker-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.picker-head h2 { flex: 1; margin: 0; color: var(--ink, #0f172a); font-size: 18px; letter-spacing: -.01em; }
.picker-close, .picker-back { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #f4f6f8; color: #475569; font-size: 20px; line-height: 1; cursor: pointer; }
.picker-close:hover, .picker-back:hover { background: #e9eef3; }
.picker-back { margin-left: -4px; }
.picker-sub { margin: 6px 0 16px; color: var(--muted, #5b6472); font-size: 13px; line-height: 1.5; }
.picker-list { display: grid; gap: 8px; }
.picker-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 1px solid var(--line, #e3e8ee); border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.picker-option:hover { border-color: var(--green, #0f8a63); background: #fbfefc; }
.picker-option:focus-visible { outline: 2px solid rgba(15, 138, 99, .35); outline-offset: 2px; }
.picker-option.is-selected { border-color: var(--green, #0f8a63); box-shadow: 0 0 0 2px rgba(15, 138, 99, .14); }
.picker-copy { flex: 1; min-width: 0; }
.picker-copy strong { display: block; color: var(--ink, #0f172a); font-size: 14px; line-height: 1.3; }
.picker-copy span { display: block; margin-top: 2px; color: var(--muted, #5b6472); font-size: 12px; }
.picker-value { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.picker-value strong { display: block; color: var(--ink, #0f172a); font-size: 12px; font-variant-numeric: tabular-nums; }
.picker-value small { display: block; margin-top: 2px; color: var(--muted, #5b6472); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.picker-check { flex: 0 0 18px; color: #94a3b8; font-size: 18px; text-align: center; }
.picker-asset { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; padding: 10px 12px; border-radius: 12px; background: #f8fafc; }
.picker-asset strong { display: block; color: var(--ink, #0f172a); font-size: 13px; }
.picker-asset small { display: block; color: var(--muted, #5b6472); font-size: 11px; }
.picker-empty { padding: 16px; border-radius: 12px; background: #f8fafc; color: var(--muted, #5b6472); font-size: 13px; line-height: 1.5; }
body.picker-open { overflow: hidden; }
@media (min-width: 640px) {
  .picker-overlay { align-items: center; padding: 24px; }
  .picker-sheet { border-radius: 22px; max-height: min(76vh, 640px); }
}
@media (max-width: 520px) {
  .selection-continue .btn { width: 100%; }
}

.timeline-step.is-active .dot {
  background: var(--accent);
}

.timeline-step.is-active .dot {
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.timeline-step.is-pending {
  opacity: 0.62;
}

.expiry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.expiry strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.tx-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.tx-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tx-panel-head h3 {
  margin: 2px 0 0;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.step-chip {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.tx-panel-lede {
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.tx-form {
  display: grid;
  gap: 10px;
}

.tx-form .btn {
  margin-top: 2px;
}

.toast {
  position: fixed;
  z-index: 100;
  bottom: 24px;
  left: 50%;
  max-width: min(90vw, 460px);
  padding: 10px 16px;
  border-radius: 999px;
  background: #0d1726;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(13, 23, 38, 0.24);
  font-size: 13px;
  line-height: 1.4;
  transform: translateX(-50%);
  animation: toast-in 180ms ease-out;
}

.toast--danger {
  background: #8f2f2f;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.loading-card {
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
}

.noscript {
  padding: 24px;
  color: #0d1726;
  font-family: var(--sans);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .security-grid,
  .rates-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sweep-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sweep-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid--create {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid--create .create-submit {
    grid-column: 1 / -1;
  }

  .form-grid--create .btn {
    width: 100%;
  }

}

@media (max-width: 620px) {
  .shell {
    padding: 20px 16px 52px;
  }

  .checkout-shell {
    padding: 16px 12px calc(44px + env(safe-area-inset-bottom));
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .allowlist-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .allowlist-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .orders-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .orders-search,
  .orders-toolbar select {
    flex: 1 1 auto;
    width: 100%;
  }

  .orders-head {
    align-items: center;
  }

  .test-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .test-actions {
    justify-content: flex-start;
  }

  .pay-card,
  .status-card,
  .panel {
    padding: 18px;
  }

  .amount {
    font-size: 38px;
  }

  .qr {
    width: 172px;
    height: 172px;
  }

  .address-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .copy-btn {
    margin-left: 0;
  }

  .meta > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .meta dd {
    text-align: left;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Merchant sign-in */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(79, 70, 229, 0.18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(16, 185, 129, 0.14), transparent 55%),
    #f4f6f8;
}

.login-card {
  width: min(440px, 100%);
  padding: 34px 32px 30px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.login-card .brand { margin-bottom: 26px; }
.login-card .eyebrow { margin-bottom: 6px; }
.login-card h1 { margin: 0 0 10px; font-size: 26px; letter-spacing: -0.02em; color: #0f172a; }
.login-lede { margin: 0 0 22px; color: #5b6472; font-size: 14px; line-height: 1.65; }
.login-card .field { margin-bottom: 16px; }
.login-card .form-hint { margin-top: 16px; }

.field--wide { grid-column: 1 / -1; }

.fiat-summary { margin: 0 0 22px; }
.fiat-summary-label { display: block; color: var(--muted, #5b6472); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fiat-summary-amount { display: flex; align-items: baseline; gap: 9px; margin-top: 6px; color: var(--ink, #0f172a); font-size: 34px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1; }
.fiat-summary-amount strong { font-weight: 700; }
.fiat-summary-amount .fiat-currency { color: var(--muted, #5b6472); font-size: 15px; font-weight: 650; letter-spacing: .02em; }
.fiat-summary-note { margin: 8px 0 0; color: var(--muted, #5b6472); font-size: 13.5px; line-height: 1.55; }


@media (max-width: 620px) {
  .address-box {
    align-items: center;
    flex-direction: row;
  }

  .address-box .copy-btn--icon {
    margin-left: auto;
  }
}

.amount-line .amount--long {
  font-size: clamp(30px, 4.4vw, 42px);
}

.amount-line .amount--xlong {
  font-size: clamp(25px, 4vw, 34px);
}

.amount-line .amount--xxlong {
  font-size: clamp(21px, 3.4vw, 30px);
}

.amount-line .amount--xxxlong {
  font-size: clamp(18px, 3vw, 26px);
}

.amount-line .amount--xxxxlong {
  font-size: clamp(16px, 2.6vw, 24px);
}

@media (max-width: 380px) {
  .amount-line .amount {
    font-size: 34px;
  }

  .amount-line .amount--long {
    font-size: 30px;
  }

  .amount-line .amount--xlong {
    font-size: 25px;
  }

  .amount-line .amount--xxlong {
    font-size: 21px;
  }

  .amount-line .amount--xxxlong {
    font-size: 18px;
  }

  .amount-line .amount--xxxxlong {
    font-size: 16px;
  }
}

.copy-feedback {
  position: fixed;
  z-index: 120;
  width: min(300px, calc(100vw - 24px));
  padding: 13px 16px 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  background: #ffffff;
  color: var(--ink, #0f172a);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.05);
  font-size: 13px;
  line-height: 1.48;
  text-align: left;
  pointer-events: none;
}

.copy-feedback-body {
  min-width: 0;
  padding-top: 1px;
}

.copy-feedback-body strong {
  display: block;
  color: var(--ink, #0f172a);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.copy-feedback-body span {
  display: block;
  margin-top: 2px;
  color: var(--muted, #667386);
  font-size: 12.5px;
}

/* ---------------------------------------------------------------------------
   Checkout V56 — markup, classes and metrics copied from the approved
   SCPG-Checkout-V56 handoff. Scoped under #sc50safe so the merchant console
   keeps its own design tokens.
   --------------------------------------------------------------------------- */
:root { --checkout-page-bg: #E5EDEF; }
body.checkout-v56-body { background: var(--checkout-page-bg); }
/* Added when the checkout screen fits the viewport; taller screens keep
   normal scrolling. */
html.checkout-fit,
html.checkout-fit body { overflow: hidden; }
#sc50safe{--navy:#142D3B;--mint:#B8E9D4;--teal:#0C766E;--ink:#20343F;--muted:#536B75;--line:#D7E4E5;--pale:#EAF4F2;--soft:#F6F8F8;--blue:#206F86;--green:#1C744C;background:var(--checkout-page-bg);color:var(--ink);padding:12px;border-radius:18px;font:14px Inter,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;overflow-x:clip}
#sc50safe *{box-sizing:border-box}#sc50safe button{font:inherit;cursor:pointer;touch-action:manipulation}#sc50safe button:disabled{cursor:not-allowed}#sc50safe button:focus-visible,#sc50safe a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}#sc50safe .viewport{width:100%}#sc50safe .viewport.invalidMode{display:flex;justify-content:center;align-items:center;min-height:min(100dvh,640px);padding:16px 0}#sc50safe .device{width:100%;max-width:440px;margin:auto;container-type:inline-size}#sc50safe .checkout{background:white;border:1px solid #CAD9DC;border-radius:19px;box-shadow:none;position:relative}#sc50safe .header{background:var(--navy);color:white;border-radius:18px 18px 0 0;padding:16px 19px 11px;position:relative;z-index:15}
#sc50safe .header.compact{padding:21px 19px}#sc50safe .brandline{display:flex;align-items:center;justify-content:space-between;min-height:24px;gap:8px}#sc50safe .brand{display:flex;align-items:center;gap:9px;min-width:0;color:var(--mint)}#sc50safe .brand{overflow:hidden}#sc50safe .brand strong{color:#fff;font-size:18px;line-height:24px;letter-spacing:-.4px;font-weight:690;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}#sc50safe .globeSelect{position:relative;flex:none}#sc50safe .langBtn{display:flex;align-items:center;gap:5px;min-height:40px;margin:-8px 0;padding:0 2px;border:0;background:none;color:#D5E9E9;font-size:12px;font-weight:650}#sc50safe .langBtn .svg{color:var(--mint)}#sc50safe .langMenu{position:absolute;z-index:25;right:0;top:calc(100% + 8px);width:184px;padding:5px;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px #081B2670}#sc50safe .langMenu button{display:flex;align-items:center;justify-content:space-between;width:100%;height:39px;border:0;background:transparent;border-radius:7px;padding:0 9px;text-align:left;color:var(--ink);font-size:12.5px}#sc50safe .langMenu button:hover,#sc50safe .langMenu button.selected{background:var(--pale)}#sc50safe .fiat{margin-top:14px}#sc50safe .fiatrow{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}#sc50safe .eyebrow{font-size:10.5px;line-height:15px;letter-spacing:.3px;font-weight:640;color:#B9C8CF}#sc50safe .fiatamount{display:flex;align-items:baseline;gap:8px;margin-top:4px}#sc50safe .fiatamount strong{color:#fff;font-size:32px;font-weight:740;line-height:1.12;letter-spacing:-1px;font-variant-numeric:tabular-nums}#sc50safe .fiatamount span{font-size:19px;line-height:24px;font-weight:660;color:var(--mint)}#sc50safe .timer{display:inline-flex;align-items:center;gap:5px;flex:none;padding:5px 7px;border:1px solid #45616C;border-radius:8px;background:#2C4653;color:#D5E9E9;font-size:11px;line-height:16px;font-weight:690;font-variant-numeric:tabular-nums}#sc50safe .timer.low,#sc50safe .timer.expired{background:#493D2F;border-color:#6B5439;color:#F2D8AA}#sc50safe .order{margin-top:11px;padding-top:10px;border-top:1px solid #39525F}#sc50safe .orderrow{position:relative;display:block;margin-top:5px;padding-right:43px}#sc50safe .orderrow .copy{position:absolute;right:0;top:50%;transform:translateY(-50%)}#sc50safe .ordercode{overflow-wrap:anywhere;font-size:11px;line-height:16px;color:#E3EDF0;direction:ltr;text-align:left}#sc50safe .copy{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--teal);padding:0}#sc50safe .copy.light{color:var(--mint)}#sc50safe .copy:active{background:var(--pale)}#sc50safe .copy.light:active{background:#2C4653}#sc50safe .body{padding:18px 19px 15px}#sc50safe .body.payBody{padding-bottom:7px}#sc50safe h2{font-size:20px;line-height:1.35;letter-spacing:-.5px;margin:0;color:var(--ink);font-weight:710}#sc50safe .footRule{height:1px;background:#E8EFF0;margin:0 19px 9px}#sc50safe .footer{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;text-align:center;padding:0 8px 12px;font-size:11px;line-height:16px;color:var(--muted)}#sc50safe .footer b{font-weight:760;color:var(--teal)}#sc50safe .footer .shield{color:#617782;margin-right:2px;display:grid;place-items:center}#sc50safe .footer .shield svg{stroke-width:2.25}
#sc50safe .field{margin-top:15px;position:relative}#sc50safe .field.open{z-index:20}#sc50safe .field label{display:block;margin-bottom:6px;font-weight:640;font-size:13px;line-height:18px}#sc50safe .select{display:flex;align-items:center;gap:10px;height:50px;width:100%;padding:0 12px;background:white;border:1px solid #849DA6;border-radius:11px;text-align:left}#sc50safe .select:disabled{background:var(--soft);border-color:var(--line)}#sc50safe .select.open{border-color:var(--teal);box-shadow:0 0 0 3px #0C766E1A}#sc50safe .select.open>.svg:last-child{transform:rotate(180deg)}#sc50safe .selectName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px;font-weight:630;color:var(--ink)}#sc50safe .selectName.hint{font-weight:460;color:var(--muted)}#sc50safe .select:disabled .hint{color:#87999F}#sc50safe .options{position:absolute;top:calc(100% + 5px);left:0;width:100%;padding:5px;background:white;border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 26px #142D3B29;z-index:30}#sc50safe .option{display:flex;align-items:center;gap:10px;width:100%;height:46px;border:0;background:transparent;border-radius:8px;padding:0 9px;text-align:left}#sc50safe .option:hover,#sc50safe .option.active{background:var(--pale)}#sc50safe .option span.label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:580;font-size:13px}#sc50safe .asset{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--bg,#EAF0F1);color:#fff;font-weight:800;font-size:11px;overflow:hidden}#sc50safe .asset.mini{width:21px;height:21px;font-size:9px}#sc50safe .asset.placeholder{color:#577B86}#sc50safe .asset svg{display:block;width:21px;height:21px}#sc50safe .asset.mini svg{width:16px;height:16px}#sc50safe .rate{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 11px;color:var(--muted);font-size:13px;line-height:18px}#sc50safe .rate strong{color:#35535D;font-weight:630}#sc50safe .quote{display:flex;flex-direction:column;justify-content:space-between;height:94px;padding:12px 15px;border-radius:12px;background:var(--pale)}#sc50safe .quoteTop{height:24px;display:flex;align-items:center;justify-content:space-between;color:#3E666A;font-size:10.5px;font-weight:670;letter-spacing:.35px}#sc50safe .quoteSum{display:flex;align-items:baseline;gap:8px;height:31px;white-space:nowrap}#sc50safe .quoteSum strong{font-size:25px;line-height:31px;letter-spacing:-.75px;color:var(--ink);font-weight:740}#sc50safe .quoteSum span{font-weight:670;color:var(--teal)}#sc50safe .primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;margin-top:14px;border:0;border-radius:11px;background:var(--teal);color:#fff;font-weight:700}#sc50safe .primary:disabled{background:#E4EBED;color:#91A2A8}#sc50safe .primary:not(:disabled):hover{background:#08645E}#sc50safe .helpEntry{display:flex;justify-content:center;margin-top:9px}#sc50safe .payBody .helpEntry{margin-top:0}#sc50safe .helpBtn{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 8px;border:0;background:transparent;border-radius:8px;font-size:12.5px;font-weight:570;color:var(--teal)}#sc50safe .helpBtn span{text-decoration:underline;text-decoration-color:#0C766E70;text-underline-offset:3px}#sc50safe .helpBtn:active{background:#F0F7F5}
#sc50safe .payHeader{display:flex;flex-direction:column;gap:8px}#sc50safe .payHeader .top{display:flex;justify-content:space-between;align-items:center;gap:8px}#sc50safe .sendText{font-size:13px;color:var(--muted)}#sc50safe .netpill{display:inline-flex;align-items:center;gap:6px;max-width:72%;min-width:0;padding:4px 9px 4px 5px;border-radius:999px;background:var(--pale);font-size:12px;font-weight:660;color:var(--teal)}#sc50safe .netpill .netText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#sc50safe .payValue{display:flex;align-items:center;gap:8px}#sc50safe .payValue .number{display:flex;align-items:baseline;gap:7px;flex:1;min-width:0;flex-wrap:wrap}#sc50safe .payValue .number strong{font-size:27px;line-height:34px;letter-spacing:-.85px;font-weight:740;color:var(--ink)}#sc50safe .payValue .number span{font-size:15px;font-weight:680;color:var(--teal)}#sc50safe .panels{display:flex;flex-direction:column;gap:10px;margin-top:15px}#sc50safe .panel{background:var(--soft);border:1px solid var(--line);border-radius:11px;overflow:hidden}#sc50safe .panelHead{display:flex;align-items:center;gap:11px;min-height:50px;padding:0 12px}#sc50safe .panelHead.action{width:100%;background:transparent;border:0;text-align:left}#sc50safe .panelHead.action:active{background:#EEF3F4}#sc50safe .panelHead.action[aria-expanded="true"]>.svg:last-child{transform:rotate(180deg)}#sc50safe .panelHead .label{flex:1;color:var(--ink);font-size:13px;font-weight:670}#sc50safe .panelHead .ic{color:#355865}#sc50safe .panelBody{border-top:1px solid var(--line)}#sc50safe .qrContent{display:flex;align-items:center;flex-direction:column;gap:9px;padding:16px 12px 17px}#sc50safe .qrSquare{width:175px;height:175px;padding:13px;background:white;border-radius:9px}#sc50safe .qrSquare svg{width:100%;height:100%}#sc50safe .qrCaption{font-size:12px;color:var(--muted)}#sc50safe .address{padding:11px 13px 12px;font:500 14px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#435C65;direction:ltr;text-align:left;overflow-wrap:anywhere;word-break:break-all}#sc50safe .address strong{font-weight:800;color:#075F59}#sc50safe .monitor{display:flex;align-items:center;gap:11px;min-height:63px;margin-top:13px;padding:8px 12px;background:#EAF3F6;border:1px solid #CFE1E8;border-radius:11px}#sc50safe .monicon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#D8EAF1;color:var(--blue);flex:none}#sc50safe .montext{flex:1;min-width:0}#sc50safe .montext strong{display:block;color:#205D72;font-size:13px;line-height:18px}#sc50safe .montext small{display:block;color:var(--muted);margin-top:3px;font-size:11.5px;line-height:16px}#sc50safe .signal{display:flex;gap:4px;align-items:center}#sc50safe .signal i{width:3px;height:11px;background:#599EB3;border-radius:4px;animation:scs 1.3s ease-in-out infinite}#sc50safe .signal i:nth-child(2){height:18px;animation-delay:.18s}#sc50safe .signal i:nth-child(3){height:13px;animation-delay:.36s}@keyframes scs{0%,100%{opacity:.5;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1.25)}}#sc50safe .change{display:flex;justify-content:center;margin-top:6px}#sc50safe .change button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:7px 12px;border:0;border-radius:8px;background:transparent;color:var(--teal);font-size:13px;font-weight:590}#sc50safe .change button:active{background:#F0F7F5}#sc50safe .change span{text-decoration:underline;text-decoration-color:#0C766E70;text-underline-offset:3px}
#sc50safe .confirmTitle{display:flex;align-items:center;gap:11px}#sc50safe .iconCircle{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:#EAF3F6;color:var(--blue)}#sc50safe .confirmCard{padding:15px;margin-top:16px;background:var(--soft);border-radius:12px}#sc50safe .confirmTop{display:flex;align-items:center;justify-content:space-between;gap:9px}#sc50safe .confirmLeft{min-width:0;flex:1}#sc50safe .caps{font-size:10.5px;line-height:15px;font-weight:670;letter-spacing:.35px;color:var(--muted)}#sc50safe .confirmAmount{margin-top:8px;font-size:22px;line-height:27px;letter-spacing:-.65px;font-weight:740}#sc50safe .confirmCoin{margin-top:3px;font-size:13px;color:var(--teal);font-weight:680}#sc50safe .confirmNetwork{display:flex;align-items:center;gap:6px;margin-top:10px;color:var(--muted);font-size:11.5px;min-width:0}#sc50safe .confirmNetwork span:last-child{overflow-wrap:anywhere}#sc50safe .ring{flex:none;position:relative;width:112px;height:112px;border:0!important;outline:0!important;box-shadow:none!important;background:none!important;border-radius:50%;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent}#sc50safe .ring:before{content:none!important}#sc50safe .ringSvg{display:block;width:100%;height:100%;overflow:visible;outline:none!important;border:0!important;box-shadow:none!important}#sc50safe .ringSvg circle{fill:none;stroke-width:8;stroke-linecap:butt}#sc50safe .ringSvg .ringTrack{stroke:#D6E5E9}#sc50safe .ringSvg .ringProgress{stroke:var(--blue);transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:289.0265;stroke-dashoffset:var(--offset);transition:none}#sc50safe .ringCenter{position:absolute;inset:8px;display:flex;flex-direction:column;align-items:center;justify-content:center}#sc50safe .ringCount{font-size:23px;line-height:27px;font-weight:740;letter-spacing:-.65px}#sc50safe .ringLabel{margin-top:6px;font-size:8.2px;color:var(--muted);line-height:12px}#sc50safe .ringLabel.cjk{font-size:10px}#sc50safe .dots{height:8px;display:flex;align-items:center;gap:5px;margin-top:7px}#sc50safe .dots i{width:5px;height:5px;background:#69ADC2;border-radius:50%;animation:scd 1.45s ease-in-out infinite}#sc50safe .dots i:nth-child(2){animation-delay:.24s}#sc50safe .dots i:nth-child(3){animation-delay:.48s}@keyframes scd{0%,65%,100%{opacity:.23;transform:scale(.82)}35%{opacity:1;transform:scale(1.16)}}#sc50safe .rule{height:1px;background:var(--line);margin:13px 0}#sc50safe .txline{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:12.5px}#sc50safe .txline .label{color:var(--muted)}#sc50safe .completeline{margin-top:7px;align-items:baseline}#sc50safe .completeline .value{font-variant-numeric:tabular-nums;font-weight:640;color:var(--ink);white-space:nowrap}#sc50safe .txline a{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:660;color:var(--teal);text-decoration:none}#sc50safe .reminder{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;font-size:11.5px;color:var(--muted);text-align:center}
#sc50safe .result{display:flex;flex-direction:column;align-items:center;padding-top:4px}#sc50safe .medallion svg{display:block}#sc50safe .medallion{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;flex:none}#sc50safe .medallion.success{background:#E7F5ED;color:var(--green);box-shadow:0 0 0 6px #F1FAF3}#sc50safe .medallion.expired{background:#FFF4E4;color:#95601E}#sc50safe .medallion.invalid{background:#EAF3F6;color:var(--blue)}#sc50safe .resultTitle{margin-top:18px;font-size:22px;line-height:29px;font-weight:740;letter-spacing:-.5px;text-align:center}#sc50safe .receipt{width:100%;margin-top:19px;padding:16px;border-radius:12px;border:1px solid #D0E6D8;background:#EFF8F2!important;background-image:none!important}#sc50safe .receiptLabel{font-size:10.5px;letter-spacing:.35px;font-weight:670;color:var(--green)}#sc50safe .receiptSum{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:9px}#sc50safe .receiptSum strong{font-size:27px;line-height:34px;font-weight:760;letter-spacing:-.8px}#sc50safe .receiptSum span{font-size:15px;font-weight:700;color:var(--green)}#sc50safe .receiptMeta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:15px}#sc50safe .receiptMeta .network{display:flex;align-items:center;gap:7px;min-width:0;color:#456958;font-size:11.5px}#sc50safe .receiptMeta .network .text{overflow-wrap:anywhere}#sc50safe .confirmed{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;border-radius:8px;background:#D7EFE0;padding:6px 8px;color:var(--green);font-size:11px;font-weight:680}#sc50safe .receipt .rule{background:#CDE2D4;margin:15px 0 13px}#sc50safe .expiredBody{padding:28px 23px 22px}#sc50safe .description{max-width:310px;margin:10px auto 0;text-align:center;color:var(--muted);font-size:13px;line-height:1.55}#sc50safe .assist{display:flex;gap:11px;margin-top:23px;padding:12px;border-radius:11px;background:var(--soft);border:1px solid var(--line)}#sc50safe .assist .ic{flex:none;display:grid;place-items:center;width:32px;height:32px;background:#EAF0F1;border-radius:9px;color:#617C88}#sc50safe .assist p{margin:2px 0 0;color:var(--muted);font-size:12.5px;line-height:1.6}#sc50safe .invalidBody{padding:30px 23px 32px;display:flex;align-items:center;flex-direction:column}#sc50safe .invalidBody .description{max-width:320px;font-size:13px;line-height:1.6;margin-top:11px}
#sc50safe .toast{position:absolute;z-index:80;top:11px;left:50%;transform:translate(-50%,-8px);display:flex;align-items:center;gap:6px;flex-direction:column;min-height:52px;width:min(300px,calc(100% - 26px));padding:10px;background:#E1F5EA;border:1px solid #A9DFC0;border-radius:12px;box-shadow:0 7px 23px #142D3B30;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s}#sc50safe .toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}#sc50safe .toastTitle{font-size:12px;color:#205B3D}#sc50safe .toastDetail{font-size:10px;color:#48775B}
#sc50safe .sim{max-width:440px;margin:13px auto 0;padding:13px;border:1px solid #CAD9DC;border-radius:12px;background:white}#sc50safe .simHead{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:650}#sc50safe .tag{font-size:10px;padding:4px 8px;background:#E7EEF0;border-radius:6px;color:#5A727C}#sc50safe .simLabel{font-size:11px;font-weight:650;color:#536B75;margin-top:12px}#sc50safe .simRow{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}#sc50safe .simRow button,#sc50safe .simNav button{flex:1;min-width:66px;min-height:36px;border:1px solid #B7C9CE;border-radius:8px;background:white;color:#28535E;padding:6px 7px;font-size:11px;font-weight:630}#sc50safe .simRow button.active,#sc50safe .simNav button.active{background:var(--teal);border-color:var(--teal);color:white}#sc50safe .simNav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:7px}#sc50safe .simNav button{min-width:0}#sc50safe .simDesc{margin:9px 0 0;color:var(--muted);font-size:11.5px;line-height:1.5}#sc50safe .simStatus{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:9px 11px;background:#EAF3F6;border-radius:8px;font-size:11px}#sc50safe .simStatus strong{color:var(--blue);font-size:15px}#sc50safe .simNote{margin-top:9px;padding:9px 11px;background:#EAF3F6;color:#205D72;font-size:11px;border-radius:8px}
#sc50safe .overlay[hidden],#sc50safe .guideChoices[hidden]{display:none!important}#sc50safe .overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#142D3B99;padding:16px;overscroll-behavior:contain}#sc50safe .dialog{position:relative;width:min(440px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 65px #142D3B50;padding:20px;overscroll-behavior:contain}#sc50safe .dialogHead{display:flex;align-items:start;justify-content:space-between;gap:9px}#sc50safe .dialog h3{font-size:19px;line-height:26px;letter-spacing:-.4px;font-weight:730;min-width:0;flex:1;margin:3px 0 0}#sc50safe .dialogTools{display:flex;gap:5px;align-items:center}#sc50safe .miniLang{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--teal);min-height:34px;padding:0 4px;font-size:11.5px;font-weight:690;white-space:nowrap}#sc50safe .miniLang:active{background:#EDF6F3;border-radius:7px}#sc50safe .close{display:grid;place-items:center;width:34px;height:34px;background:#F3F6F7;color:#617782;border:0;border-radius:9px;font-size:22px;line-height:1}#sc50safe .close:active{background:#E8EFF0}#sc50safe .guideChoices{position:absolute;top:59px;right:58px;z-index:105;display:flex;flex-direction:column;gap:2px;align-items:stretch;margin:0;padding:5px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px #142D3B35}#sc50safe .guideChoices button{display:flex;align-items:center;justify-content:space-between;gap:9px;width:184px;min-height:35px;border:0;background:transparent;text-align:left;padding:7px 10px;border-radius:7px;color:var(--ink);font-size:12px}#sc50safe .guideChoices button:hover{background:var(--pale)}#sc50safe .guideChoices button.active{background:var(--pale);color:var(--teal)}#sc50safe .intro{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}#sc50safe .dialog .rule{margin:17px 0;background:#E6ECEE}#sc50safe .steps{display:flex;flex-direction:column;gap:17px}#sc50safe .step{display:flex;align-items:start;gap:11px}#sc50safe .num{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;flex:none;background:var(--pale);color:var(--teal);font-weight:720}#sc50safe .step strong{display:block;margin-top:2px;font-size:13px;line-height:18px}#sc50safe .step p{margin:5px 0 0;font-size:12.5px;line-height:1.57;color:var(--muted)}#sc50safe .exHead{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}#sc50safe .exHead .exchangeGlobe{display:grid;place-items:center;color:var(--teal)}#sc50safe .exLinks{display:flex;align-items:center;flex-wrap:wrap;gap:10px 13px;margin-top:13px}#sc50safe .exLinks a{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;color:var(--teal);font-size:12.5px;font-weight:630;text-decoration:none}#sc50safe .exLinks a:hover{text-decoration:underline}#sc50safe .disclaimer{margin:17px 0 0;font-size:11.5px;line-height:1.6;color:#667983}
@container (max-width:430px){#sc50safe .header{padding:14px 16px 11px}#sc50safe .header.compact{padding:20px 16px}#sc50safe .brand strong{font-size:17px}#sc50safe .fiat{margin-top:12px}#sc50safe .fiatamount strong{font-size:31px}#sc50safe .order{margin-top:10px;padding-top:9px}#sc50safe .ordercode{font-size:10.8px}#sc50safe .body{padding:16px 16px 12px}#sc50safe .body.payBody{padding-bottom:6px}#sc50safe h2{font-size:19px}#sc50safe .field{margin-top:13px}#sc50safe .select{height:48px}#sc50safe .rate{margin:15px 0 11px}#sc50safe .quote{height:88px;padding:10px 14px}#sc50safe .primary{height:48px;margin-top:13px}#sc50safe .panels{margin-top:14px}#sc50safe .panelHead{min-height:48px}#sc50safe .footRule{margin-left:16px;margin-right:16px}#sc50safe .confirmCard{padding:12px}#sc50safe .confirmAmount{font-size:20px}#sc50safe .ring{width:105px;height:105px}#sc50safe .ringCount{font-size:21px}#sc50safe .invalidBody{padding:27px 17px 29px}}
#sc50safe.short .header:not(.compact){padding-top:12px;padding-bottom:11px}#sc50safe.short .body{padding-top:13px}#sc50safe.short .field{margin-top:11px}#sc50safe.short .rate{margin:12px 0 9px}#sc50safe.short .quote{height:82px}@media(max-width:560px){#sc50safe .overlay{align-items:flex-end;padding:0}#sc50safe .dialog{width:100%;max-height:89dvh;border-radius:20px 20px 0 0;border-bottom:0;padding:19px 18px calc(19px + env(safe-area-inset-bottom,0px))}#sc50safe .dialog h3{font-size:17px;line-height:24px}}@media(prefers-reduced-motion:reduce){#sc50safe .dots i,#sc50safe .signal i{animation:none!important}}

/* V56 production frontend framework — inherited V55 design audit refinements — preserve established geometry and color semantics. */
#sc50safe{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--radius-control:11px;--radius-panel:12px;--focus-on-dark:#B8E9D4;--surface-info:#EAF3F6;font-variant-numeric:normal}
#sc50safe .header button:focus-visible{outline:2px solid var(--focus-on-dark);outline-offset:2px}
#sc50safe .payHeader .top{flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:8px;row-gap:6px}
#sc50safe .payHeader .netpill{max-width:100%;flex-shrink:0}
#sc50safe .payHeader .netText{overflow:visible;text-overflow:clip;white-space:nowrap}
#sc50safe .quoteSum strong,#sc50safe .payValue .number strong,#sc50safe .confirmAmount,#sc50safe .ringCount,#sc50safe .receiptSum strong,#sc50safe .confirmed,#sc50safe .simStatus strong{font-variant-numeric:tabular-nums}
/* The confirmation label sits inside a 105-112px ring, so longer labels
   (CONFIRMATIONS, CONFIRMAÇÕES) nearly fill it on narrow screens. One step
   down keeps every language clear of the ring edge. */
#sc50safe .ringLabel{font-size:8.6px;line-height:12px}
#sc50safe .ringLabel.cjk{font-size:9.2px}
/* Polygon needs three-digit confirmation counts (e.g. 101/128), which is wider
   than the 84px hole inside the ring. Step the counter down by character count
   so every fraction clears the progress stroke on both sides. */
#sc50safe .ringCount[data-len="6"]{font-size:19.5px;letter-spacing:-.6px}
#sc50safe .ringCount[data-len="7"]{font-size:17.5px;letter-spacing:-.55px}
#sc50safe .ringCount[data-len="8"],
#sc50safe .ringCount[data-len="9"],
#sc50safe .ringCount[data-len="10"]{font-size:15px;letter-spacing:-.5px}
/* An inline icon wrapper keeps the parent line-height, which leaves descender
   space under the SVG and pushes the icon above the neighbouring text. Shrink
   the wrapper to the icon so flex centering aligns it with the text. */
#sc50safe .svg{display:inline-flex;align-items:center;justify-content:center;line-height:0}
/* Safari renders button content in its default link colour, which turns
   currentColor icons blue. Pin the trailing select/option icons. */
#sc50safe .select>.svg:last-child{color:var(--ink)}
#sc50safe .option>.svg:last-child{color:var(--ink)}
#sc50safe .panelHead.action>.svg:last-child{color:#355865}
/* iOS Safari paints a translucent black tap highlight over tapped controls. */
#sc50safe,#sc50safe *{-webkit-tap-highlight-color:transparent}
/* Android Chrome boosts small text sizes on its own, which leaves text taller
   than the fixed-size icon wrappers and pushes cards wider than the screen.
   Pin the text scale, then give the icon+label chips a deterministic line box
   so the glyphs stay centered against the icons on every device. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#sc50safe .langBtn>span:not(.svg),#sc50safe .miniLang .code,
#sc50safe .timer .clock,#sc50safe .helpBtn span,#sc50safe .change button span{line-height:1}
/* Han glyphs on Android/Noto sit slightly lower inside a line-height:1 box
   than the Latin baseline the header geometry was tuned against, so a label
   like 简中 reads about half a pixel below the neighbouring icons. Nudge the
   icons down to match. Only labels rendered in Chinese are affected; numeric
   and Latin labels keep the untouched baseline geometry. */
#sc50safe.cjk .langBtn>.svg,
#sc50safe.cjk .miniLang>.svg,
#sc50safe.cjk .helpBtn>.svg,
#sc50safe.cjk .change button>.svg{transform:translateY(.5px)}
/* Floating copy feedback is outside the scrollable payment card, so it remains visible at every scroll position. */
#sc50safe .toast{position:fixed;z-index:500;top:12px;left:50%;width:min(300px,calc(100% - 26px))}
/* Modal header stays accessible when a long Brazilian/Vietnamese guide is scrolled. */
#sc50safe .dialogHead{position:sticky;top:-20px;z-index:40;margin:-20px -20px 0;padding:20px 20px 9px;background:#fff;border-radius:17px 17px 0 0;align-items:center}
#sc50safe .dialog .intro{margin-top:1px}
#sc50safe .guideChoices{top:calc(100% - 2px);right:58px;z-index:65}
#sc50safe .miniLang{min-height:44px;padding:0 6px;border-radius:8px}
#sc50safe .close{width:44px;height:44px}
#sc50safe .exLinks a{min-height:32px;padding:6px 0}
#sc50safe .guideChoices button{min-height:40px}
@media(max-width:560px){
 #sc50safe .dialogHead{top:-19px;margin:-19px -18px 0;padding:19px 18px 9px;border-radius:19px 19px 0 0}
 #sc50safe .guideChoices{right:64px}
}

@media (prefers-reduced-motion: reduce) {
  #sc50safe *,
  #sc50safe *::before,
  #sc50safe *::after { animation: none !important; transition: none !important; }
}

/* 收银台整个页面只有一个背景色：卡片外层、#app、body 都用同一个值，
   避免出现上下或左右深浅不一的色带。 */
.checkout-v56 { background: var(--checkout-page-bg); }

/* 底部回弹：滚到底后继续上拉，整页被拉动最多 20% 屏高，松手回位。
   位移只作用在 #sc50safe 内部的内容层，页面底色始终不动，避免拉动时
   露出下方空白。 */
.checkout-v56-body { overscroll-behavior-y: none; }
#sc50safe.sc-pull { will-change: transform; transition: transform 220ms cubic-bezier(.22, .61, .36, 1); }
#sc50safe.sc-pull.sc-pull-dragging { transition: none; }
@media (prefers-reduced-motion: reduce) {
  #sc50safe.sc-pull { transition-duration: 1ms; }
}

/* V56 elements reuse some class names that the merchant console also styles
   (.checkout, .toast, .field, .panel). Reset the inherited container
   properties here so the checkout matches the handoff exactly. The legacy
   .checkout rule redefines these color tokens on the card itself, which
   otherwise overrides the V56 values inherited from #sc50safe. */
#sc50safe .checkout { --bg: #EAF0F1; --ink: #20343F; --muted: #536B75; --line: #D7E4E5; }
#sc50safe .brand { font: inherit; letter-spacing: normal; }
#sc50safe .eyebrow { margin-bottom: 0; text-transform: none; }
#sc50safe .label { margin: 0; color: inherit; font-size: inherit; letter-spacing: normal; }
#sc50safe .toast { bottom: auto; max-width: none; animation: none; }
#sc50safe .field { display: block; gap: 0; }
#sc50safe .panel { padding: 0; box-shadow: none; }

/* 触屏设备没有真正的 hover：点按后浏览器会保留「粘滞 hover」，复制按钮
   的底色就一直停在按下的样子，直到点别处才消失。按压反馈统一改用
   :active（手指抬起即还原），悬停效果只在有鼠标的设备上生效。 */
@media (hover: hover) and (pointer: fine) {
  #sc50safe .copy:hover,
  #sc50safe .option:hover,
  #sc50safe .langMenu button:hover,
  #sc50safe .guideChoices button:hover { background: var(--pale); }
  #sc50safe .copy.light:hover { background: #2C4653; }
  #sc50safe .primary:not(:disabled):hover { background: #08645E; }
  #sc50safe .helpBtn:hover,
  #sc50safe .change button:hover { background: #F0F7F5; }
  #sc50safe .panelHead.action:hover { background: #EEF3F4; }
  #sc50safe .miniLang:hover { background: #EDF6F3; border-radius: 7px; }
  #sc50safe .close:hover { background: #E8EFF0; }
}

/* 深色面板里的横向表格滚动条会被浏览器画成浅色槽，和面板割裂。 */
.console {
  scrollbar-color: var(--line-strong) transparent;
}

.console ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.console ::-webkit-scrollbar-track {
  background: transparent;
}

.console ::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}

.console ::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* 深色面板里的自动填充会选择浏览器默认的浅色底，覆盖掉 token 配色。 */
.console input:-webkit-autofill,
.console input:-webkit-autofill:hover,
.console input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-soft) inset;
  caret-color: var(--ink);
}

/* 深色面板里的原生控件（复选框、下拉）跟随主题着色。 */
.console input,
.console select,
.console textarea {
  accent-color: var(--accent);
  color-scheme: dark;
}