/* ============================================================
   Sera Explorer — static site stylesheet
   Ported from the Earn visual base (same token names) with the
   explorer-specific components appended. Tokens first, then base,
   shared chrome, explorer components, and media queries.
   ============================================================ */

:root {
  color-scheme: light;
  --bg: #f7f3e8;
  --bg-card: #ffffff;
  --bg-elevated: #f0ebdc;
  --bg-soft: #faf6ec;
  --page-top: #eee4cc;
  --page-bottom: #eee4cc;
  --wash-green: rgba(212, 245, 223, 0.62);
  --wash-amber: rgba(245, 237, 216, 0.78);
  --topbar-bg: rgba(247, 243, 232, 0.82);
  --card-fill: rgba(255, 255, 255, 0.78);
  --card-fill-soft: rgba(255, 255, 255, 0.68);
  --selected-fill: #ffffff;
  --input-fill: rgba(255, 255, 255, 0.88);
  --button-inset: rgba(255, 255, 255, 0.45);
  --facts-bg: rgba(17, 32, 24, 0.96);
  --facts-divider: rgba(255, 255, 255, 0.14);
  --facts-text: #ffffff;
  --facts-muted: rgba(239, 247, 239, 0.72);
  --band-soft-bg: rgba(240, 235, 220, 0.56);
  --border: rgba(20, 50, 30, 0.10);
  --border-strong: rgba(20, 50, 30, 0.18);
  --text: #1a2922;
  --text-muted: rgba(26, 41, 34, 0.74);
  --text-dim: rgba(26, 41, 34, 0.68);
  --accent: #15803d;
  --accent-dim: #166534;
  --accent-soft: rgba(21, 128, 61, 0.08);
  --accent-info: #315c8d;
  --accent-warn: #b8843a;
  --accent-warn-text: #8a5f23;
  --warn-soft: rgba(184, 132, 58, 0.13);
  --danger: #b85838;
  --danger-soft: rgba(184, 88, 56, 0.11);
  --shadow: 0 2px 12px rgba(20, 50, 30, 0.05);
  --shadow-hover: 0 8px 28px rgba(20, 50, 30, 0.09);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --headline: var(--sans);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 64px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101611;
  --bg-card: #18231e;
  --bg-elevated: #1d2922;
  --bg-soft: #121d18;
  --page-top: #121a15;
  --page-bottom: #0d130f;
  --wash-green: rgba(57, 217, 130, 0.16);
  --wash-amber: rgba(228, 185, 108, 0.12);
  --topbar-bg: rgba(16, 22, 17, 0.86);
  --card-fill: rgba(24, 35, 30, 0.86);
  --card-fill-soft: rgba(20, 31, 26, 0.76);
  --selected-fill: #172c21;
  --input-fill: rgba(10, 18, 14, 0.82);
  --button-inset: rgba(255, 255, 255, 0.07);
  --facts-bg: rgba(7, 15, 10, 0.98);
  --facts-divider: rgba(215, 246, 229, 0.16);
  --facts-text: #f5fff7;
  --facts-muted: rgba(238, 247, 239, 0.66);
  --band-soft-bg: rgba(19, 31, 25, 0.62);
  --border: rgba(218, 246, 228, 0.12);
  --border-strong: rgba(218, 246, 228, 0.22);
  --text: #edf8f0;
  --text-muted: rgba(237, 248, 240, 0.68);
  --text-dim: rgba(237, 248, 240, 0.6);
  --accent: #39d982;
  --accent-dim: #25aa63;
  --accent-soft: rgba(57, 217, 130, 0.13);
  --accent-info: #82b7ee;
  --accent-warn: #e4b96c;
  --accent-warn-text: #e4b96c;
  --warn-soft: rgba(228, 185, 108, 0.15);
  --danger: #ec8a6c;
  --danger-soft: rgba(236, 138, 108, 0.14);
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.24);
  --shadow-hover: 0 10px 34px rgba(0, 0, 0, 0.34);
}

/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 12% -10%, var(--wash-green), transparent 60%),
    radial-gradient(70% 55% at 88% -10%, var(--wash-amber), transparent 60%),
    linear-gradient(180deg, var(--page-top) 0%, var(--bg) 36%, var(--bg) 78%, var(--page-bottom) 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

p a,
li a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

button,
input {
  font: inherit;
}

code {
  font-family: var(--mono);
  font-size: 0.92em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: var(--space-5);
  color: var(--text);
  font-family: var(--headline);
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.022em;
}

h2 {
  margin-bottom: var(--space-4);
  font-family: var(--headline);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

h3 {
  margin-bottom: var(--space-2);
  font-size: var(--fs-md);
  font-weight: 700;
}

.shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

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

/* ---------- Utilities ---------- */

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus {
  top: var(--space-2);
}

.eyebrow {
  color: var(--accent-dim);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html[data-theme="dark"] .eyebrow {
  color: var(--accent);
}

.meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.note {
  margin: var(--space-4) 0 0;
  border-left: 3px solid var(--accent-warn);
  background: var(--card-fill-soft);
  padding: var(--space-4);
  color: var(--text);
  line-height: 1.6;
}

.lede {
  max-width: 690px;
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.58;
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.topbar-inner {
  width: min(1280px, calc(100% - 48px));
  min-height: 68px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.topbar-spacer {
  flex: 1;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--text);
}

/* Wordmark from the Sera brand kit: SVG for light, PNG for dark. */
.brand-logo {
  display: none;
  height: 20px;
  width: auto;
}

html[data-theme="light"] .brand-logo-light {
  display: block;
}

html[data-theme="dark"] .brand-logo-dark {
  display: block;
}

.brand-suffix {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.topnav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
}

.topnav-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.topnav-link:hover,
.topnav-link.is-active {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 1px 0 var(--border-strong) inset;
}

.theme-toggle {
  min-height: 38px;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  padding: 0;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--button-inset) inset;
}

.theme-toggle:hover {
  border-color: var(--accent-soft);
  color: var(--text);
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.live-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
}

.live-pill.is-ok::before {
  background: var(--accent);
}

.live-pill.is-warn::before {
  background: var(--accent-warn);
}

.live-pill.is-err::before {
  background: var(--danger);
}

/* ---------- Settings popover ---------- */

.settings-wrap {
  position: relative;
  display: inline-flex;
}

.settings-btn {
  min-height: 38px;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--button-inset) inset;
}

.settings-btn:hover {
  border-color: var(--accent-soft);
  color: var(--text);
}

.settings-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: var(--shadow-hover);
}

.settings-pop select {
  font: inherit;
  font-size: var(--fs-sm);
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--input-fill);
  color: var(--text);
  padding: 9px 10px;
  outline: none;
}

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

.settings-title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.settings-pop input {
  font-family: var(--mono);
  font-size: var(--fs-xs);
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.settings-status {
  margin: 0;
  min-height: 1.3em;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.settings-status.is-ok {
  color: var(--accent-dim);
}

html[data-theme="dark"] .settings-status.is-ok {
  color: var(--accent);
}

.settings-status.is-err {
  color: var(--danger);
}

/* ---------- Buttons ---------- */

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  padding: 0 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--button-inset) inset;
}

.button:hover {
  border-color: var(--accent);
}

.button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.button.primary:hover {
  background: var(--accent-dim);
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.button.primary:disabled:hover {
  background: var(--accent);
}

.mini-action {
  justify-self: start;
  border: 1px solid rgba(21, 128, 61, 0.22);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dim);
  padding: 7px 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

html[data-theme="dark"] .mini-action {
  color: var(--accent);
  border-color: rgba(57, 217, 130, 0.3);
}

.mini-action:hover {
  border-color: var(--accent);
}

.mini-action:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

/* ---------- Inputs ---------- */

label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
}

input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--input-fill);
  color: var(--text);
  padding: 11px 12px;
  outline: none;
}

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

input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.field-error {
  margin: 4px 0 0;
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.form-help {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  max-width: 640px;
}

/* ---------- Card base ---------- */

.card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
}

/* Inside fill-card side headers the status pill sits next to the small
   role badge — same scale, or the two cards' rows drift out of alignment. */
.fill-side .status-pill {
  padding: 2px 8px;
}

/* Truncated hashes/uuids in meta grids never re-wrap mid-value. */
.uuid-grid > div {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nowrap {
  white-space: nowrap;
}

.break-at-dot {
  overflow-wrap: normal;
}

/* ---------- Status pills ---------- */

.status-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dim);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

html[data-theme="dark"] .status-pill {
  color: var(--accent);
}

.status-pill.ok {
  background: var(--accent-soft);
  color: var(--accent-dim);
}

html[data-theme="dark"] .status-pill.ok {
  color: var(--accent);
}

.status-pill.fail {
  background: var(--danger-soft);
  color: var(--danger);
}

.status-pill.pending {
  background: var(--warn-soft);
  color: var(--accent-warn-text);
}

/* ---------- Stat band ---------- */

.stat-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--facts-bg);
  padding: var(--space-5) 0;
  margin-bottom: var(--space-3);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stat-card {
  padding: var(--space-2) var(--space-5);
  color: var(--facts-text);
  min-width: 0;
}

.stat-card + .stat-card {
  border-left: 1px solid var(--facts-divider);
}

.stat-card:first-child {
  padding-left: 0;
}

.stat-card strong {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.stat-card span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-base);
  font-weight: 700;
}

.stat-card small {
  display: block;
  margin-top: var(--space-1);
  color: var(--facts-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* ---------- Page intro and summary ---------- */

.page-intro {
  padding: 72px 0 var(--space-5);
}

.page-intro .eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.page-intro h1 {
  max-width: 820px;
  font-size: clamp(36px, 4.4vw, 56px);
}

.page-intro .lede {
  margin-bottom: var(--space-5);
}

.setup-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.setup-summary > div {
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-fill-soft);
}

/* Direct children only: the value <strong> may wrap addresses/links in spans
   of its own, which must NOT inherit the uppercase label treatment. */
.setup-summary > div > span {
  display: block;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.setup-summary strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* ---------- List view ---------- */

.list-view {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-2) 0 var(--space-6);
}

.list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pair-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pair-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-fill);
  color: var(--text-muted);
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.pair-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

.pair-chip.selected {
  border-color: var(--accent);
  background: var(--selected-fill);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ---------- Banners ---------- */

.banners {
  display: grid;
  gap: var(--space-2);
}

.banners:empty {
  display: none;
}

.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--card-fill-soft);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.banner-msg {
  flex: 1 1 240px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.banner-info {
  border-left-color: var(--accent-info);
}

.banner-warn {
  border-left-color: var(--accent-warn);
}

.banner-error {
  border-left-color: var(--danger);
}

/* ---------- Data table ---------- */

.table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:nth-child(even) {
  background: var(--bg-soft);
}

.data-table tbody tr:hover {
  background: var(--accent-soft);
}

/* ---------- Bps badge ---------- */

.bps-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}

.bps-badge.pos {
  background: var(--accent-soft);
  color: var(--accent-dim);
}

html[data-theme="dark"] .bps-badge.pos {
  color: var(--accent);
}

/* Negative edges are deliberately NOT highlighted — green gains are the only
   color accent; losses read as plain muted text. */
.bps-badge.neg {
  color: var(--text-muted);
}

.bps-badge.flat {
  color: var(--text-dim);
}

.bps-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.78;
}

/* ---------- Hash and copy ---------- */

.hash {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

a.hash:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.copy-btn,
.ext-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.copy-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.copy-btn.is-copied {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dim);
}

html[data-theme="dark"] .copy-btn.is-copied {
  color: var(--accent);
}

/* ---------- Live row, pending marker ---------- */

@keyframes live-flash {
  from {
    background-color: var(--accent-soft);
  }
  to {
    background-color: transparent;
  }
}

.live-row {
  animation: live-flash 1.8s ease-out 1;
}

.pending-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent-warn);
  vertical-align: middle;
}

/* ---------- Skeletons and spinner ---------- */

@keyframes skel-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.skel-line {
  min-width: 40px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-soft) 45%, var(--bg-elevated) 65%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s linear infinite;
}

.skeleton td:nth-child(odd) .skel-line {
  width: 72%;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .skel-line,
  .live-row,
  .spinner {
    animation: none;
  }
}

/* ---------- Load more, empty state ---------- */

.load-more {
  display: block;
  margin: var(--space-2) auto 0;
  min-height: 44px;
  padding: 0 28px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--button-inset) inset;
}

.load-more:hover {
  border-color: var(--accent);
}

.load-more:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.empty-state {
  padding: var(--space-6) var(--space-4);
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Mid badge ---------- */

.mid-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.mid-badge.live {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dim);
}

html[data-theme="dark"] .mid-badge.live {
  color: var(--accent);
}

.mid-badge.none {
  border-style: dashed;
  color: var(--text-dim);
}

/* ---------- Status strip & profit hero ---------- */

.status-strip {
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--fs-xs);
}

.profit-hero {
  margin-bottom: var(--space-2);
  font-family: var(--mono);
  font-size: clamp(44px, 6vw, 72px);
  letter-spacing: -0.01em;
}

.profit-sub {
  margin-bottom: var(--space-4);
  color: var(--accent-dim);
  font-family: var(--mono);
  font-size: var(--fs-md);
  font-weight: 600;
}

html[data-theme="dark"] .profit-sub {
  color: var(--accent);
}

/* ---------- Filter bar & drawer ---------- */

.filter-bar {
  display: grid;
  gap: var(--space-2);
}

.filters-btn {
  margin-left: auto;
  white-space: nowrap;
}

.filter-count {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 0.35em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.78em;
  text-align: center;
}

.filter-drawer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
}

.filter-field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
}

.filter-field > span {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.filter-field small {
  color: var(--text-dim);
  line-height: 1.35;
}

/* Selects inherit nothing by default — match the global input skin. */
.filter-field select {
  font: inherit;
  font-size: var(--fs-sm);
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--input-fill);
  color: var(--text);
  padding: 9px 10px;
  outline: none;
}

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

.filter-field select:disabled {
  opacity: 0.55;
}

.filter-field input {
  font-size: var(--fs-sm);
  min-width: 0;
  padding: 9px 10px;
}

.filter-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.filter-inline input {
  flex: 1 1 96px;
  width: auto;
}

.filter-inline input[type="date"] {
  flex: 1 1 135px;
}

.filter-inline select {
  flex: 1 1 auto;
  width: auto;
}

.filter-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-presets .mini-action[aria-pressed="true"] {
  outline: 2px solid var(--accent);
}

/* Footer row: span the grid, button on the right. */
.filter-actions {
  grid-column: 1 / -1;
  justify-items: end;
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.filter-actions > span {
  display: none;
}

/* ---------- Row interactions & failed attempts ---------- */

.data-table tbody tr.row-link {
  cursor: pointer;
}

.failed-row {
  opacity: 0.85;
}

.failed-row td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

.pair-chip.failed-chip {
  border-style: dashed;
}

.pair-chip.failed-chip.selected {
  border-style: solid;
}

/* ---------- Universal search ---------- */

.search-top {
  padding-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.search-title {
  margin: 0;
  font-size: var(--fs-xl);
}

/* The list page embeds the bare form (no card wrapper) — give it the card skin. */
.search-top > .decode-form {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
}

.decode-card {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
}

.decode-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.decode-form input {
  flex: 1 1 320px;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--fs-sm);
}

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

.fill-card h2 {
  margin-bottom: var(--space-2);
  font-size: var(--fs-xl);
}

.fill-card {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
}

.fill-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.fill-side {
  min-width: 0;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  align-content: start;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
}

.fill-rate-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.uuid-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.uuid-grid > div {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  overflow-wrap: anywhere;
}

.uuid-grid span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.sig-block {
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

details > summary {
  cursor: pointer;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--border);
  padding: var(--space-6) 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-6);
  align-items: start;
}

.footer-brand p {
  margin: var(--space-3) 0 0;
}

.footer-links {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.footer-links a {
  color: var(--text-muted);
  font-weight: 600;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-note p {
  margin: 0 0 var(--space-2);
}

.footer-note p:last-child {
  margin-bottom: 0;
  color: var(--text-dim);
}

/* ---------- Media queries ---------- */

@media (max-width: 1080px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-4);
  }

  .stat-card:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  .topbar-inner {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: var(--space-3) 0;
  }

  .topbar-spacer {
    display: none;
  }

  /* When the action cluster wraps to its own row, keep it right-aligned
     instead of dangling under the logo with a dead right half. */
  .settings-wrap {
    margin-left: auto;
  }

  .topnav {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topnav::-webkit-scrollbar {
    display: none;
  }

  .page-intro {
    grid-template-columns: 1fr;
  }

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

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

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}


/* ---------- Narrative tape (landing trade list) ---------- */

.action-chip {
  display: block;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card-fill-soft);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}

.action-chip.is-green {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-dim);
}

html[data-theme="dark"] .action-chip.is-green {
  color: var(--accent);
}

/* The profit pill. Block-level so every pill fills its lane uniformly. */
.data-pill {
  display: block;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card-fill-soft);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.7;
  text-align: center;
  white-space: nowrap;
}

/* Quiet bps line under the dollar profit pill in the tape's profit lane. */
.tape-profit-sub {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-align: center;
}

.data-pill.is-green {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-dim);
}

html[data-theme="dark"] .data-pill.is-green {
  color: var(--accent);
}

/* Lanes: every fact column shrinks to its content; Amount takes the rest. */
.tape td.tape-time,
.tape td.tape-tx,
.tape td.tape-action,
.tape td.tape-pair,
.tape td.tape-rate,
.tape td.tape-profit {
  width: 1%;
  white-space: nowrap;
}

.tape td.tape-time,
.tape td.tape-pair {
  color: var(--text-muted);
}

.tape td.is-empty {
  color: var(--text-dim);
  text-align: center;
}

.tape-arrow,
.tape-party {
  color: var(--text-muted);
}

.tape-note {
  color: var(--text-dim);
  font-size: var(--fs-xs);
}

/* Numeric tables: value columns right-align so magnitudes line up. */
.data-table.numeric th:not(:first-child),
.data-table.numeric td:not(:first-child) {
  text-align: right;
}

/* ---------- Metrics page ---------- */

.section-h {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--fs-xl);
}

/* A heading that introduces a full-bleed band below it: keep the top rhythm
   but none of .list-view's 72px bottom padding. */
.band-heading {
  padding: var(--space-2) 0 0;
}

.band-heading .section-h {
  margin-bottom: var(--space-4);
}

/* Wide screens only — below 1080px the generic stat-grid media rules
   (2-col, then 1-col) must win over this class. */
@media (min-width: 1081px) {
  .stat-grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-5);
  }

  /* Row starts must not carry the inter-card divider. */
  .stat-grid.cols-4 .stat-card:nth-child(4n + 1) {
    border-left: 0;
    padding-left: 0;
  }

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

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
  gap: var(--space-4);
}

.metrics-chart {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
}

.metrics-chart figcaption {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

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

.chart-grid {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.chart-zero {
  stroke: var(--text-dim);
  stroke-dasharray: 4 3;
}

.chart-tick {
  fill: var(--text-dim);
  font-family: var(--mono);
  font-size: 11.5px;
}

.chart-empty {
  fill: var(--text-dim);
  font-size: 12px;
}

.chart-line {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.8;
}

.chart-line.is-green {
  stroke: var(--accent-dim);
}

html[data-theme="dark"] .chart-line.is-green {
  stroke: var(--accent);
}

.chart-area {
  fill: var(--band-soft-bg);
  stroke: none;
}

.chart-area.is-green {
  fill: var(--accent-soft);
}

.chart-dot {
  fill: var(--text-muted);
}

.chart-dot.is-green {
  fill: var(--accent-dim);
}

html[data-theme="dark"] .chart-dot.is-green {
  fill: var(--accent);
}

.coverage-note {
  margin-top: var(--space-2);
  color: var(--text-dim);
  font-size: var(--fs-xs);
}

.stat-card strong.stat-pos {
  color: var(--accent);
}

/* ---------- Wallet page ---------- */

.wallet-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--fs-xl);
}

.ov-foot {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

#wallet-body > * {
  margin-top: var(--space-4);
}

#wallet-body > *:first-child {
  margin-top: 0;
}

/* Links inside stat cells keep the stat size and read as links. */
.setup-summary strong a.hash {
  font-size: inherit;
  color: var(--accent-dim);
}

html[data-theme="dark"] .setup-summary strong a.hash {
  color: var(--accent);
}

.setup-summary strong a.hash:hover {
  text-decoration: underline;
}

.empty-state.is-error {
  color: var(--danger);
}

/* ---------- Chart enlarge modal ---------- */

.metrics-chart {
  cursor: zoom-in;
}

.metrics-chart:hover,
.metrics-chart:focus-visible {
  box-shadow: var(--shadow-hover);
}

.chart-hint {
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1;
}

.chart-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(10, 18, 13, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.chart-modal {
  width: min(1080px, 100%);
  max-height: 92vh;
  overflow: auto;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-hover);
}

.chart-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.chart-modal-head h3 {
  margin: 0;
  font-size: var(--fs-lg);
}

.chart-modal-head .mini-action {
  white-space: nowrap;
  flex: 0 0 auto;
}

.chart-readout {
  margin: 0;
  min-height: 1.5em;
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-sm);
}

.chart-scrub {
  touch-action: none;
  cursor: crosshair;
}

.chart-cross {
  stroke: var(--text-dim);
  stroke-dasharray: 3 3;
}

.chart-focus {
  fill: var(--text-muted);
  stroke: var(--bg-card);
  stroke-width: 1.5;
}

.chart-focus.is-green {
  fill: var(--accent-dim);
}

html[data-theme="dark"] .chart-focus.is-green {
  fill: var(--accent);
}

@media (max-width: 760px) {
  .data-table:not(.tape) thead,
  .tape thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }

  .data-table:not(.tape),
  .data-table:not(.tape) tbody,
  .data-table:not(.tape) tr,
  .data-table:not(.tape) td {
    display: block;
  }

  .data-table:not(.tape) tbody tr {
    display: grid;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
  }

  .data-table:not(.tape) tbody tr:last-child {
    border-bottom: 0;
  }

  /* Indented block with an absolutely positioned label — NOT a grid: a grid
     would turn every child node (badges, copy buttons, links) into its own
     grid item and scatter them across rows/columns. Block flow keeps a
     cell's mixed inline content (value + badge, hash + copy + ↗) together,
     wrapping naturally inside the value column. */
  .data-table:not(.tape) td {
    position: relative;
    display: block;
    min-height: 22px;
    padding: 2px 0 2px 116px;
    border-bottom: 0;
    white-space: normal;
  }

  .data-table:not(.tape) td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 4px;
    width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .data-table.numeric:not(.tape) td {
    text-align: left;
  }

  /* Cells without a label (flow detail, empty states) use the full width. */
  .data-table:not(.tape) td[data-label=""],
  .data-table:not(.tape) td[data-label="Vault flow"] {
    padding-left: 0;
  }

  .data-table:not(.tape) td[data-label=""]::before,
  .data-table:not(.tape) td[data-label="Vault flow"]::before {
    content: none;
  }


  /* The tape keeps ONE structure everywhere: on small screens each row is a
     3-column grid — time/tx on top, action chip + amounts in the middle,
     the fact lanes (pair, rate, profit) along the bottom. */
  .tape tbody tr {
    /* Fixed lane columns (not max-content): every row is its own grid, so
       content-driven columns would drift a few px between adjacent rows and
       the tape would lose its vertical scan lines. */
    display: grid;
    grid-template-columns: 96px 84px 1fr;
    column-gap: var(--space-3);
    row-gap: 6px;
    align-items: baseline;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
  }

  .tape tbody tr:last-child {
    border-bottom: 0;
  }

  .tape td,
  .tape td.tape-time,
  .tape td.tape-tx,
  .tape td.tape-action,
  .tape td.tape-pair,
  .tape td.tape-rate,
  .tape td.tape-profit {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .tape td.tape-time {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-xs);
  }

  .tape td.tape-tx {
    grid-column: 2 / 4;
    grid-row: 1;
    justify-self: end;
    font-size: var(--fs-xs);
  }

  .tape td.tape-action {
    grid-column: 1;
    grid-row: 2;
  }

  .tape td.tape-amt {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .tape td.tape-pair {
    grid-column: 1;
    grid-row: 3;
    text-align: center;
    font-size: var(--fs-xs);
  }

  .tape td.tape-rate {
    grid-column: 2;
    grid-row: 3;
    font-size: var(--fs-xs);
  }

  .tape td.tape-profit {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
  }

  .tape td.tape-profit .data-pill {
    display: inline-block;
  }

  /* Lanes that don't apply to a row disappear instead of showing dashes. */
  .tape td.is-empty {
    display: none;
  }

  /* Funding rows: the amount line already says "52,839.04 MYRT …", so the
     lone token symbol in the pair lane just made an empty-looking row. */
  .tape tr.flow-row td.tape-pair {
    display: none;
  }

  /* Wrap-safe groups in the amount lane. */
  .tape-to,
  .tape-party {
    white-space: nowrap;
  }

  .fill-sides {
    grid-template-columns: 1fr;
  }

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

  }

/* Narrow phones: the profit pill doesn't fit beside pair + rate — give it
   its own full-width line, right-aligned so the wrap reads deliberate. */
@media (max-width: 430px) {
  .tape td.tape-profit {
    grid-column: 1 / 4;
    grid-row: 4;
    justify-self: end;
    margin-top: -2px;
  }
}

@media (max-width: 620px) {
  .topbar-inner,
  .shell {
    width: min(100% - 40px, 1180px);
  }

  /* The gear sits on the left of the wrapped mobile topbar; a popover
     anchored right:0 to it would hang off the LEFT viewport edge. Anchor it
     to the sticky topbar instead (the nearest positioned ancestor once the
     wrap goes static) so it spans the viewport with comfortable insets. */
  .settings-wrap {
    position: static;
  }

  .settings-pop {
    top: calc(100% + 8px);
    left: 14px;
    right: 14px;
    width: auto;
  }

  .topnav-link {
    min-height: 32px;
    padding: 0 11px;
    font-size: var(--fs-xs);
  }

  .footer-links a {
    padding: var(--space-2) 0;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding-left: 0;
    padding-right: 0;
  }

  .stat-card + .stat-card {
    border-left: 0;
    border-top: 1px solid var(--facts-divider);
    padding-top: var(--space-3);
  }

  .setup-summary,
  .tx-overview {
    grid-template-columns: 1fr;
  }

  .actions {
    display: grid;
  }

  .actions .button {
    width: 100%;
  }

  .decode-card,
  .fill-card {
    padding: var(--space-4);
  }

  .page-intro {
    padding-top: 44px;
  }
}

@media (max-width: 350px) {
  .topnav {
    padding: 2px;
  }

  .topnav-link {
    padding: 0 8px;
    letter-spacing: 0;
  }

  /* Narrower lanes so the tx-hash cluster fits row 1. */
  .tape tbody tr {
    grid-template-columns: 80px 78px 1fr;
  }

  .action-chip {
    padding: 2px 4px;
  }

  /* Ultra-narrow: drop the per-row Etherscan shortcut — the row's tx page
     (one tap away) carries the same link with room to breathe. */
  .tape td.tape-tx .ext-btn {
    display: none;
  }
}