/* Hero panel concepts. The panel is appended to the template's hero container
   after hydration, so the container's own children are hidden but the panel is
   not; ":not()" is what keeps it visible. */
html[data-dexscan-hero-panel] .framer-201m93 {
  height:auto !important; min-height:0 !important; aspect-ratio:1672/941;
  position:relative; overflow:hidden; border-radius:18px; border:1px solid #25272d;
  background:#050609; box-shadow:0 24px 90px #0006;
  -webkit-mask:none !important; mask:none !important;
  padding:0 !important;
  /* The panel sizes itself in container units. A container cannot query
     itself, so the query container has to be the host, not the panel. */
  container-type:inline-size;
}
html[data-dexscan-hero-panel] .framer-201m93 > *:not(.dexscan-hero-panel) { display:none !important; }
@media(max-width:809.98px) { html[data-dexscan-hero-panel] .framer-201m93 { border-radius:12px; } }

.dexscan-hero-panel {
  position:absolute; inset:0; display:grid; gap:1px; background:#25272d;
  /* Sized in container units so the whole panel scales with the hero instead
     of needing a breakpoint per width. 1.08cqw is 11px at the 1018px hero. */
  font:400 clamp(6.5px, 1.08cqw, 13px)/1.45 Sora, Arial, sans-serif;
  color:#e9ebf0; text-align:left;
}
.dexscan-hero-panel * { box-sizing:border-box; min-width:0; }
.dhp-scanner, .dhp-feed { grid-template-columns:27% 1fr; }
.dhp-columns { grid-template-columns:23% 1fr 25%; }
.dhp-rail, .dhp-side { display:flex; flex-direction:column; gap:1px; background:#25272d; overflow:hidden; }
.dhp-rail > *, .dhp-side > * { background:#0b0d12; padding:5.4% 6%; }
/* Leftover rail space becomes plain panel background rather than stretching the
   last card — a short card at the bottom otherwise became a large empty block
   of its own colour. */
.dhp-rail > *, .dhp-side > * { flex:none; min-height:0; overflow:hidden; }
.dhp-rail::after, .dhp-side::after { content:""; flex:1; min-height:0; background:#0b0d12; }
.dhp-main { display:flex; flex-direction:column; background:#070810; padding:0; overflow:hidden; }

.dexscan-hero-panel h2 { font-size:1.45em; font-weight:600; letter-spacing:-.02em; margin:0; }
.dexscan-hero-panel h3 { font-size:.95em; font-weight:500; letter-spacing:.02em; color:#8b93a4; margin:0 0 .7em; text-transform:uppercase; }
.dhp-badge { position:absolute; top:2.4%; right:1.8%; z-index:2; padding:.45em .85em; border-radius:99px;
  background:#101116cc; border:1px solid #2c2f38; color:#9aa1ad; font-size:.92em; letter-spacing:.01em; backdrop-filter:blur(6px); }
.dhp-up { color:#31c48d; } .dhp-down { color:#f05252; }
.dhp-chip { padding:.3em .7em; border-radius:6px; background:#161922; color:#9aa1ad; font-size:.9em; }

.dhp-rewards { background:linear-gradient(150deg,#0015cf,#0c1fa6) !important; color:#fff; }
.dhp-rewards h3 { color:#c3cbff; }
.dhp-amount { font-size:2em; font-weight:600; letter-spacing:-.03em; margin:0; }
.dhp-sub { color:#c3cbff; margin:.3em 0 0; }
.dhp-reward-meta { margin-top:1.1em; border-top:1px solid #ffffff2e; padding-top:.8em; display:grid; gap:.45em; }
.dhp-reward-meta .dhp-row span:first-child { color:#c3cbff; }

.dhp-row { display:flex; justify-content:space-between; gap:.8em; }
.dhp-row span:first-child { color:#8b93a4; }
.dhp-chain-list, .dhp-tokens { list-style:none; margin:0; padding:0; display:grid; gap:.42em; }
.dhp-chain-list li, .dhp-tokens li { display:flex; justify-content:space-between; align-items:center; gap:.6em;
  padding:.45em .6em; border-radius:7px; }
.dhp-chain-list li.is-active, .dhp-tokens li.is-active { background:#161c2e; box-shadow:inset 0 0 0 1px #24304f; }
.dhp-count { color:#6b7280; }
.dhp-token-id { display:flex; flex-direction:column; }
.dhp-token-id b { font-weight:600; } .dhp-token-id i { font-style:normal; color:#6b7280; font-size:.92em; }
.dhp-token-price { display:flex; flex-direction:column; align-items:flex-end; }
.dhp-token-price b { font-weight:500; } .dhp-token-price i { font-style:normal; font-size:.92em; }

.dhp-coin-head { display:flex; align-items:center; justify-content:space-between; gap:.6em; margin-bottom:.5em; }
.dhp-coin-head h3 { margin:0; }
.dhp-price { font-size:1.55em; font-weight:600; letter-spacing:-.02em; margin:0; }
.dhp-change { margin:.15em 0 0; }
.dhp-stats { margin-top:1em; display:grid; gap:.5em; }

.dhp-main-head { display:flex; align-items:center; justify-content:space-between; gap:1em;
  padding:4% 4.5%; border-bottom:1px solid #191c24; }
/* The badge is pinned to the panel's top-right corner. In the layouts whose
   main column reaches that corner, the head has to leave room for it. */
.dhp-scanner .dhp-main-head, .dhp-feed .dhp-main-head { padding-right:14.5em; }
.dhp-tabs { display:flex; gap:.35em; }
.dhp-tabs span { padding:.45em .9em; border-radius:7px; color:#7c8494; }
.dhp-tabs span.is-active { background:#0015cf; color:#fff; }
.dhp-main > .dhp-tabs { padding:0 4.5%; margin:3% 0 0; }
.dhp-chart-wrap { flex:1; min-height:0; margin:3% 4.5%; }
.dhp-chart { display:block; width:100%; height:100%; }
.dhp-chart line { stroke-width:1.4; stroke:currentColor; }
.dhp-chart rect { fill:currentColor; }
.dhp-chart .dhp-up { color:#31c48d; } .dhp-chart .dhp-down { color:#f05252; }

.dhp-fills { margin:0 4.5% 3.5%; display:grid; gap:.1em; align-content:start; flex:none; }
.dhp-fill-head, .dhp-fill { display:grid; grid-template-columns:1fr 1.15fr 1.15fr 1.15fr .8fr; gap:.6em; padding:.55em 0; }
.dhp-fill-head { color:#6b7280; border-bottom:1px solid #191c24; }
.dhp-fill { border-bottom:1px solid #12141b; }
.dhp-fill span:not(:first-child) { color:#aeb4c0; }
.dhp-fill span:first-child { font-weight:500; }
.dhp-age { color:#6b7280 !important; text-align:right; }

/* The panel is a fixed 1672x941 shape, so it scales with the hero rather than
   reflowing. Below the tablet breakpoint the rails would be unreadable, so the
   narrow layouts drop the extra columns instead of shrinking everything. */
/* Dropping the side column makes the three-column layout's main pane reach the
   badge corner, so it needs the same head clearance as the other two. */
@container (max-width: 860px) { .dhp-columns { grid-template-columns:28% 1fr; } .dhp-side { display:none; }
  .dhp-columns .dhp-main-head { padding-right:14.5em; } }
@container (max-width: 560px) { .dhp-scanner, .dhp-feed, .dhp-columns { grid-template-columns:1fr; } .dhp-rail { display:none; } }

/* Gallery */
.dexscan-panel-gallery { box-sizing:border-box; max-width:1160px; padding:130px 24px 80px; margin:auto; color:#fff; font-family:Sora,Arial,sans-serif; }
.dexscan-panel-gallery a { color:inherit; }
.dexscan-panel-gallery h1 { font-size:clamp(32px,5vw,52px); letter-spacing:-.04em; line-height:1.15; margin:22px 0 16px; }
.dexscan-panel-gallery > p { max-width:640px; color:#9297a1; line-height:1.7; margin:0 0 40px; }
.dexscan-panel-grid { display:grid; gap:28px; }
.dexscan-panel-option { border:1px solid #25272d; background:#0d0f14; border-radius:18px; overflow:hidden; }
/* An <a> is inline by default and aspect-ratio does not apply to inline boxes,
   so without display:block the stage collapses and the panel has no height. */
.dexscan-panel-stage { display:block; position:relative; aspect-ratio:1672/941; background:#050609; border-bottom:1px solid #25272d; container-type:inline-size; }
.dexscan-panel-stage .dexscan-hero-panel { border-radius:0; }
.dexscan-panel-info { padding:24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.dexscan-panel-option h2 { font-size:22px; font-weight:500; margin:0 0 9px; }
.dexscan-panel-option p { color:#9297a1; font-size:14px; line-height:1.6; margin:0; max-width:64ch; }
.dexscan-panel-tag { display:inline-block; color:#8da1ff; font-size:11px; letter-spacing:.03em; margin:0 0 9px; }
.dexscan-panel-link { flex-shrink:0; font-size:13px; text-decoration:none; border-radius:9px; background:#0015cf; padding:14px 18px; }
.dexscan-panel-link:hover { background:#142ee7; }
.dexscan-panel-gallery a:focus-visible { outline:2px solid #98aaff; outline-offset:5px; }
@media(max-width:640px) { .dexscan-panel-gallery { padding:100px 16px 48px; } .dexscan-panel-info { align-items:flex-start; flex-direction:column; padding:20px; gap:16px; } }

/* Unified concept gallery. Generated images, markup panels and the template's
   own alternate hero pages share one card frame, so a picture card borrows the
   panel stage rather than defining a second aspect-ratio box. */
.dexscan-concept-section { margin:0 0 52px; }
.dexscan-concept-section > h2 { font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:#8da1ff; margin:0 0 8px; }
.dexscan-concept-section > p { color:#9297a1; font-size:14px; line-height:1.7; margin:0 0 24px; max-width:72ch; }
.dexscan-concept-grid { display:grid; gap:28px; }
.dexscan-panel-stage img { width:100%; height:100%; object-fit:contain; display:block; }
/* A page concept is a whole alternate homepage rather than a hero element, so
   its card says where the link goes instead of implying an in-place preview. */
.dexscan-concept-kind { display:inline-block; color:#6b7280; font-size:11px; letter-spacing:.03em; margin:0 0 9px; }
.dexscan-concept-empty { display:flex; align-items:center; justify-content:center; height:100%; color:#4b5563; font-size:13px; }