/* =============================================================================
   ATHANOR — Juicy Bubble-Pop Hype Machine
   intrepidshape/elm-web3 + elm-web3-ui v1.2.0 showcase
   Brand-adjacent to intrepiddev.com.au but cranked for the dapp.
   ============================================================================= */

/* ── Design Tokens ───────────────────────────────────────────────────── */

:root {
    /* ── Charm-inspired pop palette — dark theme ────────────────────
       Lifted from charm.land: violet `#6b50ff`, pink `#ff7bf5`, mint
       `#00ffb2`, acid yellow `#ecfd65`, cream foreground `#fffdf5`.

       Geometric / perceptual balance:
       Each accent's OKLCH luminance L is shown in a comment. Aimed
       at L ≈ 75-85% so no single color dominates the eye on the
       dark base. Where Charm's natural hex sits outside that band
       I pull the supporting slots to match (e.g. Charm violet at
       L≈56% is the deliberate brand outlier — the rest sit higher
       for balance against it).

       Reference: Newton's hue wheel + OKLCH perceptual model. */

    /* TRUE neutral black base — zero hue. Earlier "cool greys" still mixed
       with cream-tinted ink to read as a muddy grey-brown. This palette
       is pure achromatic so the pop accents (cyan/pink/lime/amber) are
       the only chroma anywhere on screen. */
    --bg:           #0A0A0A;
    --bg-2:         #111111;
    --bg-3:         #161616;
    --surface:      #1A1A1A;
    --surface-2:    #1F1F1F;
    --surface-3:    #262626;
    --surface-4:    #2F2F2F;

    --line:         rgba(255, 255, 255, 0.07);
    --line-2:       rgba(255, 255, 255, 0.14);
    --line-3:       rgba(255, 255, 255, 0.24);

    /* Pure white foreground — no cream tint. Cream-on-charcoal read as a
       grey-brown mud. Pure achromatic ink keeps the only chroma on the
       page belonging to the pop accents. */
    --ink:          #FFFFFF;
    --ink-2:        #FFFFFF;
    --ink-3:        #FFFFFF;
    --ink-4:        #FFFFFF;
    --muted:        #3D3D3D;

    /* ── Charm signature accents ──────────────────────────────────── */

    /* Charm violet — THE brand anchor.
       OKLCH(56% 0.27 285) — deliberately darker, a deep saturated
       violet that pulls the eye as the primary action color. */
    --purple:       #6b50ff;
    --purple-bright:#9580ff;       /* OKLCH(67% 0.24 285) */
    --purple-deep:  #4a32d6;       /* OKLCH(45% 0.25 285) */
    --purple-glow:  rgba(107, 80, 255, 0.55);

    /* Charm pink — OKLCH(75% 0.27 335). High L, max chroma. */
    --pink:         #ff7bf5;
    --pink-bright:  #ffb0ff;       /* OKLCH(83% 0.18 335) */
    --pink-deep:    #e84cd8;       /* OKLCH(67% 0.27 335) */
    --pink-glow:    rgba(255, 123, 245, 0.55);

    /* Charm mint — OKLCH(86% 0.20 165). Eye is most sensitive here,
       so high L is fine — reads at the same perceptual brightness as
       the pink despite different hex L. */
    --cyan:         #00ffb2;
    --cyan-bright:  #66ffcc;       /* OKLCH(91% 0.16 165) */
    --cyan-deep:    #00cc8e;       /* OKLCH(72% 0.20 165) */
    --cyan-glow:    rgba(0, 255, 178, 0.55);

    /* Charm acid yellow — OKLCH(95% 0.20 110). Perceptually peaks at
       this lightness; pushing higher just looks washed out. */
    --yellow:       #ecfd65;
    --yellow-bright:#f5ff99;        /* OKLCH(97% 0.16 110) */
    --yellow-glow:  rgba(236, 253, 101, 0.55);

    /* Lime — same hue band as mint, treated as alias.
       (Both refer to the green-cyan band in the wheel.) */
    --lime:         #00ffb2;
    --lime-bright:  #66ffcc;
    --lime-deep:    #00cc8e;
    --lime-glow:    rgba(0, 255, 178, 0.55);

    /* Magenta — OKLCH(72% 0.32 320). The brightest, most chromatic
       point on the pink/purple bridge. Dangerous if overused. */
    --magenta:      #ff60ff;
    --magenta-glow: rgba(255, 96, 255, 0.55);

    /* Lavender — OKLCH(76% 0.13 290). Softer cousin of violet,
       reads at similar L as pink — geometrically balanced. */
    --lavender:     #c89cff;
    --lavender-glow:rgba(200, 156, 255, 0.5);

    /* Blue — Charm doesn't ship a distinct blue. Aliased to violet. */
    --blue:         #6b50ff;
    --blue-bright:  #9580ff;
    --blue-deep:    #4a32d6;
    --blue-glow:    rgba(107, 80, 255, 0.55);

    /* Amber — OKLCH(80% 0.16 65). Warm orange anchored to the same
       brightness band as Charm's mint — the pair feels balanced. */
    --amber:        #ffb84d;
    --amber-bright: #ffd180;        /* OKLCH(85% 0.13 65) */
    --amber-deep:   #e69926;        /* OKLCH(73% 0.16 65) */
    --amber-glow:   rgba(255, 184, 77, 0.55);

    /* Red — Charm uses #fe3e78 (raspberry).
       OKLCH(63% 0.26 5). Lowest L of the warm range — used sparingly
       for failure / penalty signals where the eye should snap to it. */
    --red:          #fe3e78;
    --red-bright:   #ff6da0;        /* OKLCH(73% 0.21 5) */
    --red-deep:     #d11a52;        /* OKLCH(53% 0.27 5) */
    --red-glow:     rgba(254, 62, 120, 0.55);

    /* Hero gradient mashup — the signature "pop" combo */
    --pop-grad:     linear-gradient(110deg, var(--cyan) 0%, var(--blue) 28%, var(--purple) 60%, var(--pink) 90%);
    --pop-grad-2:   linear-gradient(135deg, var(--lime) 0%, var(--cyan) 50%, var(--blue) 100%);
    --pop-grad-3:   linear-gradient(135deg, var(--pink) 0%, var(--magenta) 50%, var(--purple) 100%);
    --pop-grad-4:   linear-gradient(135deg, var(--amber) 0%, var(--pink) 100%);
    --pop-grad-rainbow: linear-gradient(110deg,
        #ff5e9c 0%, #ff8a5b 18%, #ffd45e 36%, #5eff9c 54%, #5edfff 72%, #5e9cff 88%, #c45eff 100%);

    /* Specular sheen for chrome surfaces */
    --sheen:        linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 38%, rgba(0,0,0,0) 60%);
    --sheen-side:   linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);

    /* Shadows — chunky, layered, candy-sticker style */
    --shadow-1:     0 4px 12px rgba(0,0,0,0.45);
    --shadow-2:     0 20px 50px rgba(0,0,0,0.6);
    --shadow-pop:   0 8px 30px rgba(59,130,246,0.35), 0 0 0 1px rgba(59,130,246,0.18), inset 0 1px 0 rgba(255,255,255,0.16);
    --shadow-bubble:0 14px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.1);
    --inset-pop:    inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.4);

    /* Big chunky rounded — "bubble" shape language */
    --radius-1:     10px;
    --radius-2:     16px;
    --radius-3:     22px;
    --radius-pill:  999px;

    /* Distinctive type system — distinctive display, refined body, character mono.
       Bricolage Grotesque has variable optical-size (12..96) so headlines and
       body text from the same family rendered at different sizes get
       compensated stroke contrast. Boldonse is a chunky slab reserved for the
       ATHANOR wordmark. Outfit is a clean geometric sans used for body. */
    --font-display: 'Bricolage Grotesque', 'Outfit', -apple-system, system-ui, sans-serif;
    --font-body:    'Outfit', 'Bricolage Grotesque', -apple-system, system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;
    --font-brand:   'Boldonse', 'Bricolage Grotesque', sans-serif;

    --max-w:        1680px;
    --gap:          20px;

    /* ── Easing library — game-feel curves, no `linear` ever ─────────────
       Named for the motion they describe, not the math. `linear` is
       banned as a UI keyword: every motion has anticipation, peak, and
       settle. The "rotate" curve is the closest legal substitute for
       constant-velocity loops (spinners, slow-roll emojis). */
    --ease-pop:        cubic-bezier(.34, 1.56, .64, 1);   /* default overshoot+settle */
    --ease-snap:       cubic-bezier(.87, 0, .13, 1);       /* hard in/out, no float */
    --ease-soft:       cubic-bezier(.4,  0,   .2, 1);       /* material soft */
    --ease-back-in:    cubic-bezier(.6, -.28, .74, .05);   /* anticipation pull */
    --ease-back-out:   cubic-bezier(.18, .89, .32, 1.28);  /* clean overshoot */
    --ease-back-inout: cubic-bezier(.68,-.55, .27, 1.55);  /* anticipate + overshoot */
    --ease-elastic:    cubic-bezier(.5,  -.5, .25, 1.6);   /* heavier spring */
    --ease-expo-out:   cubic-bezier(.16, 1,    .3, 1);      /* hard arrival, smooth glide */
    --ease-expo-in:    cubic-bezier(.7,  0,   .84, 0);      /* slow start, snap exit */
    --ease-quart-out:  cubic-bezier(.25, 1,   .5, 1);       /* polished decel */
    --ease-anticipate: cubic-bezier(.85, -.4, .15, 1.4);   /* dramatic windup */
    --ease-magnetic:   cubic-bezier(.2,  .8,  .2, 1.04);   /* sticky pull */
    --ease-overshoot:  cubic-bezier(.34, 1.85, .64, 1);    /* stronger pop */
    --ease-rotate:     cubic-bezier(.45, .05, .55, .95);   /* near-uniform rotation */
    --ease-bounce:     cubic-bezier(.5,  1.65, .5, .55);   /* bouncy settle */

    /* ── Type scale — used everywhere, no per-component overrides ─────
       One font-size + one color combo per role. Components reference
       these tokens (.text-label / .text-value-lg etc) — no more bespoke
       font-size + color per panel.

       Roles
       -----
       display-xl  hero number (price, total raised)        56-72 / display 800
       display-lg  big stat (stats banner)                  34 / display 800
       display-md  panel number (TVL, fee%)                 24 / display 800
       display-sm  inline number                            18 / display 700
       h1          hero title                               clamp 56-104 / display 800
       h2          page title                               36 / display 800
       h3          panel title                              20 / display 700
       eyebrow     mono uppercase label                     11 / mono 600 / 0.18em
       eyebrow-sm  smaller mono uppercase label             10 / mono 600 / 0.18em
       body-lg     hero subtitle                            17 / body 400
       body        default body                             14 / body 400
       body-sm     compact body                             13 / body 400
       mono        tabular number / address                 13 / mono 500
       mono-sm     tabular small                            12 / mono 500

       Color roles
       -----------
       strong  ink (cream) — headlines, primary numbers
       default ink-2        — body, secondary numbers
       soft    ink-3        — sub-text, eyebrow labels
       muted   ink-4        — least-prominent metadata only (timestamps)
    */
    --t-display-xl-size: 56px;
    --t-display-lg-size: 38px;
    --t-display-md-size: 24px;
    --t-display-sm-size: 18px;
    --t-h3-size:         20px;
    --t-eyebrow-size:    11px;
    --t-eyebrow-sm-size: 10px;
    --t-body-lg-size:    17px;
    --t-body-size:       14px;
    --t-body-sm-size:    13px;
    --t-mono-size:       13px;
    --t-mono-sm-size:    12px;

    --t-track-eyebrow:   0.18em;

    /* No grey ink anywhere — hierarchy comes from weight/size, not hue. */
    --c-text-strong:  var(--ink);
    --c-text-default: var(--ink);
    --c-text-soft:    var(--ink);
    --c-text-muted:   var(--ink);

    /* Stagger slot durations */
    --d-instant: 70ms;
    --d-fast:    140ms;
    --d-base:    220ms;
    --d-slow:    360ms;
    --d-flow:    520ms;

    /* Hue tokens — for hue-rotate animations and OKLCH math.
       Centred on Charm's published accents. */
    --hue-cyan:    165;
    --hue-pink:    335;
    --hue-violet:  285;
    --hue-yellow:  110;
    --hue-amber:   65;
    --hue-magenta: 320;
    --hue-red:     5;

    /* Perceptual luminosity bands (OKLCH L)
       — anchors that every accent is balanced against. */
    --L-deep: 56%;     /* Charm violet anchor */
    --L-mid:  75%;     /* pink, lime, amber band */
    --L-hi:   88%;     /* yellow + bright tints */

    color-scheme: dark;
}

/* ── Reset / Base ────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg); color: var(--ink);
    font-family: var(--font-body);
    font-weight: 400; font-size: 15px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Solid flat background. No gradients, no hues, no animation, no atmosphere.
   The page is a flat sheet of paper — color comes from the elements on it,
   not the surface beneath. */
body {
    background: var(--bg);
    min-height: 100vh;
    min-height: 100dvh;
    position: relative; overflow-x: hidden;
}

#app { position: relative; z-index: 2; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--cyan); color: #000; }

/* ── Typography — single coherent type system ──────────────────────────
   Every text element on the page references one of these roles. Per-
   component font-size / color overrides are forbidden going forward —
   if a component needs a different look, give it a role class. */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    margin: 0; color: var(--c-text-strong);
    line-height: 1.05;
}
h1 { font-size: clamp(56px, 8vw, 96px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.96; }
h2 { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: var(--t-h3-size); font-weight: 700; letter-spacing: -0.02em; }
h4 {
    font-size: var(--t-eyebrow-size);
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
    line-height: 1.4;
}

p { color: var(--c-text-default); line-height: 1.55; margin: 0; }

/* Eyebrow / mini-label — used for every uppercase mono tracked label */
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 600;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
    line-height: 1.4;
}
.eyebrow-sm {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 600;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
}

.text-mono    { font-family: var(--font-mono); font-size: var(--t-mono-size);    color: var(--c-text-default); font-feature-settings: 'tnum' on, 'zero' on; }
.text-mono-sm { font-family: var(--font-mono); font-size: var(--t-mono-sm-size); color: var(--c-text-soft);    font-feature-settings: 'tnum' on, 'zero' on; }

.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' on, 'zero' on; }

em, .em {
    font-style: normal;
    background: var(--pop-grad);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 6s var(--ease-quart-out) infinite alternate;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ── Layout ──────────────────────────────────────────────────────────── */

.nav-spacer { display: none; }

/* ── NAV — bubble pill, glassmorphic ─────────────────────────────────── */

.nav {
    position: sticky; top: 0; z-index: 50;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 24px; padding: 16px 32px;
    background: var(--bg);
    border-bottom: 2px solid var(--ink);
    box-shadow: 0 4px 0 var(--surface-2);
}
.nav-left { justify-self: start; }
.nav-links {
    justify-self: center; display: inline-flex; gap: 4px;
    padding: 5px;
    background: var(--surface);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-pill);
    box-shadow: 3px 3px 0 var(--line-2);
}
.nav-right { justify-self: end; }

.nav-brand { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.nav-fire {
    font-size: 26px;
    transform-origin: center bottom;
    animation: flameWobble 1.6s var(--ease-elastic) infinite;
    will-change: transform;
}
.nav-brand:hover .nav-fire {
    animation: flameWobble 0.5s var(--ease-bounce) infinite;
}
@keyframes flameWobble {
    0%, 100% { transform: rotate(-3deg) scale(1); }
    50%      { transform: rotate(3deg) scale(1.08); }
}
.nav-name {
    font-family: var(--font-brand);
    font-weight: 400; letter-spacing: 0.04em; font-size: 18px;
    color: var(--c-text-strong);
    text-transform: uppercase;
}

.nav-link {
    background: transparent;
    border: 2px solid transparent;
    padding: 9px 18px; border-radius: var(--radius-pill);
    font-family: var(--font-display); font-size: 13px; font-weight: 700;
    color: var(--c-text-soft); letter-spacing: 0.02em;
    transition: color .15s var(--ease-soft), background-color .15s var(--ease-soft),
                border-color .15s var(--ease-soft), transform .15s var(--ease-pop),
                box-shadow .15s var(--ease-soft);
}
.nav-link:hover { color: var(--c-text-strong); transform: translate(-1px, -1px); }
.nav-link.active {
    color: var(--bg);
    background: var(--cyan);
    border-color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
}
.nav-link.active:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

.nav-wallet {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px;
    background: var(--cyan);
    color: var(--bg);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
    transition: transform .15s var(--ease-pop), box-shadow .15s var(--ease-soft), background .15s ease;
    box-shadow: 4px 4px 0 var(--ink);
    position: relative;
}
.nav-wallet:hover {
    background: var(--cyan-bright);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}
.nav-wallet:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}
.nav-wallet.connected {
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--lime);
    box-shadow: 4px 4px 0 var(--lime);
    font-weight: 600;
}
.nav-wallet.connected::after {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--lime);
    border: 2px solid var(--ink);
    animation: pulseDot 1.6s var(--ease-quart-out) infinite;
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.2); }
}
.nav-wallet.wrong-chain {
    background: var(--red);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
}
.nav-wallet[disabled] { opacity: 0.6; cursor: wait; }

.nav-wallet-picker-wrap { position: relative; }
.wallet-picker-dropdown {
    position: absolute; right: 0; top: calc(100% + 10px);
    min-width: 280px;
    background: rgba(20, 19, 44, 0.95);
    border: 2px solid var(--ink);
    border-radius: var(--radius-2); padding: 8px;
    box-shadow: 6px 6px 0 var(--purple);
    z-index: 60;
    animation: popIn 0.32s var(--ease-back-out) both;
    transform-origin: top right;
}
@keyframes popIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.web3-wallet-picker { display: grid; gap: 4px; }
.web3-wallet-option {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: var(--radius-1);
    color: var(--ink); cursor: pointer;
    transition: background .2s var(--ease-soft), transform .2s var(--ease-pop);
}
.web3-wallet-option:hover {
    background: rgba(59,130,246,0.10);
    transform: translateX(4px);
}
.web3-wallet-option img { width: 26px; height: 26px; border-radius: 6px; }

/* Connected-state dropdown gets a disconnect row below the provider list.
   Lib renders `.web3-wallet-menu` containing `.web3-wallet-picker` plus a
   trailing `.web3-wallet-menu-disconnect` button. */
.web3-wallet-menu { display: grid; gap: 6px; }
.web3-wallet-menu-disconnect {
    width: 100%; padding: 10px 14px; margin-top: 6px;
    background: rgba(239,68,68,0.10);
    border: 2px solid var(--red, #ef4444);
    border-radius: var(--radius-1);
    color: #ffffff !important;
    font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    cursor: pointer;
    transition: background .2s var(--ease-soft);
}
.web3-wallet-menu-disconnect:hover { background: rgba(239,68,68,0.22); }

/* ── HERO ────────────────────────────────────────────────────────────── */

.hero, .home-hero {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 100px 40px 80px;
    position: relative;
    text-align: center;
}
.hero-inner { position: relative; z-index: 2; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 18px; border-radius: var(--radius-pill);
    background: var(--surface);
    border: 2px solid var(--ink);
    color: var(--c-text-strong);
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--t-track-eyebrow);
    margin-bottom: 28px;
    box-shadow: 4px 4px 0 var(--cyan);
}
.hero-badge::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--lime);
    box-shadow: none;
}

.hero h1, .home-hero h1, .hero-title {
    font-size: clamp(56px, 8vw, 96px);
    line-height: 0.96; font-weight: 800;
    letter-spacing: -0.045em; color: var(--c-text-strong);
    margin: 0;
}
.hero h1 em, .home-hero h1 em, .hero-accent {
    font-style: normal;
    color: var(--cyan);
    display: inline-block;
}
.hero p, .home-hero p, .hero-sub {
    max-width: 620px; margin: 28px auto 0;
    color: var(--c-text-default);
    font-family: var(--font-body);
    font-size: var(--t-body-lg-size);
    line-height: 1.55;
    font-weight: 400;
}
.hero-sub {
    display: flex; flex-direction: column; gap: 6px;
    align-items: center;
    max-width: none;
    font-family: var(--font-mono);
    font-size: var(--t-mono-size);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-soft);
}
.hero-sub-line {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    color: var(--c-text-default);
}
.hero-sub-line:nth-child(1) { color: var(--lime-bright); }
.hero-sub-line:nth-child(3) { color: var(--cyan-bright); }
.hero-actions, .home-hero-actions {
    margin-top: 44px;
    display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.hero-btn { padding: 16px 30px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 700; }

/* ── Buttons — chunky candy, springy press ───────────────────────────── */

.btn, .tp-btn, button.tp-btn, .hero-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; border-radius: var(--radius-pill);
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
    letter-spacing: 0.01em; border: none;
    transition: transform .2s var(--ease-pop), filter .2s var(--ease-soft),
                background .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
    cursor: pointer; position: relative; overflow: hidden;
}

.btn-primary, .tp-btn.tp-buy, .hero-btn.primary {
    background: var(--cyan);
    color: var(--bg);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    text-transform: none;
}
.btn-primary:hover, .tp-btn.tp-buy:hover, .hero-btn.primary:hover {
    background: var(--cyan-bright);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}
.btn-primary:active, .tp-btn.tp-buy:active, .hero-btn.primary:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
    transition-duration: 0.06s;
}

.btn-secondary, .tp-btn.tp-sell, .hero-btn.secondary {
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--line-3);
    box-shadow: 4px 4px 0 var(--line-2);
}
.btn-secondary:hover, .tp-btn.tp-sell:hover, .hero-btn.secondary:hover {
    border-color: var(--pink);
    color: var(--pink-bright);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--pink);
}
.btn-secondary:active, .tp-btn.tp-sell:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--pink);
}

/* Generic tertiary buttons (stake/claim/unstake/burst). */
.tp-btn.tp-stake-btn, .tp-btn.bt-execute, .tp-btn.tp-claim-yield-btn,
.tp-btn.tp-unstake-btn, .tp-btn {
    background: var(--surface);
    color: var(--ink); border: 2px solid var(--line-3);
    box-shadow: 4px 4px 0 var(--line-2);
}
.tp-btn.tp-stake-btn:hover, .tp-btn.bt-execute:hover,
.tp-btn.tp-claim-yield-btn:hover, .tp-btn.tp-unstake-btn:hover {
    border-color: var(--lime);
    color: var(--lime-bright);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--lime);
}

/* The "Connect Wallet" CTA inside the trade panel — primary CTA energy. */
.tp-btn.tp-connect, button.tp-btn.tp-connect {
    width: 100%;
    background: var(--cyan);
    color: var(--bg);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
}
.tp-btn.tp-connect:hover {
    background: var(--cyan-bright);
    border-color: var(--ink);
    color: var(--bg);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}
.tp-btn.tp-connect:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}

.btn[disabled], .tp-btn[disabled], button[disabled] {
    opacity: 0.36; cursor: not-allowed;
    transform: none !important; filter: grayscale(0.6) !important;
}

.detail-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 24px 0 8px;
}
.detail-back {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none; color: var(--ink-3);
    font-size: 13px; padding: 10px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display); font-weight: 600;
    transition: color .2s var(--ease-soft), background .2s var(--ease-soft), transform .2s var(--ease-pop);
}
.detail-back:hover {
    color: var(--cyan-bright);
    background: rgba(34, 211, 238, 0.08);
    transform: translateX(-3px);
}

/* Share button — chunky 2D pill with lime accent and the offset ink
   shadow we use on every primary CTA. Lifts on hover, smashes down
   on press for the same "physical" feel as Launch / Stake / Buy. */
.detail-share {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--lime); color: var(--ink);
    border: 2px solid var(--ink); cursor: pointer;
    font-size: 13px; padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display); font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    box-shadow: 4px 4px 0 0 var(--ink);
    transition: transform .12s var(--ease-pop), box-shadow .12s var(--ease-pop);
}
.detail-share:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 0 var(--ink);
}
.detail-share:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--ink);
}
.detail-share-glyph {
    font-size: 16px; line-height: 1;
    transform: scaleX(-1);
}

/* ── Stats banner — chunky stat cells with color-coded glows ─────────── */

.stats-banner, .home-stats {
    max-width: var(--max-w); margin: 56px auto 0;
    display: grid; grid-template-columns: repeat(6, 1fr);
    padding: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(59,130,246,0.05), rgba(0,0,0,0.2)),
        rgba(255,255,255,0.02);
    position: relative;
    overflow: hidden;
}
/* Dapp-home explore section sits closer to the stats banner since the big
   hero has been moved out to the marketing/SEO landing page. */
.explore.explore-top { padding-top: 36px; }
.stats-banner::before, .home-stats::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--pop-grad);
    background-size: 200% 100%;
    opacity: 0.85;
}
.sb-item {
    display: flex; flex-direction: column; gap: 8px;
    padding: 32px 28px;
    border-right: 1px solid var(--line);
    position: relative;
    transition: background .25s var(--ease-soft);
}
.sb-item:last-child { border-right: none; }
.sb-item:hover { background: rgba(255,255,255,0.025); }
.sb-item > .sb-label { display: block; }
.sb-item > .sb-val { display: block; }
.sb-sep { display: none; }

.sb-label {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    text-transform: uppercase;
    letter-spacing: var(--t-track-eyebrow);
    color: var(--c-text-soft);
    font-weight: 600;
}
.sb-val {
    font-family: var(--font-display);
    font-size: var(--t-display-lg-size);
    font-weight: 800;
    color: var(--c-text-strong);
    letter-spacing: -0.03em;
    line-height: 1;
}
/* Stats-banner values are uniform white — color spray was incoherent. */
.sb-val.green, .sb-val.amber, .sb-val.red, .sb-val.blue { color: var(--c-text-strong); }

/* ── Explore ─────────────────────────────────────────────────────────── */

.explore {
    max-width: var(--max-w); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px; padding: 72px 40px 80px;
}
.explore-main { min-width: 0; }
.explore-side { min-width: 0; }

.explore-header {
    display: flex; justify-content: space-between; align-items: end;
    gap: 24px; margin-bottom: 32px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 20px;
}
.explore-header h2 {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 800;
    color: var(--c-text-strong);
    letter-spacing: -0.035em;
    line-height: 1;
}
.explore-header h2::after {
    content: "";
    display: none;
}
.explore-sorts {
    display: inline-flex; gap: 4px; padding: 5px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-pill);
}
.explore-sorts button {
    background: transparent; border: none;
    padding: 9px 16px; border-radius: var(--radius-pill);
    color: var(--c-text-soft);
    font-size: var(--t-mono-sm-size);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    transition: all .2s var(--ease-pop);
}
.explore-sorts button.active {
    color: var(--bg);
    background: var(--cyan);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
}
.explore-sorts button:hover:not(.active) { color: var(--c-text-strong); transform: translateY(-1px); }

/* ── Token grid + Token card — sticker style ─────────────────────────── */

.token-grid {
    display: grid; gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.token-card {
    background: var(--surface);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-3);
    padding: 22px;
    transition: transform .25s var(--ease-pop), border-color .2s var(--ease-soft), box-shadow .25s var(--ease-soft);
    cursor: pointer; position: relative;
    /* Solid offset shadow — sticker style, not blurred glow */
    box-shadow: 6px 6px 0 var(--line-2);
}
/* Card shadow follows FLOOR direction — the brand promise is "rising floor".
   Floor rises by design, so lime dominates. Red shadow only if floor shrinks. */
.token-card.tc-floor-rising  { border-color: var(--ink); box-shadow: 6px 6px 0 var(--lime); }
.token-card.tc-floor-falling { border-color: var(--ink); box-shadow: 6px 6px 0 var(--red); }
.token-card.tc-floor-flat    { border-color: var(--ink); box-shadow: 6px 6px 0 var(--surface-4); }
/* ATHN — protocol token, pinned. Amber accent to differentiate from token sea. */
.token-card.token-card-athn,
.token-card.token-card-athn.tc-floor-rising,
.token-card.token-card-athn.tc-floor-falling,
.token-card.token-card-athn.tc-floor-flat {
    border-color: var(--amber-bright);
    box-shadow: 6px 6px 0 var(--amber-bright);
}

.token-card:hover {
    transform: translate(-3px, -3px) rotate(-0.6deg);
    box-shadow: 9px 9px 0 currentColor;
}
.token-card:active {
    transform: translate(2px, 2px) rotate(0deg);
    box-shadow: 2px 2px 0 currentColor;
    transition-duration: 0.08s;
}

/* Legacy left for compatibility — new card uses .tc-head/.tc-price-hero/etc. */
.tc-top { display: flex; justify-content: space-between; align-items: start; gap: 14px; margin-bottom: 16px; }
.tc-info { display: flex; flex-direction: column; gap: 4px; }

/* ── Token card v2 — hero price + spread + chunky grad ──────────── */

.token-card {
    display: flex; flex-direction: column; gap: 18px;
    padding: 20px;
}

.tc-head {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 14px; align-items: center;
}
.tc-icon-wrap {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--bg-3);
    border: 2px solid currentColor;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 3px 3px 0 currentColor;
    flex: 0 0 auto;
}
.tc-icon-sticker {
    font-size: 32px; line-height: 1;
    transform-origin: center;
    transition: transform 0.25s var(--ease-pop);
}
.tc-icon-img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    border-radius: 12px;
    background: transparent;
    padding: 4px;
}
.token-card:hover .tc-icon-sticker {
    animation: bounceIcon 0.9s var(--ease-elastic) infinite;
}
.tc-live-dot {
    position: absolute; top: -4px; right: -4px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--lime);
    border: 2px solid var(--bg);
    animation: pulseDot 1.5s var(--ease-quart-out) infinite;
}
.tc-live-dot.down { background: var(--red); }

.tc-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-name-row { display: flex; align-items: baseline; gap: 8px; }
.tc-name {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 800;
    color: var(--c-text-strong);
    letter-spacing: -0.02em;
    line-height: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-trend-chev {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 800;
    line-height: 1;
}
.tc-trend-chev.up   { color: var(--lime-bright); }
.tc-trend-chev.down { color: var(--red-bright); }
.tc-trend-chev.flat { color: var(--c-text-soft); }
.tc-ticker {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    color: var(--c-text-soft);
}

.tc-tape {
    display: flex; flex-direction: column; gap: 4px;
    flex: 0 0 auto;
}
.tc-tape-row {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--t-mono-sm-size);
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 2px solid var(--ink);
}
.tc-tape-buy  { background: var(--lime); color: #000 !important; box-shadow: 2px 2px 0 var(--ink); }
.tc-tape-sell { background: var(--red);  color: #fff !important; box-shadow: 2px 2px 0 var(--ink); }
.tc-tape-arrow { font-weight: 800; font-size: 11px; }

/* ── Hero price block ─────────────────────────────────────────── */
.tc-price-hero {
    background: var(--bg-3);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 6px;
    box-shadow: 3px 3px 0 var(--line-2);
    position: relative;
    overflow: hidden;
}
.tc-price-hero::before {
    /* faint sparkline-style gradient sweep — adds life w/o real data */
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            currentColor 100%
        );
    opacity: 0.06;
    pointer-events: none;
}
.tc-price-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
}
.tc-price-row { display: flex; align-items: baseline; gap: 8px; }
.tc-price-val {
    font-family: var(--font-display);
    font-size: 32px; font-weight: 800;
    color: var(--c-text-strong);
    letter-spacing: -0.03em;
    line-height: 1;
}
.tc-price-unit {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 700;
    color: var(--c-text-soft);
    letter-spacing: 0.04em;
}
.tc-floor-growth-pill {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 800;
    letter-spacing: 0.06em;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}
.tc-floor-growth-pill.up   { background: var(--lime); color: #000 !important; }
.tc-floor-growth-pill.down { background: var(--red);  color: #fff !important; }
.tc-floor-growth-pill.flat { background: var(--surface-2); color: var(--c-text-strong); }
.tc-fg-arrow { font-size: 9px; }

/* ── Floor-vs-spot spread bar ─────────────────────────────────── */
.tc-spread {
    display: flex; flex-direction: column; gap: 8px;
}
.tc-spread-eyebrow {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
}
.tc-spread-spread { color: var(--lime-bright); font-weight: 800; }
.tc-spread-track {
    position: relative;
    height: 14px;
    background: var(--bg-3);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    overflow: visible;
}
.tc-spread-fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, var(--lime) 0%, var(--lime-bright) 100%);
    border-radius: var(--radius-pill);
    transition: width 0.6s var(--ease-back-out);
}
.tc-spread-cap-floor, .tc-spread-cap-spot {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    z-index: 2;
}
.tc-spread-cap-floor { left: 0; background: var(--lime-bright); }
.tc-spread-cap-spot  { left: 100%; background: var(--cyan-bright); }
.tc-spread-labels {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    color: var(--c-text-soft);
    letter-spacing: 0.04em;
}
.tc-spread-side { display: flex; flex-direction: column; gap: 2px; }
.tc-spread-side.tc-spread-right { text-align: right; }
.tc-spread-l {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--t-track-eyebrow);
    color: var(--c-text-soft);
}
.tc-spread-v {
    font-weight: 700;
    color: var(--c-text-strong);
}
.tc-spread-side:first-child .tc-spread-v { color: var(--lime-bright); }
.tc-spread-side:last-child  .tc-spread-v { color: var(--cyan-bright); }

/* ── Inline mini-stats strip ──────────────────────────────────── */
.tc-mini {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.tc-mini-cell {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.tc-mini-l {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
    line-height: 1;
}
.tc-mini-v {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    color: var(--c-text-strong);
    letter-spacing: -0.01em;
    line-height: 1.1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Chunky graduation milestone bar ──────────────────────────── */
.tc-grad {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px;
    background: var(--bg-3);
    border: 2px solid var(--ink);
    border-radius: var(--radius-2);
    box-shadow: 3px 3px 0 var(--ink);
}
.tc-grad-head {
    display: flex; justify-content: space-between; align-items: baseline;
}
.tc-grad-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
}
.tc-grad-pct {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--amber-bright);
    letter-spacing: -0.02em;
    line-height: 1;
}
.tc-grad-track {
    position: relative;
    height: 12px;
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    overflow: visible;
}
.tc-grad-fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, var(--amber) 0%, var(--lime) 100%);
    border-radius: var(--radius-pill);
    transition: width 0.7s var(--ease-back-out);
}
.tc-grad-tick {
    position: absolute; top: -4px; bottom: -4px;
    width: 3px;
    background: var(--ink);
    transform: translateX(-50%);
    z-index: 2;
}
.tc-grad-rider {
    position: absolute; top: 50%;
    transform: translate(-50%, -50%);
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--amber-bright);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    z-index: 3;
    transition: left 0.7s var(--ease-back-out);
}
.tc-grad-meta {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
}

/* ── Platform badge — repositioned for new card layout ────────── */
.token-card-athn .tc-platform-badge {
    align-self: flex-start;
    margin-bottom: -4px;
}

.tc-name {
    font-family: var(--font-display);
    font-size: var(--t-h3-size);
    font-weight: 800;
    color: var(--c-text-strong);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.tc-ticker {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    letter-spacing: var(--t-track-eyebrow);
    color: var(--c-text-soft);
    text-transform: uppercase;
    font-weight: 600;
}
.tc-icon {
    width: 60px; height: 60px; border-radius: var(--radius-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 34px;
    background: var(--surface-3);
    border: 2px solid currentColor;
    transition: transform .25s var(--ease-pop);
    color: var(--ink);
}
.token-card:hover .tc-icon {
    transform: rotate(-12deg) scale(1.12);
    animation: bounceIcon 0.9s var(--ease-elastic) infinite;
}
@keyframes bounceIcon {
    0%   { transform: rotate(-12deg) scale(1.12); }
    40%  { transform: rotate(8deg) scale(1.18); }
    70%  { transform: rotate(-4deg) scale(1.10); }
    100% { transform: rotate(-12deg) scale(1.12); }
}

/* ── Detail-page price chart panel ────────────────────────────────── */
.pcp {
    background: var(--surface);
    border: 2px solid var(--ink);
    border-radius: var(--radius-3);
    box-shadow: 6px 6px 0 var(--cyan-bright);
    padding: 22px 22px 18px;
    display: flex; flex-direction: column; gap: 14px;
    margin-bottom: 24px;
}
.pcp-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 18px; flex-wrap: wrap;
}
.pcp-head-l {
    display: flex; flex-direction: column; gap: 10px;
}
.pcp-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-strong);
}
.pcp-legend {
    display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.pcp-legend-cell {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
}
.pcp-leg-swatch {
    display: inline-block;
    width: 18px; height: 3px; border-radius: 2px;
}
.pcp-leg-floor { background: var(--lime-bright); }
.pcp-leg-spot  { background: var(--cyan-bright); }
.pcp-leg-grad  { background: var(--amber-bright); height: 0; border-top: 2px dashed var(--amber-bright); width: 18px; }
.pcp-leg-l { font-weight: 700; color: var(--c-text-soft); }
.pcp-leg-v { font-weight: 800; color: var(--c-text-strong); }

.pcp-delta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 800;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}
.pcp-delta.up   { background: var(--lime); color: #000 !important; }
.pcp-delta.down { background: var(--red);  color: #fff !important; }
.pcp-delta.flat { background: var(--surface-3); color: var(--c-text-strong); }

.pcp-chart {
    width: 100%;
    background: var(--bg-3);
    border: 2px solid var(--line-2);
    border-radius: var(--radius-2);
    padding: 12px 6px 6px;
    overflow: hidden;
}
.pricechart {
    width: 100%; height: auto; display: block;
}

.pcp-foot {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
}
.pcp-foot-r { color: var(--lime-bright); }

@media (max-width: 720px) {
    .pcp-head { flex-direction: column; align-items: flex-start; }
    .pcp-legend { gap: 12px; }
}

/* sparkline class kept for reuse but not currently used on cards */
.sparkline { width: 100%; display: block; }
.sparkline-empty { opacity: 0.6; }

/* ── Graduated card states ────────────────────────────────────────── */
.tc-graduated-badge {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--radius-pill);
    background: var(--amber-bright);
    color: #000 !important;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    margin-bottom: -4px;
}
.token-card:has(.tc-graduated-badge) {
    border-color: var(--amber-bright) !important;
    box-shadow: 6px 6px 0 var(--amber-bright) !important;
}
.tc-graduated {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255,177,75,0.10), rgba(255,177,75,0.02));
    border: 2px solid var(--amber-bright);
    border-radius: var(--radius-2);
    box-shadow: 3px 3px 0 var(--amber-bright);
}
.tc-graduated-head {
    display: flex; justify-content: space-between; align-items: center;
}
.tc-graduated-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
}
.tc-graduated-pill {
    display: inline-flex; align-items: center;
    padding: 4px 12px; border-radius: var(--radius-pill);
    background: var(--amber-bright);
    color: #000 !important;
    border: 2px solid var(--ink);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: var(--t-track-eyebrow);
}
.tc-graduated-meta {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-strong);
}

.tc-platform-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--radius-pill);
    background: var(--amber-bright);
    color: #000 !important;
    border: 2px solid var(--ink);
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--t-track-eyebrow);
    box-shadow: 2px 2px 0 var(--ink);
}
.tc-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}
.tc-floor-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--lime);
    box-shadow: none;
    margin-right: 6px;
}
.tc-floor-growth {
    color: var(--lime-bright);
    font-family: var(--font-mono);
    font-size: var(--t-mono-sm-size);
    font-weight: 700;
}
.tc-grad {
    display: flex; flex-direction: column; gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.tc-fee-split {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: var(--radius-1);
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 600;
    letter-spacing: var(--t-track-eyebrow);
    color: var(--c-text-default);
    text-transform: uppercase;
}

/* ── Activity feed ───────────────────────────────────────────────────── */

.activity-feed {
    background: var(--surface);
    border: 2px solid var(--purple);
    border-radius: var(--radius-3);
    padding: 22px;
    position: sticky; top: 100px;
    box-shadow: 6px 6px 0 var(--purple);
}
.af-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-strong);
}
.af-header-l { color: var(--c-text-strong); }
.af-header-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--lime-bright);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 12px var(--lime-bright);
    animation: livePulse 1.6s var(--ease-soft) infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}
.af-header h3 {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-strong);
}
.af-list {
    display: flex; flex-direction: column; gap: 0;
    max-height: 720px; overflow-y: auto; padding-right: 4px;
}
.af-list::-webkit-scrollbar { width: 6px; }
.af-list::-webkit-scrollbar-thumb {
    background: var(--surface-3); border-radius: 3px;
}
.af-list::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* Activity row — lib uses BEM single-word "activityrow" */
/* ── Custom activity row — token emoji is the icon, kind is the badge ── */
.af-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "icon primary  time"
        "icon secondary time";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 12px 6px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: background .2s var(--ease-soft), padding .2s var(--ease-soft), transform .2s var(--ease-pop);
    border-radius: var(--radius-1);
}
.af-row:last-child { border-bottom: none; }
.af-row:hover {
    background: rgba(255,255,255,0.04);
    padding-left: 12px;
    transform: translateX(2px);
}
.af-icon-wrap {
    grid-area: icon;
    position: relative;
    width: 36px; height: 36px;
}
.af-icon {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: var(--surface-2);
    border: 2px solid var(--ink);
    border-radius: 10px;
    font-size: 18px; line-height: 1;
    box-shadow: 2px 2px 0 var(--ink);
}
.af-icon-img {
    object-fit: contain; object-position: center;
    background: transparent;
    padding: 3px;
}
.af-kind-badge {
    position: absolute;
    bottom: -4px; right: -6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    border: 2px solid var(--ink);
    color: #000 !important;
    line-height: 1;
}
.af-kind-buy      { background: var(--lime-bright); }
.af-kind-sell     { background: var(--red);  color: #fff !important; }
.af-kind-stake    { background: var(--purple-bright); color: #fff !important; }
.af-kind-unstake  { background: var(--surface-3); color: #fff !important; }
.af-kind-penalty  { background: var(--pink); color: #fff !important; }
.af-kind-create   { background: var(--cyan-bright); }
.af-kind-graduate { background: var(--amber-bright); }

.af-row-body {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.af-row-primary {
    grid-area: primary;
    display: inline-flex; align-items: baseline; gap: 6px;
    font-size: var(--t-mono-size);
    color: var(--c-text-strong);
    font-weight: 700;
    letter-spacing: 0.04em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-row-ticker { font-weight: 800; }
.af-row-dot { color: var(--c-text-soft); font-weight: 400; }
.af-row-amount { font-weight: 700; color: var(--c-text-strong); }
.af-row-secondary {
    grid-area: secondary;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--c-text-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-row-time {
    grid-area: time;
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
    align-self: center;
}

.web3-activityrow {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "icon primary  time"
        "icon secondary time";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 12px 6px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--t-mono-size);
    cursor: pointer;
    transition: background .2s var(--ease-soft), padding .2s var(--ease-soft), transform .2s var(--ease-pop);
    border-radius: var(--radius-1);
}
.web3-activityrow:last-child { border-bottom: none; }
.web3-activityrow:hover {
    background: rgba(59,130,246,0.06);
    padding-left: 12px;
    transform: translateX(2px);
}
.web3-activityrow__icon {
    grid-area: icon;
    width: 30px; height: 30px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    font-size: 13px; line-height: 1;
    color: var(--ink-2);
}
.web3-activityrow--buy      .web3-activityrow__icon { color: var(--lime-bright);  border-color: rgba(34,197,94,0.4);   background: rgba(34,197,94,0.10);   box-shadow: none; }
.web3-activityrow--sell     .web3-activityrow__icon { color: var(--red-bright);   border-color: rgba(239,68,68,0.4);   background: rgba(239,68,68,0.10);   box-shadow: none; }
.web3-activityrow--stake    .web3-activityrow__icon { color: var(--purple-bright);border-color: rgba(168,85,247,0.4);  background: rgba(168,85,247,0.10);  box-shadow: none; }
.web3-activityrow--unstake  .web3-activityrow__icon { color: var(--ink-2);        border-color: var(--line-3); }
.web3-activityrow--penalty  .web3-activityrow__icon { color: var(--pink-bright);  border-color: rgba(236,72,153,0.4);  background: rgba(236,72,153,0.10);  box-shadow: none; }
.web3-activityrow--create   .web3-activityrow__icon { color: var(--cyan-bright);  border-color: rgba(34,211,238,0.4);  background: rgba(34,211,238,0.10);  box-shadow: none; }
.web3-activityrow--graduate .web3-activityrow__icon { color: var(--amber-bright); border-color: rgba(245,158,11,0.5);  background: rgba(245,158,11,0.12);  box-shadow: none; }
.web3-activityrow--claim    .web3-activityrow__icon { color: var(--lime-bright);  border-color: rgba(34,197,94,0.4);   background: rgba(34,197,94,0.10);   box-shadow: none; }

.web3-activityrow__primary {
    grid-area: primary;
    color: var(--c-text-strong);
    font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.web3-activityrow__secondary {
    grid-area: secondary;
    color: var(--c-text-soft);
    font-size: var(--t-eyebrow-sm-size);
    letter-spacing: 0.04em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.web3-activityrow__time {
    grid-area: time;
    color: var(--c-text-muted);
    font-size: var(--t-eyebrow-sm-size);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    align-self: center; justify-self: end; white-space: nowrap;
}

/* ── Flywheel ────────────────────────────────────────────────────────── */

.flywheel {
    max-width: var(--max-w); margin: 0 auto;
    padding: 64px 40px 96px;
}
.fw-title {
    font-family: var(--font-display);
    font-size: 36px; font-weight: 800;
    text-align: center; margin-bottom: 12px;
    color: var(--c-text-strong);
    letter-spacing: -0.03em;
}
.fw-title::after {
    content: " 🔁";
    display: inline-block;
    transform-origin: center;
    animation: spinSlow 4.8s var(--ease-rotate) infinite;
}
@keyframes spinSlow {
    to { transform: rotate(360deg); }
}
.flywheel > p {
    text-align: center;
    color: var(--c-text-default);
    max-width: 620px;
    margin: 0 auto 48px;
    font-family: var(--font-body);
    font-size: var(--t-body-size);
    line-height: 1.55;
}
/* Flex with wrap so the steps reflow at any viewport width — no more text clipping. */
.fw-steps {
    display: flex; flex-wrap: wrap; align-items: stretch;
    justify-content: center; gap: 14px;
}
.fw-step {
    flex: 1 1 180px;
    min-width: 180px; max-width: 240px;
    background: var(--surface);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
    padding: 22px 18px;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
    transition: transform .25s var(--ease-pop), border-color .2s var(--ease-soft);
    box-shadow: 5px 5px 0 var(--line-2);
    /* Default sticker tilt — every other card leans the other way for character. */
    transform: rotate(-0.6deg);
}
.fw-step:nth-child(4n+3) { transform: rotate(0.6deg); }
.fw-step:hover {
    transform: rotate(0deg) scale(1.04);
    animation: wobbleCute 0.6s var(--ease-elastic);
}
@keyframes wobbleCute {
    0%   { transform: rotate(0deg) scale(1.04); }
    25%  { transform: rotate(-2deg) scale(1.05); }
    50%  { transform: rotate(2deg) scale(1.06); }
    75%  { transform: rotate(-1deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1.04); }
}
/* Per-card color identity — each step is its own little sticker. */
.fw-step:nth-child(odd)  { border-color: var(--cyan);   box-shadow: 5px 5px 0 var(--cyan); }
.fw-step:nth-child(even) { border-color: var(--pink);   box-shadow: 5px 5px 0 var(--pink); }
.fw-step:nth-child(4n+3) { border-color: var(--lime);   box-shadow: 5px 5px 0 var(--lime); }
.fw-step:nth-child(4n+5) { border-color: var(--amber);  box-shadow: 5px 5px 0 var(--amber); }
.fw-step:nth-child(4n+7) { border-color: var(--purple); box-shadow: 5px 5px 0 var(--purple); }
.fw-step:hover           { box-shadow: 0 0 0 transparent; }

.fw-num {
    font-family: var(--font-display);
    font-size: 44px; font-weight: 800;
    color: var(--c-text-strong);
    line-height: 1;
    letter-spacing: -0.04em;
    display: inline-block;
    transition: transform .25s var(--ease-pop);
}
.fw-step:nth-child(odd)  .fw-num { color: var(--cyan-bright); }
.fw-step:nth-child(even) .fw-num { color: var(--pink-bright); }
.fw-step:nth-child(4n+3) .fw-num { color: var(--lime-bright); }
.fw-step:nth-child(4n+5) .fw-num { color: var(--amber-bright); }
.fw-step:nth-child(4n+7) .fw-num { color: var(--purple-bright); }
.fw-step:hover .fw-num { transform: scale(1.18) rotate(-6deg); }

.fw-step h4 {
    color: var(--c-text-strong);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.01em;
    text-transform: none;
    line-height: 1.25;
}
.fw-step p {
    color: var(--c-text-soft);
    font-size: var(--t-body-sm-size);
    line-height: 1.5;
}
.fw-step span:not(.fw-num) {
    color: var(--c-text-strong);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* Arrows: hide on narrow widths since the flex wraps. Make them cute on wide. */
.fw-arrow {
    align-self: center; color: var(--ink-4);
    font-size: 22px; font-weight: 700;
    flex: 0 0 auto;
    animation: arrowFloat 1.4s var(--ease-quart-out) infinite alternate;
}
@keyframes arrowFloat {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
@media (max-width: 900px) {
    .fw-arrow { display: none; }
    .fw-step { max-width: none; }
}

/* ── Floor info / Penalty / Trade / Staking — sticker panels ─────────── */

.floor-info, .penalty-preview, .trade-panel, .staking-panel {
    background: var(--surface);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-3);
    padding: 22px;
    position: relative;
    box-shadow: 6px 6px 0 var(--line-2);
}
.floor-info  { border-color: var(--lime);   box-shadow: 6px 6px 0 var(--lime); }
.penalty-preview { border-color: var(--red); box-shadow: 6px 6px 0 var(--red); }
.trade-panel { border-color: var(--cyan);   box-shadow: 6px 6px 0 var(--cyan); }
.staking-panel { border-color: var(--purple); box-shadow: 6px 6px 0 var(--purple); }

.fi-header, .tp-fee-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
}
.fi-title, .tp-fee-header > h4 {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 600;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-strong);
}
.fi-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--t-track-eyebrow);
    background: var(--lime);
    /* Filled pill — text colour locked. Never override via utility classes. */
    color: #000 !important;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}
.fi-body { display: flex; flex-direction: column; gap: 12px; }
.fi-stats {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
    padding-top: 14px; border-top: 1px solid var(--line);
}
.fi-stat { display: flex; flex-direction: column; gap: 4px; }
.fi-sl {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    text-transform: uppercase;
    letter-spacing: var(--t-track-eyebrow);
    color: var(--c-text-soft);
    font-weight: 600;
}
.fi-sv {
    font-family: var(--font-display);
    font-size: var(--t-display-sm-size);
    color: var(--c-text-strong);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}
.fi-sv.amber { color: var(--amber-bright); }
.fi-sv.green { color: var(--lime-bright); }
.fi-sv.blue  { color: var(--blue-bright); }
.fi-note {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.fi-note-line {
    font-family: var(--font-mono);
    font-size: var(--t-mono-sm-size);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--c-text-default);
    line-height: 1.4;
}

/* ── Floor-protection hero — chunky spread block, panel anchor ──── */
.fi-hero {
    display: flex; flex-direction: column; gap: 18px;
    padding: 22px 22px 26px;
    background: var(--bg-3);
    border: 2px solid var(--ink);
    border-radius: var(--radius-2);
    box-shadow: 4px 4px 0 var(--ink);
    position: relative;
    overflow: hidden;
}
.fi-hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 0% 50%, rgba(132, 255, 138, 0.08), transparent 40%),
        radial-gradient(circle at 100% 50%, rgba(70, 235, 255, 0.06), transparent 40%);
    pointer-events: none;
}
.fi-hero > * { position: relative; }

.fi-hero-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}
.fi-hero-side {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.fi-hero-spot { align-items: flex-end; text-align: right; }
.fi-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
    line-height: 1;
}
.fi-hero-floor .fi-hero-eyebrow { color: var(--lime-bright); }
.fi-hero-spot  .fi-hero-eyebrow { color: var(--cyan-bright); }
.fi-hero-val {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--c-text-strong);
    overflow: hidden; text-overflow: ellipsis;
}
.fi-hero-floor .fi-hero-val { color: var(--lime-bright); }
.fi-hero-spot  .fi-hero-val { color: var(--cyan-bright); }
.fi-hero-unit {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
    line-height: 1;
}

.fi-hero-spread {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 0 12px;
}
.fi-hero-spread-pct {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--c-text-strong);
    line-height: 1;
}
.fi-hero-spread-l {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.fi-hero-track {
    position: relative;
    height: 18px;
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    overflow: visible;
    margin: 6px 14px 14px;
}
.fi-hero-fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, var(--lime) 0%, var(--lime-bright) 100%);
    border-radius: var(--radius-pill);
    transition: width 0.7s var(--ease-back-out);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
.fi-hero-cap {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    z-index: 2;
}
.fi-hero-cap-floor { left: 0;    background: var(--lime-bright); }
.fi-hero-cap-spot  { left: 100%; background: var(--cyan-bright); }
.fi-hero-rider {
    position: absolute; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    transition: left 0.7s var(--ease-back-out);
    pointer-events: none;
}
.fi-hero-rider-pct {
    display: inline-block;
    padding: 4px 10px;
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: var(--radius-pill);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--lime-bright);
    white-space: nowrap;
}

.fi-hero-foot {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--t-mono-sm-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
}
.fi-hero-foot-arrow { color: var(--lime-bright); font-weight: 800; }

@media (max-width: 720px) {
    .fi-hero-head { grid-template-columns: 1fr; gap: 12px; }
    .fi-hero-spot { align-items: flex-start; text-align: left; }
    .fi-hero-spread { padding: 0; }
    .fi-hero-val { font-size: 26px; }
    .fi-hero-spread-pct { font-size: 30px; }
}

/* ── Token Detail page ───────────────────────────────────────────────── */

.detail {
    max-width: var(--max-w); margin: 0 auto;
    padding: 0 40px 80px;
}
.detail-header {
    display: flex; justify-content: space-between; align-items: end; gap: 32px;
    padding: 24px 0 28px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 32px;
}
.dh-left { display: flex; gap: 22px; align-items: center; }
.dh-icon {
    width: 84px; height: 84px; border-radius: var(--radius-3);
    display: flex; align-items: center; justify-content: center;
    font-size: 44px;
    background: var(--surface);
    border: 3px solid var(--cyan);
    box-shadow: 6px 6px 0 var(--cyan);
    transform-origin: center;
    animation: gentleBob 3.2s var(--ease-quart-out) infinite alternate;
}
.dh-icon-img {
    object-fit: contain; object-position: center;
    background: transparent;
    padding: 10px;
}
.dh-icon:hover {
    animation: bounceIcon 0.7s var(--ease-elastic) infinite;
}
@keyframes gentleBob {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50%      { transform: rotate(2deg) translateY(-4px); }
}
.dh-name {
    font-size: 44px;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--c-text-strong);
}
.dh-ticker {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
    margin-top: 4px;
    font-weight: 600;
}
.dh-creator {
    font-family: var(--font-mono);
    font-size: var(--t-mono-sm-size);
    color: var(--c-text-muted);
    margin-top: 6px;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.dh-right { text-align: right; }
.dh-price {
    font-family: var(--font-display);
    font-size: var(--t-display-xl-size);
    font-weight: 800;
    color: var(--cyan-bright);
    letter-spacing: -0.04em;
    line-height: 1;
}
.dh-floor {
    font-family: var(--font-mono);
    font-size: var(--t-mono-sm-size);
    font-weight: 700;
    color: var(--lime-bright);
    margin-top: 8px;
    letter-spacing: 0.04em;
}
.detail-body {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}
.detail-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.detail-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.detail-body > .trade-panel {
    align-self: start;
    position: sticky;
    top: 96px;
}

.detail-stats {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.ds {
    background: var(--surface);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
    padding: 16px;
    display: flex; flex-direction: column; gap: 6px;
    box-shadow: 4px 4px 0 var(--line-2);
    transition: transform .2s var(--ease-pop), box-shadow .2s var(--ease-soft);
}
.detail-stats > .ds:nth-child(4n+1) { border-color: var(--cyan);   box-shadow: 4px 4px 0 var(--cyan); }
.detail-stats > .ds:nth-child(4n+2) { border-color: var(--pink);   box-shadow: 4px 4px 0 var(--pink); }
.detail-stats > .ds:nth-child(4n+3) { border-color: var(--lime);   box-shadow: 4px 4px 0 var(--lime); }
.detail-stats > .ds:nth-child(4n)   { border-color: var(--amber);  box-shadow: 4px 4px 0 var(--amber); }
.detail-stats > .ds:nth-child(5)    { border-color: var(--purple); box-shadow: 4px 4px 0 var(--purple); }
.ds:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 currentColor;
}
.ds:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 currentColor;
}
.ds-label {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--t-track-eyebrow);
    color: var(--c-text-soft);
}
.ds > span:not(.ds-label) {
    font-family: var(--font-display);
    font-size: var(--t-display-md-size);
    color: var(--c-text-strong);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}
.ds > .ds-val.amber, .ds-val.amber { color: var(--amber-bright); }
.ds > .ds-val.green, .ds-val.green { color: var(--lime-bright); }
.ds > .ds-val.red,   .ds-val.red   { color: var(--red-bright); }
.ds > .ds-val.blue,  .ds-val.blue  { color: var(--blue-bright); }
.ds > .ds-val.trend-up,      .ds-val.trend-up      { color: var(--lime-bright); }
.ds > .ds-val.trend-down,    .ds-val.trend-down    { color: var(--red-bright); }
.ds > .ds-val.trend-neutral, .ds-val.trend-neutral { color: var(--c-text-default); }

/* Graduation panel */
.grad-bar-detail {
    background: var(--surface);
    border: 2px solid var(--amber);
    border-radius: var(--radius-3);
    padding: 24px;
    box-shadow: 6px 6px 0 var(--amber);
    position: relative; overflow: hidden;
}
.gbd-header > span:first-child::before {
    content: "🎓 ";
    display: inline-block;
    margin-right: 4px;
    transform-origin: bottom center;
    animation: bobbleEmoji 2.4s var(--ease-elastic) infinite alternate;
}
@keyframes bobbleEmoji {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50%      { transform: rotate(8deg) translateY(-2px); }
}
.gbd-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
}
.gbd-header > h4,
.gbd-header > span:first-child {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-strong);
}
.gbd-pct {
    font-family: var(--font-display);
    font-size: var(--t-display-lg-size);
    font-weight: 800;
    color: var(--amber-bright);
    letter-spacing: -0.03em;
    line-height: 1;
}
.gbd-track {
    position: relative; height: 16px;
    background: var(--bg-3);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.gbd-fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: var(--amber);
    border-radius: var(--radius-pill);
}
.gbd-fill::after {
    content: ""; position: absolute; right: -4px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--amber-bright);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--bg-3);
}
.gbd-labels {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    color: var(--c-text-soft);
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    font-weight: 700;
}
.gbd-labels > span:last-child { color: var(--amber-bright); font-weight: 800; }

/* ── Trade panel ─────────────────────────────────────────────────────── */

.trade-panel { padding: 0; overflow: hidden; }
.tp-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-bottom: 2px solid var(--ink);
    background: var(--bg-3);
}
.tp-tabs button {
    background: transparent; border: none;
    padding: 18px 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-soft);
    cursor: pointer;
    border-bottom: 5px solid transparent; margin-bottom: -2px;
    transition: color .15s var(--ease-soft), border-color .15s var(--ease-soft),
                background .15s var(--ease-soft);
}
.tp-tabs button:hover { color: var(--c-text-strong); }
.tp-tabs button.active {
    color: var(--bg);
    background: var(--cyan);
    border-bottom-color: var(--ink);
}

.tp-form { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.tp-field { display: flex; flex-direction: column; gap: 8px; }
.tp-field label, .cf-field label {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 600;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
}
.tp-field input, .cf-field input,
.web3-amount-input input, .web3-input {
    background: var(--bg-3);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
    padding: 16px 18px;
    color: var(--c-text-strong);
    font-family: var(--font-mono);
    font-size: var(--t-display-sm-size);
    font-weight: 600;
    transition: border-color .15s var(--ease-soft), box-shadow .15s var(--ease-soft);
    width: 100%;
    box-shadow: 3px 3px 0 var(--line-2);
}
.tp-field input:focus, .cf-field input:focus,
.web3-amount-input input:focus, .web3-input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 3px 3px 0 var(--cyan);
}

.tp-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tp-preset {
    background: var(--surface);
    border: 2px solid var(--line-3);
    color: var(--c-text-default);
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--line-2);
    transition: all .2s var(--ease-pop);
}
.tp-preset:hover {
    color: var(--bg);
    border-color: var(--ink);
    background: var(--cyan);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ink);
}

.tp-info-row, .tp-us-row, .tp-pe-row, .cf-br {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--t-mono-size);
    color: var(--c-text-soft);
}
.tp-info-row:first-child, .cf-br:first-child { border-top: none; }
.tp-info-row > span:last-child, .cf-br > span:last-child { color: var(--c-text-strong); font-weight: 700; }
.cf-br > span.green { color: var(--lime-bright); }
.cf-br > span.blue  { color: var(--blue-bright); }
.cf-br > span.amber { color: var(--amber-bright); }

.tp-note, .cs-note {
    font-family: var(--font-mono);
    font-size: var(--t-mono-sm-size);
    color: var(--c-text-default);
    letter-spacing: 0.02em;
    line-height: 1.6;
    padding: 12px 14px;
    background: rgba(34, 211, 238, 0.06);
    border-left: 3px solid var(--cyan);
    border-radius: var(--radius-1);
}

/* Sell-fee bar */
.tp-fee-display {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-2);
    padding: 18px;
    display: flex; flex-direction: column; gap: 14px;
}
.tp-fee-header { margin-bottom: 4px; }
.tp-fee-val {
    font-family: var(--font-display); font-size: 28px; font-weight: 800;
    color: var(--amber-bright);
    letter-spacing: -0.02em;
}
/* Sell-fee bar — track is the tier landscape (lime=low → amber=mid → red=high
   from left to right, matching label order: "1% day 40+" left, "5% day 0" right).
   The fill bar from elm is hidden; marker is a black-dot pointer with a tooltip
   label above showing the exact percentage. */
.tp-fee-bar-track {
    position: relative; height: 14px;
    background: linear-gradient(90deg, var(--lime) 0%, var(--amber) 55%, var(--red) 100%);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    overflow: visible;
    margin: 26px 0 4px;
}
.tp-fee-bar {
    /* The fill div from elm is unused in this design — the gradient track
       carries the tier visual. */
    display: none;
}
.tp-fee-marker {
    position: absolute; top: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--bg);
    border: 3px solid var(--ink);
    z-index: 2;
}
/* Tooltip with the exact % above the dot. */
.tp-fee-marker > span {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-mono); font-size: 11px; font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--radius-1);
    white-space: nowrap;
    letter-spacing: 0.04em;
}
.tp-fee-marker > span::after {
    content: "";
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ink);
}
.tp-fee-labels {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    color: var(--ink-4); letter-spacing: 0.1em; text-transform: uppercase;
    margin-top: 8px;
}
.tp-fee-note {
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--ink-3);
}

.tp-stake-info {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-2);
    padding: 18px;
    display: flex; flex-direction: column; gap: 14px;
}
.tp-stake-val {
    font-family: var(--font-display); font-size: 28px; font-weight: 800;
    color: var(--ink); letter-spacing: -0.02em;
}
/* The wrapper div around a slider — flex column so the slider and any
   sibling readout don't overlap. */
.tp-stake-slider {
    display: flex; flex-direction: column; gap: 12px;
    width: 100%;
}

/* The actual range input element. */
.lock-slider, input[type=range] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 10px;
    background: var(--bg-3);
    border-radius: var(--radius-pill);
    border: 2px solid var(--ink);
    outline: none;
    margin: 0;
}
.tp-stake-slider > input[type=range] { width: 100%; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--cyan);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    cursor: grab;
    transition: transform .2s var(--ease-pop), box-shadow .15s var(--ease-soft);
}
input[type=range]::-webkit-slider-thumb:hover {
    transform: translate(-1px, -1px) scale(1.08);
    background: var(--cyan-bright);
    box-shadow: 4px 4px 0 var(--ink);
}
input[type=range]::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--cyan);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    cursor: grab;
}

.tp-unstake-section { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.tp-us-header h4 { color: var(--ink-2); }
.tp-us-row { padding: 12px 0; }
.tp-us-stake {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-2);
    padding: 18px;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color .2s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.tp-us-stake:hover {
    border-color: var(--purple);
    box-shadow: 0 8px 24px var(--purple-glow);
}
.tp-us-empty {
    text-align: center; color: var(--ink-4);
    padding: 32px 0; font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.06em;
}
.tp-us-label {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-4);
}
.tp-us-val {
    font-family: var(--font-mono); font-size: 14px;
    color: var(--ink); font-weight: 600;
}
.tp-us-val.green { color: var(--lime-bright); }
.tp-us-val.blue  { color: var(--blue-bright); }

.tp-penalty-example {
    background: rgba(239, 68, 68, 0.05);
    border: 1px dashed rgba(239, 68, 68, 0.32);
    border-radius: var(--radius-2);
    padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.tp-pe-title {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.2em; color: var(--red-bright);
}
.tp-pe-row {
    padding: 6px 0; border-top: 1px dashed rgba(239, 68, 68, 0.22);
    font-size: 12px;
}
.tp-pe-row:first-of-type { border-top: none; }
.tp-pe-note {
    font-size: 11px; color: var(--ink-4); font-family: var(--font-mono);
}

.bt-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-2);
    margin-bottom: 12px;
}
.bt-title {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
}
.bt-amount {
    font-family: var(--font-display); font-size: 24px; font-weight: 700;
    color: var(--ink); letter-spacing: -0.02em;
}
.bt-amount.amber { color: var(--amber-bright); }
.bt-note {
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
}

.burst-trigger {
    display: flex; align-items: center; gap: 18px;
    padding: 16px 22px; border-radius: var(--radius-2);
    background: var(--surface);
    border: 2px solid var(--amber);
    color: var(--ink);
    box-shadow: 6px 6px 0 var(--amber);
    position: relative;
}
.burst-trigger::before {
    content: "🔥";
    font-size: 26px;
}

/* Color helpers — bright variants */
.amber { color: var(--amber-bright); }
.green { color: var(--lime-bright); }
.red   { color: var(--red-bright); }
.blue  { color: var(--blue-bright); }

.staking-panel { display: flex; flex-direction: column; gap: 14px; }

/* ── Create Token wizard ─────────────────────────────────────────────── */

.create {
    max-width: 720px; margin: 0 auto;
    padding: 56px 40px 96px;
}
.create-card {
    background: var(--surface);
    border: 3px solid var(--pink);
    border-radius: var(--radius-3);
    padding: 44px;
    box-shadow: 8px 8px 0 var(--pink);
    position: relative;
}
.create-card::before {
    content: "✨";
    position: absolute; top: -16px; right: -10px;
    font-size: 36px;
    transform-origin: center;
    animation: sparkleFloat 2.4s var(--ease-elastic) infinite alternate;
}
.create-card::after {
    content: "🚀";
    position: absolute; bottom: -22px; left: -14px;
    font-size: 32px;
    transform-origin: bottom center;
    animation: gentleBob 2.8s var(--ease-quart-out) infinite alternate;
}
@keyframes sparkleFloat {
    0%, 100% { transform: rotate(-12deg) scale(1); }
    50%      { transform: rotate(12deg) scale(1.15); }
}
.create-title {
    font-family: var(--font-display);
    font-size: 42px; font-weight: 800;
    margin-bottom: 8px; letter-spacing: -0.035em;
    color: var(--c-text-strong);
    line-height: 1;
}
.create-sub {
    color: var(--c-text-default);
    font-family: var(--font-body);
    font-size: var(--t-body-size);
    line-height: 1.55;
    margin-bottom: 32px;
}

.create-steps {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 36px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.cs {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--c-text-soft);
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
}
.cs.active { color: var(--c-text-strong); }
.cs-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line-3);
    font-family: var(--font-display);
    font-size: 13px; font-weight: 800;
    color: var(--c-text-soft);
}
.cs.active .cs-num {
    background: var(--cyan);
    color: var(--bg);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}
.cs-line {
    flex: 1; height: 3px;
    background: var(--line-3);
    border-radius: var(--radius-pill);
}

.create-form { display: flex; flex-direction: column; gap: 22px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-upload {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--bg-3);
    border: 2px dashed var(--line-3);
    border-radius: var(--radius-2);
    padding: 40px 20px;
    text-align: center;
    color: var(--c-text-soft);
    font-family: var(--font-mono);
    font-size: var(--t-mono-size);
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: border-color .2s var(--ease-soft), background .2s var(--ease-soft);
}
.cf-upload:hover {
    border-color: var(--cyan);
    background: rgba(34, 211, 238, 0.04);
    color: var(--cyan-bright);
}
.cf-upload-sub {
    font-size: var(--t-eyebrow-sm-size);
    color: var(--c-text-muted);
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    font-weight: 600;
}

.cf-breakdown, .cf-whatyouget {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-2);
    padding: 20px;
    display: flex; flex-direction: column; gap: 8px;
}
.cf-breakdown h4, .cf-whatyouget h4 {
    color: var(--ink-2); margin-bottom: 6px;
}
.cf-feature {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--t-mono-sm-size);
    font-weight: 600;
    color: var(--c-text-default);
    letter-spacing: 0.02em;
    padding: 5px 0;
}
.cf-check {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--lime);
    color: var(--bg); font-size: 12px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--ink);
    flex-shrink: 0;
}

.cf-buttons { display: flex; gap: 12px; }
.cf-buttons button { flex: 1; }

.create-success {
    text-align: center;
    align-items: center;
}
.cs-icon {
    font-size: 96px; line-height: 1;
    animation: bounce 1.2s var(--ease-bounce) infinite alternate;
    transform-origin: bottom center;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-12px) rotate(3deg); }
}
.cs-summary {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-2);
    padding: 22px;
    display: flex; flex-direction: column; gap: 8px;
}
.launch-btn { width: 100%; padding: 18px; font-size: 16px; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.footer {
    max-width: var(--max-w); margin: 60px auto 0;
    padding: 56px 40px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--c-text-soft);
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
}
.footer-version {
    color: var(--lime); font-weight: 700;
}

/* Live-stream status pill — sits next to the version stamp in the
   footer. The dot pulses when LIVE so the eye lands on it without
   shouting. RECONNECTING amber + OFFLINE red track the same WS
   lifecycle states surfaced by elm-web3-ports.js. */
.footer-live {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600;
}
.live-dot {
    width: 9px; height: 9px; border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.35);
}
.live-dot-on {
    background: #00FFB2;
    box-shadow: 0 0 0 2px rgba(0, 255, 178, 0.18);
    animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0, 255, 178, 0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(0, 255, 178, 0.05); }
}
.live-dot-warn    { background: #FFB347; }
.live-dot-off     { background: #FF6B6B; }
.live-dot-unknown { background: #888;    opacity: 0.4; }
.footer-live-label {
    font-size: 11px; letter-spacing: 2px;
}

/* ── TX toast — popping up from corner ───────────────────────────────── */

.web3-tx-toast {
    position: fixed; bottom: 28px; right: 28px;
    z-index: 100;
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 18px;
    border-radius: var(--radius-3);
    font-family: var(--font-mono); font-size: 13px; font-weight: 500;
    color: #FFFFFF; letter-spacing: 0.02em;
    background: rgba(20, 19, 44, 0.96);
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--cyan);
    width: 380px; max-width: calc(100vw - 56px);
    animation: toastIn 0.42s var(--ease-back-out) both;
    transform-origin: bottom right;
}
.web3-tx-toast-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; }
.web3-tx-toast-headline {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800; font-size: 14px; letter-spacing: 0.04em;
    color: #FFFFFF;
}
.web3-tx-toast-detail {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 12px; opacity: 0.85; color: #FFFFFF;
}
.web3-tx-toast-hash-row {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 2px;
}
.web3-tx-toast-hash {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    padding: 3px 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #FFFFFF;
}
.web3-tx-toast-hash-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    color: #FFFFFF; opacity: 0.85;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s var(--ease-soft), border-color .15s var(--ease-soft), opacity .15s;
}
.web3-tx-toast-hash-action:hover {
    background: rgba(57,255,128,0.10);
    border-color: rgba(57,255,128,0.45);
    opacity: 1;
}
.web3-tx-toast-err {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: #FFFFFF; opacity: 0.65;
    padding: 6px 8px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.28);
    border-radius: 6px;
    word-break: break-word;
    line-height: 1.4;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(40px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.web3-tx-toast.web3-tx-toast--pending {
    border-color: rgba(245,158,11,0.4);
    box-shadow: var(--shadow-2), 0 0 0 1px rgba(245,158,11,0.32);
}
.web3-tx-toast.web3-tx-toast--pending::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: var(--amber);
    box-shadow: none;
    animation: pulseDot 1.2s var(--ease-quart-out) infinite;
}
.web3-tx-toast.web3-tx-toast--pending  { box-shadow: 6px 6px 0 var(--amber); border-color: var(--ink); }
.web3-tx-toast.web3-tx-toast--confirmed{ box-shadow: 6px 6px 0 var(--lime);  border-color: var(--ink); }
.web3-tx-toast.web3-tx-toast--failed   { box-shadow: 6px 6px 0 var(--red);   border-color: var(--ink); animation: toastIn 0.42s var(--ease-back-out) both, juice-shake 0.5s var(--ease-elastic) 0.4s 1; }
.web3-tx-toast.web3-tx-toast--confirmed {
    border-color: rgba(34,197,94,0.4);
    box-shadow: var(--shadow-2), 0 0 0 1px rgba(34,197,94,0.32);
}
.web3-tx-toast.web3-tx-toast--confirmed::before {
    content: "✓"; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lime);
    color: var(--bg); font-weight: 800; font-size: 13px;
    border: 2px solid var(--ink);
}
.web3-tx-toast.web3-tx-toast--failed {
    border-color: rgba(239,68,68,0.4);
    box-shadow: var(--shadow-2), 0 0 0 1px rgba(239,68,68,0.32);
}
.web3-tx-toast.web3-tx-toast--failed::before {
    content: "✕"; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--red);
    color: var(--ink); font-weight: 800; font-size: 13px;
    border: 2px solid var(--ink);
}
.web3-tx-toast-dismiss {
    background: transparent; border: none; color: var(--ink-4);
    font-size: 18px; padding: 0 4px; cursor: pointer;
    transition: color .2s var(--ease-soft), transform .2s var(--ease-pop);
}
.web3-tx-toast-dismiss:hover { color: var(--ink); transform: rotate(90deg); }

/* Distinct tone for user-rejected (cancelled in wallet) — milder than a
   contract revert. */
.web3-tx-toast.web3-tx-toast--rejected {
    box-shadow: 6px 6px 0 var(--amber); border-color: var(--ink);
}
.web3-tx-toast.web3-tx-toast--rejected::before {
    content: "↺"; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--amber);
    color: var(--ink); font-weight: 800; font-size: 14px;
    border: 2px solid var(--ink);
}

.web3-tx-toast-spinner, .web3-tx-toast-spinner-sm {
    display: inline-block;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--line-2);
    border-top-color: var(--cyan-bright);
    border-right-color: var(--cyan);
    animation: spin 0.9s var(--ease-rotate) infinite;
}
.web3-tx-toast-spinner-sm { width: 12px; height: 12px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Showcase ────────────────────────────────────────────────────────── */

.showcase, .showcase-page {
    max-width: var(--max-w); margin: 0 auto;
    padding: 56px 40px 96px;
}
.showcase-page__hero { text-align: center; padding: 24px 0 48px; }
.showcase-page__hero h2 {
    font-size: 48px; font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.025em;
}
.showcase-page__hero h2::after {
    content: " 🎨";
    display: inline-block;
}
.showcase-page__lede {
    max-width: 640px; margin: 16px auto 0;
    color: var(--ink-3); font-size: 16px;
}
.showcase__section {
    margin-top: 36px;
    padding: 30px;
    background: var(--surface);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-3);
    box-shadow: 6px 6px 0 var(--line-2);
    position: relative;
}
.showcase__section:nth-child(odd)  { border-color: var(--cyan);   box-shadow: 6px 6px 0 var(--cyan); }
.showcase__section:nth-child(even) { border-color: var(--pink);   box-shadow: 6px 6px 0 var(--pink); }
.showcase__section:nth-child(3n)   { border-color: var(--lime);   box-shadow: 6px 6px 0 var(--lime); }
.showcase__section:nth-child(5n)   { border-color: var(--amber);  box-shadow: 6px 6px 0 var(--amber); }
.showcase__section:nth-child(7n)   { border-color: var(--purple); box-shadow: 6px 6px 0 var(--purple); }
.showcase__title {
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--cyan-bright);
    margin-bottom: 22px; padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.showcase__empty, .showcase-page__empty {
    text-align: center; color: var(--ink-4);
    padding: 56px;
    font-family: var(--font-mono); font-size: 13px;
    letter-spacing: 0.06em;
}
.showcase__hint {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    padding: 14px 18px;
    background: rgba(34,211,238,0.04);
    border-left: 3px solid var(--cyan);
    border-radius: var(--radius-1);
    margin-top: 22px;
}

/* ── Lib component classes — shared web3-* defaults ──────────────────── */

.web3-amount { font-family: var(--font-mono); font-feature-settings: 'tnum' on; color: var(--ink); }
.web3-price  { font-family: var(--font-mono); color: var(--ink); }
.web3-address {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--ink-2); letter-spacing: 0.04em;
}
.web3-address--short {
    background: rgba(255,255,255,0.04);
    padding: 4px 10px; border-radius: var(--radius-1);
    border: 1px solid var(--line-2);
}

.web3-wallet-button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: var(--radius-pill);
    background: var(--cyan);
    color: var(--bg);
    font-weight: 700; font-size: 13.5px;
    letter-spacing: 0.02em;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    cursor: pointer;
    transition: transform .15s var(--ease-pop), box-shadow .15s var(--ease-soft);
}
.web3-wallet-button:hover {
    background: var(--cyan-bright);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}
.web3-wallet-button:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}

.web3-status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    border: 1px solid var(--line-2);
    background: rgba(255,255,255,0.04);
}
.web3-status-badge--pending  { color: var(--amber-bright); border-color: rgba(245,158,11,0.4); box-shadow: none; }
.web3-status-badge--success  { color: var(--lime-bright);  border-color: rgba(34,197,94,0.4);  box-shadow: none; }
.web3-status-badge--error    { color: var(--red-bright);   border-color: rgba(239,68,68,0.4);  box-shadow: none; }

/* SupplyBar */
.web3-supply-bar { display: flex; flex-direction: column; gap: 6px; }
.web3-supply-bar__track {
    position: relative; height: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-pill); overflow: hidden;
}
.web3-supply-bar__fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: var(--cyan);
    border-radius: var(--radius-pill);
}
.web3-supply-bar__labels {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--ink-4); letter-spacing: 0.08em;
}

/* TrendIndicator */
.web3-trend {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.web3-trend--up      { color: var(--lime-bright); }
.web3-trend--down    { color: var(--red-bright); }
.web3-trend--neutral { color: var(--ink-3); }

.web3-stake-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-2);
    padding: 18px;
    display: flex; flex-direction: column; gap: 10px;
}

/* Lock period — lib uses single-word "lockperiod" with __slider, __readout, __penalty */
.web3-lockperiod, .web3-lock-period {
    display: flex; flex-direction: column; gap: 12px;
    align-items: stretch;
}
.web3-lockperiod__slider { width: 100%; }
.web3-lockperiod__readout {
    font-family: var(--font-display); font-size: 26px; font-weight: 800;
    color: var(--ink); letter-spacing: -0.02em;
    align-self: flex-start;
}
.web3-lockperiod__penalty {
    display: inline-flex; align-self: flex-start;
    padding: 5px 12px; border-radius: var(--radius-pill);
    background: var(--surface); color: var(--amber-bright);
    border: 2px solid var(--amber);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 2px 2px 0 var(--amber);
}

/* Legacy chip variant (kept compatible if any consumer passes the old structure). */
.web3-lock-period__chip {
    display: inline-flex; gap: 4px;
    padding: 5px;
    background: var(--surface);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-pill);
}
.web3-lock-period__chip button {
    background: transparent; border: none;
    padding: 7px 14px; border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase;
    transition: all .15s var(--ease-pop);
}
.web3-lock-period__chip button.active {
    background: var(--cyan);
    color: var(--bg);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}

.web3-hold-clock {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-2);
}

.web3-fee-breakdown {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px;
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-2);
    border: 1px solid var(--line-2);
}
.web3-fee-row {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
}
.web3-fee-row > span:last-child { color: var(--ink); font-weight: 600; }

.web3-slippage {
    display: inline-flex; gap: 4px; padding: 5px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-pill);
}
.web3-slippage button {
    background: transparent; border: none;
    padding: 7px 12px; border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--ink-3); letter-spacing: 0.04em;
    transition: all .2s var(--ease-pop);
}
.web3-slippage button.active {
    background: var(--purple);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}

.web3-stat-cell {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-2);
    padding: 16px;
    display: flex; flex-direction: column; gap: 4px;
    transition: transform .25s var(--ease-pop), border-color .2s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.web3-stat-cell:hover {
    transform: translateY(-3px);
    border-color: var(--blue);
    box-shadow: 0 8px 20px var(--blue-glow);
}
.web3-stat-cell__label {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4);
}
.web3-stat-cell__value {
    font-family: var(--font-mono); font-size: 18px;
    color: var(--ink); font-weight: 600;
}

.web3-trade-tabs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    border-bottom: 1px solid var(--line);
}
.web3-trade-tabs button {
    background: transparent; border: none; padding: 16px 8px;
    font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3); border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.web3-trade-tabs button.active {
    color: var(--cyan-bright);
    border-bottom-color: var(--cyan);
}

.web3-token-search {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    background: var(--bg-3);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
    box-shadow: 3px 3px 0 var(--line-2);
    transition: border-color .15s var(--ease-soft), box-shadow .15s var(--ease-soft);
}
.web3-token-search:focus-within {
    border-color: var(--cyan);
    box-shadow: 3px 3px 0 var(--cyan);
}
.web3-token-search input {
    background: transparent; border: none; outline: none;
    color: var(--ink); flex: 1;
    font-family: var(--font-mono); font-size: 14px;
}

.web3-progress-ring__bg { stroke: var(--surface-3); }
.web3-progress-ring__fg {
    stroke: var(--blue);
}

.web3-bonding-curve path {
    stroke: var(--cyan); fill: none; stroke-width: 2;
}

.web3-relative-time {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--ink-4); letter-spacing: 0.04em;
}

/* Pending overlay */
.web3-pending-overlay {
    position: fixed; inset: 0; z-index: 90;
    height: 100vh;
    height: 100dvh;
    background: rgba(10, 9, 24, 0.78);
    display: flex; align-items: center; justify-content: center;
}
.web3-pending-overlay__card {
    background: var(--surface);
    border: 3px solid var(--cyan);
    border-radius: var(--radius-3);
    padding: 40px 44px;
    box-shadow: 8px 8px 0 var(--cyan);
    text-align: center;
    display: flex; flex-direction: column; gap: 16px; align-items: center;
}

/* ── Canonical lib single-word BEM classes (sticker treatment) ───────── */
/* These match the actual class names emitted by the lib — supplybar,
   feebreakdown, stakecard, statcell, tokensearch, tradetabs, progressring,
   bondingcurve, relativetime, holdclock, trend. */

/* The lib renders `web3-supplybar__fill` and `__milestone` as direct children
   of `.web3-supplybar` (NOT inside `.web3-supplybar__track`). Those children
   are `position: absolute`, so the wrapper itself MUST be `position: relative`
   — otherwise the children escape to the next positioned ancestor (which in
   our consumer is `.token-card`) and render as full-height bars at left/right.
   This was the source of the "stupid vertical bars" on every card. */
.web3-supplybar {
    display: flex; flex-direction: column; gap: 6px;
    position: relative;
    height: 14px;
    background: var(--bg-3);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    overflow: visible;
}
.web3-supplybar__track {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    background: var(--bg-3);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.web3-supplybar__fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: var(--cyan);
    border-radius: var(--radius-pill);
    z-index: 1;
}
.web3-supplybar__milestone {
    position: absolute; top: -4px; bottom: -4px;
    width: 4px;
    background: var(--amber);
    border: 1px solid var(--ink);
    border-radius: 2px;
    transform: translateX(-50%);
    z-index: 2;
}
.web3-supplybar__label {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    text-align: left;
}
/* (label positioning is set above — keep typographic styles only) */
.web3-supplybar__label,
.web3-supplybar > .web3-supplybar__label {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--ink-3); letter-spacing: 0.06em;
}

.web3-feebreakdown {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px;
    background: var(--bg-3);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
}
.web3-feebreakdown__row {
    display: grid; grid-template-columns: 1fr auto auto auto;
    gap: 12px; align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 12.5px;
    color: var(--ink-2);
}
.web3-feebreakdown__row:last-child { border-bottom: none; }
.web3-feebreakdown__label { color: var(--ink); font-weight: 500; }
.web3-feebreakdown__recipient {
    color: var(--ink-3); font-size: 11px;
    font-family: var(--font-mono);
}
.web3-feebreakdown__bps {
    color: var(--cyan-bright); font-weight: 700;
}
.web3-feebreakdown__amount {
    color: var(--ink); font-weight: 600;
}
.web3-feebreakdown__total {
    margin-top: 6px; padding-top: 10px;
    border-top: 2px solid var(--ink);
    font-weight: 800; color: var(--ink);
}

.web3-stakecard {
    background: var(--surface);
    border: 2px solid var(--purple);
    border-radius: var(--radius-2);
    padding: 16px;
    box-shadow: 4px 4px 0 var(--purple);
    display: flex; flex-direction: column; gap: 10px;
    transition: transform .15s var(--ease-pop), box-shadow .15s var(--ease-soft);
}
.web3-stakecard:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--purple);
}
.web3-stakecard__amount {
    font-family: var(--font-display); font-size: 20px; font-weight: 800;
    color: var(--ink); letter-spacing: -0.01em;
}
.web3-stakecard__lock {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-3); letter-spacing: 0.04em;
}
.web3-stakecard__yield {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    color: var(--lime-bright);
}
.web3-stakecard__badges {
    display: inline-flex; gap: 6px; flex-wrap: wrap;
}
.web3-stakecard__badge {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--surface-3); color: var(--ink-3);
    border: 1px solid var(--line-3);
}
.web3-stakecard__badge--active {
    background: var(--lime); color: var(--bg);
    border-color: var(--ink);
}
.web3-stakecard__actions {
    display: inline-flex; gap: 8px; margin-top: 6px;
}
.web3-stakecard__action {
    background: var(--surface-2); color: var(--ink);
    border: 2px solid var(--line-3);
    padding: 8px 14px; border-radius: var(--radius-pill);
    font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
    letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer; transition: transform .15s var(--ease-pop), box-shadow .15s var(--ease-soft);
    box-shadow: 2px 2px 0 var(--line-2);
}
.web3-stakecard__action:hover {
    border-color: var(--lime); color: var(--lime-bright);
    transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--lime);
}

.web3-statcell {
    background: var(--surface);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
    padding: 16px;
    display: flex; flex-direction: column; gap: 4px;
    box-shadow: 3px 3px 0 var(--line-2);
    transition: transform .15s var(--ease-pop), box-shadow .15s var(--ease-soft);
}
.web3-statcell:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--line-2);
}
.web3-statcell__label {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4);
}
.web3-statcell__value {
    font-family: var(--font-mono); font-size: 18px;
    color: var(--ink); font-weight: 700;
}
.web3-statcell__delta {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}

.web3-tokensearch {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--bg-3);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
    box-shadow: 3px 3px 0 var(--line-2);
    transition: border-color .15s var(--ease-soft), box-shadow .15s var(--ease-soft);
}
.web3-tokensearch:focus-within {
    border-color: var(--cyan); box-shadow: 3px 3px 0 var(--cyan);
}
.web3-tokensearch__icon { color: var(--ink-3); font-size: 14px; }
.web3-tokensearch__input {
    background: transparent; border: none; outline: none;
    color: var(--ink); flex: 1;
    font-family: var(--font-mono); font-size: 14px;
}

.web3-tradetabs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    border: 2px solid var(--ink);
    border-radius: var(--radius-2);
    overflow: hidden;
    background: var(--bg-3);
}
.web3-tradetabs button {
    background: transparent; border: none;
    padding: 14px 8px;
    font-family: var(--font-display); font-weight: 800; font-size: 13px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3); cursor: pointer;
    transition: color .15s var(--ease-soft), background .15s var(--ease-soft);
}
.web3-tradetabs button.active {
    background: var(--cyan); color: var(--bg);
}

.web3-progressring__track { stroke: var(--bg-3); }
.web3-progressring__fill { stroke: var(--cyan); }
.web3-progressring__label {
    font-family: var(--font-display); font-weight: 800;
    fill: var(--ink);
}

.web3-bondingcurve { display: block; }
.web3-bondingcurve__path { stroke: var(--cyan); fill: none; stroke-width: 2; }
.web3-bondingcurve__floor { stroke: var(--lime); stroke-dasharray: 4 4; }
.web3-bondingcurve__spot {
    fill: var(--cyan); stroke: var(--ink); stroke-width: 2;
}

.web3-relativetime {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-4); letter-spacing: 0.04em;
}

.web3-holdclock {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px;
    background: var(--bg-3);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
}
.web3-holdclock__bar {
    position: relative; height: 10px;
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill); overflow: hidden;
}
.web3-holdclock__fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, var(--red), var(--amber), var(--lime));
    border-radius: var(--radius-pill);
}
.web3-holdclock__current {
    font-family: var(--font-mono); font-size: 12px; color: var(--ink);
    font-weight: 700;
}
.web3-holdclock__remaining {
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
}

.web3-trend { display: inline-flex; align-items: center; gap: 6px; }
.web3-trend__pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}
.web3-trend__pill--buy  { background: var(--lime); color: var(--bg); }
.web3-trend__pill--sell { background: var(--red);  color: var(--ink); }
.web3-trend__arrow { font-weight: 800; }
.web3-trend__sep { color: var(--ink-4); font-size: 10px; }

/* ── Stagger entrance for token grid cards ───────────────────────────── */

.token-grid > .token-card {
    animation: cardIn 0.6s var(--ease-back-out) both;
}
.token-grid > .token-card:nth-child(1)   { animation-delay: 60ms; }
.token-grid > .token-card:nth-child(2)   { animation-delay: 120ms; }
.token-grid > .token-card:nth-child(3)   { animation-delay: 180ms; }
.token-grid > .token-card:nth-child(4)   { animation-delay: 240ms; }
.token-grid > .token-card:nth-child(5)   { animation-delay: 300ms; }
.token-grid > .token-card:nth-child(6)   { animation-delay: 360ms; }
.token-grid > .token-card:nth-child(7)   { animation-delay: 420ms; }
.token-grid > .token-card:nth-child(8)   { animation-delay: 480ms; }
.token-grid > .token-card:nth-child(n+9) { animation-delay: 540ms; }
@keyframes cardIn {
    0%   { opacity: 0; transform: translateY(48px) scale(0.86) rotate(-2deg); }
    60%  { opacity: 1; transform: translateY(-6px) scale(1.04) rotate(0.4deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

.fw-steps > .fw-step {
    animation: fwStepIn 0.55s var(--ease-back-out) both;
}
.fw-steps > .fw-step:nth-child(1) { animation-delay: 80ms; }
.fw-steps > .fw-step:nth-child(3) { animation-delay: 200ms; }
.fw-steps > .fw-step:nth-child(5) { animation-delay: 320ms; }
.fw-steps > .fw-step:nth-child(7) { animation-delay: 440ms; }
@keyframes fwStepIn {
    0%   { opacity: 0; transform: translateY(28px) scale(0.9) rotate(-3deg); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.04) rotate(1deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(-0.6deg); }
}
.fw-steps > .fw-step:nth-child(4n+3) {
    animation-name: fwStepInRight;
}
@keyframes fwStepInRight {
    0%   { opacity: 0; transform: translateY(28px) scale(0.9) rotate(3deg); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.04) rotate(-1deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0.6deg); }
}

/* Stats banner — perceived count-up via the value scaling in. */
.stats-banner > .sb-item, .home-stats > .sb-item {
    animation: sbItemIn 0.5s var(--ease-back-out) both;
}
.stats-banner > .sb-item:nth-child(1), .home-stats > .sb-item:nth-child(1) { animation-delay: 100ms; }
.stats-banner > .sb-item:nth-child(2), .home-stats > .sb-item:nth-child(2) { animation-delay: 160ms; }
.stats-banner > .sb-item:nth-child(3), .home-stats > .sb-item:nth-child(3) { animation-delay: 220ms; }
.stats-banner > .sb-item:nth-child(4), .home-stats > .sb-item:nth-child(4) { animation-delay: 280ms; }
.stats-banner > .sb-item:nth-child(5), .home-stats > .sb-item:nth-child(5) { animation-delay: 340ms; }
.stats-banner > .sb-item:nth-child(6), .home-stats > .sb-item:nth-child(6) { animation-delay: 400ms; }
@keyframes sbItemIn {
    0%   { opacity: 0; transform: translateY(20px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.sb-val {
    animation: numberPop 0.7s var(--ease-back-out) both;
    animation-delay: inherit;
    display: inline-block;
}
@keyframes numberPop {
    0%   { transform: scale(0.4) rotate(-6deg); opacity: 0; }
    50%  { transform: scale(1.18) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Hero sequence — title, sub, actions cascade in. */
.hero-badge   { animation: heroIn 0.6s var(--ease-back-out) both; animation-delay: 80ms; }
.hero-title, .hero h1, .home-hero h1 { animation: heroIn 0.7s var(--ease-back-out) both; animation-delay: 160ms; }
.hero-sub, .hero p, .home-hero p     { animation: heroIn 0.7s var(--ease-back-out) both; animation-delay: 280ms; }
.hero-actions, .home-hero-actions    { animation: heroIn 0.7s var(--ease-back-out) both; animation-delay: 380ms; }
@keyframes heroIn {
    0%   { opacity: 0; transform: translateY(24px) scale(0.94); filter: blur(6px); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.02); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .explore { grid-template-columns: 1fr; }
    .detail-body { grid-template-columns: 1fr; }
    .detail-stats { grid-template-columns: repeat(2, 1fr); }
    .stats-banner, .home-stats { grid-template-columns: repeat(3, 1fr); }
    .sb-item:nth-child(3n) { border-right: none; }
    .sb-item:nth-child(-n+3) { border-bottom: 2px solid var(--ink); }
}

@media (max-width: 720px) {
    .nav { grid-template-columns: 1fr auto; padding: 14px 20px; }
    .nav-links { display: none; }
    .hero, .home-hero { padding: 64px 20px 56px; }
    .hero h1, .home-hero h1 { font-size: 48px; line-height: 1; }
    .hero p { font-size: 16px; }

    /* Stats: 2x2 grid below 720, NOT 1-col stack — keeps it compact and scannable. */
    .stats-banner, .home-stats { grid-template-columns: repeat(2, 1fr); }
    .sb-item {
        padding: 22px 18px;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }
    .sb-item:nth-child(2n) { border-right: none; }
    .sb-item:nth-last-child(-n+2) { border-bottom: none; } /* last row */
    .sb-val { font-size: 28px; }

    .explore { padding: 48px 20px; gap: 32px; }
    .detail { padding: 0 20px 64px; }
    .detail-header { flex-direction: column; align-items: stretch; gap: 20px; }
    .dh-right { text-align: left; }
    .dh-name { font-size: 36px; }
    .dh-price { font-size: 36px; }
    .detail-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ds { padding: 14px; }
    .create { padding: 32px 20px 64px; }
    .create-card { padding: 24px; }

    /* Activity feed compresses but stays usable. */
    .activity-feed { padding: 16px; position: static; }
    .web3-activityrow { font-size: 12px; padding: 12px 4px; }

    /* Trade panel inputs benefit from larger native keyboards. */
    .tp-form { padding: 18px; }
}

/* ── Touch-only devices: bigger tap targets, no expensive hover effects ── */

@media (hover: none) and (pointer: coarse) {
    /* WCAG/Apple HIG minimum is 44px — bump small chips that fall short. */
    .nav-link               { padding: 11px 18px; min-height: 44px; }
    .tp-preset              { padding: 11px 16px; font-size: 12px; min-height: 40px; }
    .web3-slippage button   { padding: 11px 14px; min-height: 40px; }
    .web3-lock-period__chip button { padding: 11px 16px; min-height: 40px; }
    .explore-sorts button   { padding: 11px 18px; min-height: 40px; }
    .tp-tabs button         { padding: 18px 8px; min-height: 52px; }
    .web3-tx-toast-dismiss             { padding: 10px; }

    /* Hover translateYs feel weird on touch — strip them. Keep press-shrink. */
    .token-card:hover,
    .fw-step:hover,
    .ds:hover,
    .tp-us-stake:hover,
    .web3-stat-cell:hover,
    .nav-link:hover,
    .tp-preset:hover,
    .nav-wallet:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .tp-btn:hover,
    .hero-btn.primary:hover,
    .hero-btn.secondary:hover {
        transform: none;
    }
    /* Cards should still rotate/lift on actual press. */
    .token-card:active { transform: scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }
}

/* =============================================================================
   ── JUICE LAYER — game-feel grammar for the dapp ─────────────────────────────
   Every interactive surface gets anticipation, peak, follow-through.
   Every keyframe here is meant to be invokable as a class or inherited.
   ============================================================================= */

/* ── Ribbon-sweep — a chrome shimmer rolling across primary buttons ─── */
.btn-primary, .tp-btn.tp-buy, .hero-btn.primary, .tp-btn.tp-connect, .nav-wallet,
.web3-wallet-button, .launch-btn {
    position: relative; isolation: isolate;
}
.btn-primary::before, .tp-btn.tp-buy::before, .hero-btn.primary::before,
.tp-btn.tp-connect::before, .nav-wallet::before,
.web3-wallet-button::before, .launch-btn::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--sheen-side);
    background-size: 60% 100%;
    background-repeat: no-repeat;
    background-position: -120% 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    /* Clip to the rounded pill so the sheen never escapes the button. */
    clip-path: inset(0 round var(--radius-pill));
}
.btn-primary:hover::before, .tp-btn.tp-buy:hover::before,
.hero-btn.primary:hover::before, .tp-btn.tp-connect:hover::before,
.nav-wallet:hover::before, .web3-wallet-button:hover::before,
.launch-btn:hover::before {
    animation: ribbonSweep 0.9s var(--ease-expo-out) 1;
}
@keyframes ribbonSweep {
    0%   { background-position: -120% 0; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { background-position: 220% 0; opacity: 0; }
}

/* ── Idle "breathing" on idle CTAs to draw the eye without aggression ── */
.hero-btn.primary {
    animation: breathePulse 2.4s var(--ease-quart-out) infinite alternate;
}
@keyframes breathePulse {
    0%   { box-shadow: 4px 4px 0 var(--ink); }
    100% { box-shadow: 6px 6px 0 var(--ink), 0 0 0 6px rgba(0, 255, 178, 0.0), 0 0 30px rgba(0, 255, 178, 0.2); }
}

/* ── Anticipation pop — used on landing-modal cards / success cards ──── */
.juice-pop, .web3-pending-overlay__card {
    animation: juicePop 0.7s var(--ease-back-out) both;
}
@keyframes juicePop {
    0%   { opacity: 0; transform: scale(0.5) rotate(-8deg); }
    50%  { opacity: 1; transform: scale(1.12) rotate(3deg); }
    75%  { transform: scale(0.96) rotate(-1deg); }
    100% { transform: scale(1) rotate(0); }
}

/* ── Squash-press — universal active state for chunky-shadow buttons ──
   Built into existing buttons via :active translate, but we add a tiny
   squash for tactile feedback. */
.btn:active, .tp-btn:active, .hero-btn:active, .nav-wallet:active,
.web3-wallet-button:active, .token-card:active {
    animation: squashPress 0.18s var(--ease-snap) 1;
}
@keyframes squashPress {
    0%   { transform: scale(1) translate(0, 0); }
    50%  { transform: scaleX(1.06) scaleY(0.92); }
    100% { transform: scale(1) translate(0, 0); }
}

/* ── Spark-burst — fires on success buttons (claim / burst / launch) ─── */
.tp-btn.tp-claim-yield-btn, .tp-btn.bt-execute, .launch-btn, .hero-btn.primary {
    overflow: visible;
}
.tp-btn.tp-claim-yield-btn::after, .tp-btn.bt-execute::after,
.launch-btn::after, .hero-btn.primary::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle 3px at 50% 50%, var(--yellow) 0 100%, transparent 0) center/3px 3px no-repeat,
        radial-gradient(circle 2px at 50% 50%, var(--cyan) 0 100%, transparent 0) center/2px 2px no-repeat,
        radial-gradient(circle 2px at 50% 50%, var(--pink) 0 100%, transparent 0) center/2px 2px no-repeat;
    opacity: 0;
}
.tp-btn.tp-claim-yield-btn:active::after, .tp-btn.bt-execute:active::after,
.launch-btn:active::after, .hero-btn.primary:active::after {
    animation: sparkBurst 0.6s var(--ease-expo-out) 1;
}
@keyframes sparkBurst {
    0%   { opacity: 0; transform: scale(0.4); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: scale(2.6); }
}

/* ── Magnetic snap — tabs and chip pickers settle into place ─────────── */
.tp-tabs button.active, .web3-tradetabs button.active,
.web3-slippage button.active, .web3-lock-period__chip button.active,
.explore-sorts button.active, .nav-link.active {
    animation: magneticSnap 0.32s var(--ease-back-out) 1;
}
@keyframes magneticSnap {
    0%   { transform: scale(0.86); }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ── Glitch-kick — fires on token-card click for hype ───────────────── */
@keyframes glitchKick {
    0%   { transform: translate(0, 0); filter: hue-rotate(0deg); }
    20%  { transform: translate(-2px, 1px); filter: hue-rotate(-12deg); }
    40%  { transform: translate(2px, -1px); filter: hue-rotate(12deg); }
    60%  { transform: translate(-1px, 0px); filter: hue-rotate(-4deg); }
    100% { transform: translate(0, 0); filter: hue-rotate(0); }
}
.token-card:active {
    animation: glitchKick 0.32s var(--ease-snap) 1;
}

/* ── Shake — failure feedback ──────────────────────────────────────── */
@keyframes juice-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px) rotate(-1deg); }
    40%      { transform: translateX(5px) rotate(1deg); }
    60%      { transform: translateX(-4px) rotate(-0.6deg); }
    80%      { transform: translateX(3px) rotate(0.4deg); }
}

/* ── Number-tick juice — for live balance / count updates ──────────── */
.juice-number-tick {
    animation: numberTick 0.5s var(--ease-back-out) 1;
    display: inline-block;
}
@keyframes numberTick {
    0%   { transform: translateY(0) scale(1); color: inherit; }
    30%  { transform: translateY(-6px) scale(1.18); color: var(--cyan-bright); }
    100% { transform: translateY(0) scale(1); }
}

/* ── Confetti (CSS-only) — for graduation / launch success ─────────── */
.juice-confetti {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    border-radius: inherit;
}
.juice-confetti::before, .juice-confetti::after {
    content: "";
    position: absolute; top: 0; left: 50%;
    width: 8px; height: 8px;
    background: var(--pink);
    box-shadow:
        -120px -10px 0 var(--cyan),    80px -8px 0 var(--lime),
        -60px -16px 0 var(--amber),    140px -14px 0 var(--purple),
        -180px -4px 0 var(--yellow),   200px -6px 0 var(--magenta),
        -40px -20px 0 var(--pink),      60px -22px 0 var(--blue);
    animation: confettiFall 1.4s var(--ease-back-out) 1;
    transform: translateY(-40px);
}
.juice-confetti::after {
    background: var(--lime);
    animation-delay: 0.15s;
    box-shadow:
        -100px -8px 0 var(--amber),    140px -12px 0 var(--cyan),
        -160px -18px 0 var(--pink),    180px -10px 0 var(--purple),
        -20px -24px 0 var(--yellow),   100px -16px 0 var(--magenta);
}
@keyframes confettiFall {
    0%   { transform: translateY(-40px) rotate(0); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateY(220px) rotate(540deg); opacity: 0; }
}

/* ── Edge halo — hyper-pop chromatic frame on focus, no soft blur ──── */
.tp-field input:focus, .cf-field input:focus,
.web3-amount-input input:focus, .web3-input:focus,
.web3-token-search:focus-within, .web3-tokensearch:focus-within {
    animation: edgePulse 0.36s var(--ease-back-out) 1;
}
@keyframes edgePulse {
    0%   { box-shadow: 3px 3px 0 var(--cyan); }
    50%  { box-shadow: 6px 6px 0 var(--cyan), -3px -3px 0 var(--pink); }
    100% { box-shadow: 3px 3px 0 var(--cyan); }
}

/* ── Slider thumb — extra springy pickup, magnetic settle on release ─ */
input[type=range]::-webkit-slider-thumb:active {
    transform: translate(-1px, -1px) scale(1.16) rotate(-8deg);
    background: var(--cyan-bright);
    box-shadow: 5px 5px 0 var(--ink);
    transition-timing-function: var(--ease-back-out);
}

/* ── Background atmosphere — flat hyper-pop "halftone" dots ─────────
   Fixed-position, pure CSS halftone screen behind everything. Reads as
   sticker-paper texture not a gradient. */
body::before {
    content: "";
    position: fixed; inset: 0;
    background-image:
        radial-gradient(circle at 20% 18%, rgba(255, 123, 245, 0.08) 0, transparent 14%),
        radial-gradient(circle at 80% 12%, rgba(0, 255, 178, 0.07) 0, transparent 16%),
        radial-gradient(circle at 12% 78%, rgba(236, 253, 101, 0.06) 0, transparent 14%),
        radial-gradient(circle at 88% 82%, rgba(107, 80, 255, 0.08) 0, transparent 18%);
    pointer-events: none; z-index: 0;
    animation: bgDrift 22s var(--ease-quart-out) infinite alternate;
}
@keyframes bgDrift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-3%, 2%) scale(1.06); }
}

/* Halftone dot grid — barely visible but adds texture. */
body::after {
    content: "";
    position: fixed; inset: 0;
    background-image: radial-gradient(circle, rgba(255, 253, 245, 0.03) 1px, transparent 1.5px);
    background-size: 22px 22px;
    pointer-events: none; z-index: 1;
    mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
}

/* ── Hero — sticker accent shapes (pure CSS chips floating around title) */
.hero, .home-hero { isolation: isolate; }
.hero::before, .home-hero::before,
.hero::after, .home-hero::after {
    content: ""; position: absolute; pointer-events: none;
    border: 3px solid var(--ink);
    border-radius: 50%;
    z-index: 1;
}
.hero::before, .home-hero::before {
    width: 80px; height: 80px;
    background: var(--pink);
    top: 18%; left: 8%;
    box-shadow: 6px 6px 0 var(--ink);
    animation: floatChip 4.2s var(--ease-elastic) infinite alternate;
    transform: rotate(-12deg);
}
.hero::after, .home-hero::after {
    width: 64px; height: 64px;
    background: var(--cyan);
    top: 24%; right: 10%;
    box-shadow: 6px 6px 0 var(--ink);
    border-radius: 16px;
    animation: floatChip 3.6s var(--ease-elastic) infinite alternate-reverse;
    transform: rotate(8deg);
}
@keyframes floatChip {
    0%   { transform: translate(0, 0) rotate(-12deg); }
    100% { transform: translate(8px, -14px) rotate(8deg); }
}
@media (max-width: 900px) {
    .hero::before, .home-hero::before, .hero::after, .home-hero::after { display: none; }
}

/* Add a third floating chip lower-left of hero */
.hero-inner::before {
    content: "";
    position: absolute;
    bottom: -28px; left: 4%;
    width: 48px; height: 48px;
    background: var(--lime);
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    transform: rotate(20deg);
    animation: floatChip 5s var(--ease-elastic) infinite alternate;
    z-index: 1;
}
@media (max-width: 900px) {
    .hero-inner::before { display: none; }
}

/* ── Stats banner — strengthen flat hyper-pop signature ─────────── */
.stats-banner, .home-stats {
    background: var(--bg-2);
    border: 2px solid var(--ink);
    border-radius: var(--radius-3);
    margin: 56px auto 64px;
    max-width: calc(var(--max-w) - 40px);
    box-shadow: 8px 8px 0 var(--ink);
    overflow: hidden;
}
.sb-item {
    border-right: 2px solid var(--ink);
    transition: background .25s var(--ease-soft), transform .2s var(--ease-pop);
}
.sb-item:hover {
    background: rgba(255, 253, 245, 0.04);
    transform: translateY(-2px);
}
.sb-item:hover .sb-val {
    animation: numberTick 0.5s var(--ease-back-out) 1;
}
.stats-banner > .sb-item:nth-child(odd)  { background: linear-gradient(180deg, transparent, rgba(0, 255, 178, 0.04)); }
.stats-banner > .sb-item:nth-child(even) { background: linear-gradient(180deg, transparent, rgba(255, 123, 245, 0.04)); }

/* ── Token card — flat-hyper-pop hardening + idle wiggle ─────────── */
.token-card {
    border-width: 3px;
    transform: rotate(0deg);
}
.token-grid > .token-card:nth-child(2n) {
    transform: rotate(0.4deg);
}
.token-grid > .token-card:nth-child(3n+1) {
    transform: rotate(-0.4deg);
}
.token-card::after {
    /* Sticker peel highlight at top edge — pure flat, no blur. */
    content: "";
    position: absolute;
    top: 0; left: 16px; right: 16px; height: 3px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    pointer-events: none;
}
.token-card:hover::after {
    background: rgba(255, 255, 255, 0.35);
}

/* ── Explore-sorts — apply flat hyper-pop ───────────────────────── */
.explore-sorts {
    background: var(--surface);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}

/* ── Hero badge — chunky sticker ──────────────────────────────── */
.hero-badge {
    background: var(--surface);
    border: 2px solid var(--ink);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--lime);
    font-weight: 700;
}
.hero-badge:hover {
    transform: translate(-1px, -1px) rotate(-1deg);
    box-shadow: 5px 5px 0 var(--lime);
    transition: all 0.2s var(--ease-back-out);
}
.hero-badge::before {
    animation: pulseDot 1.4s var(--ease-quart-out) infinite;
}

/* ── Page-load: orchestrated nav reveal ───────────────────────── */
.nav {
    animation: navIn 0.6s var(--ease-back-out) both;
}
@keyframes navIn {
    0%   { opacity: 0; transform: translateY(-40px); }
    100% { opacity: 1; transform: translateY(0); }
}
.nav-brand   { animation: heroIn 0.5s var(--ease-back-out) both; animation-delay: 80ms; }
.nav-links   { animation: heroIn 0.5s var(--ease-back-out) both; animation-delay: 160ms; }
.nav-right   { animation: heroIn 0.5s var(--ease-back-out) both; animation-delay: 240ms; }

/* ── Buttons: amplify the chunky shadow on hover with a pop ────── */
.btn-primary:hover, .tp-btn.tp-buy:hover, .hero-btn.primary:hover,
.tp-btn.tp-connect:hover, .nav-wallet:hover {
    animation: hoverPop 0.32s var(--ease-back-out) 1;
}
@keyframes hoverPop {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-3px, -3px) scale(1.04); }
    100% { transform: translate(-2px, -2px) scale(1); }
}

/* ── Section-title decorative chips ────────────────────────────── */
.explore-header h2, .fw-title, .create-title, .showcase-page__hero h2,
.dh-name {
    position: relative;
    display: inline-block;
}

/* ── Sticker rotation entry for cards ─────────────────────────── */
.floor-info, .penalty-preview, .trade-panel, .staking-panel {
    animation: stickerIn 0.55s var(--ease-back-out) both;
    animation-delay: 200ms;
}
@keyframes stickerIn {
    0%   { opacity: 0; transform: translateY(20px) scale(0.94) rotate(-1.4deg); }
    65%  { opacity: 1; transform: translateY(-4px) scale(1.02) rotate(0.6deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

.floor-info     { animation-delay: 200ms; }
.trade-panel    { animation-delay: 280ms; }
.penalty-preview{ animation-delay: 360ms; }
.staking-panel  { animation-delay: 440ms; }

/* ── Detail-stats stagger ─────────────────────────────────────── */
.detail-stats > .ds {
    animation: cardIn 0.5s var(--ease-back-out) both;
}
.detail-stats > .ds:nth-child(1) { animation-delay: 100ms; }
.detail-stats > .ds:nth-child(2) { animation-delay: 160ms; }
.detail-stats > .ds:nth-child(3) { animation-delay: 220ms; }
.detail-stats > .ds:nth-child(4) { animation-delay: 280ms; }
.detail-stats > .ds:nth-child(5) { animation-delay: 340ms; }
.detail-stats > .ds:nth-child(n+6) { animation-delay: 400ms; }

/* ── Activity feed — items hint into view ─────────────────────── */
.web3-activityrow {
    animation: rowIn 0.4s var(--ease-back-out) both;
}
.web3-activityrow:nth-child(1)  { animation-delay: 60ms; }
.web3-activityrow:nth-child(2)  { animation-delay: 100ms; }
.web3-activityrow:nth-child(3)  { animation-delay: 140ms; }
.web3-activityrow:nth-child(4)  { animation-delay: 180ms; }
.web3-activityrow:nth-child(5)  { animation-delay: 220ms; }
.web3-activityrow:nth-child(6)  { animation-delay: 260ms; }
.web3-activityrow:nth-child(7)  { animation-delay: 300ms; }
.web3-activityrow:nth-child(n+8){ animation-delay: 340ms; }
@keyframes rowIn {
    0%   { opacity: 0; transform: translateX(-12px); }
    100% { opacity: 1; transform: translateX(0); }
}
.web3-activityrow:hover .web3-activityrow__icon {
    animation: bobbleEmoji 0.6s var(--ease-elastic) 1;
}

/* ── Trade-panel tabs: rolling underline indicator ─────────────── */
.tp-tabs { position: relative; }
.tp-tabs::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; height: 5px; width: 33.33%;
    background: var(--ink);
    transition: left 0.35s var(--ease-back-out), width 0.35s var(--ease-back-out);
    pointer-events: none;
    z-index: 2;
}

/* ── Trade-panel fee split — stacked grid, no wrap ───────────── */
.tp-fee-split-block {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 0; border-top: 1px solid var(--line);
}
.tp-fee-split-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.tp-fee-split-item {
    display: flex; align-items: baseline; gap: 6px;
    padding: 6px 8px;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-1);
}
.tp-fs-pct {
    font-family: var(--font-display);
    font-size: 14px; font-weight: 800;
    color: var(--c-text-strong);
    line-height: 1;
}
.tp-fs-to {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 600;
    color: var(--c-text-soft);
    letter-spacing: var(--t-track-eyebrow);
}

/* ── Detail-stats secondary 3-col row ──────────────────────────── */
.detail-stats-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    margin-top: 14px;
}
.ds-val.trend-up      { color: var(--lime-bright); }
.ds-val.trend-down    { color: var(--red-bright); }
.ds-val.trend-neutral { color: var(--ink-2); }

/* ── Graduation banner — fires when token.graduated = true ────── */
.grad-banner {
    position: relative;
    background: var(--surface);
    border: 3px solid var(--ink);
    border-radius: var(--radius-3);
    padding: 28px 32px;
    margin: 0 0 28px;
    overflow: hidden;
    box-shadow: 8px 8px 0 var(--amber);
    background-image:
        linear-gradient(110deg, rgba(255, 184, 77, 0.08), rgba(255, 123, 245, 0.08));
    animation: stickerIn 0.7s var(--ease-back-out) both;
}
.grad-banner::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--pop-grad-rainbow);
    background-size: 220% 100%;
    opacity: 0.18;
    z-index: 0;
    animation: gradientShift 5s var(--ease-quart-out) infinite alternate;
    pointer-events: none;
}
.grad-banner-inner {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 24px;
}
.grad-banner-icon {
    font-size: 56px; line-height: 1;
    flex: 0 0 auto;
    animation: bobbleEmoji 1.6s var(--ease-elastic) infinite alternate;
    transform-origin: bottom center;
}
.grad-banner-text { flex: 1; }
.grad-banner-title {
    font-family: var(--font-display);
    font-size: 26px; font-weight: 800;
    color: var(--ink); letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.grad-banner-sub {
    font-family: var(--font-mono); font-size: 12.5px;
    color: var(--ink-2); letter-spacing: 0.04em;
    line-height: 1.55;
}
.grad-banner-cta {
    flex: 0 0 auto;
    padding: 14px 22px;
    background: var(--amber) !important;
    color: var(--bg) !important;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    text-decoration: none;
}
.grad-banner-cta:hover {
    background: var(--amber-bright) !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}
@media (max-width: 720px) {
    .grad-banner-inner { flex-direction: column; align-items: stretch; gap: 14px; }
    .grad-banner-cta { align-self: stretch; text-align: center; }
}

/* ── Check-graduate button — appears under grad bar near 95%+ ── */
.check-graduate-btn {
    margin-top: 16px;
    width: 100%;
    background: var(--amber) !important;
    color: var(--bg) !important;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    padding: 14px 22px;
    font-size: 15px;
    animation: breathePulse 1.8s var(--ease-quart-out) infinite alternate;
}
.check-graduate-btn:hover {
    background: var(--amber-bright) !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}

/* ── Holder actions — donate + burn sticker pair ─────────────── */
.holder-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}
.ha-card {
    background: var(--surface);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
    padding: 18px;
    display: flex; flex-direction: column; gap: 12px;
    box-shadow: 5px 5px 0 var(--line-2);
    transition: transform 0.2s var(--ease-pop), box-shadow 0.2s var(--ease-soft);
}
.ha-donate { border-color: var(--cyan); box-shadow: 5px 5px 0 var(--cyan); }
.ha-burn   { border-color: var(--red);  box-shadow: 5px 5px 0 var(--red); }
.ha-card:hover {
    transform: translate(-2px, -2px);
}
.ha-donate:hover { box-shadow: 7px 7px 0 var(--cyan); }
.ha-burn:hover   { box-shadow: 7px 7px 0 var(--red); }

.ha-header {
    display: flex; gap: 12px; align-items: flex-start;
}
.ha-icon {
    font-size: 28px; line-height: 1; flex: 0 0 auto;
    animation: gentleBob 2.4s var(--ease-quart-out) infinite alternate;
    transform-origin: bottom center;
}
.ha-title {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 800;
    color: var(--ink); letter-spacing: -0.01em;
    margin-bottom: 2px;
}
.ha-sub {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 700;
    color: var(--c-text-soft);
    letter-spacing: 0.08em;
    line-height: 1.5;
}
.ha-input-row {
    display: flex; gap: 8px; align-items: stretch;
}
.ha-input {
    flex: 1;
    background: var(--bg-3);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
    padding: 10px 14px;
    color: var(--ink);
    font-family: var(--font-mono); font-size: 13px;
    box-shadow: 2px 2px 0 var(--line-2);
    transition: border-color 0.15s var(--ease-soft), box-shadow 0.15s var(--ease-soft);
}
.ha-donate .ha-input:focus {
    outline: none; border-color: var(--cyan); box-shadow: 2px 2px 0 var(--cyan);
}
.ha-burn .ha-input:focus {
    outline: none; border-color: var(--red); box-shadow: 2px 2px 0 var(--red);
}
.ha-submit {
    padding: 10px 18px !important;
    font-size: 12px !important;
    flex: 0 0 auto;
}
.ha-burn .ha-submit.ha-burn-btn {
    background: var(--red) !important;
    color: var(--ink) !important;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
}
.ha-burn .ha-submit.ha-burn-btn:hover {
    background: var(--red-bright) !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}

@media (max-width: 720px) {
    .holder-actions { grid-template-columns: 1fr; }
}

/* ── Reduced motion: keep stagger but remove infinite idle anims ── */
@media (prefers-reduced-motion: reduce) {
    .nav-fire, .fw-title::after, .dh-icon, .gbd-header > span:first-child::before,
    .create-card::before, .create-card::after, .cs-icon, .fw-arrow,
    .nav-wallet.connected::after, em, .em, .hero::before, .hero::after,
    .hero-inner::before, .hero-btn.primary, body::before {
        animation: none !important;
    }
}


/* =============================================================================
   PLATFORM LAYER — ATHN home, Portfolio integrator, ComingSoon stub
   Retains the established Charm-derived hyper-pop / no-grey palette. Every
   text element is intentionally cased; values get a saturated accent
   (lime / cyan / amber / red / pink); structure stays high-contrast on
   true-black surfaces.
   ============================================================================= */

/* ── ATHN HOME ─────────────────────────────────────────────────────── */

.athn {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 32px 96px;
    display: flex;
    flex-direction: column;
    gap: 56px;
    color: var(--ink);
}

.athn-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    border: 2px solid var(--cyan);
    background: var(--surface);
    padding: 44px 40px 36px;
    border-radius: var(--radius-3);
    position: relative;
    overflow: hidden;
    box-shadow: 6px 6px 0 var(--cyan);
}

.athn-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--magenta), var(--lime), var(--cyan), var(--yellow), var(--purple-bright));
}

.athn-detail-stats {
    width: 100%;
    margin-top: 4px;
}

.athn-hero-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--cyan);
    font-weight: 700;
}

.athn-hero-title {
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: clamp(56px, 9vw, 124px);
    line-height: 0.92;
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.04em;
}

.athn-hero-tag {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    max-width: 720px;
    line-height: 1.4;
}

/* The Athn page reuses .detail-stats and .ds from the token-detail page —
   six cells, each with a saturated nth-child border + matching solid offset
   shadow. Override the 5-col default to 6-col for ATHN's six stats, and add
   a 6th nth-child accent (magenta) so the burn cell isn't grey. */

.athn-detail-stats.detail-stats {
    grid-template-columns: repeat(6, 1fr);
}

.athn-detail-stats > .ds:nth-child(6) {
    border-color: var(--magenta);
    box-shadow: 4px 4px 0 var(--magenta);
}

@media (max-width: 1080px) {
    .athn-detail-stats.detail-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .athn-detail-stats.detail-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Sub-nav under hero */

.athn-subnav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.athn-subnav-link {
    flex: 1 1 200px;
    background: var(--surface);
    border: 2px solid var(--line-3);
    color: var(--ink);
    padding: 22px 24px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.2em;
    font-weight: 700;
    cursor: pointer;
    border-radius: var(--radius-2);
    box-shadow: 4px 4px 0 var(--line-2);
    transition: transform 0.12s var(--ease-pop), box-shadow 0.12s var(--ease-soft);
}

.athn-subnav-link:nth-child(1) { border-color: var(--cyan);    box-shadow: 4px 4px 0 var(--cyan); }
.athn-subnav-link:nth-child(2) { border-color: var(--lime);    box-shadow: 4px 4px 0 var(--lime); }
.athn-subnav-link:nth-child(3) { border-color: var(--magenta); box-shadow: 4px 4px 0 var(--magenta); }
.athn-subnav-link:nth-child(4) { border-color: var(--amber);   box-shadow: 4px 4px 0 var(--amber); }

.athn-subnav-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 currentColor;
}

.athn-subnav-link--primary {
    background: var(--cyan);
    color: var(--bg);
}

/* User position summary */

.athn-user {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.athn-user-title,
.athn-feeflow-title,
.portfolio-section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.25em;
    margin: 0;
    color: var(--ink);
    font-weight: 700;
}

.athn-user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.athn-user-tile {
    background: var(--surface);
    border: 2px solid var(--line-3);
    padding: 28px;
    border-radius: var(--radius-3);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 4px 4px 0 var(--line-2);
}

.athn-user-tile:nth-child(1) { border-color: var(--lime);    box-shadow: 4px 4px 0 var(--lime); }
.athn-user-tile:nth-child(2) { border-color: var(--magenta); box-shadow: 4px 4px 0 var(--magenta); }

.athn-user-tile-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--ink);
    opacity: 0.7;
}

.athn-user-tile-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 700;
    color: var(--lime);
    line-height: 1.1;
}

.athn-user-tile-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: var(--ink);
    margin: 0;
    line-height: 1.4;
}

.athn-user-tile-pending {
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}

.athn-user-tile--empty .athn-user-tile-value { color: var(--ink); opacity: 0.4; }

.athn-user-tile-cta {
    align-self: flex-start;
    margin-top: 8px;
    background: var(--cyan);
    color: var(--bg);
    border: 2px solid var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.12s var(--ease-pop), box-shadow 0.12s var(--ease-soft);
}

.athn-user-tile-cta:hover {
    background: var(--cyan-bright);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
}

/* Fee flow diagram section */

.athn-feeflow {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--surface);
    border: 2px solid var(--purple);
    padding: 32px;
    border-radius: var(--radius-3);
    box-shadow: 6px 6px 0 var(--purple);
}

.athn-feeflow-tag,
.athn-feeflow-foot {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: var(--ink);
    margin: 0;
    line-height: 1.5;
}

.athn-feeflow-foot { opacity: 0.85; font-size: 13px; }

.athn-feeflow-frame {
    width: 100%;
    overflow-x: auto;
    padding: 12px 0;
}

/* FeeFlowDiagram primitive — color the segments */

.web3-feeflow__bar { display: block; }

.web3-feeflow__seg                  { fill: var(--surface-3); }
.web3-feeflow__seg--ve              { fill: var(--magenta); }
.web3-feeflow__seg--stakers         { fill: var(--lime); }
.web3-feeflow__seg--floor           { fill: var(--cyan); }
.web3-feeflow__seg--burn            { fill: var(--yellow); }
.web3-feeflow__seg--treasury        { fill: var(--purple-bright); }

.web3-feeflow__legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.web3-feeflow__legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink);
}

.web3-feeflow__legend-swatch {
    width: 12px; height: 12px;
    background: var(--surface-3);
    flex-shrink: 0;
    border-radius: 2px;
}

.web3-feeflow__legend-swatch--ve        { background: var(--magenta); }
.web3-feeflow__legend-swatch--stakers   { background: var(--lime); }
.web3-feeflow__legend-swatch--floor     { background: var(--cyan); }
.web3-feeflow__legend-swatch--burn      { background: var(--yellow); }
.web3-feeflow__legend-swatch--treasury  { background: var(--purple-bright); }

.web3-feeflow__legend-label   { letter-spacing: 0.12em; font-weight: 700; }
.web3-feeflow__legend-bps     { color: var(--ink); opacity: 0.7; }
.web3-feeflow__legend-amount  { margin-left: auto; color: var(--lime); font-weight: 700; }

/* ── PORTFOLIO ─────────────────────────────────────────────────────── */

.portfolio {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 32px 96px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    color: var(--ink);
}

.portfolio-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 28px;
}

.portfolio-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--cyan);
    font-weight: 700;
}

.portfolio-title {
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: clamp(48px, 7vw, 96px);
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.04em;
    line-height: 0.95;
}

.portfolio-summary {
    margin-top: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--ink);
}

.portfolio-summary-num   { color: var(--lime); font-size: 22px; font-weight: 700; }
.portfolio-summary-label { font-weight: 700; }

.portfolio-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--surface);
    border: 2px solid var(--line-3);
    padding: 32px;
    border-radius: var(--radius-3);
    box-shadow: 6px 6px 0 var(--line-2);
}

/* Each section gets its own saturated accent — same pattern as .ds:nth-child */
.portfolio-section--ve      { border-color: var(--magenta); box-shadow: 6px 6px 0 var(--magenta); }
.portfolio-section--stakes  { border-color: var(--lime);    box-shadow: 6px 6px 0 var(--lime); }
.portfolio-section--bonds   { border-color: var(--amber);   box-shadow: 6px 6px 0 var(--amber); }
.portfolio-section--bribes  { border-color: var(--purple);  box-shadow: 6px 6px 0 var(--purple); }
.portfolio-section--athn    { border-color: var(--cyan);    box-shadow: 6px 6px 0 var(--cyan); }

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

/* Use the .ds card shape for stake/bond cells inside the grid */
.portfolio-grid-cell {
    background: var(--bg-2);
    border: 2px solid var(--line-3);
    padding: 18px;
    border-radius: var(--radius-2);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 4px 4px 0 var(--line-2);
    transition: transform .2s var(--ease-pop), box-shadow .2s var(--ease-soft);
}

.portfolio-section--stakes .portfolio-grid-cell:nth-child(3n+1) { border-color: var(--lime);    box-shadow: 4px 4px 0 var(--lime); }
.portfolio-section--stakes .portfolio-grid-cell:nth-child(3n+2) { border-color: var(--cyan);    box-shadow: 4px 4px 0 var(--cyan); }
.portfolio-section--stakes .portfolio-grid-cell:nth-child(3n)   { border-color: var(--magenta); box-shadow: 4px 4px 0 var(--magenta); }

.portfolio-section--bonds .portfolio-grid-cell:nth-child(2n+1) { border-color: var(--amber); box-shadow: 4px 4px 0 var(--amber); }
.portfolio-section--bonds .portfolio-grid-cell:nth-child(2n)   { border-color: var(--lime);  box-shadow: 4px 4px 0 var(--lime); }

.portfolio-grid-cell:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 currentColor;
}

.portfolio-grid-cell-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--cyan);
    font-weight: 700;
}

/* veATHN feature card */

.portfolio-ve-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto auto;
    gap: 20px;
    align-items: start;
}

.portfolio-ve-stats { display: flex; flex-direction: column; gap: 12px; }

.portfolio-statrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
    gap: 16px;
}

.portfolio-statrow-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--ink);
    opacity: 0.7;
    font-weight: 700;
}

.portfolio-statrow-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--lime);
}

.portfolio-ve-chart {
    background: var(--bg-2);
    border: 2px solid var(--line-3);
    padding: 16px;
    border-radius: var(--radius-2);
    box-shadow: 4px 4px 0 var(--line-2);
}

/* VeBalanceChart primitive coloring */

.web3-vebalancechart      { display: block; width: 100%; }
.web3-vebalancechart__path    { stroke: var(--magenta); stroke-width: 2; fill: none; }
.web3-vebalancechart__current { fill: var(--lime); stroke: var(--bg); stroke-width: 2; }
.web3-vebalancechart__axis    { stroke: var(--line-2); stroke-width: 1; }

.portfolio-ve-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.portfolio-action {
    background: var(--bg);
    border: 2px solid var(--ink);
    color: var(--ink);
    padding: 10px 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    font-weight: 700;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 3px 3px 0 var(--surface-2);
    transition: transform 0.12s var(--ease-pop), box-shadow 0.12s var(--ease-soft);
}

.portfolio-action:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
    color: var(--cyan);
}

.portfolio-action--primary {
    background: var(--cyan);
    color: var(--bg);
    border-color: var(--ink);
}

.portfolio-action--primary:hover {
    background: var(--cyan-bright);
    color: var(--bg);
}

/* NFT stake / bond card primitives */

.web3-nftstakecard,
.web3-bondcard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--ink);
    font-family: 'JetBrains Mono', monospace;
}

.web3-nftstakecard__id,
.web3-bondcard__id {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--ink);
    opacity: 0.6;
    font-weight: 700;
}

.web3-nftstakecard__amount,
.web3-bondcard__principal {
    font-size: 22px;
    font-weight: 700;
    color: var(--lime);
    line-height: 1.1;
}

.web3-nftstakecard__lock,
.web3-nftstakecard__floor,
.web3-bondcard__maturity {
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--ink);
    text-transform: uppercase;
}

.web3-nftstakecard__floor--eligible { color: var(--cyan); font-weight: 700; }
.web3-bondcard__maturity--matured   { color: var(--cyan); font-weight: 700; }

.web3-nftstakecard__yield,
.web3-bondcard__yield {
    font-size: 12px;
    color: var(--ink);
    opacity: 0.85;
}

.web3-nftstakecard__actions,
.web3-bondcard__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.web3-nftstakecard__action,
.web3-bondcard__action {
    background: var(--bg);
    border: 2px solid var(--ink);
    color: var(--ink);
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    font-weight: 700;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 2px 2px 0 var(--surface-2);
    transition: transform 0.1s var(--ease-pop), box-shadow 0.1s var(--ease-soft);
}

.web3-nftstakecard__action:hover,
.web3-bondcard__action:hover {
    color: var(--cyan);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--ink);
}

/* GaugeRow primitive (used in bribes claim list) */

.portfolio-bribes { display: flex; flex-direction: column; gap: 8px; }

.web3-gaugerow {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1.4fr 1.4fr 1.2fr 0.8fr auto;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    background: var(--bg-2);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--line-2);
    transition: transform .2s var(--ease-pop), box-shadow .2s var(--ease-soft);
}

.portfolio-bribes .web3-gaugerow:nth-child(2n+1) { border-color: var(--purple); box-shadow: 4px 4px 0 var(--purple); }
.portfolio-bribes .web3-gaugerow:nth-child(2n)   { border-color: var(--cyan);   box-shadow: 4px 4px 0 var(--cyan); }
.web3-gaugerow:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 currentColor; }

.web3-gaugerow__label  { font-weight: 700; letter-spacing: 0.12em; color: var(--cyan); }
.web3-gaugerow__epoch  { letter-spacing: 0.18em; opacity: 0.7; font-size: 10px; }
.web3-gaugerow__epoch--closed { color: var(--magenta); opacity: 1; }
.web3-gaugerow__votes  { color: var(--ink); }
.web3-gaugerow__bribes { color: var(--lime); font-weight: 700; }
.web3-gaugerow__share  { letter-spacing: 0.12em; }
.web3-gaugerow__apr    { color: var(--yellow); font-weight: 700; }
.web3-gaugerow__actions { display: flex; gap: 6px; }
.web3-gaugerow__action {
    background: var(--bg);
    border: 2px solid var(--ink);
    color: var(--ink);
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    font-weight: 700;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--surface-2);
    transition: transform 0.1s var(--ease-pop), box-shadow 0.1s var(--ease-soft);
}

.web3-gaugerow__action:hover {
    color: var(--cyan);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--ink);
}

/* ATHN balance section */

.portfolio-athn-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.portfolio-athn-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 36px;
    font-weight: 700;
    color: var(--lime);
}

.portfolio-athn-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: var(--ink);
    margin: 0;
    line-height: 1.5;
    max-width: 580px;
}

/* Empty-state pattern */

.portfolio-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 0 6px;
}

.portfolio-empty-headline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--magenta);
    font-weight: 700;
}

.portfolio-empty-body {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: var(--ink);
    margin: 0;
    line-height: 1.5;
    max-width: 640px;
}

.portfolio-empty-cta {
    margin-top: 4px;
    background: var(--cyan);
    color: var(--bg);
    border: 2px solid var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.12s var(--ease-pop), box-shadow 0.12s var(--ease-soft);
}

.portfolio-empty-cta:hover {
    background: var(--cyan-bright);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
}

/* ── COMING SOON STUB ──────────────────────────────────────────────── */

.coming-soon {
    max-width: 720px;
    margin: 0 auto;
    padding: 96px 32px;
    display: flex;
    justify-content: center;
}

.coming-soon-card {
    background: var(--surface);
    border: 2px solid var(--cyan);
    padding: 44px;
    border-radius: var(--radius-3);
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-shadow: 6px 6px 0 var(--cyan);
    position: relative;
    overflow: hidden;
}

.coming-soon-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--magenta), var(--lime), var(--cyan), var(--yellow), var(--purple-bright));
}

.coming-soon-back {
    align-self: flex-start;
    background: transparent;
    border: none;
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.coming-soon-title {
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: 48px;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.03em;
}

.coming-soon-body {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    color: var(--ink);
    margin: 0;
    line-height: 1.5;
}

.coming-soon-tag {
    align-self: flex-start;
    background: var(--bg);
    border: 2px solid var(--cyan);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 4px;
    margin-top: 6px;
    box-shadow: 2px 2px 0 var(--cyan-deep);
}

/* Responsive */

@media (max-width: 880px) {
    .portfolio-ve-card { grid-template-columns: 1fr; }
    .web3-gaugerow {
        grid-template-columns: 1fr 1fr;
        row-gap: 8px;
    }
    .web3-gaugerow__actions { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Marketing / SEO landing page (landing.html — served at /).
   Single viewport, no scroll. Brand top, hero centred, live-stats +
   minimal footer pinned to the bottom. Hyper-concise copy — every text
   element ALL-CAPS mono or display 800. Reuses the dapp's `.hero/.hero-*`
   classes verbatim so the visual language is identical.
   ═══════════════════════════════════════════════════════════════════════ */

.landing-body {
    background: var(--bg);
    color: var(--c-text-strong);
    font-family: var(--font-body);
    margin: 0;
}
/* Single-viewport lock. `dvh` accounts for mobile address-bar collapse;
   `overflow:hidden` guarantees no scrollbars even on quirky measure. */
.landing-body.lp-single {
    height: 100dvh;
    min-height: 600px;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    position: relative;
}

/* =============================================================================
   GAME-JUICE BEAT FX — Console Rainlight stem-driven animation pulses
   Each stem gets its own keyframe so the kick / bass / guitar / synth / other
   each hit different UI elements. Transform/colour only (GPU-composited) —
   no layout reflow. Snappy attack, eased decay; squash-and-stretch over
   uniform scale; overshoot/back curves so it feels like a hit.
   ============================================================================= */

/* Smack — bigger displacement + faster recovery. The brand / CTA / badge
   get this on every drum kick. Includes a tiny rotation for that
   "stamp" feel without breaking the chunky 2D rule. */
@keyframes juice-kick {
    0%   { transform: translateY(0) scale(1) rotate(0); }
    14%  { transform: translateY(-9px) scale(1.10, 0.90) rotate(-1.5deg); }
    48%  { transform: translateY(3px) scale(0.95, 1.05) rotate(0.8deg); }
    100% { transform: translateY(0) scale(1) rotate(0); }
}
/* Bass squash — heavier than the kick. Used on the hero title so the
   whole headline visibly THUMPS on each bass hit. */
@keyframes juice-squash {
    0%   { transform: scale(1, 1) skewX(0); }
    18%  { transform: scale(1.06, 0.88) skewX(-1deg); }
    52%  { transform: scale(0.96, 1.04) skewX(0.5deg); }
    100% { transform: scale(1, 1) skewX(0); }
}
/* Guitar flash — brief brightness + saturation hit on the accent gradient.
   Stays inside the chunky 2D rule (no blur, no glow, just a colour kick). */
@keyframes juice-flash-accent {
    0%, 100% { filter: none; transform: scale(1); }
    18%      { filter: brightness(1.45) saturate(1.35) contrast(1.1); transform: scale(1.04); }
}
/* Synth slide — staggered horizontal lurch on the sub-lines. */
@keyframes juice-slide {
    0%   { transform: translateX(0) scale(1); }
    22%  { transform: translateX(-6px) scale(1.03, 0.97); }
    62%  { transform: translateX(5px) scale(0.98, 1.02); }
    100% { transform: translateX(0) scale(1); }
}
/* Other-stem pop — proof stat numbers blow up briefly. */
@keyframes juice-proof-pop {
    0%   { transform: scale(1); color: var(--lime-bright); }
    20%  { transform: scale(1.32) rotate(-3deg); color: var(--pink-bright); }
    60%  { transform: scale(0.96) rotate(1deg); color: var(--cyan-bright); }
    100% { transform: scale(1); color: var(--lime-bright); }
}
@keyframes juice-body-shake {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-3px, 2px); }
    55%      { transform: translate(3px, -2px); }
    80%      { transform: translate(-1px, 1px); }
}
/* Cycling background hue — drives the whole page through a slow palette
   sweep so even quiet sections feel alive. Applied at a very low alpha
   so it never fights the brand colours. */
@keyframes juice-bg-cycle {
    0%   { background: var(--bg); }
    25%  { background: #0F0A14; }
    50%  { background: #0A1014; }
    75%  { background: #110A14; }
    100% { background: var(--bg); }
}

.lp-brand.is-kicking,
.lp-brand-inner.is-kicking { animation: juice-kick 340ms cubic-bezier(.34,1.56,.64,1); display: inline-flex; align-items: center; gap: 10px; transform-origin: center center; }
.hero-badge.is-kicking     { animation: juice-kick 340ms cubic-bezier(.34,1.56,.64,1); transform-origin: center center; }
.lp-cta.is-kicking         { animation: juice-kick 340ms cubic-bezier(.34,1.56,.64,1); transform-origin: center center; }
.hero-title.is-bassing     { animation: juice-squash 460ms cubic-bezier(.34,1.56,.64,1); transform-origin: center bottom; }
.hero-accent.is-flashing   { animation: juice-flash-accent 420ms ease-out; display: inline-block; transform-origin: center center; }
.hero-sub-line.is-sliding  { animation: juice-slide 360ms cubic-bezier(.34,1.56,.64,1); display: inline-block; }
.lp-proof-cell.is-popping b { animation: juice-proof-pop 420ms cubic-bezier(.34,1.56,.64,1); display: inline-block; transform-origin: center center; }
.landing-body.is-shaking   { animation: juice-body-shake 220ms ease-out; }

/* Always-on hue cycle on the body, very slow + low contrast so it just
   adds the faintest "the room is breathing" mood under the blurred viz. */
.landing-body.lp-single {
    animation: juice-bg-cycle 18s ease-in-out infinite;
}

/* Hero title text-shadow — single subtle offset, no double-vision ghost. */
.hero-title {
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.hero-title.is-bassing {
    animation: juice-squash 460ms cubic-bezier(.34, 1.56, .64, 1);
}

.lp-audio-toggle.is-playing .lp-audio-icon {
    display: inline-block;
    animation: juice-kick 600ms ease-out infinite;
}

/* Music-reactive bg layer. The SVG is rendered chunky-2D inside (sharp
   ink borders, offset shadows, no internal blur), then the WHOLE layer
   is blurred via CSS filter so the disks become ambient pulses of
   colour behind the hero copy. Saturated boost so the blurred bloom
   still reads as the Athanor palette and not a muddy grey. */
.lp-viz {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
    opacity: 0.92;
    will-change: transform;
}
.landing-body.lp-single > .lp-nav,
.landing-body.lp-single > .lp-main,
.landing-body.lp-single > .lp-proof,
.landing-body.lp-single > .lp-foot-min {
    position: relative;
    z-index: 1;
}

/* Soundtrack toggle — chunky pill that mirrors the lp-cta language but
   inverted (transparent body, ink border) so it reads as a utility. */
.lp-audio-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--ink) !important;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer;
    transition: transform .15s var(--ease-pop), box-shadow .15s var(--ease-pop), background .2s var(--ease-soft);
    margin-right: 4px;
}
.lp-audio-toggle:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--ink);
}
.lp-audio-toggle:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
}
.lp-audio-toggle.is-playing {
    background: var(--lime);
    color: #000 !important;
}
.lp-audio-icon { font-size: 14px; line-height: 1; }
@media (max-width: 900px) {
    .lp-audio-toggle .lp-audio-label { display: none; }
    .lp-audio-toggle { padding: 9px 11px; }
}

.lp-nav-min {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 40px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
.lp-brand {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none;
    color: var(--c-text-strong);
}
.lp-brand-fire { font-size: 22px; line-height: 1; }
.lp-brand-mark {
    font-family: 'Boldonse', var(--font-display);
    font-size: 20px;
    letter-spacing: 0.04em;
    color: var(--c-text-strong);
}
.lp-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px;
    border-radius: var(--radius-pill);
    background: var(--lime);
    color: #000 !important;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    text-decoration: none;
    transition: transform .2s var(--ease-pop), box-shadow .2s var(--ease-pop);
}
.lp-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}
.lp-cta:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}

/* Hero centred in remaining viewport space; fills 1fr row of the grid. */
.lp-main {
    display: flex; align-items: center; justify-content: center;
    padding: 0 40px;
    min-height: 0;
}
.lp-hero-inner {
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    gap: 18px;
    max-width: 1000px;
}
.lp-hero-inner .hero-title {
    font-size: clamp(48px, 7vw, 88px);
    line-height: 0.96;
}
.lp-hero-inner .hero-sub { margin: 6px auto 0; gap: 4px; }
.lp-hero-inner .hero-actions { margin-top: 16px; }

/* Live-stats trust row — single horizontal line above the foot. */
.lp-proof {
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 40px;
    background: var(--bg);
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-strong);
}
.lp-proof-cell { color: var(--c-text-strong); }
.lp-proof-cell b {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--lime-bright);
    margin-right: 4px;
    letter-spacing: -0.01em;
}
.lp-proof-dot { color: var(--c-text-soft); }

/* Minimal single-line footer. */
.lp-foot-min {
    display: flex; justify-content: space-between; align-items: center;
    gap: 22px;
    padding: 14px 40px 16px;
    background: var(--bg);
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow-sm-size);
    font-weight: 700;
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-strong);
}
.lp-foot-link { color: var(--c-text-strong); text-decoration: none; transition: color .2s var(--ease-soft); }
.lp-foot-link:hover { color: var(--lime-bright); }
.lp-foot-dot { color: var(--c-text-soft); }
.lp-foot-r { display: inline-flex; align-items: center; gap: 10px; }

@media (max-width: 900px) {
    .lp-nav-min { padding: 14px 20px; }
    .lp-main { padding: 0 20px; }
    .lp-proof { gap: 8px; padding: 10px 20px; font-size: 9px; }
    .lp-foot-min { padding: 12px 20px 14px; flex-direction: column; gap: 6px; align-items: flex-start; }
    .lp-hero-inner { gap: 14px; }
    .lp-hero-inner .hero-title { font-size: clamp(36px, 8vw, 64px); }
}
@media (max-height: 720px) {
    .lp-hero-inner .hero-title { font-size: clamp(40px, 5.5vw, 64px); }
    .lp-hero-inner .hero-sub { font-size: 12px; }
    .lp-hero-inner .hero-actions { margin-top: 10px; }
    .lp-hero-inner .hero-btn { padding: 12px 22px; font-size: 14px; }
}



/* =============================================================================
   INTERACTIVE PAGES — AthnLock / Bribes / AthnVotes
   Reuses the established design language: saturated colored borders + matching
   solid offset shadows on every panel. Section accents per page audience.
   ============================================================================= */

/* ── AthnLock ──────────────────────────────────────────────────────── */

.athnlock {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 32px 32px 96px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    color: var(--ink);
}

.athnlock-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.athnlock-eyebrow,
.bribes-eyebrow,
.athnvotes-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--cyan);
    font-weight: 700;
    margin-top: 8px;
}

.athnlock-title,
.bribes-title,
.athnvotes-title {
    font-family: var(--font-display);
    font-size: clamp(48px, 7vw, 88px);
    color: var(--ink);
    letter-spacing: -0.04em;
    line-height: 0.95;
    margin: 4px 0 6px;
    font-weight: 800;
}

.athnlock-tag,
.bribes-tag,
.athnvotes-tag {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    line-height: 1.5;
    margin: 0;
    max-width: 720px;
}

.athnlock-section-title,
.bribes-section-title,
.athnvotes-section-title {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.25em;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 12px;
}

/* Existing-lock panel: magenta accent — same as portfolio veATHN section */

.athnlock-existing {
    background: var(--surface);
    border: 2px solid var(--magenta);
    border-radius: var(--radius-3);
    padding: 28px;
    box-shadow: 6px 6px 0 var(--magenta);
}

.athnlock-existing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 24px;
    align-items: start;
}

.athnlock-existing-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.athnlock-statrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    gap: 16px;
}

.athnlock-statrow-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--ink);
    opacity: 0.7;
    font-weight: 700;
}

.athnlock-statrow-value {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

.athnlock-statrow-value--lime  { color: var(--lime); }
.athnlock-statrow-value--cyan  { color: var(--cyan); }
.athnlock-statrow-value--amber { color: var(--amber); }
.athnlock-statrow-value--ink   { color: var(--ink); }

.athnlock-existing-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-2);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
    padding: 16px;
    box-shadow: 4px 4px 0 var(--line-2);
}

.athnlock-chart-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--ink);
    opacity: 0.7;
    font-weight: 700;
}

.athnlock-existing-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* New-lock panel: lime accent — invitation to commit */

.athnlock-new {
    background: var(--surface);
    border: 2px solid var(--lime);
    border-radius: var(--radius-3);
    padding: 28px;
    box-shadow: 6px 6px 0 var(--lime);
}

.athnlock-new-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.athnlock-new-balance {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--ink);
    opacity: 0.8;
    font-weight: 700;
}

.athnlock-new-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 2px solid var(--cyan);
    border-radius: var(--radius-2);
    padding: 16px 18px;
    background: var(--bg-2);
    box-shadow: 4px 4px 0 var(--cyan);
}

.athnlock-new-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.athnlock-new-preview-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--ink);
    opacity: 0.7;
    font-weight: 700;
}

.athnlock-new-preview-value {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--cyan);
}

/* CTA buttons reused across AthnLock / Bribes / AthnVotes */

.athnlock-cta {
    align-self: flex-start;
    background: var(--cyan);
    color: var(--bg);
    border: 2px solid var(--cyan);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.22em;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform 0.12s var(--ease-pop), box-shadow 0.12s var(--ease-soft);
}

.athnlock-cta:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--cyan-bright);
}

.athnlock-cta--primary {
    background: var(--cyan);
    color: var(--bg);
}

.athnlock-cta--disabled {
    background: var(--surface-3);
    border-color: var(--line-2);
    color: var(--ink);
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: 4px 4px 0 var(--surface-2);
}

/* VeLock primitive — style the lib's class hooks */

.web3-velock {
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

.web3-velock__amount { min-width: 0; }

.web3-velock__slider {
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--surface-3);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.web3-velock__slider::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    background: var(--lime);
    border: 2px solid var(--ink);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink);
}

.web3-velock__slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--lime);
    border: 2px solid var(--ink);
    border-radius: 50%;
    cursor: pointer;
}

.web3-velock__readout {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--lime);
    letter-spacing: 0.1em;
    min-width: 90px;
    text-align: right;
}

.web3-velock__preview {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.web3-velock__preview-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--ink);
    opacity: 0.7;
    font-weight: 700;
}

.web3-velock__preview-value {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--cyan);
}

/* ── Bribes ────────────────────────────────────────────────────────── */

.bribes {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 32px 32px 96px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    color: var(--ink);
}

.bribes-form {
    background: var(--surface);
    border: 2px solid var(--amber);
    border-radius: var(--radius-3);
    padding: 28px;
    box-shadow: 6px 6px 0 var(--amber);
}

.bribes-form-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bribes-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bribes-form-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--ink);
    opacity: 0.7;
    font-weight: 700;
}

.bribes-form-gauges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bribes-gauge-chip {
    background: var(--bg-2);
    border: 2px solid var(--line-3);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--line-2);
    transition: transform 0.12s var(--ease-pop), box-shadow 0.12s var(--ease-soft);
}

.bribes-gauge-chip:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--amber);
    border-color: var(--amber);
    color: var(--amber);
}

.bribes-gauge-chip--selected {
    background: var(--amber);
    color: var(--bg);
    border-color: var(--amber);
    box-shadow: 3px 3px 0 var(--ink);
}

.bribes-form-input {
    background: var(--bg-2);
    border: 2px solid var(--line-3);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    padding: 14px 18px;
    border-radius: var(--radius-2);
    outline: none;
}

.bribes-form-input:focus {
    border-color: var(--amber);
    box-shadow: 3px 3px 0 var(--amber);
}

.bribes-form-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}

.bribes-form-hint {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    opacity: 0.85;
    margin: 0;
    max-width: 460px;
    line-height: 1.5;
}

.bribes-list {
    background: var(--surface);
    border: 2px solid var(--purple);
    border-radius: var(--radius-3);
    padding: 28px;
    box-shadow: 6px 6px 0 var(--purple);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bribes-list-hint {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    margin: 0;
    line-height: 1.5;
}

.bribes-list-link {
    color: var(--cyan);
    font-weight: 700;
}

.bribes-list-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bribes-list-grid .web3-gaugerow:nth-child(2n+1) {
    border-color: var(--purple);
    box-shadow: 4px 4px 0 var(--purple);
}

.bribes-list-grid .web3-gaugerow:nth-child(2n) {
    border-color: var(--lime);
    box-shadow: 4px 4px 0 var(--lime);
}

/* ── AthnVotes ─────────────────────────────────────────────────────── */

.athnvotes {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 32px 32px 96px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    color: var(--ink);
}

.athnvotes-summary {
    background: var(--surface);
    border: 2px solid var(--magenta);
    border-radius: var(--radius-3);
    padding: 28px;
    box-shadow: 6px 6px 0 var(--magenta);
}

.athnvotes-summary-grid.detail-stats {
    grid-template-columns: repeat(3, 1fr);
}

.athnvotes-empty {
    background: var(--surface);
    border: 2px solid var(--magenta);
    border-radius: var(--radius-3);
    padding: 32px;
    box-shadow: 6px 6px 0 var(--magenta);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.athnvotes-empty-body {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    margin: 0;
    line-height: 1.5;
    max-width: 580px;
}

.athnvotes-list {
    background: var(--surface);
    border: 2px solid var(--cyan);
    border-radius: var(--radius-3);
    padding: 28px;
    box-shadow: 6px 6px 0 var(--cyan);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.athnvotes-list-hint {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    margin: 0;
    line-height: 1.5;
}

.athnvotes-list-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.athnvotes-list-grid .web3-gaugerow:nth-child(3n+1) { border-color: var(--cyan);    box-shadow: 4px 4px 0 var(--cyan); }
.athnvotes-list-grid .web3-gaugerow:nth-child(3n+2) { border-color: var(--magenta); box-shadow: 4px 4px 0 var(--magenta); }
.athnvotes-list-grid .web3-gaugerow:nth-child(3n)   { border-color: var(--lime);    box-shadow: 4px 4px 0 var(--lime); }

/* Responsive */

@media (max-width: 880px) {
    .athnlock-existing-grid { grid-template-columns: 1fr; }
    .web3-velock {
        grid-template-columns: 1fr;
    }
    .web3-velock__readout { text-align: left; }
}

.athnlock-new-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-2);
    border: 2px solid var(--lime);
    border-radius: var(--radius-2);
    padding: 16px;
    box-shadow: 4px 4px 0 var(--lime);
}


/* ── /create gate ─────────────────────────────────────────────────── */

.create-gate {
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 32px 96px;
}

.create-gate-card {
    background: var(--surface);
    border: 2px solid var(--magenta);
    border-radius: var(--radius-3);
    padding: 36px;
    box-shadow: 6px 6px 0 var(--magenta);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.create-gate-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--magenta);
    font-weight: 700;
    margin-top: 8px;
}

.create-gate-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1.0;
    font-weight: 800;
    margin: 4px 0 6px;
}

.create-gate-body {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    line-height: 1.55;
    margin: 0;
    max-width: 600px;
}

.create-gate-stat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--bg-2);
    border: 2px solid var(--cyan);
    border-radius: var(--radius-2);
    padding: 16px 20px;
    box-shadow: 4px 4px 0 var(--cyan);
    margin: 8px 0 4px;
}

.create-gate-stat-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--ink);
    opacity: 0.7;
    font-weight: 700;
}

.create-gate-stat-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--cyan);
    letter-spacing: -0.02em;
}

.create-gate-stat-required {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--ink);
    opacity: 0.7;
    font-weight: 700;
}

/* ── TokenDetail sell-tab floor-protection CTA ────────────────────── */

.tp-floor-cta {
    background: var(--bg-2);
    border: 2px solid var(--lime);
    border-radius: var(--radius-2);
    padding: 16px 18px;
    box-shadow: 4px 4px 0 var(--lime);
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tp-floor-cta-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--lime);
    font-weight: 700;
}

.tp-floor-cta-body {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    line-height: 1.5;
    margin: 0;
}

.tp-floor-cta-strong {
    color: var(--lime);
    font-weight: 700;
}

/* Platform fee split has 5 slices in a sidebar that's only ~280px wide.
   Stack 1 column so each row reads cleanly with full label.   */

.tp-fee-split-grid--platform {
    grid-template-columns: 1fr !important;
}

/* ── /keepers ─────────────────────────────────────────────────────── */

.keepers {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 32px 32px 96px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    color: var(--ink);
}

.keepers-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--cyan);
    font-weight: 700;
    margin-top: 8px;
}

.keepers-title {
    font-family: var(--font-display);
    font-size: clamp(48px, 7vw, 88px);
    color: var(--ink);
    letter-spacing: -0.04em;
    line-height: 0.95;
    margin: 4px 0 6px;
    font-weight: 800;
}

.keepers-tag {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    line-height: 1.5;
    margin: 0;
    max-width: 720px;
}

.keepers-section-title {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.25em;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 12px;
}

.keepers-list {
    background: var(--surface);
    border: 2px solid var(--cyan);
    border-radius: var(--radius-3);
    padding: 28px;
    box-shadow: 6px 6px 0 var(--cyan);
}

.keepers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
}

.keepers-card {
    background: var(--bg-2);
    border: 2px solid var(--line-3);
    border-radius: var(--radius-2);
    padding: 22px;
    box-shadow: 4px 4px 0 var(--line-2);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .2s var(--ease-pop), box-shadow .2s var(--ease-soft);
}

.keepers-card--cyan    { border-color: var(--cyan);    box-shadow: 4px 4px 0 var(--cyan); }
.keepers-card--magenta { border-color: var(--magenta); box-shadow: 4px 4px 0 var(--magenta); }
.keepers-card--amber   { border-color: var(--amber);   box-shadow: 4px 4px 0 var(--amber); }
.keepers-card--purple  { border-color: var(--purple);  box-shadow: 4px 4px 0 var(--purple); }
.keepers-card:hover    { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 currentColor; }

.keepers-card-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: currentColor;
    font-weight: 700;
    opacity: 0.85;
}

.keepers-card--cyan    .keepers-card-eyebrow { color: var(--cyan); }
.keepers-card--magenta .keepers-card-eyebrow { color: var(--magenta); }
.keepers-card--amber   .keepers-card-eyebrow { color: var(--amber); }
.keepers-card--purple  .keepers-card-eyebrow { color: var(--purple); }

.keepers-card-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin: 2px 0 0;
}

.keepers-card-target {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink);
    opacity: 0.8;
    margin: 0;
}

.keepers-card-target-val {
    color: var(--ink);
    font-weight: 700;
}

.keepers-card-desc {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    margin: 4px 0 0;
    line-height: 1.5;
}

.keepers-card-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.keepers-statrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 6px;
}

.keepers-statrow-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--ink);
    opacity: 0.7;
    font-weight: 700;
}

.keepers-statrow-value {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--lime);
}

.keepers-card .athnlock-cta {
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Cross-page design-language normalisation.
   The Explore home is the gold standard. This block lives at the END of
   the stylesheet so its rules win the cascade against earlier per-page
   nth-child / rainbow patterns. Every non-token-card panel and tile gets:
     · ink (white) border
     · 4-6px solid offset shadow (default lime — the "rising-floor" accent)
     · ALL-CAPS mono labels via .ds-label / *-label hierarchy
   Semantic colour is reserved for VALUES, never for borders/labels.
   ═══════════════════════════════════════════════════════════════════════ */

/* — Detail-stats pills (token detail + ATHN hero stats). Kill rainbow. — */
.detail-stats > .ds,
.detail-stats > .ds:nth-child(4n+1),
.detail-stats > .ds:nth-child(4n+2),
.detail-stats > .ds:nth-child(4n+3),
.detail-stats > .ds:nth-child(4n),
.detail-stats > .ds:nth-child(5),
.detail-stats > .ds:nth-child(6) {
    border-color: var(--ink) !important;
    box-shadow: 4px 4px 0 var(--lime) !important;
}

/* — Flywheel steps (token detail bottom). Uniform lime. — */
.fw-step,
.fw-step:nth-child(odd),
.fw-step:nth-child(even),
.fw-step:nth-child(4n+3),
.fw-step:nth-child(4n+5),
.fw-step:nth-child(4n+7) {
    border-color: var(--ink) !important;
    box-shadow: 5px 5px 0 var(--lime) !important;
}

/* — ATHN sub-nav buttons. Kill rainbow; primary lime, others ink. — */
.athn-subnav-link,
.athn-subnav-link:nth-child(1),
.athn-subnav-link:nth-child(2),
.athn-subnav-link:nth-child(3),
.athn-subnav-link:nth-child(4) {
    border-color: var(--ink) !important;
    box-shadow: 4px 4px 0 var(--ink) !important;
}
.athn-subnav-link--primary {
    background: var(--lime) !important;
    color: #000 !important;
    border-color: var(--ink) !important;
    box-shadow: 4px 4px 0 var(--lime) !important;
}

/* — Showcase sections (legacy). Uniform. — */
.showcase__section,
.showcase__section:nth-child(odd),
.showcase__section:nth-child(even),
.showcase__section:nth-child(3n),
.showcase__section:nth-child(5n),
.showcase__section:nth-child(7n) {
    border-color: var(--ink) !important;
    box-shadow: 6px 6px 0 var(--lime) !important;
}

/* — Generic page panel normalisation. Any of these classes that
     previously opted into a coloured border + matching shadow now
     collapses to ink + lime so every page reads from the same family
     as the Explore cards. — */
.athn-user-tile,
.athn-user-tile--empty,
.athn-feeflow,
.athn-feeflow-frame,
.bribes-section,
.bribes-place,
.bribes-active,
.bribes-row,
.bribes-form,
.bribes-form-card,
.bribes-list,
.portfolio-section,
.portfolio-tile,
.portfolio-athn-card,
.portfolio-velock,
.portfolio-stake-card,
.portfolio-bond-card,
.portfolio-bribe-card,
.keepers-card,
.keepers-actions,
.athnlock-section,
.athnlock-existing,
.athnlock-new,
.athnlock-new-card,
.athnlock-new-preview,
.athnlock-existing-chart,
.athnlock-card,
.athnvotes-section,
.athnvotes-summary,
.athnvotes-empty,
.athnvotes-list {
    border-color: var(--ink) !important;
    box-shadow: 5px 5px 0 var(--lime) !important;
}

/* — Per-row rainbow borders on gauge / activity / keeper / portfolio
     rows. Kill the rainbow; uniform ink + lime. — */
.athnvotes-list-grid .web3-gaugerow,
.athnvotes-list-grid .web3-gaugerow:nth-child(3n+1),
.athnvotes-list-grid .web3-gaugerow:nth-child(3n+2),
.athnvotes-list-grid .web3-gaugerow:nth-child(3n),
.bribes-list-grid .web3-gaugerow,
.bribes-list-grid .web3-gaugerow:nth-child(3n+1),
.bribes-list-grid .web3-gaugerow:nth-child(3n+2),
.bribes-list-grid .web3-gaugerow:nth-child(3n),
.portfolio-bribes .web3-gaugerow,
.portfolio-bribes .web3-gaugerow:nth-child(2n+1),
.portfolio-bribes .web3-gaugerow:nth-child(2n),
.portfolio-section--stakes .portfolio-grid-cell,
.portfolio-section--stakes .portfolio-grid-cell:nth-child(3n+1),
.portfolio-section--stakes .portfolio-grid-cell:nth-child(3n+2),
.portfolio-section--stakes .portfolio-grid-cell:nth-child(3n),
.portfolio-section--bonds .portfolio-grid-cell,
.portfolio-section--bonds .portfolio-grid-cell:nth-child(2n+1),
.portfolio-section--bonds .portfolio-grid-cell:nth-child(2n),
.portfolio-grid-cell {
    border-color: var(--ink) !important;
    box-shadow: 4px 4px 0 var(--lime) !important;
}

/* — Page-section H2s (e.g. "PLACE A BRIBE", "STAKE POSITIONS"). ALL-CAPS
     mono eyebrow — matches the rest of the dapp. — */
.athn-user-title,
.athn-feeflow-title,
.portfolio-section-title,
.bribes-section-title,
.athnlock-section-title,
.athnvotes-section-title,
.keepers-section-title {
    font-family: var(--font-mono) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--t-track-eyebrow) !important;
    font-weight: 700 !important;
    font-size: var(--t-eyebrow-size) !important;
}

/* — Page H1 titles match Explore's "Tokens" h2: Bricolage display 800,
     title-case, tight tracking. (Not mono ALL-CAPS — that mangles big
     headlines into wide stretched bands.) — */
.bribes-title,
.athnlock-title,
.athnvotes-title,
.keepers-title {
    font-family: var(--font-display) !important;
    font-size: clamp(40px, 5vw, 56px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.02 !important;
    text-transform: none !important;
    color: var(--c-text-strong) !important;
}

/* — Sentence-case body prose inside hyper-pop panels. Tighten to mono
     uppercase tracking so it reads as designed eyebrow copy, not a
     dev-pasted paragraph. — */
.athn-hero-tag,
.athn-feeflow-tag,
.athn-feeflow-foot,
.athn-user-tile-hint,
.bribes-tag,
.bribes-place-foot,
.bribes-active-tag,
.bribes-list-hint,
.bribes-form-hint,
.portfolio-tag,
.portfolio-athn-hint,
.portfolio-velock-hint,
.portfolio-stake-hint,
.athnlock-tag,
.athnvotes-tag,
.athnvotes-list-hint,
.athnvotes-empty-body,
.keepers-tag,
.keepers-card-desc,
.keepers-card-target,
.create-sub,
.cs-note,
.bt-note {
    font-family: var(--font-mono) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: var(--t-mono-sm-size) !important;
    font-weight: 600 !important;
    color: var(--c-text-strong) !important;
    line-height: 1.5 !important;
}

/* — Kill greyscale text muting via `opacity` (see feedback_no_grey_text.md).
     Opacity on white text creates the same desaturated appearance as
     hard-coded greys; both are banned. Hierarchy comes from weight, size
     and tracking — never alpha. Preserves animation / disabled-state
     opacity by enumerating only text-bearing label/value classes. — */
.athn-user-tile-label,
.athn-user-tile-hint,
.portfolio-statrow-label,
.portfolio-statrow-value,
.athnlock-statrow-label,
.athnlock-statrow-value,
.athnlock-chart-label,
.athnlock-new-preview-label,
.athnlock-new-preview-value,
.web3-velock__preview-label,
.web3-velock__preview-value,
.bribes-form-label,
.bribes-form-foot,
.create-gate-stat-label,
.create-gate-stat-required,
.keepers-statrow-label,
.keepers-statrow-value,
.keepers-card-target,
.keepers-card-desc,
.web3-nftstakecard__id,
.web3-bondcard__id,
.web3-gaugerow__epoch,
.web3-gaugerow__label,
.web3-feeflow__legend-bps,
.web3-feeflow__legend-label,
.athn-detail-stats .ds-label,
.detail-stats .ds-label,
.ds-label,
.ds-val,
.sb-label,
.sb-val,
.tc-mini-l,
.tc-mini-v,
.fi-hero-eyebrow,
.fi-hero-unit,
.tc-spread-l,
.tc-grad-eyebrow,
.tc-grad-meta,
.fi-note-line,
.athn-feeflow-foot,
.athn-feeflow-tag,
.athn-hero-tag,
.bribes-tag,
.bribes-list-hint,
.bribes-form-hint,
.bribes-form-label,
.athnvotes-tag,
.athnvotes-list-hint,
.athnvotes-empty-body,
.athnlock-tag,
.keepers-tag,
.portfolio-tag,
.create-sub,
.cs-note,
.bt-note,
.pcp-eyebrow,
.pcp-leg-l,
.pcp-leg-v,
.pcp-foot,
.af-row-secondary,
.af-row-time,
.af-row-primary,
.lp-proof-cell,
.lp-foot-min,
.dh-creator,
.dh-ticker,
.dh-floor {
    opacity: 1 !important;
    color: var(--ink) !important;
}

/* Empty-state values (e.g. "—" placeholder) — keep them visually distinct
   from real values without falling back to grey. Use a subtle dotted
   underline + bright white instead of opacity. */
.athn-user-tile--empty .athn-user-tile-value {
    opacity: 1 !important;
    color: var(--ink) !important;
}


/* ────────────────────────────────────────────────────────────────────────
   DOCS PAGE
   Chunky-2D rundown sitting at the index level (docs.html). Mirrors the
   `keepers` page typography (uppercase eyebrows, ink borders, solid offset
   shadows). Owned classes: .docs-* and .docs-nav-right.
   ──────────────────────────────────────────────────────────────────────── */

/* Nav cluster on landing.html and docs.html — keeps DOCS link adjacent to
   the Open App CTA without rewriting the nav grid. */
.docs-nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Page shell. `landing-body` already supplies background + font setup; we
   override only the layout knobs that differ from the single-viewport hero. */
.docs-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 32px 96px;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

@media (max-width: 768px) {
    .docs-main { padding: 32px 16px 64px; gap: 40px; }
}

.docs-page-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.docs-page-title {
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

.docs-page-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ink);
    margin: 0;
    opacity: 0.85;
}

.docs-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.docs-section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--ink);
    margin: 0;
    padding: 0 0 8px;
    border-bottom: 2px solid var(--ink);
}

/* Card — same anatomy as `.keepers-card` (2px ink border, solid offset
   shadow keyed off the accent color). */
.docs-card {
    background: var(--bg-2, #111);
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg, 18px);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .15s var(--ease-soft, ease-out), box-shadow .15s var(--ease-soft, ease-out);
}

.docs-card--cyan    { border-color: var(--cyan);    box-shadow: 6px 6px 0 var(--cyan); }
.docs-card--magenta { border-color: var(--magenta); box-shadow: 6px 6px 0 var(--magenta); }
.docs-card--amber   { border-color: var(--amber);   box-shadow: 6px 6px 0 var(--amber); }
.docs-card--purple  { border-color: var(--purple);  box-shadow: 6px 6px 0 var(--purple); }

.docs-card-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ink);
}

.docs-card--cyan    .docs-card-eyebrow { color: var(--cyan); }
.docs-card--magenta .docs-card-eyebrow { color: var(--magenta); }
.docs-card--amber   .docs-card-eyebrow { color: var(--amber); }
.docs-card--purple  .docs-card-eyebrow { color: var(--purple); }

.docs-card-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

.docs-card-body {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0;
}

.docs-aside { opacity: 0.92; }

/* Inline emphasis token — used inside .docs-card-body to call out a single
   value or constraint. Mono + lime (consistent with the rest of the dapp's
   "value" tokens). Only on values, never on descriptive prose. */
.docs-hi {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--lime-bright);
    background: rgba(0, 255, 178, 0.10);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Stats row inside the elevator-pitch card. Same shape as `.keepers-card-stats`
   but laid out as a 4-column wrap for the rundown's headline numbers. */
.docs-card-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 2px solid var(--ink);
}

.docs-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.docs-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ink);
    opacity: 0.75;
}

.docs-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--lime-bright);
}

/* Two-up grid for token panels, defenses, etc. Collapses to single column on
   narrow viewports. */
.docs-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

/* Bullet list — uppercase mono numerals, ink hairline between rows. */
.docs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.docs-list li {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    padding-left: 22px;
}

.docs-list li:last-child { border-bottom: none; padding-bottom: 0; }
.docs-list li:first-child { padding-top: 4px; }

.docs-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--cyan-bright);
    font-weight: 700;
}

.docs-list li code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--lime-bright);
}

/* Fee-split — four pill cards laid out horizontally, percentage as the
   biggest typography element. Uses the keeper-card border treatment. */
.docs-fee-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.docs-fee-slice {
    background: var(--bg-2, #111);
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg, 18px);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.docs-fee-slice--cyan    { border-color: var(--cyan);    box-shadow: 4px 4px 0 var(--cyan); }
.docs-fee-slice--magenta { border-color: var(--magenta); box-shadow: 4px 4px 0 var(--magenta); }
.docs-fee-slice--amber   { border-color: var(--amber);   box-shadow: 4px 4px 0 var(--amber); }
.docs-fee-slice--purple  { border-color: var(--purple);  box-shadow: 4px 4px 0 var(--purple); }

.docs-fee-slice-pct {
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.docs-fee-slice--cyan    .docs-fee-slice-pct { color: var(--cyan-bright); }
.docs-fee-slice--magenta .docs-fee-slice-pct { color: var(--magenta); }
.docs-fee-slice--amber   .docs-fee-slice-pct { color: var(--amber); }
.docs-fee-slice--purple  .docs-fee-slice-pct { color: var(--purple); }

.docs-fee-slice-who {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ink);
}

.docs-fee-slice-why {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink);
    opacity: 0.85;
}

/* Lifecycle steps — numbered rows, big mono number on the left. */
.docs-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg, 18px);
    overflow: hidden;
}

.docs-step {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 24px;
    padding: 24px;
    border-bottom: 2px solid var(--ink);
    align-items: start;
}

.docs-step:last-child { border-bottom: none; }

@media (max-width: 600px) {
    .docs-step { grid-template-columns: 64px 1fr; gap: 16px; padding: 18px; }
}

.docs-step-num {
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: var(--cyan-bright);
    letter-spacing: -0.02em;
}

@media (max-width: 600px) {
    .docs-step-num { font-size: 40px; }
}

.docs-step-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.docs-step-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ink);
}

.docs-step-body {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    opacity: 0.92;
}

/* Defense panels — inline-bordered list cards inside the .docs-grid-2 grid. */
.docs-defense {
    background: var(--bg-2, #111);
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg, 18px);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.docs-defense-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--lime-bright);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ink);
}

/* Flywheel — ordered list with circle-numbered markers on the left. */
.docs-flywheel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.docs-flywheel li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    color: var(--ink);
    padding: 10px 0;
}

.docs-flywheel-num {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    background: var(--amber);
}

/* CTA strip at the end of the page. Mirrors the landing hero CTAs. */
.docs-cta-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 16px 0 0;
}

/* ────────────────────────────────────────────────────────────────────────
   DOCS · Wicked-tier visual layer
   Layered on top of the base .docs-* styles. Adds the chunky bordered hero,
   the segmented fee-split bar, big-number twin token panels, the timeline
   strip, mechanism panels, the flywheel chain, and the "what it isn't"
   negative-grid panel. All match the dapp's TokenDetail visual language —
   2px ink borders, solid offset shadows, uppercase mono labels, lime/cyan/
   magenta/amber/purple value tokens, no greys, no glows, no blurred shadows.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.docs-hero {
    border: 2px solid var(--ink);
    border-radius: var(--radius-xl, 24px);
    padding: 56px 40px;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 0, 132, 0.08), transparent 55%),
        radial-gradient(circle at 88% 82%, rgba(0, 255, 178, 0.10), transparent 55%),
        var(--bg-2, #111);
    box-shadow: 8px 8px 0 var(--lime-bright);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

@media (max-width: 768px) {
    .docs-hero { padding: 36px 20px; box-shadow: 6px 6px 0 var(--lime-bright); }
}

.docs-hero-title {
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
}

.docs-hero-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--ink);
    margin: 0;
    opacity: 0.85;
}

.docs-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    width: 100%;
    margin-top: 24px;
    padding-top: 28px;
    border-top: 2px solid var(--ink);
}

.docs-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.docs-hero-stat-num {
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--lime-bright);
}

.docs-hero-stat-pct {
    font-size: 0.55em;
    color: var(--ink);
    margin-left: 2px;
    font-weight: 700;
}

.docs-hero-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ink);
    opacity: 0.85;
}

/* ── Section heading w/ big number prefix ─────────────────────────────── */
.docs-section-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.docs-section-num {
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--cyan-bright);
    letter-spacing: -0.02em;
}

/* Override the .docs-section-title border-bottom inside .docs-section-head
   so we don't double-line. */
.docs-section-head .docs-section-title { border-bottom: none; padding: 0; }

/* ── Big card bump-up ─────────────────────────────────────────────────── */
.docs-card--big {
    padding: 36px;
    border-radius: var(--radius-xl, 24px);
    box-shadow: 8px 8px 0 currentColor;
}

.docs-card--big.docs-card--cyan    { box-shadow: 8px 8px 0 var(--cyan); }
.docs-card--big.docs-card--magenta { box-shadow: 8px 8px 0 var(--magenta); }
.docs-card--big.docs-card--amber   { box-shadow: 8px 8px 0 var(--amber); }
.docs-card--big.docs-card--purple  { box-shadow: 8px 8px 0 var(--purple); }

@media (max-width: 768px) {
    .docs-card--big { padding: 24px; box-shadow: 6px 6px 0 currentColor; }
}

.docs-lede {
    font-size: 19px;
    line-height: 1.5;
}

/* ── Twin token panels ────────────────────────────────────────────────── */
.docs-twin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.docs-twin {
    background: var(--bg-2, #111);
    border: 2px solid var(--ink);
    border-radius: var(--radius-xl, 24px);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .15s var(--ease-soft, ease-out);
}

.docs-twin--magenta { border-color: var(--magenta); box-shadow: 8px 8px 0 var(--magenta); }
.docs-twin--cyan    { border-color: var(--cyan);    box-shadow: 8px 8px 0 var(--cyan); }

.docs-twin-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--ink);
    opacity: 0.85;
}

.docs-twin--magenta .docs-twin-eyebrow { color: var(--magenta); opacity: 1; }
.docs-twin--cyan    .docs-twin-eyebrow { color: var(--cyan-bright); opacity: 1; }

.docs-twin-name {
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: clamp(56px, 7vw, 80px);
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.025em;
}

.docs-twin-byline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ink);
    opacity: 0.85;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink);
}

.docs-twin-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 2px solid var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.docs-twin-foot-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ink);
    opacity: 0.75;
}

.docs-twin-foot-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--lime-bright);
}

/* ── Fee-split panel — segmented bar + grid ──────────────────────────── */
.docs-feepanel {
    border: 2px solid var(--ink);
    border-radius: var(--radius-xl, 24px);
    padding: 32px;
    background: var(--bg-2, #111);
    box-shadow: 8px 8px 0 var(--ink);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (max-width: 768px) {
    .docs-feepanel { padding: 24px; box-shadow: 6px 6px 0 var(--ink); }
}

.docs-feepanel-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ink);
}

.docs-feebar {
    display: flex;
    height: 64px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill, 999px);
    overflow: hidden;
    box-shadow: 4px 4px 0 var(--ink);
}

.docs-feebar-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #000;
    letter-spacing: -0.01em;
    border-right: 2px solid var(--ink);
}

.docs-feebar-seg:last-child { border-right: none; }

.docs-feebar-seg--cyan    { background: var(--cyan-bright); }
.docs-feebar-seg--magenta { background: var(--magenta); color: #fff; }
.docs-feebar-seg--amber   { background: var(--amber); }
.docs-feebar-seg--purple  { background: var(--purple); color: #fff; }

.docs-feegrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.docs-feeitem {
    display: grid;
    grid-template-columns: 14px 50px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 16px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-md, 14px);
    background: rgba(255, 255, 255, 0.02);
    align-items: center;
}

.docs-feeitem-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    grid-row: 1 / 3;
}

.docs-feeitem-dot--cyan    { background: var(--cyan-bright); }
.docs-feeitem-dot--magenta { background: var(--magenta); }
.docs-feeitem-dot--amber   { background: var(--amber); }
.docs-feeitem-dot--purple  { background: var(--purple); }

.docs-feeitem-pct {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--lime-bright);
    grid-row: 1;
}

.docs-feeitem-who {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ink);
    grid-row: 1;
}

.docs-feeitem-why {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.85;
    grid-column: 2 / 4;
    grid-row: 2;
}

.docs-feepanel-foot {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    color: var(--ink);
    margin: 0;
    padding-top: 8px;
    border-top: 2px solid var(--ink);
}

/* ── Timeline ─────────────────────────────────────────────────────────── */
.docs-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 2px solid var(--ink);
    border-radius: var(--radius-xl, 24px);
    background: var(--bg-2, #111);
    box-shadow: 8px 8px 0 var(--cyan);
    overflow: hidden;
}

@media (max-width: 768px) {
    .docs-timeline { box-shadow: 6px 6px 0 var(--cyan); }
}

.docs-tlstep {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 28px;
    padding: 28px 32px;
    border-bottom: 2px solid var(--ink);
    align-items: start;
    transition: background .15s var(--ease-soft, ease-out);
}

.docs-tlstep:last-child { border-bottom: none; }
.docs-tlstep:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }

@media (max-width: 600px) {
    .docs-tlstep { grid-template-columns: 64px 1fr; gap: 16px; padding: 20px; }
}

.docs-tlstep-num {
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: var(--cyan-bright);
    letter-spacing: -0.025em;
}

@media (max-width: 600px) {
    .docs-tlstep-num { font-size: 40px; }
}

.docs-tlstep-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
}

.docs-tlstep-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--ink);
}

.docs-tlstep-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    opacity: 0.92;
}

/* ── Mechanism panels (2x2 grid) ──────────────────────────────────────── */
.docs-mech {
    background: var(--bg-2, #111);
    border: 2px solid var(--ink);
    border-radius: var(--radius-xl, 24px);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .15s var(--ease-soft, ease-out);
}

.docs-mech--cyan    { border-color: var(--cyan);    box-shadow: 6px 6px 0 var(--cyan); }
.docs-mech--magenta { border-color: var(--magenta); box-shadow: 6px 6px 0 var(--magenta); }
.docs-mech--amber   { border-color: var(--amber);   box-shadow: 6px 6px 0 var(--amber); }
.docs-mech--purple  { border-color: var(--purple);  box-shadow: 6px 6px 0 var(--purple); }

.docs-mech-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink);
}

.docs-mech-icon {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.docs-mech--cyan    .docs-mech-icon { color: var(--cyan-bright); }
.docs-mech--magenta .docs-mech-icon { color: var(--magenta); }
.docs-mech--amber   .docs-mech-icon { color: var(--amber); }
.docs-mech--purple  .docs-mech-icon { color: var(--purple); }

.docs-mech-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--ink);
}

/* ── "What it isn't" — negative-statement grid ───────────────────────── */
.docs-isnt-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
}

.docs-isnt-row {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--ink);
    padding: 16px 0;
    border-bottom: 2px solid var(--ink);
    display: flex;
    align-items: center;
    gap: 18px;
}

.docs-isnt-row:last-child { border-bottom: none; }

.docs-isnt-x {
    flex: 0 0 28px;
    height: 28px;
    border: 2px solid var(--magenta);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--magenta);
    background: rgba(255, 0, 132, 0.08);
}

@media (max-width: 600px) {
    .docs-isnt-row { font-size: 11px; gap: 12px; }
}

/* ── Flywheel — chained pill row ──────────────────────────────────────── */
.docs-fw {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: fwcount;
}

.docs-fw-step {
    display: grid;
    grid-template-columns: 44px 1fr 32px;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, 0.04);
}

.docs-fw-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    background: var(--amber);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #000;
    letter-spacing: -0.02em;
}

.docs-fw-text {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.docs-fw-arrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    color: var(--cyan-bright);
    text-align: center;
}

.docs-fw-arrow--loop { color: var(--magenta); font-size: 26px; }

/* ─── Contract-address grid (docs page + dapp footer) ───────────────
   Chunky 2D pop, matches docs section panels. Copy interaction:
   `.docs-addr-pill` is the click target; on success it gets
   `.docs-addr-pill--copied` for 1.1s. */
.docs-addresses-section { margin-top: 56px; }
.docs-addr-grid {
    display: grid; gap: 14px;
    grid-template-columns: 1fr;
    margin-top: 24px;
}
.docs-addr-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px; align-items: center;
    padding: 16px 18px;
    background: var(--surface);
    border: 2px solid var(--ink);
    border-radius: var(--radius-2);
    box-shadow: 4px 4px 0 var(--ink);
}
.docs-addr-meta { min-width: 0; }
.docs-addr-name {
    font-family: 'Boldonse', 'Bricolage Grotesque', sans-serif;
    font-size: 18px; letter-spacing: 0.04em;
    color: #FFFFFF;
    margin-bottom: 4px;
}
.docs-addr-desc {
    font-size: 13px; letter-spacing: 0.02em;
    color: #FFFFFF; opacity: 0.7;
    line-height: 1.4;
}
.docs-addr-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--surface-2, rgba(255,255,255,0.04));
    border: 2px solid var(--ink);
    border-radius: var(--radius-1);
    color: #FFFFFF;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    cursor: pointer;
    transition: transform .15s var(--ease-pop), background .2s var(--ease-soft), border-color .2s var(--ease-soft);
    max-width: 100%;
}
.docs-addr-pill:hover { transform: translateY(-2px); background: rgba(57,255,128,0.06); }
.docs-addr-code {
    font-family: inherit;
    color: #FFFFFF;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 320px;
}
.docs-addr-copy {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800; font-size: 11px; letter-spacing: 0.12em;
    padding: 4px 8px;
    background: var(--lime, #39FF80);
    color: var(--ink) !important;
    border-radius: 6px;
}
.docs-addr-pill--copied { background: rgba(57,255,128,0.18); border-color: var(--lime, #39FF80); }
.docs-addr-pill--copied .docs-addr-copy { background: #FFFFFF; }
.docs-addr-empty {
    padding: 18px;
    background: var(--surface);
    border: 2px dashed var(--ink);
    border-radius: var(--radius-2);
    color: #FFFFFF; opacity: 0.65; font-size: 14px;
    text-align: center;
}

@media (max-width: 720px) {
    .docs-addr-row { grid-template-columns: 1fr; }
    .docs-addr-code { max-width: 100%; }
}

/* ─── Dapp-side contract-addresses footer (compact) ────────────────
   Single-line pill rows, hairline borders, page-relevant only. About
   1/10 the visual weight of the docs-page grid: ~26px tall, monospace
   short address (0xabcd…1234), copy glyph on the right. Clicking the
   whole row copies the full address. */
.contracts-footer-mini {
    margin: 28px auto 16px;
    max-width: 1240px;
    padding: 0 16px;
}
.contracts-footer-mini-grid {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center;
}
.contracts-footer-mini-row {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: #FFFFFF;
    font-size: 11px;
    cursor: pointer;
    transition: background .15s var(--ease-soft), border-color .15s var(--ease-soft);
    min-width: 0;
}
.contracts-footer-mini-row:hover {
    background: rgba(57,255,128,0.06);
    border-color: rgba(57,255,128,0.45);
}
.contracts-footer-mini-row--copied {
    background: rgba(57,255,128,0.14);
    border-color: var(--lime, #39FF80);
}
.contracts-footer-mini-label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700; letter-spacing: 0.08em; font-size: 10px;
    text-transform: uppercase;
    opacity: 0.78;
}
.contracts-footer-mini-addr {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    opacity: 0.95;
}
.contracts-footer-mini-copy {
    font-size: 11px; line-height: 1;
    opacity: 0.55;
}
.contracts-footer-mini-row--copied .contracts-footer-mini-copy {
    color: var(--lime, #39FF80); opacity: 1;
}

/* ─── System-map UML (docs page) ─────────────────────────────────────
   Architecture diagram in our chunky-2D design language:
     · Nodes: 2px ink border + 4px solid offset shadow, dark surface fill,
       white ALL-CAPS Bricolage title + mono uppercase sub-labels.
     · Edges: orthogonal only. Solid white = direct call. Dashed lime =
       PLS flow. Markers white / lime to match.
     · Edge labels: small dark chip with ink border, ALL-CAPS mono text,
       always sit INSIDE a gutter — never overlap a node.
     · Swimlanes labeled in the left margin.
   The whole section breaks out of the docs-main 1100px column so the
   diagram never needs horizontal scroll on a desktop viewport.
   ───────────────────────────────────────────────────────────────────── */
.docs-uml-section {
    margin-top: 56px;
    width: min(1480px, calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(-50%);
}
.docs-uml {
    margin-top: 24px;
    padding: 28px 32px;
    background: var(--surface);
    border: 2px solid var(--ink);
    border-radius: var(--radius-2);
    box-shadow: 6px 6px 0 var(--lime, #84FF8A);
    overflow: hidden;
}
.docs-uml-svg { width: 100%; height: auto; display: block; }

/* Nodes */
.uml-node rect {
    stroke: #FFFFFF; stroke-width: 2;
    fill: var(--surface-2, #1F1F1F);
    filter: drop-shadow(4px 4px 0 rgba(132, 255, 138, 0.55));
}
.uml-node text {
    fill: #FFFFFF;
    font-family: 'Bricolage Grotesque', sans-serif;
}
.uml-title {
    font-size: 14px; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.uml-sub {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    fill: #FFFFFF;
}

/* Category accents — applied as offset-shadow colour (semantic). */
.uml-actor    rect { filter: drop-shadow(4px 4px 0 #FFFFFF); }
.uml-platform rect { filter: drop-shadow(4px 4px 0 #C7B9FF); }
.uml-factory  rect { filter: drop-shadow(4px 4px 0 #84FF8A); fill: #102218; }
.uml-pertoken rect { filter: drop-shadow(4px 4px 0 #FFD24D); }
.uml-oracle   rect { filter: drop-shadow(4px 4px 0 #46EBFF); }
.uml-external rect { filter: drop-shadow(4px 4px 0 #FF8FAB); }

/* Swimlane row labels (far left margin) */
.uml-lane {
    fill: #FFFFFF;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* Edges */
.uml-edge {
    fill: none; stroke: #FFFFFF; stroke-width: 2;
    stroke-linejoin: miter; stroke-linecap: butt;
}
.uml-edge--pls {
    stroke: #84FF8A;
    stroke-dasharray: 6 4;
}

/* Edge labels — small chip backing so the text never sits on a wire. */
.uml-label rect {
    fill: var(--surface, #1A1A1A);
    stroke: #FFFFFF; stroke-width: 1.5;
    rx: 4; ry: 4;
}
.uml-label text {
    fill: #FFFFFF;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
}
.uml-label--pls rect { stroke: #84FF8A; }
.uml-label--pls text { fill: #84FF8A; }

.docs-uml-legend {
    display: flex; flex-wrap: wrap; gap: 16px;
    margin-top: 18px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 2px solid var(--ink);
    border-radius: var(--radius-1);
}
.docs-uml-legend-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.08em;
    color: #FFFFFF;
    text-transform: uppercase;
}
.docs-uml-swatch {
    width: 16px; height: 16px;
    border: 2px solid var(--ink);
    border-radius: 4px;
}
.docs-uml-swatch--ink      { background: #0A0A0A; border-color: #FFFFFF; height: 4px; border-radius: 2px; }
.docs-uml-swatch--pls      { background: #00C45A; height: 4px; border-radius: 2px; border-style: dashed; }
.docs-uml-swatch--platform { background: #C7B9FF; }
.docs-uml-swatch--factory  { background: #39FF80; }
.docs-uml-swatch--pertoken { background: #FFD24D; }
.docs-uml-swatch--external { background: #FF8FAB; }

/* ─── CreateToken extras (cf-gate, cf-helper, cf-warn) ─────────────── */
.cf-gate {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 10px 14px; margin-bottom: 16px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-1);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.08em;
    color: #FFFFFF;
    text-transform: uppercase;
}
.cf-gate--open    { background: rgba(57,255,128,0.10); border-color: var(--lime, #39FF80); }
.cf-gate--closed  { background: rgba(245,158,11,0.08); border-color: var(--amber, #F59E0B); }
.cf-gate-label    { font-weight: 800; }
.cf-gate-balance  { opacity: 0.85; font-size: 11px; }

.cf-helper {
    margin-top: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.06em;
    color: #FFFFFF; opacity: 0.6;
}
.cf-warn {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.45);
    border-radius: var(--radius-1);
    color: #FFFFFF;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

/* ── Deploy celebration — full-juice confetti + redirect overlay ────────
   Fires when a createToken receipt confirms. 80 sticker-bits rain from
   above the viewport while a chunky pop-card names the freshly-launched
   token. Pointer-events stay through the layer so the underlying page
   keeps working; the timer redirects to the new token's detail page
   right as the bits finish settling. */
.deploy-celebrate {
    position: fixed; inset: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
    animation: celebrateIn .25s var(--ease-pop) both;
}
@keyframes celebrateIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.deploy-celebrate__confetti {
    position: absolute; inset: 0;
    pointer-events: none;
}
.deploy-celebrate__bit {
    position: absolute;
    top: -32px;
    width: 14px; height: 18px;
    border-radius: 2px;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    animation-name: confettiFall;
    animation-timing-function: var(--ease-expo-out);
    animation-fill-mode: both;
    will-change: transform, opacity;
}
.deploy-celebrate__bit--lime    { background: var(--lime); }
.deploy-celebrate__bit--magenta { background: var(--magenta); }
.deploy-celebrate__bit--cyan    { background: var(--cyan); }
.deploy-celebrate__bit--amber   { background: var(--amber); }
.deploy-celebrate__bit--purple  { background: var(--purple); }

@keyframes confettiFall {
    0% {
        transform: translate3d(0, -10vh, 0) rotate(0deg) scale(0.6);
        opacity: 0;
    }
    8% {
        opacity: 1;
        transform: translate3d(0, 0vh, 0) rotate(40deg) scale(1);
    }
    100% {
        transform: translate3d(var(--drift, -40px), 110vh, 0) rotate(720deg) scale(0.85);
        opacity: 0;
    }
}

.deploy-celebrate__card {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface);
    border: 3px solid var(--ink);
    border-radius: var(--radius-3);
    padding: 36px 48px 32px;
    text-align: center;
    box-shadow: 8px 8px 0 var(--lime), 8px 8px 0 1px var(--ink);
    animation: celebrateCardIn .55s var(--ease-back-out) both;
    animation-delay: .08s;
    min-width: 360px;
    max-width: 540px;
}
@keyframes celebrateCardIn {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-4deg); }
    65%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(1deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
.deploy-celebrate__rocket {
    font-size: 56px; line-height: 1;
    display: inline-block;
    margin-bottom: 12px;
    animation: rocketKick .9s var(--ease-back-out) infinite alternate;
}
@keyframes rocketKick {
    0%   { transform: translateY(0) rotate(-6deg); }
    100% { transform: translateY(-6px) rotate(6deg); }
}
.deploy-celebrate__eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--lime);
    margin-bottom: 8px;
}
.deploy-celebrate__title {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 800;
    color: var(--c-text-strong);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 12px;
}
.deploy-celebrate__sub {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-text-strong);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────────
   Charge-to-launch button — funpop chunky 2D, full juice on detonation.
   Layers (back → front):
     · sun-ray fan  (rotates + scales with --charge)
     · sticker halo (chunky offset shadow base)
     · gradient fill (climbs with --charge, lime → amber → magenta)
     · conic ring  (fills clockwise)
     · core body  (rocket + label)
     · orbital sparks (8 bits that bloom outward when holding)
     · blast flash (only painted in blasting phase)
   Tuned around CSS custom property --charge in [0,1] supplied by Elm.
   ───────────────────────────────────────────────────────────────────── */

:root {
    --pop-lime:    #00ffb2;
    --pop-amber:   #ffb84d;
    --pop-magenta: #ff60ff;
}

.launch-charge {
    --charge: 0;

    position: relative;
    display: block;
    width: 100%;
    min-height: 96px;
    margin: 24px 0 14px;
    padding: 0;
    border: 3px solid var(--ink);
    border-radius: 22px;
    background: var(--surface);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.005em;
    cursor: pointer;
    overflow: visible;
    isolation: isolate;
    box-shadow: 6px 6px 0 var(--ink);
    transform: translateZ(0);
    transition: box-shadow 0.18s var(--ease-pop), transform 0.18s var(--ease-pop);
    -webkit-tap-highlight-color: transparent;
}

.launch-charge:focus-visible {
    outline: 3px solid var(--pop-lime);
    outline-offset: 4px;
}

/* ── Inner clipping plate for the fill / ring layers ─────────── */
.launch-charge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 19px;
    background: var(--surface);
    z-index: 1;
}

/* ── Sun-ray fan ────────────────────────────────────────────── */
.launch-charge__rays {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%) scale(calc(0.5 + var(--charge) * 0.95));
    opacity: calc(var(--charge) * 0.95);
    transition: opacity 0.18s var(--ease-pop), transform 0.18s var(--ease-pop);
    animation: rays-spin 6s linear infinite;
}
@keyframes rays-spin {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}
.launch-charge__ray {
    position: absolute;
    left: -3.5px; top: -200px;
    width: 7px; height: 180px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 184, 77, 0.0) 10%,
        var(--pop-amber) 55%,
        var(--pop-lime) 100%);
    border-radius: 4px;
    transform-origin: 50% 200px;
    filter: saturate(1.6);
}
.launch-charge__rays > .launch-charge__ray:nth-child(odd) {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 96, 255, 0.0) 10%,
        var(--pop-magenta) 55%,
        var(--pop-lime) 100%);
    height: 230px;
    top: -250px;
    transform-origin: 50% 250px;
}

/* ── Sticker halo (chunky base layer) ──────────────────────── */
.launch-charge__halo {
    position: absolute;
    inset: -10px;
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 50% 50%,
            rgba(0, 255, 178, calc(var(--charge) * 0.35)) 0%,
            rgba(255, 96, 255, calc(var(--charge) * 0.25)) 40%,
            transparent 70%);
    z-index: -1;
    pointer-events: none;
    transition: background 0.18s var(--ease-pop);
}

/* ── Gradient fill — climbs with --charge ──────────────────── */
.launch-charge__fill {
    position: absolute;
    inset: 3px;
    border-radius: 17px;
    background: linear-gradient(90deg,
        var(--pop-lime) 0%,
        var(--pop-amber) 50%,
        var(--pop-magenta) 100%);
    transform-origin: 0% 50%;
    transform: scaleX(var(--charge));
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.18);
}

/* ── Conic ring around the core ───────────────────────────── */
.launch-charge__ring {
    position: absolute;
    inset: -6px;
    border-radius: 26px;
    pointer-events: none;
    z-index: 0;
    background: conic-gradient(
        from -90deg,
        var(--pop-lime) 0%,
        var(--pop-amber) calc(var(--charge) * 50%),
        var(--pop-magenta) calc(var(--charge) * 100%),
        transparent calc(var(--charge) * 100% + 0.5%));
    -webkit-mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
            mask-composite: exclude;
    padding: 6px;
    opacity: calc(var(--charge) * 1.2);
}

/* ── Core body ─────────────────────────────────────────── */
.launch-charge__core {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 90px;
    padding: 0 24px;
    color: #FFFFFF;
    text-shadow:
        0 2px 0 rgba(0,0,0,0.55),
        0 0 14px rgba(0,0,0,0.5);
    mix-blend-mode: normal;
}
.launch-charge__rocket {
    font-size: 32px;
    line-height: 1;
    display: inline-block;
    transform-origin: 50% 80%;
    transform:
        translateY(calc(var(--charge) * -3px))
        rotate(calc(var(--charge) * -8deg))
        scale(calc(1 + var(--charge) * 0.22));
    transition: transform 0.18s var(--ease-pop);
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
}
.launch-charge__label {
    position: relative;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── Orbital sparks ─────────────────────────────────────── */
.launch-charge__sparks {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 4;
    opacity: calc(var(--charge) * 1.4);
}
.launch-charge__spark {
    position: absolute;
    left: 50%; top: 50%;
    width: 10px; height: 10px;
    background: var(--pop-lime);
    border: 2px solid var(--ink);
    border-radius: 3px;
    box-shadow: 2px 2px 0 var(--ink);
    transform: translate(-50%, -50%);
    animation: spark-orbit 1.4s linear infinite;
}
.launch-charge__spark--0 { background: var(--pop-lime);    animation-delay:   0ms; --angle:   0deg; --dist: calc(160px + var(--charge) * 80px); }
.launch-charge__spark--1 { background: var(--pop-amber);   animation-delay: -175ms; --angle:  45deg; --dist: calc(160px + var(--charge) * 80px); }
.launch-charge__spark--2 { background: var(--pop-magenta); animation-delay: -350ms; --angle:  90deg; --dist: calc(160px + var(--charge) * 80px); }
.launch-charge__spark--3 { background: var(--cyan);        animation-delay: -525ms; --angle: 135deg; --dist: calc(160px + var(--charge) * 80px); }
.launch-charge__spark--4 { background: var(--pop-lime);    animation-delay: -700ms; --angle: 180deg; --dist: calc(160px + var(--charge) * 80px); }
.launch-charge__spark--5 { background: var(--pop-amber);   animation-delay: -875ms; --angle: 225deg; --dist: calc(160px + var(--charge) * 80px); }
.launch-charge__spark--6 { background: var(--pop-magenta); animation-delay: -1050ms; --angle: 270deg; --dist: calc(160px + var(--charge) * 80px); }
.launch-charge__spark--7 { background: var(--cyan);        animation-delay: -1225ms; --angle: 315deg; --dist: calc(160px + var(--charge) * 80px); }

@keyframes spark-orbit {
    from {
        transform:
            translate(-50%, -50%)
            rotate(var(--angle))
            translateX(calc(var(--dist) * 0.25))
            rotate(calc(var(--angle) * -1));
    }
    to {
        transform:
            translate(-50%, -50%)
            rotate(calc(var(--angle) + 360deg))
            translateX(calc(var(--dist) * 0.25))
            rotate(calc((var(--angle) + 360deg) * -1));
    }
}

/* ── Blast flash overlay — painted only in the blasting phase ─ */
.launch-charge__blast {
    position: absolute;
    inset: -4px;
    border-radius: 26px;
    pointer-events: none;
    z-index: 5;
    background: radial-gradient(ellipse at 50% 50%,
        #FFFFFF 0%, #FFFFFF 18%,
        var(--pop-amber) 40%,
        var(--pop-magenta) 65%,
        transparent 80%);
    opacity: 0;
}

/* ── Phase-specific styling ─────────────────────────────── */

/* Permanent pop-grad accent stripe on top edge — chunky 2D sticker tell. */
.launch-charge::after {
    content: "";
    position: absolute;
    top: 3px; left: 16px; right: 16px; height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        var(--pop-lime), var(--pop-amber), var(--pop-magenta));
    z-index: 6;
    pointer-events: none;
}

.launch-charge--idle {
    transform: translateY(0);
    animation: launch-idle-breathe 2.4s var(--ease-soft) infinite;
}
@keyframes launch-idle-breathe {
    0%, 100% {
        box-shadow:
            6px 6px 0 var(--ink),
            0 0 0 0 rgba(0, 255, 178, 0);
    }
    50%      {
        box-shadow:
            6px 6px 0 var(--pop-lime),
            6px 6px 0 1px var(--ink),
            0 0 0 4px rgba(0, 255, 178, 0.22);
    }
}
.launch-charge--idle .launch-charge__rocket {
    animation: rocket-idle-bob 2.4s var(--ease-soft) infinite;
}
@keyframes rocket-idle-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-2px) rotate(2deg); }
}
.launch-charge--idle:hover {
    box-shadow: 9px 9px 0 var(--pop-lime), 9px 9px 0 1px var(--ink);
    transform: translateY(-3px);
    animation: none;
}
.launch-charge--idle:hover .launch-charge__rocket {
    animation: rocket-idle-wiggle 0.7s var(--ease-back-out) infinite alternate;
}
.launch-charge--idle .launch-charge__label {
    background: rgba(0, 255, 178, 0.12);
    border: 2px solid var(--pop-lime);
    color: var(--pop-lime);
    text-shadow: none;
}
@keyframes rocket-idle-wiggle {
    from { transform: rotate(-4deg) translateY(0); }
    to   { transform: rotate(4deg)  translateY(-2px); }
}

/* Idle: dim sparks to a quiet promise. They go full bloom on hold. */
.launch-charge--idle .launch-charge__sparks { opacity: 0; }

.launch-charge--holding {
    transform:
        translate(calc(var(--charge) * 1px), calc(var(--charge) * -2px))
        scale(calc(1 + var(--charge) * 0.04));
    box-shadow:
        calc(6px + var(--charge) * 4px) calc(6px + var(--charge) * 4px) 0 var(--pop-amber),
        calc(6px + var(--charge) * 4px) calc(6px + var(--charge) * 4px) 0 1px var(--ink);
    animation: hold-jitter 80ms steps(2) infinite;
}
@keyframes hold-jitter {
    0%   { translate: 0 0; }
    50%  { translate: 1px -1px; }
}

.launch-charge--releasing {
    transform: scale(0.985);
    box-shadow: 4px 4px 0 var(--ink);
    opacity: 0.92;
    filter: saturate(0.8);
}
.launch-charge--releasing .launch-charge__rocket {
    transform: rotate(0) translateY(0) scale(1);
    filter: grayscale(0.4);
}

.launch-charge--blasting {
    animation: blast-pop 0.42s var(--ease-back-out) forwards;
    pointer-events: none;
}
.launch-charge--blasting .launch-charge__blast {
    animation: blast-flash 0.42s var(--ease-expo-out) forwards;
}
.launch-charge--blasting .launch-charge__rocket {
    animation: rocket-liftoff 0.42s var(--ease-back-out) forwards;
}
.launch-charge--blasting .launch-charge__rays {
    animation: rays-burst 0.42s var(--ease-expo-out) forwards;
}

@keyframes blast-pop {
    0%   { transform: scale(1.04); box-shadow: 10px 10px 0 var(--pop-magenta), 10px 10px 0 1px var(--ink); }
    35%  { transform: scale(1.15); box-shadow: 0 0 0 12px var(--pop-lime); }
    100% { transform: scale(1.06); box-shadow: 6px 6px 0 var(--ink); }
}
@keyframes blast-flash {
    0%   { opacity: 0; transform: scale(0.4); }
    25%  { opacity: 1; transform: scale(1.4); }
    100% { opacity: 0; transform: scale(2.6); }
}
@keyframes rocket-liftoff {
    0%   { transform: rotate(-8deg) translateY(-3px) scale(1.18); }
    50%  { transform: rotate(-2deg) translateY(-40px) scale(1.6); }
    100% { transform: rotate(0deg)  translateY(-120px) scale(0.4); opacity: 0; }
}
@keyframes rays-burst {
    0%   { transform: translate(-50%, -50%) scale(1.8) rotate(0deg);  opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(4.2) rotate(40deg); opacity: 0; }
}

/* ── Pending / locked / connect states ────────────────── */
.launch-charge--pending, .launch-charge--locked, .launch-charge--connect {
    cursor: default;
}
.launch-charge--pending {
    background: var(--surface-2);
    color: #FFFFFF;
}
.launch-charge--pending .launch-charge__core { color: #FFFFFF; }
.launch-charge--locked {
    background: var(--surface);
    border-color: var(--line-3);
    color: rgba(255,255,255,0.6);
    box-shadow: 4px 4px 0 var(--line-3);
    cursor: not-allowed;
}
.launch-charge--locked:hover { transform: none; }
.launch-charge--connect {
    cursor: pointer;
}
.launch-charge--connect:hover {
    box-shadow: 8px 8px 0 var(--cyan), 8px 8px 0 1px var(--ink);
    transform: translateY(-2px);
}

/* ── Pre-flight badge — chunky sticker pill above the button ── */
.preflight-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 18px auto 0;
    padding: 10px 18px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: 3px 3px 0 var(--ink);
}
.preflight-badge__l { color: var(--ink); }
.preflight-badge__check, .preflight-badge__cross {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    border: 2px solid var(--ink);
    font-weight: 900;
}
.preflight-badge__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--pop-amber);
    border: 2px solid var(--ink);
    animation: preflight-dot 1s ease-in-out infinite;
}
@keyframes preflight-dot {
    50% { transform: scale(1.4); opacity: 0.7; }
}
.preflight-badge--pass {
    background: var(--pop-lime);
}
.preflight-badge--pass .preflight-badge__check {
    background: #FFFFFF; color: var(--ink);
}
.preflight-badge--fail {
    background: var(--red);
}
.preflight-badge--fail .preflight-badge__l { color: #FFFFFF; }
.preflight-badge--fail .preflight-badge__cross {
    background: #FFFFFF; color: var(--red);
}
.preflight-badge--pending {
    background: var(--pop-amber);
}

/* ── Screen shake on detonation — wraps the whole app shell ── */
.app-shell {
    transform: translate3d(0,0,0);
}
.app-shell--blasting {
    animation: screen-shake 420ms var(--ease-back-out);
}
@keyframes screen-shake {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    10%  { transform: translate3d(-9px, 6px, 0) rotate(-0.6deg); }
    20%  { transform: translate3d(8px, -7px, 0) rotate(0.5deg); }
    30%  { transform: translate3d(-6px, 5px, 0) rotate(-0.4deg); }
    45%  { transform: translate3d(5px, -3px, 0) rotate(0.3deg); }
    60%  { transform: translate3d(-3px, 2px, 0) rotate(-0.2deg); }
    80%  { transform: translate3d(2px, -1px, 0) rotate(0.1deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}