:root{color-scheme:dark;--void:#05060a;--panel:#0b0d14;--panel-2:#11141d;--line:rgba(146,162,210,.14);--line-strong:rgba(146,162,210,.28);--ink:#eef2ff;--ink-soft:#b3bdd6;--ink-faint:#7b86a3;--gold:#f6c860;--green:#34e07a;--red:#ff6b6b;--radius:14px;--radius-sm:10px;--font:"Inter var","Inter",-apple-system,BlinkMacSystemFont,sans-serif;--mono:ui-monospace,"SF Mono","JetBrains Mono",monospace;--chain-color:#f6c860}
[data-theme="day"]{color-scheme:light;--void:#f4f5f8;--panel:#ffffff;--panel-2:#f7f8fb;--line:rgba(20,24,40,.1);--line-strong:rgba(20,24,40,.18);--ink:#12131a;--ink-soft:#454a5c;--ink-faint:#767c92}
*,*::before,*::after{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--void);color:var(--ink);font-family:var(--font);line-height:1.5;transition:background .25s ease,color .25s ease}
img{display:block;max-width:100%}button,input{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}

.dbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.4rem;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--void) 88%,transparent);backdrop-filter:blur(14px)}
.dbar-left{display:flex;align-items:center;gap:.7rem}
.dbrand{display:flex;align-items:center;gap:.5rem;font-weight:800;letter-spacing:.03em}
.dbar-sep{width:1px;height:1.2rem;background:var(--line-strong)}
.dbar-title{font-size:.82rem;color:var(--ink-faint);letter-spacing:.06em}
.dbar-right{display:flex;align-items:center;gap:.7rem}

.chain-glow{display:flex;align-items:center;gap:.45rem;padding:.35rem .6rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--chain-color) 45%,transparent)}
.chain-glow svg,.chain-glow img{width:20px;height:20px;filter:drop-shadow(0 0 6px var(--chain-color)) drop-shadow(0 0 14px var(--chain-color));animation:chainGlowPulse 2.4s ease-in-out infinite}
.chain-glow-label{font-size:.72rem;font-weight:700;color:var(--chain-color);letter-spacing:.04em}
@keyframes chainGlowPulse{0%,100%{filter:drop-shadow(0 0 4px var(--chain-color)) drop-shadow(0 0 9px var(--chain-color))}50%{filter:drop-shadow(0 0 8px var(--chain-color)) drop-shadow(0 0 20px var(--chain-color))}}

.theme-toggle,.connect-btn{display:flex;align-items:center;gap:.4rem;padding:.55rem .9rem;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);font-size:.8rem;font-weight:600;transition:border-color .2s,transform .2s}
.theme-toggle{padding:.55rem .85rem;height:2.5rem;justify-content:center}
.theme-toggle-label{font-size:.72rem;font-weight:700;letter-spacing:.03em}
.theme-toggle:hover,.connect-btn:hover{border-color:var(--gold);transform:translateY(-1px)}
.connect-btn{background:linear-gradient(120deg,var(--gold),#e0aa3f);color:#17120a;border:0}

.dwrap{max-width:74rem;margin:0 auto;padding:1.6rem 1.4rem 4rem;display:grid;gap:2rem}

.pstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.75rem}
.pcard{padding:1rem 1.1rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel)}
.pcard-k{display:block;font-size:.68rem;letter-spacing:.08em;color:var(--ink-faint);text-transform:uppercase}
.pcard strong{display:block;margin-top:.35rem;font-size:1.15rem;font-weight:800}
.pcard-sub{display:block;margin-top:.15rem;font-size:.66rem;color:var(--ink-faint)}
.ok{color:var(--green)}.warn{color:var(--red)}

.moonage-explainer{padding:1.4rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}
.moonage-explainer h2{margin:0 0 .3rem;font-size:1.15rem}
.explainer-sub{margin:0 0 1rem;color:var(--ink-soft);font-size:.85rem;max-width:52ch}
.tier-ladder{display:flex;flex-wrap:wrap;gap:.5rem}
.tier-step{padding:.55rem .85rem;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);text-align:center;min-width:5.5rem}
/* The ceiling tile is no longer pre-highlighted: highlighting a tile the
   holder has not reached implied it was "theirs". Only .is-you highlights. */
.tier-step--ceiling{/* no static highlight: only the connected holder’s own tier is emphasised, via .is-you */}
.tier-day{display:block;font-size:.62rem;color:var(--ink-faint)}
.tier-mult{display:block;font-weight:800;font-family:var(--mono)}

.connect-gate{display:grid;place-items:center;padding:3rem 1rem}
.connect-gate[hidden],.trader-panel[hidden]{display:none}
.gate-card{max-width:26rem;text-align:center;padding:2rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}
.gate-card img{margin:0 auto 1rem}
.gate-card h2{margin:0 0 .5rem}
.gate-card p{color:var(--ink-soft);font-size:.88rem;margin:0 0 1.3rem}
.connect-btn--lg{width:100%;justify-content:center;padding:.85rem}

.trader-panel{display:grid;gap:1.6rem}
.tp-head{display:flex;align-items:center;justify-content:space-between}
.tp-addr{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.82rem;color:var(--ink-soft)}
.tp-addr-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.disconnect-btn{font-size:.75rem;color:var(--ink-faint);text-decoration:underline}

.tp-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.85rem}
.tp-hero-card{padding:1.2rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}
.tp-hero-card--primary{background:linear-gradient(150deg,color-mix(in srgb,var(--gold) 14%,var(--panel)),var(--panel));border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.tp-hero-k{display:block;font-size:.7rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.07em}
.tp-hero-card strong{display:block;margin-top:.4rem;font-size:1.5rem;font-weight:800}
.tp-hero-sub{display:block;margin-top:.25rem;font-size:.72rem;color:var(--ink-faint)}
.claim-btn{margin-top:.9rem;width:100%;padding:.65rem;border-radius:8px;background:linear-gradient(120deg,var(--gold),#e0aa3f);color:#17120a;font-weight:700;font-size:.85rem}
.claim-btn:disabled{opacity:.55;cursor:wait}

.tp-graph-card,.tp-history-card{padding:1.3rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}
.tp-graph-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-bottom:.9rem}
.tp-graph-head h3,.tp-history-card h3{margin:0;font-size:1rem}
.tp-graph-tabs{display:flex;gap:.4rem}
.tp-graph-tabs button{padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line);font-size:.72rem}
.tp-graph-tabs button[aria-selected="true"]{border-color:var(--gold);color:var(--gold)}
[data-graph-canvas]{width:100%;height:180px;display:block}
.tp-graph-note{margin:.6rem 0 0;font-size:.72rem;color:var(--ink-faint)}

.tp-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem}
.action-card{padding:1.1rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}
.action-card h4{margin:0 0 .3rem;font-size:.92rem}
.action-card p{margin:0 0 .8rem;font-size:.78rem;color:var(--ink-soft)}
.mini-btn{padding:.5rem .9rem;border-radius:7px;border:1px solid var(--line-strong);font-size:.78rem;font-weight:600;transition:border-color .2s}
.mini-btn:hover{border-color:var(--gold)}
.field-note{display:block;margin-top:.5rem;font-size:.7rem;color:var(--ink-faint)}
.inline-form{display:flex;gap:.4rem}
.inline-form input{flex:1;padding:.5rem .6rem;border-radius:7px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);font-size:.78rem}

.switch{display:flex;align-items:center;gap:.6rem;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-track{width:2.4rem;height:1.4rem;border-radius:999px;background:var(--line-strong);position:relative;transition:background .2s}
.switch-thumb{position:absolute;top:2px;left:2px;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--ink);transition:transform .2s}
.switch input:checked + .switch-track{background:var(--green)}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(1rem);background:#08170e}
.switch-label{font-size:.78rem;color:var(--ink-soft)}

.history-table{font-size:.8rem}
.history-empty{padding:1.4rem 0;text-align:center;color:var(--ink-faint);font-size:.8rem}

.dfoot{padding:2rem 1.4rem;text-align:center;font-size:.72rem;color:var(--ink-faint);border-top:1px solid var(--line)}

.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);padding:.75rem 1.2rem;border-radius:999px;background:var(--panel-2);border:1px solid var(--line-strong);font-size:.82rem;z-index:50;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}


/* ---- chain switcher (auto-appears once 2+ chains are live) ------------- */
.chain-switch{display:flex;align-items:center;gap:.35rem;padding:.25rem;border-radius:999px;border:1px solid var(--line);background:var(--panel)}
.chain-switch[hidden]{display:none}
.chain-pick{display:flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:999px;font-size:.74rem;font-weight:700;color:var(--ink-faint);transition:background .2s,color .2s}
.chain-pick svg{width:16px;height:16px;flex:none}
.chain-pick:hover{color:var(--ink)}
.chain-pick.is-active{color:var(--chain-color);background:color-mix(in srgb,var(--chain-color) 14%,transparent)}
@media (max-width:38rem){.chain-pick span{display:none}.chain-pick{padding:.35rem .5rem}}

/* ---- read-failure banner ---------------------------------------------- */
.data-warn{margin:0 0 1rem;padding:.7rem 1rem;border-radius:var(--radius-sm);border:1px solid color-mix(in srgb,var(--red) 40%,var(--line));background:color-mix(in srgb,var(--red) 8%,var(--panel));font-size:.8rem;color:var(--ink-soft)}
.data-warn[hidden]{display:none}

/* ---- header wrap on small screens (was overflowing) -------------------- */
@media (max-width:52rem){
  .dbar{flex-wrap:wrap;gap:.5rem}
  .dbar-right{width:100%;justify-content:flex-end}
}

/* ---- build stamp footer ------------------------------------------------
   Deliberately visible, not hidden in the console: it makes "am I looking at
   the new code or a cached old copy?" answerable at a glance. */
.dfoot{max-width:var(--dwrap);margin:2rem auto 1.5rem;padding:0 1rem;text-align:center;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);opacity:.55}

/* ============================ reward split tiles ==========================
   Holder share gets the emphasis (it's the number holders care about); eco
   and treasury sit beneath as smaller, quieter tiles. Chain-tinted so the
   card matches whichever chain is selected. */
.split-wrap{display:grid;gap:.4rem;margin-top:.15rem}
.split-main{display:flex;flex-direction:column;gap:.05rem;padding:.5rem .65rem;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--chain-color,var(--gold)) 40%,transparent);
  background:color-mix(in srgb,var(--chain-color,var(--gold)) 12%,transparent)}
.split-main .split-val{font-size:1.25rem;font-weight:800;line-height:1.1;color:var(--chain-color,var(--gold))}
.split-row{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.split-sub{display:flex;flex-direction:column;gap:.05rem;padding:.4rem .55rem;border-radius:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.02)}
.split-sub .split-val{font-size:.95rem;font-weight:700;line-height:1.1;color:var(--ink)}
.split-key{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}

/* ========================== moon age "you are here" =======================
   Scoreboard-style needle pointing down at the holder's current tier. Only
   rendered once a wallet is connected. */
.tier-step{position:relative}
.tier-step.is-you{border-color:var(--chain-color,var(--gold));
  background:color-mix(in srgb,var(--chain-color,var(--gold)) 10%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--chain-color,var(--gold)) 35%,transparent),
             0 0 14px color-mix(in srgb,var(--chain-color,var(--gold)) 30%,transparent)}
.age-marker{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:9px solid var(--chain-color,var(--gold));
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--chain-color,var(--gold)) 80%,transparent));
  animation:agebob 1.8s ease-in-out infinite}
@keyframes agebob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.age-marker{animation:none}}

/* ================================ MOBILE =================================
   The header was overflowing horizontally on phones (wallet pill pushed the
   row wider than the viewport, which is what dragged the whole page sideways
   and cut off the left edge). Fixed by letting the bar wrap and constraining
   the pill, rather than by scaling the page down. */
@media (max-width:760px){
  html,body{max-width:100%}
  .dbar{flex-wrap:wrap;row-gap:.55rem;padding:.6rem .75rem}
  .dbar-left{min-width:0;flex:1 1 auto}
  .dbar-title{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dbar-right{flex:1 1 100%;justify-content:space-between;gap:.4rem}
  .connect-btn{max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chain-glow{flex:0 0 auto}
  .chain-glow-label{display:none}      /* icon alone is enough on a phone */
  .theme-toggle{padding:.5rem .6rem}
  .theme-toggle-label{display:none}
  .dwrap{padding-left:.75rem;padding-right:.75rem}
  .pstrip{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .pcard{min-width:0}
  .pcard strong{font-size:1rem;word-break:break-word}
  .tier-ladder{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
}
@media (max-width:400px){
  .pstrip{grid-template-columns:1fr}
  .tier-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ==================== [hidden] MUST WIN ====================================
   Author CSS beats the browser's UA `[hidden]{display:none}` rule, so ANY
   class here that sets a display value silently breaks `el.hidden = true`.
   This bit us twice (admin confirm-modal, then the connect gate). Rather
   than patch them one at a time, assert it globally -- last rule, highest
   specificity, applies to everything. */
[hidden]{display:none !important}

/* ================= REAL MOBILE OVERFLOW FIX ================================
   Previous attempt used overflow-x:hidden, which HID the overflow instead of
   fixing it -- hence "no sideways scroll but content still cut off".

   Actual cause: `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto`
   floor is min-content. A single wide child (a 42-char wallet address, or a
   long "1000.00M MOONDOGE" value) therefore forces its grid container wider
   than the viewport, pushing everything off-screen. `minmax(0, 1fr)` removes
   that floor so tracks can actually shrink. Grid/flex children also need an
   explicit min-width:0 for the same reason. */
.dwrap, .dwrap > *{min-width:0}
.pstrip, .tier-ladder, .tp-actions-grid, .tp-hero, .split-row{min-width:0}
.pstrip > *, .tier-ladder > *, .tp-actions-grid > *, .tp-hero > *{min-width:0}

/* Long unbreakable strings (addresses, big token amounts) must be allowed to
   wrap or ellipsize rather than dictate layout width. */
.tp-addr, [data-tp-address]{overflow-wrap:anywhere;word-break:break-all;min-width:0}
.pcard strong, .insight-card strong{overflow-wrap:anywhere}

@media (max-width:760px){
  /* overflow-x:hidden removed deliberately -- with the real cause fixed it
     is no longer needed, and keeping it would re-hide any future regression. */
  html,body{max-width:100%}
  .pstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tier-ladder{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tp-actions-grid,.tp-hero{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .pstrip{grid-template-columns:minmax(0,1fr)}
  .tier-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =========================================================================
   GLOBAL [hidden] SAFETY NET
   Any rule like `.foo{display:grid}` silently defeats the browser's own
   `[hidden]{display:none}`, because author CSS always beats the UA
   stylesheet regardless of specificity. That bug bit us twice (the admin
   confirm-modal, then the "See your rewards" card). This one line makes it
   structurally impossible anywhere on the dashboards.
   ========================================================================= */
[hidden]{display:none !important}

/* ================== MOBILE: content was being clipped ====================
   The earlier pass stopped the page scrolling sideways, but did it partly by
   hiding overflow — so content wider than the viewport got CUT instead of
   fitting. The real fix is making the content itself fit: every grid
   collapses to a single column, long values wrap instead of extending, and
   nothing relies on a minimum column width larger than a phone screen. */
@media (max-width:760px){
  .dwrap{padding-left:.7rem;padding-right:.7rem}

  /* auto-fit with an 11rem minimum was still too wide once padding was
     accounted for; force explicit columns instead of letting it overflow. */
  .pstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-hero{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-actions-grid{grid-template-columns:1fr}

  .pcard,.tp-hero-card,.tp-action{min-width:0}
  .pcard strong,.tp-hero-v{font-size:1.02rem;line-height:1.25;overflow-wrap:anywhere}
  .pcard-sub,.tp-hero-sub{overflow-wrap:anywhere}

  /* Full wallet address was the single widest element on the page. */
  .tp-addr{font-size:.7rem;overflow-wrap:anywhere;word-break:break-all}
  .tp-head{flex-wrap:wrap;gap:.5rem}

  .tp-graph-head{gap:.4rem}
  .tier-ladder{gap:.4rem}
  .tier-step{flex:1 1 calc(33.333% - .4rem);min-width:0;padding:.5rem .35rem;text-align:center}
  .tier-mult{font-size:.85rem}
}
@media (max-width:430px){
  .pstrip,.tp-hero{grid-template-columns:1fr}
  .tier-step{flex:1 1 calc(50% - .4rem)}
}

/* ========================================================================
   WALLET TOGGLE PILL
   A single control for connect AND disconnect. Disconnected: reads "Connect
   Wallet", knob sits right over the broken-link icon. Connected: shows the
   address, knob slides left and lights up with the linked icon. The knob is
   inset (carved) rather than raised, so the pill reads as one object.
   ======================================================================== */
.wallet-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.28rem .3rem .28rem .8rem;
  border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);
  color:var(--ink);font-weight:700;font-size:.78rem;cursor:pointer;
  transition:border-color .25s,box-shadow .25s,background .25s}
.wallet-pill:hover{border-color:var(--gold)}
.wallet-pill:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wallet-addr{font-family:var(--mono);letter-spacing:.02em;white-space:nowrap}

/* Track: recessed channel the knob slides in. */
.wallet-track{position:relative;width:3.1rem;height:1.65rem;flex:none;border-radius:999px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25));
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.05)}
.wallet-knob{position:absolute;top:.15rem;left:1.6rem;width:1.35rem;height:1.35rem;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-faint);
  background:linear-gradient(180deg,#2a2f3d,#191d27);
  box-shadow:0 1px 2px rgba(0,0,0,.6);
  transition:left .28s cubic-bezier(.2,.9,.3,1.2),background .28s,color .28s,box-shadow .28s}
.wallet-knob svg{width:.82rem;height:.82rem}
.ico-link{display:none}

/* Connected: gold pill, knob slides left, link icon lit. */
.wallet-pill.is-connected{background:linear-gradient(180deg,var(--gold),#d9a83a);
  border-color:var(--gold);color:#17120a;
  box-shadow:0 0 14px rgb(from var(--chain-color) r g b / .35),0 0 30px rgb(from var(--chain-color) r g b / .15)}
.wallet-pill.is-connected .wallet-track{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.35))}
.wallet-pill.is-connected .wallet-knob{left:.15rem;color:var(--gold);
  background:linear-gradient(180deg,#3a2f14,#241c0c);
  box-shadow:0 0 10px rgb(from var(--chain-color) r g b / .75),inset 0 0 6px rgb(from var(--chain-color) r g b / .25)}
.wallet-pill.is-connected .ico-link{display:block}
.wallet-pill.is-connected .ico-unlink{display:none}
.wallet-pill.is-connected:hover{box-shadow:0 0 20px rgb(from var(--chain-color) r g b / .55),0 0 44px rgb(from var(--chain-color) r g b / .25)}

@media (prefers-reduced-motion:reduce){.wallet-knob{transition:none}}
@media (max-width:760px){
  .wallet-pill{padding-left:.6rem;font-size:.72rem}
  .wallet-track{width:2.7rem;height:1.5rem}
  .wallet-knob{width:1.2rem;height:1.2rem;left:1.35rem}
  .wallet-pill.is-connected .wallet-knob{left:.15rem}
}

/* ==========================================================================
   TRADER DASHBOARD POLISH
   Brings it up to the admin dashboard's visual standard: sectioned panels
   with headers, chain-tinted accents, depth on the hero cards, and a clearer
   hierarchy between "protocol facts" (always visible) and "your position"
   (wallet-gated). Purely additive — no markup or behaviour changes.
   ========================================================================== */

/* --- protocol strip: give each card depth + a chain-tinted top edge ------ */
.pcard{position:relative;overflow:hidden;background:
  linear-gradient(180deg,rgba(255,255,255,.035),transparent 55%),var(--panel);
  transition:border-color .25s,transform .25s,box-shadow .25s}
.pcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--chain-color,var(--gold)) 75%,transparent),transparent);
  opacity:.55;transition:opacity .25s}
.pcard:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--chain-color,var(--gold)) 30%,var(--line));
  box-shadow:0 8px 22px rgba(0,0,0,.45)}
.pcard:hover::before{opacity:1}
.pcard strong{letter-spacing:-.01em}

/* --- Moon Age ladder: connect the tiers into a visible progression ------- */
.tier-ladder{position:relative}
.tier-step{position:relative;flex:1 1 6rem;text-align:center;padding:.6rem .5rem;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  transition:border-color .25s,transform .2s,box-shadow .25s}
.tier-step:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--chain-color,var(--gold)) 35%,var(--line))}
.tier-mult{font-size:1.02rem;letter-spacing:-.02em}

/* --- hero cards: the numbers holders actually came for ------------------- */
.tp-hero-card{position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 60%),var(--panel);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.tp-hero-card::after{content:"";position:absolute;inset:-40% -60% auto auto;width:16rem;height:16rem;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--chain-color,var(--gold)) 18%,transparent),transparent);
  opacity:.5;transition:opacity .3s}
.tp-hero-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.5);
  border-color:color-mix(in srgb,var(--chain-color,var(--gold)) 32%,var(--line))}
.tp-hero-card:hover::after{opacity:.85}
.tp-hero-v{font-size:clamp(1.25rem,3.4vw,1.6rem);font-weight:800;letter-spacing:-.02em}

/* --- panel headers, matching the admin dashboard ------------------------- */
.tp-panel{position:relative}
.tp-panel-h{display:flex;align-items:center;gap:.5rem;margin:0 0 .9rem;
  font-size:.95rem;font-weight:800;letter-spacing:-.01em}
.tp-panel-h::before{content:"";width:3px;height:1em;border-radius:2px;
  background:var(--chain-color,var(--gold));
  box-shadow:0 0 8px color-mix(in srgb,var(--chain-color,var(--gold)) 70%,transparent)}

/* --- action cards ------------------------------------------------------- */
.tp-action{transition:border-color .25s,transform .2s,box-shadow .25s}
.tp-action:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--chain-color,var(--gold)) 30%,var(--line));
  box-shadow:0 8px 20px rgba(0,0,0,.4)}

/* --- graph area --------------------------------------------------------- */
.tp-graph{background:
  linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%),var(--panel)}
.tp-graph-tabs button{transition:color .2s,background .2s,border-color .2s}
.tp-graph-tabs button.is-active{color:var(--chain-color,var(--gold));
  border-color:color-mix(in srgb,var(--chain-color,var(--gold)) 45%,transparent);
  background:color-mix(in srgb,var(--chain-color,var(--gold)) 10%,transparent)}

@media (prefers-reduced-motion:reduce){
  .pcard,.tier-step,.tp-hero-card,.tp-action{transition:none}
  .pcard:hover,.tier-step:hover,.tp-hero-card:hover,.tp-action:hover{transform:none}
}

/* Chain theming — same variable contract as the homepage. Set on <html> by
   dash.js/admin.js from the active chain's colour, so one assignment
   recolours every accent on the page. */
:root{--chain-color:var(--gold)}

.chain-menu{position:relative;display:inline-block}
.chain-menu-trigger{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .7rem;
  border-radius:999px;border:1px solid color-mix(in srgb,var(--chain-color) 45%,var(--line));
  background:rgba(5,6,10,.55);color:var(--chain-color);font-size:.74rem;font-weight:800;
  cursor:pointer;transition:box-shadow .25s,border-color .25s}
.chain-menu-trigger:hover{box-shadow:0 0 14px color-mix(in srgb,var(--chain-color) 40%,transparent)}
.chain-menu-trigger svg.chev{width:12px;height:12px;opacity:.7;transition:transform .25s}
.chain-menu.is-open .chain-menu-trigger svg.chev{transform:rotate(180deg)}
.chain-menu-trigger svg:not(.chev){width:17px;height:17px;flex:none}
.chain-menu-trigger.is-static{cursor:default}
.chain-menu-trigger.is-static .chev{display:none}

.chain-menu-card{position:absolute;top:calc(100% + .5rem);right:0;z-index:60;min-width:14.5rem;
  padding:.4rem;border-radius:14px;border:1px solid var(--line-strong);
  background:rgba(10,12,18,.97);backdrop-filter:blur(18px);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);
  transition:opacity .2s,transform .2s,visibility .2s}
.chain-menu.is-open .chain-menu-card{opacity:1;visibility:visible;transform:none}
.chain-menu-head{padding:.45rem .6rem .5rem;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--line);margin-bottom:.25rem}
.chain-opt{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem;border-radius:10px;
  background:none;border:0;color:var(--ink);font-size:.82rem;font-weight:700;text-align:left;
  cursor:pointer;transition:background .18s}
.chain-opt:hover{background:color-mix(in srgb,var(--opt-color) 12%,transparent)}
.chain-opt svg:not(.tick){width:20px;height:20px;flex:none}
.chain-opt small{display:block;font-size:.62rem;font-weight:500;color:var(--ink-faint)}
.chain-opt .tick{margin-left:auto;width:14px;height:14px;color:var(--opt-color);opacity:0}
.chain-opt.is-current .tick{opacity:1}
.chain-opt.is-current{background:color-mix(in srgb,var(--opt-color) 14%,transparent)}

/* Header must never wrap its nav out of view on narrow screens. */
@media (max-width:760px){
  .chain-menu-card{right:auto;left:0}
}

/* ==========================================================================
   HEADER ALIGNMENT ON NARROW SCREENS
   The bar wraps onto two rows below 760px. Previously the second row used
   space-between, which pushed the chain pill hard left and the wallet pill
   hard right — so on a ~480px screen the wallet pill sat flush against the
   edge and looked knocked out of alignment. Centering the wrapped row keeps
   the group balanced at every width, and the pills shrink rather than
   overflow.
   ========================================================================== */
@media (max-width:760px){
  .dbar{justify-content:center}
  .dbar-right{justify-content:center;flex-wrap:wrap;gap:.45rem}
  .dbar-left{justify-content:center;text-align:center}
  .wallet-pill,.chain-menu-trigger,.theme-toggle{min-width:0;flex:0 1 auto}
  .wallet-addr{max-width:8.5rem;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:420px){
  .dbar-right{gap:.35rem}
  .chain-menu-trigger span{max-width:6.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wallet-addr{max-width:7rem}
}