/* ─── TOKENS ─────────────────────────────────────────── */
:root {
  --sol-purple: #9945FF;
  --sol-green:  #14F195;
  --sol-grad:   linear-gradient(135deg, #9945FF, #14F195);
  --sol-grad-h: linear-gradient(135deg, #a855ff, #1dffa0);

  --bg:          #08080F;
  --bg-surface:  #0D0D1C;
  --bg-elevated: #111125;
  --bg-hover:    rgba(255,255,255,0.035);
  --bg-active:   rgba(153,69,255,0.10);

  --border-dim:    rgba(255,255,255,0.055);
  --border-mid:    rgba(255,255,255,0.09);
  --border-accent: rgba(153,69,255,0.40);

  --text-1: rgba(255,255,255,0.93);
  --text-2: rgba(255,255,255,0.50);
  --text-3: rgba(255,255,255,0.24);

  --green:  #14F195;
  --amber:  #FFB547;
  --red:    #FF5F5F;

  --sidebar-w: 216px;
  --topbar-h:  52px;
  --tabbar-h:  44px;
  --footer-h:  40px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --font-ui: 'Inter', sans-serif;
  --font-mono: 'Inter', sans-serif;
  --ease: 140ms ease;
}

/* ─── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sol-purple); text-decoration: none; }
a:hover { color: var(--sol-green); }

/* Very subtle ambient glow */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 10% 5%,  rgba(153,69,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 95%, rgba(20,241,149,0.04) 0%, transparent 60%);
}

/* ─── APP GRID ───────────────────────────────────────── */
#app {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) var(--tabbar-h) 1fr var(--footer-h);
  height: 100vh;
}

/* ─── TOPBAR ─────────────────────────────────────────── */
#topbar {
  grid-column: 1 / -1;
  display: flex; align-items: center;
  gap: 16px;
  padding: 0 24px 0 0;
  border-bottom: 1px solid var(--border-dim);
  background: rgba(8,8,15,0.92);
  backdrop-filter: blur(24px);
}

.topbar-brand {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
  height: 100%;
  border-right: 1px solid var(--border-dim);
}

/* Solana logo — diamond with gradient */
.brand-logo {
  width: 36px; height: 36px; flex-shrink: 0;
  position: relative;
}
.brand-logo svg { width: 100%; height: 100%; }

.brand-name {
  font-size: 21px; font-weight: 700;
  letter-spacing: -0.03em;
  background: var(--sol-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ── Nav wallet search bar ── */
.nav-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  padding: 0 14px;
  height: 38px;
  transition: border-color 0.15s, background 0.15s;
}
.nav-search:focus-within {
  border-color: rgba(153,69,255,0.5);
  background: rgba(153,69,255,0.06);
}
.nav-search-icon {
  width: 15px; height: 15px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.35);
  transition: color 0.15s;
}
.nav-search:focus-within .nav-search-icon { color: rgba(153,69,255,0.8); }
.nav-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  min-width: 0;
}
.nav-search-input::placeholder { color: rgba(255,255,255,0.30); }
.nav-search-input.nav-search--error { animation: nav-shake 0.35s ease; }
@keyframes nav-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  60%      { transform: translateX(6px); }
}
.nav-search-kbd {
  flex-shrink: 0;
  font-size: 11px;
  font-family: inherit;
  color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.6;
  pointer-events: none;
  transition: opacity 0.15s;
}
.nav-search:focus-within .nav-search-kbd { opacity: 0; }

.net-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.65);
  padding: 4px 12px;
  border: 1px solid var(--border-dim);
  border-radius: 20px;
  background: var(--bg-elevated);
  letter-spacing: 0.01em;
}
.net-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }

#ae-badge-anchor { display: flex; align-items: center; }

/* ─── SIDEBAR ────────────────────────────────────────── */
#sidebar {
  grid-row: 2 / 4;
  border-right: 1px solid var(--border-dim);
  background: var(--bg-surface);
  display: flex; flex-direction: column;
  padding: 12px 8px;
  gap: 1px;
  overflow-y: auto;
}

.sb-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
  padding: 12px 12px 4px;
}
.sb-label:first-child { padding-top: 4px; }

.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--text-2);
  font-size: 15.5px; font-weight: 500;
  transition: all var(--ease);
  user-select: none;
  position: relative;
}
.sb-item:hover { background: var(--bg-hover); color: var(--text-1); }
.sb-item.active {
  background: var(--bg-active);
  color: var(--text-1);
}
.sb-item.active::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 2px; border-radius: 0 2px 2px 0;
  background: var(--sol-grad);
  box-shadow: 0 0 10px rgba(153,69,255,0.5);
}

.sb-orb {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-dim);
  transition: all var(--ease);
}
.sb-orb svg { width: 13px; height: 13px; opacity: 0.5; transition: opacity var(--ease); }
.sb-item:hover .sb-orb, .sb-item.active .sb-orb {
  background: rgba(153,69,255,0.12);
  border-color: rgba(153,69,255,0.3);
}
.sb-item:hover .sb-orb svg, .sb-item.active .sb-orb svg { opacity: 1; }

.sb-count {
  margin-left: auto;
  font-size: 13px; font-weight: 600;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.sb-item.active .sb-count { color: rgba(153,69,255,0.7); }

.sb-divider { height: 1px; background: var(--border-dim); margin: 6px 10px; }

/* ─── TABBAR ─────────────────────────────────────────── */
#tabbar {
  grid-column: 2;
  display: flex; align-items: flex-end;
  padding: 0 24px; gap: 0;
  border-bottom: 1px solid var(--border-dim);
  background: rgba(8,8,15,0.7);
}

.tab-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px 12px;
  cursor: pointer;
  border: none;
  font-family: var(--font-ui);
  font-size: 15px; font-weight: 500;
  color: var(--text-2);
  background: transparent;
  transition: all var(--ease);
  white-space: nowrap;
  position: relative;
}
.tab-btn:hover { color: var(--text-1); }
.tab-btn.active { color: var(--text-1); }
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 16px; right: 16px; height: 2px;
  background: var(--sol-grad);
  border-radius: 2px 2px 0 0;
}
.tab-pip { display: none; }
.tab-divider { display: none; }

/* ─── CONTENT ────────────────────────────────────────── */
#content {
  grid-column: 2;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 32px 32px 48px;
  scroll-behavior: smooth;
  min-width: 0; /* prevent grid blowout */
}

/* ─── FOOTER ─────────────────────────────────────────── */
#footer {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text-3);
  background: var(--bg-surface);
  letter-spacing: 0.04em;
}

/* ─── PANELS ─────────────────────────────────────────── */
.panel { display: none; }
.panel.active { display: flex; flex-direction: column; gap: 24px; max-width: 100%; overflow-x: hidden; }

/* ─── PANEL HEADER ───────────────────────────────────── */
.panel-header { display: flex; flex-direction: column; gap: 6px; }
.panel-eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sol-purple); opacity: 0.85;
}
.panel-title {
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.1;
}
.panel-desc {
  font-size: 15.5px; color: var(--text-2);
  max-width: 520px; line-height: 1.65;
}

/* ─── MAIN CARD ──────────────────────────────────────── */
.glow-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-xl);
  padding: 24px;
}

/* ─── STAT GRID ──────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
/* Network Status — always 4 equal columns, smaller value font to fit fee string */
#ns-stats { grid-template-columns: repeat(4, 1fr); }
#ns-stats .stat-value { font-size: 20px; }

.stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--ease);
}
.stat-card:hover { border-color: var(--border-mid); }

.stat-label {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-3);
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 30px; font-weight: 600;
  letter-spacing: -0.03em; line-height: 1;
  color: var(--text-1);
}
.stat-value.green { color: var(--green); }
.stat-value.amber { color: var(--amber); }
.stat-value.red   { color: var(--red); }
.stat-sub { font-size: 14px; color: var(--text-2); }

/* ─── INPUTS ─────────────────────────────────────────── */
.input-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.sol-input {
  flex: 1; min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  padding: 9px 14px;
  font-family: var(--font-ui);
  font-size: 15.5px; color: var(--text-1);
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.sol-input::placeholder { color: var(--text-3); }
.sol-input:focus {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px rgba(153,69,255,0.08);
}

.sol-select {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  padding: 9px 14px;
  font-family: var(--font-ui);
  font-size: 15.5px; color: var(--text-1);
  outline: none; cursor: pointer;
  transition: border-color var(--ease);
}
.sol-select:focus { border-color: var(--border-accent); }

.sol-btn {
  background: var(--sol-grad);
  border: none; border-radius: var(--r-md);
  padding: 9px 20px;
  font-family: var(--font-ui);
  font-size: 15.5px; font-weight: 600;
  color: #fff; cursor: pointer;
  transition: opacity var(--ease), transform var(--ease);
  white-space: nowrap;
}
.sol-btn:hover { opacity: 0.85; }
.sol-btn:active { transform: scale(0.98); }
.sol-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

.sol-btn.secondary {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  color: var(--text-1);
}
.sol-btn.secondary:hover { border-color: var(--border-accent); opacity: 1; }

/* ─── DATA TABLE ─────────────────────────────────────── */
.data-table {
  width: 100%; border-collapse: collapse;
  font-size: 15px;
}
.data-table th {
  text-align: left; padding: 8px 14px 10px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border-dim);
}
.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-dim);
  color: var(--text-2);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-hover); }
.data-table .mono { font-family: var(--font-ui); font-size: 14px; font-variant-numeric: tabular-nums; }
.data-table .bright { color: var(--text-1); }
.data-table .green  { color: var(--green); }
.data-table .amber  { color: var(--amber); }
.data-table .red    { color: var(--red); }
.data-table .accent { color: var(--sol-purple); }

/* ─── CHART ──────────────────────────────────────────── */
.chart-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.chart-bars {
  display: flex; align-items: flex-end; gap: 4px; height: 80px;
}
.chart-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(153,69,255,0.7) 0%, rgba(20,241,149,0.2) 100%);
  transition: opacity var(--ease);
  cursor: default;
}
.chart-bar:hover { opacity: 0.75; }
.chart-label-row {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 13px; color: var(--text-3);
}

/* ─── PROGRESS BAR ───────────────────────────────────── */
.progress-wrap {
  background: var(--bg-elevated);
  border-radius: 4px; height: 4px; overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 4px;
  background: var(--sol-grad);
  transition: width 0.4s ease;
}

/* ─── STATUS DOT ─────────────────────────────────────── */
.status-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.status-dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.status-dot.amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: pulse 1.6s ease-in-out infinite; }
.status-dot.red   { background: var(--red);   box-shadow: 0 0 6px var(--red); }

/* ─── FEE TIER CARDS ─────────────────────────────────── */
.fee-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.fee-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-lg);
  padding: 18px 16px;
  text-align: center;
  transition: border-color var(--ease);
}
.fee-card:hover { border-color: var(--border-mid); }
.fee-tier { font-size: 12.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.fee-value { font-family: var(--font-ui); font-size: 24px; font-weight: 600; color: var(--text-1); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fee-unit  { font-size: 13px; color: var(--text-3); margin-top: 6px; }

/* ─── FAUCET ROW ─────────────────────────────────────── */
.faucet-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-md);
}
.faucet-name { flex: 1; font-size: 15.5px; font-weight: 500; color: var(--text-1); }
.faucet-status { font-size: 14px; color: var(--text-2); min-width: 100px; text-align: right; }

/* ─── RPC ROW ────────────────────────────────────────── */
.rpc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-md);
}
.rpc-name    { flex: 1; font-size: 15.5px; color: var(--text-1); }
.rpc-latency { font-family: var(--font-ui); font-size: 20px; font-weight: 600; min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.rpc-bar-wrap { width: 80px; }
.rpc-latency.green { color: var(--green); }
.rpc-latency.amber { color: var(--amber); }
.rpc-latency.red   { color: var(--red); }

/* ─── SHIMMER ────────────────────────────────────────── */
.shimmer {
  display: inline-block;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: sh 2s infinite;
  border-radius: 4px;
}
@keyframes sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.sh-val  { height: 26px; width: 60%; }
.sh-sub  { height: 9px; width: 45%; }
.sh-line { height: 9px; width: 100%; margin-bottom: 4px; }
.sh-line.w80 { width: 80%; }
.sh-line.w60 { width: 60%; }
.sh-line.w40 { width: 40%; }

/* ─── ERROR / STATUS ─────────────────────────────────── */
.error-msg {
  font-size: 14.5px; color: var(--red);
  padding: 10px 14px;
  background: rgba(255,95,95,0.07);
  border: 1px solid rgba(255,95,95,0.18);
  border-radius: var(--r-md);
}
.empty-state {
  text-align: center; padding: 36px 20px;
  color: var(--text-3); font-size: 15px;
}

/* ─── WALLET CHIPS ───────────────────────────────────── */
.wallet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wallet-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: 20px;
  font-size: 14px; font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.wallet-chip .remove-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 16px; padding: 0; line-height: 1;
}
.wallet-chip .remove-btn:hover { color: var(--red); }
.wallet-chip.active { border-color: var(--border-accent); color: var(--sol-purple); }

/* ─── AD SLOTS ───────────────────────────────────────── */
.ad-slot {
  /* Let the SDK size the ad — match test-page-sample.html pattern */
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.ad-slot:empty { min-height: 0; }
/* Force SDK-injected children to respect container width */
.ad-slot > * { max-width: 100% !important; box-sizing: border-box !important; }
.ad-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.15); }
.ad-size  { font-size: 13px; color: rgba(153,69,255,0.3); }

/* ─── LAYOUT HELPERS ─────────────────────────────────── */
.with-ad   { display: flex; gap: 20px; align-items: flex-start; }
.with-ad > .glow-card { flex: 1; min-width: 0; }
.dev-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }

/* ── Panel two-column layout: content + skyscraper ad rail ── */
.panel-layout {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 24px;
  align-items: start;
}
.panel-main  { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.panel-rail  { width: 160px; flex-shrink: 0; position: sticky; top: 24px; }

/* ── Explainer / editorial content blocks ── */
.explainer {
  border: 1px solid var(--border-dim);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 16px;
  background: rgba(255,255,255,0.02);
}
.explainer h3 {
  font-size: 15px; font-weight: 600; color: var(--text-1);
  margin: 0; letter-spacing: -0.01em;
}
.explainer p {
  font-size: 14px; line-height: 1.7; color: var(--text-2); margin: 0;
}
.explainer ul {
  font-size: 14px; line-height: 1.8; color: var(--text-2);
  padding-left: 18px; margin: 0;
}
.explainer ul li { margin-bottom: 4px; }
.explainer-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.explainer-fact {
  background: var(--bg-elevated);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.explainer-fact .ef-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 4px; }
.explainer-fact .ef-value { font-size: 15px; font-weight: 600; color: var(--text-1); }
.explainer-fact .ef-sub   { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.flex-col   { display: flex; flex-direction: column; gap: 10px; }
.mt-16 { margin-top: 16px; }
.mt-8  { margin-top: 8px; }

/* ─── GREEN / BRIGHT / ACCENT TEXT ──────────────────── */
.green  { color: var(--green); }
.amber  { color: var(--amber); }
.red    { color: var(--red); }
.bright { color: var(--text-1); }
.mono   { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.accent { color: var(--sol-purple); }

/* ─── SCROLLBAR ──────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --sidebar-w: 52px; }
  .sb-item span, .sb-count, .sb-label { display: none; }
  .sb-item { justify-content: center; padding: 8px; }
  .sb-item.active::before { display: none; }
  .brand-name { display: none; }
  .topbar-brand { justify-content: center; padding: 0; }
  .dev-layout { grid-template-columns: 1fr; }
  .panel-layout { grid-template-columns: 1fr; }
  .panel-rail { width: 100%; position: static; }
  .with-ad { flex-direction: column; }
}

/* ─── COMING SOON PILL ───────────────────────────────── */
.cs-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500;
  color: var(--sol-purple);
  background: rgba(153,69,255,0.08);
  border: 1px solid rgba(153,69,255,0.25);
  border-radius: 20px;
  padding: 4px 12px;
  width: fit-content;
  margin-top: 12px;
}
.cs-pip { width: 5px; height: 5px; border-radius: 50%; background: var(--sol-purple); box-shadow: 0 0 6px rgba(153,69,255,0.6); }

/* ─── GLOW CARD ──────────────────────────────────────── */
.glow-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-xl);
  padding: 24px;
  position: relative; overflow: hidden;
}
.glow-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(153,69,255,0.3), rgba(20,241,149,0.15), transparent);
}

/* ─── STAT GRID / CARD ───────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); gap: 12px; }
.stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden;
  transition: border-color var(--ease);
}
.stat-card:hover { border-color: var(--border-mid); }
.stat-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(153,69,255,0.2), transparent);
}
.stat-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.stat-value { font-family: var(--font-ui); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-1); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-value.green { color: var(--green); }
.stat-value.amber { color: var(--amber); }
.stat-value.red   { color: var(--red); }
.stat-sub { font-size: 14px; color: var(--text-2); }

/* ─── GLOBAL WALLET PILL ─────────────────────────────── */
.wallet-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 14.5px; font-weight: 500;
  cursor: pointer;
  transition: all 140ms ease;
  user-select: none;
  white-space: nowrap;
}
.wallet-pill--empty {
  color: rgba(255,255,255,0.65);
  border: 1px dashed rgba(255,255,255,0.22);
  background: transparent;
}
.wallet-pill--empty:hover {
  color: var(--text-2);
  border-color: var(--border-accent);
  background: rgba(153,69,255,0.06);
}
.wallet-pill--set {
  color: var(--sol-green);
  border: 1px solid rgba(20,241,149,0.25);
  background: rgba(20,241,149,0.06);
  font-variant-numeric: tabular-nums;
}
.wallet-pill--set:hover {
  border-color: rgba(20,241,149,0.4);
  background: rgba(20,241,149,0.10);
}
.wallet-pill-icon {
  width: 13px; height: 13px; flex-shrink: 0; opacity: 0.7;
}
.wallet-pill-clear {
  background: none; border: none; cursor: pointer;
  color: inherit; font-size: 17px; line-height: 1;
  padding: 0; margin-left: 2px; opacity: 0.6;
  transition: opacity 140ms ease;
}
.wallet-pill-clear:hover { opacity: 1; color: var(--red); }

/* ─── WALLET MODAL ───────────────────────────────────── */
.wallet-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 100;
}
.wallet-modal {
  position: fixed;
  top: calc(var(--topbar-h) + 8px);
  right: 80px;
  z-index: 101;
  width: 420px;
  max-width: calc(100vw - 32px);
}
.wallet-modal-inner {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(153,69,255,0.1);
  display: flex; flex-direction: column; gap: 12px;
}
.wallet-modal-title {
  font-size: 16px; font-weight: 600; color: var(--text-1);
}
.wallet-modal-desc {
  font-size: 14px; color: var(--text-2); line-height: 1.5;
}
.wallet-modal-row {
  display: flex; gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   TX HISTORY — DETAIL STATE  (txd-*)
═══════════════════════════════════════════════════════════════ */

/* Detail state wrapper — same flex-col gap as a normal panel */
#txh-detail-state { display:flex; flex-direction:column; gap:24px; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.txd-breadcrumb {
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
}
.txd-back-btn {
  display:flex; align-items:center; gap:6px;
  background:var(--bg-elevated); border:1px solid var(--border-mid);
  border-radius:var(--r-md); padding:6px 12px;
  font-family:var(--font-ui); font-size:14px; font-weight:500;
  color:var(--text-2); cursor:pointer;
  transition:all var(--ease);
}
.txd-back-btn svg { width:12px; height:12px; }
.txd-back-btn:hover { color:var(--text-1); border-color:var(--border-accent); }
.txd-bc-sep { color:var(--text-3); font-size:14px; }
.txd-bc-sig { font-size:14px; color:var(--text-2); }

.txd-cluster-badge {
  font-size:12px; font-weight:600; letter-spacing:0.04em;
  padding:3px 10px; border-radius:20px; margin-left:auto;
}
.txd-cluster-mainnet { color:var(--green); background:rgba(20,241,149,0.08); border:1px solid rgba(20,241,149,0.22); }
.txd-cluster-devnet  { color:var(--amber); background:rgba(255,181,71,0.08); border:1px solid rgba(255,181,71,0.22); }

/* ── Loading ────────────────────────────────────────────────── */
.txd-loading {
  display:flex; align-items:center; gap:14px;
  padding:28px 24px;
  background:var(--bg-surface); border:1px solid var(--border-dim);
  border-radius:var(--r-xl);
}
.txd-spinner {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(153,69,255,0.15);
  border-top-color:var(--sol-purple);
  animation:txd-spin 650ms linear infinite;
}
@keyframes txd-spin { to { transform:rotate(360deg); } }

/* ── Error ──────────────────────────────────────────────────── */
.txd-error-state {
  display:flex; align-items:flex-start; gap:16px;
  padding:24px;
  background:rgba(255,95,95,0.05); border:1px solid rgba(255,95,95,0.15);
  border-radius:var(--r-xl);
}
.txd-error-msg  { font-size:16px; font-weight:600; color:var(--text-1); margin-bottom:4px; }
.txd-error-hint { font-size:14px; color:var(--text-2); line-height:1.55; }

/* ── Sig row ────────────────────────────────────────────────── */
.txd-label {
  font-size:12px; font-weight:600; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--text-3);
  margin-bottom:8px;
}
.txd-sig-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.txd-sig-full {
  font-size:16px; font-weight:600; color:var(--text-1);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.txd-pill-btn {
  display:flex; align-items:center; gap:6px;
  padding:5px 12px;
  background:var(--bg-elevated); border:1px solid var(--border-mid);
  border-radius:var(--r-md);
  font-family:var(--font-ui); font-size:13px; font-weight:500;
  color:var(--text-2); cursor:pointer; white-space:nowrap;
  transition:all var(--ease); text-decoration:none;
}
.txd-pill-btn svg { width:12px; height:12px; flex-shrink:0; }
.txd-pill-btn:hover { border-color:var(--border-accent); color:var(--text-1); }
.txd-pill-btn--purple {
  background:rgba(153,69,255,0.07); border-color:rgba(153,69,255,0.22); color:var(--sol-purple);
}
.txd-pill-btn--purple:hover { background:rgba(153,69,255,0.13); color:var(--sol-purple); }

/* ── 4-stat grid ────────────────────────────────────────────── */
.txd-stat-grid { grid-template-columns:repeat(4,1fr); }

/* ── From / To ──────────────────────────────────────────────── */
.txd-accounts {
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:12px; align-items:center;
}
.txd-acct-card {
  background:var(--bg-elevated); border:1px solid var(--border-dim);
  border-radius:var(--r-lg); padding:16px;
  display:flex; flex-direction:column; gap:7px; min-width:0;
}
.txd-acct-head { display:flex; align-items:center; gap:8px; }
.txd-acct-badge {
  font-size:10.5px; font-weight:700; letter-spacing:0.10em;
  padding:2px 8px; border-radius:20px; flex-shrink:0;
}
.txd-badge-from { color:var(--amber); background:rgba(255,181,71,0.10); border:1px solid rgba(255,181,71,0.25); }
.txd-badge-to   { color:var(--green); background:rgba(20,241,149,0.08); border:1px solid rgba(20,241,149,0.22); }
.txd-acct-role  { font-size:12.5px; color:var(--text-3); }
.txd-acct-addr  { font-size:13.5px; font-weight:500; color:var(--text-1); word-break:break-all; line-height:1.4; }
.txd-acct-delta { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.txd-acct-delta.green { color:var(--green); }
.txd-acct-delta.red   { color:var(--red); }

.txd-arrow-col {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:var(--text-3); padding:0 4px; flex-shrink:0;
}
.txd-arrow-col svg { width:28px; }
.txd-transfer-sol {
  font-size:12.5px; font-weight:600; color:var(--green);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}

/* ── Indium reward memo callout ─────────────────────────────── */
.txd-memo-indium {
  background:linear-gradient(135deg, rgba(153,69,255,0.08) 0%, rgba(20,241,149,0.05) 100%);
  border:1px solid rgba(153,69,255,0.28); border-radius:var(--r-lg);
  padding:18px 20px; display:flex; flex-direction:column; gap:12px;
  position:relative; overflow:hidden;
}
.txd-memo-indium::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--sol-grad);
}
.txd-memo-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.txd-memo-badge {
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--sol-purple);
}
.txd-memo-badge svg { width:14px; height:14px; stroke:var(--sol-purple); }
.txd-proof-tag {
  font-size:12px; font-weight:600; color:var(--green);
  background:rgba(20,241,149,0.10); border:1px solid rgba(20,241,149,0.20);
  border-radius:20px; padding:2px 10px;
}
.txd-memo-text {
  font-size:15px; font-weight:500; color:var(--text-1);
  line-height:1.65; word-break:break-word;
}

/* ── Generic memo callout ───────────────────────────────────── */
.txd-memo-generic {
  background:var(--bg-elevated); border:1px solid var(--border-mid);
  border-radius:var(--r-lg); padding:14px 18px;
  display:flex; flex-direction:column; gap:6px;
}
.txd-generic-memo-text { font-size:14.5px; color:var(--text-1); line-height:1.55; word-break:break-word; }

/* ── All-accounts collapsible ───────────────────────────────── */
.txd-details {
  border:1px solid var(--border-dim); border-radius:var(--r-lg); overflow:hidden;
}
.txd-details-summary {
  display:flex; align-items:center; gap:8px;
  padding:11px 16px;
  font-size:13.5px; font-weight:600; color:var(--text-2);
  cursor:pointer; user-select:none; list-style:none;
  background:var(--bg-elevated); transition:color var(--ease);
}
.txd-details-summary::-webkit-details-marker { display:none; }
.txd-details-summary::before { content:'›'; font-size:18px; line-height:1; color:var(--text-3); transition:transform 180ms ease; }
details[open] .txd-details-summary::before { transform:rotate(90deg); }
.txd-details-summary:hover { color:var(--text-1); }
.txd-details-count { font-size:12px; color:var(--text-3); font-weight:400; }
.txd-acct-role-tag { font-size:11px; color:var(--text-3); margin-left:8px; font-weight:400; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:860px) {
  .txd-stat-grid  { grid-template-columns:repeat(2,1fr); }
  .txd-accounts   { grid-template-columns:1fr; }
  .txd-arrow-col  { display:none; }
}