/* ===========================================
   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);

  /* 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);
}

.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);
}

.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--active .stat-chip__label {
  color: rgba(10, 14, 23, 0.65);
}
.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); }

@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;
}

.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;
}

.mint-row {
  display: grid;
  grid-template-columns: 28px 1fr 56px 56px 56px;
  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);
}

.mint-row__count.is-tick { animation: tick-up 200ms var(--ease-out); }

.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-row__sparkline {
  width: 56px;
  height: 14px;
  display: block;
}

.mint-row__sparkline path { fill: none; stroke: var(--text-muted); stroke-width: 1; }
.mint-row__sparkline circle { fill: var(--text-muted); stroke: none; }
.mint-row:hover .mint-row__sparkline path,
.mint-row.is-active .mint-row__sparkline path { stroke: var(--accent-orange); }
.mint-row:hover .mint-row__sparkline circle,
.mint-row.is-active .mint-row__sparkline circle { fill: var(--accent-orange); }

.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);
}

.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 sparkline: blue accent on hover, matching the BRC-20 row
   color scheme (otherwise the base .mint-row hover rule strokes the path
   in --accent-orange which is the Rune color). */
.inscription-feed--monitor .mint-row:hover .mint-row__sparkline path,
.inscription-feed--monitor .mint-row.is-active .mint-row__sparkline path { stroke: var(--accent-blue); }
.inscription-feed--monitor .mint-row:hover .mint-row__sparkline circle,
.inscription-feed--monitor .mint-row.is-active .mint-row__sparkline circle { fill: var(--accent-blue); }

.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); }

.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); }

.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); }

.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); }

/* ===========================================
   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-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; }

.bottombar__build {
  color: var(--text-disabled);
  font-family: var(--font-mono);
  font-size: 9px;
}

/* ===========================================
   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 */
}