/* ==========================================================================
   ArcScan — Arc Explorer
   Design system + components. Original CSS, explorer-conventional layout.
   Theme: Arc "jelly" violet (#051839) on a licorice-toned block-explorer chrome.
   ========================================================================== */

/* ------------------------------- Tokens --------------------------------- */
:root {
  /* Brand — Arc navy (#051839), sampled straight out of the Arc mark: a white arch on navy. Var names
     stay --hs-green* so nothing else in the codebase changes — only the values.
     Navy is a DARK fill, so on-accent text (--hs-on-green) is white. Note the ramp runs the OPPOSITE
     way to a light-lime brand: navy already sits at the dark end, so -700/-800 step LIGHTER into
     mid-blues. Making them darker (the usual direction) would render links and active text
     effectively black and indistinguishable from body copy. */
  --hs-green:        #051839;   /* Arc navy — sampled from the mark itself; button/badge fills */
  --hs-green-600:    #0c2450;   /* hover — lifted, because navy has no room left to deepen */
  --hs-green-700:    #1e4f9c;   /* mid blue — accents/icons/links on light (~8:1 on white) */
  --hs-green-800:    #14336b;   /* deep blue — active text/headings on light */
  --hs-green-glow:   rgba(30, 79, 156, .35);
  --hs-green-tint:   #e9eff9;   /* light blue background tint */
  --hs-on-green:     #ffffff;   /* readable text ON a navy fill (white, ~17:1) */
  --hs-hl:           #e4ecf9;   /* address hover-highlight (soft blue, like Etherscan's amber) */

  /* Links / accents (readable blue on white) */
  --hs-link:         #1e4f9c;
  --hs-link-hover:   #14336b;

  /* Neutrals */
  --hs-bg:           #f8f9fa;
  --hs-card:         #ffffff;
  --hs-soft:         #f2f4f8;
  --hs-soft-2:       #f7f9fc;
  --hs-border:       #e7eaf3;
  --hs-border-2:     #eef1f6;
  --hs-text:         #1e2022;
  --hs-body:         #4a4f55;
  --hs-muted:        #6c757d;
  --hs-muted-2:      #8a92a6;
  --hs-heading:      #10141a;

  /* Dark chrome */
  --hs-dark:         #0b0e11;
  --hs-dark-2:       #10151b;
  --hs-dark-3:       #1b2027;

  /* State */
  --hs-red:          #de5757;
  --hs-red-bg:       #fbeaea;
  --hs-amber:        #e2a03f;
  --hs-blue:         #3498db;

  /* Chrome / effects */
  --hs-shadow:       0 .5rem 1.2rem rgba(120, 130, 150, .12);
  --hs-shadow-sm:    0 .25rem .55rem rgba(120, 130, 150, .12);
  --hs-radius:       .5rem;
  --hs-radius-sm:    .35rem;

  --hs-mono: "SFMono-Regular", ui-monospace, "Roboto Mono", "Consolas", monospace;
  --hs-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Inter, Arial, sans-serif;
}

/* Dark theme (toggled by the sun icon; persisted in localStorage) */
:root[data-theme="dark"] {
  /* Surfaces are Arc's own navy, deepened — the mark's background tone carried through the chrome. */
  --hs-bg:       #0a1120;
  --hs-card:     #101a2f;
  --hs-soft:     #16223c;
  --hs-soft-2:   #0d1526;
  --hs-border:   #1f2c48;
  --hs-border-2: #16203a;
  --hs-text:     #e6e9ef;
  --hs-body:     #aab4c4;
  --hs-muted:    #8590a3;
  --hs-muted-2:  #67718a;
  --hs-heading:  #f2f5fa;
  /* The accent MUST lift here. On light the brand navy IS the fill, but these surfaces are navy
     too — an unlifted #051839 button would be invisible against them. */
  --hs-green:      #3b6fd4;
  --hs-green-600:  #4d7ee0;
  --hs-green-700:  #7aa7f0;   /* accents/icons on dark (~7:1 on --hs-card) */
  --hs-green-800:  #a3c4f7;   /* active text on dark */
  --hs-green-glow: rgba(59, 111, 212, .40);
  --hs-green-tint: rgba(59, 111, 212, .18);
  --hs-hl:         rgba(59, 111, 212, .22);   /* address hover-highlight on dark */
  --hs-link:       #7aa7f0;   /* brighter blue links on dark */
  --hs-link-hover: #a3c4f7;
  --hs-shadow:    0 .5rem 1.2rem rgba(0, 0, 0, .45);
  --hs-shadow-sm: 0 .25rem .55rem rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--hs-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--hs-body);
  background: var(--hs-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--hs-link); text-decoration: none; }
a:hover { color: var(--hs-link-hover); text-decoration: none; }

h1,h2,h3,h4,h5 { color: var(--hs-heading); font-weight: 600; margin: 0; }

img { max-width: 100%; }

.hs-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
}

.mono { font-family: var(--hs-mono); }
.eth-ico { width: 9px; height: auto; vertical-align: -1px; margin-right: 2px; opacity: .85; }
/* pulsating "Live" indicator */
.live-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--hs-green-700); font-weight: 500; }
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--hs-green); flex-shrink: 0; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--hs-green); animation: livepulse 1.6s ease-out infinite; }
@keyframes livepulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(2.8); opacity: 0; } }
.muted { color: var(--hs-muted); }
.nowrap { white-space: nowrap; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

/* ---------------------------- Top bar (sticky) -------------------------- */
/* This is the row that follows you down the page — search, theme, settings, price/gas.
   The nav row below scrolls up underneath it, so this must stay opaque and sit on a
   higher layer than the header. */
.hs-topbar {
  background: var(--hs-card);
  border-bottom: 1px solid var(--hs-border);
  font-size: 12.5px;
  position: sticky; top: 0; z-index: 41;
  box-shadow: 0 1px 0 rgba(120, 130, 150, .05);
}
.hs-topbar .hs-container { display: flex; align-items: center; gap: 16px; min-height: 46px; }
.hs-topbar .tb-left { display: flex; align-items: center; gap: 12px; color: var(--hs-muted); flex-shrink: 0; }
.hs-topbar .tb-stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hs-topbar .tb-stat b { color: var(--hs-link); font-weight: 500; }
.hs-topbar .tb-chg { font-size: 12px; }
.hs-topbar .tb-chg.up { color: var(--hs-green-700); }
.hs-topbar .tb-chg.down { color: var(--hs-red); }
.hs-topbar .tb-sep { color: var(--hs-border); }
.hs-topbar .tb-gas svg { color: var(--hs-muted-2); vertical-align: -2px; }
.hs-topbar .tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; min-width: 0; }
.tb-search {
  display: flex; align-items: center; gap: 8px; flex: 1; max-width: 540px;
  height: 34px; padding: 0 11px; background: var(--hs-soft);
  border: 1px solid var(--hs-border); border-radius: 8px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.tb-search:focus-within { background: var(--hs-card); border-color: var(--hs-green); box-shadow: 0 0 0 3px var(--hs-green-glow); }
.tb-search .tb-search-ic { color: var(--hs-muted-2); display: flex; flex-shrink: 0; }
.tb-search .tb-search-ic svg { width: 15px; height: 15px; }
.tb-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--hs-text); min-width: 0; }
.tb-search input::placeholder { color: var(--hs-muted-2); }
.tb-search .tb-kbd { border: 1px solid var(--hs-border); border-radius: 5px; padding: 0 7px; font-size: 12px; color: var(--hs-muted); background: var(--hs-card); font-family: var(--hs-mono); }
.tb-icon {
  width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--hs-border); border-radius: 8px;
  background: var(--hs-card); color: var(--hs-muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s;
}
.tb-icon:hover { background: var(--hs-soft); color: var(--hs-text); }
.tb-icon svg { width: 16px; height: 16px; }

/* X / Twitter — leads the top bar, left of the price/gas stats and set apart by a hairline.
   Reuses the same 34px chip as the utility icons on the right so both ends of the bar match,
   and takes the brand's own monochrome inversion on hover (ink and surface swap, per theme). */
.tb-idiv { width: 1px; height: 20px; background: var(--hs-border); flex: none; margin: 0 2px; }
.tb-x {
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
/* The X glyph is solid, not stroked, so it reads heavier than the line icons at the same box size. */
.tb-x svg { width: 14px; height: 14px; }
.tb-x:hover { background: var(--hs-text); border-color: var(--hs-text); color: var(--hs-card); transform: translateY(-1px); }
.tb-x:active { transform: translateY(0); }
.tb-x:focus-visible { outline: 2px solid var(--hs-green); outline-offset: 2px; }
.tb-net { width: 34px; height: 34px; flex-shrink: 0; border: 0; border-radius: 8px; background: var(--hs-green); cursor: pointer; }
.tb-net:hover { background: var(--hs-green-600); }

/* -------------------------- Header (scrolls away) ----------------------- */
/* Deliberately NOT sticky — the top bar above is the row that stays. Still positioned,
   because the nav dropdowns are absolutely positioned inside it and would lose their
   stacking context (and open behind page content) if this went static. */
.hs-header {
  background: var(--hs-card);
  border-bottom: 1px solid var(--hs-border);
  position: relative; z-index: 40;
  box-shadow: 0 1px 0 rgba(120, 130, 150, .05);
}
.hs-header .hs-container { display: flex; align-items: center; gap: 20px; min-height: 58px; }
.hs-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* The mark is a square SVG badge — sized by height, width follows. */
.hs-logo .mark { width: auto; height: 34px; flex-shrink: 0; }
/* The name is always set in TEXT beside the mark (no baked wordmark artwork), so it recolours
   with the theme and stays sharp at any size. */
.hs-logo .word { font-size: 19px; font-weight: 700; letter-spacing: -.3px; color: var(--hs-heading); }
.hs-logo .word b { color: var(--hs-green-700); font-weight: 700; }

.hs-nav-inline { margin-left: auto; display: flex; align-items: center; gap: 1px; flex-wrap: nowrap; }
.hs-nav-inline .nav-item {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 11px; height: 34px;
  border-radius: 7px; font-size: 14px; font-weight: 500; color: var(--hs-body); white-space: nowrap;
}
.hs-nav-inline .nav-item:hover { background: var(--hs-green-tint); color: var(--hs-green-800); }
.hs-nav-inline .nav-item.active { color: var(--hs-green-800); }
.hs-nav-inline .nav-item .caret { width: 8px; height: 8px; opacity: .5; }
.hs-nav-inline .nav-div { color: var(--hs-border); margin: 0 6px; }
.hs-nav-inline .nav-signin { color: var(--hs-body); }
.hs-nav-inline .nav-signin svg { width: 15px; height: 15px; }
.nav-drop { position: relative; }
.nav-drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }  /* hover bridge */
.nav-menu {
  position: absolute; top: calc(100% + 7px); left: 0; min-width: 278px;
  background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: 12px;
  box-shadow: 0 16px 42px rgba(28, 38, 58, .16); padding: 8px;
  display: none; z-index: 50;
}
.nav-drop:hover .nav-menu { display: block; animation: navmenuin .14s ease; }
@keyframes navmenuin { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
/* "More" is the last item in the bar — anchor it to the right so it opens leftwards and can
   never run off the edge of the viewport. */
.nav-menu-right { left: auto; right: 0; }
/* multi-column mega-menu: grouped headings instead of one long list */
.nav-menu-wide { min-width: 0; padding: 12px; }
.nav-cols { display: flex; align-items: flex-start; gap: 4px; }
.nav-col { display: flex; flex-direction: column; min-width: 216px; }
.nav-col + .nav-col { border-left: 1px solid var(--hs-border-2); padding-left: 6px; margin-left: 6px; }
.nav-col-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hs-muted-2); padding: 3px 11px 7px;
}
@media (max-width: 900px) {
  .nav-cols { flex-direction: column; gap: 0; }
  .nav-col { min-width: 210px; }
  .nav-col + .nav-col { border-left: 0; border-top: 1px solid var(--hs-border-2); padding-left: 0; margin-left: 0; margin-top: 6px; padding-top: 6px; }
}
.nav-menu .nav-mi { display: flex; align-items: flex-start; gap: 11px; padding: 9px 11px; border-radius: 9px; white-space: nowrap; }
.nav-menu .nav-mi:hover { background: var(--hs-soft); }
.nav-mi-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--hs-green-tint); color: var(--hs-green-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-mi-ic svg { width: 17px; height: 17px; }
.nav-mi-body { display: flex; flex-direction: column; }
.nav-mi-t { font-size: 13.5px; font-weight: 600; color: var(--hs-text); }
.nav-mi-d { font-size: 12px; color: var(--hs-muted); font-weight: 400; margin-top: 1px; }
.nav-menu .nav-mi:hover .nav-mi-t { color: var(--hs-green-800); }

/* Search box */
.hs-search {
  display: flex;
  align-items: stretch;
  background: var(--hs-card);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  height: 42px;
  transition: border-color .15s, box-shadow .15s;
}
.hs-search:focus-within {
  border-color: var(--hs-green);
  box-shadow: 0 0 0 3px var(--hs-green-glow);
}
.hs-search .filter {
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
  font-size: 13px; color: var(--hs-muted);
  border-right: 1px solid var(--hs-border);
  cursor: pointer; white-space: nowrap;
}
.hs-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  padding: 0 14px; font-size: 13px; color: var(--hs-text); min-width: 0;
}
.hs-search input::placeholder { color: var(--hs-muted-2); }
.hs-search .go {
  border: 0; background: var(--hs-green); color: var(--hs-on-green);
  padding: 0 16px; margin: 5px; border-radius: var(--hs-radius-sm);
  cursor: pointer; display: flex; align-items: center; font-weight: 600;
  transition: background .15s;
}
.hs-search .go:hover { background: var(--hs-green-600); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: var(--hs-radius-sm);
  font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s; white-space: nowrap;
}
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }
.btn-primary { background: var(--hs-green); color: var(--hs-on-green); font-weight: 600; }
.btn-primary:hover { background: var(--hs-green-600); color: var(--hs-on-green); }
.btn-outline { background: var(--hs-card); border-color: var(--hs-border); color: var(--hs-body); }
.btn-outline:hover { border-color: var(--hs-green); color: var(--hs-green-700); background: var(--hs-green-tint); }
.btn-dark { background: var(--hs-dark-3); color: #fff; }
.btn-dark:hover { background: #262c34; color:#fff; }

/* (nav is now inline in the header, above) */

/* --------------------------------- Hero --------------------------------- */
.hs-hero {
  position: relative;
  background:
    radial-gradient(900px 380px at 82% -10%, rgba(59, 111, 212,.22), transparent 60%),
    radial-gradient(700px 420px at 8% 120%, rgba(59, 111, 212,.12), transparent 55%),
    linear-gradient(120deg, #051839 0%, #04122c 46%, #030d20 100%);
  color: #e8eef7;
  padding: 34px 0 118px;
  overflow: hidden;
}
.hs-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpath fill='none' stroke='%233b6fd4' stroke-opacity='0.06' stroke-width='1' d='M15 0l15 8.66v17.32L15 34.64 0 25.98V8.66zM45 0l15 8.66v17.32L45 34.64 30 25.98V8.66zM30 26l15 8.66v17.32L30 60.6l-15-8.62V34.66z'/%3E%3C/svg%3E");
  opacity: .8;
}
/* interactive parallax layers */
.hero-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hs-hero .hs-container { position: relative; z-index: 1; }
.fx-orb { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .55; will-change: transform; }
.fx1 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(59, 111, 212, .62), transparent 70%); top: -100px; left: 5%; }
.fx2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(59, 111, 212, .44), transparent 70%); bottom: -130px; right: 10%; }
.fx3 { width: 230px; height: 230px; background: radial-gradient(circle, rgba(122, 167, 240, .42), transparent 72%); top: 22%; right: 36%; }
.fx-grid {
  position: absolute; inset: -18%; will-change: transform; opacity: .7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpath fill='none' stroke='%233b6fd4' stroke-opacity='0.10' stroke-width='1' d='M15 0l15 8.66v17.32L15 34.64 0 25.98V8.66zM45 0l15 8.66v17.32L45 34.64 30 25.98V8.66zM30 26l15 8.66v17.32L30 60.6l-15-8.62V34.66z'/%3E%3C/svg%3E");
}
.hs-hero h1 {
  color: #fff; font-size: 24px; font-weight: 600; margin-bottom: 18px;
  position: relative; z-index: 1;
}
/* The hero sits on a fixed dark-navy gradient in BOTH themes, so the accent word must be a LIGHT
   blue — not --hs-green, which is the brand navy and would vanish into the background. */
.hs-hero h1 .accent { color: #7aa7f0; }
.hs-hero .hero-search { position: relative; z-index: 1; max-width: 760px; }
.hs-hero .hero-search .hs-search { height: 52px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.hs-hero .hero-tags { margin-top: 14px; font-size: 12.5px; color: #93a3bd; position: relative; z-index: 1; }
.hs-hero .hero-tags a { color: #c3d5f0; margin-right: 6px; }

/* Stat panel floats over hero bottom */
.hs-statwrap { margin-top: -92px; position: relative; z-index: 2; }
.hs-statpanel {
  background: var(--hs-card);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  box-shadow: var(--hs-shadow);
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.5fr;   /* price/mcap | 2x2 metrics | chart */
  align-items: stretch;                     /* all three columns same height */
  overflow: hidden;
}
.hs-statpanel .stat-col { padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.hs-statpanel .stat-col:not(:last-child) { border-right: 1px solid var(--hs-border-2); }

/* col 1: two stacked stats (ETH price, market cap) */
.stat { display: flex; align-items: flex-start; gap: 13px; }
.stat + .stat { border-top: 1px solid var(--hs-border-2); padding-top: 16px; }
.stat .ic, .metric-row .ic {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--hs-green-tint); color: var(--hs-green-700);
}
.stat .ic svg, .metric-row .ic svg { width: 16px; height: 16px; }
.stat .body { min-width: 0; flex: 1; }
.stat .label, .metric-row .m .label {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--hs-muted); font-weight: 500;
}
.stat .value, .metric-row .m .value { font-size: 15px; color: var(--hs-text); font-weight: 500; margin-top: 2px; }
.stat .value .sub, .metric-row .m .value .sub { color: var(--hs-muted); font-weight: 400; font-size: 12.5px; }
.stat .value .chg { font-size: 12px; }
.stat .up { color: var(--hs-green-700); }
.stat .down { color: var(--hs-red); }

/* col 2: 2x2 metric grid (block / transactions / gas / token transfers) */
.hs-statpanel .col-metrics { padding: 0; gap: 0; justify-content: center; }
.metric-row { display: flex; align-items: center; gap: 13px; padding: 16px 24px; }
.metric-row + .metric-row { border-top: 1px solid var(--hs-border-2); }
.metric-row .m { flex: 1; min-width: 0; }

/* col 3: chart — fills its column, aligned to the same level as the metrics */
.hs-statpanel .chart-col { padding: 16px 22px; justify-content: space-between; gap: 4px; }
.chart-col .chart-head { display: flex; justify-content: space-between; align-items: baseline; }
.chart-col .chart-head .label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--hs-muted); }
.chart-col .chart-head .cap { font-size: 11px; color: var(--hs-muted-2); }

/* --------------------------------- Panels ------------------------------- */
.hs-main { padding: 26px 0 40px; }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.card {
  background: var(--hs-card);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  box-shadow: var(--hs-shadow);
}
.card .card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--hs-border-2);
}
.card .card-head h2 { font-size: 15px; font-weight: 600; }
.card .card-head .sub { font-size: 12px; color: var(--hs-muted); }
.card .card-body { padding: 4px 0; max-height: 545px; overflow: auto; }
.card .card-foot { border-top: 1px solid var(--hs-border-2); padding: 12px; }
.card .card-foot .btn { width: 100%; }

/* list rows (blocks / txns on home) */
.lrow {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; border-bottom: 1px solid var(--hs-border-2);
}
.lrow:last-child { border-bottom: 0; }
.lrow .badge {
  width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0;
  background: var(--hs-soft); color: var(--hs-muted);
  display: flex; align-items: center; justify-content: center;
}
.lrow .badge svg { width: 19px; height: 19px; }
.lrow .mid { flex: 1; min-width: 0; }
.lrow .mid .top { color: var(--hs-text); }
.lrow .mid .top a { font-weight: 500; }
.lrow .mid .bot { font-size: 12.5px; color: var(--hs-muted); }
.lrow .mid .bot a { color: var(--hs-link); }
.lrow .age { font-size: 12.5px; color: var(--hs-muted); white-space: nowrap; }
.lrow .right { text-align: right; flex-shrink: 0; }
.lrow .pill {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  background: var(--hs-soft); color: var(--hs-body); font-size: 12px; font-weight: 500;
  border: 1px solid var(--hs-border-2);
}
.lrow.new { animation: rowin .5s ease; }
@keyframes rowin {
  from { background: var(--hs-green-tint); }
  to { background: transparent; }
}

/* --------------------------------- Tables ------------------------------- */
.table-card { background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); overflow: hidden; }
.table-tools { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hs-border-2); flex-wrap: wrap; gap: 10px; }
.table-tools .info { font-size: 12.5px; color: var(--hs-muted); }
.table-scroll { overflow-x: auto; }
table.hs-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
table.hs-table th {
  text-align: left; font-weight: 500; color: var(--hs-muted); background: var(--hs-soft-2);
  padding: 12px 16px; border-bottom: 1px solid var(--hs-border); white-space: nowrap; font-size: 12px;
}
table.hs-table td { padding: 13px 16px; border-bottom: 1px solid var(--hs-border-2); color: var(--hs-body); vertical-align: middle; white-space: nowrap; }
/* The Age header flips ITS OWN column between "5 mins ago" and an absolute local date.
   The ⇅ is a pseudo-element so rewriting the label can't remove it. */
table.hs-table th.th-age { cursor: pointer; user-select: none; transition: color .12s; }
/* "(Local time)" — present but subordinate to the column name. */
table.hs-table th.th-age .th-tz { font-weight: 400; opacity: .7; }
table.hs-table th.th-age::after { content: " ⇅"; opacity: .5; font-size: 10px; }
table.hs-table th.th-age:hover { color: var(--hs-green-700); }
table.hs-table th.th-age:hover::after { opacity: 1; }
.ts { white-space: nowrap; }
table.hs-table tr:last-child td { border-bottom: 0; }
table.hs-table tr:hover td { background: var(--hs-soft-2); }
table.hs-table .method { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--hs-soft); border: 1px solid var(--hs-border-2); font-size: 11.5px; color: var(--hs-body); max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.dir-tag { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; text-align: center; min-width: 42px; }
.dir-in { background: rgba(59, 111, 212, .13); color: var(--hs-green-700); border: 1px solid rgba(59, 111, 212, .28); }
.dir-out { background: rgba(226, 160, 63, .15); color: #c07d1a; border: 1px solid rgba(226, 160, 63, .32); }
.dir-self { background: var(--hs-soft); color: var(--hs-muted); border: 1px solid var(--hs-border-2); }

.hashlink { color: var(--hs-link); }
.addr { font-family: var(--hs-mono); font-size: 12.5px; }

/* --------------------------------- Pager -------------------------------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 18px; flex-wrap: wrap; }
.pager button, .pager .pg {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; min-width: 32px; padding: 0 12px; border: 1px solid var(--hs-border);
  background: var(--hs-card); border-radius: var(--hs-radius-sm); font-size: 12.5px; color: var(--hs-body); cursor: pointer;
  line-height: 1;
}
.pager .pg { cursor: default; }
.pager button:hover:not(:disabled) { background: var(--hs-soft-2); }
.pager button:disabled { opacity: .5; cursor: default; }
.pager .pg-cur { background: var(--hs-green); color: var(--hs-on-green); border-color: var(--hs-green); font-weight: 600; }
.pager .pg-size-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--hs-muted); margin-right: 4px; }
.pager .pg-size { height: 32px; padding: 0 6px; border: 1px solid var(--hs-border); border-radius: 8px; background: var(--hs-card); color: var(--hs-text); font: inherit; font-size: 12.5px; cursor: pointer; }
.pager .pg-size:hover { border-color: var(--hs-green); }
.pager .pg-size:focus { outline: none; border-color: var(--hs-green); }
/* editable page number — type a page and press Enter to jump straight to it */
.pager .pg-jump {
  width: 56px; height: 24px; margin: 0 2px; padding: 0 4px; text-align: center;
  border: 1px solid var(--hs-border); border-radius: 6px; background: var(--hs-card);
  color: var(--hs-text); font: inherit; font-size: 12.5px; font-weight: 600; -moz-appearance: textfield;
}
.pager .pg-jump:hover { border-color: var(--hs-green); }
.pager .pg-jump:focus { outline: none; border-color: var(--hs-green); }
.pager .pg-jump::-webkit-outer-spin-button,
.pager .pg-jump::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* -------------------------- Detail (tx / block / addr) ------------------ */
.page-head { padding: 20px 0 8px; }
.page-head h1 { font-size: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head .sub { color: var(--hs-muted); font-size: 13px; margin-top: 3px; }
.crumb { font-size: 12.5px; color: var(--hs-muted); margin-bottom: 6px; }
.crumb a { color: var(--hs-link); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hs-border); margin-bottom: 18px; flex-wrap: wrap; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; font-size: 13px; font-weight: 500; color: var(--hs-body); border-bottom: 2px solid transparent; cursor: pointer; }
.acc-tabs a, .input-select, .modal-x { cursor: pointer; }
.tabs a:hover { color: var(--hs-green-800); }
.tabs a.active { color: var(--hs-green-800); border-bottom-color: var(--hs-green); }
.tabs a svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }

/* Admin panel */
.adm-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--hs-soft); color: var(--hs-green-700); display: flex; align-items: center; justify-content: center; flex: none; }
.adm-ic svg { width: 18px; height: 18px; }
.chip svg { width: 13px; height: 13px; }
.nav-admin { color: var(--hs-green-800); font-weight: 600; }
.nav-admin svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }

/* ------------------------------ support chat -------------------------- */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px; border-radius: 9px; background: var(--hs-red); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; vertical-align: middle; }
.nav-support { position: relative; }
.nav-support svg { width: 18px; height: 18px; vertical-align: -4px; }
.nav-support .nav-badge { position: absolute; top: 0; right: -5px; margin: 0; }

#hs-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 4000; display: flex; flex-direction: column; gap: 10px; }
.hs-toast { display: flex; gap: 11px; align-items: center; width: 322px; max-width: 84vw; padding: 12px 14px; background: var(--hs-card); border: 1px solid var(--hs-border); border-left: 3px solid var(--hs-green); border-radius: 11px; box-shadow: 0 12px 34px rgba(0,0,0,.2); text-decoration: none; color: var(--hs-text); transform: translateX(140%); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
.hs-toast.show { transform: translateX(0); opacity: 1; }
.hs-toast-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--hs-soft); color: var(--hs-green-700); display: flex; align-items: center; justify-content: center; flex: none; }
.hs-toast-ic svg { width: 18px; height: 18px; }
.hs-toast-body { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.hs-toast-body b { font-size: 13px; }
.hs-toast-body span { font-size: 12px; color: var(--hs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-card { display: flex; flex-direction: column; height: 62vh; min-height: 420px; background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-bottom: 1px solid var(--hs-border); }
.chat-head-t { font-weight: 700; }
.chat-head-s { font-size: 12px; color: var(--hs-muted); display: flex; align-items: center; gap: 6px; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--hs-soft-2); }
.chat-msg { display: flex; flex-direction: column; max-width: 74%; }
.chat-msg.me { align-self: flex-end; align-items: flex-end; }
.chat-bubble { padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: var(--hs-card); border: 1px solid var(--hs-border); border-bottom-left-radius: 4px; }
.chat-msg.me .chat-bubble { background: var(--hs-green); color: var(--hs-on-green); border: none; border-bottom-right-radius: 4px; border-bottom-left-radius: 14px; }
.chat-meta { font-size: 10.5px; color: var(--hs-muted); margin-top: 3px; padding: 0 3px; display: flex; gap: 6px; align-items: center; }
.chat-composer { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--hs-border); align-items: flex-end; }
.chat-input { flex: 1; resize: none; max-height: 130px; min-height: 42px; padding: 10px 13px; border: 1px solid var(--hs-border); border-radius: 10px; background: var(--hs-bg); color: var(--hs-text); font: inherit; font-size: 13.5px; }
.chat-input:focus { outline: none; border-color: var(--hs-green); }
.chat-send { flex: none; width: 42px; height: 42px; border-radius: 10px; border: none; background: var(--hs-green); color: var(--hs-on-green); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-send:disabled { opacity: .5; cursor: default; }
.chat-send svg { width: 18px; height: 18px; }
.chat-empty { margin: auto; text-align: center; color: var(--hs-muted); font-size: 13px; padding: 30px; max-width: 340px; }
.chat-day { align-self: center; font-size: 11px; color: var(--hs-muted); background: var(--hs-card); border: 1px solid var(--hs-border-2); border-radius: 20px; padding: 3px 11px; margin: 4px 0; }

.sup-wrap { display: grid; grid-template-columns: 310px 1fr; gap: 16px; height: 64vh; min-height: 440px; }
.sup-list { border: 1px solid var(--hs-border); border-radius: var(--hs-radius); background: var(--hs-card); overflow-y: auto; }
.sup-thread { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-bottom: 1px solid var(--hs-border-2); cursor: pointer; }
.sup-thread:hover { background: var(--hs-soft-2); }
.sup-thread.active { background: var(--hs-soft); box-shadow: inset 3px 0 0 var(--hs-green); }
.sup-thread-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sup-thread-email { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-thread-time { font-size: 10.5px; color: var(--hs-muted); flex: none; }
.sup-thread-bot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sup-thread-last { font-size: 12px; color: var(--hs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-thread-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hs-green); color: var(--hs-on-green); font-size: 10.5px; font-weight: 700; flex: none; }
.sup-convo { border: 1px solid var(--hs-border); border-radius: var(--hs-radius); background: var(--hs-card); overflow: hidden; display: flex; flex-direction: column; }
.sup-convo .chat-card { height: 100%; min-height: 0; border: none; border-radius: 0; box-shadow: none; }
.sup-list-head { padding: 11px 14px; font-size: 12px; font-weight: 600; color: var(--hs-muted); border-bottom: 1px solid var(--hs-border); position: sticky; top: 0; background: var(--hs-card); }
@media (max-width: 760px) { .sup-wrap { grid-template-columns: 1fr; height: auto; } .sup-list { max-height: 240px; } .sup-convo { height: 60vh; } }

/* ------------------------------ dev tools ----------------------------- */
.tools-layout { display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: start; }
.tools-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.tools-grp-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hs-muted); padding: 0 10px 4px; }
.tools-link { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--hs-body); cursor: pointer; border: 1px solid transparent; }
.tools-link:hover { background: var(--hs-soft-2); color: var(--hs-green-800); }
.tools-link.active { background: var(--hs-soft); color: var(--hs-green-800); font-weight: 600; border-color: var(--hs-border-2); }
.tool-card { background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); padding: 22px 24px; max-width: 760px; }
.tool-h { border-bottom: 1px solid var(--hs-border); padding-bottom: 14px; margin-bottom: 16px; }
.tool-h h2 { font-size: 17px; margin: 0 0 4px; }
.tool-h p { margin: 0; font-size: 12.5px; }
.tool-body { display: flex; flex-direction: column; }
.tl-lbl { font-size: 12.5px; font-weight: 600; color: var(--hs-body); margin: 12px 0 5px; }
.tl-lbl:first-child { margin-top: 0; }
.tl-input { width: 100%; padding: 9px 12px; border: 1px solid var(--hs-border); border-radius: 9px; background: var(--hs-bg); color: var(--hs-text); font-size: 13.5px; font-family: inherit; }
select.tl-input { cursor: pointer; height: 40px; }
.tl-ta { resize: vertical; min-height: 44px; font-family: var(--hs-mono, ui-monospace, monospace); font-size: 12.5px; line-height: 1.5; word-break: break-all; }
.tl-input:focus { outline: none; border-color: var(--hs-green); box-shadow: 0 0 0 3px var(--hs-green-glow); }
.tl-inline { margin: 8px 0 2px; }
.tl-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tl-run { margin-top: 16px; align-self: flex-start; }
.tl-btns .tl-run { margin-top: 0; }
.tl-out { margin-top: 4px; }
.tl-out.show { margin-top: 18px; }
.tl-result { border: 1px solid var(--hs-border); border-radius: 10px; overflow: hidden; }
.tl-rrow { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--hs-border-2); }
.tl-rrow:last-child { border-bottom: none; }
.tl-rrow:nth-child(even) { background: var(--hs-soft-2); }
.tl-rk { flex: 0 0 42%; font-size: 12px; color: var(--hs-muted); }
.tl-val { flex: 1; font-size: 12.5px; color: var(--hs-text); word-break: break-all; }
.tl-val.mono { font-family: var(--hs-mono, ui-monospace, monospace); }
.tl-copy { flex: none; background: none; border: none; cursor: pointer; color: var(--hs-muted-2); padding: 2px; display: inline-flex; }
.tl-copy:hover { color: var(--hs-green-800); }
.tl-copy svg { width: 15px; height: 15px; }
.tl-err { background: var(--hs-red-bg); color: #c0392b; border: 1px solid #f2cccc; border-radius: 9px; padding: 10px 13px; font-size: 13px; }
@media (prefers-color-scheme: dark) { .tl-err { color: #e78b8b; } }
:root[data-theme="dark"] .tl-err { color: #e78b8b; }
@media (max-width: 820px) {
  .tools-layout { grid-template-columns: 1fr; }
  .tools-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 14px; }
  .tools-grp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .tools-grp-h { padding: 0; }
}

/* -------------------------------- 404 --------------------------------- */
.nf-wrap { text-align: center; padding: 56px 20px 84px; max-width: 560px; margin: 0 auto; }
.nf-code { font-size: 92px; font-weight: 800; line-height: 1; color: var(--hs-green-800); letter-spacing: -.03em; }
.nf-title { font-size: 22px; font-weight: 700; color: var(--hs-text); margin: 10px 0 8px; }
.nf-sub { font-size: 14px; color: var(--hs-muted); margin-bottom: 24px; }
.nf-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.nf-hint { font-size: 12.5px; }

/* private name tags (wallet More Info card) */
.pnt-add { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 1px dashed var(--hs-border-2); border-radius: 7px; font-size: 12px; color: var(--hs-link); cursor: pointer; }
.pnt-add:hover { border-color: var(--hs-green); color: var(--hs-green-800); }
.pnt-chip { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--hs-soft); border: 1px solid var(--hs-border-2); font-size: 12px; color: var(--hs-text); }
.pnt-edit { font-size: 11px; color: var(--hs-link); cursor: pointer; margin-left: 8px; }
.pnt-edit:hover { color: var(--hs-green-800); }
.pnt-input { width: 150px; padding: 4px 8px; border: 1px solid var(--hs-border); border-radius: 6px; font-size: 12px; background: var(--hs-bg); color: var(--hs-text); }
.pnt-input:focus { outline: none; border-color: var(--hs-green); }
.pnt-save { margin-left: 6px; padding: 5px 11px; border: none; border-radius: 6px; background: var(--hs-green); color: var(--hs-on-green); font-size: 12px; font-weight: 600; cursor: pointer; }

/* multi-file source viewer (verified contracts) */
.src-viewer { display: grid; grid-template-columns: 240px 1fr; border: 1px solid var(--hs-border); border-radius: var(--hs-radius); overflow: hidden; background: var(--hs-card); }
.src-files { border-right: 1px solid var(--hs-border); background: var(--hs-soft-2); max-height: 540px; overflow-y: auto; }
.src-files-h { padding: 9px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hs-muted); border-bottom: 1px solid var(--hs-border); position: sticky; top: 0; background: var(--hs-soft-2); }
.src-file { display: block; padding: 7px 12px; font-size: 12px; font-family: var(--hs-mono, ui-monospace, monospace); color: var(--hs-body); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid transparent; }
.src-file:hover { background: var(--hs-soft); }
.src-file.active { background: var(--hs-soft); color: var(--hs-green-800); border-left-color: var(--hs-green); font-weight: 600; }
.src-main { min-width: 0; display: flex; flex-direction: column; }
.src-path { padding: 8px 14px; font-size: 12px; font-family: var(--hs-mono, ui-monospace, monospace); color: var(--hs-muted); border-bottom: 1px solid var(--hs-border-2); background: var(--hs-card); word-break: break-all; }
.src-viewer .src-code { margin: 0; border: none; border-radius: 0; max-height: 540px; }
.src-single .src-path { border: 1px solid var(--hs-border); border-bottom: none; border-radius: var(--hs-radius) var(--hs-radius) 0 0; }
.src-single .src-code { margin: 0; border: 1px solid var(--hs-border); border-radius: 0 0 var(--hs-radius) var(--hs-radius); max-height: 540px; }
@media (max-width: 720px) { .src-viewer { grid-template-columns: 1fr; } .src-files { max-height: 160px; border-right: none; border-bottom: 1px solid var(--hs-border); } }

.detail-card { background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); padding: 6px 0; }
.drow { display: grid; grid-template-columns: 260px 1fr; gap: 16px; padding: 13px 22px; border-bottom: 1px solid var(--hs-border-2); align-items: start; }
.drow:last-child { border-bottom: 0; }
.drow .dk { color: var(--hs-muted); display: flex; align-items: center; gap: 7px; font-size: 13px; }
.drow .dk .qm { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #cfd4e0; color: var(--hs-muted-2); font-size: 9px; display: inline-flex; align-items: center; justify-content: center; }
.drow .dv { color: var(--hs-text); font-size: 13px; word-break: break-word; }
.drow .dv .mono { font-size: 12.5px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; background: var(--hs-soft); border: 1px solid var(--hs-border-2); font-size: 12px; }
.chip.ok { background: rgba(59, 111, 212, .13); border-color: rgba(59, 111, 212, .28); color: var(--hs-green-700); }
.chip.fail { background: rgba(222, 87, 87, .13); border-color: rgba(222, 87, 87, .3); color: #d15b5b; }
.copy { cursor: pointer; color: var(--hs-muted-2); }
.copy:hover { color: var(--hs-green-700); }
.copy svg { width: 14px; height: 14px; vertical-align: -2px; }

.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mini-card { background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); padding: 18px 20px; }
.mini-card .mc-label { font-size: 12px; color: var(--hs-muted); }
.mini-card .mc-value { font-size: 17px; color: var(--hs-text); font-weight: 600; margin-top: 3px; }

/* --------------------------------- Footer ------------------------------- */
.hs-footer { background: var(--hs-card); border-top: 1px solid var(--hs-border); margin-top: 30px; padding: 34px 0 22px; color: var(--hs-muted); font-size: 13px; }
.hs-footer .foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--hs-border-2); }
.hs-footer .foot-brand .hs-logo { margin-bottom: 12px; }
.hs-footer .foot-brand p { margin: 0 0 14px; max-width: 320px; line-height: 1.6; }
.hs-footer .foot-social { display: flex; gap: 8px; }
.hs-footer .foot-social a { width: 32px; height: 32px; border: 1px solid var(--hs-border); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--hs-muted); }
.hs-footer .foot-social a:hover { border-color: var(--hs-green); color: var(--hs-green-700); }
.hs-footer .foot-col h4 { font-size: 13px; color: var(--hs-text); margin-bottom: 12px; }
.hs-footer .foot-col a { display: block; color: var(--hs-muted); padding: 4px 0; }
.hs-footer .foot-col a:hover { color: var(--hs-green-700); }
.hs-footer .foot-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; flex-wrap: wrap; gap: 10px; }
.hs-footer .foot-bottom .powered b { color: var(--hs-green-700); }
/* Legal links live on every page — a privacy policy has to be reachable from anywhere. */
.hs-footer .foot-legal { display: inline-flex; align-items: center; gap: 16px; }
.hs-footer .foot-legal a { color: var(--hs-muted); }
.hs-footer .foot-legal a:hover { color: var(--hs-green-700); }

/* --------------------------------- Utils -------------------------------- */
.flex { display: flex; }
.items-center { align-items: center; }
.gap-6 { gap: 6px; }
.gap-10 { gap: 10px; }
.mt-24 { margin-top: 24px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title h2 { font-size: 17px; }
.tps { color: var(--hs-green-700); font-weight: 500; }

/* (stat panel is a single banner — main .hs-statpanel rules are defined above) */

/* ------------------------------ Chart ----------------------------------- */
.chart-box { position: relative; margin-top: 6px; min-height: 150px; }
.chart-box svg { display: block; width: 100%; height: auto; cursor: pointer; }
.chart-box .chart-guide { stroke: var(--hs-muted-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-box .chart-dot { fill: var(--hs-green-700); stroke: var(--hs-card); stroke-width: 2; }
.chart-box .grid-line { stroke: var(--hs-border-2); stroke-width: 1; }
.chart-box .axis-label { fill: var(--hs-muted-2); font-size: 9.5px; }
.chart-legend { display: flex; gap: 16px; font-size: 11px; color: var(--hs-muted); margin-top: 2px; align-items: center; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend .lg .sw { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-tooltip {
  position: absolute; pointer-events: none; z-index: 6;
  background: var(--hs-card); border: 1px solid var(--hs-border); box-shadow: 0 6px 18px rgba(20, 26, 40, .28);
  border-radius: 8px; padding: 8px 11px; font-size: 11.5px; color: var(--hs-body);
  white-space: nowrap; transform: translate(-50%, -112%); opacity: 0; transition: opacity .08s;
}
.chart-tooltip .tt-date { font-weight: 600; color: var(--hs-heading); margin-bottom: 4px; }
.chart-tooltip .tt-row b { color: var(--hs-text); font-weight: 600; }

/* ---------------------------- Modals + account -------------------------- */
.hs-modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 14, 20, .5);
  display: none; align-items: flex-start; justify-content: center; z-index: 200; padding: 76px 16px;
}
.hs-modal-overlay.open { display: flex; }
.hs-modal {
  background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); width: 100%; max-width: 400px; overflow: hidden;
  animation: modalin .15s ease;
}
@keyframes modalin { from { transform: translateY(-8px); opacity: .5; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--hs-border-2); }
.modal-head h3 { font-size: 16px; }
.modal-x { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--hs-muted); cursor: pointer; }
.modal-x:hover { color: var(--hs-text); }
.modal-body { padding: 18px 20px; }
.modal-label { display: block; font-size: 12px; color: var(--hs-muted); margin: 13px 0 5px; font-weight: 500; }
.modal-body .modal-label:first-child { margin-top: 0; }
.modal-input {
  width: 100%; height: 40px; border: 1px solid var(--hs-border); border-radius: 8px;
  padding: 0 12px; font-size: 14px; color: var(--hs-text); background: var(--hs-card); outline: 0;
}
.modal-input:focus { border-color: var(--hs-green); box-shadow: 0 0 0 3px var(--hs-green-glow); }
select.modal-input { cursor: pointer; }
.modal-note { font-size: 11.5px; color: var(--hs-muted-2); margin: 13px 0 0; line-height: 1.5; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--hs-border-2); }
.acc-panel { padding: 28px 26px 24px; text-align: center; position: relative; }
.acc-x { position: absolute; top: 12px; right: 14px; }
.acc-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.acc-brand .mark { width: auto; height: 32px; }
.acc-brand .word { font-size: 19px; font-weight: 700; letter-spacing: -.3px; color: var(--hs-heading); }
.acc-brand .word b { color: var(--hs-green-700); font-weight: 700; }
/* Turnstile injects a fixed-size iframe; reserve room so the form doesn't jump when it lands. */
.acc-turnstile:not(:empty) { margin: 14px 0 4px; min-height: 65px; display: flex; justify-content: center; }
.acc-title { font-size: 19px; margin-bottom: 5px; }
.acc-sub { font-size: 13px; color: var(--hs-muted); margin: 0 0 18px; }
.acc-panel .modal-label, .acc-panel .acc-err { text-align: left; }
.acc-submit-btn { width: 100%; height: 42px; margin-top: 18px; font-size: 14px; }
.acc-foot-note { font-size: 12px; color: var(--hs-muted); margin: 14px 0 0; }
.acc-foot-note a { color: var(--hs-link); cursor: pointer; }
.acc-tabs { display: flex; gap: 4px; background: var(--hs-soft); border-radius: 8px; padding: 4px; margin-bottom: 16px; }
.acc-tabs a { flex: 1; text-align: center; padding: 8px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--hs-muted); cursor: pointer; }
.acc-tabs a.active { background: var(--hs-card); color: var(--hs-text); box-shadow: var(--hs-shadow-sm); }
.acc-err { background: var(--hs-red-bg); color: #b13b3b; border: 1px solid #f2cccc; border-radius: 7px; padding: 8px 11px; font-size: 12.5px; margin-bottom: 12px; }
.acc-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--hs-green); color: var(--hs-on-green); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; margin: 4px auto 10px; }
.acc-name { text-align: center; font-size: 16px; font-weight: 600; color: var(--hs-text); }
.acc-email { text-align: center; font-size: 13px; }
.foot-donate { font-size: 12px; color: var(--hs-muted); margin-top: 10px; word-break: break-all; }
.foot-donate .mono { color: var(--hs-body); font-size: 11.5px; }
.foot-donate .copy { cursor: pointer; color: var(--hs-muted-2); }
.foot-donate .copy:hover { color: var(--hs-green-700); }
.foot-soon { color: var(--hs-muted-2); font-size: 13px; font-style: italic; }

/* ------------------------- Transaction page extras ---------------------- */
/* group separators on detail pages: a subtle gap (no dashed line — keeps the rows clean/uniform) */
.drow-sep { height: 10px; }
.up { color: var(--hs-green-700); }
.down { color: var(--hs-red); }
.addr-full { word-break: break-all; }
/* table address cells: full on desktop, truncated only on mobile */
.addr-cell { white-space: nowrap; }
@media (max-width: 768px) {
  .hs-table .addr-cell { display: inline-block; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
}
.tx-action {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: var(--hs-radius);
  box-shadow: var(--hs-shadow); padding: 15px 20px; margin-bottom: 16px;
}
.tx-action-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--hs-soft); color: var(--hs-green-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tx-action-ic svg { width: 18px; height: 18px; }
.tx-action-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--hs-muted); font-weight: 600; margin-bottom: 3px; }
.tx-action-body { font-size: 13.5px; color: var(--hs-body); line-height: 1.7; }
.more-toggle { border: 0; background: transparent; color: var(--hs-link); cursor: pointer; font-size: 13px; padding: 3px 0; font-weight: 500; }
.more-toggle:hover { color: var(--hs-link-hover); }
.input-data { width: 100%; background: var(--hs-soft); border: 1px solid var(--hs-border); border-radius: 8px; padding: 12px; font-size: 12px; color: var(--hs-body); resize: vertical; line-height: 1.7; outline: 0; }
#more-details { overflow: hidden; transition: max-height .35s ease; }
.input-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.input-seg { display: inline-flex; background: var(--hs-soft); border: 1px solid var(--hs-border); border-radius: 8px; padding: 3px; gap: 2px; }
.input-seg button { border: 0; background: transparent; color: var(--hs-muted); font-size: 12.5px; font-weight: 500; padding: 5px 13px; border-radius: 6px; cursor: pointer; transition: background .12s, color .12s; }
.input-seg button:hover { color: var(--hs-text); }
.input-seg button.active { background: var(--hs-card); color: var(--hs-green-800); box-shadow: var(--hs-shadow-sm); }
.input-seg button.dec-ver-btn { display: inline-flex; align-items: center; gap: 5px; }
.input-seg button.dec-ver-btn svg { width: 12px; height: 12px; }
.input-seg button.dec-ver-btn.active { color: #0e9f5f; }
/* "Decoded Verified" input param table (BaseScan-style) */
.input-decoded-verified { border: 1px solid var(--hs-border); border-radius: 8px; padding: 12px 14px; background: var(--hs-soft-2); }
.dec-func { font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; word-break: break-all; }
.dec-func svg { width: 14px; height: 14px; color: #12b76a; flex: none; }
/* Which ABI actually decoded the call, when the target is a proxy and the logic lives elsewhere. */
.dec-via { font-size: 12px; color: var(--hs-muted); margin: -6px 0 12px; word-break: break-all; }
/* Fit the container and wrap long values (tuples/arrays/hex) so the decoded params never
   overflow horizontally. Uses `table.dec-table`/`!important` to beat .hs-table's element-level
   min-width:760px + white-space:nowrap (which out-specify a plain .dec-table selector). */
table.dec-table { margin: 0; width: 100%; table-layout: fixed; min-width: 0 !important; }
.dec-table th { font-size: 11.5px; }
table.dec-table td { font-size: 12.5px; vertical-align: top; white-space: normal !important; word-break: break-all; overflow-wrap: anywhere; }
table.dec-table td .addr-cell { font-size: 12.5px; max-width: none; overflow: visible; white-space: normal; text-overflow: clip; }
table.dec-table th:nth-child(1), table.dec-table td:nth-child(1) { width: 30px; }
table.dec-table th:nth-child(2), table.dec-table td:nth-child(2) { width: 18%; }
table.dec-table th:nth-child(3), table.dec-table td:nth-child(3) { width: 27%; }
.xfer-list { display: flex; flex-direction: column; gap: 7px; }
.xfer { font-size: 13px; color: var(--hs-body); line-height: 1.6; }
.log-card { display: flex; gap: 14px; background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); padding: 16px 20px; margin-bottom: 14px; }
.log-badge { width: 28px; height: 28px; border-radius: 8px; background: var(--hs-green-tint); color: var(--hs-green-700); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.log-body { flex: 1; min-width: 0; }
.log-row { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 8px 0; align-items: start; }
.log-row + .log-row { border-top: 1px solid var(--hs-border-2); }
.log-k { color: var(--hs-muted); font-size: 12.5px; padding-top: 2px; }
.log-v { font-size: 13px; color: var(--hs-body); word-break: break-all; }
.log-ev { display: inline-block; background: var(--hs-soft); border: 1px solid var(--hs-border-2); border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: 600; color: var(--hs-text); margin-right: 7px; }
.log-topics { display: flex; flex-direction: column; gap: 6px; }
.log-topic { display: flex; align-items: center; gap: 9px; }
.log-ti { width: 22px; height: 22px; border: 1px solid var(--hs-border); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--hs-muted); flex-shrink: 0; background: var(--hs-soft-2); }
.log-arrow { color: var(--hs-green-700); font-weight: 700; flex-shrink: 0; margin: 0 -3px; }
.log-tval, .log-topic a { font-size: 12.5px; word-break: break-all; }
.log-zeros { color: var(--hs-muted-2); }
.log-topic a.hashlink { color: var(--hs-link); }
.log-data { background: var(--hs-soft); border: 1px solid var(--hs-border-2); border-radius: 8px; padding: 9px 11px; font-size: 12.5px; word-break: break-all; }

/* ------------------------------ NFT thumbnails -------------------------- */
.nft-thumb {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px; background: var(--hs-soft);
  overflow: hidden; vertical-align: middle; flex-shrink: 0;
}
.nft-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.nft-thumb img.loaded { opacity: 1; }
.nft-thumb .nft-ph { color: var(--hs-muted-2); display: flex; }
.nft-thumb .nft-ph svg { width: 18px; height: 18px; }
.nft-thumb.sm { width: 34px; height: 34px; border-radius: 7px; }
.nft-thumb.lg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 9px; }
.nft-thumb.lg .nft-ph { position: absolute; inset: 0; align-items: center; justify-content: center; }
.nft-thumb.lg .nft-ph svg { width: 32px; height: 32px; }
.nft-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.nft-card { background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: 10px; padding: 8px; box-shadow: var(--hs-shadow-sm); }
.nft-card .nft-id { font-size: 12px; color: var(--hs-muted); margin-top: 7px; text-align: center; font-family: var(--hs-mono); }
@media (max-width: 768px) { .nft-gallery { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------ Static pages ---------------------------- */
.doc { background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); padding: 28px 32px; max-width: 900px; line-height: 1.7; color: var(--hs-body); }
.doc h2 { font-size: 18px; margin: 24px 0 10px; color: var(--hs-heading); }
.doc h2:first-child { margin-top: 0; }
.doc p { margin: 0 0 12px; }
.doc ul { margin: 0 0 12px; padding-left: 20px; }
.doc li { margin: 5px 0; }
.doc .updated { color: var(--hs-muted); font-size: 12.5px; margin-bottom: 20px; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.status-card { background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); padding: 18px 20px; display: flex; align-items: center; gap: 13px; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.status-dot.ok { background: var(--hs-green); box-shadow: 0 0 0 3px var(--hs-green-glow); }
.status-dot.bad { background: var(--hs-red); box-shadow: 0 0 0 3px rgba(222,87,87,.25); }
.status-card .sc-name { font-weight: 600; color: var(--hs-text); display: flex; align-items: center; gap: 8px; }
.sync-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); padding: 20px 22px; margin-bottom: 22px; }
.sync-row .sync-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--hs-body); margin-bottom: 7px; }
.sync-row .sync-top b { color: var(--hs-green-700); font-size: 14px; }
.sync-track { height: 8px; background: var(--hs-soft); border-radius: 5px; overflow: hidden; }
.sync-fill { height: 100%; background: linear-gradient(90deg, var(--hs-green-600), var(--hs-green)); border-radius: 5px; transition: width .6s ease; }
.sync-sub { font-size: 11.5px; margin-top: 6px; }
@media (max-width: 768px) { .sync-panel { grid-template-columns: 1fr; } }
.status-card .sc-detail { font-size: 12.5px; color: var(--hs-muted); }
.roadmap-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hs-border-2); }
.roadmap-item:last-child { border-bottom: 0; }
.rm-badge { flex-shrink: 0; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; height: fit-content; }
.rm-badge.done { background: var(--hs-green-tint); color: var(--hs-green-800); }
.rm-badge.now { background: #fff4e0; color: #b9731a; }
.rm-badge.next { background: var(--hs-soft); color: var(--hs-muted); }
.rm-body h3 { font-size: 15px; margin-bottom: 4px; }
.rm-body p { color: var(--hs-muted); font-size: 13px; margin: 0; }

/* --------------------------------- Responsive --------------------------- */
@media (max-width: 992px) {
  /* keep price/mcap + 2x2 metrics side by side; chart drops to a full-width row below */
  .hs-statpanel { grid-template-columns: 1fr 1.1fr; }
  .hs-statpanel .stat-col.chart-col { grid-column: 1 / -1; border-top: 1px solid var(--hs-border-2); border-right: 0; }
  .panel-grid { grid-template-columns: 1fr; }
  .overview-grid { grid-template-columns: 1fr; }
  .hs-footer .foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) { .tb-search { display: none; } .hs-topbar .tb-right { flex: 0 0 auto; } }
@media (max-width: 900px) {
  .hs-header .hs-container { overflow-x: auto; }
  .hs-nav-inline .nav-item { padding: 0 8px; font-size: 13px; }
  .drow { grid-template-columns: 1fr; gap: 4px; }
  .drow .dk { font-size: 12px; }
}
@media (max-width: 576px) {
  .hs-statpanel { grid-template-columns: 1fr; }
  .hs-statpanel .stat-col:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--hs-border-2); }
  .hs-footer .foot-top { grid-template-columns: 1fr; }
  .hs-topbar .tb-gas, .hs-topbar .tb-sep { display: none; }
}

/* ===== Account / token / contract identity + panels (BaseScan-style) ===== */
.overview-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 992px) { .overview-grid.cols-3 { grid-template-columns: 1fr; } }
.mc-head { font-weight: 600; color: var(--hs-text); font-size: 13.5px; margin-bottom: 12px; }
.mc-field { margin: 12px 0; }
.mc-field:first-of-type { margin-top: 0; }
.mc-ftitle { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--hs-muted); font-weight: 600; margin-bottom: 3px; }
.mc-fval { font-size: 13.5px; color: var(--hs-text); word-break: break-word; }
.mc-fval .eth-ico { width: 11px; height: 11px; opacity: .7; }

/* identity header (address / token / contract page top) */
.idhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.idhead .id-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--hs-soft); color: var(--hs-green-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.idhead .id-ic svg { width: 18px; height: 18px; }
.idhead h1 { font-size: 19px; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.idhead .id-kind { font-size: 12px; color: var(--hs-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.idhead .id-sym { color: var(--hs-muted); font-weight: 400; }
.badge-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--hs-border); background: var(--hs-soft); color: var(--hs-body); }
.badge-pill.green { background: var(--hs-green-tint); color: var(--hs-green-800); border-color: transparent; }
.badge-pill.green svg { width: 12px; height: 12px; }

/* token-tracker line + "verified" chip */
.ctok { display: inline-flex; align-items: center; gap: 7px; }
.ctok .ctok-ic { width: 20px; height: 20px; border-radius: 50%; background: var(--hs-green-tint); color: var(--hs-green-700); display: inline-flex; align-items: center; justify-content: center; }
.ctok .ctok-ic svg { width: 12px; height: 12px; }
/* verified tick — always GREEN (like BaseScan), regardless of the lime brand, with a white check */
.verified-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #12b76a; color: #fff; vertical-align: middle; flex: none; }
.verified-check svg { width: 11px; height: 11px; display: block; }
/* inline "verified" tick shown next to every occurrence of a verified contract address */
.vchk { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #12b76a; color: #fff; vertical-align: middle; flex: none; }
.vchk svg { width: 10px; height: 10px; display: block; }
/* source viewer toolbar (download) */
.src-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 8px; }
.src-tools .src-count { font-size: 12px; color: var(--hs-muted); }
.src-tools .btn svg, .code-title .btn svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
/* Download dropdown (contract source) */
.src-dl { position: relative; }
.src-dl .src-dl-caret { margin-left: 3px; font-size: 10px; opacity: .8; }
.src-dl-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; min-width: 220px; display: none;
  background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: 8px; padding: 5px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.src-dl-menu.open { display: block; }
.src-dl-menu a { display: block; padding: 8px 11px; font-size: 12.5px; color: var(--hs-body); cursor: pointer; border-radius: 6px; white-space: nowrap; }
.src-dl-menu a:hover { background: var(--hs-soft); color: var(--hs-green-800); }
.src-dl-menu .src-dl-sep { height: 1px; margin: 5px 6px; background: var(--hs-border); }

/* Token Holdings dropdown */
.holdings-dd { position: relative; margin-top: 5px; }
/* Fills the field rather than being capped short of it — this is the primary control in the
   Overview card, so it gets the full width and a comfortable hit area (BaseScan-style). */
.holdings-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 190px; width: 100%; padding: 10px 13px; border: 1px solid var(--hs-border); border-radius: 8px; background: var(--hs-card); color: var(--hs-text); cursor: pointer; font-size: 13.5px; transition: border-color .15s, background .15s; }
.holdings-btn:hover { border-color: var(--hs-green); background: var(--hs-soft-2); }
.holdings-btn .caret { width: 12px; height: 12px; color: var(--hs-muted); transition: transform .15s; flex: none; }
.holdings-dd.open .holdings-btn .caret { transform: rotate(180deg); }
/* Matches the trigger's width so the panel lines up under it instead of ending short. */
.holdings-panel { display: none; position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; width: 100%; min-width: 300px; max-width: 90vw; max-height: 340px; overflow-y: auto; background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: 10px; box-shadow: var(--hs-shadow); padding: 6px; }
.holdings-dd.open .holdings-panel { display: block; }
.holdings-search { width: 100%; border: 0; border-bottom: 1px solid var(--hs-border-2); padding: 8px 10px; background: transparent; color: var(--hs-text); outline: 0; font-size: 12.5px; margin-bottom: 4px; }
/* Holdings are grouped by token standard. The heading names the group; a rule separates one
   group from the next, and a lighter rule separates the entries inside it. */
.hd-group + .hd-group { border-top: 1px solid var(--hs-border); margin-top: 6px; padding-top: 4px; }
.hd-ghead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--hs-muted);
}
.hd-gcount {
  font-size: 10px; font-weight: 600; color: var(--hs-muted-2); background: var(--hs-soft);
  border-radius: 10px; padding: 1px 7px; letter-spacing: 0;
}
.hd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 7px; text-decoration: none; }
.hd-row + .hd-row { border-top: 1px solid var(--hs-border-2); }
.hd-row:hover { background: var(--hs-soft); }
.hd-tk { font-size: 12.5px; color: var(--hs-text); }
.hd-tk .muted { color: var(--hs-muted); }
.hd-bal { font-size: 12px; color: var(--hs-body); text-align: right; white-space: nowrap; }
.hd-empty { padding: 16px; text-align: center; color: var(--hs-muted); font-size: 12.5px; }

/* Multichain info placeholder (kept — feature coming soon) */
.multichain-tag { display: inline-block; background: var(--hs-soft); border: 1px solid var(--hs-border-2); border-radius: 7px; padding: 5px 11px; font-size: 12.5px; color: var(--hs-body); }
.mc-soon { margin-top: 12px; font-size: 12px; color: var(--hs-muted); }

/* Contract tab: verified banner, source, verify/decompile */
.ctr-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--hs-radius); margin-bottom: 16px; font-size: 13.5px; }
.ctr-banner.ok { background: var(--hs-green-tint); color: var(--hs-green-800); border: 1px solid rgba(59, 111, 212,.25); }
.ctr-banner.warn { background: var(--hs-soft); color: var(--hs-body); border: 1px solid var(--hs-border); }
.ctr-banner svg { width: 17px; height: 17px; flex-shrink: 0; }
.ctr-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.ctr-banner.proxy { align-items: flex-start; background: rgba(94,124,255,.09); border: 1px solid rgba(94,124,255,.32); color: var(--hs-body); }
.ctr-banner.proxy svg { color: #5e7cff; margin-top: 1px; }
.ctr-banner.proxy .proxy-impl { margin-top: 5px; font-size: 12.5px; font-family: var(--hs-mono); word-break: break-all; }
.ctr-banner.proxy .verified-check { width: 14px; height: 14px; vertical-align: middle; }
/* Read Contract / Read as Proxy panel */
.read-wrap { display: flex; flex-direction: column; gap: 10px; }
.read-fn { background: var(--hs-soft); border: 1px solid var(--hs-border); border-radius: 8px; padding: 12px 14px; }
.read-fn .rf-head { font-size: 13.5px; margin-bottom: 8px; }
.read-fn .rf-idx { color: var(--hs-muted); margin-right: 4px; }
.read-fn .rf-in { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; max-width: 520px; }
.read-fn .rf-in label { font-size: 12px; color: var(--hs-muted); }
.read-fn .rf-in input { width: 100%; padding: 7px 10px; font-size: 12.5px; font-family: var(--hs-mono); background: var(--hs-bg); border: 1px solid var(--hs-border); border-radius: 6px; color: var(--hs-text); }
.read-fn .rf-bar { margin-top: 2px; }
.read-fn .rf-out { margin-top: 9px; }
.read-fn .rf-res { font-size: 12.5px; padding: 5px 0; border-top: 1px dashed var(--hs-border); word-break: break-all; }
.read-fn .rf-res:first-child { border-top: none; }
.read-fn .rf-res.err { color: #e5484d; }
.read-fn .rf-res.ok { color: var(--hs-green-800); }
.read-fn .rf-res .mono { font-family: var(--hs-mono); color: var(--hs-text); }
/* Contract sub-tabs: Code / Read / Write */
.csub-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; background: var(--hs-soft); border: 1px solid var(--hs-border); border-radius: 10px; padding: 4px; }
.csub { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--hs-body); cursor: pointer; border-radius: 7px; }
.csub svg { width: 14px; height: 14px; }
.csub:hover { background: var(--hs-card); }
.csub.active { background: var(--hs-card); color: var(--hs-green-800); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.rw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.rw-head h2 { font-size: 15px; margin: 0; }
.write-fn .rf-head b { color: var(--hs-body); }
.wl-payable { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #b45309; background: rgba(245,158,11,.16); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
/* wallet bar */
.wallet-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 12px; background: var(--hs-soft); border: 1px solid var(--hs-border); border-radius: 10px; }
.wallet-bar .btn svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.wl-hint { font-size: 12.5px; color: var(--hs-muted); }
.wl-acct { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.wl-acct svg { width: 15px; height: 15px; color: var(--hs-green-800); }
.wl-chip { font-size: 11.5px; font-weight: 600; border-radius: 20px; padding: 3px 10px; }
.wl-chip.ok { color: var(--hs-green-800); background: var(--hs-green-tint); border: 1px solid rgba(59, 111, 212,.3); }
.wl-chip.warn { color: #b45309; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.3); }
.wl-status { flex-basis: 100%; font-size: 12px; }
.wl-status .wl-err { color: #e5484d; }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--hs-muted); }
.btn-ghost:hover { color: var(--hs-body); border-color: var(--hs-border); }
.wl-menu { display: none; position: absolute; top: calc(100% - 4px); left: 12px; z-index: 50; min-width: 230px;
  background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: 10px; padding: 5px; box-shadow: 0 12px 34px rgba(0,0,0,.3); }
.wl-menu.open { display: block; }
.wl-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; font-size: 13px; color: var(--hs-body); cursor: pointer; border-radius: 7px; }
.wl-menu a:hover { background: var(--hs-soft); }
.wl-menu .wl-ic { width: 20px; height: 20px; border-radius: 5px; }
.wl-menu a svg { width: 16px; height: 16px; }
.wl-menu .wl-menu-note { padding: 8px 11px; font-size: 11.5px; line-height: 1.45; color: var(--hs-muted); }
.wl-menu .wl-diaglink { display: inline; padding: 0; color: var(--hs-link); text-decoration: underline; cursor: pointer; }
.wl-diag { font-size: 11.5px; line-height: 1.6; margin-top: 4px; font-family: var(--hs-mono); }
.wl-diag .muted { font-family: inherit; }
.wl-warn { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--hs-body);
  background: rgba(245,158,11,.09); border: 1px solid rgba(245,158,11,.28); border-radius: 9px; padding: 10px 13px; margin-bottom: 14px; }
.wl-warn svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: #d97706; }
.code-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 9px; }
.code-title h2 { font-size: 15px; margin: 0; }
.code-box { width: 100%; background: var(--hs-soft); border: 1px solid var(--hs-border); border-radius: 8px; padding: 13px 14px; font-size: 12px; color: var(--hs-text); font-family: var(--hs-mono); line-height: 1.65; white-space: pre; overflow: auto; max-height: 460px; }
.ctr-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px 20px; }
.verify-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.verify-form .vf-full { grid-column: 1 / -1; }
.verify-form label { display: block; font-size: 12px; color: var(--hs-muted); margin-bottom: 4px; font-weight: 500; }
.verify-form input, .verify-form textarea, .verify-form select { width: 100%; border: 1px solid var(--hs-border); border-radius: 7px; background: var(--hs-card); color: var(--hs-text); padding: 9px 11px; font-size: 13px; outline: 0; font-family: inherit; }
.verify-form textarea { font-family: var(--hs-mono); font-size: 12px; resize: vertical; }
.verify-form input:focus, .verify-form textarea:focus { border-color: var(--hs-green); box-shadow: 0 0 0 3px var(--hs-green-glow); }
@media (max-width: 768px) { .verify-form { grid-template-columns: 1fr; } }

/* Pause button + paused indicator */
.tb-pause svg { width: 15px; height: 15px; }
.tb-pause.paused { background: var(--hs-green); color: var(--hs-on-green); border-color: var(--hs-green); }
.tb-pause.paused:hover { background: var(--hs-green-600); color: var(--hs-on-green); }
body.hs-paused::after {
  content: "⏸ Paused — live updates frozen. Click resume to go live.";
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--hs-green); color: var(--hs-on-green); font-weight: 600; font-size: 12.5px;
  padding: 8px 18px; border-radius: 22px; box-shadow: var(--hs-shadow); z-index: 300; pointer-events: none; white-space: nowrap;
}

/* Contract creator age link */
.crt-age { color: var(--hs-muted); cursor: pointer; white-space: nowrap; }
.crt-age:hover { color: var(--hs-link); }
.crt-arrow { color: var(--hs-link); font-weight: 600; }

/* Bug-report guidelines list */
.bug-guide { margin: 0; padding-left: 20px; color: var(--hs-body); line-height: 1.75; }
.bug-guide li { margin: 5px 0; }
.bug-guide li b { color: var(--hs-text); }
.mc-head svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; color: var(--hs-green-700); }

/* Token search (tokens page) */
.tsearch { margin-bottom: 18px; }
.tsearch-form { display: flex; align-items: center; gap: 10px; background: var(--hs-card); border: 1px solid var(--hs-border); border-radius: 12px; box-shadow: var(--hs-shadow-sm); padding: 8px 8px 8px 14px; }
.tsearch-form:focus-within { border-color: var(--hs-green); box-shadow: 0 0 0 3px var(--hs-green-glow); }
.tsearch-ic { color: var(--hs-muted); display: flex; flex-shrink: 0; }
.tsearch-form input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--hs-text); min-width: 0; }
.tsearch-form .btn { flex-shrink: 0; height: 38px; padding: 0 20px; }
.tsearch-form .btn:disabled { opacity: .6; cursor: not-allowed; }
.tsearch-note { font-size: 12.5px; margin-top: 8px; padding-left: 4px; min-height: 16px; }
.tsearch-note .down { color: var(--hs-red); }

/* block height prev/next navigation arrows */
.blk-nav-wrap { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: middle; }
.blk-nav { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--hs-border); border-radius: 7px; color: var(--hs-body); background: var(--hs-card); }
.blk-nav svg { width: 13px; height: 13px; }
.blk-nav:hover { border-color: var(--hs-green); color: var(--hs-green-800); background: var(--hs-green-tint); }
.blk-nav.disabled { opacity: .35; pointer-events: none; }

/* Etherscan-style address hover-highlight: hovering one occurrence lights up all of them */
.ahl { border-radius: 3px; }
.hl-on { background: var(--hs-hl); box-shadow: 0 0 0 2px var(--hs-hl); }
/* method-pill hover-highlight: every tx with the same method lights up (lime, to differ from the amber address highlight) */
.method[data-method] { cursor: default; }
.mhl-on { background: var(--hs-green-tint) !important; border-color: transparent !important; color: var(--hs-green-800) !important; box-shadow: 0 0 0 2px var(--hs-green); }

/* little contract/token glyphs shown next to addresses everywhere one is referenced */
.ci { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; vertical-align: -2px; margin-right: 3px; flex-shrink: 0; }
.ci svg { width: 100%; height: 100%; }
.ci-contract { color: var(--hs-muted); }
.ci-token, .ci-nft { color: var(--hs-green-700); }

/* Decoded log params (verified events render decoded, like BaseScan) */
.log-params { display: flex; flex-direction: column; gap: 7px; }
.log-param { display: grid; grid-template-columns: 150px 60px 1fr; gap: 10px; align-items: start; font-size: 12.5px; }
.log-param .lp-name { color: var(--hs-text); font-weight: 500; word-break: break-word; }
.log-param .lp-name .lp-idx { color: var(--hs-muted-2); font-weight: 400; }
.log-param .lp-type { color: var(--hs-muted); font-family: var(--hs-mono); font-size: 11.5px; }
.log-param .lp-val { color: var(--hs-body); word-break: break-all; font-family: var(--hs-mono); }
.log-ev.verified { background: var(--hs-green-tint); border-color: transparent; color: var(--hs-green-800); }
.log-vchk { display: inline-flex; vertical-align: middle; margin-left: 5px; }
.log-decoded-tag { font-size: 11px; color: var(--hs-green-700); font-weight: 600; margin-left: 6px; }
@media (max-width: 768px) { .log-param { grid-template-columns: 1fr; gap: 2px; } }

/* Inline icon, sized to the text beside it. The icon SVGs carry a viewBox but NO width/height —
   they're sized by whatever container they sit in — so any bare usage must set a size or the SVG
   scales up to fill its box. Wrap loose icons in this. */
.ic-inline { display: inline-flex; align-items: center; vertical-align: -2px; }
.ic-inline svg { width: 14px; height: 14px; }

/* ---------------------------- Label Cloud ---------------------------- */
.lbl-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.lbl-chip {
  --lbl: var(--hs-green);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--hs-border); border-radius: 999px; background: var(--hs-card);
  color: var(--hs-text); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.lbl-chip:hover { border-color: var(--lbl); background: var(--hs-soft-2); transform: translateY(-1px); }
.lbl-chip .lbl-name { position: relative; padding-left: 12px; }
.lbl-chip .lbl-name::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--lbl);
}
.lbl-chip .lbl-count {
  background: var(--hs-soft); border: 1px solid var(--hs-border-2); border-radius: 999px;
  padding: 1px 7px; font-size: 11.5px; font-weight: 600; color: var(--hs-muted);
}
.lbl-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  background: var(--hs-soft); border: 1px solid var(--hs-border-2); font-size: 11.5px;
  font-weight: 600; color: var(--hs-body); text-decoration: none; vertical-align: middle;
}
.lbl-badge:hover { border-color: var(--hs-green); }

/* Load smoothly WITHOUT hiding the page: paint the full structure immediately and reserve the
   exact space every JS-mounted piece (chrome, hero search, stat banner, feeds) will occupy, so
   async data fills in place and nothing ever shifts. No opacity gate = no blank delay; reserved
   space = no jumping. Heights come from measuring the live pages at each breakpoint. */
[data-slot="header"] { min-height: 106px; }       /* topbar (47) + sticky nav (59) — same at all widths */
[data-slot="footer"] { min-height: 300px; display: block; }
#hero-search { min-height: 52px; }
#banner1 { min-height: 217px; }
#blk-body, #tx-body { min-height: 420px; }
main.hs-main { min-height: 55vh; }                 /* keep the footer from jumping on list/detail pages */
@media (max-width: 640px) {
  #banner1 { min-height: 560px; }
  #blk-body, #tx-body { min-height: 528px; }
  [data-slot="footer"] { min-height: 780px; }
}