:root{
    --bg:#050607;
    --bg-soft:#080b09;
    --panel:rgba(11,15,12,.78);
    --panel-solid:#0b0f0c;

    --green:#55ff8a;
    --green-2:#14d65a;
    --green-3:#07953d;

    --cyan:#79fff2;
    --gold:#ffe58a;
    --white:#f5f8f6;

    --text:#f4f8f5;
    --muted:#849087;
    --muted2:#5b665e;

    --line:rgba(114,255,157,.13);
    --line2:rgba(255,255,255,.075);

    --danger:#ff5d68;

    --radius:22px;
    --shadow:0 30px 90px rgba(0,0,0,.40);
}

*{
    box-sizing:border-box;
}

html{
    background:var(--bg);
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;

    color:var(--text);

    background:
        radial-gradient(
            circle at 70% -15%,
            rgba(49,255,123,.11),
            transparent 35%
        ),
        radial-gradient(
            circle at -5% 45%,
            rgba(0,255,195,.05),
            transparent 30%
        ),
        #050607;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
input{
    font:inherit;
}

button{
    -webkit-tap-highlight-color:transparent;
}

a{
    color:inherit;
}

::selection{
    background:var(--green);
    color:#051009;
}


/* ==========================================================
   BACKGROUND
========================================================== */

.noise{
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;

    opacity:.025;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.grid{
    position:fixed;
    inset:0;
    z-index:-3;
    pointer-events:none;

    opacity:.07;

    background-image:
        linear-gradient(
            rgba(255,255,255,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.07) 1px,
            transparent 1px
        );

    background-size:64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 82%
        );
}

.ambient{
    position:fixed;
    z-index:-4;
    border-radius:50%;
    filter:blur(150px);
    pointer-events:none;
}

.ambient-a{
    width:700px;
    height:700px;
    top:-280px;
    right:-180px;
    background:rgba(38,255,113,.13);
}

.ambient-b{
    width:600px;
    height:600px;
    left:-350px;
    top:35%;
    background:rgba(0,255,194,.06);
}

.ambient-c{
    width:550px;
    height:550px;
    right:-300px;
    bottom:5%;
    background:rgba(255,226,96,.035);
}


/* ==========================================================
   NAV
========================================================== */

.nav{
    position:sticky;
    top:0;
    z-index:50;

    height:84px;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    padding:0 4vw;

    border-bottom:1px solid var(--line);

    background:
        linear-gradient(
            to bottom,
            rgba(5,7,6,.94),
            rgba(5,7,6,.76)
        );

    backdrop-filter:blur(24px);
}

.logo{
    justify-self:start;

    display:flex;
    align-items:center;
    gap:12px;

    text-decoration:none;
}

.logo-symbol{
    position:relative;

    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border-radius:14px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #9affb8,
            #25e666 55%,
            #09883a
        );

    box-shadow:
        0 0 32px rgba(48,255,112,.19),
        inset 0 1px rgba(255,255,255,.65);
}

.logo-symbol:after{
    content:"";

    position:absolute;
    inset:-50%;

    background:
        linear-gradient(
            110deg,
            transparent 35%,
            rgba(255,255,255,.7) 50%,
            transparent 65%
        );

    transform:translateX(-80%);
    animation:logoSweep 5s ease-in-out infinite;
}

@keyframes logoSweep{
    0%,65%{
        transform:translateX(-80%);
    }

    100%{
        transform:translateX(80%);
    }
}

.logo-symbol span{
    color:#05120a;
    font-size:22px;
    font-weight:1000;
}

.logo-type strong{
    display:block;
    font-size:14px;
    letter-spacing:-.01em;
}

.logo-type small{
    display:block;
    margin-top:2px;

    color:var(--green);

    font-size:9px;
    font-weight:900;
    letter-spacing:.21em;
}

.nav-center{
    justify-self:center;
}

.network{
    display:flex;
    align-items:center;
    gap:8px;

    color:#9ba89f;

    font-size:10px;
    font-weight:800;
    letter-spacing:.15em;
}

.network i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 14px var(--green);
}


/* ==========================================================
   BUTTONS
========================================================== */

.btn{
    position:relative;

    border:1px solid var(--line2);

    border-radius:11px;

    padding:13px 17px;

    color:#e9f0eb;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.015)
        ),
        #0b100d;

    cursor:pointer;

    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.btn:hover:not(:disabled){
    transform:translateY(-2px);

    border-color:
        rgba(85,255,138,.34);

    box-shadow:
        0 12px 30px rgba(0,0,0,.25);
}

.btn:disabled{
    opacity:.34;
    cursor:not-allowed;
}

.btn-primary{
    border-color:
        rgba(130,255,170,.48);

    color:#041108;

    background:
        linear-gradient(
            135deg,
            #9affb9,
            #4aff83 43%,
            #16c856
        );

    box-shadow:
        0 10px 35px rgba(38,239,101,.13),
        inset 0 1px rgba(255,255,255,.7);
}

.btn-xl{
    padding:17px 23px;
    border-radius:13px;
}

.btn-small{
    padding:10px 13px;
    font-size:9px;
}

.btn-ghost{
    background:
        rgba(255,255,255,.025);
}


/* ==========================================================
   MAIN
========================================================== */

main{
    width:min(1540px,92vw);
    margin:auto;
}


/* ==========================================================
   HERO
========================================================== */

.hero{
    min-height:690px;

    display:grid;
    grid-template-columns:
        minmax(0,1.12fr)
        minmax(460px,.88fr);

    gap:70px;

    align-items:center;

    padding:
        75px 0
        45px;
}

.superline{
    display:flex;
    align-items:center;
    gap:10px;

    color:var(--green);

    font-size:10px;
    font-weight:900;
    letter-spacing:.18em;
}

.superline i{
    width:4px;
    height:4px;

    border-radius:50%;

    background:var(--green);
}

.hero h1{
    margin:
        20px 0
        30px;

    max-width:860px;

    font-size:
        clamp(68px,8.5vw,132px);

    line-height:.78;

    letter-spacing:-.075em;

    font-weight:950;
}

.hero h1 span{
    display:block;

    color:transparent;

    background:
        linear-gradient(
            105deg,
            #b5ffc9,
            #50ff88 35%,
            #7dfff1 72%,
            #e3ffc6
        );

    background-size:200%;

    -webkit-background-clip:text;
    background-clip:text;

    animation:
        heroGradient 7s linear infinite;
}

@keyframes heroGradient{
    to{
        background-position:200%;
    }
}

.hero-text{
    max-width:680px;

    color:#9aa69e;

    font-size:18px;
    line-height:1.75;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:32px;
}

.hero-trust{
    display:flex;
    flex-wrap:wrap;
    gap:35px;

    margin-top:48px;
}

.hero-trust div{
    min-width:110px;
}

.hero-trust span{
    display:block;

    color:var(--muted2);

    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
}

.hero-trust strong{
    display:block;
    margin-top:7px;

    font-size:12px;
}


/* ==========================================================
   HERO VAULT
========================================================== */

.hero-vault{
    position:relative;

    min-height:520px;

    display:grid;
    place-items:center;
}

.vault-glow{
    position:absolute;

    width:360px;
    height:360px;

    border-radius:50%;

    background:
        rgba(59,255,122,.14);

    filter:blur(90px);
}

.vault-shell{
    position:relative;

    width:min(420px,75vw);
    aspect-ratio:1;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(128,255,165,.16),
            rgba(8,12,9,.96) 60%
        );

    border:
        1px solid rgba(114,255,154,.16);

    box-shadow:
        inset 0 0 75px rgba(44,255,109,.07),
        0 45px 120px rgba(0,0,0,.55);
}

.vault-shell:before{
    content:"";

    position:absolute;
    inset:22px;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.05);
}

.vault-ring{
    position:absolute;

    border-radius:50%;

    border:
        1px solid rgba(92,255,140,.21);
}

.ring-a{
    inset:52px;

    animation:
        ringSpin 24s linear infinite;
}

.ring-a:after{
    content:"";

    position:absolute;

    width:9px;
    height:9px;

    top:-5px;
    left:50%;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 20px var(--green);
}

.ring-b{
    inset:82px;

    border-style:dashed;

    opacity:.7;

    animation:
        ringSpinReverse 18s linear infinite;
}

.ring-c{
    inset:113px;

    opacity:.45;
}

@keyframes ringSpin{
    to{
        transform:rotate(360deg);
    }
}

@keyframes ringSpinReverse{
    to{
        transform:rotate(-360deg);
    }
}

.vault-core{
    position:relative;

    z-index:3;

    width:160px;
    height:160px;

    border-radius:50%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    background:
        radial-gradient(
            circle at 45% 30%,
            rgba(255,255,255,.11),
            rgba(18,36,23,.9) 45%,
            rgba(5,9,6,1)
        );

    border:
        1px solid rgba(112,255,156,.28);

    box-shadow:
        inset 0 0 45px rgba(49,255,112,.11),
        0 0 60px rgba(36,255,104,.06);
}

.vault-core small{
    color:var(--muted);

    font-size:9px;
    font-weight:900;
    letter-spacing:.22em;
}

.vault-core strong{
    margin:5px 0 1px;

    font-size:54px;
    line-height:1;

    letter-spacing:-.06em;
}

.vault-core span{
    color:var(--green);

    font-size:9px;
    font-weight:900;
    letter-spacing:.20em;
}

.vault-floating{
    position:absolute;
    z-index:6;

    min-width:175px;

    padding:15px 17px;

    border:
        1px solid var(--line);

    border-radius:15px;

    background:
        rgba(7,12,9,.72);

    backdrop-filter:blur(18px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.3);
}

.vault-floating span{
    display:block;

    color:var(--muted);

    font-size:8px;
    font-weight:900;
    letter-spacing:.16em;
}

.vault-floating strong{
    display:block;

    margin:5px 0 2px;

    color:var(--green);

    font-size:25px;
}

.vault-floating small{
    color:#68776d;

    font-size:8px;
    font-weight:800;
}

.vault-floating-a{
    top:22%;
    left:-2%;
}

.vault-floating-b{
    right:-1%;
    bottom:21%;
}


/* ==========================================================
   TICKER
========================================================== */

.ticker{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    margin:
        0 0
        100px;

    border:
        1px solid var(--line);

    border-radius:16px;

    overflow:hidden;

    background:
        rgba(9,14,10,.58);

    backdrop-filter:blur(16px);
}

.ticker > div{
    min-height:61px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:14px;

    border-right:
        1px solid var(--line);

    color:#7d8a81;

    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
}

.ticker > div:last-child{
    border-right:0;
}

.ticker span{
    color:#d6e1d9;
}

.pulse{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 13px var(--green);

    animation:pulse 1.7s ease-in-out infinite;
}

@keyframes pulse{
    50%{
        opacity:.35;
        transform:scale(.72);
    }
}


/* ==========================================================
   NOTICE
========================================================== */

.notice{
    margin:
        -65px 0
        55px;

    padding:15px 18px;

    border:
        1px solid var(--line);

    border-radius:12px;

    color:#92a097;

    background:
        rgba(15,23,17,.64);

    font-size:12px;
}

.notice.good{
    color:#c3ffd5;

    border-color:
        rgba(80,255,133,.28);
}

.notice.bad{
    color:#ffc1c6;

    border-color:
        rgba(255,93,104,.30);
}


/* ==========================================================
   SECTION
========================================================== */

.section{
    margin-bottom:100px;
}

.section-title{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:25px;

    margin-bottom:24px;
}

.kicker,
.manager-label{
    color:var(--green);

    font-size:9px;
    font-weight:900;
    letter-spacing:.19em;
}

.section-title h2,
.health h2{
    margin:7px 0 0;

    font-size:
        clamp(30px,4vw,48px);

    line-height:.95;

    letter-spacing:-.045em;
}


/* ==========================================================
   METRICS
========================================================== */

.metric-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:10px;
}

.metric{
    position:relative;

    min-height:160px;

    padding:24px;

    overflow:hidden;

    border:
        1px solid var(--line2);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            transparent
        ),
        rgba(9,13,10,.7);
}

.metric:before{
    content:"";

    position:absolute;

    width:130px;
    height:130px;

    right:-75px;
    top:-75px;

    border-radius:50%;

    background:
        rgba(66,255,126,.055);

    filter:blur(15px);
}

.metric-label{
    color:#68736c;

    font-size:9px;
    font-weight:900;
    letter-spacing:.13em;
}

.metric strong{
    display:block;

    margin:
        23px 0
        4px;

    font-size:
        clamp(28px,3vw,42px);

    letter-spacing:-.045em;
}

.metric small{
    color:#657069;

    font-size:10px;
}

.metric-green strong{
    color:var(--green);
}


/* ==========================================================
   REWARDS
========================================================== */

.reward-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:12px;
}

.reward{
    position:relative;

    min-height:490px;

    padding:30px;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            transparent 52%
        ),
        rgba(8,12,9,.85);

    box-shadow:var(--shadow);
}

.reward:before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,255,255,.018) 45%,
            transparent 65%
        );
}

.reward-orb{
    position:absolute;

    width:390px;
    height:390px;

    right:-210px;
    top:-200px;

    border-radius:50%;

    filter:blur(15px);
}

.reward-fucks .reward-orb{
    background:
        rgba(65,255,125,.10);
}

.reward-stonk .reward-orb{
    background:
        rgba(84,255,238,.08);
}

.reward-top{
    display:flex;
    justify-content:space-between;

    color:#68766c;

    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
}

.reward-top b{
    color:var(--green);
}

.reward-name{
    margin-top:45px;

    font-size:
        clamp(55px,7vw,92px);

    line-height:.85;

    font-weight:950;
    letter-spacing:-.07em;
}

.reward-name small{
    color:var(--green);
}

.reward-name-small{
    font-size:
        clamp(40px,4.7vw,70px);
}

.reward-rate{
    margin-top:25px;
}

.reward-rate strong{
    display:inline-block;

    color:var(--green);

    font-size:22px;
}

.reward-rate span{
    margin-left:7px;

    color:#6d7971;

    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

.reward-earned{
    margin-top:43px;
}

.reward-earned span{
    display:block;

    color:#67726b;

    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

.reward-earned strong{
    display:block;

    margin-top:8px;

    color:#dfffe8;

    font-size:28px;

    overflow-wrap:anywhere;
}

.reward-bottom{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:30px;
}

.reward-bottom div{
    padding:15px;

    border:
        1px solid rgba(255,255,255,.055);

    border-radius:12px;

    background:
        rgba(255,255,255,.018);
}

.reward-bottom span{
    display:block;

    color:#657168;

    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}

.reward-bottom strong{
    display:block;

    margin-top:7px;

    font-size:14px;
}

.btn-card{
    width:100%;

    margin-top:16px;

    padding:15px;
}

.claim-all{
    width:100%;

    margin-top:12px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:19px 23px;

    border:
        1px solid rgba(90,255,141,.19);

    border-radius:14px;

    color:#061009;

    background:
        linear-gradient(
            110deg,
            #a2ffbd,
            #54ff89 45%,
            #54f4dc
        );

    cursor:pointer;

    box-shadow:
        0 15px 45px rgba(54,255,119,.08);
}

.claim-all span{
    font-size:12px;
    font-weight:950;
    letter-spacing:.04em;
}

.claim-all strong{
    font-size:10px;
    opacity:.7;
}

.claim-all:disabled{
    opacity:.33;
    cursor:not-allowed;
}


/* ==========================================================
   MANAGER
========================================================== */

.manager{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:12px;
}

.manager-panel{
    position:relative;

    min-height:560px;

    padding:25px;

    border:
        1px solid var(--line2);

    border-radius:22px;

    background:
        rgba(8,12,9,.74);

    backdrop-filter:blur(18px);
}

.manager-panel-staked{
    border-color:
        rgba(85,255,138,.12);

    background:
        linear-gradient(
            145deg,
            rgba(59,255,120,.035),
            transparent 35%
        ),
        rgba(8,12,9,.78);
}

.manager-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
}

.manager-head h3{
    margin:6px 0 0;

    font-size:26px;
    letter-spacing:-.035em;
}

.manager-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
}

.vault-status-pill{
    display:flex;
    align-items:center;
    gap:7px;

    padding:9px 11px;

    border:
        1px solid var(--line);

    border-radius:99px;

    color:#b9c9be;

    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}

.vault-status-pill i{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 11px var(--green);
}

.scan-status{
    min-height:45px;

    padding:17px 0 13px;

    color:#647068;

    font-size:10px;
    line-height:1.5;
}


/* ==========================================================
   NFT CARDS
========================================================== */

.nft-grid{
    min-height:355px;

    display:grid;
    grid-template-columns:
        repeat(auto-fill,minmax(150px,1fr));

    align-content:start;

    gap:10px;
}

.nft-card{
    position:relative;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:15px;

    background:#080b09;

    cursor:pointer;

    transition:
        transform .17s ease,
        border-color .17s ease,
        box-shadow .17s ease;
}

.nft-card:hover{
    transform:translateY(-3px);

    border-color:
        rgba(85,255,138,.28);

    box-shadow:
        0 16px 35px rgba(0,0,0,.25);
}

.nft-card.selected{
    border-color:var(--green);

    box-shadow:
        0 0 0 1px var(--green),
        0 0 35px rgba(65,255,122,.09);
}

.nft-art{
    position:relative;

    aspect-ratio:1;

    overflow:hidden;

    display:grid;
    place-items:center;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(78,255,132,.12),
            #0a0e0b 60%
        );
}

.nft-art img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .35s ease;
}

.nft-card:hover .nft-art img{
    transform:scale(1.035);
}

.nft-fallback{
    display:grid;
    place-items:center;

    width:66px;
    height:66px;

    border:
        1px solid rgba(88,255,141,.18);

    border-radius:50%;

    color:rgba(109,255,155,.42);

    font-size:27px;
    font-weight:950;

    box-shadow:
        inset 0 0 30px rgba(42,255,103,.06);
}

.nft-select{
    position:absolute;

    top:10px;
    right:10px;

    width:26px;
    height:26px;

    display:grid;
    place-items:center;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius:50%;

    color:white;

    background:
        rgba(4,7,5,.77);

    backdrop-filter:blur(7px);

    font-size:11px;
}

.nft-card.selected .nft-select{
    color:#031009;
    background:var(--green);
    border-color:transparent;
}

.nft-content{
    padding:12px;
}

.nft-content strong{
    display:block;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:12px;
}

.nft-content span{
    display:block;

    margin-top:4px;

    color:#5e6961;

    font-size:9px;
}

.nft-badge{
    position:absolute;

    top:10px;
    left:10px;

    padding:5px 7px;

    border-radius:6px;

    background:
        rgba(4,8,5,.72);

    backdrop-filter:blur(6px);

    color:var(--green);

    font-size:7px;
    font-weight:900;
    letter-spacing:.12em;
}

.empty-state{
    grid-column:1/-1;

    min-height:345px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:30px;

    border:
        1px dashed rgba(255,255,255,.07);

    border-radius:14px;

    text-align:center;
}

.empty-icon{
    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    margin-bottom:17px;

    border:
        1px solid rgba(85,255,138,.15);

    border-radius:50%;

    color:#31513b;

    font-weight:900;
}

.empty-state strong{
    font-size:13px;
}

.empty-state span{
    margin-top:6px;

    color:#5f6962;

    font-size:10px;
}

.manager-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:18px;
    padding-top:18px;

    border-top:
        1px solid rgba(255,255,255,.055);
}

.selection span{
    display:block;

    color:#667169;

    font-size:8px;
    font-weight:900;
    letter-spacing:.13em;
}

.selection strong{
    display:block;

    margin-top:3px;

    font-size:22px;
}


/* ==========================================================
   UTILITY
========================================================== */

.utility{
    margin-bottom:100px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;

    padding:25px;

    border:
        1px solid var(--line2);

    border-radius:18px;

    background:
        rgba(255,255,255,.018);
}

.utility h3{
    margin:6px 0;

    font-size:21px;
}

.utility p{
    margin:0;

    color:#667168;

    font-size:11px;
}

.lookup{
    min-width:min(100%,390px);

    display:flex;
    gap:7px;
}

.lookup input{
    flex:1;
    min-width:0;

    padding:13px 14px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:10px;

    outline:none;

    color:white;

    background:#070a08;

    font-size:11px;
}

.lookup input:focus{
    border-color:
        rgba(85,255,138,.3);
}


/* ==========================================================
   HEALTH
========================================================== */

.health{
    display:grid;
    grid-template-columns:1.2fr .8fr;

    gap:50px;
    align-items:center;

    padding:45px;

    border:
        1px solid var(--line);

    border-radius:25px;

    background:
        linear-gradient(
            135deg,
            rgba(72,255,126,.035),
            transparent 40%
        ),
        rgba(8,12,9,.72);
}

.health-copy p{
    max-width:650px;

    color:#77837a;

    line-height:1.7;
    font-size:12px;
}

.health-stats{
    display:grid;
    gap:8px;
}

.health-stats > div{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:17px;

    border:
        1px solid rgba(255,255,255,.055);

    border-radius:11px;

    background:
        rgba(255,255,255,.018);
}

.health-stats span{
    color:#657168;

    font-size:8px;
    font-weight:900;
    letter-spacing:.13em;
}

.health-stats strong,
.health-stats a{
    color:#d7e2da;

    font-size:11px;
    font-weight:850;
    text-decoration:none;
}


/* ==========================================================
   FOOTER
========================================================== */

footer{
    min-height:120px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-top:
        1px solid rgba(255,255,255,.05);

    color:#4f5a52;

    font-size:9px;
    letter-spacing:.1em;
}

footer strong,
footer span{
    display:block;
}

footer strong{
    color:#718078;

    font-size:10px;
}

footer span{
    margin-top:3px;
}


/* ==========================================================
   MODAL
========================================================== */

.modal{
    position:fixed;
    inset:0;

    z-index:100;

    display:grid;
    place-items:center;

    padding:20px;

    background:
        rgba(0,0,0,.82);

    backdrop-filter:blur(14px);
}

.hidden{
    display:none!important;
}

.modal-card{
    width:min(470px,100%);

    padding:38px;

    text-align:center;

    border:
        1px solid rgba(91,255,141,.17);

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(64,255,122,.035),
            transparent 35%
        ),
        #080d09;

    box-shadow:
        0 40px 100px rgba(0,0,0,.55);
}

.modal-symbol{
    height:65px;

    display:grid;
    place-items:center;

    margin-bottom:15px;
}

.spinner{
    width:44px;
    height:44px;

    border:
        3px solid rgba(255,255,255,.07);

    border-top-color:var(--green);

    border-radius:50%;

    animation:
        spinner .7s linear infinite;

    box-shadow:
        0 0 25px rgba(65,255,123,.07);
}

@keyframes spinner{
    to{
        transform:rotate(360deg);
    }
}

.success-icon{
    width:47px;
    height:47px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#061109;

    background:var(--green);

    font-size:21px;
    font-weight:950;

    box-shadow:
        0 0 35px rgba(65,255,123,.18);
}

.modal-card h2{
    margin:9px 0;

    font-size:27px;
    letter-spacing:-.035em;
}

.modal-card p{
    margin:
        0 auto
        18px;

    max-width:340px;

    color:#7a877e;

    font-size:11px;
    line-height:1.6;
}

.tx-link{
    display:inline-block;

    margin-bottom:18px;

    color:var(--green);

    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;

    text-decoration:none;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1100px){

    .hero{
        grid-template-columns:1fr;
        gap:10px;

        padding-top:70px;
    }

    .hero-copy{
        text-align:center;
    }

    .hero-text{
        margin-left:auto;
        margin-right:auto;
    }

    .superline,
    .hero-actions,
    .hero-trust{
        justify-content:center;
    }

    .hero-vault{
        margin-top:20px;
    }

    .metric-grid{
        grid-template-columns:1fr 1fr;
    }

    .manager{
        grid-template-columns:1fr;
    }

}

@media(max-width:800px){

    .nav{
        grid-template-columns:1fr auto;
    }

    .nav-center{
        display:none;
    }

    .hero h1{
        font-size:
            clamp(60px,18vw,100px);
    }

    .reward-grid{
        grid-template-columns:1fr;
    }

    .ticker{
        grid-template-columns:1fr 1fr;
    }

    .ticker > div:nth-child(2){
        border-right:0;
    }

    .ticker > div:nth-child(-n+2){
        border-bottom:
            1px solid var(--line);
    }

    .health{
        grid-template-columns:1fr;
        gap:25px;
    }

    .utility{
        align-items:stretch;
        flex-direction:column;
    }

    .lookup{
        min-width:0;
        width:100%;
    }

}

@media(max-width:560px){

    main{
        width:94vw;
    }

    .nav{
        height:72px;
        padding:0 3vw;
    }

    .logo-symbol{
        width:40px;
        height:40px;
    }

    .logo-type strong{
        font-size:12px;
    }

    .logo-type small{
        font-size:7px;
    }

    .nav .btn{
        padding:10px 12px;
        font-size:8px;
    }

    .hero{
        min-height:auto;

        padding:
            55px 0
            25px;
    }

    .hero h1{
        margin-top:16px;
    }

    .hero-text{
        font-size:14px;
    }

    .hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .hero-actions .btn{
        width:100%;
    }

    .hero-trust{
        gap:18px;
    }

    .hero-vault{
        min-height:400px;
    }

    .vault-shell{
        width:330px;
    }

    .ring-a{
        inset:42px;
    }

    .ring-b{
        inset:66px;
    }

    .ring-c{
        inset:91px;
    }

    .vault-floating{
        min-width:145px;
        padding:11px 12px;
    }

    .vault-floating-a{
        left:0;
        top:17%;
    }

    .vault-floating-b{
        right:0;
        bottom:17%;
    }

    .ticker{
        margin-bottom:85px;
    }

    .notice{
        margin-top:-55px;
    }

    .section{
        margin-bottom:80px;
    }

    .metric-grid{
        grid-template-columns:1fr 1fr;
    }

    .metric{
        min-height:135px;
        padding:17px;
    }

    .reward{
        min-height:auto;
        padding:23px;
    }

    .reward-name{
        margin-top:35px;
    }

    .manager-panel{
        padding:18px;
    }

    .manager-head{
        display:block;
    }

    .manager-actions{
        justify-content:flex-start;
        margin-top:14px;
    }

    .vault-status-pill{
        display:inline-flex;
        margin-top:14px;
    }

    .nft-grid{
        grid-template-columns:1fr 1fr;
    }

    .claim-all{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }

    .health{
        padding:25px;
    }

    footer{
        min-height:100px;
    }

}


/* ==========================================================
   V2.1 — RESIDUAL REWARD CLARITY
========================================================== */

.reward-note{
    display:block;
    margin-top:9px;
    min-height:30px;

    color:#718078;

    font-size:9px;
    line-height:1.5;
    font-weight:700;
}

.reward-earned{
    min-height:108px;
}

.reward-earned strong{
    margin-bottom:2px;
}


/* ==========================================================
   CHACHA STAKE — OFFICIAL LOGO
========================================================== */

.logo-image-wrap{
    padding:0;
    overflow:hidden;
    background:#050708;
}

.logo-image{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:inherit;
}

.logo-image-wrap:after{
    display:none;
}


/* ==========================================================
   CHACHA STAKE V2.2 — HEADER FIX
========================================================== */

/*
 * Prevent grid children from stretching across their cells.
 */
.nav{
    grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr);
    column-gap:28px;
}

/*
 * Brand stays left.
 */
.nav .logo{
    justify-self:start;
    width:auto;
    min-width:0;
}

/*
 * Center network indicator stays centered.
 */
.nav .nav-center{
    justify-self:center;
    width:max-content;
}

/*
 * IMPORTANT:
 * Buttons are stretchable grid items by default.
 * Force Connect Wallet back to a premium compact button.
 */
.nav > #connectBtn{
    justify-self:end;
    align-self:center;

    width:auto !important;
    min-width:180px;
    max-width:240px;

    padding:14px 24px;

    white-space:nowrap;

    border-radius:13px;

    font-size:10px;
    letter-spacing:.08em;
}

/*
 * Official ChaCha artwork.
 */
.logo-symbol.logo-image-wrap{
    width:54px;
    height:54px;

    flex:0 0 54px;

    padding:0;

    border-radius:15px;

    overflow:hidden;

    background:#101713;

    border:1px solid rgba(95,255,143,.25);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.025),
        0 8px 28px rgba(0,0,0,.35),
        0 0 28px rgba(48,255,110,.08);
}

.logo-symbol.logo-image-wrap:before,
.logo-symbol.logo-image-wrap:after{
    display:none !important;
}

.logo-image{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    opacity:1 !important;
    visibility:visible !important;

    object-fit:cover;

    /*
     * Face is above center in the square artwork.
     * This makes the tiny navbar crop much stronger.
     */
    object-position:50% 30%;

    filter:none !important;

    transform:scale(1.18);
}

.logo-type{
    min-width:0;
}

.logo-type strong{
    font-size:15px;
    line-height:1.1;
}

.logo-type small{
    margin-top:4px;
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:900px){

    .nav{
        grid-template-columns:1fr auto;
        column-gap:15px;
    }

    .nav-center{
        display:none;
    }

    .nav > #connectBtn{
        min-width:155px;
        max-width:190px;
        padding:12px 18px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:560px){

    .nav{
        height:72px;

        padding-left:14px;
        padding-right:14px;

        grid-template-columns:minmax(0,1fr) auto;
        column-gap:10px;
    }

    .logo-symbol.logo-image-wrap{
        width:42px;
        height:42px;
        flex-basis:42px;

        border-radius:12px;
    }

    .logo{
        gap:9px;
    }

    .logo-type strong{
        font-size:11px;
    }

    .logo-type small{
        font-size:7px;
    }

    .nav > #connectBtn{
        width:auto !important;
        min-width:0;
        max-width:145px;

        padding:10px 12px;

        font-size:8px;
    }
}



/* ==========================================================
   CHACHA STAKE V2.6 — WALLET CONTROL
========================================================== */

.wallet-control{
    position:relative;

    justify-self:end;

    width:max-content;
}

.wallet-control > #connectBtn{
    position:relative;

    width:auto !important;
    min-width:180px;
    max-width:245px;

    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

.wallet-control > #connectBtn:after{
    content:"";

    display:inline-block;

    width:6px;
    height:6px;

    margin-left:9px;

    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;

    transform:
        translateY(-2px)
        rotate(45deg);

    opacity:.65;
}

.wallet-menu{
    position:absolute;

    top:calc(100% + 10px);
    right:0;

    z-index:1000;

    width:280px;

    padding:8px;

    border:
        1px solid rgba(100,255,146,.16);

    border-radius:15px;

    background:
        rgba(7,12,9,.97);

    backdrop-filter:blur(22px);

    box-shadow:
        0 25px 65px rgba(0,0,0,.52),
        0 0 35px rgba(54,255,116,.035);
}

.wallet-menu-head{
    padding:
        12px 12px
        14px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}

.wallet-menu-head span{
    display:block;

    color:#617068;

    font-size:8px;
    font-weight:900;
    letter-spacing:.16em;
}

.wallet-menu-head strong{
    display:block;

    margin-top:5px;

    color:#d8e7dc;

    font-size:12px;
}

.wallet-menu-action{
    width:100%;

    display:flex;
    align-items:center;

    gap:11px;

    margin-top:6px;

    padding:11px;

    border:0;
    border-radius:10px;

    text-align:left;

    color:#d8e3db;

    background:transparent;

    cursor:pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

.wallet-menu-action:hover{
    background:
        rgba(83,255,137,.07);

    color:white;
}

.wallet-menu-action > span{
    width:31px;
    height:31px;

    flex:0 0 31px;

    display:grid;
    place-items:center;

    border:
        1px solid rgba(95,255,142,.13);

    border-radius:9px;

    color:var(--green);

    background:
        rgba(70,255,127,.035);

    font-size:16px;
}

.wallet-menu-action strong{
    display:block;

    font-size:11px;
}

.wallet-menu-action small{
    display:block;

    margin-top:2px;

    color:#647169;

    font-size:9px;
}

.wallet-menu-danger:hover{
    background:
        rgba(255,82,94,.07);
}

.wallet-menu-danger > span{
    color:#ff7f88;

    border-color:
        rgba(255,95,105,.13);

    background:
        rgba(255,80,91,.035);
}


/* Header grid adjustment now that wallet button has wrapper */

.nav{
    grid-template-columns:
        minmax(260px,1fr)
        auto
        minmax(260px,1fr);
}

.nav .wallet-control{
    justify-self:end;
}


@media(max-width:900px){

    .nav{
        grid-template-columns:
            minmax(0,1fr)
            auto;
    }

    .wallet-control > #connectBtn{
        min-width:155px;
    }
}


@media(max-width:560px){

    .wallet-control > #connectBtn{
        min-width:0;
        max-width:140px;

        padding:10px 11px;

        font-size:8px;
    }

    .wallet-menu{
        position:fixed;

        top:78px;
        left:12px;
        right:12px;

        width:auto;
    }
}



/* ==========================================================
   CHACHA STAKE V2.7 — FIRST STAKE GUIDANCE
========================================================== */

.approval-guide{
    position:relative;

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:14px;

    margin:
        0 0
        16px;

    padding:15px;

    overflow:hidden;

    border:
        1px solid rgba(83,255,135,.26);

    border-radius:14px;

    background:
        linear-gradient(
            110deg,
            rgba(70,255,126,.09),
            rgba(70,255,126,.025)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.025),
        0 10px 35px rgba(0,0,0,.14);
}

.approval-guide:before{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    left:-110px;
    top:-120px;

    border-radius:50%;

    background:
        rgba(75,255,130,.10);

    filter:blur(25px);

    pointer-events:none;
}

.approval-guide-icon{
    position:relative;
    z-index:2;

    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    flex:0 0 38px;

    border-radius:11px;

    color:#041108;

    background:
        linear-gradient(
            145deg,
            #a6ffc0,
            #48ff82
        );

    font-size:14px;
    font-weight:1000;

    box-shadow:
        0 0 24px rgba(72,255,130,.12);
}

.approval-guide-copy{
    position:relative;
    z-index:2;
}

.approval-guide-copy strong{
    display:block;

    color:#dfffe8;

    font-size:11px;
}

.approval-guide-copy span{
    display:block;

    max-width:510px;

    margin-top:4px;

    color:#718078;

    font-size:9px;
    line-height:1.55;
}

.approval-guide .btn{
    position:relative;
    z-index:2;

    white-space:nowrap;
}


/*
 * Main approval button glows when approval is required.
 */
#approveBtn.approval-needed{
    border-color:
        rgba(83,255,136,.48);

    color:#071009;

    background:
        linear-gradient(
            135deg,
            #a5ffbf,
            #4dff85
        );

    box-shadow:
        0 0 24px rgba(66,255,124,.12);
}


/*
 * If selected NFT needs approval, the actual Stake button
 * becomes the Step 1 approval CTA.
 */
#stakeBtn.stake-needs-approval{
    border-color:
        rgba(98,255,148,.64);

    color:#061108;

    background:
        linear-gradient(
            110deg,
            #b3ffc8,
            #50ff88,
            #75ffe4
        );

    box-shadow:
        0 0 34px rgba(68,255,127,.15);

    animation:
        approvalPulse 2s ease-in-out infinite;
}


.approval-flash{
    animation:
        approvalFlash .55s ease-in-out 4 !important;
}


.approval-guide-flash{
    animation:
        guideFlash .55s ease-in-out 4 !important;
}


@keyframes approvalPulse{

    0%,100%{
        box-shadow:
            0 0 20px rgba(68,255,127,.10);
    }

    50%{
        box-shadow:
            0 0 38px rgba(68,255,127,.23);
    }
}


@keyframes approvalFlash{

    50%{
        transform:translateY(-2px) scale(1.035);

        box-shadow:
            0 0 42px rgba(70,255,126,.30);
    }
}


@keyframes guideFlash{

    50%{
        border-color:
            rgba(98,255,148,.70);

        box-shadow:
            0 0 38px rgba(70,255,126,.15);
    }
}


@media(max-width:650px){

    .approval-guide{
        grid-template-columns:auto 1fr;
    }

    .approval-guide .btn{
        grid-column:1/-1;
        width:100%;
    }
}



/* ==========================================================
   CHACHA STAKE V2.8 — FOUR ACTIVE REWARDS
   ========================================================== */

.reward-grid{
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}

.reward-spcx,
.reward-gme{
    position:relative;
    overflow:hidden;
}

.reward-spcx{
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(103,209,255,.11),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(10,18,16,.97),
            rgba(5,9,8,.98)
        );
}

.reward-gme{
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(255,111,220,.10),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(10,18,16,.97),
            rgba(5,9,8,.98)
        );
}

.reward-spcx .reward-orb{
    box-shadow:
        0 0 80px rgba(100,208,255,.15);
}

.reward-gme .reward-orb{
    box-shadow:
        0 0 80px rgba(255,111,220,.13);
}

.reward-spcx .reward-rate strong,
.reward-gme .reward-rate strong{
    font-size:
        clamp(28px,4vw,52px);
}

.metric-stock{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(72,255,132,.025)
        );
}

.vault-floating-c{
    left:-2%;
    bottom:2%;
}

.vault-floating-d{
    right:-3%;
    bottom:-1%;
}

.vault-floating-c,
.vault-floating-d{
    transform:scale(.90);
}

.claim-all{
    margin-top:18px;
}

@media(max-width:900px){

    .reward-grid{
        grid-template-columns:1fr;
    }

    .vault-floating-c,
    .vault-floating-d{
        display:none;
    }
}



/* ==============================================================
   CHACHA_VAULT_V3_COMMAND_CENTER
   ============================================================= */

.chacha-v3{
    --v3-green:#59ff8b;
    --v3-green-soft:rgba(89,255,139,.14);
    --v3-cyan:#72eaff;
    --v3-purple:#c48cff;
    --v3-pink:#ff8ada;
}


/* ==============================================================
   AMBIENT ENVIRONMENT
   ============================================================== */

.chacha-v3:before{
    content:"";

    position:fixed;
    inset:0;

    z-index:-3;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(85,255,140,.11),
            transparent 34%
        ),
        radial-gradient(
            circle at 8% 58%,
            rgba(96,211,255,.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 93% 70%,
            rgba(192,119,255,.05),
            transparent 28%
        );
}


.chacha-v3 .grid{
    opacity:.32;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.95),
            transparent 85%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.95),
            transparent 85%
        );
}


/* ==============================================================
   NAVIGATION
   ============================================================== */

.chacha-v3 .nav{
    border-bottom:
        1px solid rgba(130,255,165,.08);

    background:
        linear-gradient(
            to bottom,
            rgba(4,8,6,.90),
            rgba(4,8,6,.70)
        );

    backdrop-filter:
        blur(22px)
        saturate(130%);
}


.chacha-v3 .logo-symbol{
    box-shadow:
        0 0 0 1px rgba(125,255,168,.10),
        0 0 30px rgba(68,255,126,.10);
}


/* ==============================================================
   HERO
   ============================================================== */

.chacha-v3 .hero{
    position:relative;
}


.chacha-v3 .hero:before{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    left:42%;
    top:5%;

    pointer-events:none;

    border-radius:50%;

    background:
        rgba(68,255,126,.07);

    filter:blur(115px);

    animation:
        v3HeroAura 7s ease-in-out infinite;
}


@keyframes v3HeroAura{

    0%,100%{
        opacity:.55;
        transform:scale(.88);
    }

    50%{
        opacity:1;
        transform:scale(1.12);
    }
}


.chacha-v3 .hero h1{
    text-shadow:
        0 0 50px rgba(79,255,133,.05);
}


.chacha-v3 .hero h1 span{
    position:relative;

    background:
        linear-gradient(
            90deg,
            #c4ffd5 0%,
            #55ff8a 30%,
            #9effbd 52%,
            #58ff91 76%,
            #dcffe6 100%
        );

    background-size:
        220% 100%;

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

    animation:
        v3TextShift 7s linear infinite;
}


@keyframes v3TextShift{

    to{
        background-position:
            220% 0;
    }
}


/* ==============================================================
   VAULT CORE
   ============================================================== */

.chacha-v3 .vault-shell{
    filter:
        drop-shadow(
            0 0 48px rgba(70,255,128,.12)
        );
}


.chacha-v3 .vault-ring{
    will-change:transform;
}


.chacha-v3 .ring-a{
    animation:
        v3Spin 18s linear infinite;
}


.chacha-v3 .ring-b{
    animation:
        v3SpinReverse 13s linear infinite;
}


.chacha-v3 .ring-c{
    animation:
        v3Spin 9s linear infinite;
}


@keyframes v3Spin{

    to{
        transform:
            rotate(360deg);
    }
}


@keyframes v3SpinReverse{

    to{
        transform:
            rotate(-360deg);
    }
}


.chacha-v3 .vault-core{
    position:relative;

    overflow:hidden;

    box-shadow:
        inset 0 0 38px rgba(80,255,135,.11),
        0 0 70px rgba(58,255,121,.12);
}


.chacha-v3 .vault-core:after{
    content:"";

    position:absolute;

    width:150%;
    height:30%;

    left:-25%;
    top:-50%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(149,255,182,.17),
            transparent
        );

    transform:
        rotate(-13deg);

    animation:
        v3VaultScan 4.5s ease-in-out infinite;
}


@keyframes v3VaultScan{

    0%{
        top:-45%;
        opacity:0;
    }

    20%{
        opacity:1;
    }

    80%{
        opacity:1;
    }

    100%{
        top:120%;
        opacity:0;
    }
}


/* ==============================================================
   FLOATING REWARD CHIPS
   ============================================================== */

.chacha-v3 .vault-floating{
    border:
        1px solid rgba(128,255,165,.14);

    background:
        linear-gradient(
            145deg,
            rgba(12,22,16,.88),
            rgba(5,10,7,.95)
        );

    backdrop-filter:
        blur(18px)
        saturate(140%);

    box-shadow:
        0 18px 50px rgba(0,0,0,.36),
        inset 0 1px rgba(255,255,255,.04);

    animation:
        v3Float 5s ease-in-out infinite;
}


.chacha-v3 .vault-floating-b{
    animation-delay:-1.2s;
}

.chacha-v3 .vault-floating-c{
    animation-delay:-2.4s;
}

.chacha-v3 .vault-floating-d{
    animation-delay:-3.2s;
}


@keyframes v3Float{

    0%,100%{
        transform:
            translateY(0);
    }

    50%{
        transform:
            translateY(-7px);
    }
}


/* ==============================================================
   METRIC CARDS
   ============================================================== */

.chacha-v3 .metric{
    position:relative;

    overflow:hidden;

    border-color:
        rgba(124,255,164,.11);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(79,255,132,.015)
        );

    backdrop-filter:blur(16px);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


.chacha-v3 .metric:hover{
    transform:
        translateY(-4px);

    border-color:
        rgba(100,255,150,.28);

    box-shadow:
        0 22px 50px rgba(0,0,0,.18),
        inset 0 1px rgba(255,255,255,.04);
}


.chacha-v3 .metric:after{
    content:"";

    position:absolute;

    width:80px;
    height:160%;

    top:-30%;
    left:-120px;

    transform:
        rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.04),
            transparent
        );

    transition:
        left .6s ease;
}


.chacha-v3 .metric:hover:after{
    left:120%;
}


/* ==============================================================
   VAULT POWER
   ============================================================== */

.vault-power-section{
    position:relative;
}


.vault-power-shell{
    position:relative;

    overflow:hidden;

    padding:
        clamp(28px,4vw,54px);

    border:
        1px solid rgba(91,255,145,.17);

    border-radius:
        28px;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(75,255,131,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(108,227,255,.05),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(12,20,15,.93),
            rgba(4,8,6,.97)
        );

    backdrop-filter:
        blur(25px)
        saturate(130%);

    box-shadow:
        0 35px 90px rgba(0,0,0,.36),
        inset 0 1px rgba(255,255,255,.035),
        0 0 80px rgba(52,255,113,.03);
}


.vault-power-noise{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.18;

    background-image:
        radial-gradient(
            rgba(255,255,255,.18) .6px,
            transparent .6px
        );

    background-size:
        7px 7px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.4),
            transparent
        );
}


.vault-power-beam{
    position:absolute;

    top:-30%;
    left:-12%;

    width:22%;
    height:165%;

    pointer-events:none;

    transform:
        rotate(15deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(100,255,152,.055),
            transparent
        );

    animation:
        v3PowerBeam 8s linear infinite;
}


@keyframes v3PowerBeam{

    from{
        left:-30%;
    }

    to{
        left:120%;
    }
}


.vault-power-head{
    position:relative;
    z-index:2;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;

    margin-bottom:35px;
}


.vault-power-head h2{
    margin:
        8px 0 0;

    font-size:
        clamp(30px,4vw,54px);

    letter-spacing:
        -.045em;
}


.vault-power-status{
    display:flex;
    align-items:center;
    gap:8px;

    padding:
        9px 13px;

    border:
        1px solid rgba(84,255,137,.18);

    border-radius:
        999px;

    color:
        #92ffb2;

    background:
        rgba(71,255,129,.05);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .13em;
}


.vault-power-status i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:
        #5aff8d;

    box-shadow:
        0 0 14px #5aff8d;

    animation:
        v3StatusPulse 1.7s ease-in-out infinite;
}


@keyframes v3StatusPulse{

    50%{
        opacity:.32;
    }
}


.vault-power-main{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(260px,.65fr)
        minmax(0,1.35fr);

    align-items:center;

    gap:
        clamp(30px,5vw,75px);
}


/* Power core */

.vault-power-count{
    display:grid;
    place-items:center;
}


.power-orbit{
    position:relative;

    width:
        min(330px,70vw);

    aspect-ratio:1;

    display:grid;
    place-items:center;
}


.power-ring{
    position:absolute;

    border-radius:50%;

    border:
        1px solid rgba(93,255,143,.15);
}


.power-ring-a{
    inset:0;

    border-style:dashed;

    animation:
        v3PowerSpin 20s linear infinite;
}


.power-ring-b{
    inset:11%;

    border-color:
        rgba(106,226,255,.16);

    animation:
        v3PowerSpinReverse 13s linear infinite;
}


.power-ring-c{
    inset:22%;

    border-style:dotted;

    border-color:
        rgba(91,255,143,.28);

    animation:
        v3PowerSpin 8s linear infinite;
}


.power-ring-a:before,
.power-ring-b:before{
    content:"";

    position:absolute;

    width:9px;
    height:9px;

    left:50%;
    top:-5px;

    border-radius:50%;

    background:
        var(--v3-green);

    box-shadow:
        0 0 18px var(--v3-green);
}


@keyframes v3PowerSpin{

    to{
        transform:rotate(360deg);
    }
}


@keyframes v3PowerSpinReverse{

    to{
        transform:rotate(-360deg);
    }
}


.power-core{
    position:relative;

    width:53%;
    aspect-ratio:1;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    border:
        1px solid rgba(119,255,160,.21);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(64,255,125,.12),
            rgba(5,11,8,.96) 66%
        );

    box-shadow:
        inset 0 0 55px rgba(64,255,124,.09),
        0 0 55px rgba(57,255,119,.07);
}


.power-core span,
.power-core small{
    color:#647169;

    font-size:8px;

    font-weight:900;

    letter-spacing:.14em;
}


.power-core strong{
    margin:
        5px 0;

    color:
        #dcffe7;

    font-size:
        clamp(48px,7vw,78px);

    line-height:1;

    letter-spacing:
        -.06em;

    text-shadow:
        0 0 30px rgba(76,255,131,.20);
}


/* Four emissions */

.vault-power-rewards{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:13px;
}


.power-reward{
    position:relative;

    overflow:hidden;

    min-height:145px;

    padding:19px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.015)
        );

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.power-reward:hover{
    transform:
        translateY(-4px);

    border-color:
        rgba(99,255,149,.24);

    box-shadow:
        0 18px 45px rgba(0,0,0,.24);
}


.power-reward:before{
    content:"";

    position:absolute;

    width:110px;
    height:110px;

    right:-45px;
    top:-50px;

    border-radius:50%;

    filter:blur(32px);

    opacity:.22;
}


.power-fucks:before{
    background:
        var(--v3-green);
}


.power-stonk:before{
    background:
        var(--v3-cyan);
}


.power-spcx:before{
    background:
        var(--v3-purple);
}


.power-gme:before{
    background:
        var(--v3-pink);
}


.power-reward-top{
    position:relative;

    display:flex;
    justify-content:space-between;
    gap:10px;
}


.power-reward-top span{
    color:#626f67;

    font-size:7px;

    font-weight:900;

    letter-spacing:.14em;
}


.power-reward-top b{
    color:#b9ffcd;

    font-size:9px;

    letter-spacing:.05em;
}


.power-reward > strong{
    position:relative;

    display:block;

    margin:
        19px 0 5px;

    color:#f3fff7;

    font-size:
        clamp(28px,3vw,42px);

    line-height:1;

    letter-spacing:-.045em;
}


.power-reward > small{
    color:#59665e;

    font-size:8px;

    letter-spacing:.04em;
}


.vault-power-footer{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:1px;

    margin-top:35px;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.055);

    border-radius:14px;

    background:
        rgba(255,255,255,.035);
}


.vault-power-footer > div{
    padding:14px 17px;

    background:
        rgba(4,9,6,.74);
}


.vault-power-footer span{
    display:block;

    color:#58645c;

    font-size:7px;

    font-weight:900;

    letter-spacing:.14em;
}


.vault-power-footer strong{
    display:block;

    margin-top:5px;

    color:#cfe9d6;

    font-size:10px;
}


.vault-power-footer strong.position-live{
    color:#5aff8d;

    text-shadow:
        0 0 16px rgba(90,255,141,.28);
}


/* ==============================================================
   REWARD CARDS
   ============================================================== */

.chacha-v3 .reward{
    position:relative;

    overflow:hidden;

    border:
        1px solid rgba(107,255,153,.12);

    backdrop-filter:
        blur(18px)
        saturate(125%);

    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}


.chacha-v3 .reward:hover{
    transform:
        translateY(-7px);

    border-color:
        rgba(112,255,158,.32);

    box-shadow:
        0 30px 75px rgba(0,0,0,.30),
        0 0 50px rgba(60,255,120,.045);
}


.chacha-v3 .reward:after{
    content:"";

    position:absolute;

    width:55%;
    height:200%;

    top:-50%;
    left:-80%;

    pointer-events:none;

    transform:
        rotate(24deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.035),
            transparent
        );

    transition:
        left .8s ease;
}


.chacha-v3 .reward:hover:after{
    left:135%;
}


.chacha-v3 .reward-fucks{
    box-shadow:
        inset 0 0 70px rgba(75,255,127,.015);
}


.chacha-v3 .reward-stonk{
    box-shadow:
        inset 0 0 70px rgba(99,226,255,.015);
}


.chacha-v3 .reward-spcx{
    box-shadow:
        inset 0 0 70px rgba(183,126,255,.022);
}


.chacha-v3 .reward-gme{
    box-shadow:
        inset 0 0 70px rgba(255,115,213,.020);
}


.chacha-v3 .reward-earned strong{
    text-shadow:
        0 0 22px rgba(82,255,136,.12);
}


.v3-number-pulse{
    animation:
        v3NumberPulse .42s ease;
}


@keyframes v3NumberPulse{

    50%{
        opacity:.65;
        transform:
            translateY(-2px);
    }
}


/* ==============================================================
   NFT CARDS
   ============================================================== */

.chacha-v3 .nft-card{
    position:relative;

    overflow:hidden;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


.chacha-v3 .nft-card:hover{
    transform:
        translateY(-6px)
        scale(1.01);

    border-color:
        rgba(96,255,148,.34);

    box-shadow:
        0 25px 60px rgba(0,0,0,.34),
        0 0 38px rgba(70,255,127,.055);
}


.chacha-v3 .nft-card.selected{
    border-color:
        rgba(98,255,149,.72);

    box-shadow:
        0 0 0 1px rgba(101,255,151,.20),
        0 0 45px rgba(74,255,130,.13);
}


.chacha-v3 .nft-card.selected:before{
    content:"SELECTED";

    position:absolute;

    z-index:8;

    top:10px;
    right:10px;

    padding:
        6px 8px;

    border-radius:
        999px;

    color:#041008;

    background:
        #62ff93;

    font-size:
        7px;

    font-weight:
        1000;

    letter-spacing:
        .11em;

    box-shadow:
        0 0 18px rgba(88,255,141,.25);
}


/* ==============================================================
   BUTTONS
   ============================================================== */

.chacha-v3 .btn-primary{
    position:relative;

    overflow:hidden;

    box-shadow:
        0 10px 35px rgba(70,255,126,.11);
}


.chacha-v3 .btn-primary:before{
    content:"";

    position:absolute;

    width:55px;
    height:200%;

    left:-100px;
    top:-50%;

    transform:
        rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.34),
            transparent
        );

    animation:
        v3ButtonSweep 4.7s ease-in-out infinite;
}


@keyframes v3ButtonSweep{

    0%,60%{
        left:-100px;
    }

    100%{
        left:130%;
    }
}


/* ==============================================================
   CLAIM ALL
   ============================================================== */

.chacha-v3 .claim-all{
    position:relative;

    overflow:hidden;

    border:
        1px solid rgba(102,255,151,.20);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(87,255,140,.09),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            rgba(15,26,18,.96),
            rgba(5,10,7,.98)
        );

    box-shadow:
        0 26px 65px rgba(0,0,0,.25),
        inset 0 1px rgba(255,255,255,.035);
}


.chacha-v3 .claim-all:hover{
    border-color:
        rgba(101,255,151,.50);

    box-shadow:
        0 30px 80px rgba(0,0,0,.31),
        0 0 45px rgba(73,255,129,.08);
}


/* ==============================================================
   TRANSACTION MODAL
   ============================================================== */

.chacha-v3 .modal-card,
.chacha-v3 .tx-card{
    border:
        1px solid rgba(102,255,151,.17);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(72,255,130,.08),
            transparent 40%
        ),
        rgba(5,10,7,.97);

    backdrop-filter:
        blur(30px)
        saturate(140%);

    box-shadow:
        0 40px 120px rgba(0,0,0,.60),
        0 0 70px rgba(70,255,127,.055);
}


/* ==============================================================
   MOBILE
   ============================================================== */

@media(max-width:900px){

    .vault-power-main{
        grid-template-columns:1fr;
    }

    .power-orbit{
        width:
            min(285px,75vw);
    }

    .vault-power-rewards{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


@media(max-width:620px){

    .vault-power-shell{
        padding:
            25px 17px;

        border-radius:
            21px;
    }

    .vault-power-head{
        align-items:flex-start;
    }

    .vault-power-head h2{
        font-size:
            32px;
    }

    .vault-power-rewards{
        grid-template-columns:1fr;
    }

    .power-reward{
        min-height:125px;
    }

    .vault-power-footer{
        grid-template-columns:1fr;
    }

    .vault-power-footer > div:not(:last-child){
        border-bottom:
            1px solid rgba(255,255,255,.05);
    }

    .power-core strong{
        font-size:
            55px;
    }

    .chacha-v3 .reward:hover,
    .chacha-v3 .metric:hover,
    .power-reward:hover{
        transform:none;
    }
}


/* Respect users who disable motion */

@media(prefers-reduced-motion:reduce){

    .chacha-v3 *,
    .chacha-v3 *:before,
    .chacha-v3 *:after{
        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:auto !important;
    }
}



/* ==========================================================
   CHACHA_MOBILE_OVERFLOW_FIX_V32
   Prevent horizontal scrolling / viewport escape
========================================================== */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
}

body{
    position:relative;
}

main,
section,
header,
footer,
.nav,
.hero,
.section,
.ticker,
.metric-grid,
.reward-grid,
.vault-power-section,
.vault-power-shell,
.vault-power-main,
.vault-power-rewards,
.wallet-control{
    min-width:0;
    max-width:100%;
}


/* Prevent grid children from forcing parent wider */

.hero > *,
.metric-grid > *,
.reward-grid > *,
.vault-power-main > *,
.vault-power-rewards > *,
.vault-power-footer > *{
    min-width:0;
}


/* Long text / addresses cannot widen cards */

.token-address,
code,
.reward-name,
.reward-name-with-logo,
.power-token-name,
.wallet-menu-head strong,
.reward-note{
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
}


/* Decorative elements should never affect viewport */

.ambient,
.grid,
.noise,
.hero:before,
.vault-glow,
.reward-orb,
.vault-power-beam,
.vault-power-noise{
    pointer-events:none;
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:760px){

    body{
        overflow-x:hidden !important;
    }


    main{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }


    .nav{
        width:100%;
        max-width:100%;

        padding-left:12px;
        padding-right:12px;

        box-sizing:border-box;
    }


    .hero,
    .section,
    .ticker{
        width:100%;
        max-width:100%;

        box-sizing:border-box;
    }


    .hero{
        overflow:hidden;
    }


    .hero-copy,
    .hero-vault{
        min-width:0;
        max-width:100%;
    }


    /*
     * Floating desktop hero reward chips are common
     * sources of mobile horizontal overflow.
     */

    .vault-floating{
        max-width:calc(100vw - 28px);

        box-sizing:border-box;

        left:auto !important;
        right:auto !important;
    }


    .vault-floating-a,
    .vault-floating-b{
        position:absolute;
    }


    .vault-floating-c,
    .vault-floating-d{
        display:none !important;
    }


    /*
     * V3 power section
     */

    .vault-power-section{
        overflow:hidden;
    }


    .vault-power-shell{
        width:100%;
        max-width:100%;

        box-sizing:border-box;

        overflow:hidden;
    }


    .vault-power-main{
        width:100%;
        max-width:100%;
    }


    .power-orbit{
        max-width:100%;
    }


    .power-reward{
        width:100%;
        max-width:100%;

        box-sizing:border-box;
    }


    /*
     * Reward cards
     */

    .reward-grid{
        width:100%;
        max-width:100%;

        grid-template-columns:minmax(0,1fr) !important;
    }


    .reward{
        width:100%;
        max-width:100%;

        box-sizing:border-box;
    }


    /*
     * Dashboard metrics
     */

    .metric-grid{
        width:100%;
        max-width:100%;
    }


    .metric{
        width:100%;
        max-width:100%;

        box-sizing:border-box;
    }


    /*
     * Buttons shouldn't exceed viewport
     */

    .btn,
    .claim-all,
    #stakeBtn,
    #unstakeBtn{
        max-width:100%;

        box-sizing:border-box;
    }


    /*
     * Wallet dropdown
     */

    .wallet-menu{
        max-width:calc(100vw - 24px) !important;

        box-sizing:border-box;
    }


    /*
     * Images
     */

    img{
        max-width:100%;
    }


    /*
     * Prevent animated transforms from visually
     * producing sideways mobile scroll.
     */

    .reward:hover,
    .metric:hover,
    .nft-card:hover,
    .power-reward:hover{
        transform:none !important;
    }
}


/* Extra-small phones */

@media(max-width:480px){

    .hero{
        padding-left:14px;
        padding-right:14px;
    }


    .section{
        padding-left:12px;
        padding-right:12px;
    }


    .vault-power-shell{
        padding-left:14px;
        padding-right:14px;
    }


    .vault-power-rewards{
        grid-template-columns:minmax(0,1fr) !important;
    }


    .vault-power-footer{
        grid-template-columns:minmax(0,1fr) !important;
    }


    .reward-name-with-logo{
        max-width:100%;
    }


    .reward-name-with-logo > span:last-child{
        overflow-wrap:anywhere;
    }


    .ticker{
        overflow:hidden;
    }
}



/* ==========================================================
   CHACHA_REWARD_LOGOS_V34
========================================================== */


/* Main reward card identity */

.reward-name-with-logo{
    display:flex !important;
    align-items:center;

    gap:
        clamp(10px,1.2vw,15px);

    width:100%;
    min-width:0;
    max-width:100%;
}


.reward-token-logo{
    position:relative;

    width:
        clamp(46px,4.5vw,60px);

    height:
        clamp(46px,4.5vw,60px);

    flex:
        0 0 auto;

    display:grid;
    place-items:center;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius:16px;

    background:
        rgba(255,255,255,.04);

    box-shadow:
        inset 0 1px rgba(255,255,255,.06),
        0 14px 35px rgba(0,0,0,.30);

    transform:
        translateZ(0);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


.reward-token-logo img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


.reward-token-logo:after{
    content:"";

    position:absolute;

    inset:-60%;

    pointer-events:none;

    background:
        linear-gradient(
            115deg,
            transparent 33%,
            rgba(255,255,255,.18) 50%,
            transparent 67%
        );

    transform:
        translateX(-100%);

    animation:
        v34LogoSweep 5.5s ease-in-out infinite;
}


@keyframes v34LogoSweep{

    0%,62%{
        transform:
            translateX(-100%);
    }

    100%{
        transform:
            translateX(100%);
    }
}


.reward:hover .reward-token-logo{
    transform:
        translateY(-3px)
        scale(1.045);

    border-color:
        rgba(106,255,154,.34);
}


.reward-token-label{
    min-width:0;

    overflow-wrap:anywhere;

    color:inherit;
}


/* Individual glow identities */

.reward-token-logo-fucks{
    box-shadow:
        0 14px 35px rgba(0,0,0,.30),
        0 0 32px rgba(87,255,140,.10);
}


.reward-token-logo-stonk{
    box-shadow:
        0 14px 35px rgba(0,0,0,.30),
        0 0 32px rgba(98,228,255,.10);
}


.reward-token-logo-spcx{
    box-shadow:
        0 14px 35px rgba(0,0,0,.30),
        0 0 32px rgba(193,143,255,.11);
}


.reward-token-logo-gme{
    box-shadow:
        0 14px 35px rgba(0,0,0,.30),
        0 0 32px rgba(255,126,218,.10);
}


/* Vault Power */

.power-token-name{
    display:inline-flex;

    align-items:center;

    justify-content:flex-end;

    gap:7px;

    min-width:0;
    max-width:100%;
}


.power-token-logo{
    width:25px;
    height:25px;

    flex:
        0 0 25px;

    display:block;

    object-fit:cover;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius:7px;

    background:
        rgba(255,255,255,.04);

    box-shadow:
        0 6px 18px rgba(0,0,0,.28);
}


/* Hero chips */

.vault-chip-token{
    display:flex !important;

    align-items:center;

    gap:6px;

    min-width:0;
    max-width:100%;
}


.hero-token-logo{
    width:20px;
    height:20px;

    flex:
        0 0 20px;

    display:block;

    object-fit:cover;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius:6px;

    background:
        rgba(255,255,255,.04);

    box-shadow:
        0 5px 14px rgba(0,0,0,.28);
}


/* ==========================================================
   MOBILE — MUST NOT REINTRODUCE HORIZONTAL OVERFLOW
========================================================== */

@media(max-width:760px){

    .reward-name-with-logo,
    .power-token-name,
    .vault-chip-token{
        min-width:0 !important;
        max-width:100% !important;
    }


    .reward-token-logo{
        width:44px;
        height:44px;

        flex-basis:44px;

        border-radius:12px;
    }


    .power-token-logo{
        width:21px;
        height:21px;

        flex-basis:21px;
    }


    .hero-token-logo{
        width:18px;
        height:18px;

        flex-basis:18px;
    }


    .reward-token-label{
        overflow:hidden;

        text-overflow:ellipsis;
    }
}