/* ===========================================
   Mempool Block — Terminal v2
   Bloomberg × Mempool.space × DEX
   Vanilla CSS, no preprocessor, no framework
   =========================================== */

/* ===========================================
   1. Design Tokens
   =========================================== */
:root {
  /* Surfaces — 5 layers */
  --bg-primary:    #0a0e17;
  --bg-secondary:  #0f1420;
  --bg-card:       #141a28;
  --bg-elevated:   #1a2235;
  --bg-row-hover:  #1d2538;

  /* Hairlines — 4 levels */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: #1f2940;
  --border-strong:  #2d3a52;
  --border-focus:   #f59e0b;

  /* Text — 4 levels */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-disabled:  #475569;

  /* Category accents + soft variants */
  --accent-orange:  #f59e0b;
  --accent-orange-soft: rgba(245, 158, 11, 0.12);
  --accent-purple:  #a855f7;
  --accent-purple-soft: rgba(168, 85, 247, 0.12);
  --accent-cyan:    #06b6d4;
  --accent-cyan-soft:   rgba(6, 182, 212, 0.12);
  --accent-green:   #10b981;
  --accent-green-soft:  rgba(16, 185, 129, 0.12);
  --accent-pink:    #ec4899;
  --accent-pink-soft:    rgba(236, 72, 153, 0.12);
  --accent-blue:    #3b82f6;
  --accent-blue-soft:   rgba(59, 130, 246, 0.12);
  --accent-teal:    #14b8a6;
  --accent-teal-soft:   rgba(20, 184, 166, 0.12);
  --accent-amber:   #f5a524;
  --accent-amber-soft:  rgba(245, 165, 36, 0.12);

  /* Direction (DEX gain/loss) */
  --up:             #10b981;
  --up-soft:        rgba(16, 185, 129, 0.10);
  --down:           #ef4444;
  --down-soft:      rgba(239, 68, 68, 0.10);
  --flat:           #94a3b8;

  /* Status */
  --status-ok:      #10b981;
  --status-warn:    #f59e0b;
  --status-error:   #ef4444;
  --status-offline: #64748b;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-mono-xs: 11px;
  --t-mono-sm: 12px;
  --t-mono-md: 13px;
  --t-mono-lg: 15px;
  --t-mono-xl: clamp(16px, 1.7vw, 22px);
  --t-sans-xs: 11px;
  --t-sans-sm: 12px;
  --t-sans-md: 14px;
  --t-sans-lg: 16px;
  --t-sans-xl: 20px;
  --t-sans-hero: 28px;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  /* Spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* Radii */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;

  /* Elevation */
  --e1: 0 1px 0 0 var(--border-subtle);
  --e2: 0 0 0 1px var(--border-default), 0 4px 12px -2px rgba(0,0,0,0.40);
  --e3: 0 0 0 1px var(--border-strong), 0 12px 32px -4px rgba(0,0,0,0.60), 0 4px 8px -2px rgba(0,0,0,0.40);
  --e-focus: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-orange);

  /* Motion */
  --t-instant: 80ms;
  --t-fast:    160ms;
  --t-base:    240ms;
  --t-slow:    400ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --nav-h: 48px;
  --kpi-h: 96px;
  --stats-h: 36px;
  --bar-h: 28px;
  --tabs-h: 56px;
  --container-max: 1600px;
}

/* ===========================================
   2. Reset & Base
   =========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--t-sans-md);
  line-height: 1.5;
  font-weight: var(--w-regular);
  overflow: hidden;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

::selection { background: var(--accent-orange-soft); color: var(--text-primary); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-flex { display: flex; }
.u-hidden { display: none !important; }

/* ===========================================
   3. App Shell
   =========================================== */
.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: var(--nav-h) var(--kpi-h) var(--stats-h) minmax(0, 1fr) var(--bar-h);
  background: var(--bg-primary);
}

/* ===========================================
   4. Top Nav
   =========================================== */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  position: relative;
  z-index: 50;
  overflow: hidden;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-sans-lg);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  flex-shrink: 0;
}

.topbar__logo {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-pink) 100%);
  border-radius: var(--r-sm);
  color: var(--bg-primary);
  font-size: 14px;
  font-weight: var(--w-black);
  object-fit: cover;
}

.topbar__divider {
  width: 1px;
  height: 24px;
  background: var(--border-strong);
  margin: 0 var(--sp-2);
  flex-shrink: 0;
}

.block-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  font-weight: var(--w-semi);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  transition: background var(--t-instant) var(--ease-out);
}

.block-pill__label {
  color: var(--text-muted);
  font-weight: var(--w-medium);
  font-size: var(--t-mono-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.block-pill__value { color: var(--text-primary); }

.block-pill--flash {
  background: var(--accent-cyan-soft);
  border-color: var(--accent-cyan);
  animation: flash-cyan 800ms var(--ease-out);
}

.connection-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  font-weight: var(--w-semi);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.connection-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-offline);
  flex-shrink: 0;
}

.connection-pill--ok .connection-pill__dot {
  background: var(--status-ok);
  animation: pulse 2s var(--ease-in-out) infinite;
  box-shadow: 0 0 8px var(--status-ok);
}

.connection-pill--err .connection-pill__dot { background: var(--status-error); }

.topbar__spacer { flex: 1; }

.topbar__search {
  position: relative;
  width: 280px;
}

.topbar__search input {
  width: 100%;
  height: 32px;
  padding: 0 var(--sp-3) 0 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  font-weight: var(--w-medium);
  transition: border-color var(--t-fast) var(--ease-out);
}

.topbar__search input::placeholder { color: var(--text-muted); }

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

/* Rune autocomplete dropdown — anchored under the search input.
   Hidden via the [hidden] attribute; Search.showDropdown / hideDropdown
   toggle it imperatively when the input has text. */
.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-family: var(--font-mono);
}

.search-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t-fast) var(--ease-out);
}

.search-dropdown__item:last-child { border-bottom: 0; }

.search-dropdown__item:hover,
.search-dropdown__item.is-active {
  background: var(--bg-card-hover);
}

.search-dropdown__symbol {
  font-size: 14px;
  color: var(--accent-orange);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.search-dropdown__name {
  flex: 1;
  font-size: var(--t-mono-sm);
  font-weight: var(--w-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-dropdown__name-mark {
  color: var(--accent-orange);
  font-weight: var(--w-bold);
}

.search-dropdown__count {
  flex-shrink: 0;
  font-size: var(--t-mono-xs);
  color: var(--text-muted);
  padding: 2px 6px;
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
}

.search-dropdown__footer {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-mono-xs);
  color: var(--text-muted);
  text-align: center;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
}

.search-dropdown__empty {
  padding: var(--sp-3);
  font-size: var(--t-mono-sm);
  color: var(--text-muted);
  text-align: center;
}

.topbar__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.topbar__refresh {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  transition: all var(--t-fast) var(--ease-out);
}

.topbar__refresh:hover { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-primary); }
.topbar__refresh:focus-visible { box-shadow: var(--e-focus); }

.topbar__refresh.is-loading svg { animation: spin 1s linear infinite; }

.topbar__scan {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent-cyan);
  transform: translateX(-100%);
  pointer-events: none;
  opacity: 0;
}

.topbar__scan.is-running {
  opacity: 1;
  animation: scan-x 1200ms var(--ease-out);
}

/* ===========================================
   5. KPI Strip
   =========================================== */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border-bottom: 1px solid var(--border-default);
}

.kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-primary);
  overflow: hidden;
  min-width: 0;
}

.kpi-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-width: 0;
}

.kpi-card__label {
  font-family: var(--font-sans);
  font-size: var(--t-sans-xs);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  font-weight: var(--w-semi);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  white-space: nowrap;
}

.kpi-card__delta--up   { color: var(--up);   background: var(--up-soft); }
.kpi-card__delta--down { color: var(--down); background: var(--down-soft); }
.kpi-card__delta--flat { color: var(--text-secondary); background: rgba(148, 163, 184, 0.10); }

.kpi-card__value {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xl);
  font-weight: var(--w-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  transition: color var(--t-instant) var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-card__value.is-flash-up   { animation: flash-up 600ms var(--ease-out); }
.kpi-card__value.is-flash-down { animation: flash-down 600ms var(--ease-out); }
.kpi-card__value.is-tick       { animation: tick-up 200ms var(--ease-out); }

.kpi-card__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* "24h: 1234" — count of txs with mempool-entry age within the last 24h.
   Sits on the right side of the sub row. The strong element takes the
   number color from the card variant. */
.kpi-card__sub-recent {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.kpi-card__sub-recent strong {
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.kpi-card--orange .kpi-card__sub-recent strong { color: var(--accent-orange); }
.kpi-card--purple .kpi-card__sub-recent strong { color: var(--accent-purple); }
.kpi-card--cyan   .kpi-card__sub-recent strong { color: var(--accent-cyan); }
.kpi-card--blue   .kpi-card__sub-recent strong { color: var(--accent-blue); }

.kpi-card__sparkline {
  flex: 1;
  width: 100%;
  height: 24px;
  display: block;
}

.kpi-card__sparkline path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kpi-card__sparkline circle { stroke: none; }

.kpi-card--orange .kpi-card__sparkline path { stroke: var(--accent-orange); }
.kpi-card--orange .kpi-card__sparkline circle { fill: var(--accent-orange); }
.kpi-card--orange .kpi-card__value { color: var(--accent-orange); }

.kpi-card--purple .kpi-card__sparkline path { stroke: var(--accent-purple); }
.kpi-card--purple .kpi-card__sparkline circle { fill: var(--accent-purple); }
.kpi-card--purple .kpi-card__value { color: var(--accent-purple); }

.kpi-card--cyan .kpi-card__sparkline path { stroke: var(--accent-cyan); }
.kpi-card--cyan .kpi-card__sparkline circle { fill: var(--accent-cyan); }
.kpi-card--cyan .kpi-card__value { color: var(--accent-cyan); }

.kpi-card--blue .kpi-card__sparkline path { stroke: var(--accent-blue); }
.kpi-card--blue .kpi-card__sparkline circle { fill: var(--accent-blue); }
.kpi-card--blue .kpi-card__value { color: var(--accent-blue); }

.kpi-card--stale { opacity: 0.55; }
.kpi-card--stale::after {
  content: '·STALE';
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--w-semi);
  color: var(--status-warn);
  letter-spacing: 0.05em;
}

.kpi-card--skeleton .kpi-card__value,
.kpi-card--skeleton .kpi-card__delta,
.kpi-card--skeleton .kpi-card__sparkline {
  background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--bg-row-hover) 50%, var(--bg-elevated) 100%);
  background-size: 200% 100%;
  color: transparent;
  border-radius: var(--r-sm);
  animation: skeleton 1.4s linear infinite;
}
.kpi-card--skeleton .kpi-card__value { height: 1.2em; width: 60%; }
.kpi-card--skeleton .kpi-card__delta { height: 12px; width: 40px; }
.kpi-card--skeleton .kpi-card__sparkline { opacity: 0.4; }

/* ===========================================
   5b. Stats Strip (secondary counters)
   =========================================== */
.stats-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--sp-4);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-default);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.stats-strip::-webkit-scrollbar { height: 4px; }

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--t-instant) var(--ease-out);
  cursor: pointer;
  font-family: var(--font-mono);
}

.stat-chip:hover { background: var(--bg-elevated); border-color: var(--border-strong); }
.stat-chip:focus-visible { box-shadow: var(--e-focus); }

.stat-chip--info { cursor: default; }
.stat-chip--info:hover { background: var(--bg-card); border-color: var(--border-default); }

.stat-chip--active {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 1px var(--bg-primary) inset;
}
.stat-chip.stat-chip--active .stat-chip__label {
  color: rgba(10, 14, 23, 0.65);
}
.stat-chip.stat-chip--active .stat-chip__value {
  color: var(--bg-primary);
}

.stat-chip__label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.stat-chip__value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.stat-chip--mint .stat-chip__value { color: var(--accent-green); }
.stat-chip--deploy .stat-chip__value { color: var(--accent-pink); }
.stat-chip--transfer .stat-chip__value { color: var(--accent-blue); }
.stat-chip--rune .stat-chip__value { color: var(--accent-orange); }
.stat-chip--brc20 .stat-chip__value { color: var(--accent-blue); }
.stat-chip--tap   .stat-chip__value { color: var(--accent-pink); }
.stat-chip--alkanes .stat-chip__value { color: var(--accent-teal); }
.stat-chip--ins .stat-chip__value { color: var(--accent-purple); }
.stat-chip--image .stat-chip__value { color: var(--accent-cyan); }
.stat-chip--other .stat-chip__value { color: var(--text-muted); }
/* "Text" chip — ord-style text inscriptions (text/* and json/* content
   types) without a recognized protocol envelope. Picked purple to read
   as "informational" — between the bright image cyan and the muted
   Other grey — and to slot cleanly between Image and Other in the
   visual hierarchy. Active state uses the full --accent-purple
   background (not the *-soft variant) so the dark number renders with
   the same high contrast as every other active chip — purple text on
   12% purple-soft was visually disappearing. */
.stat-chip--text .stat-chip__value { color: var(--accent-purple); }
.stat-chip--text.stat-chip--active {
  border-color: var(--accent-purple);
  background: var(--accent-purple);
  box-shadow: 0 0 0 1px var(--bg-primary) inset;
}
.stat-chip--text.stat-chip--active .stat-chip__label { color: rgba(10, 14, 23, 0.65); }
.stat-chip--text.stat-chip--active .stat-chip__value { color: var(--bg-primary); }
/* "Unparsed" chip — visually distinct from "Other" (plain BTC transfers)
   so the user can tell at a glance that this is the *gap* between the
   chip sum and the relevant mempool total. Amber reads as "needs
   attention" without screaming — same family as warning toast tones
   but clearly separated from the orange used by Rune Mint/Etch/Trans. */
.stat-chip--unparsed .stat-chip__value { color: var(--accent-amber); }
.stat-chip--unparsed.stat-chip--active {
  border-color: var(--accent-amber);
  background: var(--accent-amber-soft);
}

@media (max-width: 767px) {
  .stats-strip { padding: 0 var(--sp-3); gap: 4px; }
  .stat-chip { height: 20px; padding: 0 6px; }
  .stat-chip__label { font-size: 8px; }
  .stat-chip__value { font-size: 10px; }
}

/* ===========================================
   6. Workspace
   =========================================== */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  overflow: hidden;
  min-height: 0;
}

.workspace__main {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  overflow: hidden;
  min-height: 0;
}

.workspace__rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-primary);
  overflow-y: auto;
  min-height: 0;
}

/* ===========================================
   7. Right Rail Section Card
   =========================================== */
.section-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 0;
}

.section-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.section-card__label {
  font-family: var(--font-sans);
  font-size: var(--t-sans-xs);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.section-card__live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--up);
}

.section-card__live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
  animation: pulse 2s var(--ease-in-out) infinite;
}

/* Mute the 30-min window hint so it reads as supporting context for the
   Live pulse, not as a second status indicator. Smaller and dimmer than
   the Live badge; the pulse animation stays on Live only. */
.section-card__live-window {
  font-family: var(--font-sans);
  font-size: var(--t-sans-xs);
  font-weight: var(--w-regular);
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.section-card__tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: 2px;
}

.section-card__tab {
  padding: 2px var(--sp-2);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--w-semi);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--r-xs);
  transition: all var(--t-instant) var(--ease-out);
}

.section-card__tab.is-active {
  background: var(--bg-card);
  color: var(--text-primary);
}

.section-card__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ===========================================
   8. Mint Monitor
   =========================================== */
.mint-monitor {
  display: flex;
  flex-direction: column;
}
/* The `hidden` HTML attribute relies on the UA rule `[hidden] { display:
   none }` which has lower specificity than `.mint-monitor` — so any
   mint-monitor element with the attribute would still render. This
   forces the attribute to win so the alkanes monitor can be toggled
   in/out of the merged BRC-20 / ALKANES card without leftover rows. */
.mint-monitor[hidden] { display: none; }
/* The .mint-row__action button is absolutely positioned at the row's
   right edge — give count/delta enough right-padding so their digits
   don't run under it. Mirrors the .inscription-feed--monitor rule
   that does the same on the BRC-20 rail. */
.mint-monitor .mint-row__count,
.mint-monitor .mint-row__delta {
  padding-right: 48px;
}

.mint-row {
  display: grid;
  grid-template-columns: 28px 1fr 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--t-instant) var(--ease-out);
  position: relative;
  border-left: 2px solid transparent;
}

.mint-row:hover { background: var(--bg-row-hover); border-left-color: var(--accent-orange); }
.mint-row.is-active { background: var(--accent-orange-soft); border-left-color: var(--accent-orange); }
.mint-row.is-exiting { animation: row-exit 240ms var(--ease-out) forwards; }
.mint-row.is-flash-up { background: var(--up-soft); }
.mint-row.is-flash-down { background: var(--down-soft); }

.mint-row__rank {
  font-family: var(--font-sans);
  font-size: var(--t-sans-xs);
  font-weight: var(--w-semi);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mint-row__name {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  font-weight: var(--w-semi);
  color: var(--accent-orange);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mint-row__count {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  font-weight: var(--w-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  transition: transform var(--t-fast) var(--ease-out);
  /* Count cell now holds three children (number, heat badge, hover-only
     Mint button). Force them onto a single line — without this, a
     narrow viewport or long rune name causes the badge and button to
     drop to a second row, which makes the row look broken. `flex` also
     makes the count number shrink-to-fit so the badge always has room. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
  min-width: 0;
}
.mint-row__count-num { flex: 0 1 auto; min-width: 0; }

.mint-row__delta {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mint-row__delta--up   { color: var(--up); }
.mint-row__delta--down { color: var(--down); }
.mint-row__delta--flat { color: var(--text-muted); }

.mint-empty {
  padding: var(--sp-6);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--t-sans-sm);
  color: var(--text-muted);
}

/* ===========================================
   9. Inscription Feed
   =========================================== */
.inscription-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-3);
}
/* Same `[hidden]` specificity fix as `.mint-monitor[hidden]` — without
   this the class-level `display: grid` wins over the UA `[hidden]`
   rule, so toggling `inscriptionFeed.hidden = true` (when the Alkanes
   tab is active) leaves the brc20 monitor rows visible below the
   alkanes list. */
.inscription-feed[hidden] { display: none; }

.inscription-feed--rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
}

.feed-tile {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  cursor: pointer;
  overflow: hidden;
  transition: all var(--t-fast) var(--ease-out);
}

.inscription-feed--rows .feed-tile {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-3);
  height: 28px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: var(--bg-card);
}

.inscription-feed--rows .feed-tile:first-child {
  border-top: 1px solid var(--border-default);
}

.feed-tile:hover { border-color: var(--accent-purple); transform: translateY(-1px); }
.feed-tile:focus-visible { box-shadow: var(--e-focus); }

.feed-tile__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inscription-feed--rows .feed-tile__placeholder {
  display: contents;
}

.feed-tile__placeholder--img {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-elev-1, #15151c);
}
.feed-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feed-tile__body--fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: var(--bg-elev-1, #15151c);
}

.feed-tile__ext {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-bold);
  color: var(--accent-purple);
}

.feed-tile__body {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-semi);
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.inscription-feed--rows .feed-tile__body {
  text-align: left;
  display: block;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inscription-feed--rows .feed-tile__type {
  position: static;
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
  padding: 1px 6px;
  font-size: 9px;
  text-align: center;
  justify-self: start;
}

.inscription-feed--rows .feed-tile__amt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-bold);
  color: var(--accent-blue);
  font-variant-numeric: tabular-nums;
  justify-self: end;
  min-width: 60px;
  text-align: right;
}

.inscription-feed--rows .feed-tile__txid {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  justify-self: end;
  min-width: 70px;
  text-align: right;
}

.inscription-feed--rows .feed-tile:hover { background: var(--bg-row-hover); transform: none; }
.inscription-feed--rows .feed-tile--brc20:hover { border-color: var(--accent-blue); }

/* Live BRC-20 mint monitor: reuses .mint-row visuals in BRC-20 blue */
.inscription-feed--monitor .mint-row {
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--t-instant) var(--ease-out);
}
.inscription-feed--monitor .mint-row:hover { background: var(--bg-row-hover); }
.inscription-feed--monitor .mint-row__name { color: var(--accent-blue); }
.inscription-feed--monitor .mint-row__count {
  color: var(--accent-blue);
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.inscription-feed--monitor .feed-tile__txid {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
}

/* BRC-20 monitor row accent was previously a sparkline blue; the sparkline
   is gone now but the row's BRC-20 tile body keeps the blue accent. */
.feed-tile--brc20 .feed-tile__body { color: var(--accent-blue); }

.feed-tile__type {
  position: absolute;
  top: 4px;
  left: 4px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: rgba(0,0,0,0.4);
  padding: 1px 4px;
  border-radius: var(--r-xs);
}

.feed-empty {
  grid-column: 1 / -1;
  padding: var(--sp-5);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--t-sans-xs);
  color: var(--text-muted);
}

/* ===========================================
   11. Filter Bar
   =========================================== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.filter-bar__pills {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.filter-bar__divider {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
  margin: 0 var(--sp-2);
  flex-shrink: 0;
}

.filter-bar__spacer { flex: 1; min-width: var(--sp-2); }

.filter-bar__search {
  position: relative;
  width: 220px;
  flex-shrink: 0;
}

.filter-bar__search input {
  width: 100%;
  height: 28px;
  padding: 0 var(--sp-3) 0 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  transition: border-color var(--t-fast) var(--ease-out);
}

.filter-bar__search input::placeholder { color: var(--text-muted); }
.filter-bar__search input:focus { border-color: var(--accent-orange); }

.filter-bar__search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

.more-dropdown {
  position: relative;
}

.more-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--e3);
  padding: var(--sp-1);
  z-index: 30;
  display: none;
}

.more-dropdown.is-open .more-dropdown__menu { display: block; }

.more-dropdown__item {
  display: block;
  width: 100%;
  padding: 6px var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--t-sans-sm);
  font-weight: var(--w-medium);
  color: var(--text-secondary);
  text-align: left;
  border-radius: var(--r-sm);
  transition: all var(--t-instant) var(--ease-out);
}

.more-dropdown__item:hover { background: var(--bg-card); color: var(--text-primary); }
.more-dropdown__item.is-active { color: var(--accent-orange); background: var(--accent-orange-soft); }

/* ===========================================
   12. Pills (badges)
   =========================================== */
.pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--sp-2);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  background: var(--bg-elevated);
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--t-instant) var(--ease-out);
}

.pill--filter {
  height: 28px;
  padding: 0 var(--sp-3);
  font-size: var(--t-sans-xs);
  font-weight: var(--w-semi);
  background: var(--bg-card);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

.pill--filter:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-strong); }
.pill--filter:focus-visible { box-shadow: var(--e-focus); }

.pill--filter.is-active {
  background: var(--accent-orange-soft);
  color: var(--text-primary);
  border-color: var(--accent-orange);
}

.pill--mint      { color: var(--accent-green);  background: var(--accent-green-soft); }
.pill--etch      { color: var(--accent-pink);   background: var(--accent-pink-soft); }
.pill--transfer  { color: var(--accent-blue);   background: var(--accent-blue-soft); }
.pill--brc20     { color: var(--accent-blue);   background: var(--accent-blue-soft); }
.pill--tap       { color: var(--accent-pink);   background: var(--accent-pink-soft); }
.pill--alkanes   { color: var(--accent-teal);   background: var(--accent-teal-soft); }

/* Pills rendered as <button> (e.g. row-level TAP) need an explicit cursor +
   hover state, since the default <button> reset strips them. */
.pill--clickable { cursor: pointer; border: 0; font: inherit; }
.pill--clickable:hover { filter: brightness(1.15); }
.pill--clickable:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; }
.pill--combined  { color: var(--accent-cyan);   background: var(--accent-cyan-soft); }
.pill--inscription { color: var(--accent-purple); background: var(--accent-purple-soft); }
.pill--rune      { color: var(--accent-orange); background: var(--accent-orange-soft); }
.pill--unknown   { color: var(--text-muted);    background: var(--bg-elevated); }
/* "Other" pill: plain BTC transfers without any tracked protocol. Intentionally
   muted so the chip recedes behind Runes/Inscriptions when the table is full. */
.pill--other      { color: var(--text-muted);    background: var(--bg-elevated); }

.pill-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* ===========================================
   13. Breadcrumb
   =========================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 36px;
  flex-shrink: 0;
}

.breadcrumb__label {
  font-family: var(--font-sans);
  font-size: var(--t-sans-xs);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.breadcrumb__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 24px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  background: var(--bg-elevated);
  border: 1px solid var(--accent-orange);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  font-weight: var(--w-semi);
  color: var(--text-primary);
}

.breadcrumb__chip-prefix {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  font-weight: var(--w-semi);
}

.breadcrumb__chip-value {
  color: var(--accent-orange);
  font-weight: var(--w-bold);
}

.breadcrumb__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--r-xs);
  color: var(--text-muted);
  transition: all var(--t-instant) var(--ease-out);
}

.breadcrumb__close:hover { color: var(--down); background: var(--down-soft); }

.breadcrumb__spacer { flex: 1; }

.breadcrumb__info {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  color: var(--text-muted);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
}

/* ===========================================
   14. Transaction Table
   =========================================== */
.table-container {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
  background: var(--bg-primary);
}

.tx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  font-variant-numeric: tabular-nums;
}
.tx-table col.c-type    { width: 92px; }
.tx-table col.c-txid    { width: 132px; }
.tx-table col.c-asset   { width: auto; }
.tx-table col.c-num     { width: 88px; }
.tx-table col.c-num-sm  { width: 72px; }
.tx-table tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-strong);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
  user-select: none;
}

.tx-table thead th.is-num { text-align: right; }

/* Sortable column headers (Rate / Age).
   Click cycles: none → asc → desc → none. Visual indicator is a stacked
   up/down arrow with the active direction filled in. */
.tx-table thead th.is-sortable {
  cursor: pointer;
  transition: color var(--t-instant) var(--ease-out);
}
.tx-table thead th.is-sortable:hover { color: var(--text-secondary); }
.tx-table thead th.is-sortable:focus-visible {
  outline: 1px solid var(--accent-orange);
  outline-offset: -1px;
}
.tx-table thead th.is-sortable .th-label {
  display: inline-block;
  vertical-align: middle;
}
.tx-table thead th.is-sortable .sort-indicator {
  display: inline-block;
  margin-left: 4px;
  width: 8px;
  height: 12px;
  vertical-align: middle;
  position: relative;
  opacity: 0.4;
  transition: opacity var(--t-instant) var(--ease-out);
}
.tx-table thead th.is-sortable .sort-indicator::before,
.tx-table thead th.is-sortable .sort-indicator::after {
  content: '';
  position: absolute;
  left: 1px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.tx-table thead th.is-sortable .sort-indicator::before {
  top: 0;
  border-bottom: 4px solid currentColor;
}
.tx-table thead th.is-sortable .sort-indicator::after {
  bottom: 0;
  border-top: 4px solid currentColor;
}
.tx-table thead th.is-sortable[aria-sort="asc"],
.tx-table thead th.is-sortable[aria-sort="desc"] {
  color: var(--accent-orange);
}
.tx-table thead th.is-sortable[aria-sort="asc"],
.tx-table thead th.is-sortable[aria-sort="desc"] {
  opacity: 1;
}
.tx-table thead th.is-sortable[aria-sort="asc"] .sort-indicator::before { opacity: 1; }
.tx-table thead th.is-sortable[aria-sort="asc"] .sort-indicator::after  { opacity: 0.25; }
.tx-table thead th.is-sortable[aria-sort="desc"] .sort-indicator::before { opacity: 0.25; }
.tx-table thead th.is-sortable[aria-sort="desc"] .sort-indicator::after  { opacity: 1; }

.tx-table tbody tr {
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t-instant) var(--ease-out);
}

.tx-table tbody td:first-child {
  position: relative;
}

.tx-table tbody td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background var(--t-instant) var(--ease-out);
}

.tx-table tbody tr:hover { background: var(--bg-row-hover); }

.tx-table tbody tr.is-mint td:first-child::before     { background: var(--accent-green); }
.tx-table tbody tr.is-etch td:first-child::before     { background: var(--accent-pink); }
.tx-table tbody tr.is-transfer td:first-child::before { background: var(--accent-blue); }
.tx-table tbody tr.is-inscription td:first-child::before { background: var(--accent-purple); }
.tx-table tbody tr.is-combined td:first-child::before { background: var(--accent-cyan); }
.tx-table tbody tr.is-rune td:first-child::before     { background: var(--accent-orange); }
/* "Other" rows: muted left-border so they don't visually pop next to the
   protocol-bearing rows — they're informational, not the user's focus. */
.tx-table tbody tr.is-other td:first-child::before    { background: var(--text-muted); }

.tx-table tbody tr.is-selected { background: var(--bg-row-hover); }
.tx-table tbody tr.is-selected td:first-child::before { background: var(--accent-orange); }

.tx-table tbody tr.is-fresh { animation: ticker-slide 240ms var(--ease-out), row-flash 1200ms var(--ease-out); }
.tx-table tbody tr.is-exiting { animation: row-exit 600ms var(--ease-out) forwards; }

.tx-table tbody td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  white-space: nowrap;
  color: var(--text-primary);
}

.tx-table tbody td.is-num { text-align: right; }
.tx-table tbody td.is-muted { color: var(--text-muted); }
.tx-table tbody td.is-asset { font-weight: var(--w-semi); }

.tx-table .cell-txid {
  color: var(--accent-blue);
  font-weight: var(--w-medium);
  cursor: pointer;
  transition: color var(--t-instant) var(--ease-out), background var(--t-instant) var(--ease-out);
}
.tx-table .cell-txid:hover {
  color: var(--accent-orange);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.tx-table .cell-txid.is-copied {
  color: var(--up);
  background: var(--up-soft);
}

.tx-table .cell-amount { font-weight: var(--w-semi); }
.tx-table .cell-amount--mint { color: var(--up); }
.tx-table .cell-amount--etch { color: var(--accent-pink); }
.tx-table .cell-amount--transfer { color: var(--text-primary); }
.tx-table .cell-amount--brc20 { color: var(--accent-blue); font-weight: var(--w-semi); }
.tx-table .cell-amount--tap   { color: var(--accent-pink); font-weight: var(--w-semi); }
.tx-table .cell-amount--alkanes { color: var(--accent-teal); font-weight: var(--w-semi); }
.tx-table .cell-amount--unknown { color: var(--text-muted); }

.tx-table .cell-rate { font-weight: var(--w-semi); }
.tx-table .cell-rate--low { color: var(--down); }
.tx-table .cell-rate--mid { color: var(--accent-blue); }
.tx-table .cell-rate--high { color: var(--up); }

.tx-table .cell-asset { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.tx-table .cell-asset__symbol {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--w-bold);
  flex-shrink: 0;
  color: var(--accent-orange);
}
.tx-table .cell-asset__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tx-table .cell-asset__thumb {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: var(--w-bold);
  color: var(--accent-purple);
  flex-shrink: 0;
}
.tx-table .cell-asset__img {
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-default);
  background: var(--bg-elevated);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.tx-table .cell-asset__thumb--brc20 { color: var(--accent-blue); border-color: var(--accent-blue); }
.tx-table .cell-asset__thumb--tap   { color: var(--accent-pink); border-color: var(--accent-pink); }
.tx-table .cell-asset__thumb--alkanes { color: var(--accent-teal); border-color: var(--accent-teal); }
/* "Other" rows: BTC thumb muted — these aren't the focus of the table. */
.tx-table .cell-asset__thumb--other { color: var(--text-muted); border-color: var(--border-default); }

.tx-table .cell-content {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
}

.cell-delta { font-size: var(--t-mono-xs); font-weight: var(--w-semi); }
.cell-delta--up { color: var(--up); }
.cell-delta--down { color: var(--down); }

.cell-age { color: var(--text-muted); font-size: var(--t-mono-xs); }

/* Skeleton rows */
.tx-table tbody tr.is-skeleton td {
  padding: 14px var(--sp-3);
  color: transparent;
  background: linear-gradient(90deg, var(--bg-card) 0%, var(--bg-row-hover) 50%, var(--bg-card) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.4s linear infinite;
  border-bottom: 1px solid var(--border-subtle);
}

/* Table empty / error */
.table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-9) var(--sp-5);
  color: var(--text-muted);
  text-align: center;
  gap: var(--sp-3);
}

.table-empty__icon {
  width: 64px;
  height: 64px;
  color: var(--text-disabled);
}

.table-empty__title {
  font-family: var(--font-sans);
  font-size: var(--t-sans-md);
  font-weight: var(--w-semi);
  color: var(--text-secondary);
}

.table-empty__hint {
  font-family: var(--font-sans);
  font-size: var(--t-sans-sm);
  color: var(--text-muted);
}

.table-empty__btn {
  margin-top: var(--sp-2);
  padding: 6px var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--t-sans-sm);
  font-weight: var(--w-semi);
  color: var(--text-primary);
  transition: all var(--t-fast) var(--ease-out);
}
.table-empty__btn:hover { background: var(--bg-elevated); border-color: var(--accent-orange); }

.table-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--down-soft);
  border-bottom: 1px solid var(--status-error);
  color: var(--down);
  font-family: var(--font-sans);
  font-size: var(--t-sans-sm);
  font-weight: var(--w-medium);
}

/* Load more */
.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
  font-size: var(--t-sans-sm);
  font-weight: var(--w-semi);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  width: 100%;
}

.load-more:hover { background: var(--bg-elevated); color: var(--text-primary); }
.load-more:disabled { color: var(--text-muted); }
.load-more.is-loading svg { animation: spin 1s linear infinite; }

.load-more__spinner { width: 14px; height: 14px; }

/* ===========================================
   15. Tx Card (mobile)
   =========================================== */
.tx-card-list {
  display: flex;
  flex-direction: column;
  padding: var(--sp-2);
  gap: var(--sp-2);
}

.tx-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
  border-left-width: 2px;
  border-left-style: solid;
}

.tx-card:hover { background: var(--bg-elevated); }
.tx-card.is-fresh { animation: ticker-slide 240ms var(--ease-out), row-flash 1200ms var(--ease-out); }
.tx-card.is-exiting { animation: row-exit 600ms var(--ease-out) forwards; }
.tx-card.is-mint     { border-left-color: var(--accent-green); }
.tx-card.is-etch     { border-left-color: var(--accent-pink); }
.tx-card.is-transfer { border-left-color: var(--accent-blue); }
.tx-card.is-inscription { border-left-color: var(--accent-purple); }
.tx-card.is-combined { border-left-color: var(--accent-cyan); }
.tx-card.is-rune     { border-left-color: var(--accent-orange); }
.tx-card.is-selected { border-color: var(--accent-orange); }

.tx-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.tx-card__pills { display: inline-flex; gap: 4px; flex-wrap: wrap; }

.tx-card__txid {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  color: var(--text-muted);
}

.tx-card__asset {
  font-family: var(--font-mono);
  font-size: var(--t-sans-md);
  font-weight: var(--w-semi);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}

.tx-card__amount {
  font-family: var(--font-mono);
  font-size: var(--t-sans-md);
  font-weight: var(--w-bold);
  margin-bottom: var(--sp-2);
}

.tx-card__amount--mint { color: var(--up); }
.tx-card__amount--etch { color: var(--accent-pink); }
.tx-card__amount--transfer { color: var(--text-primary); }

.tx-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  color: var(--text-muted);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border-subtle);
}

.tx-card__rate--low { color: var(--down); }
.tx-card__rate--mid { color: var(--accent-blue); }
.tx-card__rate--high { color: var(--up); }

/* ===========================================
   15.5. Rune Detail Modal (centered, distinct from right drawer)
   =========================================== */
.rune-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.rune-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.rune-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--e3);
  z-index: 111;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translate(-50%, -48%) scale(0.96);
  opacity: 0;
  /* Default: don't capture pointer events. The modal sits at z-index:111
     in the centre of the viewport; without this it would swallow clicks
     on whatever is underneath while fading out (or while hidden=false
     but class not yet re-applied). */
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.rune-modal.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.rune-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-default);
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  flex-shrink: 0;
}

.rune-modal__hero {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.rune-modal__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--accent-orange-soft);
  color: var(--accent-orange);
  font-family: var(--font-mono);
  font-size: 22px;
  flex-shrink: 0;
}

/* Logo container: holds either the symbol span (default) or the parent
   inscription image. The --has-image modifier kicks in once <img> onload
   fires, switching the background off and rounding the image. */
.rune-modal__logo {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--accent-orange-soft);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--border-default);
}
.rune-modal__logo--has-image {
  background: transparent;
  box-shadow: none;
}
/* When the parent inscription image is loaded, hide the symbol span
   underneath it so the two don't show simultaneously. The symbol is kept
   in the DOM so the CSS-only toggle (add/remove .--has-image) controls
   visibility — the JS doesn't need to mutate DOM on load/error. */
.rune-modal__logo--has-image .rune-modal__symbol { display: none; }
.rune-modal__logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--bg-elevated);
  /* Hidden until onload fires; the .--has-image class on the parent
     reveals the image and the JS onerror handler swaps back to the
     symbol span if the content isn't a renderable image. */
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}
.rune-modal__logo--has-image .rune-modal__logo-img { opacity: 1; }

.rune-modal__hero-text { min-width: 0; }

.rune-modal__title {
  font-family: var(--font-sans);
  font-size: var(--t-sans-lg);
  font-weight: var(--w-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}

.rune-modal__sub {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.rune-modal__sub-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rune-modal__close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  flex-shrink: 0;
  /* Breathing room from the optional Mempool strip now living in head */
  margin-left: var(--sp-3);
}
.rune-modal__close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.rune-modal__close:focus-visible { box-shadow: var(--e-focus); outline: none; }

.rune-modal__body {
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
  flex: 1;
  /* Anchor for the .inscribe-detail-overlay (nested order-detail
     overlay) so its `position:absolute; inset:0` covers only the
     modal body and not the head/close-button row. */
  position: relative;
}

/* Nested overlay shown when the user clicks a row in the
   address-search order list. Fades in over the list (which stays in
   the DOM underneath); closing the overlay reveals the list again
   without any re-fetch. */
.inscribe-detail-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-card);
  z-index: 10;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* Delay the visibility flip so the fade-out can finish before the
     element is removed from the tab order. */
  transition: opacity 0.18s var(--ease-out), visibility 0s linear 0.18s;
}
.inscribe-detail-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  /* On open, flip visibility immediately so the fade-in is visible. */
  transition: opacity 0.18s var(--ease-out), visibility 0s linear 0s;
}
.inscribe-detail-overlay__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-default);
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  flex: 0 0 auto;
}
.inscribe-detail-overlay__back,
.inscribe-detail-overlay__close {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  padding: 6px var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-sans);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.inscribe-detail-overlay__back:hover,
.inscribe-detail-overlay__close:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.inscribe-detail-overlay__title {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inscribe-detail-overlay__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
}

/* Hide the address-search order list and its pager while the
   nested detail overlay is open. The overlay is position:absolute
   inset:0 with an opaque bg so the list should already be covered,
   but the prev/next pager in particular has been spotted peeking
   through on some viewports — when it does, users reasonably wonder
   if those buttons still work. They don't (pointer events go to the
   overlay), so hide them explicitly. `visibility` instead of `display`
   so the layout under the overlay doesn't reflow when the detail
   opens or closes (which would jolt the pager out from under the
   user mid-close). Toggled from JS in showOverlay/closeDetailOverlay. */
.inscribe-modal--detail-open .inscribe-order-list,
.inscribe-modal--detail-open .inscribe-order-pager {
  visibility: hidden;
}

/* Force the modal to its full viewport height while the detail
   overlay is open. Without this the modal sizes to whatever the
   address-search list was (often a single short row) and the overlay
   — which is position:absolute inset:0 inside the modal body —
   inherits that small height. The overlay body has overflow-y:auto
   so it scrolls, but only a sliver is visible at a time and the
   user reads it as "detail didn't fully expand". Setting both height
   and max-height pins the modal to a useful size whenever the
   detail is showing. */
.inscribe-modal--detail-open {
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
}

.rune-modal__section-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--sp-4) 0 var(--sp-2);
}
.rune-modal__section-title:first-child { margin-top: 0; }

.rune-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-default);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  overflow: hidden;
}

.rune-modal__cell {
  background: var(--bg-secondary);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rune-modal__cell--full { grid-column: 1 / -1; }

/* Mempool strip — used by both the Rune and BRC-20 detail modals.
   Surfaces the in-mempool mint count, a heat-level badge that mirrors
   the right-rail monitor's emoji + colour scheme, and a Mint button
   that opens the inscribe flow. The strip is its own row (not part of
   the .rune-modal__grid) so the count can be the visually dominant
   number without forcing an awkward grid layout. */
.rune-modal__mempool {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* Lives inside .rune-modal__head, sibling of .rune-modal__hero and
     .rune-modal__close. Head uses space-between + center alignment, so
     this strip is vertically centered with the logo / title / sub row
     and pushed up against the close button by margin-left: auto. */
  flex: 0 1 auto;
  min-width: 0;
}
.rune-modal__mempool-count {
  font-family: var(--font-mono);
  font-size: var(--t-mono-lg, 14px);
  font-weight: var(--w-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  min-width: 0;
}
.rune-modal__mempool .mint-row__heat {
  flex: 0 0 auto;
  /* The rail uses 13px — bump to 16px here so the heat badge is the
     visually loudest element of the strip without competing with the
     modal section titles. */
  font-size: 16px;
}
.rune-modal__mempool-mint {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 4px 14px;
  font-family: var(--font-sans);
  font-size: var(--t-sans-xs);
  font-weight: var(--w-semi);
  color: var(--bg-app);
  background: var(--accent-blue);
  border: 1px solid var(--accent-blue);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-instant) var(--ease-out), opacity var(--t-instant) var(--ease-out);
}
.rune-modal__mempool-mint:hover:not(:disabled) {
  background: var(--accent-blue-hover, #6ba2ff);
  border-color: var(--accent-blue-hover, #6ba2ff);
}
.rune-modal__mempool-mint:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-default);
}

.rune-modal__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rune-modal__value {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  color: var(--text-primary);
  word-break: break-word;
}

.rune-modal__value--accent { color: var(--accent-orange); }
.rune-modal__value--success { color: var(--up); }
.rune-modal__value--muted { color: var(--text-muted); }

.rune-modal__value-link {
  color: var(--accent-cyan);
  text-decoration: none;
  cursor: pointer;
}
.rune-modal__value-link:hover { text-decoration: underline; }

.rune-modal__progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rune-modal__progress-bar {
  width: 100%;
  height: 10px;
  background: var(--bg-elevated);
  border-radius: var(--r-pill);
  overflow: hidden;
  display: flex;
  border: 1px solid var(--border-default);
}
/* Each segment fills a slice of the bar from left to right. The minted
   segment renders first; the pending segment stacks immediately after it.
   Solid complementary colours (emerald vs amber) give the strongest
   possible hue contrast — the previous orange/pink + cyan/blue gradients
   ended on similar pinkish tones and washed together. Hover any segment
   for the native browser tooltip. */
.rune-modal__progress-segment {
  height: 100%;
  transition: width var(--t-base) var(--ease-out);
  cursor: help;
}
.rune-modal__progress-segment--minted {
  /* Solid emerald — "completed / done". */
  background: var(--up);
}
.rune-modal__progress-segment--pending {
  /* Solid amber — "pending / in flight". Visually pairs with the green
     for a near-complementary pair, and uses diagonal stripes so the
     "in transit" state reads even at a glance when stacked next to
     the solid green block. */
  background-color: var(--accent-orange);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 4px,
    rgba(0, 0, 0, 0.22) 4px,
    rgba(0, 0, 0, 0.22) 7px
  );
  /* Crisp seam against the green segment. */
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.45);
}
.rune-modal__progress-pending {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--accent-orange-soft);
  color: var(--accent-orange);
  font-size: 10px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(245, 158, 11, 0.30);
}
.rune-modal__progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.rune-modal__footer {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.rune-modal__footer-link {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  color: var(--accent-cyan);
  text-decoration: none;
}
.rune-modal__footer-link:hover { text-decoration: underline; }

/* Alkanes modal — recent mempool mints list. Used by the per-contract
   detail modal to show the newest pending mints for an AlkaneId,
   pulled from `pending:alkanesMint:filter:<target>:zset`. Each row
   is a clickable link to mempool.space so the user can inspect the
   raw tx without leaving the app. The list scrolls independently
   inside the modal body so a long mint history doesn't stretch
   the modal. The section-count pill next to the title reuses the
   existing section-title flow (see --accent colour). */
.rune-modal__section-count {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.rune-modal__mint-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-default);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}

.rune-modal__mint-row {
  display: grid;
  grid-template-columns: 56px 1fr 16px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  transition: background 120ms ease;
}
.rune-modal__mint-row:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.rune-modal__mint-row + .rune-modal__mint-row {
  border-top: 1px solid var(--border-default);
}

.rune-modal__mint-age {
  color: var(--text-muted);
  text-align: right;
}
.rune-modal__mint-txid {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rune-modal__mint-arrow {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.rune-modal__mint-row:hover .rune-modal__mint-arrow {
  color: var(--accent-cyan);
}

.rune-modal__empty {
  padding: var(--sp-4);
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  background: var(--bg-secondary);
}

.rune-modal__loading,
.rune-modal__error {
  padding: var(--sp-5);
  text-align: center;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
}

.rune-modal__error { color: var(--down); }

/* Asset cell in main table gets a pointer cue when it's a rune */
.cell-asset--rune { cursor: pointer; }
.cell-asset--rune:hover .cell-asset__name {
  color: var(--accent-orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Live mints row already implies clickable, keep behavior. */

@media (max-width: 640px) {
  .rune-modal { width: calc(100vw - 16px); max-height: calc(100vh - 32px); }
  .rune-modal__grid { grid-template-columns: 1fr; }
}

/* About modal — reuses .rune-modal for chrome (head, close, body
   scroll). The body just needs denser rows of dl/dt/dd instead of
   the rune-detail grid. No override of the modal box itself. */
.about-modal__body { padding-top: 0; }
.about-modal__lede {
  margin: 0 0 var(--sp-4) 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.about-modal__list {
  margin: 0 0 var(--sp-4) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-default);
}
.about-modal__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--sp-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-default);
  font-size: 11px;
  line-height: 1.5;
}
.about-modal__row dt {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  padding-top: 1px;
}
.about-modal__row dd {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-mono);
  word-break: break-word;
}
.about-modal__row dd code {
  color: var(--accent-blue);
  background: var(--bg-elevated);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  font-size: 10.5px;
}

/* ===========================================
   16. Drawer (Detail)
   =========================================== */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}

.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 800px;
  max-width: 100vw;
  background: var(--bg-card);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--e3);
  z-index: 101;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease-out);
  overflow: hidden;
}

.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.drawer__head-title {
  font-family: var(--font-sans);
  font-size: var(--t-sans-lg);
  font-weight: var(--w-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.drawer__head-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  color: var(--text-muted);
}

.drawer__close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  transition: all var(--t-fast) var(--ease-out);
}
.drawer__close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.drawer__close:focus-visible { box-shadow: var(--e-focus); }

.drawer__hero {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.drawer__hero-pills { display: inline-flex; gap: 4px; }

.drawer__hero-asset {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.drawer__hero-symbol {
  font-family: var(--font-mono);
  font-size: var(--t-sans-xl);
  font-weight: var(--w-bold);
  color: var(--accent-orange);
}

.drawer__hero-name {
  font-family: var(--font-mono);
  font-size: var(--t-sans-lg);
  font-weight: var(--w-semi);
  color: var(--text-primary);
}

.drawer__hero-amount {
  font-family: var(--font-mono);
  font-size: var(--t-sans-lg);
  font-weight: var(--w-bold);
  color: var(--up);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.drawer__meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.drawer__meta-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card);
  min-width: 0;
}

.drawer__meta-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.drawer__meta-value {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  font-weight: var(--w-semi);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer__tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
  overflow-x: auto;
}

.drawer__tab {
  padding: var(--sp-3) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--t-sans-sm);
  font-weight: var(--w-semi);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease-out);
}

.drawer__tab:hover { color: var(--text-primary); }
.drawer__tab.is-active { color: var(--accent-orange); border-bottom-color: var(--accent-orange); }
.drawer__tab__count {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
  min-height: 0;
}

.drawer__pane { display: none; }
.drawer__pane.is-active { display: block; }

.drawer__pane-empty {
  padding: var(--sp-7) var(--sp-3);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--t-sans-sm);
  color: var(--text-muted);
}

.detail-kv {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.detail-kv__label,
.detail-kv__value {
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
}

.detail-kv__label {
  color: var(--text-muted);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--t-mono-xs);
}

.detail-kv__value {
  color: var(--text-primary);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

.detail-kv--terms { grid-template-columns: 1fr; }

.detail-kv__heading {
  grid-column: 1 / -1;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elevated, var(--bg-card));
  color: var(--accent-teal);
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-subtle);
}

.detail-kv--alkane + .detail-kv--alkane { margin-top: var(--sp-2); }

.detail-body {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  color: var(--text-primary);
  white-space: pre-wrap;
  max-height: 400px;
  overflow: auto;
  word-break: break-all;
  line-height: 1.5;
}

.detail-body--json .k { color: var(--accent-blue); }
.detail-body--json .s { color: var(--accent-green); }
.detail-body--json .n { color: var(--accent-orange); }
.detail-body--json .b { color: var(--accent-pink); }

.detail-image {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 520px;
  margin: 0 auto;
  padding: var(--sp-3);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  min-height: 200px;
}

.detail-image__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}

.detail-image__type {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  color: var(--accent-purple);
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-default);
}

.detail-image__link {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(var(--bg-elevated) 0% 25%, var(--bg-base) 0% 50%) 50% / 16px 16px;
  border-radius: var(--r-xs);
  min-height: 240px;
  max-height: 480px;
  overflow: hidden;
}

.detail-image__img {
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
  display: block;
}

.detail-image__fallback {
  padding: var(--sp-3);
  text-align: center;
}

.detail-image__open {
  align-self: flex-end;
  font-size: 11px;
  color: var(--accent-blue);
  text-decoration: none;
}
.detail-image__open:hover { text-decoration: underline; }

.detail-edicts {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
}

.detail-edicts th {
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
}

.detail-edicts td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.drawer__stale {
  background: var(--down-soft);
  border: 1px solid var(--status-warn);
  color: var(--text-primary);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--t-sans-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-9);
  color: var(--text-muted);
}

.drawer__skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--bg-row-hover) 50%, var(--bg-elevated) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: skeleton 1.4s linear infinite;
  color: transparent;
}

.drawer__skeleton--line { height: 14px; margin-bottom: var(--sp-2); }

.drawer__error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  background: var(--down-soft);
  border: 1px solid var(--status-error);
  border-radius: var(--r-sm);
  color: var(--down);
  font-family: var(--font-sans);
  font-size: var(--t-sans-sm);
}

.drawer__retry {
  padding: 4px var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-weight: var(--w-semi);
}
.drawer__retry:hover { background: var(--bg-elevated); }

/* ===========================================
   17. Bottom Bar (Bloomberg Status)
   =========================================== */
.bottombar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
}

.bottombar__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--sp-2);
  height: 18px;
  border-radius: var(--r-xs);
  background: var(--bg-card);
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.bottombar__pill--ok    { border-left-color: var(--status-ok); }
.bottombar__pill--warn  { border-left-color: var(--status-warn); color: var(--status-warn); }
.bottombar__pill--error { border-left-color: var(--status-error); color: var(--status-error); }
.bottombar__pill--off   { border-left-color: var(--status-offline); }

.bottombar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.bottombar__sep { color: var(--border-strong); }

.bottombar__value {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-semi);
}

.bottombar__bar {
  display: inline-block;
  width: 50px;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: var(--r-pill);
  overflow: hidden;
  vertical-align: middle;
  margin-left: 4px;
}

.bottombar__bar-fill {
  display: block;
  height: 100%;
  background: var(--accent-blue);
  transition: width var(--t-base) var(--ease-out);
}

.bottombar__spacer { flex: 1; }

/* The "About" pill in the bottom-right. Was a static <span> showing
   the build hash (vYYYYMMDD); promoted to a clickable button that
   opens the static About modal. Same chrome as .bottombar__pill so
   the right edge of the status bar reads as another status
   indicator. */
.bottombar__build {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--sp-2);
  height: 18px;
  border-radius: var(--r-xs);
  background: var(--bg-card);
  color: var(--text-secondary);
  border: none;
  border-left: 2px solid var(--accent-blue);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.bottombar__build:hover { background: var(--bg-elevated); color: var(--text-primary); }
.bottombar__build:focus-visible { outline: 1px solid var(--accent-blue); outline-offset: 1px; }
.bottombar__build-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 6px var(--accent-blue);
}

/* ===========================================
   18. Mobile Bottom Tabs
   =========================================== */
.bottom-tabs {
  display: none;
}

@media (max-width: 767px) {
  .bottom-tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: var(--tabs-h);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-default);
    padding-bottom: env(safe-area-inset-bottom, 0);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
  }

  .bottom-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text-muted);
    transition: color var(--t-fast) var(--ease-out);
    border-top: 2px solid transparent;
    padding: 4px;
    min-height: 48px;
  }

  .bottom-tab.is-active {
    color: var(--accent-orange);
    border-top-color: var(--accent-orange);
  }

  .bottom-tab__icon { width: 18px; height: 18px; }
  .bottom-tab__label {
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: var(--w-semi);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* ===========================================
   19. Toast
   =========================================== */
.toast-container {
  position: fixed;
  top: calc(var(--nav-h) + var(--sp-2));
  right: var(--sp-3);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
  max-width: 320px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-radius: var(--r-md);
  box-shadow: var(--e2);
  pointer-events: auto;
  animation: toast-in 200ms var(--ease-out);
  min-width: 240px;
  max-width: 320px;
}

.toast.is-leaving { animation: toast-out 200ms var(--ease-out) forwards; }

.toast--success { border-left-color: var(--up); }
.toast--info    { border-left-color: var(--accent-blue); }
.toast--warn    { border-left-color: var(--status-warn); }
.toast--error   { border-left-color: var(--down); }

.toast__body { flex: 1; min-width: 0; }
.toast__title {
  font-family: var(--font-sans);
  font-size: var(--t-sans-xs);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.toast__msg {
  font-family: var(--font-sans);
  font-size: var(--t-sans-sm);
  font-weight: var(--w-medium);
  color: var(--text-primary);
  word-break: break-word;
}

.toast__close {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--r-xs);
}
.toast__close:hover { color: var(--text-primary); background: var(--bg-card); }

/* ===========================================
   20. Animations
   =========================================== */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

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

@keyframes flash-up {
  0% { background: var(--up-soft); }
  100% { background: transparent; }
}

@keyframes flash-down {
  0% { background: var(--down-soft); }
  100% { background: transparent; }
}

@keyframes flash-cyan {
  0% { background: var(--accent-cyan-soft); }
  100% { background: var(--bg-card); }
}

@keyframes tick-up {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@keyframes ticker-slide {
  from { transform: translateX(8px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes row-flash {
  0% { background: var(--accent-orange-soft); }
  100% { background: transparent; }
}

@keyframes row-exit {
  to { opacity: 0; transform: translateX(-4px); }
}

@keyframes toast-in {
  from { transform: translateX(16px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
  to { transform: translateX(16px); opacity: 0; }
}

@keyframes scan-x {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0%); }
}

@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===========================================
   21. Reduced Motion
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .connection-pill--ok .connection-pill__dot,
  .section-card__live::before {
    animation: none !important;
  }
}

/* ===========================================
   22. Breakpoints
   =========================================== */

/* lg: 1024 - 1279 (tablet landscape, small desktop) */
@media (max-width: 1279px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .workspace { grid-template-columns: 1fr; }
  .workspace__rail {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--sp-3);
  }
  .workspace__rail .section-card { min-width: 280px; flex-shrink: 0; }
  .topbar__search { width: 200px; }
  .drawer { width: 600px; }
}

/* md: 768 - 1023 (tablet portrait) */
@media (max-width: 1023px) {
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .topbar__brand { font-size: var(--t-sans-md); }
  .topbar__divider { display: none; }
  .topbar__search { width: 160px; }
  .topbar__search input { font-size: var(--t-mono-xs); }
  .drawer__meta-grid { grid-template-columns: repeat(2, 1fr); }
  .drawer { width: 100vw; }
}

/* sm: mobile (≤ 767) */
@media (max-width: 767px) {
  .app {
    grid-template-rows: var(--nav-h) var(--kpi-h) var(--stats-h) minmax(0, 1fr) var(--bar-h) var(--tabs-h);
  }
  .kpi-strip {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .kpi-card { scroll-snap-align: start; }
  .workspace { grid-template-columns: 1fr; }
  .workspace__rail { display: none; }
  .workspace__rail.is-active { display: flex; }
  .table-container { padding-bottom: var(--sp-2); }
  .tx-table thead { display: none; }
  .tx-table tbody tr {
    display: block;
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
  }
  .tx-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border: none;
  }
  .tx-table tbody td::before {
    content: attr(data-label);
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: var(--w-semi);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
  }
  .tx-table tbody td.is-num { text-align: right; }
  .topbar__search { display: none; }
  .topbar__search.is-open {
    display: block;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-default);
    z-index: 60;
  }
  .topbar__search.is-open input { width: 100%; }
  .topbar__search.is-open .topbar__search-icon { left: 24px; }
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding: var(--sp-2) var(--sp-3); }
  .filter-bar__pills { flex-wrap: nowrap; }
  .filter-bar__divider, .filter-bar__spacer { display: none; }
  .filter-bar__search { width: 100%; }
  .drawer { width: 100vw; }
  .drawer__hero { padding: var(--sp-3); }
  .drawer__meta-grid { grid-template-columns: repeat(2, 1fr); }
  .toast-container { top: var(--sp-2); right: var(--sp-2); left: var(--sp-2); max-width: none; }
}

/* xs: tiny phones (≤ 479) */
@media (max-width: 479px) {
  .block-pill__label { display: none; }
  .kpi-card { padding: var(--sp-2) var(--sp-3); }
  .drawer__head { padding: var(--sp-3); }
}

/* 2xl: wide (≥ 1600) */
@media (min-width: 1600px) {
  .kpi-card { padding: var(--sp-3) var(--sp-6); }
  .drawer { width: 880px; }
  .workspace__rail { min-width: 360px; }
}

/* ===========================================
   23. Light Theme Hook (v2 placeholder)
   =========================================== */
@media (prefers-color-scheme: light) {
  /* Tokens left intact for future light theme */
}

/* ============================================================
   Inscribe Mint Flow (pay-then-mint)
   ============================================================ */

/* Mint action button on the live-mints rail.
   Always visible at the row's right edge (absolute-positioned) so it
   matches the BRC-20 rail's .mint-row__mint-btn layout — both rails
   now read the same way at a glance. Orange-tinted to keep the Rune
   monitor's visual identity (BRC-20's button is blue). Disabled when
   the source rune row hasn't been selected yet. */
.mint-row__action {
  position: absolute;
  top: 50%;
  right: var(--sp-4);
  transform: translateY(-50%);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-orange, #ff8a3d);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 120ms ease;
}
.mint-row__action:hover:not(:disabled) {
  background: var(--accent-orange-soft, rgba(255,138,61,0.12));
}
.mint-row__action:focus-visible {
  outline: none;
  background: var(--accent-orange-soft, rgba(255,138,61,0.12));
}

/* Standalone heat badge sitting between the count and the Mint button
   on each live-mints row. Visual weight is intentionally low (no fill,
   thin border, only the emoji carries the signal) so the row still
   reads as data first — the badge is just an at-a-glance heat meter.
   Level modifiers tint the border/text so the emoji feels grounded
   in the row rather than floating next to it. */
.mint-row__heat {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--text-muted, #8b93a7);
  background: transparent;
  border: 1px solid var(--border-default, #20242d);
  border-radius: 999px;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
  /* Never let the emoji get compressed by a tight row — it would
     either get clipped or wrap and push the Mint button onto a new
     line. Better to ellipsize the name than squash the heat signal. */
  flex: 0 0 auto;
}
.mint-row__heat--calm   { color: var(--text-muted, #8b93a7); }
.mint-row__heat--warm   { color: #f59e0b; border-color: rgba(245, 158, 11, 0.45); }
.mint-row__heat--hot    { color: #fb923c; border-color: rgba(251, 146, 60, 0.5); }
.mint-row__heat--streak { color: #f43f5e; border-color: rgba(244, 63, 94, 0.55); }
.mint-row__heat--launch { color: #ec4899; border-color: rgba(236, 72, 153, 0.6); }

/* BRC-20 "Mint" action button. Sits at the right end of each BRC-20
   mint row; tinted with the accent-blue used elsewhere on the
   inscription feed so it visually belongs to the BRC-20 rail rather
   than the orange-tinted Rune monitor's hover-only action button.
   Disabled state matches the muted secondary tone so a row whose
   source tx has dropped out of the mempool cache reads as inert.

   Positioned absolutely so it doesn't break the existing 4-column
   grid template (rank / name / count / delta) used by the Rune
   monitor that shares this row class. */
.mint-row__mint-btn {
  position: absolute;
  top: 50%;
  right: var(--sp-4);
  transform: translateY(-50%);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-blue, #4f8cff);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 120ms ease, color 120ms ease;
}
.mint-row__mint-btn:hover:not(:disabled) {
  background: rgba(79, 140, 255, 0.12);
}
.mint-row__mint-btn:disabled {
  color: var(--text-muted, #8b93a7);
  border-color: var(--border-default, #20242d);
  cursor: not-allowed;
}
/* On the BRC-20 monitor give the count/delta cells a little right
   padding so the absolute-positioned Mint button doesn't overlap
   their digits. */
.inscription-feed--monitor .mint-row__count,
.inscription-feed--monitor .mint-row__delta {
  padding-right: 48px;
}

/* Modal layout for the inscribe flow — reuses the rune-modal
   container classes; only the body contents differ. */
.inscribe-field { margin: 10px 0; }
.inscribe-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #8b93a7);
  margin-bottom: 4px;
}
.inscribe-field input,
.inscribe-field textarea {
  width: 100%;
  padding: 8px 10px;
  font: 13px/1.4 'JetBrains Mono', monospace;
  color: var(--text-primary, #e8ecf4);
  background: var(--bg-input, #14181f);
  border: 1px solid var(--border-default, #20242d);
  border-radius: 6px;
  outline: none;
  transition: border-color 120ms ease;
}
.inscribe-field input:focus,
.inscribe-field textarea:focus {
  border-color: var(--accent-orange, #ff8a3d);
}
.inscribe-field--mt { margin-top: 18px; }
/* Envelope JSON editor. Monospace + min/max height so the user can
   see the full shape and scroll if it's long. Sits in the same form
   column as the other params so the layout stays consistent. */
.inscribe-textarea,
.inscribe-field__textarea {
  min-height: 88px;
  max-height: 240px;
  resize: vertical;
  white-space: pre;
  font-size: 12px;
  line-height: 1.45;
}

/* Fee-tier picker. Radio-group of 4 chips sitting above the
   rate input: Fast / Medium / Slow pull from /api/fees/precise;
   Custom lets the user type any rate. The active chip is
   highlighted with the accent-orange border; the rate sits in
   a muted monospace pill inside the chip so all four buttons
   have the same width regardless of how many digits the rate
   has. */
.inscribe-fee-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.inscribe-fee-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  background: var(--bg-input, #14181f);
  border: 1px solid var(--border-default, #20242d);
  border-radius: 6px;
  color: var(--text-primary, #e8ecf4);
  font: 600 12px/1.2 'Inter', sans-serif;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.inscribe-fee-tier:hover,
.inscribe-fee-tier:focus-visible {
  border-color: var(--accent-orange, #ff8a3d);
  background: var(--bg-elevated, #1a1f2a);
  outline: none;
}
.inscribe-fee-tier.is-active {
  border-color: var(--accent-orange, #ff8a3d);
  background: rgba(255, 138, 61, 0.12);
  color: var(--accent-orange, #ff8a3d);
}
.inscribe-fee-tier__rate {
  font: 500 10px/1 'JetBrains Mono', monospace;
  color: var(--text-muted, #8b93a7);
  letter-spacing: 0;
}
.inscribe-fee-tier.is-active .inscribe-fee-tier__rate {
  color: var(--accent-orange, #ff8a3d);
  opacity: 0.85;
}
.inscribe-fee-hint {
  margin-top: 6px;
  font: 11px/1.4 'Inter', sans-serif;
  color: var(--text-muted, #8b93a7);
}

/* Pay section. Hidden by default (HTML has the `hidden` attribute
   for a11y / no-JS fallback); when revealed it sits inside the same
   scrollable stepOrder card so the user keeps the params they just
   filled in visible above it. The whole region is wrapped in a
   faintly elevated card so the boundary between "editable params"
   and "order is locked, here's the invoice" is obvious without
   needing an explicit step transition. */
.inscribe-pay-section {
  margin-top: 18px;
}
.inscribe-pay-divider {
  position: relative;
  margin: 22px 0 12px;
  text-align: center;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-orange, #ff8a3d);
}
.inscribe-pay-divider::before,
.inscribe-pay-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-default, #20242d), transparent);
}
.inscribe-pay-divider::before { left: 0; }
.inscribe-pay-divider::after  { right: 0; }
.inscribe-pay-divider span {
  position: relative;
  padding: 0 10px;
  background: rgba(255, 138, 61, 0.10);
  border: 1px solid var(--accent-orange, #ff8a3d);
  border-radius: 999px;
  padding: 5px 12px;
}

/* When the order is created the param inputs are disabled — drop
   the focusable/active styling on them and dim the values so the
   user's eye is drawn to the pay section below. The tier-picker
   buttons get the same treatment. */
.inscribe-field input:disabled,
.inscribe-field textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-card, #181c25);
}
.inscribe-fee-tier:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.inscribe-fee-tier:disabled:hover {
  border-color: var(--border-default, #20242d);
  background: var(--bg-input, #14181f);
}
.inscribe-fee-tier.is-active:disabled {
  /* Keep the active outline visible (so the user can see WHICH tier
     they chose) but mute the fill so the eye lands on the pay card
     below rather than the picker. */
  background: rgba(255, 138, 61, 0.06);
  opacity: 0.7;
}

.inscribe-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  justify-content: flex-end;
}
.inscribe-actions--col { flex-direction: column; }

.inscribe-btn {
  padding: 8px 14px;
  font: 600 12px/1 'Inter', sans-serif;
  letter-spacing: 0.04em;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.inscribe-btn--primary {
  background: var(--accent-orange, #ff8a3d);
  color: #0c0e13;
  border-color: var(--accent-orange, #ff8a3d);
}
.inscribe-btn--primary:hover:not(:disabled) {
  background: var(--accent-orange-hover, #ffa564);
  border-color: var(--accent-orange-hover, #ffa564);
}
.inscribe-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.inscribe-btn--ghost {
  background: transparent;
  color: var(--text-secondary, #b6bdcc);
  border-color: var(--border-default, #20242d);
}
.inscribe-btn--ghost:hover { background: var(--bg-elevated, #1a1f2a); }

.inscribe-err {
  margin-top: 10px;
  min-height: 16px;
  font-size: 12px;
  color: var(--down, #ef4444);
  font-family: 'JetBrains Mono', monospace;
}

.inscribe-quote {
  padding: 10px 12px;
  margin: 10px 0 14px;
  background: var(--bg-row-hover, #1a1f2a);
  border: 1px solid var(--border-default, #20242d);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.inscribe-quote__row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  color: var(--text-secondary, #b6bdcc);
}
.inscribe-quote__row b { color: var(--text-primary, #e8ecf4); }
.inscribe-quote__row--total {
  border-top: 1px dashed var(--border-default, #20242d);
  margin-top: 6px;
  padding-top: 8px;
  font-size: 13px;
}
.inscribe-quote__row--breakdown { font-size: 11px; color: var(--text-muted, #8b93a7); }

/* Network badge in the pay-step quote. Highlights which network the
   wallet must be on — colour-coded so testnet4 doesn't get mistaken
   for mainnet and vice versa. */
.inscribe-net-badge {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.inscribe-net-badge[data-net="mainnet"] {
  background: rgba(255, 159, 64, 0.15);
  color: #ffa552;
  border: 1px solid rgba(255, 159, 64, 0.4);
}
.inscribe-net-badge[data-net="testnet4"],
.inscribe-net-badge[data-net="testnet"] {
  background: rgba(99, 199, 255, 0.15);
  color: #63c7ff;
  border: 1px solid rgba(99, 199, 255, 0.4);
}
.inscribe-net-badge[data-net="signet"] {
  background: rgba(199, 128, 255, 0.15);
  color: #c780ff;
  border: 1px solid rgba(199, 128, 255, 0.4);
}

.inscribe-recv {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 8px 0 12px;
  background: var(--bg-input, #14181f);
  border: 1px solid var(--border-default, #20242d);
  border-radius: 6px;
}
.inscribe-recv code {
  flex: 1;
  font: 600 12px/1.4 'JetBrains Mono', monospace;
  color: var(--text-primary, #e8ecf4);
  word-break: break-all;
  user-select: all;
}

/* Status timeline */
.inscribe-status { padding: 4px 0 14px; }
.inscribe-status__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font: 13px/1.4 'Inter', sans-serif;
  color: var(--text-muted, #8b93a7);
  border-bottom: 1px solid var(--border-default, #20242d);
}
.inscribe-status__row:last-child { border-bottom: 0; }
.inscribe-status__row.is-done   { color: var(--text-secondary, #b6bdcc); }
.inscribe-status__row.is-current{ color: var(--accent-orange, #ff8a3d); font-weight: 600; }
.inscribe-status__row.is-final  { color: var(--up, #22c55e); font-weight: 600; }
.inscribe-status__row.is-failed { color: var(--down, #ef4444); font-weight: 600; }

.inscribe-status__detail {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-input, #14181f);
  border: 1px solid var(--border-default, #20242d);
  border-radius: 6px;
  font: 11px/1.6 'JetBrains Mono', monospace;
  color: var(--text-secondary, #b6bdcc);
  word-break: break-all;
}
.inscribe-status__detail a {
  color: var(--accent-orange, #ff8a3d);
  text-decoration: none;
}
.inscribe-status__detail a:hover { text-decoration: underline; }
.inscribe-status__err { color: var(--down, #ef4444); font-weight: 500; }

/* Order ID — truncated in display, full string in data-full so the
   copy button can read it without a stale-closure re-derivation.
   The .inscribe-id rule is shared between the quote row, the status
   detail, and the order-list rows so all three look identical. */
.inscribe-id {
  font: 600 12px/1.4 'JetBrains Mono', monospace;
  color: var(--text-primary, #e8ecf4);
  background: var(--bg-input, #14181f);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-default, #20242d);
  cursor: text;
  user-select: all;
}
.inscribe-quote__row--id {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inscribe-quote__row--id > span:first-child {
  flex: 0 0 auto;
}
/* margin-left:auto pushes the (orderId + copy button) pair to the
   right edge of the row, leaving the label "Order" pinned to the
   left. Works whether the row is flex-start (default) or stretched
   inside a wider parent. */
.inscribe-quote__row--id .inscribe-id { margin-left: auto; }
.inscribe-quote__row--id .copy-id-btn { flex: 0 0 auto; }
.inscribe-status__id-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inscribe-status__id-row .inscribe-id { flex: 0 1 auto; }
.inscribe-status__id-row .copy-id-btn { flex: 0 0 auto; }

/* Compact "Copy" / "Copied ✓" button used inline next to UUIDs.
   Tinted accent so it reads as a real button rather than a borderless
   label, and tighter padding than .inscribe-btn--xs so it fits next
   to a 12px monospace UUID tag. */
.copy-id-btn {
  padding: 2px 7px;
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.04em;
  border-radius: 3px;
  background: rgba(255, 138, 61, 0.12);
  border: 1px solid rgba(255, 138, 61, 0.35);
  color: var(--accent-orange, #ff8a3d);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.copy-id-btn:hover {
  background: rgba(255, 138, 61, 0.22);
  border-color: var(--accent-orange, #ff8a3d);
}
.copy-id-btn.is-copied {
  background: rgba(80, 200, 120, 0.18);
  border-color: rgba(80, 200, 120, 0.5);
  color: #50c878;
}

/* Address-search results: list of clickable order rows. */
.inscribe-order-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inscribe-order-row {
  padding: 10px 12px;
  background: var(--bg-input, #14181f);
  border: 1px solid var(--border-default, #20242d);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.inscribe-order-row:hover,
.inscribe-order-row:focus-visible {
  border-color: var(--accent-orange, #ff8a3d);
  background: var(--bg-elevated, #1a1f2a);
  outline: none;
}
.inscribe-order-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.inscribe-order-row__title {
  font: 600 13px/1.4 'Inter', sans-serif;
  color: var(--text-primary, #e8ecf4);
}
.inscribe-order-row__net {
  font: 600 11px/1 'JetBrains Mono', monospace;
  color: var(--text-muted, #8b93a7);
  text-transform: lowercase;
}
.inscribe-order-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 11px/1.4 'JetBrains Mono', monospace;
  color: var(--text-muted, #8b93a7);
}
.inscribe-order-row__meta .inscribe-id { font-size: 11px; padding: 1px 5px; }
.inscribe-order-row__meta .copy-id-btn { padding: 1px 6px; font-size: 10px; }

/* Address-search pager. Sits under the order-list and uses the same
   dark-input / orange-acent palette as the rest of the inscribe flow
   so it reads as part of the same widget. Hidden when the entire
   result set fits on one page (the render path skips the wrapper
   entirely). */
.inscribe-order-pager {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 4px;
  font: 11px/1.4 'JetBrains Mono', monospace;
  color: var(--text-muted, #8b93a7);
}
.inscribe-order-pager__btn {
  padding: 6px 12px;
  background: var(--bg-input, #14181f);
  border: 1px solid var(--border-default, #20242d);
  border-radius: 6px;
  color: var(--text-primary, #e8ecf4);
  font: 600 11px/1 'Inter', sans-serif;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.inscribe-order-pager__btn:hover:not(.is-disabled),
.inscribe-order-pager__btn:focus-visible:not(.is-disabled) {
  border-color: var(--accent-orange, #ff8a3d);
  background: var(--bg-elevated, #1a1f2a);
  outline: none;
}
.inscribe-order-pager__btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.inscribe-order-pager__info {
  flex: 1;
  text-align: center;
  letter-spacing: 0.02em;
}

/* Status pill — color-coded by order status, mirrors the timeline
   colors so the list view reads at a glance. */
.inscribe-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font: 600 10px/1.2 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-elevated, #1a1f2a);
  border: 1px solid var(--border-default, #20242d);
  color: var(--text-muted, #8b93a7);
}
.inscribe-status-pill--pending_payment        { color: var(--accent-orange, #ff8a3d); border-color: var(--accent-orange, #ff8a3d); }
.inscribe-status-pill--awaiting_confirmations  { color: #facc15; border-color: #facc15; }
.inscribe-status-pill--paid                    { color: #60a5fa; border-color: #60a5fa; }
.inscribe-status-pill--minting                 { color: #a78bfa; border-color: #a78bfa; }
.inscribe-status-pill--minted                  { color: var(--up, #22c55e); border-color: var(--up, #22c55e); }
.inscribe-status-pill--failed,
.inscribe-status-pill--expired                 { color: var(--down, #ef4444); border-color: var(--down, #ef4444); }

/* ============================================================================
   Fee Bump modal & injected section. Mirrors the rune-modal / inscribe-*
   conventions (--bg-card, --border-strong, --r-lg, --e3) and reuses the
   bump.js DOM structure (.bump-modal, .bump-backdrop, .bump-btn, etc).
   ============================================================================ */

/* .bump-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}
.bump-backdrop.is-open { opacity: 1; pointer-events: auto; }

.bump-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--e3);
  z-index: 121;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translate(-50%, -48%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.bump-modal.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.bump-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}
.bump-modal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.bump-modal__close {
  background: transparent;
  border: 0;
  color: var(--text-secondary, #94a3b8);
  font-size: 24px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms;
}
.bump-modal__close:hover { background: var(--border-default); color: var(--text-primary); }

.bump-modal__body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bump-section { display: flex; flex-direction: column; gap: 12px; }
.bump-section__title { font-size: 15px; font-weight: 600; margin: 0; color: var(--text-primary); } */

/* Info block (current rate, recommended, min/max) */
/* .bump-info {
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary, #94a3b8);
}
.bump-info__num {
  color: var(--text-primary);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

/* Slider */
/* .bump-label {
  font-size: 13px;
  color: var(--text-secondary, #94a3b8);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bump-label__num {
  color: var(--accent-orange, #f59e0b);
  font-weight: 700;
  font-size: 16px;
  font-family: 'JetBrains Mono', monospace;
}
.bump-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--border-default);
  border-radius: 3px;
  outline: none;
}
.bump-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-orange, #f59e0b);
  cursor: pointer;
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.bump-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-orange, #f59e0b);
  cursor: pointer;
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-strong);
}*/

/* Quick-pick buttons */
/* .bump-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bump-quick__btn {
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  transition: all 150ms;
}
.bump-quick__btn:hover { background: var(--border-default); }
.bump-quick__btn.is-active {
  background: var(--accent-orange-soft, rgba(245, 158, 11, 0.15));
  border-color: var(--accent-orange, #f59e0b);
  color: var(--accent-orange, #f59e0b);
} */

/* Quote summary */
/* .bump-quote {
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 12px 14px;
}
.bump-quote__inner { display: flex; flex-direction: column; gap: 6px; }
.bump-quote__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary, #94a3b8);
}
.bump-quote__v { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; }
.bump-quote__row--total {
  padding-top: 8px;
  border-top: 1px solid var(--border-default);
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
}
.bump-quote__row--total .bump-quote__v { color: var(--accent-orange, #f59e0b); font-size: 16px; }
.bump-quote__note { font-size: 11px; color: var(--text-secondary, #94a3b8); margin-top: 6px; }
.bump-quote__loading { color: var(--text-secondary, #94a3b8); font-size: 13px; }
.bump-loading { color: var(--text-secondary, #94a3b8); font-size: 13px; padding: 8px 0; } */

/* Receive address block */
/* .bump-recv { display: flex; flex-direction: column; gap: 6px; }
.bump-recv__addr {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 12px;
}
.bump-recv__code {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-primary);
  word-break: break-all;
}
.bump-recv__expires { font-size: 11px; color: var(--text-secondary, #94a3b8); } */

/* Field (manual txid) */
/* .bump-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bump-field label { font-size: 12px; color: var(--text-secondary, #94a3b8); }
.bump-field input {
  background: var(--bg-elevated, #0d1320);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.bump-field input:focus { outline: none; border-color: var(--accent-orange, #f59e0b); } */

/* Buttons */
/* .bump-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.bump-btn {
  background: var(--border-default);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms;
}
.bump-btn:hover { background: var(--border-strong); }
.bump-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bump-btn--primary {
  background: var(--accent-orange, #f59e0b);
  border-color: var(--accent-orange, #f59e0b);
  color: #0d1320;
  font-weight: 600;
}
.bump-btn--primary:hover { background: #d97706; border-color: #d97706; }
.bump-btn--ghost { background: transparent; }
.bump-btn--sm { padding: 4px 10px; font-size: 12px; } */

/* Errors */
/* .bump-err {
  color: var(--down, #ef4444);
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.30);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
} */ 

/* Status stepper (within bump modal) */
/* .bump-status { display: flex; flex-direction: column; gap: 4px; }
.bump-status__row {
  font-size: 13px;
  padding: 4px 0;
  color: var(--text-secondary, #94a3b8);
}
.bump-status__row.is-done { color: var(--up, #10b981); }
.bump-status__row.is-current { color: var(--text-primary); font-weight: 600; }
.bump-status__row.is-failed { color: var(--down, #ef4444); }
.bump-status__note {
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  margin-top: 8px;
}
.bump-status__note code { font-family: 'JetBrains Mono', monospace; } */

/* Injected "Bump Fee" section in the order-detail overlay */
/* .bump-injected {
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.bump-injected .rune-modal__section-title { margin: 0; font-size: 14px; }
.bump-injected__desc {
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.5;
}
.bump-injected__desc a {
  color: var(--accent-orange, #f59e0b);
  text-decoration: none;
}
.bump-injected__desc a:hover { text-decoration: underline; }
.bump-help {
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  background: var(--bg-elevated, #0d1320);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 10px 12px;
  line-height: 1.5;
}
.bump-help p { margin: 0 0 6px; }
.bump-help p:last-child { margin: 0; } */

/* ============================================================================
   Bump History section (injected into the order-detail overlay).
   Uses .bump-history, .bump-history__item, .bump-history__pill, etc.
   ============================================================================ */

/* .bump-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.bump-history__loading,
.bump-history__empty {
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  padding: 8px 0;
  font-style: italic;
}

.bump-history__item {
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-default);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bump-history__item--executed    { border-left-color: var(--up, #10b981); }
.bump-history__item--paid         { border-left-color: #60a5fa; }
.bump-history__item--awaiting_confirmations { border-left-color: #60a5fa; }
.bump-history__item--pending_payment { border-left-color: #94a3b8; }
.bump-history__item--failed       { border-left-color: var(--down, #ef4444); }
.bump-history__item--expired      { border-left-color: #94a3b8; opacity: 0.7; }

.bump-history__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.bump-history__pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid currentColor;
}
.bump-history__pill--executed    { color: var(--up, #10b981); }
.bump-history__pill--paid         { color: #60a5fa; }
.bump-history__pill--awaiting_confirmations { color: #60a5fa; }
.bump-history__pill--pending_payment { color: #94a3b8; }
.bump-history__pill--failed       { color: var(--down, #ef4444); }
.bump-history__pill--expired      { color: #94a3b8; }

.bump-history__meta {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  font-family: 'JetBrains Mono', monospace;
}

.bump-history__tx {
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  display: flex;
  gap: 4px;
  align-items: center;
}
.bump-history__tx code {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
  font-size: 11px;
}

.bump-history__err {
  font-size: 11px;
  color: var(--down, #ef4444);
  background: rgba(239, 68, 68, 0.08);
  padding: 4px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.bump-history__ts {
  font-size: 10px;
  color: var(--text-secondary, #94a3b8);
  opacity: 0.7;
  font-family: 'JetBrains Mono', monospace;
} */

/* ============================================================================
   Bump list pill — small "Bump" indicator injected into each row of the
   address-search results list (app.js .inscribe-order-row) when the
   order's status is paid / minting / minted.
   ============================================================================ */

/* .bump-list-pill {
  display: inline-block;
  margin-left: auto;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  background: var(--accent-orange-soft, rgba(245, 158, 11, 0.15));
  color: var(--accent-orange, #f59e0b);
  border: 1px solid var(--accent-orange, #f59e0b);
  border-radius: 999px;
  cursor: help;
} */