:root {
  color-scheme: light;
  --bg: #101412;
  --bg-soft: #171d1a;
  --panel: #fbfbf8;
  --panel-2: #ffffff;
  --panel-3: #eef4ef;
  --text: #111816;
  --muted: #53635c;
  --muted-2: #75817b;
  --line: #dfe5df;
  --line-strong: #bfcac2;
  --accent: #159460;
  --accent-2: #c83f34;
  --amber: #c83f34;
  --red: #c83f34;
  --ink: #111816;
  --white: #ffffff;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 0%, rgba(21, 148, 96, 0.2), transparent 30%),
    radial-gradient(circle at 85% 4%, rgba(200, 63, 52, 0.12), transparent 26%),
    linear-gradient(135deg, #101412 0%, #16201b 52%, #111816 100%);
}

button,
input,
select { font: inherit; }

button,
.button-link,
.toolbar-link,
.return-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  padding: 9px 13px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

button:hover,
button.active,
.button-link:hover,
.toolbar-link:hover,
.return-actions a:hover {
  border-color: var(--accent);
  color: #0e4d33;
  background: #eaf7ef;
  text-decoration: none;
}

.button-link.primary,
.pay-actions button:first-child,
.action-row button:first-child {
  border-color: rgba(21, 148, 96, 0.44);
  background: #dff3e7;
  color: #0e4d33;
}

input,
select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(21, 148, 96, 0.14);
}

input[readonly] { color: var(--muted); }

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

code,
pre { font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; }

pre {
  overflow: auto;
  margin: 0;
  min-height: 140px;
  max-height: 430px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #2f3a34;
  color: #edf8f2;
  font-size: 12px;
  line-height: 1.55;
}

a { color: #157756; text-decoration: none; }
a:hover { text-decoration: underline; }
h1,
h2,
h3,
p { margin: 0; }
h1 { font-size: clamp(30px, 4vw, 58px); line-height: 0.98; letter-spacing: 0; }
h2 { font-size: 20px; line-height: 1.18; letter-spacing: 0; }
h3 { font-size: 14px; line-height: 1.25; letter-spacing: 0; }
p { color: var(--muted); line-height: 1.56; }
small { color: var(--muted-2); }

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  min-width: 0;
}

.brand-link span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brand-link strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #1f9d72, #7abf6a);
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

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

.section-head > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.status-dot {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  width: max-content;
  border: 1px solid rgba(53, 224, 161, 0.45);
  border-radius: 999px;
  color: #124c37;
  background: #e8f6ed;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.action-row,
.return-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

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

.form-grid.compact {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.route-list {
  display: grid;
  gap: 10px;
}

.route-list div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.route-list div:last-child { border-bottom: 0; }
.route-list code {
  color: #cfffe7;
  overflow-wrap: anywhere;
}
.route-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

/* Public DEX */
.public-page,
.pay-page { background-color: var(--bg); }

.public-shell {
  min-height: 100vh;
  padding: 20px clamp(14px, 3vw, 42px) 42px;
}

.public-topbar,
.pay-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  max-width: 1380px;
  margin: 0 auto 18px;
}

.public-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
}

.public-nav a {
  color: #eff6f0;
  font-size: 13px;
  font-weight: 800;
}

.public-dex {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 16px;
  align-items: stretch;
}

.public-market,
.public-desk,
.public-panel,
.pay-summary,
.pay-card,
.trade-panel,
.route-panel,
.journal,
.network-header,
.office-head,
.console-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(251, 251, 248, 0.96);
  box-shadow: var(--shadow);
}

.public-market {
  display: grid;
  align-content: space-between;
  gap: 26px;
  min-height: 520px;
  padding: clamp(24px, 4vw, 48px);
}

.market-copy {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

.market-copy p {
  max-width: 680px;
  font-size: 18px;
}

.rate-ticker {
  display: grid;
  gap: 6px;
  max-width: 500px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rate-ticker span {
  color: var(--accent);
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 950;
  line-height: 1;
}

.network-ledger,
.status-strip,
.pair-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.network-ledger div,
.status-strip div,
.pair-strip div,
.contract-meta div {
  min-width: 0;
  border-left: 1px solid var(--line);
  padding: 7px 10px;
}

.network-ledger span,
.status-strip span,
.pair-strip span,
.contract-meta span,
.wallet-line span,
.summary-list dt {
  display: block;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.network-ledger strong,
.status-strip strong,
.pair-strip strong,
.contract-meta strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  font-size: 13px;
}

.public-desk,
.public-panel {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.public-band {
  max-width: 1380px;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
  gap: 16px;
}

.boundary-note {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* Client-facing public front */
.client-front {
  background:
    radial-gradient(circle at 15% 12%, rgba(21, 148, 96, 0.22), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(200, 63, 52, 0.14), transparent 26%),
    linear-gradient(135deg, #101412 0%, #17201b 50%, #0f1412 100%);
}

.client-front .public-shell {
  max-width: 1480px;
  margin: 0 auto;
}

.client-nav {
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
}

.client-nav .brand-link,
.pay-topbar .brand-link {
  color: #eff6f0;
}

.client-nav .brand-link small,
.pay-topbar .brand-link small {
  color: #b8c8bf;
}

.client-nav .brand-mark {
  width: 52px;
  height: 46px;
}

.client-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.network-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid rgba(21, 148, 96, 0.34);
  border-radius: 999px;
  background: #ffffff;
  padding: 6px 12px;
  color: #111816;
  font-size: 12px;
  font-weight: 900;
}

.network-pill i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(21, 148, 96, 0.14);
}

.client-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(390px, 0.96fr);
  gap: 18px;
  align-items: stretch;
}

.client-copy,
.transaction-preview,
.ecosystem-strip,
.client-module,
.client-boundary {
  border: 1px solid rgba(223, 229, 223, 0.9);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 42%),
    rgba(251, 251, 248, 0.96);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
}

.client-copy {
  display: grid;
  align-content: start;
  gap: 22px;
  min-height: 640px;
  padding: clamp(28px, 4vw, 58px);
  border-top-color: rgba(31, 157, 114, 0.5);
}

.client-copy h1 {
  max-width: 780px;
  font-size: clamp(46px, 5.8vw, 82px);
  line-height: 0.96;
}

.hero-line {
  color: var(--accent);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 950;
  line-height: 1.02;
}

.client-copy h1 {
  text-shadow: none;
}

.hero-subcopy {
  max-width: 720px;
  color: #43524b;
  font-size: clamp(17px, 1.5vw, 21px);
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

.trust-strip div {
  min-width: 0;
  border-left: 1px solid var(--line);
  padding: 4px 14px;
}

.trust-strip div:first-child { border-left: 0; padding-left: 0; }
.trust-strip span,
.client-rate-card span,
.preview-meta span {
  display: block;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.trust-strip strong,
.preview-meta strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  font-size: 14px;
}

.client-actions-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(260px, 0.72fr);
  gap: 12px;
}

.client-rate-card,
.client-wallet-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.client-rate-card strong {
  color: var(--accent);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.04;
}

.client-rate-card {
  border-color: rgba(21, 148, 96, 0.32);
}

.client-wallet-card {
  border-color: rgba(200, 63, 52, 0.32);
}

.client-wallet-card button {
  justify-self: start;
  min-width: 160px;
}

.client-scan-bar {
  display: grid;
  gap: 9px;
  margin-top: 2px;
}

.client-scan-bar > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.client-scan-bar label {
  color: var(--text);
  font-size: 14px;
}

.transaction-preview {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 640px;
  padding: clamp(18px, 2.2vw, 28px);
  border-top-color: rgba(200, 63, 52, 0.48);
}

.client-front .status-dot {
  border-color: rgba(200, 63, 52, 0.48);
  background: #fde9e6;
  color: #8f241d;
}

.transaction-preview header,
.transaction-preview footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.transaction-preview header > div {
  display: grid;
  gap: 6px;
}

.party-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}

.party-row > div {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.party-row strong,
.party-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-token,
.module-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #eaf7ef;
  color: var(--accent);
  font-weight: 950;
}

.avatar-token.merchant,
.module-icon.cyan {
  background: #fde9e6;
  color: #a62c24;
}

.module-icon.shield {
  background: #fde9e6;
  color: var(--red);
  font-size: 12px;
}

.flow-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--red);
  font-weight: 950;
}

.preview-amount {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(21, 148, 96, 0.46);
  border-radius: 14px;
  background: linear-gradient(135deg, #e8f6ed, #fde9e6);
  padding: 18px;
}

.preview-amount strong {
  color: #0e4d33;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
}

.preview-amount span {
  color: #66756d;
  font-weight: 800;
}

.preview-timeline {
  display: grid;
  gap: 10px;
}

.preview-timeline div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 2px 10px;
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.preview-timeline span {
  grid-row: span 2;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.preview-timeline .done span {
  border-color: var(--accent);
  background: var(--accent);
}

.preview-timeline div:not(.done) span {
  border-color: var(--accent-2);
  background: #fde9e6;
}

.preview-timeline strong,
.preview-timeline small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-timeline small {
  color: var(--muted);
}

.preview-timeline em {
  grid-row: span 2;
  align-self: center;
  color: var(--muted-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.preview-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.preview-meta div {
  min-width: 0;
  border-left: 1px solid var(--line);
  padding: 2px 12px;
}

.preview-meta div:first-child {
  border-left: 0;
  padding-left: 0;
}

.ecosystem-strip {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(180px, 0.72fr));
  gap: 12px;
  align-items: stretch;
  margin-top: 18px;
  padding: 16px;
}

.ecosystem-strip > div:first-child {
  display: grid;
  align-content: center;
  gap: 5px;
}

.ecosystem-strip a,
.network-card {
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  min-height: 86px;
  padding: 14px;
}

.ecosystem-strip a:hover {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent-2);
  text-decoration: none;
}

.ecosystem-strip span,
.network-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.client-modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.client-module {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
}

.client-module:nth-child(2) {
  border-top-color: rgba(200, 63, 52, 0.58);
}

.client-module:nth-child(3) {
  border-top-color: rgba(21, 148, 96, 0.58);
}

.client-module ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: #43524b;
  line-height: 1.5;
}

.mini-scan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.client-module pre {
  min-height: 126px;
  max-height: 190px;
}

.proof-code {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #2f3a34;
  padding: 14px;
}

.proof-code code {
  color: #edf8f2;
  overflow-wrap: anywhere;
}

.client-boundary {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
  padding: 18px;
}

.client-boundary > div:first-child {
  display: grid;
  align-content: start;
  gap: 8px;
}

.client-boundary .boundary-note {
  grid-column: 1 / -1;
}

/* Cockpit */
.app-shell {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: rgba(251, 251, 248, 0.98);
}

.cockpit-brand {
  padding: 3px 5px 12px;
  border-bottom: 1px solid var(--line);
}

.app-nav {
  display: grid;
  align-content: start;
  gap: 7px;
}

.app-nav button {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  border-color: transparent;
  background: transparent;
  color: #4d5c54;
  text-align: left;
}

.app-nav button.active {
  border-color: rgba(31, 157, 114, 0.32);
  background: #e8f6ed;
  color: #124c37;
}

.sidebar-foot {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.sidebar-foot div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.sidebar-foot span { color: var(--muted); }
.sidebar-foot strong { color: var(--accent); font-size: 12px; }

.main-stage {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 18px;
}

.network-header {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.network-title {
  display: grid;
  gap: 8px;
}

.network-title h1 {
  font-size: clamp(28px, 3vw, 40px);
}

.status-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.toolbar {
  display: grid;
  grid-template-columns: auto auto auto minmax(180px, 1fr);
  gap: 8px;
  align-items: center;
}

.auth-state {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.auth-state[data-state="ok"] { color: var(--accent); }
.auth-state[data-state="error"] { color: var(--red); }
.auth-state[data-state="pending"] { color: var(--amber); }
.status-dot[data-state="ok"] {
  border-color: rgba(21, 148, 96, 0.45);
  background: #e8f6ed;
  color: #124c37;
}
.status-dot[data-state="pending"] {
  border-color: rgba(200, 63, 52, 0.38);
  background: #fde9e6;
  color: #8f241d;
}

.view-section { display: none; }
.view-section.active { display: grid; gap: 16px; }

.market-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.secondary-grid {
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
}

.trade-panel,
.route-panel,
.office-head,
.console-panel {
  display: grid;
  gap: 15px;
  padding: 16px;
}

.pair-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.workflow-rail,
.proof-timeline {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.workflow-rail div,
.proof-timeline div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 2px 10px;
  padding: 9px 0;
}

.workflow-rail strong,
.proof-timeline span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(53, 224, 161, 0.55);
  border-radius: 50%;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.proof-timeline span { background: rgba(53, 224, 161, 0.1); }
.workflow-rail span,
.proof-timeline strong { font-weight: 900; font-size: 13px; }
.workflow-rail small,
.proof-timeline small { color: var(--muted); font-size: 11px; }

.quick-actions,
.button-stack {
  display: grid;
  gap: 8px;
}

.quick-actions button {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-height: 58px;
}

.quick-actions button span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.split-grid,
.admin-grid,
.docs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

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

.activation-panel {
  grid-column: 1 / -1;
}

.activation-status-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.activation-status-list code {
  color: #124c37;
}

.office-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.danger-zone {
  border-color: rgba(231, 111, 97, 0.38);
  background: #fff4ec;
}

.contracts {
  display: grid;
  gap: 10px;
}

.tabs,
.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contract-meta {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 140px 120px 120px;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.contract-meta a {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #157756;
  font-size: 13px;
  font-weight: 800;
}

.contracts-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.scenario-panel {
  position: sticky;
  top: 18px;
}

.function-list {
  display: grid;
  gap: 10px;
}

.fn-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.fn-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.fn-card code {
  display: block;
  color: #157756;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.fn-card header span {
  color: var(--amber);
  font-size: 12px;
  font-weight: 900;
}

.arg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.fn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fn-output {
  min-height: 96px;
  max-height: 260px;
}

.journal {
  overflow: auto;
  padding: 16px;
}

table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  margin-top: 10px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 9px;
  text-align: left;
  font-size: 13px;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-weight: 900;
}

td code {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-panel pre { min-height: 170px; }

/* Checkout */
.pay-shell {
  min-height: 100vh;
  padding: 20px clamp(14px, 3vw, 42px) 42px;
}

.pay-layout {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1fr);
  gap: 16px;
}

.pay-summary,
.pay-card {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.summary-main {
  display: grid;
  gap: 10px;
}

.summary-main h1 {
  color: var(--accent);
  font-size: clamp(42px, 6vw, 72px);
}

.summary-list {
  display: grid;
  gap: 13px;
  margin: 0;
}

.summary-list div {
  display: grid;
  gap: 4px;
}

.summary-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.checkout-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.checkout-steps div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 8px;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.checkout-steps span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8f6ed;
  color: var(--accent);
  font-weight: 950;
}

.checkout-steps .active {
  border-color: rgba(53, 224, 161, 0.72);
  background: rgba(53, 224, 161, 0.08);
}

.checkout-steps strong { font-size: 13px; }
.checkout-steps small { font-size: 11px; }

.wallet-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

.wallet-line strong {
  display: block;
  max-width: 460px;
  overflow-wrap: anywhere;
  margin-top: 4px;
}

.pay-network {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pay-network strong {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(53, 224, 161, 0.42);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--accent);
}

/* DEX product redesign */
.client-front .public-shell,
.pay-shell {
  padding-top: 24px;
}

.client-nav,
.pay-topbar {
  min-height: 64px;
}

.brand-mark {
  box-shadow: inset 0 -10px 18px rgba(17, 24, 22, 0.16);
}

.public-nav a {
  position: relative;
  padding: 8px 0;
}

.public-nav a::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--accent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
}

.public-nav a:hover {
  text-decoration: none;
}

.public-nav a:hover::after {
  transform: scaleX(1);
}

.hero-composition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: start;
  gap: 24px;
}

.hero-message {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.client-copy h1 {
  max-width: 640px;
  font-size: 62px;
  line-height: 1;
}

.hero-line {
  font-size: 30px;
}

.hero-subcopy {
  max-width: 620px;
}

.hero-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.hero-action-row a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border-bottom: 2px solid var(--red);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.kmt-emblem {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 210px;
  border: 1px solid #dfe5df;
  border-radius: 18px;
  background:
    linear-gradient(145deg, #111816 0%, #17231e 58%, #251a18 100%);
  color: var(--accent);
  padding: 22px 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.kmt-emblem svg {
  width: 118px;
  height: 118px;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.28));
}

.kmt-emblem span {
  color: #eff6f0;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.client-copy,
.transaction-preview,
.ecosystem-strip,
.client-module,
.client-boundary,
.pay-summary,
.pay-card,
.trade-panel,
.route-panel,
.journal,
.network-header,
.office-head,
.console-panel {
  border-radius: 18px;
}

.client-copy,
.transaction-preview {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7faf7 100%);
}

.client-copy {
  gap: 18px;
  padding: 48px 58px 34px;
}

.transaction-preview {
  padding: 28px;
}

.trust-strip {
  padding: 10px 0;
}

.client-rate-card,
.client-wallet-card,
.preview-market-line div,
.pay-assurance div,
.execution-summary div {
  padding: 12px;
}

.client-rate-card strong {
  font-size: 32px;
}

.transaction-preview {
  border-top-color: rgba(200, 63, 52, 0.7);
}

.preview-market-line,
.pay-assurance,
.execution-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.preview-market-line div,
.pay-assurance div,
.execution-summary div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.preview-market-line span,
.pay-assurance span,
.execution-summary span,
.operator-health span {
  display: block;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.preview-market-line strong,
.pay-assurance strong,
.execution-summary strong,
.operator-health strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 14px;
}

.execution-summary small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.settlement-note,
.risk-panel {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(200, 63, 52, 0.28);
  border-left: 4px solid var(--red);
  border-radius: 12px;
  background: #fff7f6;
  padding: 13px 14px;
}

.settlement-note strong,
.risk-panel strong {
  color: #8f241d;
  font-size: 13px;
}

.settlement-note span,
.risk-panel span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.operator-title {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  align-items: start;
}

.operator-health {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(21, 148, 96, 0.28);
  border-radius: 14px;
  background: #eaf7ef;
  padding: 13px 14px;
}

.operator-health small {
  color: var(--muted);
  line-height: 1.35;
}

.network-header {
  border-top: 3px solid var(--accent);
}

.toolbar button:first-child,
.client-nav-actions button,
.hero-action-row button,
.client-wallet-card button,
.pay-card button[data-pay-action="connect"] {
  border-color: #0f7d50;
  background: #159460;
  color: #ffffff;
}

.toolbar button:first-child:hover,
.client-nav-actions button:hover,
.hero-action-row button:hover,
.client-wallet-card button:hover,
.pay-card button[data-pay-action="connect"]:hover {
  background: #0f7d50;
  color: #ffffff;
}

.market-grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.46fr);
}

.trade-panel {
  border-top: 3px solid var(--accent);
}

.route-panel {
  border-top: 3px solid var(--red);
}

.quick-actions button {
  border-color: var(--line);
  background: #ffffff;
}

.quick-actions button:hover {
  border-color: var(--red);
  background: #fff7f6;
  color: #8f241d;
}

.workflow-rail strong,
.proof-timeline span {
  border-color: rgba(21, 148, 96, 0.55);
  color: var(--accent);
}

.pay-layout {
  align-items: start;
}

.pay-summary {
  border-top: 3px solid var(--accent);
}

.pay-card {
  border-top: 3px solid var(--red);
}

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

.pay-card-head > div {
  display: grid;
  gap: 6px;
}

.checkout-steps .active {
  border-color: rgba(21, 148, 96, 0.72);
  background: #eaf7ef;
}

.checkout-steps span {
  background: #111816;
}

@media (max-width: 1380px) {
  .status-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .market-grid,
  .secondary-grid,
  .public-dex,
  .public-band,
  .client-hero { grid-template-columns: 1fr; }
  .public-market { min-height: auto; }
  .client-copy,
  .transaction-preview { min-height: auto; }
}

@media (max-width: 1100px) {
  .contracts-grid,
  .split-grid,
  .admin-grid,
  .docs-grid,
  .pay-layout,
  .client-actions-grid,
  .ecosystem-strip,
  .client-modules,
  .client-boundary { grid-template-columns: 1fr; }
  .client-nav { grid-template-columns: 1fr; }
  .client-nav-actions,
  .client-nav .public-nav { justify-content: flex-start; }
  .scenario-panel { position: static; }
  .form-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
  }
  .app-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-stage,
  .public-shell,
  .pay-shell { padding: 12px; }
  .public-topbar,
  .pay-topbar,
  .wallet-line,
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .toolbar,
  .status-strip,
  .network-ledger,
  .pair-strip,
  .trust-strip,
  .party-row,
  .preview-meta,
  .client-scan-bar > div,
  .mini-scan,
  .form-grid,
  .form-grid.compact,
  .desk-preview,
  .contract-meta,
  .office-head,
  .checkout-steps {
    grid-template-columns: 1fr;
  }
  .toolbar { display: flex; flex-wrap: wrap; }
  .auth-state { text-align: left; }
  table { min-width: 760px; }
  .client-copy { padding: 24px; }
  .client-copy h1 { font-size: 46px; }
  .hero-line { font-size: 25px; }
  .hero-composition,
  .preview-market-line,
  .pay-assurance,
  .execution-summary,
  .operator-title {
    grid-template-columns: 1fr;
  }
  .kmt-emblem {
    min-height: auto;
    justify-items: start;
  }
  .kmt-emblem svg {
    width: 96px;
    height: 96px;
  }
  .trust-strip div {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 10px 0;
  }
  .trust-strip div:first-child { border-top: 0; }
  .transaction-preview header,
  .transaction-preview footer { flex-direction: column; }
  .flow-arrow {
    width: 36px;
    height: 36px;
  }
  .preview-timeline div {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .preview-timeline em {
    grid-column: 2;
    grid-row: auto;
    align-self: start;
  }
  .client-boundary .boundary-note { grid-column: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  button,
  a,
  input,
  select {
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  }
}

/* Exact public DEX front */
.dex-front {
  --dex-bg: #050706;
  --dex-bg-2: #0a1110;
  --dex-green: #16c55f;
  --dex-green-soft: #103b25;
  --dex-red: #e83d5c;
  --dex-text: #f7faf8;
  --dex-muted: #9aa39e;
  --dex-line: rgba(255, 255, 255, 0.12);
  --dex-panel: rgba(17, 19, 18, 0.78);
  color: var(--dex-text);
  background:
    radial-gradient(circle at 49% 28%, rgba(22, 197, 95, 0.13), transparent 28%),
    radial-gradient(circle at 82% 2%, rgba(232, 61, 92, 0.08), transparent 24%),
    linear-gradient(180deg, #030403 0%, #07100d 54%, #030403 100%);
}

.dex-front::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(110deg, rgba(22, 197, 95, 0.025) 0 1px, transparent 1px 22px),
    radial-gradient(ellipse at 50% 42%, transparent 0 28%, rgba(22, 197, 95, 0.08) 28.2%, transparent 28.6%, transparent 34%, rgba(22, 197, 95, 0.055) 34.2%, transparent 34.6%);
  content: "";
}

.dex-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1440px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 30px 26px;
}

.dex-topbar {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(460px, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 84px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dex-brand,
.dex-actions,
.dex-nav,
.dex-cta-row,
.dex-cta-row > div,
.full-track-link,
.dex-secondary-action {
  display: flex;
  align-items: center;
}

.dex-brand {
  gap: 14px;
  color: var(--dex-text);
}

.dex-brand:hover,
.dex-nav a:hover,
.dex-secondary-action:hover,
.full-track-link:hover {
  text-decoration: none;
}

.dex-logo {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: linear-gradient(145deg, #17d767, #0f7d3e);
  color: #06100b;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  font-size: 28px;
  font-weight: 950;
}

.dex-brand strong {
  display: block;
  font-size: 22px;
  letter-spacing: 1px;
}

.dex-brand em {
  color: var(--dex-green);
  font-style: normal;
}

.dex-brand small {
  color: #c6cec9;
  font-size: 12px;
}

.dex-nav {
  justify-content: center;
  gap: 34px;
}

.dex-nav a {
  position: relative;
  min-height: 84px;
  display: inline-flex;
  align-items: center;
  color: #f0f4f1;
  font-size: 15px;
  font-weight: 900;
}

.dex-nav a.active {
  color: var(--dex-green);
}

.dex-nav a.active::after,
.dex-nav a:hover::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 2px;
  background: var(--dex-green);
  content: "";
}

.dex-actions {
  justify-content: flex-end;
  gap: 18px;
}

.dex-network {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 1px 9px;
  min-width: 174px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(3, 4, 3, 0.66);
  padding: 10px 14px;
}

.dex-network i,
.dex-network strong i,
.dex-network-stats i,
.amount-box i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dex-green);
  box-shadow: 0 0 16px rgba(22, 197, 95, 0.55);
}

.dex-network i {
  grid-row: span 2;
  align-self: center;
}

.dex-network span,
.dex-network-stats span,
.dex-rate-card span,
.amount-box span,
.transaction-meta dt,
.progress-list h3 {
  color: var(--dex-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.dex-network strong {
  color: var(--dex-text);
  font-size: 14px;
}

.dex-actions button,
.dex-cta-row button {
  gap: 10px;
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #19c862, #0f9b4e);
  color: #ffffff;
  padding: 13px 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 34px rgba(22, 197, 95, 0.18);
  font-size: 15px;
}

.dex-actions button svg,
.dex-cta-row button svg,
.dex-secondary-action svg,
.full-track-link svg {
  width: 21px;
  height: 21px;
}

.dex-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.56fr) minmax(440px, 0.74fr);
  gap: 34px;
  align-items: center;
  min-height: 610px;
  padding: 28px 0 22px;
}

.dex-copy {
  display: grid;
  align-content: center;
  gap: 22px;
  min-width: 0;
}

.dex-secure-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  min-height: 34px;
  border: 1px solid rgba(22, 197, 95, 0.24);
  border-radius: 999px;
  background: rgba(22, 197, 95, 0.12);
  color: #59e88f;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.dex-secure-pill svg {
  width: 18px;
  height: 18px;
}

.dex-copy h1 {
  max-width: 530px;
  margin: 0;
  color: #ffffff;
  font-size: 68px;
  line-height: 1.05;
  font-weight: 950;
}

.dex-copy h1 span,
.ecosystem-title strong {
  color: var(--dex-green);
}

.dex-subcopy {
  max-width: 570px;
  color: #d4dcd8;
  font-size: 18px;
  line-height: 1.55;
}

.dex-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 760px;
}

.dex-benefits div {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 1px 10px;
}

.dex-benefits svg {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  color: var(--dex-green);
}

.dex-benefits strong {
  color: #ffffff;
  font-size: 13px;
}

.dex-benefits span {
  color: #b4beb9;
  font-size: 11px;
  line-height: 1.35;
}

.dex-cta-row {
  gap: 24px;
}

.dex-cta-row > div {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.dex-cta-row small {
  color: #aeb8b2;
  font-size: 12px;
}

.dex-secondary-action {
  gap: 10px;
  min-height: 52px;
  min-width: 220px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(3, 4, 3, 0.5);
  color: #ffffff;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 900;
}

.dex-rate-card {
  display: grid;
  grid-template-columns: 58px minmax(220px, 1fr) 120px 170px auto;
  align-items: center;
  gap: 20px;
  max-width: 760px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  padding: 14px 16px;
}

.rate-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(22, 197, 95, 0.2);
  color: #78ee9e;
}

.rate-icon svg {
  width: 27px;
  height: 27px;
}

.dex-rate-card i {
  margin-left: 6px;
  color: var(--dex-green);
  font-style: normal;
}

.dex-rate-card strong {
  display: block;
  margin-top: 8px;
  color: #ffffff;
  font-size: 28px;
}

.dex-rate-card div:not(:first-of-type) strong {
  font-size: 13px;
}

.dex-rate-card a,
.dex-network-stats a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  color: #ffffff;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 900;
}

.dex-asset {
  position: relative;
  min-height: 390px;
}

.dex-asset::before,
.dex-asset::after {
  position: absolute;
  left: 50%;
  bottom: 36px;
  width: 360px;
  height: 118px;
  border: 1px solid rgba(22, 197, 95, 0.16);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}

.dex-asset::after {
  width: 250px;
  height: 78px;
  border-color: rgba(22, 197, 95, 0.26);
}

.shield-stand {
  position: absolute;
  left: 50%;
  bottom: 54px;
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
}

.shield-stand::after {
  width: 210px;
  height: 38px;
  border: 1px solid rgba(22, 197, 95, 0.5);
  border-radius: 50%;
  background: linear-gradient(180deg, #29332f, #060807);
  box-shadow: 0 0 30px rgba(22, 197, 95, 0.25);
  content: "";
}

.shield-body {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 222px;
  margin-bottom: -6px;
  background: linear-gradient(145deg, #3a4140, #0c100f 54%, #303634);
  clip-path: polygon(50% 0, 88% 16%, 80% 77%, 50% 100%, 20% 77%, 12% 16%);
  color: var(--dex-green);
  filter: drop-shadow(0 25px 42px rgba(0, 0, 0, 0.5));
}

.shield-body::before {
  position: absolute;
  inset: 18px 24px 28px;
  border: 5px solid var(--dex-green);
  clip-path: polygon(50% 0, 88% 16%, 80% 77%, 50% 100%, 20% 77%, 12% 16%);
  content: "";
}

.shield-body span {
  z-index: 1;
  font-size: 70px;
  font-weight: 950;
}

.coin-body {
  position: absolute;
  right: -58px;
  bottom: 34px;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 6px solid #5b625e;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6d746f, #171b19 62%);
  color: var(--dex-green);
  box-shadow: 0 18px 26px rgba(0, 0, 0, 0.45);
  font-size: 29px;
  font-weight: 950;
  transform: rotate(-10deg);
}

.dex-transaction-card {
  display: grid;
  gap: 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f7f8f7);
  color: #151716;
  padding: 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.38);
}

.dex-transaction-card h2 {
  color: #727976;
  font-size: 13px;
  text-transform: uppercase;
}

.transaction-parties {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e7e4;
}

.transaction-parties > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.party-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.party-avatar svg {
  width: 24px;
  height: 24px;
}

.party-avatar.green {
  background: #d8f6df;
  color: #15a957;
}

.party-avatar.red {
  background: #fde1e8;
  color: var(--dex-red);
}

.party-arrow {
  color: #bac0bd;
  font-size: 32px;
  text-align: center;
}

.amount-box {
  display: grid;
  gap: 5px;
  border-bottom: 1px solid #e4e7e4;
  padding: 0 0 12px;
}

.amount-box strong {
  color: #050706;
  font-size: 39px;
  line-height: 1;
}

.amount-box small {
  font-size: 16px;
}

.amount-box em {
  display: inline-flex;
  margin-left: 8px;
  border-radius: 999px;
  background: #dff4e4;
  color: #13964d;
  padding: 3px 8px;
  font-size: 12px;
  font-style: normal;
}

.amount-box p {
  color: #69716d;
  font-size: 15px;
}

.transaction-meta {
  display: grid;
  gap: 9px;
  margin: 0;
}

.transaction-meta div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.transaction-meta dt {
  display: flex;
  gap: 8px;
}

.transaction-meta dd {
  margin: 0;
  color: #565d59;
  font-size: 13px;
}

.progress-list {
  display: grid;
  gap: 6px;
  border-top: 1px solid #e4e7e4;
  padding-top: 12px;
}

.progress-list div {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 3px 0;
}

.progress-list span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--dex-red);
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
}

.progress-list .done span {
  background: #26b864;
}

.progress-list strong {
  font-size: 14px;
}

.progress-list small {
  color: #727976;
  font-size: 10px;
}

.progress-list em {
  grid-row: span 2;
  align-self: center;
  border-radius: 999px;
  background: #fde1e8;
  color: var(--dex-red);
  padding: 6px 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.progress-list .done em {
  background: #dcf6e3;
  color: #16984f;
}

.full-track-link {
  justify-content: center;
  gap: 12px;
  min-height: 42px;
  border: 1px solid #bcc3bf;
  border-radius: 8px;
  color: #202522;
  font-size: 13px;
  font-weight: 900;
}

.dex-ecosystem {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) repeat(4, minmax(190px, 1fr));
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0 10px;
}

.ecosystem-title {
  display: grid;
  align-content: center;
  gap: 16px;
}

.ecosystem-title span {
  color: var(--dex-green);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.ecosystem-title h2 {
  color: #ffffff;
  font-size: 28px;
  line-height: 1.2;
}

.dex-ecosystem article {
  display: grid;
  gap: 10px;
  min-height: 140px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  padding: 22px;
}

.dex-ecosystem svg {
  width: 30px;
  height: 30px;
  color: var(--dex-green);
}

.dex-ecosystem h3 {
  color: #ffffff;
  font-size: 15px;
}

.dex-ecosystem p {
  color: #aeb8b2;
  font-size: 12px;
  line-height: 1.5;
}

.dex-network-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
  align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0 0;
}

.dex-network-stats strong {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-size: 13px;
}

.dex-scan-panel,
.dex-api-boundary {
  display: none;
}

/* Simplified KMT payment page */
.simple-pay-page {
  color: #f7faf8;
  background:
    radial-gradient(circle at 16% 8%, rgba(22, 197, 95, 0.18), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(232, 61, 92, 0.1), transparent 26%),
    linear-gradient(135deg, #050706 0%, #0b1511 58%, #050706 100%);
}

.simple-pay-shell {
  width: min(100%, 1160px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 26px;
}

.simple-pay-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.simple-pay-network {
  display: grid;
  gap: 4px;
  min-width: 180px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(3, 4, 3, 0.66);
  padding: 12px 14px;
}

.simple-pay-network span,
.simple-pay-facts dt {
  color: #9aa39e;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.simple-pay-network strong {
  color: #ffffff;
}

.simple-pay-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.simple-pay-summary,
.simple-sign-card {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.simple-pay-summary {
  display: grid;
  gap: 22px;
  align-content: start;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
  padding: 30px;
}

.simple-pay-summary h1 {
  color: #ffffff;
  font-size: 64px;
  line-height: 1;
}

.simple-pay-summary h1 span {
  color: #16c55f;
  font-size: 28px;
}

.simple-pay-summary p {
  color: #d4dcd8;
  font-size: 16px;
}

.simple-pay-facts {
  display: grid;
  gap: 12px;
  margin: 0;
}

.simple-pay-facts div {
  display: grid;
  gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
}

.simple-pay-facts dd {
  margin: 0;
  color: #ffffff;
  overflow-wrap: anywhere;
}

.simple-pay-facts code {
  color: #dff4e4;
}

.simple-pay-return {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.simple-pay-return a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  color: #ffffff;
  padding: 9px 13px;
  font-weight: 900;
}

.simple-sign-card {
  display: grid;
  gap: 18px;
  background: linear-gradient(180deg, #ffffff, #f7faf7);
  color: #101412;
  padding: 30px;
}

.simple-sign-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.simple-sign-head > div {
  display: grid;
  gap: 7px;
}

.simple-sign-head h2 {
  font-size: 34px;
}

.simple-sign-head p {
  max-width: 520px;
  color: #53635c;
}

#pay-signature-counter {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  background: #eaf7ef;
  color: #0f7d50;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.simple-sign-steps {
  display: grid;
  gap: 10px;
}

.simple-sign-steps div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 12px;
  border: 1px solid #dfe5df;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
}

.simple-sign-steps span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #111816;
  color: #ffffff;
  font-weight: 950;
}

.simple-sign-steps .active {
  border-color: rgba(21, 148, 96, 0.45);
  background: #f4fbf6;
}

.simple-sign-steps .done span {
  background: #159460;
}

.simple-sign-steps strong {
  font-size: 15px;
}

.simple-sign-steps small {
  color: #69756e;
}

.simple-pay-primary {
  min-height: 58px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #19c862, #0f9b4e);
  color: #ffffff;
  font-size: 17px;
  font-weight: 950;
  box-shadow: 0 18px 34px rgba(22, 197, 95, 0.22);
}

.simple-pay-primary:disabled {
  cursor: wait;
  opacity: 0.72;
}

.simple-pay-note {
  display: grid;
  gap: 4px;
  border-left: 4px solid #16c55f;
  border-radius: 12px;
  background: #eaf7ef;
  padding: 13px 14px;
}

.simple-pay-note strong {
  color: #0f7d50;
}

.simple-pay-note span {
  color: #53635c;
  font-size: 13px;
}

.simple-sign-card .checkout-steps {
  display: none;
}

.simple-pay-advanced {
  border-top: 1px solid #dfe5df;
  padding-top: 12px;
}

.simple-pay-advanced summary {
  cursor: pointer;
  color: #53635c;
  font-weight: 900;
}

.simple-pay-advanced .action-row {
  margin-top: 12px;
}

.simple-pay-advanced pre {
  margin-top: 12px;
}

/* Pay page aligned with exact DEX front */
.pay-dex-page {
  background:
    radial-gradient(circle at 49% 28%, rgba(22, 197, 95, 0.13), transparent 28%),
    radial-gradient(circle at 82% 2%, rgba(232, 61, 92, 0.08), transparent 24%),
    linear-gradient(180deg, #030403 0%, #07100d 54%, #030403 100%);
}

.pay-dex-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(250px, 0.44fr) minmax(430px, 0.66fr);
  gap: 34px;
  align-items: center;
  min-height: calc(100vh - 112px);
  padding: 28px 0;
}

.pay-dex-copy h1 {
  max-width: 560px;
}

.pay-dex-rate {
  grid-template-columns: 58px minmax(190px, 1fr) minmax(130px, 0.7fr) minmax(90px, 0.5fr);
}

.pay-dex-asset {
  min-height: 360px;
}

.pay-dex-card {
  display: grid;
  gap: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f7f8f7);
  color: #151716;
  padding: 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.38);
}

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

.pay-dex-card-head h2 {
  color: #050706;
  font-size: 28px;
}

.pay-dex-amount {
  display: grid;
  gap: 5px;
  border-bottom: 1px solid #e4e7e4;
  padding-bottom: 13px;
}

.pay-dex-amount span,
.pay-dex-meta dt {
  color: #8b948f;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.pay-dex-amount strong {
  color: #050706;
  font-size: 44px;
  line-height: 1;
}

.pay-dex-amount small {
  color: #159460;
  font-size: 18px;
}

.pay-dex-amount p {
  color: #69716d;
}

.pay-dex-meta {
  display: grid;
  gap: 9px;
  margin: 0;
}

.pay-dex-meta div {
  display: grid;
  gap: 4px;
}

.pay-dex-meta dd {
  margin: 0;
  color: #1f2723;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.pay-dex-meta code {
  color: #1f2723;
}

.pay-dex-steps div {
  border-radius: 12px;
  padding: 12px;
}

.pay-dex-primary {
  min-height: 56px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #19c862, #0f9b4e);
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 18px 34px rgba(22, 197, 95, 0.22);
}

.pay-dex-note {
  border-left: 4px solid #16c55f;
  border-radius: 10px;
  background: #eaf7ef;
  color: #53635c;
  padding: 12px 13px;
  font-size: 13px;
}

.pay-dex-card .checkout-steps {
  display: none;
}

.pay-dex-advanced {
  border-top: 1px solid #e4e7e4;
  padding-top: 11px;
}

.pay-dex-return {
  border-top: 1px solid #e4e7e4;
  padding-top: 12px;
}

.pay-dex-return a {
  color: #151716;
}

/* KMT Core Pro read-only console */
.pro-console-page {
  min-height: 100vh;
  background: #eef3ef;
  color: #111816;
}

.pro-shell {
  display: grid;
  gap: 18px;
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 22px;
}

.pro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 14px 16px;
}

.pro-header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 18px;
}

.pro-header nav a {
  color: #32443b;
  font-size: 13px;
  font-weight: 900;
}

.pro-hero,
.pro-panel,
.pro-metrics article,
.pro-state-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
}

.pro-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: center;
  padding: clamp(22px, 3vw, 38px);
  border-top: 4px solid var(--accent);
}

.pro-hero h1 {
  max-width: 900px;
  font-size: clamp(38px, 4vw, 66px);
}

.pro-hero p {
  max-width: 920px;
  margin-top: 10px;
  font-size: 18px;
}

.pro-state-card {
  display: grid;
  gap: 6px;
  padding: 18px;
}

.pro-state-card span,
.pro-metrics span,
.pro-audit span,
.pro-risk span {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.pro-state-card strong {
  font-size: 34px;
  line-height: 1;
}

.pro-state-ok { color: var(--accent); }
.pro-state-degraded { color: var(--red); }

.pro-grid {
  display: grid;
  gap: 14px;
}

.pro-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.pro-metrics article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 16px;
}

.pro-metrics strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 23px;
}

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

.pro-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

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

.pro-risk-list,
.pro-list,
.pro-audit {
  display: grid;
  gap: 10px;
}

.pro-risk,
.pro-list div,
.pro-audit div {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf8;
  padding: 12px;
}

.pro-risk-ok { border-left: 4px solid var(--accent); }
.pro-risk-info { border-left: 4px solid #5c7cfa; }
.pro-risk-warning { border-left: 4px solid var(--amber); }
.pro-risk-critical { border-left: 4px solid var(--red); }

.pro-list code,
.pro-table-wrap code {
  overflow-wrap: anywhere;
  color: #345246;
  font-size: 11px;
}

.pro-table-wrap {
  overflow: auto;
}

.pro-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 940px;
}

.pro-table-wrap th,
.pro-table-wrap td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
  font-size: 12px;
}

.pro-table-wrap th {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.settlement-hero {
  border-top-color: #0c8f6d;
}

.settlement-alert {
  border-color: rgba(211, 47, 47, 0.22);
  background: #fffafa;
}

.settlement-status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8faf8;
  padding: 3px 9px;
  color: #23372f;
  font-size: 11px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.settlement-status-confirmed,
.settlement-status-mined,
.settlement-status-reconciled {
  border-color: rgba(21, 148, 96, 0.26);
  background: #eaf8f0;
  color: #087545;
}

.settlement-status-pending,
.settlement-status-settlement_pending,
.settlement-status-waiting_signature,
.settlement-status-pending_signature,
.settlement-status-prepared {
  border-color: rgba(245, 158, 11, 0.28);
  background: #fff8e8;
  color: #8a5b00;
}

.settlement-status-failed,
.settlement-status-dead,
.settlement-status-cancelled {
  border-color: rgba(211, 47, 47, 0.24);
  background: #fff0f0;
  color: #b42318;
}

@media (max-width: 1160px) {
  .pro-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pro-hero,
  .pro-two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .pro-shell {
    padding: 12px;
  }

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

  .pro-metrics {
    grid-template-columns: 1fr;
  }
}

/* Back-office v2: simpler command-first operator UI */
.backoffice-v2 {
  background: #eef3ef;
}

.backoffice-v2 .app-shell {
  grid-template-columns: 292px minmax(0, 1fr);
}

.backoffice-v2 .sidebar {
  border-right-color: #dbe4dc;
  background: #f9fbf8;
}

.backoffice-v2 .main-stage {
  gap: 18px;
  padding: 22px;
  overflow-x: hidden;
}

.backoffice-v2 .network-header,
.backoffice-v2 .activation-command,
.backoffice-v2 .trade-panel,
.backoffice-v2 .route-panel,
.backoffice-v2 .journal,
.backoffice-v2 .office-head,
.backoffice-v2 .console-panel {
  border-radius: 12px;
  box-shadow: none;
}

.backoffice-v2 .network-header {
  border-top: 3px solid var(--accent);
}

.backoffice-v2 .network-title.operator-title {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.28fr);
  align-items: stretch;
}

.backoffice-v2 .network-title h1 {
  font-size: clamp(36px, 3.4vw, 54px);
  line-height: 1.02;
}

.backoffice-v2 .network-title p {
  max-width: 1020px;
  font-size: 18px;
}

.backoffice-v2 .operator-health {
  border: 1px solid rgba(21, 148, 96, 0.24);
  border-radius: 10px;
  background: #eaf7ef;
  padding: 16px;
}

.backoffice-v2 .status-strip {
  grid-template-columns: repeat(8, minmax(92px, 1fr));
}

.backoffice-v2 .toolbar {
  grid-template-columns: repeat(3, auto) minmax(0, 1fr);
}

.activation-command {
  display: grid;
  grid-template-columns: minmax(260px, 0.74fr) minmax(360px, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid rgba(21, 148, 96, 0.28);
  background: #ffffff;
  padding: 18px 20px;
}

.activation-command[data-state="needs-signature"] {
  border-left: 5px solid var(--red);
}

.activation-command[data-state="ready"] {
  border-left: 5px solid var(--accent);
}

.command-label {
  display: block;
  margin-bottom: 6px;
  color: var(--red);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.activation-command h2 {
  font-size: 24px;
}

.activation-command p {
  max-width: 760px;
}

.command-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.command-metrics div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf8;
  padding: 10px 12px;
}

.command-metrics span {
  display: block;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.command-metrics code,
.command-metrics strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  color: #111816;
  font-size: 13px;
}

.command-actions {
  display: grid;
  gap: 8px;
  min-width: 190px;
}

.command-actions button {
  width: 100%;
}

.command-actions button:nth-child(2) {
  border-color: rgba(21, 148, 96, 0.44);
  background: #159460;
  color: #ffffff;
}

.command-actions button:nth-child(3) {
  border-color: rgba(17, 24, 22, 0.24);
  background: #111816;
  color: #ffffff;
}

.backoffice-v2 .market-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.36fr);
}

.backoffice-v2 .form-grid.compact {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

@media (max-width: 1280px) {
  .activation-command {
    grid-template-columns: 1fr;
  }

  .command-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .dex-topbar {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0;
  }

  .dex-nav,
  .dex-actions {
    justify-content: flex-start;
  }

  .dex-nav {
    gap: 18px;
    overflow-x: auto;
  }

  .dex-nav a {
    min-height: 42px;
  }

  .dex-nav a.active::after,
  .dex-nav a:hover::after {
    bottom: 0;
  }

  .dex-hero {
    grid-template-columns: 1fr;
  }

  .pay-dex-hero {
    grid-template-columns: 1fr;
  }

  .dex-asset {
    order: 2;
    min-height: 300px;
  }

  .dex-transaction-card {
    order: 3;
  }

  .pay-dex-card {
    order: 3;
  }

  .dex-ecosystem,
  .dex-network-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 920px) {
  .simple-pay-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .dex-shell {
    padding: 12px;
    overflow: hidden;
  }

  .dex-actions,
  .dex-cta-row,
  .dex-benefits,
  .dex-rate-card,
  .transaction-parties,
  .dex-ecosystem,
  .dex-network-stats {
    grid-template-columns: 1fr;
  }

  .dex-actions,
  .dex-cta-row {
    display: grid;
    align-items: flex-start;
    width: 100%;
    gap: 12px;
  }

  .dex-nav {
    flex-wrap: wrap;
    gap: 8px 18px;
    overflow: visible;
  }

  .dex-nav a {
    min-height: 30px;
    font-size: 14px;
  }

  .dex-nav a.active::after,
  .dex-nav a:hover::after {
    bottom: -2px;
  }

  .dex-network,
  .dex-actions button,
  .dex-secondary-action,
  .dex-cta-row button,
  .simple-pay-network {
    width: 100%;
    min-width: 0;
  }

  .simple-pay-shell {
    padding: 14px;
  }

  .simple-pay-topbar,
  .simple-sign-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .simple-pay-summary,
  .simple-sign-card {
    padding: 20px;
  }

  .simple-pay-summary h1 {
    font-size: 48px;
  }

  .dex-copy h1 {
    font-size: 46px;
  }

  .pay-dex-rate {
    grid-template-columns: 1fr;
  }

  .pay-dex-card {
    padding: 18px;
  }

  .pay-dex-card-head {
    flex-direction: column;
  }

  .dex-subcopy {
    font-size: 16px;
  }

  .dex-benefits {
    gap: 12px;
  }

  .dex-rate-card {
    display: grid;
  }

  .dex-asset {
    min-height: 250px;
  }

  .shield-body {
    width: 150px;
    height: 178px;
  }

  .coin-body {
    width: 76px;
    height: 76px;
    right: -40px;
    font-size: 22px;
  }

  .dex-transaction-card {
    padding: 18px;
  }
}