/* ============================================================
   RushHub, SatRush ecosystem tracker
   Layered liquid glass, dark amber. One accent, one display face.
   ============================================================ */

:root{
  --bg:#0a0807;
  --bg-card:rgba(26,19,17,.55);
  --bg-card-hi:rgba(34,25,22,.72);

  --line:rgba(255,255,255,.07);

  --text:#f6f1e9;
  --text-dim:#c0b4a5;
  --text-faint:#8a7d70;

  --accent:#f25e30;
  --accent-2:#ff9a55;
  --accent-soft:rgba(242,94,48,.14);
  --good:#35d99b;
  --bad:#ff5c5c;

  --font-display:'Anton',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;

  /* liquid glass, the pane holds almost no fill so the page shows through */
  --glass-blur:blur(5px) saturate(2) brightness(1.22);
  --glass-tint:rgba(255,255,255,.012);
  /* rim light only, no inner darkening, or the pane stops being see-through */
  --glass-edge:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.08);
  --glass-drop:0 18px 40px -30px rgba(0,0,0,.55);

  --r-lg:22px;
  --r-md:16px;
  --r-sm:11px;

  --ease:cubic-bezier(.22,.9,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.42s;

  --gap:clamp(.85rem, 1.1vw, 1.15rem);
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
  padding-bottom:4rem;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- background ---------- */

.bg-grid{
  position:fixed;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:30px 30px;
  z-index:0;pointer-events:none;
  mask-image:radial-gradient(ellipse 85% 55% at 50% 0%, #000 35%, transparent 88%);
}
.bg-glow{
  position:fixed;border-radius:50%;
  filter:blur(100px);
  z-index:0;pointer-events:none;
  opacity:.3;
}
.bg-glow--a{width:720px;height:720px;top:-280px;left:-200px;background:var(--accent);opacity:.3;}
.bg-glow--b{width:640px;height:640px;top:120px;right:-200px;background:var(--accent-2);opacity:.2;}
/* a third, cooler pool low on the page so glass lower down has something
   to refract instead of sitting on flat black */
.bg-glow--c{width:680px;height:680px;bottom:-260px;left:38%;background:#7a4bd6;opacity:.12;}

/* one canvas instead of dozens of blurred DOM nodes */
.bg-particles{
  position:fixed;inset:0;
  width:100%;height:100%;
  display:block;
  z-index:0;pointer-events:none;
}
/* the background plane: grid, glows and particles share one stacking context
   so the glass above samples all of them together */
.bg-grid,.bg-glow,.bg-particles{will-change:transform;}

a{color:var(--accent-2);text-decoration:none;}

/* ============================================================
   Liquid glass surface
   Four stacked layers, the macOS-dock recipe from the designs folder:
     .glass         , the pane: blurred, refracted backdrop
     .glass::before , tint + pointer sheen
     .glass::after  , rim light along the top edge
     content        , sits above all of it

   The pane itself carries almost no fill (0.012 alpha), so what you see
   really is the page behind it. An opaque fill was what made these read
   as flat panels rather than glass.
   ============================================================ */

.glass{
  position:relative;
  isolation:isolate;
  background:var(--glass-tint);
  /* The displacement filter goes INSIDE backdrop-filter, that is what bends
     the page behind the pane. Putting url() on a ::before layer (as I had it)
     filtered an empty box and therefore did nothing at all. */
  backdrop-filter:url(#glassRefract) var(--glass-blur);
  -webkit-backdrop-filter:url(#glassRefract) var(--glass-blur);
  box-shadow:var(--glass-edge), var(--glass-drop);
  overflow:hidden;
}
/* tint + sheen that tracks the pointer (JS writes --mx/--my) */
.glass::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(300px circle at var(--mx,50%) var(--my,0%), rgba(255,196,150,.1), transparent 62%),
    linear-gradient(150deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 32%, rgba(255,255,255,0) 58%);
  box-shadow:
    inset 1px 1px 1px rgba(255,255,255,.22),
    inset -1px -1px 1px rgba(255,255,255,.10);
  transition:opacity .4s var(--ease);
}
.glass > *{position:relative;z-index:2;}

/* Safari and Firefox ignore url() filters on a backdrop; they still get the
   blur, tint and rim, just without the refraction */
/* Firefox and Safari ignore url() inside backdrop-filter; they fall back to
   the plain blur, which still reads as glass, just without the dispersion */
@supports not ((backdrop-filter: url(#glassRefract)) or (-webkit-backdrop-filter: url(#glassRefract))){
  .glass{
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
  }
}

.glass-defs{position:absolute;width:0;height:0;pointer-events:none;}

/* ============================================================
   Header
   ============================================================ */

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  padding:.85rem clamp(1rem, 2.2vw, 1.6rem);
  /* own compositor layer: a sticky bar that re-rasterises jitters */
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
/* solid plate on scroll, without it the page showed through the gaps
   between the islands, which reads as the header shaking */
.topbar::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,8,7,.97) 60%, rgba(10,8,7,.88));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  transition:opacity .28s var(--ease);
  pointer-events:none;
  z-index:-1;
}
.topbar.scrolled::before{opacity:1;}

.brand{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem .95rem;border-radius:999px;
  justify-self:start;
}
.brand-logo{
  height:26px;width:26px;display:block;
  filter:drop-shadow(0 2px 9px rgba(242,94,48,.5));
}
.brand-name{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.02em;}
.brand-name b{color:var(--accent);font-weight:400;}

.pill-nav{
  position:relative;
  display:flex;justify-content:center;gap:.2rem;
  width:fit-content;max-width:100%;
  padding:.32rem;border-radius:999px;
  justify-self:center;
  overflow:hidden;              /* the indicator can never spill past the rim */
}
.pill-indicator{
  position:absolute;
  top:.32rem;bottom:.32rem;left:0;
  border-radius:999px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 4px 16px -4px rgba(242,94,48,.65), inset 0 1px 0 rgba(255,255,255,.3);
  /* transform, not left: it animates on the compositor and cannot overshoot */
  transition:transform var(--dur) var(--ease), width var(--dur) var(--ease);
  z-index:0;
}
.pill-indicator.no-anim{transition:none;}
.tab{
  position:relative;z-index:1;
  font-family:var(--font-body);
  font-weight:600;font-size:.82rem;
  padding:.52rem 1.05rem;
  background:transparent;border:none;border-radius:999px;
  color:var(--text-dim);cursor:pointer;white-space:nowrap;
  transition:color .26s var(--ease);
}
.tab.active{color:#190d07;}
.tab:not(.active):hover{color:var(--text);}
.tab:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}

.topbar-right{
  display:flex;align-items:center;gap:.7rem;
  padding:.4rem .45rem .4rem .9rem;
  border-radius:999px;justify-self:end;
}
.brand-price{display:flex;align-items:center;gap:.45rem;}
.brand-price__icon{width:19px;height:19px;border-radius:50%;display:block;object-fit:cover;}
.brand-price__val{font-family:var(--font-display);font-size:1rem;font-variant-numeric:tabular-nums;}
.brand-price__chg{font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;}
.brand-price__chg.up{color:var(--good);}
.brand-price__chg.down{color:var(--bad);}


.join-btn{
  font-weight:600;font-size:.82rem;
  padding:.5rem 1rem;border-radius:999px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#190d07;white-space:nowrap;
  box-shadow:0 6px 18px -8px rgba(242,94,48,.8);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), filter .26s var(--ease);
}
.join-btn:hover{transform:translateY(-1px);filter:brightness(1.07);}
.join-btn:active{transform:translateY(0);}

/* ============================================================
   Layout
   ============================================================ */

main{
  padding:clamp(1.4rem, 2.4vw, 2.2rem) clamp(1rem, 2.2vw, 1.8rem) 0;
  max-width:1360px;margin:0 auto;
  position:relative;z-index:1;
}

.panel{display:none;}
.panel.active{
  display:block;
  animation:panelIn .44s var(--ease-out);
  /* own layer while animating: 30+ backdrop-filter children otherwise
     re-composite together and drop a frame on tab switch */
  will-change:transform, opacity;
}
.panel.active.settled{will-change:auto;}
@keyframes panelIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

.panel-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:1.3rem;flex-wrap:wrap;
}
.panel-head h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.3rem, 2.2vw, 1.75rem);
  margin:0;letter-spacing:.015em;
}
.hint-inline{color:var(--text-dim);font-size:.8rem;max-width:58ch;line-height:1.55;}
.panel-controls{display:flex;align-items:center;gap:.7rem;}
.refresh-note{font-size:.72rem;color:var(--text-faint);font-variant-numeric:tabular-nums;}

.section-label{
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:400;
  font-size:1rem;letter-spacing:.03em;color:var(--text-dim);
  margin:2.2rem 0 1rem;
}
.section-note{
  font-family:var(--font-body);font-size:.72rem;font-weight:500;
  color:var(--text-faint);letter-spacing:0;
}

.sort-select{
  font-family:var(--font-body);font-size:.78rem;
  padding:.45rem .7rem;
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--text);cursor:pointer;
  transition:border-color .26s var(--ease);
}
.sort-select:hover,.sort-select:focus{outline:none;border-color:var(--accent);}

.loading{color:var(--text-faint);padding:2.6rem 0;text-align:center;font-size:.85rem;}
/* a quiet pulse so a loading block does not read as broken */
.loading::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:.45rem;
  border-radius:50%;background:currentColor;
  animation:pulse 1.4s var(--ease) infinite;vertical-align:middle;
}
@keyframes pulse{0%,100%{opacity:.25;}50%{opacity:1;}}

/* ============================================================
   Stat cards
   ============================================================ */

/* Fixed column counts, not auto-fit: six cards must land 3+3 or 2+2+2, never
   5+1 with a hole at the end. */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:var(--gap);
}
.stat-grid--3{grid-template-columns:repeat(3, 1fr);}
@media (max-width:1240px){
  .stat-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:760px){
  .stat-grid,.stat-grid--3{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:420px){
  .stat-grid,.stat-grid--3{grid-template-columns:1fr;}
}

.stat-card{
  border-radius:var(--r-lg);
  padding:1.05rem 1.15rem 1.1rem;
  display:flex;flex-direction:column;gap:.3rem;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.stat-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--glass-edge), 0 26px 50px -24px rgba(0,0,0,.95);
}
.stat-card__top{display:flex;align-items:center;gap:.55rem;min-height:24px;}
.stat-card__icon{width:22px;height:22px;flex:none;display:block;}
.stat-card__label{font-size:.72rem;color:var(--text-dim);}
.stat-card__value{
  font-family:var(--font-display);
  font-size:clamp(1.45rem, 2.4vw, 1.75rem);
  line-height:1.08;font-variant-numeric:tabular-nums;
}
.stat-card__sub{font-size:.71rem;color:var(--text-faint);line-height:1.45;}
.stat-card--accent .stat-card__value{color:var(--accent-2);}

.progress{
  height:6px;border-radius:999px;
  background:rgba(255,255,255,.07);
  overflow:hidden;margin-top:.35rem;
}
.progress__fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .9s var(--ease-out);
}

.fx-roll{animation:roll .5s var(--ease-out);}
@keyframes roll{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:none;}
}
.fx-flash{animation:flash .7s var(--ease);}
@keyframes flash{0%{color:var(--good);}100%{color:inherit;}}

/* ============================================================
   Columns
   ============================================================ */

.cols{display:grid;gap:clamp(1.1rem, 2vw, 1.7rem);align-items:start;}
.cols--1-1{grid-template-columns:1fr 1fr;}
.cols--3-2{grid-template-columns:1.35fr 1fr;}
@media (max-width:940px){
  .cols--1-1,.cols--3-2{grid-template-columns:1fr;}
}

/* ============================================================
   Rows
   ============================================================ */

.panel-list{
  border-radius:var(--r-lg);
  padding:.4rem;display:flex;flex-direction:column;
}
.row{
  display:grid;align-items:center;gap:.7rem;
  padding:.62rem .85rem;border-radius:var(--r-md);
  font-size:.81rem;color:var(--text-dim);
  transition:background .26s var(--ease), color .26s var(--ease), transform .26s var(--ease);
}
a.row:hover{background:rgba(255,255,255,.045);color:var(--text);transform:translateX(2px);}
.row + .row{box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}

.row__id{font-family:var(--font-display);color:var(--text-faint);font-size:.9rem;}
.row__main{font-family:var(--font-display);color:var(--text);font-size:.95rem;font-variant-numeric:tabular-nums;}
.row__sub{font-size:.72rem;color:var(--text-faint);}
.row__time{font-size:.71rem;color:var(--text-faint);white-space:nowrap;text-align:right;}
.row__mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--text);}

.burn-row{grid-template-columns:22px minmax(80px,1fr) auto 76px;}
.burn-row .row__main{color:var(--accent-2);}
.burn-flame{width:18px;height:18px;display:block;filter:drop-shadow(0 0 7px rgba(242,94,48,.5));}
.burn-row .row__sub{text-align:right;}
/* the newest burn glows once when it arrives */
.burn-row--new{animation:burnIn 1s var(--ease-out);}
@keyframes burnIn{
  0%{background:rgba(242,94,48,.22);}
  100%{background:transparent;}
}

.vault-row{grid-template-columns:44px 96px 1fr auto;}
.vault-row--best{box-shadow:inset 0 0 0 1px rgba(242,94,48,.32);}

.holder-row,.holder-head{
  display:grid;align-items:center;gap:.7rem;
  grid-template-columns:38px 104px 1fr 104px 66px 88px;
  padding:.55rem .85rem;
}
.holder-head{
  font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-faint);border-bottom:1px solid var(--line);margin-bottom:.2rem;
}
.holder-row{
  border-radius:var(--r-md);font-size:.8rem;color:var(--text-dim);
  transition:background .26s var(--ease), color .26s var(--ease);
}
.holder-row:hover{background:rgba(255,255,255,.045);color:var(--text);}
.holder-head span:nth-child(n+4),
.holder-row span:nth-child(n+4){text-align:right;}
.holder-rank{font-family:var(--font-display);color:var(--text-faint);}
.holder-rank--top{color:var(--accent-2);}
.holder-amount{font-family:var(--font-display);color:var(--text);font-variant-numeric:tabular-nums;}
.list-foot{padding:.75rem .85rem .35rem;font-size:.7rem;color:var(--text-faint);}

.tag{
  display:inline-block;font-size:.62rem;
  padding:.16rem .5rem;border-radius:999px;
  border:1px solid var(--line);white-space:nowrap;
}
.tag--known{color:var(--good);border-color:rgba(53,217,155,.32);}
.tag--prog{color:var(--accent-2);border-color:rgba(255,154,85,.3);}
.tag--wallet{color:var(--text-faint);}

/* ============================================================
   Supply bar
   ============================================================ */

.supply-bar{border-radius:var(--r-lg);padding:1.1rem 1.2rem;}
.bar{display:flex;height:13px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.05);}
.bar span{height:100%;transition:width .9s var(--ease-out);}
.seg--pool{background:linear-gradient(90deg,#35d99b,#1fbf77);}
.seg--vault{background:linear-gradient(90deg,var(--accent-2),var(--accent));}
.seg--whale{background:linear-gradient(90deg,#9a6bff,#6f42d6);}
.seg--rest{background:rgba(255,255,255,.13);}
.bar-legend{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.85rem;font-size:.72rem;color:var(--text-dim);}
.legend-item{display:inline-flex;align-items:center;gap:.4rem;}
.legend-swatch{width:9px;height:9px;border-radius:3px;background:var(--line);display:inline-block;flex:none;}

/* ============================================================
   Token cards
   ============================================================ */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(255px, 1fr));
  gap:var(--gap);
}
.token-card{
  display:flex;gap:.8rem;align-items:center;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:.95rem;cursor:pointer;color:inherit;
  transition:border-color .3s var(--ease), transform .35s var(--ease-out), background .3s var(--ease);
}
.token-card:hover{
  border-color:rgba(242,94,48,.45);
  transform:translateY(-3px);
  background:var(--bg-card-hi);
}
.token-card:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}

.token-logo{
  width:44px;height:44px;border-radius:13px;flex:none;object-fit:cover;
  background:var(--bg);border:1px solid var(--line);
}
.token-logo.placeholder{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--good));
  color:#160d08;font-family:var(--font-display);font-size:.8rem;
}
.token-main{min-width:0;flex:1;}
.token-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.token-sym{font-size:.74rem;color:var(--text-faint);}
.pair-tag{color:var(--good);}
.token-metrics{
  margin-top:.4rem;display:flex;gap:.6rem;
  font-size:.71rem;color:var(--text-dim);flex-wrap:wrap;align-items:center;
}
.metric-up{color:var(--good);}

.badge{
  font-size:.62rem;padding:.14rem .48rem;border-radius:999px;
  border:1px solid var(--line);color:var(--text-faint);white-space:nowrap;
}
.badge.graduated{color:var(--good);border-color:rgba(53,217,155,.35);}
.badge.active{color:var(--accent-2);border-color:rgba(255,154,85,.35);}

.show-more-btn{
  display:block;margin:1.3rem auto 0;
  padding:.68rem 1.6rem;
  font-family:var(--font-body);font-weight:600;font-size:.83rem;
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:999px;color:var(--text-dim);cursor:pointer;
  transition:border-color .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}
.show-more-btn:hover{border-color:var(--accent);color:var(--text);transform:translateY(-1px);}
.show-more-btn[hidden]{display:none;}

/* ============================================================
   X feed
   ============================================================ */

.x-feed{border-radius:var(--r-lg);padding:1.05rem;min-height:118px;}
.x-post{display:flex;gap:.8rem;color:inherit;}
.x-post__avatar{width:38px;height:38px;border-radius:50%;flex:none;object-fit:cover;background:var(--bg-card);}
.x-post__name{font-weight:600;font-size:.84rem;}
.x-post__handle{color:var(--text-faint);font-size:.74rem;margin-left:.35rem;}
.x-post__text{font-size:.84rem;line-height:1.6;margin:.45rem 0;white-space:pre-wrap;word-break:break-word;}
.x-post__addr{
  display:inline-flex;align-items:center;
  background:rgba(53,217,155,.1);color:var(--good);
  border-radius:6px;padding:.05rem .4rem;font-size:.79rem;
}
.x-post__link{color:var(--accent-2);}
.x-post__stats{display:flex;gap:.85rem;font-size:.71rem;color:var(--text-faint);}

/* ============================================================
   Modal
   ============================================================ */

.modal-overlay{
  position:fixed;inset:0;
  background:rgba(6,4,3,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;z-index:100;
  animation:fadeIn .28s var(--ease);
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-box{
  position:relative;width:100%;max-width:720px;
  max-height:90vh;overflow-y:auto;
  border-radius:var(--r-lg);padding:1.6rem;
  animation:modalIn .4s var(--ease-out);
}
@keyframes modalIn{
  from{opacity:0;transform:translateY(16px) scale(.98);}
  to{opacity:1;transform:none;}
}
.modal-close{
  position:absolute;top:1.05rem;right:1.05rem;
  background:var(--bg-card);border:1px solid var(--line);
  color:var(--text-dim);width:30px;height:30px;
  border-radius:var(--r-sm);cursor:pointer;font-size:.85rem;z-index:2;
  transition:color .26s var(--ease), border-color .26s var(--ease);
}
.modal-close:hover{color:var(--text);border-color:var(--accent);}
.modal-head{display:flex;gap:1rem;align-items:center;margin-bottom:1.2rem;padding-right:2.5rem;}
.modal-head .token-logo{width:54px;height:54px;border-radius:14px;}
.modal-head .h-name{font-family:var(--font-display);font-size:1.18rem;}
.modal-head .h-sym{color:var(--text-faint);font-size:.83rem;}
.modal-head .h-links{margin-top:.35rem;display:flex;gap:.7rem;font-size:.77rem;}
.modal-metrics{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));
  gap:.65rem;margin-bottom:1.2rem;
}
.m-item{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-sm);padding:.62rem .72rem;}
.m-label{font-size:.64rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.07em;}
.m-value{font-family:var(--font-display);font-size:1.02rem;margin-top:.15rem;font-variant-numeric:tabular-nums;}
.modal-chart{
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;
}
.modal-chart iframe{width:100%;height:100%;border:0;display:block;}
.chart-placeholder{
  height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:1.5rem;color:var(--text-faint);font-size:.84rem;line-height:1.6;
}
.modal-foot{margin-top:1rem;text-align:right;font-size:.81rem;}
body.modal-open{overflow:hidden;}

/* ============================================================
   Footer
   ============================================================ */

.site-footer{
  max-width:1360px;margin:3rem auto 0;
  padding:1.6rem clamp(1rem, 2.2vw, 1.8rem) 0;
  display:flex;flex-direction:column;gap:.65rem;
  font-size:.77rem;color:var(--text-faint);
  border-top:1px solid var(--line);
  position:relative;z-index:1;
}
.site-footer__row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.site-footer code{
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:8px;padding:.25rem .5rem;font-size:.72rem;color:var(--text-dim);
}
.copy-btn{
  font-size:.7rem;padding:.26rem .62rem;border-radius:8px;
  background:var(--bg-card);border:1px solid var(--line);
  color:var(--text-dim);cursor:pointer;
  transition:color .26s var(--ease), border-color .26s var(--ease);
}
.copy-btn:hover{color:var(--text);border-color:var(--accent);}
.x-link{display:inline-flex;align-items:center;gap:.38rem;color:var(--text-dim);}
.x-link:hover{color:var(--accent-2);}
.footer-sep{color:var(--text-faint);}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width:940px){
  .topbar{
    grid-template-columns:1fr;justify-items:stretch;
    gap:.5rem;padding:.6rem .7rem;
  }
  .brand{justify-self:start;}
  .pill-nav{
    width:100%;justify-content:flex-start;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    scroll-snap-type:x proximity;
  }
  .pill-nav::-webkit-scrollbar{display:none;}
  .tab{scroll-snap-align:center;font-size:.79rem;padding:.5rem .85rem;}
  .topbar-right{width:100%;justify-content:space-between;}
  main{padding-top:1.2rem;}
}

@media (max-width:820px){
  .holder-head,.holder-row{grid-template-columns:30px 92px 1fr 80px;}
  .holder-head span:nth-child(5),.holder-head span:nth-child(6),
  .holder-row span:nth-child(5),.holder-row span:nth-child(6){display:none;}
}

@media (max-width:620px){
  body{font-size:14px;}
  .burn-row{grid-template-columns:20px 1fr 76px;}
  .burn-row .row__sub{display:none;}
  .vault-row{grid-template-columns:36px 84px 1fr;}
  .vault-row .row__time{display:none;}
  .stat-card{padding:.95rem 1rem;}
  .site-footer code{font-size:.64rem;word-break:break-all;}
}

/* ============================================================
   Motion preferences
   The OS switch only picks the default; the header toggle wins.
   Only continuous decoration stops, interface transitions stay,
   otherwise the tab pill looks broken.
   ============================================================ */

html.motion-soft .panel.active{animation-duration:.22s;}

/* supply facts: label, number, footnote */
.fact-row{grid-template-columns:1fr auto auto;gap:.9rem;}
.fact-row .row__main{color:var(--accent-2);}
@media (max-width:620px){
  .fact-row{grid-template-columns:1fr auto;}
  .fact-row .row__time{display:none;}
}

/* ============================================================
   Rhythm & polish
   Spacing follows one scale so sections breathe consistently
   instead of each block inventing its own margin.
   ============================================================ */

:root{
  --space-section:clamp(2.4rem, 4.2vw, 3.6rem);
  --space-block:clamp(1.1rem, 2vw, 1.6rem);
}

main{padding-bottom:var(--space-section);}

/* first label after a grid needs the full section gap, later ones less */
.section-label{margin:var(--space-section) 0 var(--space-block);}
.panel > .stat-grid + .section-label,
.panel > .stat-grid + .cols,
.panel > .grid + .section-label{margin-top:var(--space-section);}
.stat-grid{margin-bottom:0;}
.cols > div > .section-label:first-child{margin-top:0;}
.panel-head{margin-bottom:var(--space-block);}
.cols{margin-bottom:0;}
.cols .section-label:first-child{margin-top:0;}
.supply-bar{margin-bottom:var(--space-block);}

/* card interiors get a touch more room */
.stat-card{padding:1.15rem 1.25rem 1.2rem;gap:.35rem;}
.stat-card__sub{margin-top:.1rem;}
.panel-list{padding:.45rem;}
.row{padding:.68rem .9rem;}

/* ---------- staggered entrance ---------- */
/* Cards rise in sequence when a panel opens. The delay is set inline by JS
   so it works for any number of cards without hardcoded nth-child rules. */
.panel.active .stat-card,
.panel.active .token-card{
  animation:riseIn .55s var(--ease-out) backwards;
  animation-delay:calc(var(--i, 0) * 45ms);
}
@keyframes riseIn{
  from{opacity:0;transform:translateY(14px) scale(.985);}
  to{opacity:1;transform:none;}
}

/* ---------- depth on hover ---------- */
.stat-card{
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.stat-card:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 30px 60px -28px rgba(0,0,0,.95),
    0 0 40px -18px rgba(242,94,48,.45);
}
.stat-card:hover::after{opacity:1;}

/* the value quietly lifts with the card */
.stat-card__value{transition:transform .45s var(--ease-out);}
.stat-card:hover .stat-card__value{transform:translateY(-1px);}

/* ---------- headline treatment ---------- */
.panel-head h2{
  color:#fffaf4;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.section-label{text-shadow:0 1px 12px rgba(0,0,0,.5);}

/* ---------- token cards sit on glass too ---------- */
.token-card{
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-color:rgba(255,255,255,.08);
}

html.motion-soft .panel.active .stat-card,
html.motion-soft .panel.active .token-card{animation-duration:.3s;animation-delay:0ms;}

/* ============================================================
   Overview: make the two columns end level
   The left column is one long list; the right stacks the X post and the
   BTC draws. Stretching both to the same height and letting the tall list
   absorb the slack keeps the bottom edges aligned instead of leaving one
   column hanging ~60px below the other.
   ============================================================ */

.cols--3-2,.cols--1-1{align-items:stretch;}
.cols--3-2 > div,
.cols--1-1 > div{
  display:flex;
  flex-direction:column;
  min-width:0;               /* so long ticket numbers cannot widen the column */
}
/* the list in each column grows to fill whatever height is left */
.cols--3-2 .panel-list,
.cols--1-1 .panel-list{flex:1 1 auto;}
/* the X post keeps its natural height; only the lists stretch */
.cols--3-2 .x-feed,
.cols--1-1 .conc{flex:0 0 auto;}

/* rows spread through the stretched list instead of bunching at the top */
.cols--3-2 .panel-list,
.cols--1-1 .panel-list{justify-content:space-between;}

@media (max-width:940px){
  /* stacked on narrow screens: natural heights read better than stretched */
  .cols--3-2 > div,
  .cols--1-1 > div{display:block;}
  .cols--3-2 .panel-list,
  .cols--1-1 .panel-list{justify-content:flex-start;}
}

/* ============================================================
   Holder concentration
   ============================================================ */

.conc{border-radius:var(--r-lg);padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.62rem;}
.conc-row{
  display:grid;
  grid-template-columns:92px minmax(60px,1fr) 52px 120px;
  align-items:center;gap:.7rem;
  font-size:.78rem;color:var(--text-dim);
  white-space:nowrap;
}
.conc-label{color:var(--text);font-weight:600;}
.conc-track{
  height:8px;border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;display:block;
}
.conc-track i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .9s var(--ease-out);
}
.conc-pct{
  font-family:var(--font-display);color:var(--accent-2);
  text-align:right;font-variant-numeric:tabular-nums;
}
.conc-n{font-size:.7rem;color:var(--text-faint);text-align:right;white-space:nowrap;}
@media (max-width:620px){
  .conc-row{grid-template-columns:48px 1fr 46px;}
  .conc-n{display:none;}
}

/* ============================================================
   Epoch chart
   ============================================================ */

.chart{border-radius:var(--r-lg);padding:1.1rem 1.2rem 1rem;}
.chart svg{width:100%;height:220px;display:block;overflow:visible;}
.chart .axis{stroke:rgba(255,255,255,.1);stroke-width:1;}
.chart .bar rect{
  fill:url(#barGrad);
  transition:opacity .28s var(--ease);
  opacity:.82;
}
.chart .bar:hover rect{opacity:1;}
.chart .bar--best rect{filter:drop-shadow(0 0 10px rgba(242,94,48,.6));opacity:1;}
.chart .bar-label{
  fill:var(--text-faint);font-size:11px;
  text-anchor:middle;font-family:var(--font-body);
}
.chart-foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  margin-top:.7rem;font-size:.72rem;color:var(--text-faint);
}

/* biggest-wallet rows are links now */
a.conc-row{
  text-decoration:none;
  padding:.28rem .3rem;
  border-radius:var(--r-sm);
  transition:background .26s var(--ease);
}
a.conc-row:hover{background:rgba(255,255,255,.045);}
a.conc-row .conc-label{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.75rem;font-weight:500;
}
.conc-row .conc-n{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:620px){
  .conc-row{grid-template-columns:78px 1fr 46px;}
}

/* ============================================================
   Numeric alignment
   Anton has no tabular figures, so digits have different widths and
   every value in a column danced by a pixel or two. Numbers that sit in
   a column are right-aligned and use the body face's tabular figures;
   only the big hero values keep the display face.
   ============================================================ */

.row__main,
.holder-amount,
.conc-pct,
.row__sub,
.row__time,
.conc-n{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}

/* list values: one consistent face, right-aligned against the next column */
.burn-row .row__main,
.fact-row .row__main,
.vault-row .row__main,
.holder-amount,
.conc-pct{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:.01em;
}

/* money and timestamps line up on their right edge */
.burn-row .row__sub,
.burn-row .row__time,
.fact-row .row__time,
.vault-row .row__time,
.row__time{text-align:right;}

/* the burn feed: fixed columns so RUSH, USD and age never shift */
.burn-row{grid-template-columns:22px minmax(92px,1fr) 84px 68px;}
.burn-row .row__main{text-align:left;}

/* supply facts: label left, number right, footnote right */
.fact-row{grid-template-columns:1fr 104px 132px;}
.fact-row .row__main{text-align:right;}
.fact-row .row__time{text-align:right;}

/* vault rows: id, value, meta, age */
.vault-row{grid-template-columns:44px 88px 1fr auto;}
.vault-row .row__main{text-align:left;}

@media (max-width:620px){
  .burn-row{grid-template-columns:20px 1fr 72px;}
  .fact-row{grid-template-columns:1fr auto;}
}

/* ============================================================
   Live status
   The page polls many sources; when one stops, values would just sit
   there looking current. This says plainly whether data is flowing.
   ============================================================ */

.live-dot{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.68rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--good);
  padding-right:.2rem;white-space:nowrap;
}
.live-dot i{
  width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:none;
  box-shadow:0 0 0 0 currentColor;
  animation:livePulse 2.4s var(--ease) infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(53,217,155,.5);}
  70%{box-shadow:0 0 0 6px rgba(53,217,155,0);}
  100%{box-shadow:0 0 0 0 rgba(53,217,155,0);}
}
.live-dot.is-stale{color:#e0a33c;}
.live-dot.is-stale i{animation:none;}
.live-dot.is-down{color:var(--bad);}
.live-dot.is-down i{animation:none;}

@media (max-width:940px){
  .live-dot{font-size:.62rem;gap:.3rem;padding-right:0;}
}

/* ============================================================
   Wallet lookup
   ============================================================ */

.wallet-form{
  display:flex;gap:.6rem;align-items:center;
  border-radius:var(--r-lg);
  padding:.55rem .6rem .55rem 1.1rem;
  margin-bottom:.9rem;
}
.wallet-form input{
  flex:1;min-width:0;
  background:transparent;border:none;outline:none;
  color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86rem;
}
.wallet-form input::placeholder{
  color:var(--text-faint);
  font-family:var(--font-body);
}
.wallet-form button{border:none;cursor:pointer;}

.wallet-msg{
  min-height:1.2rem;
  font-size:.8rem;color:var(--text-faint);
  margin-bottom:1rem;
}
.wallet-msg.is-bad{color:var(--bad);}

@media (max-width:620px){
  .wallet-form{padding-left:.9rem;}
  .wallet-form input{font-size:.78rem;}
}

/* ============================================================
   Mobile
   The desktop rules only stopped overflow; these make the phone
   layout deliberate: one column, bigger touch targets, no cramped
   four-column rows squeezed into 360px.
   ============================================================ */

@media (max-width:760px){
  body{padding-bottom:2.5rem;}

  /* header: brand and price on one line, tabs scroll under it */
  .topbar{gap:.45rem;padding:.55rem .6rem;}
  .brand{padding:.45rem .8rem;gap:.5rem;}
  .brand-logo{width:22px;height:22px;}
  .brand-name{font-size:.95rem;}
  .topbar-right{padding:.38rem .4rem .38rem .75rem;gap:.5rem;}
  .brand-price__val{font-size:.92rem;}
  .join-btn{padding:.45rem .8rem;font-size:.76rem;}

  /* panels */
  .panel-head{gap:.5rem;margin-bottom:1rem;}
  .panel-head h2{font-size:1.4rem;}
  .hint-inline{font-size:.78rem;line-height:1.5;}
  .section-label{margin:1.9rem 0 .8rem;font-size:.95rem;}

  /* every list becomes label + value, extras drop away */
  .row{padding:.72rem .85rem;gap:.55rem;}
  .burn-row{grid-template-columns:20px 1fr auto;}
  .burn-row .row__sub{display:none;}
  .fact-row{grid-template-columns:1fr auto;}
  .fact-row .row__time{display:none;}
  .vault-row{grid-template-columns:38px 1fr auto;}
  .vault-row .row__sub{display:none;}
  .conc-row{grid-template-columns:82px 1fr 48px;}
  .conc-n{display:none;}

  /* holders: rank, wallet, amount */
  .holder-head,.holder-row{grid-template-columns:26px 1fr auto;gap:.5rem;padding:.6rem .8rem;}
  .holder-head span:nth-child(3),.holder-head span:nth-child(5),.holder-head span:nth-child(6),
  .holder-row span:nth-child(3),.holder-row span:nth-child(5),.holder-row span:nth-child(6){display:none;}

  /* charts stay readable */
  .chart{padding:.9rem .95rem .8rem;}
  .chart svg{height:170px;}
  .chart .bar-label{font-size:9px;}

  /* token cards full width */
  .grid{grid-template-columns:1fr;}
  .tools-grid{grid-template-columns:1fr;}

  /* supply bar legend wraps tighter */
  .bar-legend{gap:.55rem .9rem;font-size:.7rem;}

  /* modal fills the screen properly */
  .modal-overlay{padding:0;align-items:flex-end;}
  .modal-box{
    max-width:100%;max-height:92vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:1.2rem 1.1rem 1.6rem;
  }
  .modal-head .token-logo{width:46px;height:46px;}
  .modal-metrics{grid-template-columns:repeat(2,1fr);}

  /* footer */
  .site-footer{margin-top:2.2rem;padding-top:1.2rem;gap:.55rem;}
}

@media (max-width:460px){
  .panel-head h2{font-size:1.25rem;}
  .stat-card{padding:.9rem .95rem;}
  .stat-card__value{font-size:1.5rem;}
  .tool-card{padding:1.1rem 1.1rem 1rem;}
  .wallet-form{flex-direction:column;align-items:stretch;gap:.5rem;padding:.75rem;}
  .wallet-form input{padding:.45rem .3rem;text-align:center;}
  .wallet-form button{width:100%;padding:.6rem;}
}

/* a touch device has no hover: the sheen would stick on last touch */
@media (hover:none){
  .glass::after{--mx:50%;--my:0%;}
  .stat-card:hover,.tool-card:hover,.token-card:hover{transform:none;}
}

/* ============================================================
   Sticky footer
   Short panels (Community, empty Wallet) left the footer floating in
   the middle of the viewport. Push it to the bottom instead.
   ============================================================ */

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}
main{flex:1 0 auto;width:100%;}
.site-footer{flex-shrink:0;width:100%;}

/* the placeholder was too dim to read on the bright glass */
.wallet-form input::placeholder{color:#9b8e80;opacity:1;}

/* ============================================================
   Community tools
   Each card leads with a live screenshot of the tool, tinted with
   that project's own accent so the three read as distinct products
   rather than three copies of our card.
   ============================================================ */

.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(310px, 1fr));
  gap:clamp(1rem, 1.6vw, 1.5rem);
}

.tool-card{
  --tool-accent:var(--accent);
  border-radius:var(--r-lg);
  display:flex;flex-direction:column;
  overflow:hidden;
  animation:riseIn .55s var(--ease-out) backwards;
  animation-delay:calc(var(--i, 0) * 80ms);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.tool-card:hover{
  transform:translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 34px 64px -30px rgba(0,0,0,.95),
    0 0 46px -20px color-mix(in srgb, var(--tool-accent) 60%, transparent);
}

/* ---- screenshot ---- */
.tool-shot{
  position:relative;display:block;
  aspect-ratio:760 / 418;
  margin:.65rem .65rem 0;
  border-radius:calc(var(--r-lg) - 8px);
  overflow:hidden;
  isolation:isolate;          /* own stacking context = reliable clipping */
  background:#120d0b;
  border:1px solid rgba(255,255,255,.08);
  /* clip on the compositor too, so a scaling child cannot escape the radius */
  -webkit-mask-image:-webkit-radial-gradient(#fff, #000);
  transform:translateZ(0);
}
.tool-shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;
  transform:scale(1);
  transition:transform .6s var(--ease-out), filter .5s var(--ease);
  filter:saturate(.95) contrast(1.02);
  will-change:transform;
}
.tool-card:hover .tool-shot img{
  transform:scale(1.04);
  filter:saturate(1.06) contrast(1.04);
}
/* tint pulls each shot toward its project colour and fades into the card */
.tool-shot__veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, transparent 38%, rgba(12,9,8,.72) 82%, rgba(12,9,8,.96) 100%),
    linear-gradient(140deg, color-mix(in srgb, var(--tool-accent) 22%, transparent), transparent 62%);
}
.tool-kind{
  position:absolute;top:.6rem;left:.65rem;
  font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  padding:.3rem .6rem;border-radius:999px;
  color:#170d07;
  background:var(--tool-accent);
  box-shadow:0 4px 14px -5px color-mix(in srgb, var(--tool-accent) 85%, transparent);
}

/* ---- body ---- */
.tool-body{
  padding:.95rem 1.1rem .2rem;
  display:flex;flex-direction:column;gap:.4rem;flex:1;
}
.tool-name{
  font-family:var(--font-display);font-weight:400;
  font-size:1.28rem;margin:0;letter-spacing:.01em;
}
.tool-tagline{
  margin:0;font-size:.82rem;font-weight:600;
  color:var(--tool-accent);
}
.tool-blurb{
  margin:.1rem 0 0;font-size:.81rem;line-height:1.55;
  color:var(--text-dim);
}
.tool-features{
  list-style:none;margin:.65rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem;
}
.tool-features li{
  font-size:.68rem;font-weight:600;
  padding:.28rem .6rem;border-radius:999px;
  color:var(--text-dim);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}

/* ---- footer ---- */
.tool-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  margin:.95rem 1.1rem 1rem;
  padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.07);
}
.tool-open{
  font-size:.84rem;font-weight:700;
  color:var(--tool-accent);
  display:inline-flex;align-items:center;gap:.3rem;
  transition:gap .26s var(--ease), filter .26s var(--ease);
}
.tool-open:hover{gap:.5rem;filter:brightness(1.15);}
.tool-author{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.75rem;color:var(--text-faint);
  transition:color .26s var(--ease);
}
.tool-author:hover{color:var(--text);}

@media (max-width:760px){
  .tools-grid{grid-template-columns:1fr;}
  .tool-body{padding:.9rem 1rem .2rem;}
  .tool-foot{margin:.85rem 1rem .95rem;}
}