/* ─────────────────────────────────────────────────────────────────
   TANCEL · Tx Decoder
   Type: Sora (display & UI) + JetBrains Mono (code, addresses)
   ───────────────────────────────────────────────────────────────── */

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

:root {
  /* ── Surface ── */
  --bg:           #0c0c16;
  --bg-soft:      #11111b;
  --bg-elevated:  #161622;
  --bg-deep:      #07070d;

  /* ── Type ── */
  --text:         #e8e4df;
  --text-muted:   #a39d94;
  --text-dim:     #6c685f;
  --text-faint:   #3e3b34;

  /* ── Brand & semantic ── */
  --accent:       #D4642A;
  --accent-hot:   #ec7838;
  --accent-soft:  rgba(212, 100, 42, 0.10);
  --accent-edge:  rgba(212, 100, 42, 0.32);
  --accent-glow:  rgba(212, 100, 42, 0.20);

  --sage:         #7da882;
  --sage-soft:    rgba(125, 168, 130, 0.10);
  --sage-edge:    rgba(125, 168, 130, 0.32);

  --rust:         #c66962;
  --rust-soft:    rgba(198, 105, 98, 0.10);
  --rust-edge:    rgba(198, 105, 98, 0.32);

  --amber:        #c89a3d;
  --amber-soft:   rgba(200, 154, 61, 0.10);
  --amber-edge:   rgba(200, 154, 61, 0.32);

  /* ── Lines ── */
  --rule:         #1a1a25;
  --rule-bright:  #28283a;

  /* ── Type families ── */
  --sans:    'Sora', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ── Geometry ── */
  --r-sharp: 2px;
  --r:       6px;
  --r-soft:  10px;

  /* ── Motion ── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}

::selection { background: var(--accent); color: var(--bg); }

a { color: var(--accent); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--accent-hot); text-decoration: underline; text-underline-offset: 3px; }

/* ── Decorative backdrops ── */
.scanlines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(232, 228, 223, 0.012) 0px,
    rgba(232, 228, 223, 0.012) 1px,
    transparent 1px,
    transparent 4px
  );
}
.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 100% 70% at 50% -10%, rgba(212, 100, 42, 0.045), transparent 65%),
              radial-gradient(ellipse 120% 80% at 50% 110%, rgba(0, 0, 0, 0.45), transparent 60%);
}

/* ── Layout shell — narrow by default (tx mode), widens for the wallet view ── */
.shell {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  padding: 3.5rem 1.75rem 3.5rem;
  transition: max-width 0.35s var(--ease);
}
body.wallet-active .shell,
body.token-active  .shell { max-width: 1380px; }

/* ─────────────────────────────────────────────────────────────────
   Masthead
   ───────────────────────────────────────────────────────────────── */
.masthead {
  margin-bottom: 2.75rem;
  animation: fadeIn 0.6s var(--ease) both;
}

.masthead-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
  border-top: 1px solid var(--rule-bright);
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0.1rem;
  margin-bottom: 1.5rem;
}

.masthead-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: var(--r-sharp);
  flex-shrink: 0;
}
.title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.85rem, 4.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
}

.tagline {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--text-muted);
  max-width: 60ch;
  line-height: 1.6;
}
.tagline strong {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────
   Mode tabs (Decode Tx / Inspect Wallet)
   ───────────────────────────────────────────────────────────────── */
.mode-tabs {
  display: flex;
  gap: 0.3rem;
  margin: -0.25rem -0.4rem 1rem;
  padding: 0 0.4rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  /* Never bleed past the panel — scroll the row if it can't fit (rare on
     desktop now that labels are short; a safety net for zoom / added tabs). */
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.mode-tabs::-webkit-scrollbar { display: none; }
.mode-tab {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--r-sharp);
  transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.mode-tab:hover { color: var(--text); }
.mode-tab.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-edge);
}
.mode-hint {
  margin-top: 0.85rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────────────────
   Search Panel
   ───────────────────────────────────────────────────────────────── */
.search-panel {
  background: var(--bg-soft);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r);
  padding: 1.25rem 1.4rem 1.4rem;
  margin-bottom: 2.25rem;
  position: relative;
  animation: fadeIn 0.6s var(--ease) 0.08s both;
}

.input-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.input-wrap { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.select-wrap { width: 200px; display: flex; flex-direction: column; gap: 0.45rem; }

.input-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* Structural selector so ANY input inside the search panel gets the dark
   theme — added after the third-tab (Inspect Token) input shipped as a
   raw white browser box because the ID-specific rule below didn't include
   it. With this rule in place, future tabs/inputs inherit by default. */
.search-panel input[type="text"],
.search-panel select,
#txInput, #walletInput, #tokenInput, #chainSelect {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r-sharp);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  outline: none;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.search-panel input[type="text"]::placeholder,
#txInput::placeholder, #walletInput::placeholder, #tokenInput::placeholder { color: var(--text-dim); }
.search-panel input[type="text"]:focus,
.search-panel select:focus,
#txInput:focus, #walletInput:focus, #tokenInput:focus, #chainSelect:focus {
  border-color: var(--accent);
  background: #050509;
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px var(--accent-glow);
}
/* Custom chevron for ALL search-panel selects (native arrow sits cramped in the
   corner). Applies to #chainSelect and the Moralis Health selects alike. */
#chainSelect,
.search-panel select {
  font-family: var(--sans);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23a39d94' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.2rem;
}
#chainSelect option,
.search-panel select option { background: var(--bg-soft); color: var(--text); }

.decode-btn {
  width: 100%;
  padding: 0.85rem 1.25rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--r-sharp);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  transition: background 0.15s var(--ease), transform 0.1s, box-shadow 0.2s var(--ease);
}
.decode-btn:hover { background: var(--accent-hot); box-shadow: 0 0 32px var(--accent-glow); }
.decode-btn:active { transform: translateY(1px); }
.decode-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-icon {
  font-size: 1.05rem;
  font-weight: 400;
  transition: transform 0.2s var(--ease);
}
.decode-btn:hover .btn-icon { transform: translateX(3px); }

/* ─────────────────────────────────────────────────────────────────
   Loader
   ───────────────────────────────────────────────────────────────── */
.loader {
  text-align: center;
  padding: 2.5rem 1rem;
}
.loader-bar {
  width: 220px;
  height: 2px;
  background: var(--rule-bright);
  position: relative;
  overflow: hidden;
  margin: 0 auto 1rem;
}
.loader-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -45%;
  width: 45%; height: 100%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: loaderSlide 1.1s ease-in-out infinite;
}
.loader-text {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.dots { display: inline-flex; gap: 3px; }
.dots span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: dotPulse 1.2s ease-in-out infinite both;
}
.dots span:nth-child(2) { animation-delay: 0.15s; }
.dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes loaderSlide { 0% { left: -45%; } 100% { left: 100%; } }
@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
  40% { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────────
   Section labels — clean, numbered
   01  /  TRANSACTION METADATA  ─────────────────
   ───────────────────────────────────────────────────────────────── */
.section-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1;
}
.section-label::before {
  content: attr(data-num);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.section-label > span {
  color: var(--text);
  font-weight: 600;
  position: relative;
  padding-left: 0.7rem;
}
.section-label > span::before {
  content: '/';
  position: absolute;
  left: -0.05rem;
  color: var(--text-faint);
  font-weight: 400;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule-bright);
  margin-left: 0.15rem;
}

/* ─────────────────────────────────────────────────────────────────
   Error toast
   ───────────────────────────────────────────────────────────────── */
.error-toast {
  background: var(--rust-soft);
  border: 1px solid var(--rust-edge);
  border-left: 2px solid var(--rust);
  border-radius: var(--r-sharp);
  padding: 0.85rem 1.1rem;
  color: var(--rust);
  font-family: var(--mono);
  font-size: 0.78rem;
  margin-bottom: 1.5rem;
  animation: shakeIn 0.35s var(--ease);
}
@keyframes shakeIn {
  0%   { transform: translateX(-8px); opacity: 0; }
  50%  { transform: translateX(4px); }
  100% { transform: translateX(0); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────
   Cards (shared)
   ───────────────────────────────────────────────────────────────── */
.summary-card,
.balance-card,
.bridge-card,
.diagnosis-card,
.detail-section,
.flow-section {
  background: var(--bg-soft);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r);
  padding: 1.35rem 1.45rem;
  margin-bottom: 1.25rem;
  animation: fadeIn 0.5s var(--ease) both;
}
.detail-section, .flow-section { background: transparent; border: none; padding: 0; }

/* ─────────────────────────────────────────────────────────────────
   Summary card
   ───────────────────────────────────────────────────────────────── */
.summary-card { animation-delay: 0.04s; }

.badges {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.95rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid var(--rule-bright);
  background: var(--bg-deep);
  color: var(--text-muted);
}
.badge.success { color: var(--sage); border-color: var(--sage-edge); background: var(--sage-soft); }
.badge.failed  { color: var(--rust); border-color: var(--rust-edge); background: var(--rust-soft); }
.badge.warning { color: var(--amber); border-color: var(--amber-edge); background: var(--amber-soft); }
.badge-type    { color: var(--accent); border-color: var(--accent-edge); background: var(--accent-soft); }
.badge-chain   { color: var(--text-muted); border-color: var(--rule-bright); background: var(--bg-deep); }

.summary-text {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.32;
  letter-spacing: -0.018em;
  margin-bottom: 0.65rem;
  color: var(--text);
  /* Safety net: if upstream label-shortening misses one (long uint256 tokenId,
     deep contract names, raw hex), break instead of pushing past the card. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.explorer-link {
  font-family: var(--mono);
  font-size: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────
   Warnings
   ───────────────────────────────────────────────────────────────── */
.warning-box {
  background: var(--amber-soft);
  border: 1px solid var(--amber-edge);
  border-left: 2px solid var(--amber);
  border-radius: var(--r-sharp);
  padding: 0.85rem 1.05rem;
  color: var(--amber);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.55;
  margin-bottom: 0.65rem;
  animation: fadeIn 0.3s var(--ease);
  /* Preserve newlines for multi-line warnings (e.g. uncatalogued-event
     warning lists each topic0+emitter on its own line). */
  white-space: pre-wrap;
  word-break: break-word;
}
.warning-box a {
  color: inherit;
  text-decoration: underline;
}
.warning-box.critical {
  background: var(--rust-soft);
  border-color: var(--rust-edge);
  border-left-color: var(--rust);
  color: var(--rust);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
   Balance card
   ───────────────────────────────────────────────────────────────── */
.balance-card { animation-delay: 0.06s; }

.balance-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.balance-table thead th {
  text-align: left;
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.45rem 1.2rem 0.55rem 0;
  border-bottom: 1px solid var(--rule-bright);
}
.balance-table td {
  padding: 0.7rem 1.2rem 0.7rem 0;
  border-bottom: 1px dashed var(--rule);
}
.balance-table tr:last-child td { border-bottom: none; }
/* ─────────────────────────────────────────────────────────────────
   Token / chain icons (hotlinked from Trust Wallet CDN)
   ───────────────────────────────────────────────────────────────── */
.token-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-deep);
  vertical-align: middle;
  display: inline-block;
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--rule-bright), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.token-icon-xs { width: 13px; height: 13px; box-shadow: 0 0 0 1px var(--rule-bright); }
.token-icon-sm { width: 14px; height: 14px; }
.token-icon-md { width: 22px; height: 22px; }
.token-icon-lg { width: 28px; height: 28px; }

.bal-token { color: var(--text); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.45rem; }
.bal-token-addr { color: var(--text-muted); font-weight: 400; font-size: 0.85em; }
#infoValue, #infoGas { display: inline-flex; align-items: center; gap: 0.4rem; }
#chainBadge { display: inline-flex !important; align-items: center; gap: 0.35rem; }
.bridge-flow-chain-row { display: inline-flex; align-items: center; gap: 0.4rem; justify-content: center; }
.history-chain         { display: inline-flex; align-items: center; gap: 0.4rem; }
.bal-sent   { color: var(--rust); white-space: nowrap; }
.bal-recv   { color: var(--sage); white-space: nowrap; }
.bal-before { color: var(--text-muted); white-space: nowrap; font-feature-settings: 'tnum'; }
.bal-after  { color: var(--text); white-space: nowrap; font-feature-settings: 'tnum'; font-weight: 500; }
.bal-net    { font-weight: 700; white-space: nowrap; font-size: 0.9rem; }
.bal-in  { color: var(--sage); }
.bal-out { color: var(--rust); }
.bal-reason { white-space: nowrap; }

.reason-pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-edge);
}
.reason-pill.reason-bridge_amount { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-edge); }
.reason-pill.reason-bridge_fee,
.reason-pill.reason-swap_in {
  background: rgba(163, 157, 148, 0.06);
  color: var(--text-muted);
  border-color: var(--rule-bright);
}
.reason-pill.reason-swap_out,
.reason-pill.reason-bridge_received {
  background: var(--sage-soft);
  color: var(--sage);
  border-color: var(--sage-edge);
}

/* ─────────────────────────────────────────────────────────────────
   Batch Details card (multi-recipient/sender txs)
   ───────────────────────────────────────────────────────────────── */
.batch-card { animation-delay: 0.08s; }

.batch-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}

.batch-pill {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--rule-bright);
  background: var(--bg-deep);
}
.batch-pill.batch-out   { color: var(--accent); border-color: var(--accent-edge); background: var(--accent-soft); }
.batch-pill.batch-in    { color: var(--sage);   border-color: var(--sage-edge);   background: var(--sage-soft); }
.batch-pill.batch-mixed { color: var(--amber);  border-color: var(--amber-edge);  background: var(--amber-soft); }

.vrf-card { margin-bottom: 1rem; }
.vrf-summary {
  display: flex; flex-direction: column; gap: 0.55rem;
  font-family: var(--sans); font-size: 0.85rem; color: var(--text-muted);
  line-height: 1.55;
}
.vrf-pill {
  align-self: flex-start;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--rule-bright);
  background: var(--bg-deep);
}
.vrf-pill.vrf-won     { color: var(--sage);   border-color: var(--sage-edge);   background: var(--sage-soft); }
.vrf-pill.vrf-empty   { color: var(--amber);  border-color: var(--amber-edge);  background: var(--amber-soft); }
.vrf-pill.vrf-pending { color: var(--amber);  border-color: var(--amber-edge);  background: var(--amber-soft); }
.vrf-note { color: var(--text-muted); }
.vrf-note a { color: var(--accent); text-decoration: underline; }
.vrf-rewards {
  list-style: none; margin: 0; padding: 0.4rem 0 0.4rem 0.9rem;
  border-left: 2px solid var(--rule-bright);
}
.vrf-rewards-user  { border-left-color: var(--sage-edge); }
.vrf-rewards-other { border-left-color: var(--amber-edge); }
.vrf-rewards li {
  font-family: var(--mono); font-size: 0.85rem; color: var(--text);
  padding: 0.15rem 0;
}
.vrf-rewards a { color: var(--accent); text-decoration: underline; }

/* ── Collection Offer escrow status card ─────────────────────────── */
.co-card { margin-bottom: 1rem; }
.co-body {
  display: flex; flex-direction: column; gap: 0.6rem;
  font-family: var(--sans); font-size: 0.85rem; color: var(--text-muted);
  line-height: 1.55;
}
.co-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.co-pill {
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--rule-bright);
  background: var(--bg-deep);
}
.co-pill.co-done    { color: var(--sage);  border-color: var(--sage-edge);  background: var(--sage-soft); }
.co-pill.co-pending { color: var(--amber); border-color: var(--amber-edge); background: var(--amber-soft); }
.co-pill.co-reject  { color: var(--rose, #e06c75); border-color: var(--rose-edge, rgba(224,108,117,0.4)); background: var(--rose-soft, rgba(224,108,117,0.1)); }
.co-phase { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.04em; }
.co-note { color: var(--text-muted); }
.co-note strong { color: var(--text); font-weight: 700; }
.co-muted { color: var(--text-faint, var(--text-muted)); font-size: 0.8rem; }
.co-steps { list-style: none; margin: 0.2rem 0; padding: 0.4rem 0 0.4rem 0.2rem; }
.co-steps li {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.8rem; color: var(--text);
  padding: 0.22rem 0;
}
.co-step-mark { width: 1rem; text-align: center; font-weight: 700; }
.co-step-done .co-step-mark { color: var(--sage); }
.co-step-todo .co-step-mark { color: var(--text-muted); }
.co-step-todo { color: var(--text-muted); }
.co-step-label { flex: 1; }
.co-steps a { color: var(--accent); text-decoration: underline; }
.co-this { color: var(--accent); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; }
.co-note a { color: var(--accent); text-decoration: underline; }

.batch-tallies {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.batch-tallies strong { color: var(--text); font-weight: 700; }

/* Items column wraps when there are many tokenId chips, which makes
   the short cells (Token, Kind, Out, In) sit at the top by default —
   middle-align them all so the row reads as a single record. */
.batch-table td { vertical-align: middle; }
/* .bal-token (used globally) sets display: inline-flex on the cell, which
   strips the td of its table-cell display and breaks vertical-align: middle
   when the Items column wraps onto multiple rows. Restore table-cell. */
.batch-table td.bal-token { display: table-cell; }
.batch-table .batch-kind {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.batch-table .batch-items {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.85;
  max-width: 420px;
}
.batch-table .batch-items .batch-token-id { margin-bottom: 0.18rem; }
.batch-token-id {
  display: inline-block;
  padding: 0.08rem 0.4rem;
  margin-right: 0.25rem;
  border-radius: 4px;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  color: var(--text);
}
.batch-token-more {
  color: var(--text-muted);
  font-style: italic;
}
.batch-items-toggle {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.08rem 0.5rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--rule-bright);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.batch-items-toggle:hover { background: var(--accent-soft); border-color: var(--accent-edge); }

/* Per-counterparty breakdown rendered below the main per-token table —
   compact "who received what" rows so users get the per-party totals
   without scrolling the step list. */
.batch-parties {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--rule);
}
.batch-parties-header {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.batch-parties-count {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.02rem 0.4rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 600;
}
.batch-parties-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.batch-party-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text);
  padding: 0.3rem 0.55rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: 4px;
  flex-wrap: wrap;
}
.batch-party-direction {
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.batch-party-arrow { color: var(--text-muted); }
.batch-party-addr {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
}
.batch-party-addr:hover { text-decoration: underline; }

/* Chip-style anchor wrapping a batch tokenId — preserves the original chip
   look while making the whole pill clickable. The hover treatment hints
   that it leads off-site. */
.batch-token-link {
  text-decoration: none;
  display: inline-block;
}
.batch-token-link:hover { text-decoration: none; }
.batch-token-link:hover .batch-token-id {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Marketplace link badge appended to NFT step explanations + primary
   value when single-NFT. Subtle until hover, like other inline links. */
.nft-marketplace-link {
  margin-left: 0.45rem;
  padding: 0.08rem 0.4rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--rule-bright);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.nft-marketplace-link:hover {
  background: var(--accent-soft);
  border-color: var(--accent-edge);
  text-decoration: none;
}
.primary-value-link { font-size: inherit; padding: 0; border: none; margin-left: 0; }
.primary-value-link:hover { background: transparent; }

/* ─────────────────────────────────────────────────────────────────
   Diagnosis (failed txs)
   ───────────────────────────────────────────────────────────────── */
.diagnosis-card {
  background: var(--rust-soft);
  border: 1px solid var(--rust-edge);
  border-left: 2px solid var(--rust);
}
.diagnosis-card .section-label > span { color: var(--rust); }
.diagnosis-card .section-label::before { color: var(--rust); }
.diagnosis-row {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin-top: 0.45rem;
}
.diagnosis-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  white-space: nowrap;
}
.diagnosis-value {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--rust);
  word-break: break-all;
}

/* ─────────────────────────────────────────────────────────────────
   Detail grid
   ───────────────────────────────────────────────────────────────── */
.detail-section { animation-delay: 0.08s; }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule-bright);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r-sharp);
  overflow: hidden;
}

.detail-cell {
  background: var(--bg-soft);
  padding: 0.95rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: background 0.15s var(--ease);
}
.detail-cell:hover { background: var(--bg-elevated); }

.detail-key {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.detail-val {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  word-break: break-all;
  line-height: 1.45;
}
.detail-val.mono { font-family: var(--mono); font-size: 0.78rem; }
.detail-val a { color: var(--accent); }
.detail-cell-full { grid-column: 1 / -1; }

/* ─────────────────────────────────────────────────────────────────
   Bridge card & flow
   ───────────────────────────────────────────────────────────────── */
.bridge-card { animation-delay: 0.1s; }

.bridge-status { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.bridge-status .badge { font-size: 0.62rem; padding: 0.28rem 0.6rem; }

.bridge-detail {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 0.55rem;
  line-height: 1.65;
}
.bridge-detail a { color: var(--accent); }
.bridge-fee { color: var(--accent); font-weight: 600; }

/* Bridge flow diagram */
.bridge-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.3rem 0.5rem 1.45rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px dashed var(--rule-bright);
  overflow-x: auto;
  white-space: nowrap;
}
.bridge-flow-chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  min-width: 90px;
}
.bridge-flow-chain-name {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.012em;
}
.bridge-flow-amount {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.bridge-flow-arrow {
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
}
.bridge-flow-protocol-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.bridge-flow-protocol {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: var(--accent-soft);
  padding: 0.28rem 0.65rem;
  border-radius: var(--r-sharp);
  border: 1px solid var(--accent-edge);
}
.bridge-flow-fee {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────────────────
   Step timeline
   ───────────────────────────────────────────────────────────────── */
.flow-section { animation-delay: 0.12s; }

.flow-timeline {
  position: relative;
  padding-left: 2.1rem;
}
.flow-timeline::before {
  content: '';
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--rule-bright), var(--rule-bright) 70%, transparent);
}

.step {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-sharp);
  padding: 0.85rem 1rem;
  margin-bottom: 0.55rem;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.step:hover {
  border-color: var(--rule-bright);
  background: var(--bg-elevated);
}

/* Primary step */
.step-primary {
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-soft) 0%, var(--bg-soft) 30%);
}

.step.step-routing-collapsed { display: none !important; }

.routing-toggle {
  background: transparent;
  border: 1px dashed var(--rule-bright);
  border-radius: var(--r-sharp);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  margin-bottom: 0.55rem;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.routing-toggle:hover { color: var(--accent); border-color: var(--accent-edge); }

/* Timeline marker */
.step::before {
  content: '';
  position: absolute;
  left: -1.5rem; top: 1.05rem;
  width: 7px; height: 7px;
  background: var(--text-dim);
  box-shadow: 0 0 0 3px var(--bg);
  border-radius: 50%;
}
.step-outgoing::before { background: var(--rust); box-shadow: 0 0 0 3px var(--bg), 0 0 8px var(--rust-soft); }
.step-incoming::before { background: var(--sage); box-shadow: 0 0 0 3px var(--bg), 0 0 8px var(--sage-soft); }
.step-bridge::before   { background: var(--accent); box-shadow: 0 0 0 3px var(--bg), 0 0 8px var(--accent-glow); }
.step-fee::before      { background: var(--amber); box-shadow: 0 0 0 3px var(--bg), 0 0 8px var(--amber-soft); }
.step-internal::before { background: var(--text-faint); box-shadow: 0 0 0 3px var(--bg); }

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
  gap: 0.5rem;
}
.step-number {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.step-source {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--text-muted);
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  padding: 0.18rem 0.5rem;
  border-radius: var(--r-sharp);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.step-explanation {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.step-explanation .token-icon { transform: translateY(2px); }
.step-explanation > span { flex: 1; min-width: 0; }
.step-addresses {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.45rem;
}
.step .bridge-detail { font-size: 0.84rem; margin-top: 0.45rem; }

/* ─────────────────────────────────────────────────────────────────
   Function call (advanced — collapsed)
   ───────────────────────────────────────────────────────────────── */
.fn-signature {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.2rem;
  word-break: break-all;
}
.fn-selector {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fn-args-table {
  width: 100%;
  border-collapse: collapse;
}
.fn-args-table tr { border-bottom: 1px dashed var(--rule); }
.fn-args-table tr:last-child { border-bottom: none; }
.fn-arg-key {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 0.45rem 0.85rem 0.45rem 0;
  white-space: nowrap;
  vertical-align: top;
  width: 1%;
  text-transform: lowercase;
}
.fn-arg-key::after { content: ':'; color: var(--accent); margin-left: 0.2em; }
.fn-arg-val {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text);
  padding: 0.45rem 0;
  word-break: break-all;
}
.fn-arg-addr { color: var(--accent); cursor: default; }
.fn-arg-hint { color: var(--text-muted); font-size: 0.62rem; }

/* ─────────────────────────────────────────────────────────────────
   Tx hash row
   ───────────────────────────────────────────────────────────────── */
.tx-hash-display {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
}
.tx-hash-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 380px;
}

.address-block {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.address-full {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────────
   Advanced collapsible (Function Call, Raw Data, Failures)
   ───────────────────────────────────────────────────────────────── */
.advanced-section {
  background: transparent;
  border: 1px dashed var(--rule-bright);
  border-radius: var(--r-sharp);
  margin-bottom: 0.6rem;
  animation: fadeIn 0.45s var(--ease) 0.18s both;
}
.advanced-section[open] {
  background: var(--bg-soft);
  border-style: solid;
}
.advanced-toggle {
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  transition: color 0.15s var(--ease);
}
.advanced-toggle:hover { color: var(--text); }
.advanced-toggle::before {
  content: '+';
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.2s var(--ease);
  display: inline-block;
  width: 0.7rem;
  text-align: center;
}
details[open] .advanced-toggle::before { content: '−'; }
.advanced-toggle::-webkit-details-marker { display: none; }
.advanced-prefix {
  display: inline-block;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-edge);
  padding: 0.12rem 0.4rem;
  border-radius: var(--r-sharp);
  margin-right: 0.2rem;
}
.advanced-hint { color: var(--text-dim); font-size: 0.6rem; letter-spacing: 0.1em; }
.advanced-body { padding: 0 1rem 1rem; }

.raw-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 1rem 0.6rem;
}
.raw-body {
  padding: 0 1rem 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 420px;
  overflow-y: auto;
  line-height: 1.55;
}
.raw-body::-webkit-scrollbar { width: 6px; }
.raw-body::-webkit-scrollbar-track { background: var(--bg-deep); }
.raw-body::-webkit-scrollbar-thumb { background: var(--rule-bright); border-radius: 3px; }
.raw-body::-webkit-scrollbar-thumb:hover { background: var(--accent-edge); }

/* ─────────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────────── */
.foot {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.foot-dim { color: var(--text-dim); }

/* ─────────────────────────────────────────────────────────────────
   Copy button
   ───────────────────────────────────────────────────────────────── */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--r-sharp);
  padding: 0;
  margin-left: 0.3rem;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
  position: relative;
  flex-shrink: 0;
}
.copy-btn:hover { color: var(--accent); background: var(--accent-soft); }
.copy-btn svg { width: 13px; height: 13px; }
.detail-cell:hover .copy-btn,
.step-addresses:hover .copy-btn,
.summary-card:hover .copy-btn,
.bridge-card:hover .copy-btn,
.advanced-section:hover .copy-btn,
.history-item:hover .copy-btn { opacity: 1; }

.copy-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-deep);
  border: 1px solid var(--sage-edge);
  color: var(--sage);
  font-family: var(--mono);
  font-size: 0.55rem;
  padding: 0.18rem 0.45rem;
  border-radius: var(--r-sharp);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: fadeIn 0.15s var(--ease);
}

/* ─────────────────────────────────────────────────────────────────
   History
   ───────────────────────────────────────────────────────────────── */
.history-section {
  margin-bottom: 1.75rem;
  animation: fadeIn 0.4s var(--ease);
}
.history-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  cursor: pointer;
  user-select: none;
  border-radius: var(--r-sharp);
  transition: background 0.15s var(--ease);
}
.history-header:hover { background: var(--bg-elevated); }
.history-header:focus-visible { outline: 1px dashed var(--accent-edge); outline-offset: 2px; }
.history-header .section-label { margin-bottom: 0; flex: 1; }
/* Count chip — small monospace number next to "Recent" so collapsed users
   still know how many txs are in the history. */
.history-count {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  padding: 0.12rem 0.45rem;
  border-radius: var(--r-sharp);
  letter-spacing: 0.06em;
}
.history-chevron {
  font-size: 0.7rem;
  color: var(--text-faint);
  transition: transform 0.18s var(--ease), color 0.15s var(--ease);
  display: inline-block;
}
.history-section.is-collapsed .history-chevron { transform: rotate(-90deg); }
.history-header:hover .history-chevron { color: var(--accent); }
.history-section.is-collapsed .history-list { display: none; }
.history-section.is-collapsed .history-header { margin-bottom: 0; }

.history-clear-btn {
  background: none;
  border: 1px dashed var(--rule-bright);
  border-radius: var(--r-sharp);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.history-clear-btn:hover { color: var(--rust); border-color: var(--rust-edge); }

.history-list { display: flex; flex-direction: column; gap: 0.4rem; }
.history-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-sharp);
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.history-item:hover {
  border-color: var(--accent-edge);
  background: var(--bg-elevated);
}

.history-chain {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-edge);
  padding: 0.18rem 0.55rem;
  border-radius: var(--r-sharp);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  flex-shrink: 0;
}
.history-summary {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.history-time {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.1em;
}

/* ─────────────────────────────────────────────────────────────────
   Slow hint + bridge cross-link
   ───────────────────────────────────────────────────────────────── */
.slow-hint {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.85rem;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.bridge-crosslink-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-edge);
  border-radius: var(--r-sharp);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  margin-top: 0.55rem;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.bridge-crosslink-btn:hover { background: rgba(212, 100, 42, 0.18); border-color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────
   Failure dashboard
   ───────────────────────────────────────────────────────────────── */
.failure-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 400px;
  overflow-y: auto;
  padding: 0 1rem 1rem;
}
.failure-item {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.5rem 0.55rem;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.failure-item:hover { background: var(--bg-elevated); }
.failure-item:last-child { border-bottom: none; }
.failure-time {
  font-size: 0.58rem;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.1em;
}
.failure-hash {
  font-size: 0.68rem;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.failure-error {
  font-size: 0.65rem;
  color: var(--rust);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.failure-count {
  font-size: 0.58rem;
  color: var(--text-dim);
  margin-left: auto;
  letter-spacing: 0.1em;
}

/* ─────────────────────────────────────────────────────────────────
   Utilities & animations
   ───────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Step stagger */
.step { animation: fadeIn 0.32s var(--ease) both; }
.step:nth-child(1) { animation-delay: 0s; }
.step:nth-child(2) { animation-delay: 0.04s; }
.step:nth-child(3) { animation-delay: 0.08s; }
.step:nth-child(4) { animation-delay: 0.12s; }
.step:nth-child(5) { animation-delay: 0.16s; }
.step:nth-child(6) { animation-delay: 0.20s; }
.step:nth-child(7) { animation-delay: 0.24s; }
.step:nth-child(8) { animation-delay: 0.28s; }
.step:nth-child(n+9) { animation-delay: 0.32s; }

/* ─────────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .shell { padding: 2.25rem 1rem 2.25rem; }
  .input-row { flex-direction: column; }
  .select-wrap { width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-cell-full { grid-column: 1; }
  .summary-text { font-size: 1.18rem; }
  .title { font-size: 1.85rem; }
  .flow-timeline { padding-left: 1.6rem; }
  .step::before { left: -1.25rem; }
  .tx-hash-text { max-width: 200px; }
  .fn-arg-key { display: block; padding-bottom: 0; }
  .fn-arg-val { display: block; padding-top: 0.1rem; }
  .copy-btn { opacity: 1; }
  .history-time { display: none; }
  .masthead-meta { font-size: 0.55rem; }
  .bridge-flow-chain-name { font-size: 0.95rem; }
  .advanced-hint { display: none; }
  /* Mode tabs: scroll horizontally instead of overflowing */
  .mode-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .mode-tabs::-webkit-scrollbar { display: none; }
  .mode-tab { flex-shrink: 0; }
  /* Balance / batch tables: allow horizontal scroll */
  .balance-card { overflow-x: auto; }
  /* Floor tracker head: allow wrapping on narrow screens */
  .fl-head { flex-wrap: wrap; }
  .fl-meta { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .badges { gap: 0.3rem; }
  .badge { font-size: 0.55rem; padding: 0.22rem 0.5rem; letter-spacing: 0.1em; }
  .section-label::after { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Diff toolbar — sticky bar at the top of the wallet view, driving
   page-wide diff (range compare) mode. Three states, one component:
     [data-state="collapsed"] → small "Compare snapshot" pill
     [data-state="expanded"]  → form with date/time + block# tabs
     [data-state="active"]    → persistent banner with [Edit] [Clear]
   ───────────────────────────────────────────────────────────────── */
.diff-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 0 1rem 0;
  /* The toolbar itself is transparent; each state's child renders the box.
     This lets a `position: sticky` container sit above content without an
     opaque strip wherever the toolbar isn't actively visible. */
  background: var(--bg);
  padding: 0.5rem 0;
}

/* Collapsed pill */
.diff-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule-bright);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}
.diff-pill:hover {
  border-color: var(--accent-edge);
  color: var(--text);
  background: var(--accent-soft);
}
.diff-pill-icon {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* Expanded form */
.diff-form {
  background: var(--bg-soft);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.diff-form-tabs { display: flex; gap: 0.4rem; }
.diff-form-tab {
  background: transparent;
  border: 1px solid var(--rule-bright);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-sharp);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.diff-form-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent-edge);
  color: var(--accent);
}
.diff-form-body {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.diff-form-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.diff-form-body input[type="datetime-local"],
.diff-form-body input[type="number"] {
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--r-sharp);
  outline: none;
  color-scheme: dark;
}
.diff-form-body input:focus { border-color: var(--accent-edge); }
.diff-form-actions { display: flex; gap: 0.5rem; align-items: center; }
.diff-arrow {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
}
.diff-apply-btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #0c0c16;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-sharp);
  cursor: pointer;
  transition: opacity 0.15s var(--ease);
}
.diff-apply-btn:hover { opacity: 0.85; }
.diff-apply-btn:disabled { opacity: 0.55; cursor: progress; }
.diff-cancel-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-sharp);
  cursor: pointer;
}
.diff-cancel-btn:hover { color: var(--text); border-color: var(--rule-bright); }

/* Active banner */
.diff-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: linear-gradient(180deg, var(--accent-soft), transparent 200%);
  border: 1px solid var(--accent-edge);
  border-radius: var(--r);
  padding: 0.75rem 1rem;
  flex-wrap: wrap;
}
.diff-banner-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: var(--bg-soft);
  border: 1px solid var(--accent-edge);
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sharp);
  white-space: nowrap;
}
.diff-banner-text {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text);
  min-width: 0;
}
.diff-banner-text strong { color: var(--accent); font-weight: 700; }
.diff-banner-actions { display: inline-flex; gap: 0.4rem; }
.diff-edit-btn, .diff-clear-btn {
  background: transparent;
  border: 1px solid var(--rule-bright);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-sharp);
  cursor: pointer;
}
.diff-edit-btn:hover { color: var(--accent); border-color: var(--accent-edge); }
.diff-clear-btn:hover { color: #f87171; border-color: rgba(248,113,113,0.4); }

/* Diff-mode card overlays — applied to net worth + preview rows */
.wallet-net-diff {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--mono);
}
.wallet-net-before {
  font-size: 1.05rem;
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.15);
}
.wallet-net-after {
  font-size: 1.45rem;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.018em;
}
.wallet-net-delta {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 0.25rem;
  color: var(--text-muted);
}
.wallet-net-delta.is-up   { color: #4ade80; }
.wallet-net-delta.is-down { color: #f87171; }

/* Holdings preview rows in diff mode: before → after with delta pill */
.preview-row-diff .diff-before {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.15);
}
.preview-row-diff .diff-after {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text);
  font-weight: 600;
}
.diff-amount {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
}
.diff-in    { color: #4ade80; }
.diff-out   { color: #f87171; }
.diff-neutral { color: var(--text-faint); }

/* NFT preview cards in diff mode get a small colored ring */
.nft-preview-diff.is-up   { border-color: rgba(74, 222, 128, 0.35); }
.nft-preview-diff.is-down { border-color: rgba(248, 113, 113, 0.35); }

.defi-row-diff { background: var(--accent-soft); }
.defi-subhead-note { color: var(--text-faint); font-weight: 400; font-size: 0.62rem; }

/* Modal diff styling — re-uses the diff-in / diff-out / diff-neutral colors
   defined above so the modal's before/after columns match the inline rows.
   Use higher-specificity selectors here because `.hold-amount` (defined later
   in this file) would otherwise win the color cascade tie-break. */
.modal-diff-before, .modal-before {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.18);
  font-family: var(--mono);
}
.modal-diff-after, .modal-after {
  color: var(--text);
  font-family: var(--mono);
  font-weight: 600;
}
.modal-diff-delta {
  font-family: var(--mono);
  font-weight: 700;
}
.modal-diff-delta.is-up   { color: #4ade80; }
.modal-diff-delta.is-down { color: #f87171; }

/* Bump specificity so .hold-amount.diff-in (etc.) gets the right color in
   the Holdings modal's Change column — single-class selectors lose to the
   later-defined `.hold-amount` rule due to source-order tie-breaks. */
.modal-table td.diff-in,
.tc-modal .diff-in    { color: #4ade80 !important; }
.modal-table td.diff-out,
.tc-modal .diff-out   { color: #f87171 !important; }
.modal-table td.diff-neutral,
.tc-modal .diff-neutral { color: var(--text-faint) !important; }

/* NFT modal cards in diff mode: small border ring matching direction. */
.nft-modal-card-diff { position: relative; }
.nft-modal-in    { border-color: rgba(74,222,128,0.4) !important; }
.nft-modal-out   { border-color: rgba(248,113,113,0.4) !important; }
.nft-modal-delta {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────
   Wallet inspector — HERO STRIP + asymmetric 60/40 two-column body
   ─────────────────────────────────────────────────────────────────

   The wallet view is built as a forensics report, not a marketing
   dashboard: dense, asymmetric, no forced equal heights, no half-empty
   "snapshot" boxes. Layout reads top→bottom as:

     ┌─ HERO STRIP ──────────────────────────────────────────┐
     │ identity (chain · name · address) + 4 KPI tiles       │
     └───────────────────────────────────────────────────────┘
     ┌─ WIDE COL (60%) ────────┐ ┌─ NARROW COL (40%) ──────┐
     │ Token Holdings           │ │ NFT Collections (chips)  │
     │                          │ │ DeFi Positions           │
     └──────────────────────────┘ └──────────────────────────┘
     ┌─ Recent Transactions (full width) ────────────────────┐
     └───────────────────────────────────────────────────────┘
*/

/* ── Hero strip ── */
.wallet-hero {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r);
  margin-bottom: 1.25rem;
  overflow: hidden;
  animation: fadeIn 0.5s var(--ease) both;
}
.wallet-hero-edge {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-hot));
  pointer-events: none;
}
.wallet-hero-identity {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 1.5rem 1.15rem 1.65rem;
}
.wallet-hero-id-col {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  flex: 1;
}
.wallet-hero-tag-row { display: flex; align-items: stretch; gap: 0.5rem; flex-wrap: wrap; }
/* Both chips inside the hero row get the SAME height + flex centering of
   their own text — chain-tag had legacy `align-self: flex-start` and a
   `margin-bottom`, plus `display: inline-block` which stretched its box
   differently than the contract chip. Forcing both to inline-flex with
   identical sizing kills the optical misalignment. */
.wallet-hero-tag-row .wallet-chain-tag,
.wallet-hero-tag-row .wallet-flag-inline {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 22px;
  padding: 0 0.55rem;
  margin: 0;
  line-height: 1;
  box-sizing: border-box;
}
/* Contract-name heading variant — slightly tighter than RNS-name heading
   since contract names are usually multi-word. */
.wallet-name-contract {
  /* Inherits .wallet-name typography; tweak only if needed */
}
.wallet-hero-name {
  font-family: var(--sans);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.wallet-hero-name .wallet-name { font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit; }
.wallet-hero-addr {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-muted);
  text-decoration: none;
  word-break: break-all;
  transition: color 0.15s var(--ease);
}
.wallet-hero-addr:hover { color: var(--accent); }
.wallet-hero-addr-icon { color: var(--text-faint); font-size: 0.7rem; }
.wallet-hero-addr:hover .wallet-hero-addr-icon { color: var(--accent); }
/* Inline variant — used inside the hero tag-row alongside .wallet-chain-tag.
   Match its typography and padding exactly so the two chips read as a row of
   equal pills, not a misaligned mismatch. */
.wallet-flag-inline {
  margin: 0;
  font-size: 0.58rem;
  padding: 0.18rem 0.55rem;
  line-height: 1;
}

/* The section number tag (01 / WALLET) tucked into the hero's top-right
   corner — mirrors the numbered section labels used elsewhere on the
   page, but adapted to live inside the hero rather than above it. */
.wallet-hero-section-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  user-select: none;
}
.wallet-hero-section-num { color: var(--accent); }
.wallet-hero-section-sep { color: var(--text-faint); }

/* KPI grid — 4 equal tiles, separated by hairline rules. The Net Worth
   tile gets a subtle accent highlight to anchor the eye. */
.wallet-hero-kpis {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  border-top: 1px solid var(--rule);
  background: var(--bg-deep);
}
.wallet-hero-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.95rem 1.25rem 1rem;
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.wallet-hero-kpi:last-child { border-right: none; }
.wallet-hero-kpi-primary {
  background:
    linear-gradient(180deg, var(--accent-soft) 0%, transparent 80%);
}
.kpi-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kpi-value {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.kpi-value-main {
  font-size: 1.45rem;
  color: var(--accent);
}
.kpi-sub {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-sub-mono { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kpi-sub-dim  { color: var(--text-faint); margin: 0 0.15rem; }
.kpi-sub.is-up   { color: #4ade80; }
.kpi-sub.is-down { color: #f87171; }

/* Diff-mode net worth: small "before" struck through, big "after" in accent */
.kpi-value-diff {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.kpi-value-diff .kpi-before {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.18);
}
.kpi-value-diff .kpi-arrow {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.85rem;
}

/* ── Two-column body ──
   Holdings (wide) and DeFi (narrow) sit side by side and MUST stay the
   same height, regardless of how many LPs the user has. We enforce
   this with `align-items: stretch` + flex columns inside, and cap the
   DeFi LP preview at 3 in JS so natural content can't push past the
   Holdings card's natural height. The view-all button pins to the
   card bottom via `margin-top: auto` below. */
.wallet-columns {
  display: grid;
  grid-template-columns: 1.55fr 1fr;  /* ~60/40 split */
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  align-items: stretch;
}
.wallet-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.wallet-col > .wallet-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  flex: 1;  /* fill the column so paired cards equalize */
}
/* Push the view-all button to the bottom of the card body so cards in
   the same row always end at the same line, regardless of how many
   rows of real content live above it. */
.wallet-col > .wallet-card .view-all-btn { margin-top: auto; }
.wallet-full { /* spans the whole row outside the columns */ }

@media (max-width: 1024px) {
  .wallet-columns { grid-template-columns: 1fr; }
  .wallet-hero-kpis { grid-template-columns: repeat(2, 1fr); }
  .wallet-hero-kpi:nth-child(2n) { border-right: none; }
  .wallet-hero-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

/* ── Legacy aliases — kept so older code paths still work while we
   migrate. Any remaining .wallet-grid usage falls back to the same
   2-col grid shape but without the forced stretching. ── */
.wallet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  align-items: start;
}
.wallet-grid > .wallet-card { margin-bottom: 0 !important; }

/* Search-label tag (RONIN ONLY etc.) */
.lbl-divider { color: var(--text-faint); padding: 0 0.2rem; }
.lbl-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-edge);
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-sharp);
  margin-left: 0.35rem;
  vertical-align: 0.05em;
}

/* Preview card (Holdings + NFTs short list, with View all → modal) */
.preview-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.preview-card-head .section-label { margin-bottom: 0; flex: 0 1 auto; }
.preview-card-head .section-label::after { display: none; }
.preview-card-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.preview-card-meta .meta-count { color: var(--text); }
.preview-card-meta .meta-total { color: var(--accent); font-weight: 700; }
.preview-card-meta .dot { color: var(--text-faint); }

.preview-list { display: flex; flex-direction: column; gap: 0.35rem; }
.preview-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-sharp);
  padding: 0.6rem 0.85rem;
}
.preview-row.hold-suspicious { opacity: 0.55; }
.preview-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.preview-row-top, .preview-row-bot {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: baseline;
}
.preview-row-top .hold-sym {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
/* Token amount now lives in the prominent top row (alongside symbol);
   USD value moves below in muted weight. The user-mental-model is in token
   units, so we lead with the count and treat USD as a derivation. */
.preview-row-amount {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.preview-row-bot .hold-name {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.preview-row-usd {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.nft-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
}
.nft-preview-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-sharp);
  padding: 0.55rem 0.7rem;
}
.nft-preview-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nft-preview-name { font-family: var(--mono); font-weight: 700; font-size: 0.78rem; color: var(--text); }
.nft-preview-count { font-family: var(--mono); font-size: 0.65rem; color: var(--accent); font-weight: 600; }

/* ── NFT chip row — compact, dense, wraps naturally ───────────────
   Each chip is a small pill: [icon] SYM ×COUNT. Lives in the narrow
   right column so chips fit 2-3 per row. Way better density than the
   old 2×2 card grid that gave each collection 80% empty real estate. */
.nft-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.nft-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem 0.35rem 0.4rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
  cursor: default;
}
.nft-chip:hover {
  border-color: var(--accent-edge);
  background: var(--accent-soft);
}
.nft-chip .nft-chip-icon img,
.nft-chip .nft-chip-icon .token-icon {
  width: 18px; height: 18px; flex-shrink: 0;
}
.nft-chip-sym {
  font-weight: 700;
  letter-spacing: 0.02em;
  max-width: 9ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nft-chip-count {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
/* Diff-mode chip variants — slight tint + small delta badge */
.nft-chip.is-up   { border-color: rgba(74, 222, 128, 0.35); }
.nft-chip.is-down { border-color: rgba(248, 113, 113, 0.35); }
.nft-chip.is-neutral { opacity: 0.7; }
.nft-chip-count-diff {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  color: var(--text);
  font-weight: 600;
}
.nft-chip-arrow {
  color: var(--text-faint);
  font-size: 0.65rem;
  margin: 0 0.05rem;
}
.nft-chip-delta {
  font-weight: 700;
  font-size: 0.68rem;
  margin-left: 0.15rem;
}

/* When the chip row lives in a full-width strip card below the 2-col body,
   bump the gap slightly so chips breathe a bit more across the wider canvas. */
.nft-chip-row-wide {
  gap: 0.45rem;
}

/* The "+ N more" / "view all" chip — same pill shape as the others, but
   sized as an action button. Lives inline at the end of the row. */
.nft-chip-more {
  background: transparent;
  border-style: dashed;
  border-color: var(--rule-bright);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.nft-chip-more:hover {
  color: var(--accent);
  border-color: var(--accent-edge);
  background: var(--accent-soft);
}

.view-all-btn {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  background: transparent;
  border: 1px dashed var(--rule-bright);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-sharp);
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.view-all-btn:hover {
  color: var(--accent);
  border-color: var(--accent-edge);
  background: var(--accent-soft);
}
.view-all-btn .arrow { margin-left: 0.3rem; transition: transform 0.15s var(--ease); display: inline-block; }
.view-all-btn:hover .arrow { transform: translateX(3px); }

/* ─────────────────────────────────────────────────────────────────
   Modal — used by "View all" buttons for full lists
   ───────────────────────────────────────────────────────────────── */
body.tc-modal-open { overflow: hidden; }
.tc-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(7, 7, 13, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 1.5rem;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.tc-modal-overlay.tc-modal-visible { opacity: 1; }
.tc-modal {
  background: var(--bg-soft);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r);
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 100, 42, 0.08);
  transform: translateY(8px);
  transition: transform 0.2s var(--ease);
}
.tc-modal-overlay.tc-modal-visible .tc-modal { transform: translateY(0); }
.tc-modal-lg { max-width: 880px; }
.tc-modal-md { max-width: 640px; }
.tc-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--rule-bright);
  gap: 1rem;
}
.tc-modal-titlewrap { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.tc-modal-title {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text);
}
.tc-modal-subtitle {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.tc-modal-close {
  background: transparent;
  border: 1px solid var(--rule-bright);
  color: var(--text-muted);
  width: 32px; height: 32px;
  font-size: 1.2rem;
  font-weight: 400;
  border-radius: var(--r-sharp);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.tc-modal-close:hover {
  color: var(--rust);
  border-color: var(--rust-edge);
  background: var(--rust-soft);
}
.tc-modal-body {
  padding: 1.25rem 1.5rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.modal-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.modal-filter {
  flex: 1;
  min-width: 200px;
  padding: 0.55rem 0.8rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r-sharp);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.78rem;
  outline: none;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.modal-filter:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--accent-glow);
}
.modal-filter::placeholder { color: var(--text-dim); }
.modal-toggle {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
}
.modal-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px; height: 14px;
}
.modal-table tbody tr.is-spam { opacity: 0.5; }

.nft-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.6rem;
}
.nft-modal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-sharp);
  padding: 1rem 0.75rem;
  text-decoration: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--ease);
}
.nft-modal-card:hover {
  border-color: var(--accent-edge);
  background: var(--bg-elevated);
  transform: translateY(-2px);
  text-decoration: none;
}
.nft-modal-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; width: 100%; }
.nft-modal-name {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nft-modal-sym {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nft-modal-count {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .tc-modal { max-height: 88vh; }
  .nft-preview-grid { grid-template-columns: 1fr; }
}

/* Old collapsible — keep so legacy renders don't crash, but should be unused now */
.wallet-collapsible { padding: 0; }
.wallet-collapsible[open] { padding-bottom: 1.25rem; }
.wallet-collapsible-summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.45rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: background 0.15s var(--ease);
}
.wallet-collapsible-summary::-webkit-details-marker { display: none; }
.wallet-collapsible-summary:hover { background: var(--bg-elevated); }
.wallet-collapsible-summary .section-label { margin-bottom: 0; flex: 0 1 auto; }
.wallet-collapsible-summary .section-label::after { display: none; }
.wallet-collapsible-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-variant-numeric: tabular-nums;
}
.wallet-collapsible-meta .meta-count { color: var(--text); }
.wallet-collapsible-meta .meta-total { color: var(--accent); font-weight: 700; }
.wallet-collapsible-meta .dot { color: var(--text-faint); }
.collapsible-arrow {
  color: var(--accent);
  font-size: 0.85rem;
  transition: transform 0.2s var(--ease);
  margin-left: 0.4rem;
}
.wallet-collapsible[open] .collapsible-arrow { transform: rotate(180deg); }
.wallet-collapsible-body { padding: 0 1.45rem; }

/* Native balance row inside the snapshot card */
.wallet-native-row {
  margin-top: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r-sharp);
}
.wallet-native-amount {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.wallet-native-usd {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  border-left: 1px solid var(--rule-bright);
  padding-left: 0.6rem;
  margin-left: 0.2rem;
  font-variant-numeric: tabular-nums;
}

.wallet-net-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

/* ─────────────────────────────────────────────────────────────────
   Wallet inspector — base styles (existing, unchanged below)
   ───────────────────────────────────────────────────────────────── */
.wallet-header,
.wallet-card {
  background: var(--bg-soft);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r);
  padding: 1.35rem 1.45rem;
  margin-bottom: 1.25rem;
  animation: fadeIn 0.5s var(--ease) both;
}

.wallet-id-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.wallet-id-col { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1; }
.wallet-chain-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-edge);
  padding: 0.18rem 0.55rem;
  border-radius: var(--r-sharp);
  align-self: flex-start;
  margin-bottom: 0.15rem;
}
.wallet-name {
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--text);
}
.wallet-addr {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  word-break: break-all;
  text-decoration: none;
}
.wallet-addr:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.wallet-net-worth {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.wallet-net-total {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--accent);
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}
.wallet-net-breakdown {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.wallet-net-breakdown .dot { color: var(--text-faint); margin: 0 0.3rem; }

.wallet-flag {
  margin-top: 0.85rem;
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid var(--amber-edge);
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sharp);
}

/* Multisig chip — distinct accent (brand orange) so it reads as a security/
   governance attribute rather than a generic Contract flag. */
.wallet-flag-multisig {
  color: var(--accent);
  background: rgba(212, 100, 42, 0.10);
  border-color: rgba(212, 100, 42, 0.40);
  cursor: help;
}

.native-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.native-amount {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}

.holdings-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.holdings-table thead th {
  text-align: left;
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  padding: 0.45rem 0.6rem 0.55rem 0;
  border-bottom: 1px solid var(--rule-bright);
}
.holdings-table td {
  padding: 0.7rem 0.6rem 0.7rem 0;
  border-bottom: 1px dashed var(--rule);
  vertical-align: middle;
}
.holdings-table tr:last-child td { border-bottom: none; }
.holdings-table .num-col { text-align: right; font-variant-numeric: tabular-nums; }
.holdings-table .bal-token { display: inline-flex; align-items: center; gap: 0.55rem; }
.hold-sym {
  display: block;
  color: var(--text);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hold-usd {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.84rem;
}
.hold-no-price { color: var(--text-faint); font-weight: 400; }
.hold-suspicious .hold-name,
.hold-suspicious .hold-amount,
.hold-suspicious .hold-usd { color: var(--text-dim); }
.hold-suspicious .hold-sym { color: var(--text-muted); font-weight: 600; }
.scam-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  background: var(--rust-soft);
  border: 1px solid var(--rust-edge);
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
}
.hold-name {
  display: block;
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.66rem;
  font-family: var(--sans);
  margin-top: 0.1rem;
}
.hold-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

.wallet-empty {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
  padding: 1rem 0;
  letter-spacing: 0.04em;
}

.nft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.55rem;
}
.nft-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-sharp);
  padding: 0.6rem 0.75rem;
  text-decoration: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.nft-card:hover {
  border-color: var(--accent-edge);
  background: var(--bg-elevated);
  text-decoration: none;
}
.nft-card-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nft-card-name {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nft-card-count {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.defi-subhead {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin: 0.5rem 0 0.55rem;
}
.defi-subhead:first-child { margin-top: 0; }
/* Small numeric chip after a subhead label, e.g. "Liquidity Pools  3" */
.defi-subhead-count {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-edge);
  padding: 0.06rem 0.4rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  vertical-align: 0.07em;
  text-transform: none;
}
/* Empty-state row inside a DeFi section — same visual rhythm as a real
   row so the card height stays predictable when a section is empty. */
.defi-empty-row {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  padding: 0.7rem 0.85rem;
  background: var(--bg-deep);
  border: 1px dashed var(--rule);
  border-radius: var(--r-sharp);
  margin-bottom: 0.4rem;
}

/* DeFi card uses the same preview-card head as Holdings + NFTs, plus
   the view-all CTA pinned to the bottom by the wallet-col flex layout. */
.defi-card .view-all-btn { margin-top: 0.85rem; }
.defi-modal-body { padding-top: 0.25rem; }
.defi-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-sharp);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.4rem;
}
.defi-row-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.defi-row-name {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}
.defi-row-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.defi-row-sub strong { color: var(--accent); font-weight: 600; }
.defi-lp-pair {
  display: inline-flex;
  align-items: center;
}
.defi-lp-pair .token-icon:nth-child(2) { margin-left: -6px; }
.defi-share {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: 0.4rem;
}
.defi-in-range {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.25);
  padding: 0.05rem 0.4rem;
  border-radius: var(--r-sharp);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
}
.defi-out-range {
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.25);
  padding: 0.05rem 0.4rem;
  border-radius: var(--r-sharp);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
}
.defi-owed {
  color: var(--accent);
  font-size: 0.68rem;
  margin-top: 0.15rem;
}

/* ── Range compare card ── */
.range-mode-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.range-mode-tab {
  background: transparent;
  border: 1px solid var(--rule-bright);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  border-radius: var(--r-sharp);
  transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.range-mode-tab:hover { color: var(--text); }
.range-mode-tab.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-edge);
}
.range-form label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.range-form input[type="datetime-local"] {
  padding: 0.6rem 0.7rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r-sharp);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  color-scheme: dark;
  outline: none;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.range-form input[type="datetime-local"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px var(--accent-glow);
}
.range-resolved {
  font-family: var(--mono);
  font-size: 0.7rem;
  margin: 0.6rem 0 1rem;
  letter-spacing: 0.04em;
}
.range-resolved .muted { color: var(--text-muted); }
.range-resolved strong { color: var(--accent); font-weight: 600; }

.range-hint {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  letter-spacing: 0.02em;
}
.range-form {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.range-form input[type="number"] {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.8rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r-sharp);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.range-form input[type="number"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px var(--accent-glow);
}
.range-arrow {
  color: var(--accent);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.range-btn {
  padding: 0.65rem 1.1rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--r-sharp);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  transition: background 0.15s var(--ease);
  flex-shrink: 0;
}
.range-btn:hover:not(:disabled) { background: var(--accent-hot); }
.range-btn:disabled { opacity: 0.5; cursor: wait; }
.range-error {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--rust);
  background: var(--rust-soft);
  border: 1px solid var(--rust-edge);
  border-radius: var(--r-sharp);
  padding: 0.7rem 0.9rem;
  margin-top: 0.4rem;
}
.range-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}
.range-meta strong { color: var(--accent); font-weight: 600; }
.range-meta .dot { color: var(--text-faint); }
.range-truncated { color: var(--amber); }
.range-table th, .range-table td { padding-right: 1rem; }
.range-tx-head {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin: 1.1rem 0 0.55rem;
}

.tx-source-note {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-dim);
  margin-bottom: 0.85rem;
  letter-spacing: 0.04em;
}
.tx-source-note strong { color: var(--accent); font-weight: 700; }

/* ── Wallet input contract autocomplete ─────────────────────────
   Dropdown that surfaces matching contracts as the user types into
   the wallet input. Pinned to the input via position: absolute on
   its parent (which has position: relative). */
/* Inline (not absolute) — when the dropdown opens it pushes the Inspect
   button DOWN rather than overlapping it. Avoids any z-index / click-target
   confusion where the button became unreachable while the dropdown was open. */
.wallet-autocomplete {
  width: 100%;
  margin: 0.3rem 0 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--bg-deep);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r-sharp);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  max-height: 280px;
  overflow-y: auto;
  box-sizing: border-box;
}
.wallet-ac-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  border-radius: var(--r-sharp);
  transition: background 0.1s var(--ease);
}
.wallet-ac-row:hover, .wallet-ac-row.is-active {
  background: var(--bg-elevated);
}
.wallet-ac-row.is-active {
  outline: 1px solid var(--accent-edge);
}
.wallet-ac-name {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wallet-ac-addr {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Filter bar above the tx list — search input on the left, direction/status
   chips on the right, count indicator on the far right when a filter is on.
   Wraps to a column on narrow screens. */
.txfilter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 0.75rem;
  flex-wrap: wrap;
}
.txfilter-input-wrap {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
}
.txfilter-input {
  width: 100%;
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-sharp);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  outline: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.txfilter-input::placeholder { color: var(--text-faint); }
.txfilter-input:focus {
  border-color: var(--accent);
  background: var(--bg-elevated);
}
.txfilter-clear {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: transparent;
  border: 0;
  color: var(--text-faint);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.txfilter-clear:hover { color: var(--accent); }
.txfilter-chips {
  display: inline-flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.txfilter-chip {
  padding: 0.3rem 0.55rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-sharp);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.txfilter-chip:hover { color: var(--text); border-color: var(--rule-bright); }
.txfilter-chip.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft, rgba(212, 100, 42, 0.08));
}
.txfilter-count {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Historical Token Transfer scan (wallet inspect section 06) ── */
.wallet-history-scan-card {
  margin-top: 12px;
}

.wallet-history-scan-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
  line-height: 1.5;
}

.wallet-history-scan-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.txfilter-apply-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 5px 14px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}

.txfilter-apply-btn:hover { opacity: 0.85; }
.txfilter-apply-btn:disabled { opacity: 0.5; cursor: default; }

.wallet-history-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.wallet-history-loading,
.wallet-history-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 12px 0;
}

.wallet-history-row {
  display: grid;
  grid-template-columns: 140px 1fr 1fr auto 80px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
}

.wallet-history-row-header {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-bright);
}

.wallet-history-time { color: var(--text-dim); }
.wallet-history-relative { display: block; }
.wallet-history-absolute { display: block; font-size: 10px; color: var(--text-faint); }

.wallet-history-token {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.wallet-history-token-link {
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-history-token-link:hover { text-decoration: underline; }

.wallet-history-standard {
  font-size: 9px;
  color: var(--text-faint);
  font-family: var(--mono);
  white-space: nowrap;
}

.wallet-history-flow {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
}

.wallet-history-addr {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-history-amount {
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .wallet-history-row {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
}

/* ── Pixel-art search loader ────────────────────────────────────
   Chunky blocks doing a wave, dark backdrop, accent orange. Sharp
   corners + image-rendering: pixelated where it matters, so it
   reads as intentionally pixelated rather than fuzzy. */
.pixload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 2rem 1rem 1.7rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-sharp);
  /* Subtle scanline backdrop so the pixel aesthetic carries through */
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.012) 0,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 3px
    );
}
.pixload-row {
  display: inline-flex;
  gap: 4px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(212, 100, 42, 0.18));
}
.pixload-cell {
  width: 14px;
  height: 14px;
  background: var(--accent);
  opacity: 0.18;
  /* Hard-edged corners + no transition curve = pixel feel */
  border-radius: 0;
  animation: pixload-wave 1.05s steps(1, end) infinite;
}
.pixload-row .pixload-cell:nth-child(1) { animation-delay: 0.00s; }
.pixload-row .pixload-cell:nth-child(2) { animation-delay: 0.10s; }
.pixload-row .pixload-cell:nth-child(3) { animation-delay: 0.20s; }
.pixload-row .pixload-cell:nth-child(4) { animation-delay: 0.30s; }
.pixload-row .pixload-cell:nth-child(5) { animation-delay: 0.40s; }
.pixload-row .pixload-cell:nth-child(6) { animation-delay: 0.50s; }
.pixload-row .pixload-cell:nth-child(7) { animation-delay: 0.60s; }
.pixload-row .pixload-cell:nth-child(8) { animation-delay: 0.70s; }
@keyframes pixload-wave {
  0%, 100% { opacity: 0.16; transform: translateY(0); background: var(--accent); }
  10%      { opacity: 1.00; transform: translateY(-3px); background: var(--accent); }
  20%      { opacity: 0.72; transform: translateY(0); background: var(--accent-hot, var(--accent)); }
  35%      { opacity: 0.40; }
  60%      { opacity: 0.20; }
}
.pixload-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.pixload-prompt {
  color: var(--accent);
  font-weight: 700;
  /* CRT-style cursor blink */
  animation: pixload-blink 0.9s steps(1, end) infinite;
}
@keyframes pixload-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}
/* Dots get their text content from JS (`_ensurePixloadDots`) so Firefox shows
   them too — CSS `content` keyframes only animate reliably in Chromium/Safari. */
.pixload-dots {
  display: inline-block;
  min-width: 1.4em;
  text-align: left;
}
.pixload-sub {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Inline variant for the Load more button — smaller cells, no padding. */
.pixload-row-inline {
  gap: 3px;
  filter: none;
}
.pixload-row-inline .pixload-cell { width: 8px; height: 8px; }
.tx-load-more-loading { padding: 0.3rem 1.2rem; }

/* Load more — sits at the bottom of the txlist when the server-mode search
   has more pages available. Click loads the next 25 rows. */
.tx-load-more {
  align-self: center;
  margin: 0.6rem 0 0.2rem;
  padding: 0.45rem 1.2rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-sharp);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.tx-load-more:hover { border-color: var(--accent); background: var(--accent-soft); }
.tx-load-more:disabled { opacity: 0.6; cursor: default; }

.txlist { display: flex; flex-direction: column; gap: 0.4rem; }
.txrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-sharp);
  padding: 0.6rem 0.85rem;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.txrow:hover { border-color: var(--rule-bright); background: var(--bg-elevated); }
.txrow.tx-failed { border-left: 2px solid var(--rust); }
.tx-arrow {
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 600;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.tx-arrow.tx-in  { color: var(--sage); }
.tx-arrow.tx-out { color: var(--rust); }
.tx-arrow.tx-self{ color: var(--text-muted); }
.tx-summary { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.tx-summary-top {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text);
}
.tx-counterparty { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-brief {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 600;
}
.tx-summary-bot {
  display: flex;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-items: baseline;
}
/* Relative timestamp chip ("3m ago") — slightly more prominent than the
   absolute UTC stamp next to it, since "how recent" is what people scan for
   first. Hover the chip to see the exact UTC time via title attribute. */
.tx-time-rel {
  color: var(--text);
  font-weight: 700;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  padding: 0.1rem 0.4rem;
  border-radius: var(--r-sharp);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
/* ── Metadata strip — table-like FROM · TO · GAS row below the brief.
   The columns aren't fixed-width (would look rigid in a vertical card
   list) but they read like columns at a glance because of the small
   uppercase labels + monospace values. */
.tx-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.tx-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}
.tx-meta-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.tx-meta-val {
  font-family: var(--mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tx-meta-arrow {
  color: var(--text-faint);
  font-size: 0.7rem;
}
/* Right-side column: gas + decode/explorer buttons stacked, vertically
   centered against the tx summary. Gas used to live in the meta strip with
   margin-left:auto, but on narrow rows it wrapped to a new line and floated
   awkwardly in the middle. Pulling it out gives it a stable spot. */
.tx-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.4rem;
  flex-shrink: 0;
  min-width: 0;
}
.tx-side-gas {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.tx-side-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
/* Per-kind treatment so the user can tell at a glance whether a counterparty
   is a known contract (accent), the wallet itself (muted), or an unknown EOA. */
.tx-party-contract { color: var(--accent); font-weight: 600; }
.tx-party-self     { color: var(--text-muted); font-style: italic; }
.tx-party-eoa      { font-family: var(--mono); color: var(--text); }
/* RNS names (`name.ron`) reverse-resolved from EOA addrs — distinct from
   contract accent so they don't get confused with a known protocol. */
.tx-party-rns      { color: var(--sage); font-weight: 500; }

/* Movements strip — colored token changes ("+0.045 WETH · −12.3 USDC"). */
.tx-meta-movements {
  font-size: 0.74rem;
  margin-top: 0.1rem;
  color: var(--text);
}
.tx-meta-movements .tx-meta-sep { color: var(--text-faint); margin: 0 0.15rem; }
.tx-move {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tx-move-in  { color: #4ade80; }
.tx-move-out { color: #f87171; }

/* Hash row — sits directly below the white brief in smaller muted text so
   the user can spot which tx is which without expanding. */
.tx-summary-hash {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  letter-spacing: 0;
}
.tx-summary-hash .tx-hash-label {
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tx-summary-hash .tx-hash-val {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  user-select: all;
  word-break: break-all;  /* full 66-char hash wraps cleanly on narrow rows */
}
.tx-failed-tag { color: var(--rust); font-weight: 700; }
.tx-decode-link, .tx-explorer-link {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}
.tx-decode-link:hover, .tx-explorer-link:hover { color: var(--accent-hot); text-decoration: underline; }
.tx-explorer-link { color: var(--text-muted); font-size: 0.95rem; }
.tx-explorer-link:hover { color: var(--accent); }

@media (max-width: 720px) {
  .wallet-id-row { flex-direction: column; align-items: flex-start; }
  .wallet-net-worth { text-align: left; }
  .nft-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tx-summary-top { flex-direction: column; gap: 0.1rem; }
  .tx-summary-bot { gap: 0.4rem; }
  .tx-decode-link { font-size: 0.6rem; }
  .tx-side-gas { font-size: 0.65rem; }
}

/* ─────────────────────────────────────────────────────────────────
   INSPECT TOKEN — header card + sub-tabs + holders + transfers
   ───────────────────────────────────────────────────────────────── */

.token-header-card {
  border: 1px solid var(--rule);
  background: var(--bg-card, #14141c);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.token-header-top {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.token-logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex: 0 0 56px;
  background: var(--bg-elev, #1a1a24);
  object-fit: cover;
  border: 1px solid var(--rule);
}

.token-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Sora', sans-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
  background: linear-gradient(135deg, rgba(212, 100, 42, 0.18), rgba(212, 100, 42, 0.06));
}

.token-header-titles { flex: 1; min-width: 0; }

.token-header-name {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 6px;
}

.token-header-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-dim);
}
.token-symbol { font-weight: 500; color: var(--text); }

.token-standard-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text-dim);
}

.token-verified-badge {
  color: #4ade80;
  font-size: 12px;
  font-weight: 500;
}
.token-spam-badge {
  color: #f87171;
  font-size: 12px;
  font-weight: 500;
}

.token-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 24px;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

.token-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.token-stat-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.token-stat-val {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.token-stat-contract .token-stat-val a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-bright);
}
.token-stat-contract .token-stat-val a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Full contract 0x address in the overview header — let it wrap inside its
   stat cell on narrow grids instead of overflowing or being truncated. */
.token-contract-link {
  word-break: break-all;
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .token-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Sub-tabs ── */
.token-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
}

.token-subtab {
  background: transparent;
  border: 0;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.token-subtab:hover { color: var(--text); }
.token-subtab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.token-subpanel { padding: 4px 0; }

/* Inline loader for sub-tab content (holders/transfers panels). Matches the
   global #loading bar + dots animation used elsewhere — same visual language. */
.token-loading {
  text-align: center;
  padding: 36px 16px;
}
.token-loading-bar {
  width: 180px;
  height: 2px;
  background: var(--rule-bright);
  position: relative;
  overflow: hidden;
  margin: 0 auto 0.9rem;
}
.token-loading-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -45%;
  width: 45%; height: 100%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: loaderSlide 1.1s ease-in-out infinite;
}
.token-loading-text {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

/* Secondary line under the animated bar — size-aware wait hint
   ("17,000 NFTs — first-time aggregation can take ~2 minutes…"). */
.token-loading-subtitle {
  margin: 0.7rem auto 0;
  max-width: 480px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
}

.token-list-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

.token-list-total {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 10px;
}

/* ── Holder toolbar ── */
.token-holder-toolbar {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.token-holder-search {
  display: flex;
  flex: 1;
  min-width: 280px;
  gap: 6px;
}

.token-holder-search-input {
  flex: 1;
  background: var(--bg-card, #14141c);
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: inherit;
  padding: 8px 12px;
  font-size: 13px;
}
.token-holder-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.token-holder-search-btn,
.token-export-btn {
  background: var(--bg-card, #14141c);
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: inherit;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.token-holder-search-btn:hover,
.token-export-btn:hover { border-color: var(--accent); color: var(--accent); }

.token-holder-lookup {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--bg-elev, #1a1a24);
}

.token-lookup-msg {
  font-size: 13px;
  color: var(--text-dim);
}
.token-lookup-hit-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4ade80;
  margin-bottom: 8px;
}
.token-lookup-hit-row {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.token-lookup-hit-label {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-bright);
}
.token-lookup-hit-label:hover { color: var(--accent); border-bottom-color: var(--accent); }
.token-lookup-stat strong { color: var(--text); font-weight: 600; }

/* ── Holder rows ──
   Layout: rank | address+label-stack | quantity | percent.
   Min row height is fixed so rows with optional RNS/label don't shift adjacent
   rows around — pages feel calmer when row height is uniform.
*/
.token-holder-row {
  display: grid;
  grid-template-columns: 50px 1fr 180px 120px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  min-height: 56px;       /* uniform height — accommodates the optional secondary line */
}
.token-holder-row:last-child { border-bottom: 0; }
.token-holder-row:hover { background: rgba(212, 100, 42, 0.04); }

.token-holder-row-header {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--rule-bright);
  min-height: 0;          /* header doesn't need the secondary-line allowance */
  padding: 10px 14px;
}
.token-holder-row-header:hover { background: transparent; }

.token-holder-rank {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.token-holder-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Primary identifier — full 0x address, white, monospaced. Always present.
   Single-line — relies on the wide token-active layout giving the address
   column enough room (~380px) to render 42 mono chars on one line. */
.token-holder-address {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-bright);
  display: inline-block;
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
}
.token-holder-address:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Narrow viewport fallback — drop to short address so the column doesn't
   blow out. We still link to the full wallet inspector on click. */
@media (max-width: 980px) {
  .token-holder-address {
    font-size: 11.5px;
    word-break: break-all;
    white-space: normal;
  }
}

/* Secondary identifier — RNS name OR known contract label. Gray, smaller,
   appears UNDER the address when present. Absent when there's no name. */
.token-holder-secondary {
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

.token-holder-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--rule-bright);
  border-radius: 2px;
  color: var(--text-dim);
}

.token-holder-qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.token-holder-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-size: 12px;
}

@media (max-width: 720px) {
  .token-holder-row {
    grid-template-columns: 32px 1fr 100px;
    min-height: 0;
  }
  .token-holder-pct { display: none; }
}

/* ── Pagination ── */
.token-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 14px 0 4px;
}
.token-page-btn {
  background: var(--bg-card, #14141c);
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: inherit;
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.token-page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.token-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Cap notice ── */
.token-cap-notice {
  padding: 20px 18px;
  border: 1px dashed var(--rule-bright);
  background: rgba(212, 100, 42, 0.04);
}
.token-cap-title {
  color: var(--accent);
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 6px;
}
.token-cap-body {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ── Transfers ── */
/* Transfer-tab filter toolbar — mirrors the holders search but as its own row. */
.token-transfer-toolbar {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
  flex-wrap: wrap;
  flex-direction: column;
}

.token-transfer-daterange {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.token-date-label {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.token-date-input {
  background: #1a1a28;
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  transition: border-color 0.15s;
  cursor: pointer;
}

.token-date-input:focus {
  outline: none;
  border-color: var(--accent);
}

.token-date-hint {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.7;
}

/* Filter badge shown above the table when a wallet filter is active. */
.token-filter-badge {
  display: inline-block;
  margin: 0 4px;
  padding: 1px 8px;
  background: rgba(212, 100, 42, 0.12);
  border: 1px solid var(--rule-bright);
  border-radius: 2px;
  color: var(--text);
}
.token-filter-resolved {
  color: var(--text-dim);
  font-size: 11px;
  margin-left: 4px;
}

/* Scan-and-filter note (NFT only) — explains how many transfers were scanned
   to find matches, and whether older ones still exist beyond the scan cap. */
.token-filter-scannote {
  font-size: 11.5px;
  color: var(--text-dim);
  margin: 4px 0 10px;
  padding: 6px 10px;
  border-left: 2px solid var(--rule-bright);
  line-height: 1.55;
}
.token-filter-scannote strong { color: var(--accent); font-weight: 500; }

.token-transfer-row {
  display: grid;
  /* Time | flow (2× the right columns) | amount | tx.
     The 2fr on flow gives the addresses ~800-900px in the wide layout —
     enough to render two full 42-char monospace addresses + arrow on a
     single horizontal line. */
  grid-template-columns: 140px 2fr 130px 130px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
}
.token-transfer-row:last-child { border-bottom: 0; }
.token-transfer-row:hover { background: rgba(212, 100, 42, 0.04); }

.token-transfer-row-header {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--rule-bright);
}
.token-transfer-row-header:hover { background: transparent; }

/* Two-line time cell: relative ("3 min ago") on top in white, absolute timestamp below in dim. */
.token-transfer-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-dim);
  line-height: 1.3;
}
.token-transfer-relative {
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
}
.token-transfer-absolute {
  font-size: 10.5px;
  color: var(--text-dim);
}
/* Flow cell — from → to on ONE horizontal line. The wide token-active
   layout gives this column ~880px, which fits two 42-char monospace
   addresses (~315px each) + arrow + flag with room to spare. Falls back
   to wrapping on narrow viewports via @media below. */
.token-transfer-flow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.token-transfer-arrow {
  color: var(--text-dim);
  font-size: 12px;
}
.token-transfer-addr {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-bright);
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
}
.token-transfer-addr:hover { color: var(--accent); border-bottom-color: var(--accent); }
.token-transfer-zero { color: var(--text-dim); }
.token-transfer-flag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 2px;
}
.token-transfer-flag.mint { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.token-transfer-flag.burn { background: rgba(248, 113, 113, 0.15); color: #f87171; }

.token-transfer-amount {
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.token-transfer-hash {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-bright);
  text-align: right;
}
.token-transfer-hash:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 720px) {
  .token-transfer-row { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .token-transfer-time { grid-column: 1 / -1; }
  .token-transfer-flow { grid-column: 1 / -1; }
  .token-transfer-addr { white-space: normal; word-break: break-all; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FLOOR TRACKER
   ═══════════════════════════════════════════════════════════════════════ */
body.floors-active .shell { max-width: 1180px; }

.fl-wrap { margin-top: 8px; }
.fl-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.fl-meta { display: flex; align-items: center; gap: 14px; font-size: 0.82rem; color: var(--text-dim); }
.fl-live { display: inline-flex; align-items: center; gap: 6px; color: var(--sage); font-weight: 600; }
.fl-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sage);
  box-shadow: 0 0 0 0 rgba(125,168,130,0.5); animation: flPulse 2s infinite;
}
@keyframes flPulse {
  0% { box-shadow: 0 0 0 0 rgba(125,168,130,0.45); }
  70% { box-shadow: 0 0 0 7px rgba(125,168,130,0); }
  100% { box-shadow: 0 0 0 0 rgba(125,168,130,0); }
}

.fl-group { margin-bottom: 26px; }
.fl-group .section-label { margin-bottom: 10px; }

.fl-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Fixed, identical column widths so the Axie + Land tables line up perfectly. */
.fl-table th:nth-child(1), .fl-table td:nth-child(1) { width: 19%; }
.fl-table th:nth-child(2), .fl-table td:nth-child(2) { width: 14%; }  /* Floor */
.fl-table th:nth-child(3), .fl-table td:nth-child(3) { width: 8%; }   /* 24h */
.fl-table th:nth-child(4), .fl-table td:nth-child(4) { width: 11%; }  /* Vol 7d */
.fl-table th:nth-child(5), .fl-table td:nth-child(5) { width: 11%; }  /* Listed */
.fl-table th:nth-child(6), .fl-table td:nth-child(6) { width: 14%; }  /* Supply */
.fl-table th:nth-child(7), .fl-table td:nth-child(7) { width: 12%; }  /* Holders */
.fl-table th:nth-child(8), .fl-table td:nth-child(8) { width: 11%; }  /* Last Sold */
.fl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-table thead th {
  text-align: left; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600; padding: 6px 14px; border-bottom: 1px solid var(--text-faint);
}
.fl-table thead th:nth-child(2),
.fl-table thead th:nth-child(3),
.fl-table thead th:nth-child(4),
.fl-table thead th:nth-child(5),
.fl-table thead th:nth-child(6),
.fl-table thead th:nth-child(7),
.fl-table thead th:nth-child(8) { text-align: right; }

/* Sortable column headers */
.fl-th-sort { cursor: pointer; user-select: none; transition: color 0.14s var(--ease); white-space: nowrap; }
.fl-th-sort:hover { color: var(--text); }
.fl-th-sort:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: -2px; }
.fl-th-sort.fl-sorted { color: var(--accent); }
.fl-sort-ind { display: inline-block; min-width: 0.85em; margin-left: 4px; font-size: 0.62rem; vertical-align: baseline; }

.fl-row {
  cursor: pointer; transition: background 0.14s var(--ease);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-left: 3px solid transparent;
}
.fl-row:hover { background: var(--accent-soft); }
.fl-row:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: -2px; }
.fl-row td { padding: 12px 14px; vertical-align: middle; }
.fl-row.fl-selected { background: var(--accent-soft); }
.fl-row.fl-compare-pick { background: rgba(255,255,255,0.03); }

.fl-icon { display: inline-block; width: 1.4em; margin-right: 6px; text-align: center; }
.fl-icon-img { width: 20px; height: 20px; margin-right: 7px; vertical-align: -5px; object-fit: contain; }
.fl-drawer-head .fl-icon-img { width: 22px; height: 22px; vertical-align: -4px; }
.fl-legend-item .fl-icon-img { width: 15px; height: 15px; margin-right: 3px; vertical-align: -3px; }
.fl-name { font-weight: 600; color: var(--text); }
.fl-price { text-align: right; }
.fl-usd { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.fl-native { display: block; font-size: 0.72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.fl-chg-cell { text-align: right; }
.fl-listed { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fl-supply { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.fl-lastsold { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-vol { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.fl-holders { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.fl-compare-btn {
  background: var(--bg-soft); border: 1px solid var(--text-faint); color: var(--text-muted);
  font-size: 0.76rem; padding: 5px 12px; border-radius: 7px; cursor: pointer;
  transition: all 0.14s var(--ease);
}
.fl-compare-btn:hover { border-color: var(--accent-edge); color: var(--text); }
.fl-compare-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl-compare-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.fl-retry-btn { margin-top: 12px; }
.fl-compare-hint { margin: 0 0 14px; font-size: 0.8rem; color: var(--accent); }
.fl-link { color: var(--accent-hot); text-decoration: none; }
.fl-link:hover { text-decoration: underline; }
.fl-dim { color: var(--text-dim); }

.fl-chg { font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-up { color: var(--sage); }
.fl-down { color: var(--rust); }
.fl-flat { color: var(--text-dim); }

.fl-foot { margin-top: 14px; margin-bottom: 36px; font-size: 0.76rem; color: var(--text-dim); }
.fl-empty {
  padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 0.9rem;
  background: var(--bg-soft); border: 1px solid var(--text-faint); border-radius: 10px;
}
.fl-empty-sub { font-size: 0.78rem; color: var(--text-dim); }
.floors-hint strong { color: var(--accent); }

/* --- detail side drawer --- */
/* The table area shrinks to make room for the fixed right drawer so both stay
   usable at once (click another row → drawer swaps, no close needed). An
   explicit width is required — margin-right alone lets the max-width-capped,
   centered .shell overflow under the drawer instead of shrinking. */
body.floors-drawer-open .shell {
  width: calc(100vw - 620px) !important;
  max-width: none !important;
  margin: 0 0 0 24px !important;
  transition: width 0.28s var(--ease);
}

.fl-drawer {
  position: fixed; top: 0; right: 0; z-index: 1000;
  width: 560px; max-width: 92vw; height: 100vh; overflow-y: auto;
  background: var(--bg-elevated); border-left: 1px solid var(--accent-edge);
  padding: 22px 24px; box-shadow: -18px 0 60px rgba(0,0,0,0.5);
  animation: flSlide 0.22s var(--ease);
}
@keyframes flSlide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.fl-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fl-drawer-head h3 { margin: 0; font-size: 1.15rem; color: var(--text); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fl-modal-sub { flex-basis: 100%; font-size: 0.74rem; font-weight: 400; color: var(--text-dim); margin-top: 2px; }
.fl-modal-close {
  background: none; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer;
  padding: 4px 8px; border-radius: 6px; transition: all 0.14s var(--ease); flex-shrink: 0;
}
.fl-modal-close:hover { background: var(--accent-soft); color: var(--text); }

.fl-ranges { display: flex; gap: 6px; margin: 16px 0 12px; flex-wrap: wrap; }
.fl-range {
  background: var(--bg-soft); border: 1px solid var(--text-faint); color: var(--text-muted);
  font-size: 0.76rem; padding: 5px 12px; border-radius: 7px; cursor: pointer;
  transition: all 0.14s var(--ease); text-transform: uppercase; letter-spacing: 0.04em;
}
.fl-range:hover { border-color: var(--accent-edge); color: var(--text); }
.fl-range.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.fl-chart { min-height: 200px; margin-bottom: 6px; }
.fl-chart-loading { padding: 80px 0; text-align: center; color: var(--text-dim); font-size: 0.85rem; }
.fl-svg { width: 100%; height: auto; display: block; }
.fl-grid { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.fl-grid-zero { stroke: rgba(255,255,255,0.18); stroke-dasharray: 3 3; }
.fl-axis { fill: var(--text-dim); font-size: 11px; font-family: var(--mono, monospace); }
.fl-path { stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fl-dot-pt { fill: var(--accent-hot); stroke: var(--bg-elevated); stroke-width: 2; }
.fl-chart-cap { text-align: right; font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }

/* combined sales + floor chart */
.fl-path-avg   { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.fl-path-min   { stroke: #6fae8f; stroke-width: 1.6; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.fl-path-floor { stroke: #d8d2c8; stroke-width: 1.4; fill: none; stroke-dasharray: 4 3; opacity: 0.85; }
.fl-volbar     { fill: rgba(212,100,42,0.22); }
.fl-legend-svg text { font-size: 11px; }
.fl-legend-svg line { stroke-width: 2; }

/* chart interactivity: hover crosshair + tooltip + drag-to-zoom brush */
.fl-chart-inner { position: relative; }
.fl-svg-interactive { cursor: crosshair; touch-action: none; }
.fl-cross-line  { stroke: rgba(255,255,255,0.35); stroke-width: 1; stroke-dasharray: 3 3; }
.fl-cross-avg   { fill: var(--accent); stroke: var(--bg-elevated); stroke-width: 1.5; }
.fl-cross-min   { fill: #6fae8f; stroke: var(--bg-elevated); stroke-width: 1.5; }
.fl-cross-floor { fill: #d8d2c8; stroke: var(--bg-elevated); stroke-width: 1.5; }
.fl-brush       { fill: rgba(212,100,42,0.16); stroke: rgba(212,100,42,0.5); stroke-width: 1; }
.fl-tip {
  position: absolute; top: 10px; z-index: 5; pointer-events: none;
  background: var(--bg-elevated, #15151f); border: 1px solid var(--text-faint, rgba(255,255,255,0.14));
  border-radius: 8px; padding: 8px 10px; font-size: 0.74rem; color: var(--text);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4); min-width: 132px;
}
.fl-tip-date { font-weight: 700; margin-bottom: 5px; color: var(--text); }
.fl-tip-row  { display: flex; justify-content: space-between; gap: 14px; line-height: 1.5; }
.fl-tip-k    { color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; }
.fl-tip-dot  { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fl-chart-btns { position: absolute; top: 6px; right: 8px; z-index: 6; display: flex; gap: 6px; }
.fl-zoom-reset, .fl-expand {
  background: var(--bg-soft); border: 1px solid var(--text-faint); color: var(--text-muted);
  font-size: 0.72rem; padding: 3px 9px; border-radius: 6px; cursor: pointer; line-height: 1.2;
}
.fl-expand { font-size: 0.95rem; padding: 2px 8px; }
.fl-zoom-reset:hover, .fl-expand:hover { border-color: var(--accent-edge); color: var(--text); }

/* fullscreen chart overlay */
.fl-fs-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(6,6,12,0.86);
  backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw;
}
.fl-fs-card {
  background: var(--bg-elevated, #12121b); border: 1px solid var(--text-faint);
  border-radius: 14px; width: min(1400px, 96vw); max-height: 94vh; padding: 18px 20px 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6); display: flex; flex-direction: column;
}
.fl-fs-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; margin-bottom: 10px; }
.fl-fs-head span { flex: 1; }
.fl-fs-close {
  background: transparent; border: 1px solid var(--text-faint); color: var(--text-muted);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 1rem;
}
.fl-fs-close:hover { border-color: var(--accent-edge); color: var(--text); }
.fl-fs-chart { position: relative; flex: 1; min-height: 0; }
body.fl-fs-open { overflow: hidden; }

/* Subtle, themed scrollbars (replace the default white bar) */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); background-clip: content-box; }

/* comparison legend */
.fl-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 10px; }
.fl-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--text-muted); }
.fl-legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.fl-legend-rm {
  background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.7rem;
  padding: 0 2px; border-radius: 4px;
}
.fl-legend-rm:hover { color: var(--rust); }

.fl-sales-head {
  margin: 18px 0 8px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600;
}
.fl-sales-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.fl-sales-table th {
  text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); padding: 5px 8px; border-bottom: 1px solid var(--text-faint);
}
.fl-sales-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-muted); }
.fl-sales-table .fl-native { display: inline; }

/* comparison side-by-side stats table */
.fl-cmp-stats { margin-bottom: 8px; }
.fl-cmp-table th.fl-num, .fl-cmp-table td.fl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-cmp-table td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.fl-cmp-table .fl-legend-dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
.fl-cmp-table .fl-chg { font-size: 0.78rem; }

@media (max-width: 1180px) {
  /* On narrower screens the drawer overlays instead of shrinking the table. */
  body.floors-drawer-open .shell { width: auto !important; max-width: 1180px !important; margin: 0 auto !important; }
}
@media (max-width: 620px) {
  .fl-drawer { padding: 16px; }
  /* On phones drop Listed(5) + Supply(6) + Holders(7); keep
     Type / Floor / 24h / Vol 7d / Last Sold. */
  .fl-table thead th:nth-child(5), .fl-row td:nth-child(5),
  .fl-table thead th:nth-child(6), .fl-row td:nth-child(6),
  .fl-table thead th:nth-child(7), .fl-row td:nth-child(7) { display: none; }
  /* Allow table to scroll if still too wide after hiding cols; switch to auto
     layout so the 5 remaining cols fill the container naturally */
  .fl-group { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fl-table { table-layout: auto; }
  /* Stack floor head controls vertically */
  .fl-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MORALIS HEALTH (diagnostics)
   ═══════════════════════════════════════════════════════════════════════ */
body.moralis-active .shell { max-width: 1180px; }
/* Terrarium is a dense, table-heavy support console — let it use the full viewport
   width (not the narrow 1180px) so wide monitors aren't mostly empty margins.
   Capped + vw-relative so it fills the screen but keeps a small gutter. */
body.terrarium-active .shell { max-width: min(2200px, 95vw); }

/* check-type bar */
.mrl-checkbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.mrl-check {
  font-family: var(--mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.mrl-check:hover { color: var(--text); border-color: var(--rule-bright); }
.mrl-check.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-edge);
}

.mrl-check-desc {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 14px;
  min-height: 2.3em;
}

.mrl-fields {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.mrl-field { flex: 1; min-width: 200px; }
.mrl-field.select-wrap { flex: 0 0 auto; }

.mrl-controls {
  display: flex; gap: 14px; align-items: flex-end;
  margin-bottom: 12px;
}
.mrl-preset-wrap { flex: 1; min-width: 220px; }
.mrl-controls .decode-btn { flex: 0 0 auto; width: auto; min-width: 160px; }

/* loading */
.mrl-loading {
  font-family: var(--mono); font-size: 0.8rem;
  color: var(--text-muted);
  padding: 22px 4px;
  display: flex; align-items: center; gap: 8px;
}

/* diagnosis banner */
.mrl-banner {
  border: 1px solid var(--rule-bright);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--bg-soft);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.mrl-banner-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.mrl-banner-sev {
  font-family: var(--mono); font-size: 0.62rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: var(--r-sharp);
}
.mrl-banner-title { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.mrl-banner-chain {
  margin-left: auto;
  font-family: var(--mono); font-size: 0.64rem;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em;
}
.mrl-banner-summary { font-size: 0.86rem; line-height: 1.5; color: var(--text); }
.mrl-notes {
  margin: 10px 0 0; padding-left: 18px;
  font-size: 0.76rem; line-height: 1.55; color: var(--text-muted);
}
.mrl-notes li { margin: 3px 0; }

/* severity colors */
.mrl-ok    { border-left-color: var(--sage); }
.mrl-ok    .mrl-banner-sev { background: var(--sage-soft); color: var(--sage); }
.mrl-warn  { border-left-color: var(--amber); }
.mrl-warn  .mrl-banner-sev { background: var(--amber-soft); color: var(--amber); }
.mrl-error { border-left-color: var(--rust); }
.mrl-error .mrl-banner-sev { background: var(--rust-soft); color: var(--rust); }
.mrl-info  { border-left-color: var(--accent); }
.mrl-info  .mrl-banner-sev { background: var(--accent-soft); color: var(--accent); }

/* cards */
.mrl-card {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--bg-soft);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.mrl-card .section-label { margin-bottom: 12px; }

/* price comparison */
.mrl-compare {
  display: flex; align-items: stretch; gap: 14px;
}
.mrl-compare-cell {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 14px 16px;
}
.mrl-compare-src {
  font-family: var(--mono); font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim);
}
.mrl-compare-val { font-size: 1.3rem; font-weight: 600; color: var(--text); font-family: var(--mono); }
.mrl-compare-vs {
  align-self: center; color: var(--text-dim);
  font-family: var(--mono); font-size: 0.75rem;
}
.mrl-na { color: var(--rust); font-size: 0.82rem; font-weight: 400; }

/* key-value grid (nft) */
.mrl-detail-grid { display: flex; flex-direction: column; gap: 10px; }
.mrl-kv { display: flex; flex-direction: column; gap: 4px; }
.mrl-k {
  font-family: var(--mono); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim);
}
.mrl-v { font-size: 0.78rem; color: var(--text); word-break: break-all; }

/* tables (health, consistency) */
.mrl-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.mrl-table th {
  text-align: left; font-family: var(--mono); font-weight: 500;
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); padding: 6px 10px;
  border-bottom: 1px solid var(--rule);
}
.mrl-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--rule);
  color: var(--text); vertical-align: top;
}
.mrl-table tr:last-child td { border-bottom: none; }
.mrl-msg { color: var(--text-muted); font-size: 0.72rem; }
.mrl-sig { color: var(--text-muted); font-size: 0.7rem; word-break: break-all; }

.mrl-pill {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.06em; padding: 0.16rem 0.45rem; border-radius: var(--r-sharp);
}
.mrl-pill-ok  { background: var(--sage-soft); color: var(--sage); }
.mrl-pill-bad { background: var(--rust-soft); color: var(--rust); }

.mrl-keystatus {
  margin-top: 10px; font-family: var(--mono); font-size: 0.68rem;
  color: var(--text-dim);
}

/* wallet find */
.mrl-find {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 500;
  padding: 12px 14px; border-radius: var(--r);
}
.mrl-find-ok  { background: var(--sage-soft); color: var(--sage); border: 1px solid var(--sage-edge); }
.mrl-find-bad { background: var(--rust-soft); color: var(--rust); border: 1px solid var(--rust-edge); }

/* request url + code blocks */
.mrl-url {
  font-size: 0.72rem; color: var(--text-muted);
  word-break: break-all; margin-bottom: 10px;
  padding: 8px 10px; background: var(--bg-deep);
  border-radius: var(--r); border: 1px solid var(--rule);
}
.mrl-codewrap { position: relative; }
.mrl-copy {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-family: var(--mono); font-size: 0.64rem; font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--rule-bright);
  border-radius: var(--r-sharp);
  padding: 0.3rem 0.6rem; cursor: pointer;
  transition: all 0.15s var(--ease);
}
.mrl-copy:hover { color: var(--accent); border-color: var(--accent-edge); }
.mrl-curl, .mrl-json {
  max-height: 460px; overflow: auto;
  font-size: 0.72rem; line-height: 1.5;
  margin: 0;
}
.mrl-json { max-height: 600px; }

@media (max-width: 620px) {
  .mrl-compare { flex-direction: column; }
  .mrl-compare-vs { transform: rotate(90deg); }
  .mrl-fields, .mrl-controls { flex-direction: column; align-items: stretch; }
  .mrl-controls .decode-btn { width: 100%; }
}

/* Moralis Health — autocomplete source badge */
.mrl-ac-src {
  font-family: var(--mono); font-size: 0.55rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-edge); border-radius: var(--r-sharp);
  padding: 0.05rem 0.3rem; margin-left: 0.4rem; vertical-align: middle;
}

/* ── 03 / Breeding section ───────────────────────────────────────────────── */
.br-wrap {
  padding: 0 0 1.5rem;
}
.br-prices {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--mono);
  margin-bottom: 0.6rem;
  letter-spacing: 0.01em;
}
.br-legend {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 0.5rem;
}
.br-legend-colors {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}
.br-gain-swatch, .br-loss-swatch, .br-break-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.br-gain-swatch  { background: rgba(102, 187, 106, 0.35); border: 1px solid #66bb6a; }
.br-loss-swatch  { background: rgba(239, 83, 80, 0.22);  border: 1px solid #ef5350; }
.br-break-swatch { background: var(--bg-elevated);         border: 1px solid var(--rule); }

/* Matrix */
.br-matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
}
.br-matrix {
  border-collapse: collapse;
  font-size: 0.72rem;
  font-family: var(--mono);
  white-space: nowrap;
  width: 100%;
}
.br-corner {
  background: var(--bg-base);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule);
  text-align: center;
}
.br-th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--rule);
  text-align: center;
  min-width: 90px;
}
.br-cell {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule);
  text-align: center;
  vertical-align: middle;
  cursor: default;
  transition: background 0.1s;
}
.br-cell:hover { background: var(--bg-elevated); }
.br-gain  { background: rgba(102, 187, 106, 0.12); }
.br-loss  { background: rgba(239, 83, 80, 0.08); }
.br-break { background: transparent; }
.br-cost {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.br-net {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
}
.br-gain .br-net  { color: #66bb6a; }
.br-loss .br-net  { color: #ef5350; }
.br-break .br-net { color: var(--text-muted); }

/* Analytics chart */
.br-chart-head {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.br-chart {
  width: 100%;
  position: relative;
}
.br-chart-gap { margin-top: 28px; }
.br-stats {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border: 1px solid var(--text-faint, rgba(255,255,255,0.1));
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}
.br-stat {
  flex: 1;
  padding: 12px 16px;
  border-right: 1px solid var(--text-faint, rgba(255,255,255,0.1));
  text-align: center;
}
.br-stat:last-child { border-right: none; }
.br-stat-val {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.br-stat-lbl {
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.br-analytics-loading {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 1.2rem 0;
  font-family: var(--mono);
}

/* Staked column in land table */
.fl-staked {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-align: right;
  color: var(--text-dim);
}

@media (max-width: 680px) {
  .br-matrix { font-size: 0.63rem; }
  .br-th, .br-corner { padding: 0.3rem 0.5rem; min-width: 72px; }
  .br-cell { padding: 0.25rem 0.4rem; }
}

@media (max-width: 480px) {
  /* Modal: reduce chrome padding on very small phones */
  .tc-modal-head { padding: 1rem; }
  .tc-modal-body { padding: 1rem; }
  /* Wallet hero: tighter padding */
  .wallet-hero-identity { padding: 1rem 1rem 0.85rem 1.15rem; gap: 0.75rem; }
  /* Floor drawer heading on very small phones */
  .fl-drawer-title { font-size: 1rem; }
}

/* ── Marketplace on-chain analytics sections ─────────────────────────────── */
.mkt-section { margin-top: 0.5rem; }

.mkt-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}
.mkt-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 120px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}
.mkt-stat-val {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
}
.mkt-stat-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mkt-sub-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.mkt-hint { text-transform: none; font-weight: 400; letter-spacing: 0; opacity: 0.7; }

.mkt-rarity, .mkt-recent, .mkt-placement {
  margin-bottom: 1.5rem;
}

/* Chart wrapper */
.mkt-chart-wrap {
  margin: 0.25rem 0 1.5rem;
  border-radius: 6px;
  background: var(--bg-elevated, #161622);
  border: 1px solid var(--border, #1e1e2e);
  padding: 0.5rem 0.25rem 0.25rem;
  position: relative;
}
.mkt-chart-host {
  position: relative;
}
.mkt-svg {
  width: 100%;
  height: auto;
  display: block;
}
.mkt-tip { left: 12px; }
.mkt-crosshair { pointer-events: none; }

.mkt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.mkt-table th {
  text-align: left;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mkt-table td {
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
}
.mkt-table tr:last-child td { border-bottom: none; }
.mkt-table tr:hover td { background: color-mix(in srgb, var(--surface-hover, var(--accent)) 8%, transparent); }
.mkt-rar-name { color: var(--text); font-weight: 500; }
.mkt-addr { color: var(--text-muted); font-size: 0.73rem; }
.mkt-ts { color: var(--text-muted); white-space: nowrap; }

/* Rarity badge chips */
.mkt-rar-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mkt-rar-common    { background: rgba(154,160,171,.15); color: #9aa0ab; border: 1px solid rgba(154,160,171,.3); }
.mkt-rar-rare      { background: rgba(78,203,113,.15); color: #4ecb71; border: 1px solid rgba(78,203,113,.3); }
.mkt-rar-epic      { background: rgba(47,168,216,.15); color: #2fa8d8; border: 1px solid rgba(47,168,216,.3); }
.mkt-rar-mystic    { background: rgba(168,85,247,.15); color: #a855f7; border: 1px solid rgba(168,85,247,.3); }
/* Placement badge colors */
.mkt-rar-air       { background: rgba(91,187,213,.15); color: #5bbbd5; border: 1px solid rgba(91,187,213,.3); }
.mkt-rar-cheek     { background: rgba(213,111,91,.15); color: #d56f5b; border: 1px solid rgba(213,111,91,.3); }
.mkt-rar-ground    { background: rgba(91,213,120,.15); color: #5bd578; border: 1px solid rgba(91,213,120,.3); }
.mkt-rar-hip       { background: rgba(213,160,91,.15); color: #d5a05b; border: 1px solid rgba(213,160,91,.3); }
.mkt-rar-neck      { background: rgba(160,91,213,.15); color: #a05bd5; border: 1px solid rgba(160,91,213,.3); }
.mkt-rar-unknown   { background: rgba(100,100,100,.12); color: #888; border: 1px solid #2a2a2a; }

/* ── Analytics polish: stat row, unit toggle, numeric cells, grid, caption ── */
.mkt-stats-row { margin-bottom: 1rem; }
.mkt-stats-row .br-stat-val.mkt-accent { color: var(--accent); }
/* Floor value appended to a group's count in the chart tooltip */
.fl-tip-fl { color: var(--accent); font-variant-numeric: tabular-nums; }

/* Clickable breakdown tables (row → per-category drawer, like the axie table) */
.mkt-clickable-table tbody tr { cursor: pointer; transition: background 0.12s var(--ease); }
.mkt-clickable-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.mkt-clickable-table tbody tr:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: -2px; }
.mkt-chev { color: var(--text-faint, rgba(255,255,255,0.3)); text-align: right; width: 1rem; font-weight: 700; }
.mkt-clickable-table tbody tr:hover .mkt-chev { color: var(--accent); }
/* Per-category chart inside the detail drawer */
.mkt-drawer-chart { margin: 0 0 4px; }

/* Segmented USD ⇄ Ξ price-unit toggle */
.mkt-unit-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-sharp, 4px);
  overflow: hidden;
  margin-right: 0.35rem;
}
.mkt-unit {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.mkt-unit + .mkt-unit { border-left: 1px solid var(--border); }
.mkt-unit:hover { color: var(--text); }
.mkt-unit.active { color: var(--accent); background: var(--accent-soft); }

/* Right-aligned numeric table cells + muted secondary values */
.mkt-table th.mkt-num, .mkt-table td.mkt-num { text-align: right; font-variant-numeric: tabular-nums; }
.mkt-table td.mkt-dim { color: var(--text-muted); }

/* Responsive breakdown grid — two columns on wide, one on narrow. Leaderboard
   (mkt-span-all) always spans full width. */
.mkt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  align-items: start;
}
.mkt-grid > .mkt-span-all { grid-column: 1 / -1; }
.mkt-grid .mkt-rarity, .mkt-grid .mkt-placement { margin-bottom: 0; }
.mkt-grid:empty { display: none; }

/* Data-provenance caption (honest "since L2 launch" note) */
.mkt-datanote {
  margin: 1.1rem 0 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--text-faint, rgba(255,255,255,0.32));
  text-align: right;
}

@media (max-width: 680px) {
  .mkt-grid { grid-template-columns: 1fr; }
}

/* Land items rarity row expand */
.mkt-rar-clickable { cursor: pointer; user-select: none; }
.mkt-rar-clickable:hover td { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.mkt-rar-active td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.mkt-rar-arrow { font-size: 0.65rem; display: inline-block; transition: transform 0.15s; color: var(--text-dim); }
.mkt-rar-detail { display: none; }
.mkt-rar-detail.mkt-rar-open { display: table-row; }
.mkt-rar-detail-cell { padding: 0.5rem 0.75rem 0.75rem !important; background: var(--bg-elevated, #161622); }
.mkt-table-inner { width: 100%; margin: 0; border-collapse: collapse; }
.mkt-table-inner th { font-size: 0.68rem; padding: 0.25rem 0.5rem; color: var(--text-dim); border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.04em; }
.mkt-table-inner td { font-size: 0.74rem; padding: 0.22rem 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); color: var(--text-dim); font-family: var(--mono); }
.mkt-table-inner tr:last-child td { border-bottom: none; }
.mkt-table-inner a { color: var(--accent); text-decoration: none; }
.mkt-table-inner a:hover { text-decoration: underline; }

@media (max-width: 680px) {
  .mkt-stats { gap: 0.6rem; }
  .mkt-stat { min-width: 90px; padding: 0.6rem 0.75rem; }
  .mkt-stat-val { font-size: 1rem; }
  .mkt-table th, .mkt-table td { padding: 0.25rem 0.4rem; font-size: 0.72rem; }
  .mkt-svg { height: auto; }
}