/* guap.wtf — cyberpunk mint-tracker design system.
   Shared across all pages, structural pattern (root tokens + fixed overlay
   divs) carried over from the old graffiti build, every value replaced. */

:root{
  /* mint-mascot palette (shifted from acid-green cyberpunk 2026-08-12 to
     match the new logo/badge artwork) — --cyan/--magenta names kept as-is
     so every existing selector below repaints automatically. Background
     stays dark (this is a live trading-data terminal — dense numbers read
     better on dark), accent shifts from neon lime to the softer mint from
     the badge art. */
  --void:#070d09; --panel:#0b140d; --panel-2:#101f13; --grid:#1c3320;
  --cyan:#6ee7a0; --magenta:#8fe89a; --violet:#7b3ffb;
  --acid:#5fe08e;
  --amber:#ffb800;
  --danger:#ff3b5c;
  --azure:#4da3ff; /* Insights (whale tracking) accent -- every other hue here is already claimed (cyan=Alpha, amber=Elevate/Hot, violet=Sweep), azure reads naturally for "whale" */
  --text:#e8fbe9; --text-dim:#7fa886;
  --font-display:'Orbitron',sans-serif;
  --font-ui:'Rajdhani',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --font-logo:'Baloo 2',cursive;
}

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

html,body{background:var(--void);color:var(--text);min-height:100%}
body{
  font-family:var(--font-ui);
  font-weight:500;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

/* ---- animated cyberpunk grid backdrop ---- */
#gridbg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(110,231,160,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,231,160,.07) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 85% 55% at 50% 0%, #000 35%, transparent 100%);
  mask-image:radial-gradient(ellipse 85% 55% at 50% 0%, #000 35%, transparent 100%);
  animation:grid-drift 30s linear infinite;
}
@keyframes grid-drift{from{background-position:0 0,0 0}to{background-position:46px 46px,46px 46px}}

/* ---- CRT scanline + glow overlay (re-skin of the old #grain/#glow divs) ---- */
#scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:200;
  background:repeating-linear-gradient(
    to bottom,
    rgba(110,231,160,0.025) 0px,
    rgba(110,231,160,0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:screen;
}
#glow{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(600px circle at var(--gx,50%) var(--gy,30%), rgba(110,231,160,0.08), transparent 60%);
  transition:background .3s ease;
}

.wrap{max-width:1280px;margin:0 auto;padding:0 20px}

/* ---- header / nav ---- */
header.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(5,7,13,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--grid);
}
header.hdr::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent);
  opacity:.5;animation:hdr-sweep 6s ease-in-out infinite;
}
@keyframes hdr-sweep{0%,100%{opacity:.25}50%{opacity:.7}}
.hdr-inner{display:flex;align-items:center;gap:24px;height:64px}
.logo{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.logo-icon{width:38px;height:38px;flex:none;filter:drop-shadow(0 0 8px rgba(110,231,160,.35))}
.logo-text{
  font-family:var(--font-logo);font-weight:700;font-size:22px;letter-spacing:.01em;
  color:var(--text);
}
.logo-text b{color:var(--cyan);text-shadow:0 0 10px rgba(110,231,160,.55),0 0 22px rgba(110,231,160,.3);font-style:normal;font-weight:800}
/* overflow-x:auto is a safety net for narrow viewports, not the normal
   path -- scrollbar hidden (still swipeable) so a tight fit never shows a
   raw native scrollbar across the header, which is exactly what happened
   the moment a 7th nav item (Insights) stopped fitting some desktop widths
   outright, real bug found live 2026-08-26. Padding tightened below so the
   row actually fits at normal widths instead of relying on this fallback. */
nav.nav{display:flex;gap:4px;margin-left:8px;overflow-x:auto;scrollbar-width:none}
nav.nav::-webkit-scrollbar{display:none}
nav.nav a{
  font-family:var(--font-ui);font-weight:600;font-size:14px;letter-spacing:.03em;
  color:var(--text-dim);padding:8px 11px;border-radius:8px;white-space:nowrap;
  border:1px solid transparent;transition:color .15s,border-color .15s;
}
nav.nav a:hover{color:var(--cyan)}
nav.nav a.active{color:var(--cyan);border-color:var(--grid);background:rgba(110,231,160,.06)}

/* ---- Alpha pill: moved into the header HUD next to LIVE (2026-08-19, direct
   request), blinking so it actually gets noticed instead of reading as just
   another nav link buried in a row of them ---- */
.alpha-pill{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(110,231,160,.4);background:rgba(110,231,160,.1);
  border-radius:8px;padding:6px 10px;
  animation:alpha-pulse 1.8s ease-in-out infinite;
}
.alpha-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:pulse-dot 1.6s ease infinite}
.alpha-pill:hover{background:rgba(110,231,146,.22)}
.alpha-pill.active{background:rgba(110,231,146,.26);border-color:var(--cyan)}
@keyframes alpha-pulse{0%,100%{box-shadow:0 0 0 rgba(110,231,146,0)}50%{box-shadow:0 0 12px rgba(110,231,146,.55)}}

/* ---- header HUD: live status + gas + language ---- */
.hdr-hud{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px}

/* ---- footer HUD: gas / notifs / lang / sound, relocated out of the header
   (2026-09-02, too crowded up top next to the growing nav) ---- */
.ftr-hud{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:16px;margin-top:16px;border-top:1px solid var(--grid);width:100%}
.ftr-inner .ftr-hud{padding-top:14px;margin-top:14px}
.live-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--acid);
  border:1px solid rgba(95,224,142,.35);background:rgba(95,224,142,.08);
  border-radius:8px;padding:6px 10px;transition:color .2s,border-color .2s,background .2s;
}
.live-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid);animation:pulse-dot 1.6s ease infinite}
.live-pill.offline{color:var(--text-dim);border-color:var(--grid);background:var(--panel)}
.live-pill.offline .dot{background:var(--text-dim);box-shadow:none;animation:none}
.live-pill.syncing{color:var(--amber);border-color:rgba(255,184,0,.35);background:rgba(255,184,0,.08)}
.live-pill.syncing .dot{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:pulse-dot .8s ease infinite}
.gas-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;color:var(--text);
  border:1px solid var(--grid);border-radius:8px;padding:6px 10px;background:var(--panel);
  transition:color .2s,border-color .2s;
}
.gas-pill .ico{opacity:.85}
.gas-pill .unit{color:var(--text-dim);font-size:9px}
.gas-pill.high{color:var(--amber);border-color:rgba(255,184,0,.35)}
.lang-toggle{
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
  border:1px solid var(--grid);border-radius:8px;padding:6px 10px;background:var(--panel);
}
.lang-toggle:hover{color:var(--cyan);border-color:rgba(110,231,160,.4)}
.tg-app-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--cyan);
  border:1px solid rgba(110,231,160,.35);border-radius:8px;padding:6px 10px;background:rgba(110,231,160,.06);
  transition:background .15s,border-color .15s;white-space:nowrap;
}
.tg-app-btn:hover{background:rgba(110,231,160,.14);border-color:rgba(110,231,160,.6)}
.tg-app-btn .ico{font-size:12px}
@media (max-width:640px){.tg-app-btn span:not(.ico){display:none}}
.notif-bell{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
  border:1px solid var(--grid);border-radius:8px;padding:6px 10px;background:var(--panel);
}
.notif-bell .n{color:var(--cyan);font-weight:700}
.sound-wrap{position:relative}
.sfx-toggle{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
  border:1px solid var(--grid);border-radius:8px;padding:6px 10px;
  background:var(--panel);
}
.sfx-toggle.on{color:var(--acid);border-color:rgba(95,224,142,.4)}

/* ---- sound settings dropdown panel ---- */
.sound-panel{
  position:absolute;bottom:calc(100% + 8px);top:auto;right:0;z-index:250;width:270px;
  background:var(--panel);border:1px solid var(--grid);border-radius:12px;
  padding:14px;box-shadow:0 12px 32px rgba(0,0,0,.5);
  display:none;
}
.sound-panel.open{display:block}
.sound-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--grid)}
.sound-panel-head span{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.06em;color:var(--text)}
.switch{position:relative;display:inline-block;width:34px;height:18px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--panel-2);border:1px solid var(--grid);border-radius:10px;cursor:pointer;transition:.15s}
.switch .slider::before{content:'';position:absolute;width:12px;height:12px;left:2px;top:2px;background:var(--text-dim);border-radius:50%;transition:.15s}
.switch input:checked + .slider{background:rgba(110,231,160,.15);border-color:rgba(110,231,160,.5)}
.switch input:checked + .slider::before{transform:translateX(16px);background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.sound-vol-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sound-vol-row .k{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);letter-spacing:.06em}
/* Custom slider, replaces the stock browser control (default grey track +
   plain round thumb, the one native-styled element left on an otherwise
   fully custom panel — flagged directly as "so so so old styled"). Filled
   portion uses the --pct custom property cyber.js sets on load + every
   input event, same trick a real progress-fill slider needs since a native
   <input type=range> has no fill pseudo-element of its own to target. */
.sound-vol-row input[type=range]{
  flex:1;--pct:70%;-webkit-appearance:none;appearance:none;
  height:5px;border-radius:3px;outline:none;cursor:pointer;
  background:linear-gradient(to right,var(--cyan) 0%,var(--cyan) var(--pct),var(--grid) var(--pct),var(--grid) 100%);
}
.sound-vol-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px rgba(110,231,160,.7),0 0 0 3px var(--void);
  cursor:pointer;transition:transform .12s;
}
.sound-vol-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.sound-vol-row input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;border:none;
  background:var(--cyan);box-shadow:0 0 8px rgba(110,231,160,.7),0 0 0 3px var(--void);
  cursor:pointer;transition:transform .12s;
}
.sound-vol-row input[type=range]::-moz-range-thumb:hover{transform:scale(1.15)}
.sound-vol-row input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:transparent}
.sound-events{display:flex;flex-direction:column;gap:9px}
.sound-event-row{display:flex;align-items:center;gap:6px}
.sound-event-row .label{flex:1;min-width:0;font-family:var(--font-ui);font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sound-select{
  flex:none;max-width:108px;font-family:var(--font-mono);font-size:10px;color:var(--text);
  background:var(--panel-2);border:1px solid var(--grid);border-radius:6px;padding:4px 5px;
}
.sound-select:focus{outline:none;border-color:var(--cyan)}
.sound-preview{
  font-family:var(--font-mono);font-size:10px;color:var(--text-dim);
  border:1px solid var(--grid);border-radius:8px;padding:3px 7px;background:var(--panel-2);flex:none;
}
.sound-preview:hover{color:var(--cyan);border-color:rgba(110,231,160,.4)}

@media(max-width:900px){
  nav.nav{order:3;width:100%;margin-left:0}
  .hdr-hud{order:4;width:100%;margin-left:0;margin-top:8px}
  .hdr-inner{flex-wrap:wrap;height:auto;padding:10px 0}
}

/* ---- live ticker strip ---- */
.ticker-wrap{
  position:relative;
  border-bottom:1px solid var(--grid);background:var(--panel);
  overflow:hidden;white-space:nowrap;height:34px;display:flex;align-items:center;
}
.ticker-track{display:inline-flex;gap:36px;animation:ticker-scroll 40s linear infinite;padding-left:100%}
.ticker-track:hover{animation-play-state:paused}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.ticker-item{
  font-family:var(--font-mono);font-size:12px;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:6px;
}
.ticker-item b{color:var(--cyan)}
.ticker-item.mint b{color:var(--acid)}
.ticker-item.hot{color:var(--text)}
.ticker-item.hot b{color:var(--amber)}
.ticker-empty{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);padding-left:16px}

/* ---- hero ---- */
.hero{padding:44px 0 24px;position:relative;z-index:1}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(110,231,160,.35);background:rgba(110,231,160,.06);
  border-radius:8px;padding:5px 12px;margin-bottom:16px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid);animation:pulse-dot 1.6s ease infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{
  font-family:var(--font-display);font-weight:900;font-size:clamp(28px,4.4vw,48px);
  letter-spacing:-0.01em;line-height:1.08;margin-bottom:14px;text-transform:uppercase;
  animation:title-in .5s ease both;
}
@keyframes title-in{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.hero h1 .g{color:var(--cyan);text-shadow:0 0 20px rgba(110,231,160,.55),0 0 44px rgba(110,231,160,.25)}
.hero p{color:var(--text-dim);font-size:16px;max-width:640px}

/* ---- gas HUD (legacy hero variant — kept for pages that opt in) ---- */
.gas-hud{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:13px;
  border:1px solid var(--grid);border-radius:8px;padding:8px 14px;background:var(--panel);
  margin-top:18px;
}
.gas-hud .k{color:var(--text-dim);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.gas-hud .v{color:var(--acid);font-weight:600}
.gas-hud .v.high{color:var(--amber)}

/* ---- HUD panel component (replaces "sticker button") ---- */
.panel{
  position:relative;
  background:var(--panel);border:1px solid var(--grid);border-radius:8px;
  padding:16px;overflow:hidden;
}
.panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  opacity:0;transition:opacity .4s ease;
}
.panel.pulse::before{opacity:1;animation:panel-sweep .9s ease}
@keyframes panel-sweep{0%{opacity:1}100%{opacity:0}}
.corner{position:absolute;width:10px;height:10px;border-color:var(--grid);border-style:solid;opacity:.7}
.corner.tl{top:-1px;left:-1px;border-width:1px 0 0 1px}
.corner.tr{top:-1px;right:-1px;border-width:1px 1px 0 0}
.corner.bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px}
.corner.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

/* ---- section headings ---- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:40px 0 16px}
.section-head h2{
  font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--text);
}
.section-head a{font-family:var(--font-mono);font-size:12px;color:var(--cyan)}

/* ---- vertical dashboard columns (home) ---- */
.dash{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0 8px;position:relative;z-index:1}
.dash-col{display:flex;flex-direction:column;padding:0;min-height:0}
.dash-col-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid var(--grid)}
.dash-col-head h3{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text);display:flex;align-items:center;gap:8px}
.dash-col-head h3 .n{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);font-weight:500;background:var(--panel-2);border-radius:10px;padding:2px 8px}
.dash-col-head a{font-family:var(--font-mono);font-size:11px;color:var(--cyan);white-space:nowrap}

@media(max-width:1300px){
  .dash{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .dash{grid-template-columns:1fr}
}

/* ---- vertical row list (compact, small icons — the mintgo-style feed) ---- */
.rowlist{max-height:600px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--grid) transparent}
.rowlist::-webkit-scrollbar{width:6px}
.rowlist::-webkit-scrollbar-thumb{background:var(--grid);border-radius:12px}
.row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid rgba(27,39,64,.55);transition:background .15s;position:relative}
.row:hover{background:rgba(110,231,160,.05)}
.row:last-child{border-bottom:none}
.row.row-new{animation:row-flash-in 1s ease}
@keyframes row-flash-in{0%{background:rgba(110,231,160,.22)}100%{background:transparent}}
.row-ico{width:30px;height:30px;border-radius:8px;object-fit:cover;background:var(--panel-2);border:1px solid var(--grid);flex:none}
.row-main{flex:1;min-width:0}
.row-name{font-family:var(--font-ui);font-weight:700;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-socials{display:inline-flex;gap:5px;margin-left:6px;vertical-align:middle}
.row-social{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:11px;line-height:1;color:var(--text-dim);text-decoration:none;opacity:.85;transition:opacity .15s,color .15s}
.row-social:hover{opacity:1;color:var(--acid)}
.row-sub{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.row-val{font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--text);text-align:right;flex:none;white-space:nowrap}
.row-val .up{color:var(--acid)}
.row-val .down{color:var(--danger)}
.row-empty{padding:26px 14px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim);text-align:center}

/* ---- small round "jump to OpenSea" button on every row ---- */
.row-os-btn{
  flex:none;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;line-height:1;color:var(--text-dim);
  background:var(--panel-2);border:1px solid var(--grid);
  transition:color .15s,border-color .15s,background .15s;
}
.row-os-btn:hover{color:#2081e2;border-color:#2081e2;background:rgba(32,129,226,.12)}

/* ---- small round "mint with SnipeNowBot" button on every row, same shape
   as the OpenSea jump button, mint-green instead of OpenSea-blue so the two
   read as distinct actions at a glance ---- */
.row-bot-btn{
  flex:none;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;color:var(--text-dim);
  background:var(--panel-2);border:1px solid var(--grid);
  transition:color .15s,border-color .15s,background .15s,transform .15s;
}
.row-bot-btn:hover{color:var(--cyan);border-color:var(--cyan);background:rgba(110,231,160,.12);transform:scale(1.08)}
.row-bot-btn.busy{opacity:.5;pointer-events:none}
.row-bot-btn.armed{color:var(--cyan);border-color:var(--cyan);background:rgba(110,231,160,.15)}

/* ---- live mint status bar: a thin fill strip along the row's own bottom
   edge, tracking totalMinted/maxSupply, plus supply text folded into the
   existing sub-line -- deliberately NOT a bulky multi-line block, this list
   is a dense feed, not a card grid. Updates in place every 20s (real data,
   guap-mint-indexer), no per-row re-render needed. ---- */
.row-supplybar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cyan);box-shadow:0 0 6px rgba(110,231,160,.65);transition:width .5s ease}
.row-supplybar.sold{background:var(--danger);box-shadow:0 0 6px rgba(255,59,92,.6)}
.row-supplybar.upcoming{background:var(--amber);box-shadow:0 0 6px rgba(255,184,0,.6)}
.row-supply-txt{color:var(--text-dim)}

/* ---- rank number + inline sparkline (trending/market rows) ---- */
.row-rank{
  width:22px;flex:none;text-align:center;
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);font-weight:600;
}
.row.row-rank-1 .row-rank, .row.row-rank-2 .row-rank, .row.row-rank-3 .row-rank{color:var(--cyan)}
.row-spark{flex:none;width:52px;height:22px;opacity:.9}
.row-spark path{fill:none;stroke-width:1.6}
.row-spark.up path{stroke:var(--acid)}
.row-spark.down path{stroke:var(--danger)}
.row-spark.flat path{stroke:var(--text-dim)}

/* Ranked rows (Trending/Market) carry a rank badge + sparkline + two action
   buttons on top of icon+name+value -- fine on the full-width /trending/
   and /market/ pages, but the 4-across homepage dashboard column is only
   ~300px wide, which was squeezing row-main to near-zero and hiding the
   name entirely. Dropping just the sparkline (the OpenSea jump button is a
   real, wanted action, not spare width to reclaim) already frees enough
   room for the name to render with a real floor width. */
.dash .row-spark{display:none}
.dash .row-main{min-width:70px}

/* ---- filter bar: time-window chips + threshold ---- */
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0;position:relative;z-index:1}
.window-chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
  border:1px solid var(--grid);border-radius:8px;padding:6px 10px;background:var(--panel);
  cursor:pointer;transition:color .15s,border-color .15s,background .15s;
}
.chip:hover{color:var(--text)}
.chip.active{color:var(--cyan);border-color:rgba(110,231,160,.5);background:rgba(110,231,160,.08)}
.threshold-group{display:flex;align-items:center;gap:6px;margin-left:auto}
.threshold-group select, .threshold-group input{
  font-family:var(--font-mono);font-size:12px;color:var(--text);
  background:var(--panel);border:1px solid var(--grid);border-radius:8px;padding:8px 10px;
}
.threshold-group input{width:90px}
.threshold-group input:focus, .threshold-group select:focus{outline:none;border-color:var(--cyan)}

/* ---- horizontal scroll-snap carousel (live mint feed) ---- */
.carousel-wrap{position:relative}
.carousel{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 10px;
  scrollbar-width:thin;scrollbar-color:var(--grid) transparent;
}
.carousel::-webkit-scrollbar{height:6px}
.carousel::-webkit-scrollbar-thumb{background:var(--grid);border-radius:12px}
.mint-card{
  scroll-snap-align:start;flex:none;width:130px;
  background:var(--panel);border:1px solid var(--grid);border-radius:12px;overflow:hidden;
  position:relative;transition:border-color .15s,transform .15s;
}
.mint-card:hover{border-color:rgba(110,231,160,.4);transform:translateY(-2px)}
.mint-card.mint-card-fresh{animation:card-flash-in .8s ease}
@keyframes card-flash-in{0%{box-shadow:0 0 0 2px rgba(110,231,160,.7),0 0 20px rgba(110,231,160,.4)}100%{box-shadow:none}}
.mint-card .thumb{width:100%;aspect-ratio:1;object-fit:cover;background:var(--panel-2);display:block}
.mint-card .badge-new{
  position:absolute;top:6px;left:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.05em;
  color:var(--void);background:var(--cyan);border-radius:8px;padding:2px 6px;font-weight:700;
}
.mint-card .qty{
  position:absolute;top:6px;right:6px;font-family:var(--font-mono);font-size:10px;font-weight:700;
  color:var(--cyan);background:rgba(5,10,5,.85);border:1px solid rgba(110,231,160,.4);border-radius:8px;padding:2px 6px;
}
.mint-card .body{padding:8px 9px}
.mint-card .name{font-family:var(--font-ui);font-weight:700;font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mint-card .ago{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-top:2px}
.carousel-empty{padding:30px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim);text-align:center;width:100%}

/* ---- mint card grid (collection detail page still uses cards) ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:8px}
.card{
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s,transform .15s;
}
.card:hover{border-color:rgba(110,231,160,.4);transform:translateY(-2px)}
.card .thumb{
  width:100%;aspect-ratio:1;border-radius:8px;object-fit:cover;background:var(--panel-2);
  border:1px solid var(--grid);
}
.card .name{font-family:var(--font-ui);font-weight:700;font-size:14.5px;color:var(--text)}
.card .sub{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim)}
.card .stat-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:12px}
.card .stat-row .up{color:var(--acid)}
.card .stat-row .down{color:var(--danger)}
.card .progress-bar{height:4px;background:var(--panel-2);border-radius:8px;overflow:hidden}
.card .progress-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--acid));transition:width .3s ease}
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:8px;
}
.badge.live{color:var(--acid);background:rgba(95,224,142,.1);border:1px solid rgba(95,224,142,.35)}
.badge.upcoming{color:var(--amber);background:rgba(255,184,0,.1);border:1px solid rgba(255,184,0,.35)}
.badge.ended{color:var(--text-dim);background:rgba(111,139,173,.08);border:1px solid var(--grid)}
.badge.sold{color:var(--danger);background:rgba(255,59,92,.1);border:1px solid rgba(255,59,92,.35)}

/* ---- tick/glitch flash on value change ---- */
.tick-flash{
  animation:glitch-tick .12s steps(2,end);
}
@keyframes glitch-tick{
  0%{text-shadow:2px 0 var(--cyan),-2px 0 var(--magenta);transform:translateX(0)}
  50%{text-shadow:-2px 0 var(--cyan),2px 0 var(--magenta);transform:translateX(1px)}
  100%{text-shadow:none;transform:translateX(0)}
}

/* ---- search/filter bar ---- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0;position:relative;z-index:1}
.filter-bar input, .filter-bar select{
  font-family:var(--font-mono);font-size:13px;color:var(--text);
  background:var(--panel);border:1px solid var(--grid);border-radius:8px;padding:9px 12px;
}
.filter-bar input:focus, .filter-bar select:focus{outline:none;border-color:var(--cyan)}
.filter-bar input::placeholder{color:var(--text-dim)}

/* ---- toast notifications ---- */
#toast-stack{
  position:fixed;top:80px;right:20px;z-index:300;
  display:flex;flex-direction:column;gap:10px;width:min(340px,90vw);
}
.toast{
  background:var(--panel);border:1px solid var(--cyan);border-radius:8px;
  padding:12px 14px;display:flex;gap:10px;align-items:center;
  box-shadow:0 0 24px rgba(110,231,160,.15);
  animation:toast-in .25s ease;
}
.toast.live{border-color:var(--acid);box-shadow:0 0 24px rgba(95,224,142,.2)}
@keyframes toast-in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.toast img{width:36px;height:36px;border-radius:8px;object-fit:cover;flex:none;background:var(--panel-2)}
.toast .t-title{font-family:var(--font-ui);font-weight:700;font-size:13px;color:var(--text)}
.toast .t-sub{font-family:var(--font-mono);font-size:11px;color:var(--text-dim)}

/* ---- hot mint popup ---- */
/* Rounded card (matches the site's own established direction away from
   sharp/blocky corners), amber/fire accent instead of the routine mint-
   green toast so it reads as a different, rarer kind of event at a glance.
   Positioned via inline top/left set in JS (random-within-safe-zone), not
   here — this only owns the look and the enter/exit motion. */
.hotmint-pop{
  position:fixed;z-index:350;width:min(300px,88vw);
  display:flex;gap:12px;align-items:center;padding:14px 16px 14px 14px;
  background:var(--panel);border:1px solid var(--amber);border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 28px rgba(255,184,0,.22);
  opacity:0;transform:scale(.85);
  transition:opacity .35s cubic-bezier(.34,1.56,.64,1),transform .35s cubic-bezier(.34,1.56,.64,1);
  cursor:default;
}
.hotmint-pop.in{opacity:1;transform:scale(1)}
.hotmint-pop.out{opacity:0;transform:scale(.9)}
.hotmint-badge{
  flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-size:17px;background:linear-gradient(145deg,var(--amber),#ff7a1a);
  /* octagon cut, per the user's own preferred accent shape — a small sharp
     geometric badge without forcing the whole (readable-text) card to be
     octagon-clipped too */
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  box-shadow:0 0 14px rgba(255,184,0,.5);
  animation:hotmint-pulse 1.4s ease-in-out infinite;
}
@keyframes hotmint-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.hotmint-img{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none;background:var(--panel-2)}
.hotmint-body{min-width:0}
.hotmint-title{font-family:var(--font-display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:700}
.hotmint-name{font-family:var(--font-ui);font-weight:700;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hotmint-sub{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);margin-top:1px}
@media(max-width:720px){.hotmint-pop{width:min(260px,84vw)}}

/* ---- sweep popup — same card/positioning/timing as hot mint, violet
   accent instead of amber so a big secondary-market buy reads as a
   distinct kind of event at a glance rather than "another hot mint" ---- */
.hotmint-pop.sweep{border-color:var(--violet);box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 28px rgba(123,63,251,.28)}
.hotmint-pop.sweep .hotmint-badge{background:linear-gradient(145deg,var(--violet),#c34ffb);box-shadow:0 0 14px rgba(123,63,251,.55)}
.hotmint-pop.sweep .hotmint-title{color:var(--violet)}
.ticker-item.sweep b{color:var(--violet)}

/* ---- alpha-signal popup — same card/positioning/timing as hot mint/sweep,
   cyan accent (the site's own core brand color) since this is the site's
   most premium signal: a wallet with a REAL proven track record, not just
   raw mint/buy activity. ---- */
.hotmint-pop.alpha{border-color:var(--cyan);box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 28px rgba(110,231,160,.28)}
.hotmint-pop.alpha .hotmint-badge{background:linear-gradient(145deg,var(--cyan),var(--acid));box-shadow:0 0 14px rgba(110,231,160,.55)}
.hotmint-pop.alpha .hotmint-title{color:var(--cyan)}

/* ---- Alpha Radar modal — recent alpha signals + the Smart Wallets
   leaderboard that backs them, same modal-overlay/modal-box shell the buy
   popup uses (see index.html's ensureAlphaModal). Wider than the buy modal
   since it's showing two real lists, not a single mint form. ---- */
.alpha-modal .modal-box{width:min(560px,100%)}
.alpha-modal .modal-name{font-size:18px}
.alpha-section-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin:14px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--grid)}
.alpha-section-head:first-child{margin-top:0}
.alpha-list{max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--grid) transparent;border:1px solid var(--grid);border-radius:8px}
.alpha-list::-webkit-scrollbar{width:6px}
.alpha-list::-webkit-scrollbar-thumb{background:var(--grid);border-radius:12px}
.alpha-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid rgba(27,39,64,.55)}
.alpha-row:last-child{border-bottom:none}
.alpha-row:hover{background:var(--panel-2);cursor:pointer}
.alpha-row img{width:30px;height:30px;border-radius:7px;object-fit:cover;background:var(--panel-2);flex:none}
.alpha-row-main{min-width:0;flex:1}
.alpha-row-name{font-family:var(--font-ui);font-weight:700;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alpha-row-sub{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);margin-top:1px}
.alpha-hitrate{flex:none;font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--cyan);background:rgba(110,231,160,.1);border:1px solid rgba(110,231,160,.3);border-radius:6px;padding:3px 7px}
.alpha-empty{padding:18px 12px;text-align:center;font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim)}
.nav-alpha{color:var(--cyan)!important}

/* ---- whale-move popup — same card/positioning/timing as hot mint/sweep/
   alpha, azure accent since this is a distinct signal from all three: a
   confirmed real high-balance wallet acting, not just any buyer/minter. ---- */
.hotmint-pop.whale{border-color:var(--azure);box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 28px rgba(77,163,255,.28)}
.hotmint-pop.whale .hotmint-badge{background:linear-gradient(145deg,var(--azure),#8fc4ff);box-shadow:0 0 14px rgba(77,163,255,.55)}
.hotmint-pop.whale .hotmint-title{color:var(--azure)}
.ticker-item.whale b{color:var(--azure)}

/* ---- Insights modal — whale watchlist + live movement feed, same shell as
   the Alpha Radar modal (see index.html's ensureInsightsModal), reusing its
   .alpha-list/.alpha-row/.alpha-section-head/.alpha-empty rows -- azure
   accent throughout instead of cyan to stay visually distinct from Alpha. ----*/
.insights-modal .modal-box{width:min(560px,100%)}
.insights-modal .modal-name{font-size:18px}
.insights-modal .alpha-section-head{color:var(--azure)}
.whale-balance{flex:none;font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--azure);background:rgba(77,163,255,.1);border:1px solid rgba(77,163,255,.3);border-radius:6px;padding:3px 7px}
.nav-insights{color:var(--azure)!important}

/* ---- footer ---- */
/* ---- collection detail modal — real data only: no mint quantity/wallet
   controls, no fabricated scam/legitimacy verdict. Verified badge and
   creator/contract come straight from OpenSea's own collection record. ---- */
.modal-overlay{
  position:fixed;inset:0;z-index:400;display:none;
  align-items:center;justify-content:center;
  background:rgba(2,4,2,.75);backdrop-filter:blur(3px);
  padding:20px;
}
.modal-overlay.open{display:flex}
.modal-box{position:relative;width:min(420px,100%);padding:22px;max-height:85vh;overflow-y:auto}
.modal-close{
  position:absolute;top:12px;right:12px;
  width:28px;height:28px;border-radius:8px;border:1px solid var(--grid);background:var(--panel-2);
  color:var(--text-dim);font-size:16px;line-height:1;cursor:pointer;
}
.modal-close:hover{color:var(--cyan);border-color:rgba(110,231,160,.4)}
.modal-head{display:flex;gap:14px;align-items:center;margin-bottom:16px;padding-right:26px}
.modal-head img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--panel-2);border:1px solid var(--grid);flex:none}
.modal-head-info{min-width:0}
.modal-name{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-badge{margin-top:4px}
.modal-badge .verified{color:var(--acid);font-family:var(--font-mono);font-size:11px;display:inline-flex;align-items:center;gap:4px}
.modal-contract{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);margin-top:3px}
.modal-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--grid);border:1px solid var(--grid);border-radius:8px;overflow:hidden;margin-bottom:16px}
.modal-stats div{background:var(--panel);padding:11px 13px}
.modal-stats .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px}
.modal-stats .v{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-weight:700;font-size:13px;border-radius:8px;padding:11px 18px;border:1px solid var(--cyan);color:var(--cyan);background:rgba(110,231,160,.06)}
.btn:hover{background:rgba(110,231,160,.14)}

.mint-box{margin-bottom:14px}
.mint-status{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);margin-bottom:8px;line-height:1.5}
.mint-btn{width:100%;font-family:var(--font-ui);font-weight:700;font-size:14px;border-radius:9px;padding:13px;border:1px solid var(--acid);color:#05170a;background:var(--acid);cursor:pointer}
.mint-btn:disabled{opacity:.45;cursor:not-allowed}
.mint-btn.secondary{background:transparent;color:var(--text);border-color:var(--grid)}
.mint-qty{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mint-qty button{width:30px;height:30px;border-radius:7px;border:1px solid var(--grid);background:var(--panel-2);color:var(--text);font-weight:700;cursor:pointer}
.mint-qty span{font-family:var(--font-mono);font-weight:700;min-width:24px;text-align:center}

footer.ftr{border-top:1px solid var(--grid);padding:28px 0;color:var(--text-dim);font-size:12.5px;margin-top:56px;position:relative;z-index:1}
.ftr-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;font-family:var(--font-mono)}
.ftr-group{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ftr-group > *{position:relative}
.ftr-group > *:not(:first-child)::before{content:'';position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:1px;height:12px;background:var(--grid)}
@media(max-width:760px){.ftr-inner{justify-content:center}}
.ftr-inner a{color:var(--text-dim);text-decoration:none}
.ftr-inner a:hover{color:var(--cyan)}
.coffee-btn{background:none;border:none;font-family:var(--font-mono);font-size:12.5px;color:var(--text-dim);cursor:pointer;padding:0}
.coffee-btn:hover{color:var(--amber)}

/* ---- Buy me a coffee modal -- same modal-overlay/modal-box shell as the
   buy popup / Alpha Radar modal above. ---- */
.coffee-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--grid);border-radius:8px;margin-bottom:8px;cursor:pointer;transition:border-color .15s}
.coffee-row:hover{border-color:var(--border-hi,var(--cyan))}
.coffee-row:last-child{margin-bottom:0}
.coffee-chain{flex:none;width:52px;font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--amber);letter-spacing:.04em}
.coffee-addr{flex:1;min-width:0;font-family:var(--font-mono);font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coffee-copy{flex:none;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--cyan);background:rgba(110,231,160,.1);border:1px solid rgba(110,231,160,.3);border-radius:6px;padding:4px 9px}
.coffee-copy.copied{color:var(--amber);border-color:rgba(255,184,0,.4);background:rgba(255,184,0,.1)}

/* ---- fixed bottom footer (mirrors the sticky header), now sitewide
   (2026-09-02) ---- */
footer.ftr.ftr-fixed{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  padding:14px 0;margin-top:0;
  background:rgba(5,7,13,0.92);backdrop-filter:blur(10px);
}
footer.ftr.ftr-fixed::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent);
  opacity:.5;
}
body.has-fixed-footer{padding-bottom:64px}
@media(max-width:640px){ body.has-fixed-footer{padding-bottom:80px} }

/* ---- compact column filter row (time-window select + threshold) ---- */
.dash-col-filter{display:flex;gap:6px;padding:0 14px 10px;border-bottom:1px solid var(--grid)}
.thr-note{padding:8px 14px;font-family:var(--font-mono);font-size:10.5px;color:var(--amber);border-bottom:1px solid var(--grid);background:rgba(255,184,0,.06)}
.mini-select,.mini-input{
  font-family:var(--font-mono);font-size:10.5px;color:var(--text);
  background:var(--panel-2);border:1px solid var(--grid);border-radius:8px;padding:5px 6px;
}
.mini-select{flex:none}
.mini-op{flex:none;width:44px}
.mini-input{flex:1;min-width:0}
.mini-select:focus,.mini-input:focus{outline:none;border-color:var(--cyan)}

@media(max-width:640px){
  .sfx-toggle{margin-left:0}
}