/* ==========================================================================
   Neptune.Tools — Cleaned & Consolidated Styles
   --------------------------------------------------------------------------
   Key changes:
   • Single header grid (chips left, wallet right)
   • Single layout model (rows): top-row 70vh, bottom-row 30vh
   • Panels provide flex-fill internal scrolling
   • Consolidated .mint-chip (two-part pill) + states
   • Unified wallet button variants; removed legacy duplicates
   ========================================================================== */

/* ===== Theme tokens ===== */
:root {
  --bg: #000;
  --fg: #fff;
  --text: var(--fg);
  --muted: #9aa0a6;
  --accent: #6ee7ff;

  --panel-top: #0f0f0f;
  --border: #1f1f1f;
  --row-border: #1b1b1b;

  /* optional legacy var (no longer used for layout calc) */
  --chrome-h: 140px;

  /* sticky column widths */
  --col-addr-w: 160px;
  --col-balance-w: 120px;
  --col-acb-w: 132px;

  /* z-layers */
  --z-toast: 9999;
  --z-header: 10;
  --z-fab: 50;

  /* Neon palette */
  --neon-cyan: #67e8f9;
  --neon-magenta: #ff66cc;
  --neon-lime: #a6ff4d;
  --neon-amber: #ffb454;

  /* Anti-shift sizing (optional) */
  --flows-min-rows: 14;
  --row-h: 28px;
  --thead-h: 32px;
  --tfoot-h: 32px;
  --hint-h: 22px;
}

/* ===== Reset & base ===== */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
html,
body {
  overflow: hidden;
}
body {
  display: flex;
  flex-direction: column;
}

/* ===== Header (chips left, wallet right) ===== */
header {
  position: relative;
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 13.333px 0 8px;
}

/* Old .mint-nav wrapper may still be emitted — make it transparent/contents */
.mint-nav {
  display: contents !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.mint-chooser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 40%;
}

/* Wallet area (no outer chrome; keep inner pills/buttons) */
#walletArea.wallet-inline {
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.wallet-left {
  color: var(--muted);
  font-size: 13.333px;
  line-height: 1;
}
.wallet-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wallet-pill {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13.333px;
  background: #0f0f0f;
}
.wallet-btn.btn {
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  border-radius: 8px;
  cursor: pointer;
}

/* Wallet button variants */
.wallet-inline .wallet-right .btn {
  transition: filter 0.12s ease, transform 0.04s ease;
}
.wallet-inline .wallet-right .btn:active {
  transform: translateY(1px);
}
.btn--connect {
  background: linear-gradient(180deg, #2a1f05, #201703);
  border-color: #4a3508;
  color: #ffb454;
  font-weight: 600;
}
.btn--connect:hover {
  filter: brightness(1.06);
  border-color: #6b4e0c;
  color: #ffc777;
}
.btn--disconnect {
  background: linear-gradient(180deg, #2a0e0e, #1a0a0a);
  border-color: #4a1a1a;
  color: #ff7b72;
  font-weight: 700;
}
.btn--disconnect:hover {
  filter: brightness(1.06);
  border-color: #6b2424;
  color: #ff9a93;
}
.btn--toggle {
  background: linear-gradient(180deg, #131313, #0c0c0c);
  border-color: #2a2a2a;
  color: #cbd5e1;
  font-weight: 600;
}
.btn--toggle[aria-pressed="true"] {
  color: #6ee7ff;
  border-color: #3a3a3a;
}
.btn--toggle:hover {
  filter: brightness(1.06);
  border-color: var(--accent);
}

@media (max-width: 720px) {
  header {
    gap: 8px;
  }
  #walletArea.wallet-inline {
    margin-left: 0;
  }
  .wallet-inline .wallet-right {
    gap: 6px;
  }
  .wallet-inline .wallet-right .btn {
    padding: 6px 8px;
  }
}

/* ===== Mint chip (two-part pill) ===== */
.mint-chip {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #0f0f0f;
  color: var(--text);
  border: 1px solid #222;
  border-radius: 10px;
  min-height: 30px;
  user-select: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.06s;
}
.mint-chip:hover {
  border-color: #2a2a2a;
}
.mint-chip.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px #0a0a0a, inset 0 0 0 1px rgba(110, 231, 255, 0.2);
}
.mint-chip .chip-body {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-right: 1px solid #1d1d1d;
}
.mint-chip .chip-tail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mint-chip .chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
}
.mint-chip img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  background: #111;
  flex: 0 0 auto;
}
.mint-chip .mint-label {
  font-size: 13.333px;
  color: #ddd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mint-lock {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: #ff3b3b;
}
.mint-lock svg path {
  fill: currentColor;
}
/* legacy absolute delete hidden */
.mint-chip .chip-del {
  display: none !important;
}
/* “+ add” variant */
.mint-chip.mint-add {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  gap: 5px;
}

/* ===== Panels ===== */
.panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  min-width: 0;
}

/* Neon edge variants */
.panel.neon {
  border-width: 1px;
  border-style: solid;
}
.neon--cyan {
  border-color: var(--neon-cyan);
}
.neon--magenta {
  border-color: var(--neon-magenta);
}
.neon--lime {
  border-color: var(--neon-lime);
}
.neon--amber {
  border-color: var(--neon-amber);
}

.neon--yellow {
  border-color: #fff93c;
}

.panel.neon .sticky-grid-wrap,
.panel.neon .tx-scroll,
.panel.neon .scroll {
  border-color: #1f1f1f;
}

/* ===== Global layout (ROW model) =====
   - Row 1 = top-row (flows + tx 80/20) -> 70vh
   - Row 2 = bottom-row (50/50)        -> 30vh
*/
main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 8px;
  margin: 8px;
  grid-template-rows: 70vh 30vh;
  grid-template-columns: 1fr;
  overflow: hidden;
}

/* TOP ROW: 80/20 split for flows/tx */
.top-row {
  grid-row: 1;
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: 8px;
  min-width: 0;
  width: 100%;
  height: 100%;
}
.top-row > .panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.top-row .sticky-grid-wrap,
.top-row .tx-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: auto;
}

/* Collapse TX panel */
.tx-collapsed .top-row {
  grid-template-columns: 1fr;
}
.tx-collapsed .tx-panel {
  display: none !important;
}

/* BOTTOM ROW: 50/50 split */
.bottom-row {
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  height: 30vh;
  min-height: 0;
  overflow: visible;
}
.bottom-row > .panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.bottom-row .scroll,
#tokenMetaPanel .scroll,
#portfolioPanel .scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: auto;
}

/* Narrow screens: stack bottom row; hide tx panel at smaller widths */
@media (max-width: 1100px) {
  .top-row {
    grid-template-columns: 1fr;
  } /* naturally hides tx unless manually shown */
  .tx-panel {
    display: none;
  }
  .bottom-row {
    grid-template-columns: 1fr;
  }
}

/* ===== Controls bar (inside main panels) ===== */
.controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 8px 4px;
  border-bottom: 1px solid transparent;
}
.controls-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.controls-left .btn {
  background: #0f0f0f;
  color: var(--text);
  border: 1px solid #222;
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 30px;
  cursor: pointer;
}
.controls-left .btn[disabled] {
  opacity: 0.5;
  cursor: default;
}
.controls-left .info {
  color: var(--muted);
  font-size: 13.333px;
}
.controls-right {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  align-items: center;
}
.controls-right label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13.333px;
}
.controls-right select,
.controls-right input[type="search"] {
  background: #0f0f0f;
  color: var(--text);
  border: 1px solid #222;
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 30px;
}
.controls-right label.chk {
  background: #0f0f0f;
  border: 1px solid #222;
  padding: 6px 10px;
  border-radius: 8px;
}
.controls-right input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* ===== Sticky grid (flows table) ===== */
.sticky-grid-wrap {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  /* anti-shift: reserve space before data */
  min-height: calc(
    var(--row-h) * var(--flows-min-rows) + var(--thead-h) + var(--tfoot-h)
  );
}
.sticky-grid {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  width: 100%;
}
.sticky-grid th,
.sticky-grid td {
  padding: 6px 8px;
  white-space: nowrap;
  border-bottom: 1px solid var(--row-border);
  background: black;
  vertical-align: middle;
  font-size: 13.333px;
}
.sticky-grid thead th {
  position: sticky;
  top: 0;
  background: #0f0f0f;
  color: var(--muted);
  font-weight: 600;
  font-size: 13.333px;
  z-index: 80;
}
.sticky-grid thead.stuck {
  box-shadow: 0 2px 0 var(--border);
}
.sticky-grid tfoot td,
.sticky-grid tfoot th {
  position: sticky;
  bottom: 0;
  background: #0f0f0f;
  border-top: 1px solid var(--border);
  font-weight: 600;
  z-index: 70;
}
.sticky-grid tfoot.stuck {
  box-shadow: 0 -2px 0 var(--border);
}

.sticky-left {
  position: sticky;
  left: 0;
  background: var(--panel);
  box-shadow: inset -1px 0 0 var(--border);
  z-index: 40;
}
.sticky-right {
  position: sticky;
  right: 0;
  background: var(--panel);
  border-left: 1px solid var(--border);
  z-index: 40;
}
.sticky-right-2 {
  position: sticky;
  right: var(--col-acb-w);
  background: var(--panel);
  border-left: 1px solid var(--border);
  z-index: 40;
}

.col-addr {
  width: var(--col-addr-w);
  min-width: var(--col-addr-w);
  max-width: var(--col-addr-w);
}
.col-balance {
  width: var(--col-balance-w);
  min-width: var(--col-balance-w);
  max-width: var(--col-balance-w);
  font-size: 13.333px;
}
.col-acb {
  width: var(--col-acb-w);
  min-width: var(--col-acb-w);
  max-width: var(--col-acb-w);
  font-size: 13.333px;
}
.col-count {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
}
.num {
  text-align: right;
}
.center {
  text-align: center;
}

/* Row interactivity */
.sticky-grid tbody tr.owner-row {
  cursor: pointer;
}
.sticky-grid tbody tr.owner-row .icon-btn {
  cursor: pointer;
}
.sticky-grid tbody tr.owner-row th,
.sticky-grid tbody tr.owner-row td {
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.sticky-grid tbody tr.owner-row:hover th,
.sticky-grid tbody tr.owner-row:hover td {
  background-color: #111 !important;
}
.sticky-grid tbody tr.owner-row.selected th,
.sticky-grid tbody tr.owner-row.selected td {
  background-color: #131313 !important;
  box-shadow: inset 0 0 0 1px #222;
}
.sticky-grid tbody tr.owner-row.selected .sticky-left {
  box-shadow: inset -1px 0 0 var(--border), inset 3px 0 0 var(--accent);
}
.sticky-grid tbody tr.suspect-row {
  opacity: 0.55;
}
.sticky-grid tbody tr.suspect-row:hover {
  opacity: 0.9;
}
.sticky-grid tbody tr.suspect-row.selected th,
.sticky-grid tbody tr.suspect-row.selected td {
  opacity: 1;
}

/* Address cell + icon button */
.addr-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.addr-link {
  color: #ffffff;
  text-decoration: none;
}
.addr-link:hover {
  text-decoration: underline;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #232323;
  border-radius: 6px;
  background: #101010;
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover {
  background: #141414;
  border-color: #2a2a2a;
}
.icon-btn svg {
  fill: #bbb;
  display: block;
}

/* Z-index clarifiers for sticky bits (already set above for thead/tfoot) */
.sticky-grid tbody td {
  z-index: 0;
}

/* ===== Utility colors & type ===== */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.pos {
  color: #39d353;
}
.neg {
  color: #ff7b72;
}
.cost {
  color: #ff7b72;
}
.profit {
  color: #39d353;
}

/* ===== Loading skeleton ===== */
.skel {
  position: relative;
  overflow: hidden;
  color: transparent !important;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #1113, transparent);
  animation: sh 1.2s linear infinite;
}
@keyframes sh {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* ===== Toasts ===== */
.flash-wrap {
  position: fixed;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: var(--z-toast);
  pointer-events: none;
}
.flash-item {
  background: #111;
  color: #ddd;
  border: 1px solid #272727;
  border-left: 4px solid #555;
  border-radius: 10px;
  padding: 10px 13.333px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, border-color 0.2s;
  pointer-events: auto;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  font-size: 13.333px;
}
.flash-item.show {
  opacity: 1;
  transform: translateY(0);
}
.flash-item.success {
  border-left-color: #39d353;
}
.flash-item.error {
  border-left-color: #ff7b72;
}
.flash-item.info {
  border-left-color: #6ee7ff;
}

/* ===== TX panel (right) ===== */
.tx-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
#txAddr {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  margin-left: 8px;
}
.tx-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tx-controls select,
.tx-controls button {
  background: #0f0f0f;
  color: var(--text);
  border: 1px solid #222;
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 30px;
}
.tx-scroll {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  min-height: calc(var(--row-h) * var(--flows-min-rows) + var(--thead-h));
}
.tx-list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.tx-list th,
.tx-list td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--row-border);
  white-space: nowrap;
  font-size: 13.333px;
  background: var(--panel);
}
.tx-list thead th {
  position: sticky;
  top: 0;
  background: #0f0f0f;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
}
.tx-hash a {
  color: #ffffff;
  text-decoration: none;
}
.tx-hash a:hover {
  text-decoration: underline;
}
.tx-dir-in {
  color: #39d353;
}
.tx-dir-out {
  color: #ff7b72;
}

/* ===== Pagination (footer of tables) ===== */
.pager {
  position: sticky;
  bottom: 0;
  background: #0f0f0f;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  gap: 8px;
}
.pager .btn {
  background: #0f0f0f;
  color: var(--text);
  border: 1px solid #222;
  border-radius: 8px;
  min-height: 30px;
  padding: 6px 10px;
  cursor: pointer;
}
.pager .btn[disabled] {
  opacity: 0.5;
  cursor: default;
}
.pager .page-info {
  color: var(--muted);
  font-size: 13.333px;
}

/* ===== Floating Toggle Transactions button ===== */
.tx-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-fab);
  background: linear-gradient(180deg, #121212, #0b0b0b);
  color: var(--text);
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.tx-fab:hover {
  background: #141414;
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.tx-fab:active {
  transform: translateY(0);
}

/* ===== Accessibility helpers ===== */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Footer line (left meta + right brand) ===== */
.hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13.333px;
  min-height: var(--hint-h);
}
.hint-left {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hint-right.built-by {
  opacity: 0.7;
  font-size: 13.333px;
  white-space: nowrap;
}
.hint-right.built-by strong {
  color: var(--accent);
  text-decoration: none;
}

.hint-right.built-by strong.disclaimer-link {
  color: white;
  text-decoration: none;
  margin-right: 3px;
}
.built-by .neptune-link,
.built-by .neptune-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.built-by .neptune-link:hover {
  opacity: 0.9;
}
.built-by .neptune-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#flowsHint .icon-btn {
  vertical-align: -2px;
  margin-left: 6px;
}

#flowsWrap {
  margin-bottom: 6px;
}

/* ===== Portfolio panel ===== */
#portfolioPanel {
  background: var(--panel);
  border: 1px solid var(--neon-amber);
  border-radius: 13.333px;
  padding: 8px;
}
#portfolioPanel header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 13.333px;
}
#pfAddr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: 0.9;
}
#pfTotal {
  font-weight: 600;
}
#portfolioPanel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.333px;
}
#portfolioPanel th,
#portfolioPanel td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--row-border);
}
#portfolioPanel th {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
}
#portfolioPanel td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#portfolioPanel td.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#portfolioPanel .token-16 {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 6px;
  border-radius: 3px;
}
#portfolioPanel tbody tr:last-child td {
  border-bottom-color: transparent;
}
@media (max-width: 1100px) {
  #portfolioPanel {
    padding: 10px;
  }
  #portfolioPanel th,
  #portfolioPanel td {
    padding: 7px 8px;
  }
}

/* ===== Token Meta Panel ===== */

#tokenMetaPanel[hidden] {
  display: none !important;
}
#tokenMetaPanel .meta-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13.333px 14px;
  align-items: center;
  margin-bottom: 13.333px;
}
#tokenMetaPanel .token-logo,
#tmLogo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #111;
  border: 1px solid var(--border);
  object-fit: cover;
  display: block;
}
#tokenMetaPanel .meta-titles {
  min-width: 0;
}
#tokenMetaPanel .name-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
#tokenMetaPanel #tmName {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
#tokenMetaPanel #tmSymbol {
  font-size: 13.333px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 6px;
}
#tokenMetaPanel .stats-line {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, max-content);
  gap: 14px;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
#tokenMetaPanel #tmPrice {
  font-weight: 600;
}
#tokenMetaPanel #tmMcap,
#tokenMetaPanel #tmHolders {
  color: var(--muted);
}
#tokenMetaPanel #tmChange.pos {
  color: var(--accent);
}
#tokenMetaPanel #tmChange.neg {
  color: #ff6b6b;
}
#tokenMetaPanel .meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 13.333px 0;
}
#tokenMetaPanel .meta-grid > div {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 10px;
  padding: 10px 13.333px;
  min-height: 44px;
  display: grid;
  align-content: start;
  gap: 2px;
}
#tokenMetaPanel .meta-grid label {
  font-size: 11px;
  color: var(--muted);
}
#tokenMetaPanel .meta-grid .mono a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
}
#tokenMetaPanel .meta-grid .mono a:hover {
  border-bottom-color: var(--fg);
}
#tokenMetaPanel .wrap {
  word-break: break-word;
  overflow-wrap: anywhere;
}
#tokenMetaPanel .subhead {
  margin: 10px 2px 8px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-left: 8px;
}
#tokenMetaPanel .scroll {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
#tokenMetaPanel .sticky-grid th,
#tokenMetaPanel .sticky-grid td {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  font-variant-numeric: tabular-nums;
}
#tokenMetaPanel .sticky-grid th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
  text-align: left;
  font-size: 13.333px;
  color: var(--muted);
}
#tokenMetaPanel .sticky-grid td.right,
#tokenMetaPanel .sticky-grid th.right {
  text-align: right;
}
#tokenMetaPanel .pager {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 10px;
}
#tokenMetaPanel .page-info {
  font-size: 13.333px;
  color: var(--muted);
}
#tokenMetaPanel .btn {
  padding: 6px 10px;
  border-radius: 8px;
}
@media (max-width: 920px) {
  #tokenMetaPanel .meta-grid {
    grid-template-columns: 1fr 1fr;
  }
  #tokenMetaPanel .stats-line {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, max-content);
  }
}
@media (max-width: 600px) {
  #tokenMetaPanel .meta-head {
    grid-template-columns: auto 1fr;
  }
  #tokenMetaPanel .meta-grid {
    grid-template-columns: 1fr;
  }
  #tokenMetaPanel .scroll {
    max-height: none;
  }
}

/* ===== Row/footer hints & copy alignment ===== */
.hint .icon-btn {
  vertical-align: -2px;
  margin-left: 6px;
}

/* ===== Narrow table min-width adjustment ===== */
@media (max-width: 720px) {
  .sticky-grid {
    min-width: 900px;
  }
}

/* ---- MAIN LAYOUT: use fractions, not vh ---- */
main {
  /* fills whatever is left below the header */
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 8px;
  margin: 8px;
  grid-template-rows: 7fr 3fr; /* was 70vh 30vh */
  grid-template-columns: 1fr;
  overflow: hidden;
}

/* TOP ROW: no fixed height; let the grid row size it */
.top-row {
  grid-row: 1;
  display: grid;
  grid-template-columns: 12fr   fr; /* 80% / 20% */
  gap: 8px;
  min-width: 0;
  min-height: 0; /* allow shrinking */
}
.top-row > .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.top-row .sticky-grid-wrap,
.top-row .tx-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: auto;
}

/* BOTTOM ROW: remove fixed 30vh; make both panels scroll inside */
.bottom-row {
  grid-row: 2;
  display: grid !important;
  grid-template-columns: 1fr 1fr; /* 50 / 50 */
  gap: 8px;
  min-height: 0;
  overflow: visible;
}
.bottom-row > .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bottom-row .scroll,
#tokenMetaPanel .scroll,
#portfolioPanel .scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto; /* ensure internal scrollers take the space */
  max-height: none; /* no caps */
  overflow: auto; /* <-- scrolling area */
}

/* --- Ensure the grid rows size to available space (not vh) --- */
main {
  flex: 1 1 auto;
  min-height: 0; /* critical for scroll inside grid children */
  display: grid;
  gap: 8px;
  margin: 8px;
  grid-template-rows: 7fr 3fr; /* replaces any 70vh/30vh rules */
  grid-template-columns: 1fr;
  overflow: hidden;
}

/* --- Make the row wrappers shrinkable --- */
.top-row,
.bottom-row {
  min-height: 0; /* lets children create internal scrollbars */
}

/* --- The panels MUST be flex parents --- */
section.panel,
aside.panel {
  display: flex !important; /* beat any legacy block rules */
  flex-direction: column;
  min-height: 0; /* allows inner scrollers to grow */
}

/* --- Flows & TX: their scrollers fill the panel --- */
.top-row .sticky-grid-wrap,
.top-row .tx-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  overflow: auto;
}

/* --- Bottom 50/50 row: give both panels true internal scroll --- */
.bottom-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr; /* 50 / 50 */
  gap: 8px;
  overflow: visible;
}

.bottom-row .scroll,
#tokenMetaPanel .scroll,
#portfolioPanel .scroll {
  flex: 1 1 auto; /* this is what needs a flex parent */
  min-height: 0;
  height: auto; /* remove caps */
  max-height: none;
  overflow: auto; /* <-- scrollbar shows here */
}

/* --- Kill any leftover fixed heights that fight scrolling --- */
.bottom-row {
  height: auto !important;
}

/* ---- Token Meta: laptop-friendly stats grid ---- */
#tokenMetaPanel .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 13.333px;
  margin-top: 8px;
}

#tokenMetaPanel .stat {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 10px;
  padding: 8px 10px;
  min-height: 44px;
  display: grid;
  align-content: start;
  gap: 4px;
}

#tokenMetaPanel .stat .label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2px;
}

#tokenMetaPanel .stat .value {
  font-size: 13.333px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tokenMetaPanel .stat .value.wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Color the pct change the same way as before */
#tokenMetaPanel #tmChange.pos {
  color: var(--accent);
}
#tokenMetaPanel #tmChange.neg {
  color: #ff6b6b;
}

/* Keep the header grid tidy on narrower laptops */
#tokenMetaPanel .meta-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: center;
}

/* Liquidity table: ensure horizontal scroll if the panel is narrow */
#tokenMetaPanel .scroll {
  overflow: auto; /* already present for vertical — keep */
}

/* If you previously had .stats-line styles, you can safely keep them or nuke them.
   They won't apply now that we don't render .stats-line in the DOM. */

/* Token Meta: icon inline with name/ticker */
#tokenMetaPanel .meta-head {
  display: grid;
  grid-template-columns: 1fr; /* single column; stack sections vertically */
  gap: 13.333px;
}

/* Make the ENTIRE panel the scroll container */
#tokenMetaPanel {
  display: flex; /* already a .panel flex parent — keep */
  flex-direction: column;
  overflow: auto; /* <-- panel scrolls */
  min-height: 0; /* critical for nested grid layouts */
}

/* The inner .scroll wrapper no longer needs its own scrolling */
#tokenMetaPanel .scroll {
  overflow: visible; /* let panel handle scrolling */
  max-height: none;
}

/* Sticky headers stick to the panel (the nearest scroll ancestor) */
#tokenMetaPanel .sticky-grid thead th {
  position: sticky;
  top: 0;
}

/* Name row with inline icon */
#tokenMetaPanel .name-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-left: 8px;
}
#tokenMetaPanel .token-logo,
#tmLogo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #111;
  border: 1px solid var(--border);
  object-fit: cover;
  flex: 0 0 auto;
}
#tokenMetaPanel #tmName {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tokenMetaPanel #tmSymbol {
  font-size: 13.333px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 6px;
}

/* Laptop-friendly stats grid */
#tokenMetaPanel .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 13.333px;
  margin-top: 4px;
}
#tokenMetaPanel .stat {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 44px;
}
#tokenMetaPanel .stat .label {
  font-size: 11px;
  color: var(--muted);
}
#tokenMetaPanel .stat .value {
  font-size: 13.333px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tokenMetaPanel .stat .value.wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Keep pct coloring behavior */
#tokenMetaPanel #tmChange.pos {
  color: var(--accent);
}
#tokenMetaPanel #tmChange.neg {
  color: #ff6b6b;
}

/* Slightly denser at narrower widths */
@media (max-width: 920px) {
  #tokenMetaPanel .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* === Token Meta panel: single scroll container + padding === */
#tokenMetaPanel {
  /* the panel itself scrolls (header + table together) */
  overflow: auto !important;
  padding: 13.333px 13.333px 14px 13.333px; /* breathing room from neon edge */
  border-radius: 10px; /* soft corners match other panels */
}

/* inner wrapper should not create its own scrollbars */
#tokenMetaPanel .scroll {
  overflow: visible !important;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

/* sticky header should stick to the panel (the nearest scroll ancestor) */
#tokenMetaPanel .sticky-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0f0f0f;
}

/* keep the liquidity table readable and centered */
#tokenMetaPanel .sticky-grid {
  margin: 0 auto; /* center within panel */
  border-collapse: separate;
  border-spacing: 0;
}

/* Token Meta: make panel non-scrolling and add an inner scrollbox
   so scrollbars never cover the neon edge, matching TX panel padding */
#tokenMetaPanel {
  overflow: hidden; /* border stays clean */
  padding: 8px; /* consistent inner padding like other panels */
}

.tm-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto; /* the ONLY scroller for this panel */
  border-radius: 8px; /* optional: softens inner content edges */
  padding-right: 12px;
}

/* Liquidity table: cap width so horizontal scroll is limited */
.tm-table-wrap {
  width: 100%;
  overflow-x: auto; /* horizontal scroll lives inside the scrollbox if needed */
}

/* keep headers sticky relative to the inner tm-scroll */
.tm-scroll .sticky-grid thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* === Fix: keep Address/Totals above; let #In/#Out/dates scroll under === */

/* Baseline for all header cells */
.sticky-grid thead th {
  position: sticky;
  top: 0;
  z-index: 60; /* lower than sticky-left */
}

/* Sticky-left header cell (“Address”) sits on top */
.sticky-grid thead th.sticky-left {
  z-index: 140;
  background: #0f0f0f; /* solid cover so cells slide under cleanly */
  box-shadow: inset -1px 0 0 var(--border);
}

/* Baseline for all footer cells */
.sticky-grid tfoot th,
.sticky-grid tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 60; /* lower than sticky-left */
}

/* Sticky-left footer cell (“Totals”) sits on top */
.sticky-grid tfoot .sticky-left {
  z-index: 140;
  background: #0f0f0f;
  box-shadow: inset -1px 0 0 var(--border);
}

/* === TX list & Token Meta liquidity table: centered value columns === */

/* TX list: center Dir, Amount, USD (cols 2–4); keep Time (1) & Tx (5) left */
.tx-list th:nth-child(2),
.tx-list th:nth-child(3),
.tx-list th:nth-child(4),
.tx-list td:nth-child(2),
.tx-list td:nth-child(3),
.tx-list td:nth-child(4) {
  text-align: center;
}

/* Make sure Time & Tx stay left even if they carry numeric classes */
.tx-list th:first-child,
.tx-list td:first-child,
.tx-list th:last-child,
.tx-list td:last-child {
  text-align: left;
}

/* Token Meta liquidity table: center numeric/stat columns (3–6) */
.tm-table th:nth-child(3),
.tm-table th:nth-child(4),
.tm-table th:nth-child(5),
.tm-table th:nth-child(6),
.tm-table td:nth-child(3),
.tm-table td:nth-child(4),
.tm-table td:nth-child(5),
.tm-table td:nth-child(6) {
  text-align: center;
}

/* Keep Pool & Program (addr/labels) left-aligned */
.tm-table th:first-child,
.tm-table td:first-child,
.tm-table th:nth-child(2),
.tm-table td:nth-child(2) {
  text-align: left;
}

/* === Token Meta liquidity table: copy the TX panel’s rounded card look === */

/* Give the liquidity table its own card container like .tx-scroll */
.tm-table-wrap {
  overflow: auto; /* preserves horizontal scroll if needed */
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

/* Match cell chrome to tx-list */
.tm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.tm-table th,
.tm-table td {
  padding: 6px 8px;
  white-space: nowrap;
  border-bottom: 1px solid var(--row-border);
  background: var(--panel);
  vertical-align: middle;
  font-size: 13.333px;
}

/* Sticky header that looks like tx-list */
.tm-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0f0f0f;
  color: var(--muted);
  font-weight: 600;
  font-size: 13.333px;
}

/* Rounded “card” corners on the liquidity table */
.tm-table thead th:first-child {
  border-top-left-radius: 10px;
}
.tm-table thead th:last-child {
  border-top-right-radius: 10px;
}
.tm-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}
.tm-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

/* If you use sticky left/right columns in the liquidity table later,
   keep their backgrounds crisp like other sticky cells */
.tm-table .sticky-left {
  position: sticky;
  left: 0;
  background: var(--panel);
  box-shadow: inset -1px 0 0 var(--border);
  z-index: 3;
}
.tm-table .sticky-right {
  position: sticky;
  right: 0;
  background: var(--panel);
  border-left: 1px solid var(--border);
  z-index: 3;
}

/* Token Meta stat values: de-emphasize (no bright white by default) */
#tokenMetaPanel .stat .value {
  color: var(--muted);
}

/* Keep 24h change colored by sign */
#tokenMetaPanel #tmChange.pos {
  color: var(--accent);
}
#tokenMetaPanel #tmChange.neg {
  color: #ff6b6b;
}

/* Copy button success flash */
.icon-btn.copied {
  border-color: #2e7d32; /* green-ish */
  background: #0f0f0f;
  box-shadow: 0 0 0 1px #1b1b1b, 0 0 10px #2e7d3233;
}
.icon-btn.copied svg {
  fill: #4caf50;
}
/* Panel titles */
.panel-title {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 4px 8px;
  margin-bottom: 4px;
  opacity: 0.85;
}

.neon--cyan .panel-title {
  color: #6ee7ff;
}
.neon--magenta .panel-title {
  color: #ff6ee7;
}
.neon--amber .panel-title {
  color: #ffda6e;
}
.neon--lime .panel-title {
  color: #a8ff60;
}

.neon--yellow .panel-title {
  color: #fff93c;
}
/* === Top-right column (splits TX/WALLET vertically) === */
.top-right {
  display: grid;
  grid-template-rows: 1fr 1fr; /* 50/50 within the top-row height */
  gap: 8px;
  min-height: 0; /* allow inner scrollers */
}

/* Make sure the top-row has two columns: left snapshot, right stacked column */
.top-row {
  grid-row: 1;
  display: grid;
  grid-template-columns: 12fr 6fr; /* ~75% / 25% */
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

/* Inner panels in .top-right use internal scrollers */
.top-right .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.top-right .tx-scroll,
.top-right .scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Compact wallet table tweaks (reuse existing portfolio styles as needed) */
#walletMiniPanel .pf-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  padding-left: 8px;
  padding-right: 8px;
}
#walletMiniPanel .pf-addr {
  opacity: 0.9;
}
#walletMiniPanel .pf-total {
  font-weight: 600;
}

/* DeFi table: reuse tx-list chrome for visual consistency */
.defi-table th:nth-child(2),
.defi-table th:nth-child(4),
.defi-table th:nth-child(5),
.defi-table td:nth-child(2),
.defi-table td:nth-child(4),
.defi-table td:nth-child(5) {
  text-align: center; /* Type, Amount, USD centered like TX */
}

/* Responsive: on narrow screens, stack top-right and top-left naturally */
@media (max-width: 1100px) {
  .top-row {
    grid-template-columns: 1fr; /* stack – TX/WALLET will then follow below snapshot */
  }
  .top-right {
    grid-template-rows: auto auto; /* keep both visible stacked */
  }
}

/* === Portfolio (compact + full) — tidy rows, tiny icons, alignment === */
.portfolio-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.portfolio-table th,
.portfolio-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--row-border);
  white-space: nowrap;
  vertical-align: middle;
  font-size: 13.333px;
  background: var(--panel);
}
.portfolio-table thead th {
  position: sticky;
  top: 0;
  background: #0f0f0f;
  color: var(--muted);
  font-weight: 600;
}

/* small icon + name alignment */
.pf-token {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pf-token .token-16 {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  background: #111;
}

/* numeric alignment */
.pf-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* header (address link + copy, or placeholder) */
.pf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.pf-addr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pf-addr .addr-link:hover {
  text-decoration: underline;
}

/* copy button same chrome as elsewhere */
.pf-addr .icon-btn {
  width: 22px;
  height: 22px;
  padding: 0;
}
.pf-addr .icon-btn.copied {
  border-color: #2e7d32;
  box-shadow: 0 0 0 1px #1b1b1b, 0 0 10px #2e7d3233;
}

/* make the compact wallet table use the same chrome */
#walletMiniPanel .scroll table {
  width: 100%;
}
#walletMiniPanel .scroll .sticky-grid {
  border-collapse: separate;
  border-spacing: 0;
}

/* soften last row */
.portfolio-table tbody tr:last-child td {
  border-bottom-color: transparent;
}
/* Center Dir, Amount, USD in DeFi table */
.defi-table th:nth-child(3),
.defi-table th:nth-child(6),
.defi-table th:nth-child(7),
.defi-table td:nth-child(3),
.defi-table td:nth-child(6),
.defi-table td:nth-child(7) {
  text-align: center;
}

/* Center every column in the DeFi table */
#defiTable th,
#defiTable td {
  text-align: center;
}

/* Optional: make heat rows pop a bit but keep borders clean */
#defiTable tbody tr {
  transition: background-color 120ms ease;
}
#defiTable tbody tr:hover {
  filter: brightness(1.05);
}
/* DeFi panel: make it scroll again */
#defiPanel {
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow child scroller */
}
#defiPanel .scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto; /* <-- restore scrolling */
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

/* Keep the nice rounded header/foot corners without needing overflow:hidden */
#defiTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
#defiTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0f0f0f;
  color: var(--muted);
  font-weight: 600;
  font-size: 13.333px;
}
#defiTable thead th:first-child {
  border-top-left-radius: 10px;
}
#defiTable thead th:last-child {
  border-top-right-radius: 10px;
}
#defiTable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}
#defiTable tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

/* Cell chrome */
#defiTable th,
#defiTable td {
  padding: 6px 8px;
  white-space: nowrap;
  border-bottom: 1px solid var(--row-border);
  background: var(--panel);
  vertical-align: middle;
  font-size: 13.333px;
  text-align: center; /* center all columns as requested */
}

/* --- Wallet panel: layout & headings --- */
#walletMiniPanel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#walletMiniPanel .pf-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#walletMiniPanel .pf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
#walletMiniPanel .pf-head-left {
  display: grid;
  gap: 4px;
}
#walletMiniPanel .pf-head-label {
  color: var(--muted);
  font-size: 12px;
}

#walletMiniPanel .subhead {
  margin: 6px 0 8px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- Rounded corners like Transactions --- */
#walletMiniPanel .pf-scroll {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
#walletMiniTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
#walletMiniTable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #0f0f0f;
  color: var(--muted);
  font-weight: 600;
  font-size: 13.333px;
}
#walletMiniTable thead th:first-child {
  border-top-left-radius: 10px;
}
#walletMiniTable thead th:last-child {
  border-top-right-radius: 10px;
}
#walletMiniTable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}
#walletMiniTable tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}
#walletMiniTable th,
#walletMiniTable td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--row-border);
  white-space: nowrap;
  vertical-align: middle;
  font-size: 13.333px;
  text-align: center;
}

/* --- Copy buttons: make wallet match TX table --- */
.copy-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.copy-btn:hover {
  color: var(--fg);
  border-color: var(--row-border);
}
.copy-btn.copied {
  color: var(--accent);
  border-color: var(--accent);
}

/* Token icon size alignment */
.token-16 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #222;
  display: inline-block;
  margin-right: 6px;
  vertical-align: -3px;
}
.pf-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pf-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  text-align: right;
}
.col-mint {
  text-align: center;
}

/* Left-align first column (Token column) in wallet tables */
#pfMiniTbody td:first-child,
#pfMiniTbody th:first-child {
  text-align: left !important;
}

/* Optional: also left-align the Ticker header if desired */
#pfMiniTbody th:nth-child(2),
#pfMiniTbody td:nth-child(2) {
  text-align: left;
}

/* live heartbeat */
.live-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(110, 231, 255, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
  vertical-align: -1px;
  margin-right: 6px;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(110, 231, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(110, 231, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(110, 231, 255, 0);
  }
}

/* number input validation hint */
.num-input.invalid {
  outline: 2px solid #ff7b72;
  border-radius: 4px;
}

/* ==========================================================================
   Global Pulse Indicator (20s heartbeat)
   --------------------------------------------------------------------------
   Appears in top-right of header; shared by flows.js, tokenMeta.js, defi.js
   ========================================================================== */

/* Container */
.global-pulse {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-right: 10px;
  user-select: none;
}

/* Live dot animation */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
}

/* Text labels inside pulse */
.pulse-label {
  font-weight: 600;
  color: var(--fg);
}

.pulse-next,
.pulse-last {
  font-variant-numeric: tabular-nums;
}

.sep {
  opacity: 0.3;
  margin: 0 4px;
}

/* Responsive adjustments */
@media (max-width: 700px) {
  .global-pulse {
    font-size: 11px;
    padding: 3px 8px;
    gap: 4px;
  }
  .sep {
    display: none;
  }
}

/* === Global Pulse (top-right) === */
.global-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  margin-right: 10px;
  font-size: 12px;
  color: var(--muted);
}
.global-pulse .sep {
  opacity: 0.6;
  margin: 0 2px;
}
.pulse-label {
  color: #bde7ff;
  font-weight: 600;
}
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7cf;
  vertical-align: middle;
  margin-right: 2px;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
}
/* keep wallet area items side-by-side */
.wallet-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Keep right side visible; left scrolls if crowded */
.mint-nav {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}
.mint-chooser {
  min-width: 0; /* allow it to shrink */
  overflow-x: auto; /* scroll chips, don't push pulse off */
  -webkit-overflow-scrolling: touch;
}
.wallet-inline {
  justify-self: end;
  min-width: max-content; /* prevent collapsing pulse */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* keep header to a single row and prevent wrapping */
.mint-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.wallet-inline,
.wallet-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* small inline pulse pill */
.pulse-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-top, #0f0f0f);
  border: 1px solid var(--border, #1f1f1f);
  font: 12px/1.2 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--muted, #9aa0a6);
  white-space: nowrap;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e; /* live green */
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
}

.next-snap.running {
  opacity: 0.95;
}

/* ==========================================================
   Wallet verdicts & hide dust UX
   ----------------------------------------------------------
   Adds gentle dimming and skull indicator support.
   ========================================================== */

/* Dust / Low-liquidity rows */
.pf-row[data-verdict="dust"] {
  opacity: 0.45;
  filter: grayscale(0.25);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.pf-row[data-verdict="low"] {
  opacity: 0.85;
  filter: saturate(0.8);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Skull inline placement (renders before token name) */
.rug-skull {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  font-size: 16px;
  line-height: 1;
  transform: translateY(2px);
}

/* Checkbox alignment */
.pf-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Subtle hover feedback on Hide Dust toggle */
#pfHideDust {
  cursor: pointer;
  accent-color: var(--accent);
}

#pfHideDust:hover {
  filter: brightness(1.2);
}

/* Maintain table readability when hiding dust rows manually (future-proof) */
.wallet-table tr.hidden-dust {
  display: none !important;
}

/* Optional: smooth color transition when verdict updates */
.pf-row {
  transition: opacity 0.25s ease, filter 0.25s ease, background-color 0.25s ease;
}

/* Wallet total */
.pf-total[aria-live="polite"] {
  font-weight: 600;
  color: var(--fg);
  transition: color 0.2s ease;
}
.pf-total[aria-live="polite"].flash {
  color: var(--accent);
}

/* segmented pill-ish controls */
.seg {
  display: inline-flex;
  gap: 6px;
  background: var(--surface-2, #171717);
  padding: 4px;
  border-radius: 999px;
}
.seg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
.seg-item input {
  appearance: none;
  width: 0;
  height: 0;
  position: absolute;
}
.seg-item span {
  color: var(--muted, #a1a1a1);
}
.seg-item:has(input:checked) {
  background: var(--surface-3, #0f0f0f);
  outline: 1px solid rgba(255, 255, 255, 0.08);
}
.seg-item:has(input:checked) span {
  color: #fff;
}