@font-face {
  font-display: swap;
  font-family: ProximaNova;
  font-style: italic;
  font-weight: 400;
  src:
    url(./font/Proxima-Nova-Regular.woff2) format("woff2"),
    url(./font/Proxima-Nova-Regular.woff) format("woff"),
    url(./font/Proxima-Nova-Regular.ttf) format("truetype");
}
@font-face {
  font-display: swap;
  font-family: ProximaNova;
  font-style: normal;
  font-weight: 400;
  src:
    url(./font/Proxima-Nova-Regular.woff2) format("woff2"),
    url(./font/Proxima-Nova-Regular.woff) format("woff"),
    url(./font/Proxima-Nova-Regular.ttf) format("truetype");
}
@font-face {
  font-display: swap;
  font-family: ProximaNova;
  font-style: normal;
  font-weight: 500;
  src:
    url(./font/Proxima-Nova-Medium.woff2) format("woff2"),
    url(./font/Proxima-Nova-Medium.woff) format("woff"),
    url(./font/Proxima-Nova-Medium.ttf) format("truetype");
}
@font-face {
  font-display: swap;
  font-family: ProximaNova;
  font-style: italic;
  font-weight: 600;
  src:
    url(./font/Proxima-Nova-Semibold.woff2) format("woff2"),
    url(./font/Proxima-Nova-Semibold.woff) format("woff"),
    url(./font/Proxima-Nova-Semibold.ttf) format("truetype");
}
@font-face {
  font-display: swap;
  font-family: ProximaNova;
  font-style: normal;
  font-weight: 600;
  src:
    url(./font/Proxima-Nova-Semibold.woff2) format("woff2"),
    url(./font/Proxima-Nova-Semibold.woff) format("woff"),
    url(./font/Proxima-Nova-Semibold.ttf) format("truetype");
}
@font-face {
  font-display: swap;
  font-family: ProximaNova;
  font-style: italic;
  font-weight: 700;
  src:
    url(./font/Proxima-Nova-Extrabold.woff2) format("woff2"),
    url(./font/Proxima-Nova-Extrabold.woff) format("woff"),
    url(./font/Proxima-Nova-Extrabold.ttf) format("truetype");
}
:root {
  --color-blue: #007aff;
  --color-purple: #6c00a2;
  --color-dark: #090D14;
}
*,
*::before,
*::after{
    box-sizing:border-box;
}
a{ text-decoration: none; }
html{
    overflow-x:hidden;
}
html, body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
}
body{
    margin:0;
    padding:0;
    position:relative;
    font-family:ProximaNova,sans-serif;
    background:#020817;
    box-sizing: border-box;
}
/* =========================================
FIXED GLOWS
========================================= */
body::before,
body::after,
.glow-right{
    content:"";
    position:fixed; /* IMPORTANT */
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    filter:blur(120px);
    will-change:transform;
    transform:translateZ(0);
}
/* LEFT BLUE */
body::before{
    width:420px;
    height:420px;
    background:
    rgba(72,120,255,.42);
    top:120px;
    left:-150px;
}
/* LEFT PURPLE */
body::after{
    width:260px;
    height:260px;
    background:
    rgba(108,0,162,.68);
    bottom:180px;
    left:-40px;
}
/* RIGHT MIX */
.glow-right{
    width:340px;
    height:340px;
    right:-120px;
    top:45%;
    transform:translateY(-50%);
    background:
    radial-gradient(
        circle,
        rgba(72,120,255,.78) 0%,
        rgba(108,0,162,.70) 55%,
        transparent 75%
    );
}
/* =========================================
TABLET
========================================= */
@media(max-width:900px){
    body::before{
        width:320px;
        height:320px;
        left:-140px;
        top:90px;
        filter:blur(100px);
    }
    body::after{
        width:220px;
        height:220px;
        left:-80px;
        bottom:120px;
        filter:blur(100px);
    }
    .glow-right{
        width:260px;
        height:260px;
        right:-120px;
        top:55%;
        filter:blur(100px);
    }
}
/* =========================================
MOBILE
========================================= */
@media(max-width:520px){
    body::before{
        width:240px;
        height:240px;
        top:120px;
        left:-100px;
        opacity:.7;
        filter:blur(80px);
    }
    body::after{
        width:170px;
        height:170px;
        bottom:120px;
        left:-70px;
        opacity:.75;
        filter:blur(80px);
    }
    .glow-right{
        width:180px;
        height:180px;
        right:-90px;
        top:48%;
        opacity:.8;
        filter:blur(80px);
    }
}
.navbar{ width:100%; padding:22px 34px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; box-sizing:border-box; }
.nav-left{ display:flex; align-items:center; gap:42px; flex: 1; }
.logo-wrap{ display:flex; align-items:center; gap:12px; }
.logo-box{ width:42px; height:42px; border-radius:12px; background: linear-gradient( 180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(12px); }
.logo-box svg{ width:22px; fill:white; opacity:.95; }
.nav-menu{ display:flex; align-items:center; gap:14px; }
.nav-link{ color:rgba(255,255,255,.58); text-decoration:none; font-size:12px; font-weight:600; padding:9px 14px; border-radius:999px; transition:.25s ease; }
.nav-link:hover{ color:white; }
.nav-link.active{ background:rgba(255,255,255,.09); color:#fff; }
.nav-right{ display:flex; align-items:center; gap:12px; justify-content:flex-end; flex-shrink:0; }
.icon-btn{ height:36px; min-width:36px; padding:0 12px; border-radius:999px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; gap:6px; color:rgba(255,255,255,.75); backdrop-filter:blur(10px); }
.icon-btn svg{ width:15px; height:15px; stroke:currentColor; }
.kbd{ font-size:11px; font-weight:600; opacity:.7; }
.coin-btn{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(10px); }
.coin{ width:18px; height:18px; border-radius:50%; background:linear-gradient( 180deg, #ffd76a, #ffb300); box-shadow:0 0 15px rgba(255,193,7,.4); }
.connect-btn{ display: flex; align-items: anchor-center; justify-content: center; height:42px; padding:0 22px; border:none; border-radius:999px; background:#2a9df4; color:white; font-size:13px; font-weight:700; cursor:pointer; transition:.25s ease; }
.connect-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 30px rgba(42,157,244,.25); }
.menu-btn{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); display: none; }
/* =========================================
DESKTOP ONLY
========================================= */
@media(min-width:1101px){
    .nav-menu{
        position:static;
        width:auto;
        padding:0;
        border:none;
        background:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        box-shadow:none;
        opacity:1;
        visibility:visible;
        transform:none;
        pointer-events:auto;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:14px;
    }
}
/* =========================================
MOBILE NAV MENU
ONLY NAV-MENU
========================================= */
@media(max-width:1100px){
    /* SHOW MENU BUTTON */
    .menu-btn{
        display:flex;
        position:relative;
        z-index:120;
    }
    /* KEEP NAV LEFT NORMAL */
    .nav-left{
        position:relative;
        display:flex;
        align-items:center;
        gap:16px;
    }
    /* MOBILE MENU PANEL */
    .nav-menu{
        position:fixed;
        top:78px;
        right:18px;
        width:240px;
        padding:16px;
        border-radius:24px;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        /* GLASS */
        background:
        linear-gradient(
            180deg,
            rgba(14,20,32,.96),
            rgba(9,14,24,.98)
        );
        backdrop-filter:blur(22px);
        -webkit-backdrop-filter:blur(22px);
        border:
        1px solid rgba(255,255,255,.06);
        box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.03);
        /* ANIMATION */
        opacity:0;
        visibility:hidden;
        transform:
        translateY(10px)
        scale(.96);
        transition:.28s ease;
        z-index:110;
    }
    /* ACTIVE */
    .navbar.nav-open .nav-menu{
        opacity:1;
        visibility:visible;
        transform:
        translateY(0)
        scale(1);
    }
    /* LINKS */
    .nav-link{
        width:100%;
        min-height:46px;
        padding:0 16px;
        border-radius:14px;
        display:flex;
        align-items:center;
        font-size:14px;
        background:
        rgba(255,255,255,.02);
        transition:.25s ease;
    }
    .nav-link:hover{
        background:
        rgba(255,255,255,.05);
    }
    .nav-link.active{
        background:
        linear-gradient(
            135deg,
            rgba(46,168,255,.16),
            rgba(139,92,246,.10)
        );
        border:
        1px solid rgba(46,168,255,.10);
    }
    /* GLOW */
    .nav-menu::before{
        content:"";
        position:absolute;
        top:-100px;
        right:-100px;
        width:220px;
        height:220px;
        border-radius:50%;
        background:
        radial-gradient(
            circle,
            rgba(46,168,255,.12),
            transparent 72%
        );
        filter:blur(20px);
        pointer-events:none;
    }
}
@media(max-width:520px){
    .menu-btn{ display:flex; }
}
/* =========================================
WALLET DROPDOWN
========================================= */
.wallet-dropdown{
    position:relative;
}
/* =========================================
TRIGGER
========================================= */
.wallet-trigger{
    height:42px;
    padding:0 14px;
    border-radius:999px;
    border:
    1px solid rgba(255,255,255,.06);
    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.03)
    );
    display:flex;
    align-items:center;
    gap:10px;
    color:white;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    backdrop-filter:blur(12px);
    transition:.25s ease;
}
.wallet-trigger:hover{
    background:
    rgba(255,255,255,.06);
}
.wallet-trigger-icon{
    width:20px;
    height:20px;
    object-fit:contain;
    flex-shrink:0;
}
.wallet-trigger span{
    white-space:nowrap;
}
.wallet-arrow{
    width:14px;
    height:14px;
    fill:none;
    stroke:
    rgba(255,255,255,.72);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:.25s ease;
}
/* =========================================
MENU
========================================= */
.wallet-menu{
    position:absolute;
    top:54px;
    right:0;
    width:236px;
    border-radius:18px;
    overflow:hidden;
    background:
    linear-gradient(
        180deg,
        rgba(21,27,40,.98),
        rgba(16,21,33,.98)
    );
    border:
    1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(18px);
    box-shadow:
    0 20px 60px rgba(0,0,0,.35);
    opacity:0;
    visibility:hidden;
    transform:
    translateY(8px);
    transition:.25s ease;
    z-index:50;
}
/* ACTIVE */
.wallet-dropdown.active .wallet-menu{
    opacity:1;
    visibility:visible;
    transform:
    translateY(0);
}
.wallet-dropdown.active .wallet-arrow{
    transform:
    rotate(180deg);
}
/* =========================================
USER
========================================= */
.wallet-user{
    padding:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.wallet-user-left{
    display:flex;
    align-items:center;
    gap:12px;
}
.wallet-user-icon{
    width:38px;
    height:38px;
    object-fit:contain;
    flex-shrink:0;
}
.wallet-user-info span{
    display:block;
    color:
    rgba(180,210,255,.55);
    font-size:12px;
    margin-bottom:4px;
}
.wallet-user-info strong{
    color:white;
    font-size:15px;
    font-weight:700;
}
/* =========================================
VERIFIED
========================================= */
.wallet-verified{
    width:20px;
    height:20px;
    border-radius:50%;
    background:#22c55e;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:12px;
    font-weight:700;
    flex-shrink:0;
}
/* =========================================
DIVIDER
========================================= */
.wallet-divider{
    width:100%;
    height:1px;
    background:
    rgba(255,255,255,.05);
}
/* =========================================
ACTION
========================================= */
.wallet-action{
    width:100%;
    height:52px;
    border:none;
    background:none;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 16px;
    color:#ff6666;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:.25s ease;
}
.wallet-action:hover{
    background:
    rgba(255,255,255,.03);
}
.wallet-action svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
/* =========================================
MOBILE
========================================= */
/* =========================================
MOBILE PERFECT FIX
========================================= */
@media(max-width:520px){
    /* DROPDOWN ROOT */
    .wallet-dropdown{
        position:relative;
        display:flex;
        justify-content:flex-end;
    }
    /* TRIGGER */
    .wallet-trigger{
        height: 36px;
        max-width: 40px;
        padding: 0 10px;
        overflow: hidden;
        overflow:hidden;
    }
    .wallet-trigger span{
        flex:1;
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    /* MENU */
    .wallet-menu{
        position:absolute;
        top:50px;
        right:0;
        width:220px;
        max-width:
        calc(100vw - 24px);
        border-radius:20px;
        overflow:hidden;
        /* PREVENT SCREEN OVERFLOW */
        transform-origin:
        top right;
    }
    /* IF SCREEN TOO SMALL */
    .wallet-dropdown.mobile-left .wallet-menu{
        right:auto;
        left:0;
        transform-origin:
        top left;
    }
    /* USER */
    .wallet-user{
        padding:15px;
    }
    .wallet-user-left{
        min-width:0;
        flex:1;
    }
    .wallet-user-info{
        min-width:0;
    }
    .wallet-user-info strong{
        display:block;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        max-width:120px;
    }
    /* ACTION */
    .wallet-action{
        height:50px;
        font-size:13px;
    }
}
/* =========================================
EXTRA SMALL DEVICES
========================================= */
@media(max-width:380px){
    .wallet-menu{
        width:200px;
        max-width:
        calc(100vw - 18px);
    }
    .wallet-user-info strong{
        max-width:100px;
    }
}
@media(max-width:1100px){
    /* MENU BUTTON */
    .menu-btn{
        display:flex;
        position:relative;
        z-index:120;
    }
    /* KEEP HEADER SAME */
    .nav-left{
        gap:18px;
    }
    /* MOBILE DROPDOWN */
    .nav-menu{
        position:fixed;
        top:78px;
        right:18px;
        width:240px;
        padding:16px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        border-radius:24px;
        /* GLASS */
        background:
        linear-gradient(
            180deg,
            rgba(14,20,32,.96),
            rgba(9,14,24,.98)
        );
        backdrop-filter:blur(22px);
        -webkit-backdrop-filter:blur(22px);
        border:
        1px solid rgba(255,255,255,.06);
        box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.03);
        /* HIDDEN */
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:
        translateY(10px)
        scale(.96);
        transition:.28s ease;
        z-index:110;
    }
    /* ACTIVE */
    .navbar.nav-open .nav-menu{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:
        translateY(0)
        scale(1);
    }
    /* LINKS */
    .nav-link{
        width:100%;
        min-height:46px;
        padding:0 16px;
        border-radius:14px;
        display:flex;
        align-items:center;
        font-size:14px;
        background:
        rgba(255,255,255,.02);
    }
    .nav-link.active{
        background:
        linear-gradient(
            135deg,
            rgba(46,168,255,.16),
            rgba(139,92,246,.10)
        );
        border:
        1px solid rgba(46,168,255,.10);
    }
}
@media(max-width:768px){
    .navbar{ padding:18px 18px; }
    .logo-text{ font-size:15px; letter-spacing:2px; }
    .connect-btn{ display:none; }
    .kbd{ display:none; }
    .icon-btn{ padding:0 10px; }
}
@media(max-width:520px){
    .nav-right{ gap:8px; }
    .logo-box{ width:38px; height:38px; }
    .coin-btn{ display:none; }
}
/* =========================================
LANDING SECTION
========================================= */
.landing-section{
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 920px;
    margin: 40px auto 0;
    padding: 0px 0px 0px;
}
.landing-section.no-pad-b{
    padding-bottom: 0px;
}
.landing-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    text-align:left;
}
.landing-icon{
    width:46px;
    height:46px;
    flex-shrink:0;
    border-radius:14px;
    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.14),
    rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.06);
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(14px);
    box-shadow:
    0 0 30px rgba(72,120,255,.12);
}
.landing-icon svg{
    width:22px;
    fill:white;
}
.landing-title h1{
    color:white;
    font-size:32px;
    font-weight:700;
    margin-bottom:6px;
    line-height:1;
}
.landing-title p{
    color:rgba(255,255,255,.68);
    font-size:15px;
    font-weight:500;
}
/* MOBILE */
@media(max-width:520px){
    .landing-header{
        gap:12px;
    }
    .landing-title h1{
        font-size:26px;
    }
    .landing-title p{
        font-size:13px;
    }
}
.stats-bar{
    margin-top:36px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    border-radius:26px;
    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.05);
    backdrop-filter:blur(16px);
}
.stat-box{
    flex:1;
    height:66px;
    border-radius:18px;
    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.02));
    display:flex;
    align-items:center;
    gap:14px;
    padding:0 16px;
}
.stat-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
}
.stat-icon.green{
    color:#1ed760;
    background:rgba(30,215,96,.12);
}
.stat-icon.yellow{
    color:#ffd34d;
    background:rgba(255,211,77,.12);
}
.stat-content span{
    display:block;
    color:rgba(255,255,255,.62);
    font-size:12px;
    margin-bottom:4px;
}
.stat-content strong{
    color:white;
    font-size:16px;
    font-weight:700;
}
.wallet-balance{
    flex:1.2;
    height:52px;
    border:none;
    color:white;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
    padding: 15px 0;
    text-align: center;
}
.wallet-btn{
    flex:1.2;
    height:52px;
    border:none;
    border-radius:999px;
    background:#2a9df4;
    color:white;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
    padding: 15px 0;
}
.wallet-btn:hover{
    transform:translateY(-1px);
    box-shadow:
    0 12px 30px rgba(42,157,244,.25);
}
.earning-grid{
    margin-top:42px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.earning-card{
    padding:20px 18px;
    border-radius:24px;
    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.05);
    backdrop-filter:blur(16px);
}
.card-top h3{
    color:white;
    font-size:18px;
    font-weight:700;
}
.card-top p{
    color:white;
    font-size:14px;
    font-weight:700;
    margin-top:6px;
    font-weight: 300;
}
.coin-circle{
    width:96px;
    margin:34px auto;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.coin-circle img{
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    position:relative;
    z-index:2;
    border-radius: 100px;
}
.earning-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:14px;
}
.earning-row span{
    color:rgba(255,255,255,.68);
    font-size:14px;
}
.earning-row strong{
    color:white;
    font-size:15px;
    font-weight:700;
}
.divider{
    width:100%;
    height:1px;
    background:rgba(255,255,255,.08);
    margin-top:16px;
}
.earn-btn{
    width:100%;
    height:46px;
    margin-top:28px;
    border:none;
    border-radius:999px;
    background:#2a9df4;
    color:white;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
}
.earn-btn:hover{
    transform:translateY(-1px);
    box-shadow:
    0 10px 28px rgba(42,157,244,.22);
}
@media(max-width:960px){
    .earning-grid{
        grid-template-columns:1fr;
    }
}
@media(max-width:820px){
    .stats-bar{
        flex-direction:column;
    }
    .wallet-btn,
    .stat-box{
        width:100%;
    }
}
/* =========================================
MOBILE PERFECT UI
========================================= */
@media(max-width:520px){
    .landing-section{
        margin-top:22px;
        padding:0 14px 36px;
    }
    .landing-section.no-pad-b{
        padding-bottom: 0px;
    }
    /* HEADER */
    .landing-header{
        justify-content:center;
        align-items:center;
        gap:12px;
    }
    .landing-icon{
        width:48px;
        height:48px;
        border-radius:14px;
    }
    .landing-icon svg{
        width:22px;
    }
    .landing-title h1{
        font-size:28px;
        line-height:1;
        margin-bottom:6px;
    }
    .landing-title p{
        font-size:13px;
        white-space:nowrap;
    }
    /* =========================================
    STATS BLOCK
    ========================================= */
    .stats-bar{
        margin-top:28px;
        flex-direction:column;
        gap:14px;
        padding:16px;
        border-radius:28px;
        background:
        linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.03));
    }
    .wallet-btn{
        width:100%;
        height:54px;
        font-size:15px;
        font-weight:700;
        order:-1;
    }
    .stat-box{
        width:100%;
        height:auto;
        padding:14px 16px;
        border-radius:18px;
        gap:14px;
        justify-content:flex-start;
    }
    .stat-icon{
        width:42px;
        height:42px;
        flex-shrink:0;
    }
    .stat-content{
        min-width:0;
    }
    .stat-content span{
        font-size:12px;
        margin-bottom:4px;
    }
    .stat-content strong{
        font-size:15px;
        line-height:1.2;
    }
    /* =========================================
    EARNING GRID
    ========================================= */
    .earning-grid{
        margin-top:36px;
        grid-template-columns:1fr;
        gap:18px;
    }
    /* =========================================
    CARD
    ========================================= */
    .earning-card{
        width:100%;
        padding:20px 18px;
        border-radius:24px;
        overflow:hidden;
    }
    .card-top h3{
        font-size:16px;
    }
    .card-top p{
        font-size:13px;
        margin-top:6px;
    }
    /* COIN */
    .coin-circle{
        width:104px;
        height:104px;
        margin:28px auto 34px;
    }
    /* ROWS */
    .earning-row{
        margin-top:14px;
        gap:12px;
    }
    .earning-row span{
        font-size:14px;
    }
    .earning-row strong{
        font-size:14px;
        text-align:right;
    }
    .divider{
        margin-top:16px;
    }
    /* BUTTON */
    .earn-btn{
        height:48px;
        margin-top:24px;
        font-size:14px;
        border-radius:999px;
    }
}
/* =========================================
FAQ SECTION
========================================= */
.faq-section{
    width:100%;
    max-width:980px;
    margin:40px auto;
    padding:0 20px;
    position:relative;
    z-index:5;
}
/* =========================================
HEADER
========================================= */
.faq-header{
    text-align:center;
    margin-bottom:42px;
}
.faq-header h2{
    color:white;
    font-size:44px;
    font-weight:400;
    letter-spacing:-1px;
    margin-bottom:16px;
}
.faq-header p{
    color:rgba(255,255,255,.68);
    font-size:16px;
    font-weight:400;
}
/* =========================================
FAQ BOX
========================================= */
.faq-box{
    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.04);
    border-radius:34px;
    padding:22px 36px;
    backdrop-filter:blur(18px);
}
/* =========================================
FAQ ITEM
========================================= */
.faq-item{
    padding:10px 0;
}
/* =========================================
QUESTION
========================================= */
.faq-question{
    width:100%;
    background:none;
    border:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    cursor:pointer;
    padding:12px 0;
    text-align:left;
}
.faq-question span{
    color:white;
    font-size:18px;
    font-weight:700;
    line-height:1.5;
}
/* =========================================
ICON
========================================= */
.faq-icon{
    width:30px;
    height:30px;
    min-width:30px;
    border-radius:50%;
    background:#2196f3;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:22px;
    font-weight:400;
    transition:.25s ease;
}
.faq-item:not(.active) .faq-icon{
    background:rgba(65,85,120,.35);
}
/* =========================================
ANSWER
========================================= */
.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}
.faq-answer p{
    color:rgba(255,255,255,.72);
    font-size:16px;
    line-height:2;
    padding-right:40px;
    padding-bottom:12px;
}
/* ACTIVE */
.faq-item.active .faq-answer{
    max-height:300px;
}
/* =========================================
MOBILE
========================================= */
@media(max-width:768px){
    .faq-section{
        margin:90px auto;
    }
    .faq-box{
        padding:20px 22px;
        border-radius:26px;
    }
    .faq-header h2{
        font-size:34px;
    }
    .faq-question span{
        font-size:16px;
    }
    .faq-answer p{
        font-size:14px;
        line-height:1.8;
        padding-right:0;
    }
}
@media(max-width:520px){
    .faq-section{
        padding:0 14px;
    }
    .faq-header h2{
        font-size:30px;
    }
    .faq-header p{
        font-size:14px;
    }
    .faq-question{
        align-items:flex-start;
    }
    .faq-icon{
        width:28px;
        height:28px;
        min-width:28px;
        font-size:20px;
    }
    .faq-question span{
        font-size:15px;
    }
}
/* =========================================
FOOTER
========================================= */
.footer{
    width:100%;
    position:relative;
    z-index:5;
    padding:70px 52px 74px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:80px;
}
/* =========================================
LEFT
========================================= */
.footer-brand{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:220px;
}
/* LOGO */
.footer-logo-wrap{
    display:flex;
    align-items:center;
    gap:14px;
}
.footer-logo{
    width:44px;
    height:44px;
    border-radius:10px;
    background:
    linear-gradient(
    180deg,
    rgba(138,69,255,.28),
    rgba(138,69,255,.12));
    border:1px solid rgba(255,255,255,.05);
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(10px);
}
.footer-logo svg{
    width:22px;
    fill:white;
}
.footer-logo-text{
    color:white;
    font-size:18px;
    font-weight:700;
    letter-spacing:4px;
}
.footer-logo-text span{
    font-weight:400;
    opacity:.92;
}
/* COPYRIGHT */
.footer-copy{
    color:rgba(255,255,255,.82);
    font-size:15px;
    font-weight:500;
}
/* =========================================
RIGHT
========================================= */
.footer-links{
    flex:1;
    display:grid;
    grid-template-columns:
    repeat(5,minmax(120px,1fr));
    gap:60px;
}
/* COLUMN */
.footer-column h4{
    color:white;
    font-size:15px;
    font-weight:700;
    margin-bottom:24px;
}
.footer-column a{
    display:block;
    width:fit-content;
    color:rgba(255,255,255,.52);
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    margin-bottom:18px;
    transition:.2s ease;
}
.footer-column a:hover{
    color:white;
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:1200px){
    .footer{
        flex-direction:column;
        gap:50px;
    }
    .footer-brand{
        min-height:auto;
        gap:50px;
    }
    .footer-links{
        width:100%;
        grid-template-columns:
        repeat(3,minmax(140px,1fr));
        gap:40px;
    }
}
@media(max-width:768px){
    .footer{
        padding:60px 24px;
    }
    .footer-links{
        grid-template-columns:
        repeat(2,minmax(140px,1fr));
    }
    .footer-logo-text{
        font-size:16px;
        letter-spacing:3px;
    }
}
@media(max-width:520px){
    .footer{
        padding:50px 18px;
    }
    .footer-links{
        grid-template-columns:1fr;
        gap:34px;
    }
    .footer-column h4{
        margin-bottom:18px;
    }
    .footer-column a{
        margin-bottom:14px;
    }
    .footer-copy{
        font-size:14px;
    }
}
/* =========================================
BORROW BLOCK
========================================= */
.borrow-wrapper{
    width:100%;
    /* max-width:760px; */
    margin:40px auto;
    padding:12px;
    border-radius:28px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    background:
    linear-gradient(
        180deg,
        rgba(17,24,39,.96),
        rgba(10,15,25,.96)
    );
    border:1px solid rgba(255,255,255,.04);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 0 0 1px rgba(255,255,255,.02);
}
/* =========================================
SIDE CARDS
========================================= */
.info-card{
    flex:1;
    height:72px;
    border-radius:20px;
    padding:0 18px;
    display:flex;
    align-items:center;
    gap:14px;
    background:
    linear-gradient(
        180deg,
        rgba(5,10,20,.98),
        rgba(8,12,22,.96)
    );
    border:1px solid rgba(255,255,255,.03);
}
/* =========================================
ICONS
========================================= */
.icon{
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.icon svg{
    width:16px;
    height:16px;
    fill:none;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.icon.green{
    background:
    rgba(16,185,129,.14);
}
.icon.green svg{
    stroke:#22c55e;
}
.icon.red{
    background:
    rgba(239,68,68,.14);
}
.icon.red svg{
    stroke:#ef4444;
}
/* =========================================
TEXT
========================================= */
.info-content{
    display:flex;
    flex-direction:column;
}
.info-content span{
    color:
    rgba(180,210,255,.82);
    font-size:12px;
    font-weight:500;
    margin-bottom:4px;
}
.info-content strong{
    color:white;
    font-size:16px;
    font-weight:500;
    letter-spacing:-0.2px;
}
/* =========================================
CENTER
========================================= */
.borrow-center{
    min-width:170px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
}
.borrow-center .center-value{
    display:flex;
    align-items:center;
    gap:6px;
    color:white;
    font-size:24px;
    font-weight:500;
    letter-spacing:-0.5px;
    float: left;
}
.borrow-center .info-label{
    width:100%;
    color:rgb(136, 136, 136);
    font-size:12px;
    font-weight:500;
    text-align:center;
    margin-top:4px;
}
/* =========================================
INFO DOT
========================================= */
.info-dot{
    width:15px;
    height:15px;
    border-radius:50%;
    background:
    rgba(148,163,184,.28);
    color:white;
    font-size:10px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:.9;
}
/* =========================================
MOBILE PERFECT UI
========================================= */
@media(max-width:768px){
    .borrow-wrapper{
        width:100%;
        margin:26px auto 0;
        padding:22px 18px 18px;
        border-radius:34px;
        flex-direction:column;
        align-items:stretch;
        gap:14px;
        background:
        radial-gradient(
            circle at top left,
            rgba(42,157,244,.12),
            transparent 45%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(168,85,247,.14),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            rgba(17,24,39,.98),
            rgba(10,15,25,.98)
        );
        overflow:hidden;
    }
    /* =========================================
    CENTER TOP VALUE
    ========================================= */
    .borrow-center{
        order:-1;
        width:100%;
        min-width:unset;
        padding:2px 0 10px;
        justify-content:center;
    }
    .center-value{
        font-size:30px;
        font-weight:600;
        letter-spacing:-1px;
        gap:8px;
    }
    .info-dot{
        width:18px;
        height:18px;
        font-size:11px;
        background:
        rgba(148,163,184,.22);
    }
    /* =========================================
    INFO CARDS
    ========================================= */
    .info-card{
        width:100%;
        height:86px;
        border-radius:24px;
        padding:18px 18px;
        gap:16px;
        background:
        linear-gradient(
            180deg,
            rgba(18,24,38,.96),
            rgba(14,18,30,.94)
        );
        border:
        1px solid rgba(255,255,255,.025);
        box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02);
    }
    /* =========================================
    ICONS
    ========================================= */
    .icon{
        width:46px;
        height:46px;
    }
    .icon svg{
        width:18px;
        height:18px;
        stroke-width:2.2;
    }
    .icon.green{
        background:
        rgba(16,185,129,.16);
        box-shadow:
        0 0 20px rgba(16,185,129,.08);
    }
    .icon.red{
        background:
        rgba(239,68,68,.16);
        box-shadow:
        0 0 20px rgba(239,68,68,.08);
    }
    /* =========================================
    TEXT
    ========================================= */
    .info-content span{
        font-size:14px;
        font-weight:500;
        color:
        rgba(180,210,255,.78);
        margin-bottom:6px;
    }
    .info-content strong{
        font-size:18px;
        font-weight:600;
        letter-spacing:-0.3px;
    }
}
/* =========================================
BORROW FORM
========================================= */
.borrow-form-wrap{
    width:100%;
    max-width:430px;
    margin:40px auto;
    padding:22px;
    border-radius:32px;
    background:
    linear-gradient(
        180deg,
        rgba(14,20,32,.98),
        rgba(9,14,24,.98)
    );
    border:
    1px solid rgba(255,255,255,.04);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
    position:relative;
    overflow:hidden;
}
/* =========================================
TOP
========================================= */
.borrow-form-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:0px;
}
.borrow-form-top h2{
    color:white;
    font-size:24px;
    font-weight:700;
    letter-spacing:-0.5px;
}
.refresh-btn{
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:
    rgba(255,255,255,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.refresh-btn svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:
    rgba(255,255,255,.75);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
/* =========================================
FIELD CARD
========================================= */
.borrow-field-card{
    padding:18px;
    border-radius:24px;
    background:
    linear-gradient(
        180deg,
        rgba(16,22,34,.98),
        rgba(11,16,28,.98)
    );
    border:
    1px solid rgba(255,255,255,.03);
    margin-bottom:14px;
}
.small-card{
    padding:16px 18px;
}
/* =========================================
TOP LABEL
========================================= */
.field-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}
.field-top span{
    color:
    rgba(180,210,255,.72);
    font-size:13px;
    font-weight:500;
}
.max-btn{
    border:none;
    background:none;
    color:#2ea8ff;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}
/* =========================================
MAIN FIELD
========================================= */
.field-main{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    gap:16px;
    overflow:hidden;
}
.currency-pill{
    min-width:122px;
    height:44px;
    padding:0 12px;
    border-radius:999px;
    background:
    rgba(255,255,255,.05);
    border:
    1px solid rgba(255,255,255,.05);
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}
.currency-pill strong{
    color:white;
    font-size:16px;
    font-weight:700;
}
.pill-arrow{
    margin-left:auto;
    color:
    rgba(255,255,255,.5);
    font-size:18px;
}
/* =========================================
INPUT
========================================= */
.borrow-input{
    flex:1 1 auto;
    width:100%;
    min-width:0;
    max-width:100%;
    border:none;
    outline:none;
    background:none;
    text-align:right;
    color:white;
    font-size:68px;
    font-weight:600;
    line-height:1;
    letter-spacing:-2px;
    overflow:hidden;
    text-overflow:ellipsis;
}
.borrow-input::placeholder{
    color:white;
}
/* =========================================
BOTTOM
========================================= */
.field-bottom{
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.field-bottom span{
    color:
    rgba(180,210,255,.58);
    font-size:13px;
}
.field-bottom strong{
    color:
    rgba(255,255,255,.7);
    font-size:15px;
}
/* =========================================
ICONS
========================================= */
.currency-icon{
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:15px;
    font-weight:700;
    flex-shrink:0;
}
.currency-icon.usdc{
    background:
    linear-gradient(
        180deg,
        #6ee7d8,
        #0f9b8e
    );
}
.currency-icon.bnb{
    background:
    linear-gradient(
        180deg,
        #ffd54d,
        #dca91c
    );
}
.currency-icon.eth{
    background:
    linear-gradient(
        180deg,
        #8b5cf6,
        #5b21b6
    );
}
.currency-icon.btc{
    background:
    linear-gradient(
        180deg,
        #ffb14d,
        #ea580c
    );
}
.currency-icon.mycoin img{
    width: 30px;
    height: 30px;
    border-radius: 100px;
}
/* =========================================
RATE
========================================= */
.rate-grid{
    display:grid;
    grid-template-columns:
    repeat(3,1fr);
    gap:10px;
}
.rate-btn{
    height:42px;
    border-radius:14px;
    border:
    1px solid rgba(255,255,255,.06);
    background:
    rgba(255,255,255,.03);
    color:white;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
}
.rate-btn.active{
    background:
    linear-gradient(
        180deg,
        #2ea8ff,
        #1f8be2
    );
    border:none;
}
/* =========================================
CURRENCY SELECT
========================================= */
.currency-selector{
    display:grid;
    grid-template-columns:
    repeat(3,1fr);
    gap:12px;
}
.currency-option{
    height:52px;
    border-radius:16px;
    border: 1px solid rgba(255,255,255,.05);
    background: rgba(255,255,255,.03);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:white;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    position: relative;
}
.currency-option:has(input:checked),
.currency-option:hover,
.currency-option.active{
    border: 1px solid #2ea8ff;
    background:rgba(0, 149, 255, 0.12);
}
.currency-option input{
    position: absolute;
    visibility: hidden;
}
/* =========================================
DURATION
========================================= */
.duration-row{
    display:flex;
    gap:10px;
}
.duration-btn{
    flex:1;
    height:42px;
    border:none;
    border-radius:14px;
    background:
    rgba(255,255,255,.04);
    color:white;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}
.duration-btn.active{
    background:
    linear-gradient(
        180deg,
        #2ea8ff,
        #1f8be2
    );
}
/* =========================================
INFO BOX
========================================= */
.borrow-info-box{
    margin-top:18px;
    border-radius:24px;
    overflow:hidden;
    border:
    1px solid rgba(255,255,255,.04);
}
.info-row{
    height:58px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:
    1px solid rgba(255,255,255,.05);
    background:
    rgba(255,255,255,.015);
}
.info-row:last-child{
    border-bottom:none;
}
.info-row span{
    color:
    rgba(180,210,255,.68);
    font-size:14px;
}
.info-row strong{
    color:white;
    font-size:15px;
    font-weight:700;
}
/* =========================================
BUTTON
========================================= */
.borrow-submit-btn{
    width:100%;
    height:52px;
    margin-top:22px;
    border:none;
    border-radius:999px;
    background:
    linear-gradient(
        180deg,
        #2ea8ff,
        #1f8be2
    );
    color:white;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
}
.borrow-submit-btn:hover{
    transform:translateY(-1px);
    box-shadow:
    0 10px 30px rgba(46,168,255,.22);
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:520px){
    .borrow-form-wrap{
        padding:18px;
        border-radius:28px;
    }
    .borrow-input{
        font-size:42px;
    }
    .currency-selector{
        grid-template-columns:1fr;
    }
    .duration-row{
        flex-direction:column;
    }
}
/* =========================================
LANDSCAPE LAYOUT
========================================= */
.borrow-form-wrap{
    max-width: 920px;
    padding: 24px;
}
/* =========================================
GRID
========================================= */
.borrow-layout{
    display:grid;
    grid-template-columns:
    minmax(0,1.2fr)
    minmax(340px,.8fr);
    gap:22px;
    align-items:start;
}
/* =========================================
LEFT / RIGHT
========================================= */
.borrow-left,
.borrow-right{
    display:flex;
    flex-direction:column;
}
/* =========================================
RIGHT SIDE SPACING
========================================= */
.borrow-right{
    gap:14px;
}
/* =========================================
AMOUNT CARD
========================================= */
.amount-card{
    min-height:220px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
/* =========================================
BIG INPUT
========================================= */
.borrow-input{
    font-size:68px;
    line-height:1;
}
/* =========================================
INFO BOX
========================================= */
.borrow-info-box{
    margin-top:0;
}
/* =========================================
BUTTON
========================================= */
.borrow-submit-btn{
    margin-top:0;
}
/* =========================================
CARD HEIGHT BALANCE
========================================= */
.small-card{
    flex-shrink:0;
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:920px){
    .borrow-layout{
        grid-template-columns:1fr;
    }
    .borrow-input{
        font-size:54px;
    }
}
/* =========================================
MOBILE PERFECT FIX
========================================= */
@media(max-width:520px){
    /* MAIN WRAPPER */
    .borrow-form-wrap{
        width:100%;
        max-width:92%;
        padding:16px;
        border-radius:26px;
        overflow:hidden;
    }
    /* GRID */
    .borrow-layout{
        width:100%;
        grid-template-columns:1fr;
        gap:14px;
    }
    /* CARDS */
    .borrow-field-card,
    .borrow-info-box{
        width:100%;
        min-width:0;
    }
    /* MAIN FIELD */
    .field-main{
        width:100%;
        min-width:0;
        align-items:flex-start;
        gap:12px;
    }
    /* INPUT */
    .borrow-input{
        width:100%;
        min-width:0;
        font-size:44px;
        line-height:1;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    /* PILL */
    .currency-pill{
        min-width:110px;
        max-width:110px;
        flex-shrink:0;
    }
    .currency-pill strong{
        font-size:14px;
    }
    /* BOTTOM */
    .field-bottom{
        width:100%;
        min-width:0;
        gap:10px;
    }
    .field-bottom span,
    .field-bottom strong{
        font-size:12px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    /* CURRENCY GRID */
    .currency-selector{
        grid-template-columns:1fr;
        gap:10px;
    }
    .currency-option{
        width:100%;
        min-width:0;
    }
    /* DURATION */
    .duration-row{
        flex-direction:column;
        width:100%;
    }
    .duration-btn{
        width:100%;
    }
    /* RATE */
    .rate-grid{
        grid-template-columns:
        repeat(3,minmax(0,1fr));
    }
    .rate-btn{
        min-width:0;
        font-size:13px;
    }
    /* INFO ROW */
    .info-row{
        padding:0 14px;
        gap:10px;
    }
    .info-row span,
    .info-row strong{
        font-size:13px;
    }
}
/* =========================================
BORROW PANEL
========================================= */
.borrow-panel{
    width:100%;
    max-width:920px;
    margin:0px auto 20px;
    padding:18px;
    border-radius:28px;
    background:
    linear-gradient(
        180deg,
        rgba(17,24,39,.98),
        rgba(10,15,25,.98)
    );
    border: 1px solid rgba(255,255,255,.04);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    position:relative;
    overflow:hidden;
}
/* =========================================
TOP GRID
========================================= */
.borrow-top-grid{
    display:grid;
    grid-template-columns:
    repeat(4,1fr);
    gap:16px;
}
.borrow-stat{
    height:68px;
    border-radius:20px;
    padding:0 16px;
    display:flex;
    align-items:center;
    gap:14px;
    background:
    linear-gradient(
        180deg,
        rgba(10,15,25,.98),
        rgba(14,18,28,.96)
    );
}
.stat-icon{
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:700;
    flex-shrink:0;
}
.stat-icon.green{
    color:#22c55e;
    background:rgba(34,197,94,.16);
}
.stat-icon.purple{
    color:#d946ef;
    background:rgba(217,70,239,.16);
}
.stat-icon.red{
    color:#ef4444;
    background:rgba(239,68,68,.16);
}
.stat-icon.orange{
    color:#fb923c;
    background:rgba(251,146,60,.16);
}
.stat-data span{
    display:block;
    color:
    rgba(180,210,255,.72);
    font-size:12px;
    margin-bottom:5px;
}
.stat-data strong{
    color:white;
    font-size:15px;
    font-weight:700;
}
/* =========================================
HEALTH ROW
========================================= */
.health-row{
    margin-top:22px;
    display:flex;
    align-items:center;
    gap:18px;
}
.health-label{
    color:
    rgba(180,210,255,.75);
    font-size:15px;
    white-space:nowrap;
}
.health-label strong{
    color:white;
    margin-left:4px;
}
.health-bar{
    flex:1;
    height:10px;
    border-radius:999px;
    background:
    rgba(255,255,255,.12);
    overflow:hidden;
}
.health-progress{
    width:0%;
    height:100%;
    border-radius:999px;
    background:#2a9df4;
}
.health-btn{
    height:30px;
    padding:0 18px;
    border:none;
    border-radius:999px;
    background:
    rgba(42,157,244,.14);
    color:white;
    font-size:13px;
    font-weight:600;
}
/* =========================================
TOKEN GRID
========================================= */
.token-grid{
    margin-top:28px;
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:26px;
}
.token-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:26px;
}
.token-header strong{
    color:white;
    font-size:16px;
}
.token-mini-stats{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
}
.token-mini-stats span{
    color:
    rgba(180,210,255,.65);
}
.token-mini-stats b{
    color:white;
    font-weight:700;
}
.token-main{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.token-left{
    display:flex;
    align-items:center;
    gap:14px;
}
/* =========================================
TOKEN ICONS
========================================= */
.token-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:700;
    color:white;
    flex-shrink:0;
}
.token-icon.bnb{
    background:
    linear-gradient(
        180deg,
        #f5c542,
        #dca91c
    );
}
.token-icon.usdc{
    background:
    linear-gradient(
        180deg,
        #60a5fa,
        #2563eb
    );
}
/* =========================================
TOKEN INFO
========================================= */
.token-title{
    display:flex;
    align-items:center;
    gap:6px;
    color:white;
    font-size:18px;
    font-weight:700;
    margin-bottom:5px;
}
.token-info span{
    color:
    rgba(180,210,255,.68);
    font-size:14px;
}
.mini-dot{
    width:16px;
    height:16px;
    border-radius:50%;
    background:
    rgba(255,255,255,.14);
    color:white;
    font-size:10px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* =========================================
RIGHT APR
========================================= */
.token-right{
    text-align:right;
    font-size:16px;
    font-weight:700;
}
.green-text{
    color:#22c55e;
}
.orange-text{
    color:#fb923c;
}
.token-right small{
    display:block;
    margin-top:6px;
    font-size:13px;
    font-weight:500;
    color:
    rgba(180,210,255,.68);
}
/* =========================================
BUTTONS
========================================= */
.token-actions{
    margin-top:28px;
    display:flex;
    gap:12px;
}
.action-btn{
    flex:1;
    height:48px;
    border-radius:999px;
    border:
    1px solid #0ea5ff;
    background:
    transparent;
    color:white;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
}
.action-btn.active{
    background:
    linear-gradient(
        180deg,
        #2ea8ff,
        #1f8be2
    );
    border:none;
    padding: 15px 0;
}
.action-btn:hover{
    transform:translateY(-1px);
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:900px){
    .borrow-top-grid{
        grid-template-columns:
        repeat(2,1fr);
    }
    .token-grid{
        grid-template-columns:1fr;
    }
}
@media(max-width:600px){
    .borrow-panel{
        padding:16px;
        border-radius:30px;
        max-width: 92%;
        margin-top: 0px;
        margin-bottom: 30px;
    }
    .borrow-top-grid{
        grid-template-columns:1fr;
    }
    .health-row{
        flex-direction:column;
        align-items:flex-start;
    }
    .health-bar{
        width:100%;
    }
    .health-btn{
        width:100%;
        height:42px;
    }
    .token-main{
        gap:18px;
    }
    .token-actions{
        flex-direction:column;
    }
    .action-btn{
        width:100%;
    }
}
/* =========================================
SWAP WRAP
========================================= */
.swap-wrap{
    width:100%;
    max-width:430px;
    margin: 0 auto 0;
}
/* =========================================
TOP
========================================= */
.swap-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.swap-top h2{
    color:white;
    font-size:24px;
    font-weight:700;
}
.refresh-btn{
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.refresh-btn svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:
    rgba(255,255,255,.65);
    stroke-width:2;
}
/* =========================================
TOKEN CARD
========================================= */
.swap-card{
    position:relative;
    padding:16px;
    margin-bottom: 4px;
    border-radius:24px;
    background:
    linear-gradient(
        180deg,
        rgba(17,24,39,.98),
        rgba(11,16,28,.98)
    );
    border:
    1px solid rgba(255,255,255,.03);
    overflow:hidden;
}
.swap-card + .swap-card{
    margin-top:4px;
}
.swap-label{
    color:
    rgba(180,210,255,.68);
    font-size:13px;
    margin-bottom:12px;
}
.swap-main{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}
.swap-main .swap-currency-btn{
    height:44px;
    padding:0 12px;
    border:none;
    border-radius:999px;
    background:
    rgba(255,255,255,.04);
    border:
    1px solid rgba(255,255,255,.05);
    display:flex;
    align-items:center;
    gap:10px;
    color:white;
    cursor:pointer;
}
.swap-main .currency-icon{
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:14px;
    font-weight:700;
}
.swap-main .bnb{
    background:
    linear-gradient(
        180deg,
        #ffd54d,
        #dca91c
    );
}
.swap-main .usdt{
    background:
    linear-gradient(
        180deg,
        #6ee7d8,
        #0f9b8e
    );
}
.swap-main .swap-currency-btn strong{
    font-size:15px;
    font-weight:700;
}
.swap-main .currency-arrow{
    width:18px;
    height:18px;
    border-radius:50%;
    background:
    rgba(255,255,255,.06);
    display:flex;
    align-items:center;
    justify-content:center;
    color:
    rgba(255,255,255,.55);
    font-size:14px;
}
.swap-input-wrap{
    flex:1;
    min-width:0;
    text-align:right;
}
.swap-input{
    width:100%;
    border:none;
    outline:none;
    background:none;
    color:white;
    text-align:right;
    font-size:2em;
    font-weight:400;
}
.swap-input::placeholder{
    color:white;
}
.swap-usd{
    color:
    rgba(255,255,255,.48);
    font-size:14px;
    font-weight:600;
}
.swap-balance{
    margin-top:14px;
    color:
    rgba(180,210,255,.58);
    font-size:13px;
}
.max-btn{
    position:absolute;
    top:18px;
    right:18px;
    border:none;
    background:none;
    color:#2ea8ff;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}
/* =========================================
SWITCH BUTTON
========================================= */
.switch-wrap{
    position:relative;
    height:0;
    z-index:5;
}
.switch-btn{
    position:absolute;
    left:50%;
    top:-18px;
    transform:
    translateX(-50%);
    width:40px;
    height:40px;
    border-radius:50%;
    border:
    4px solid #020817;
    background:
    linear-gradient(
        180deg,
        rgba(28,36,52,.98),
        rgba(15,20,32,.98)
    );
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s ease;
}
.switch-btn:hover{
    transform:
    translateX(-50%)
    rotate(180deg);
}
.switch-btn svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:white;
    stroke-width:2.2;
}
/* =========================================
INFO BOX
========================================= */
.swap-info{
    margin-top:14px;
    border-radius:24px;
    overflow:hidden;
    border:
    1px solid rgba(255,255,255,.05);
    background:
    rgba(5,10,20,.55);
}
.rate-row{
    padding:16px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:white;
    font-size:16px;
    font-weight:700;
    border-bottom:
    1px solid rgba(255,255,255,.06);
}
.info-row{
    height:60px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:
    1px solid rgba(255,255,255,.06);
}
.info-row:last-child{
    border-bottom:none;
}
.info-left{
    display:flex;
    align-items:center;
    gap:10px;
    color:
    rgba(180,210,255,.74);
    font-size:14px;
}
.info-right{
    display:flex;
    align-items:center;
    gap:10px;
}
.select-btn{
    height:34px;
    padding:0 14px;
    border-radius:999px;
    border:
    1px solid rgba(255,255,255,.06);
    background:
    rgba(255,255,255,.03);
    color:white;
    font-size:13px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}
.info-dot{
    width:18px;
    height:18px;
    border-radius:50%;
    background:
    rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:11px;
    font-weight:700;
}
.price-impact{
    color:white;
    font-size:14px;
    font-weight:700;
}
/* =========================================
BUTTON
========================================= */
.swap-btn{
    width:100%;
    height:54px;
    margin-top:16px;
    border:none;
    border-radius:999px;
    background:
    linear-gradient(
        180deg,
        #2ea8ff,
        #1f8be2
    );
    color:white;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
}
.swap-btn:hover{
    transform:translateY(-1px);
    box-shadow:
    0 10px 30px rgba(46,168,255,.24);
}
/* =========================================
ERROR
========================================= */
.error-box{
    margin-top:14px;
    height:42px;
    padding:0 16px;
    border-radius:18px;
    background:
    rgba(255,77,77,.12);
    display:flex;
    align-items:center;
    gap:10px;
    color:#ff6666;
    font-size:14px;
    font-weight:500;
}
.error-icon{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#ff6666;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:11px;
    font-weight:700;
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:520px){
    .swap-wrap{
        width:100%;
        max-width:92%;
        margin: 0 auto 0;
    }
    .swap-input{
        font-size:1.8em;
    }
}
/* =========================================
DASHBOARD
========================================= */
.stats-dashboard{
    width:100%;
    max-width:1120px;
    margin:40px auto;
    display:grid;
    grid-template-columns:
    2fr .9fr 1fr;
    gap:22px;
}
/* =========================================
BASE CARD
========================================= */
.stats-dashboard .stats-card{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    background:
    linear-gradient(
        180deg,
        rgba(16,20,30,.98),
        rgba(9,12,20,.98)
    );
    border:
    1px solid rgba(255,255,255,.05);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
    transition:.3s ease;
}
.stats-dashboard .stats-card:hover{
    transform:
    translateY(-2px);
}
/* =========================================
PREMIUM GLASS GLOW
========================================= */
.stats-dashboard .stats-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.045),
        rgba(255,255,255,.02)
    );
    border:
    1px solid rgba(255,255,255,.06);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(255,255,255,.02),
    0 20px 60px rgba(0,0,0,.28);
}
/* =========================================
TOP GLOW
========================================= */
.stats-dashboard .stats-card::before{
    content:"";
    position:absolute;
    top:-140px;
    left:-120px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(46,168,255,.12),
        transparent 72%
    );
    filter:blur(18px);
    opacity:.7;
    pointer-events:none;
    z-index:0;
    animation:
    floatGlow 6s ease-in-out infinite;
}
/* =========================================
BOTTOM GLOW
========================================= */
.stats-dashboard .stats-card::after{
    content:"";
    position:absolute;
    right:-120px;
    bottom:-140px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(139,92,246,.12),
        transparent 72%
    );
    filter:blur(18px);
    opacity:.65;
    pointer-events:none;
    z-index:0;
    animation:
    floatGlow2 7s ease-in-out infinite;
}
/* =========================================
PREMIUM SHINE
========================================= */
.stats-dashboard .stats-card .glass-shine{
    position:absolute;
    top:-180%;
    left:-60%;
    width:45%;
    height:320%;
    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.10),
        rgba(255,255,255,.02),
        transparent
    );
    transform:
    rotate(24deg);
    pointer-events:none;
    z-index:1;
    animation:
    glassShine 3.2s ease-in-out infinite;
}
/* =========================================
KEEP CONTENT ABOVE
========================================= */
.stats-dashboard .stats-card > *{
    position:relative;
    z-index:2;
}
/* =========================================
ANIMATIONS
========================================= */
@keyframes glassShine{
    0%{
        transform:
        translateX(-220%)
        rotate(24deg);
    }
    45%{
        transform:
        translateX(260%)
        rotate(24deg);
    }
    100%{
        transform:
        translateX(260%)
        rotate(24deg);
    }
}
@keyframes floatGlow{
    0%,100%{
        transform:
        translate(0,0)
        scale(1);
    }
    50%{
        transform:
        translate(12px,-10px)
        scale(1.08);
    }
}
@keyframes floatGlow2{
    0%,100%{
        transform:
        translate(0,0)
        scale(1);
    }
    50%{
        transform:
        translate(-10px,12px)
        scale(1.06);
    }
}
/* =========================================
HERO
========================================= */
.stats-dashboard .hero-card{
    min-height:430px;
    padding:28px;
    grid-column:1;
}
.stats-dashboard .hero-bg{
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at 20% 80%, #00d2ff 0%, transparent 35%),
    radial-gradient(circle at 60% 20%, #ffcc70 0%, transparent 40%),
    radial-gradient(circle at 90% 30%, #6a00ff 0%, transparent 45%),
    linear-gradient(135deg, #001c48, #2d0055);
    opacity:.95;
}
.stats-dashboard .hero-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}
.stats-dashboard .hero-label{
    color:#d9ff81;
    font-size:22px;
    font-weight:700;
}
.stats-dashboard .hero-card h1{
    color:white;
    font-size:4.5em;
    font-weight:800;
    line-height:.9;
    letter-spacing:-5px;
    margin:8px 0 22px;
}
.stats-dashboard .hero-note{
    max-width:520px;
    padding:18px 20px;
    border-radius:22px;
    background:
    rgba(255,255,255,.14);
    backdrop-filter:blur(16px);
    color:white;
    font-size:16px;
    font-weight:600;
    line-height:1.6;
}
/* =========================================
METRIC
========================================= */
.stats-dashboard .metric-card{
    min-height:430px;
    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.stats-dashboard .metric-block span{
    display:block;
    color:
    rgba(255,255,255,.45);
    font-size:14px;
    font-weight:700;
    margin-bottom:14px;
}
.stats-dashboard .metric-block h2{
    color:#cc2cff;
    font-size: 3em;
    font-weight:800;
    letter-spacing:-3px;
    margin-top: 0;
}
.stats-dashboard .metric-block h3{
    color:white;
    font-size: 3em;
    font-weight:800;
    letter-spacing:-3px;
    margin-top: 0;
}
.stats-dashboard .growth-pill{
    width:fit-content;
    margin-top:14px;
    padding:8px 14px;
    border-radius:999px;
    background:
    rgba(180,255,100,.08);
    color:#bfff69;
    font-size:13px;
    font-weight:700;
}
/* =========================================
PERSONA
========================================= */
.stats-dashboard .persona-card{
    min-height:430px;
    background:#f4f4f4;
    padding:28px;
}
.stats-dashboard .persona-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.stats-dashboard .persona-pill{
    height:36px;
    padding:0 18px;
    border-radius:999px;
    background:black;
    display:flex;
    align-items:center;
    color:white;
    font-size:14px;
    font-weight:700;
}
.stats-dashboard .dots-btn{
    border:none;
    background:none;
    font-size:22px;
    cursor:pointer;
}
.stats-dashboard .persona-icon{
    width:118px;
    height:118px;
    margin:28px auto 20px;
    border-radius:50%;
    background:black;
    display:flex;
    align-items:center;
    justify-content:center;
}
.stats-dashboard .persona-icon svg{
    width:52px;
    height:52px;
    fill:none;
    stroke:white;
    stroke-width:1.8;
}
.stats-dashboard .persona-mini{
    display:block;
    text-align:center;
    color:#8b8b8b;
    font-size:15px;
    margin-bottom:10px;
}
.stats-dashboard .persona-card h2{
    text-align:center;
    color:black;
    font-size:32px;
    font-weight:800;
    line-height:1.35;
}
.stats-dashboard .persona-divider{
    width:100%;
    height:1px;
    background:#d6d6d6;
    margin:24px 0;
}
.stats-dashboard .persona-card p{
    color:black;
    font-size:15px;
    line-height:1.8;
}
/* =========================================
STACK
========================================= */
.stats-dashboard .stack-card{
    padding:28px;
    min-height:340px;
}
.stats-dashboard .stack-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:30px;
}
.stats-dashboard .stack-top h3{
    color:white;
    font-size:22px;
    font-weight:700;
}
.stats-dashboard .stack-top span{
    color:
    rgba(255,255,255,.6);
    font-size:14px;
}
.stats-dashboard .stack-item{
    margin-bottom:26px;
}
.stats-dashboard .stack-label{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
}
.stats-dashboard .stack-icon{
    width:36px;
    height:36px;
    border-radius:50%;
    flex-shrink:0;
}
.stats-dashboard .react{
    background:#61dafb;
}
.stats-dashboard .tailwind{
    background:#00c4ff;
}
.stats-dashboard .ts{
    background:#173b75;
    color:#3b82f6;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
}
.stats-dashboard .stack-label strong{
    color:white;
    font-size:16px;
    font-weight: 400;
}
.stats-dashboard .stack-label span{
    margin-left:auto;
    color:white;
    font-size:14px;
    font-weight:400;
}
.stats-dashboard .stack-bar{
    width:100%;
    height:7px;
    border-radius:999px;
    background:
    rgba(255,255,255,.08);
    overflow:hidden;
}
.stats-dashboard .stack-progress{
    height:100%;
    border-radius:999px;
}
.stats-dashboard .react-progress{
    width:68%;
    background:#61dafb;
}
.stats-dashboard .tailwind-progress{
    width:82%;
    background:#00c4ff;
}
.stats-dashboard .ts-progress{
    width:54%;
    background:#4c9aff;
}
/* =========================================
CATEGORY
========================================= */
.stats-dashboard .category-card{
    min-height:570px;
    padding:28px;
    background:
    linear-gradient(180deg, #ff9b2f, #ffb93d);
}
.stats-dashboard .category-label{
    color:black;
    font-size:14px;
    font-weight:700;
}
.stats-dashboard .category-card h2{
    color:black;
    font-size:1.8em;
    font-weight:800;
    line-height:1.05;
    margin-top:14px;
}
.stats-dashboard .palette-wrap{
    position:absolute;
    left:28px;
    bottom:28px;
}
.stats-dashboard .palette-wrap span{
    display: block;
    color: black;
    font-size: 15px;
    margin-bottom: 16px;
    font-weight: 600;
}
.stats-dashboard .palette-row{
    display:flex;
    gap:8px;
}
.stats-dashboard .palette{
    width:46px;
    height:46px;
    border-radius:50%;
    border:
    1px solid rgba(0,0,0,.12);
}
.stats-dashboard .palette.black{
    background:black;
}
.stats-dashboard .palette.purple{
    background:#7a2ad8;
}
.stats-dashboard .palette.green{
    background:#c4ea72;
}
/* =========================================
PRODUCTIVITY
========================================= */
.stats-dashboard .productivity-card{
    min-height:340px;
    padding:28px;
}
.stats-dashboard .productivity-label{
    color:
    rgba(255,255,255,.45);
    font-size:14px;
    font-weight:700;
}
.stats-dashboard .productivity-card h2{
    color:white;
    font-size:28px;
    font-weight:800;
    margin:10px 0;
}
.stats-dashboard .productivity-card p{
    color:
    rgba(180,210,255,.7);
    font-size:15px;
    margin-bottom:28px;
}
.stats-dashboard .heatmap{
    display:grid;
    grid-template-columns:
    repeat(7,1fr);
    gap:8px;
}
.stats-dashboard .heat{
    aspect-ratio:1/1;
    border-radius:5px;
    background:
    rgba(255,255,255,.08);
}
.stats-dashboard .heat.low{
    background:#232323;
}
.stats-dashboard .heat.med{
    background:#57208f;
}
.stats-dashboard .heat.high{
    background:#8e2cff;
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:1100px){
    .stats-dashboard{
        grid-template-columns:1fr 1fr;
    }
    .stats-dashboard .hero-card{
        grid-column:auto;
    }
}
@media(max-width:768px){
.stats-dashboard{
    grid-template-columns:1fr;
    max-width: 92%;
}
.stats-dashboard .hero-card h1{
    font-size:3em;
}
.stats-dashboard .category-card h2{
    font-size:44px;
}
.stats-dashboard .metric-block h2,
.stats-dashboard .metric-block h3{
    margin: 0;
}
}
/* =========================================
MARKET STATS
REUSABLE COMPONENT
========================================= */
.market-stats{
    width:100%;
    max-width:980px;
    margin:40px auto;
    padding:28px 34px 34px;
    border-radius:30px;
    position:relative;
    overflow:hidden;
    /* GLASS BACKGROUND */
    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.06) 0%,
        rgba(255,255,255,.03) 35%,
        rgba(255,255,255,.02) 100%
    );
    /* GLASS BLUR */
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    /* BORDER */
    border:
    1px solid rgba(255,255,255,.08);
    /* DEPTH */
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.02),
    0 20px 50px rgba(0,0,0,.22);
}
/* OPTIONAL PREMIUM GLOW */
.market-stats::before{
    content:"";
    position:absolute;
    top:-120px;
    left:-120px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(46,168,255,.12),
        transparent 72%
    );
    pointer-events:none;
}
.market-stats::after{
    content:"";
    position:absolute;
    bottom:-140px;
    right:-100px;
    width:240px;
    height:240px;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(139,92,246,.10),
        transparent 72%
    );
    pointer-events:none;
}
/* =========================================
TOP
========================================= */
.market-stats .market-top{
    width:100%;
    text-align:center;
}
/* LABEL */
.market-stats .market-label{
    display:block;
    color:
    rgba(180,210,255,.74);
    font-size:18px;
    font-weight:500;
    margin-bottom:12px;
    letter-spacing:-0.2px;
}
/* VALUE */
.market-stats .market-value{
    color: white;
    font-size: 2.5em;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -2.5px;
    margin-top: 0;
}
/* =========================================
BOTTOM
========================================= */
.market-stats .market-bottom{
    margin-top:42px;
    width:100%;
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:20px;
}
/* =========================================
ITEM
========================================= */
.market-stats .market-item{
    text-align:center;
}
/* SMALL LABEL */
.market-stats .market-item span{
    display:block;
    color:
    rgba(180,210,255,.72);
    font-size:15px;
    font-weight:500;
    margin-bottom:12px;
}
/* VALUE */
.market-stats .market-item strong{
    color:white;
    font-size:26px;
    font-weight:600;
    letter-spacing:-0.8px;
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:768px){
    .market-stats{
        padding:24px 18px 28px;
        border-radius:26px;
    }
    .market-stats .market-label{
        font-size:15px;
    }
    .market-stats .market-value{
        font-size:48px;
        letter-spacing:-1.8px;
    }
    .market-stats .market-bottom{
        margin-top:34px;
        gap:14px;
    }
    .market-stats .market-item span{
        font-size:13px;
    }
    .market-stats .market-item strong{
        font-size:22px;
    }
}
@media(max-width:520px){
    .market-stats{
        max-width: 92%;
    }
    .market-stats .market-bottom{
        grid-template-columns:1fr;
        gap:26px;
    }
    .market-stats .market-value{
        font-size:40px;
    }
}
/* =========================================
LP GRID
========================================= */
.lp-grid{
    width:100%;
    max-width:980px;
    margin:40px auto;
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:18px;
}
/* =========================================
CARD
========================================= */
.lp-grid .lp-card{
    position:relative;
    overflow:hidden;
    padding:22px 24px 24px;
    border-radius:24px;
    background:
    linear-gradient(
        90deg,
        rgba(20,25,38,.96) 0%,
        rgba(16,20,30,.98) 50%,
        rgba(22,28,40,.96) 100%
    );
    border:
    1px solid rgba(255,255,255,.04);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
    transition:.25s ease;
}
.lp-grid .lp-card:hover{
    transform:
    translateY(-2px);
}
/* =========================================
TOP
========================================= */
.lp-grid .lp-top{
    display:flex;
    align-items:flex-start;
    position:relative;
}
/* =========================================
TOKEN WRAP
========================================= */
.lp-grid .lp-token-wrap{
    display:flex;
    align-items:flex-start;
    gap:14px;
    flex:1;
}
/* =========================================
ICON
========================================= */
.lp-grid .lp-token-icon{
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    position:relative;
}
.lp-grid .lp-token-icon.eth{
    background:
    linear-gradient(
        180deg,
        #ffd95c,
        #eab308
    );
}
.lp-grid .lp-token-icon.bnb{
    background:
    linear-gradient(
        180deg,
        #ffd95c,
        #eab308
    );
}
.lp-grid .lp-token-icon img{
    width:24px;
    height:24px;
    object-fit:contain;
}
/* =========================================
INFO
========================================= */
.lp-grid .lp-token-info{
    min-width:0;
}
.lp-grid .lp-token-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
}
.lp-grid .lp-token-title h3{
    color:white;
    font-size:18px;
    font-weight:700;
    letter-spacing:-0.3px;
    margin-top: 0px;
    margin-bottom: 0px;
}
.lp-grid .lp-token-info span{
    color:
    rgba(180,210,255,.72);
    font-size:15px;
}
/* =========================================
COPY BTN
========================================= */
.lp-grid .lp-copy{
    width:28px;
    height:28px;
    border-radius:999px;
    border:
    1px solid rgba(255,255,255,.08);
    background:
    rgba(255,255,255,.02);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.lp-grid .lp-copy svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:
    rgba(255,255,255,.55);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
/* =========================================
TVL
========================================= */
.lp-grid .lp-tvl{
    text-align:right;
    margin-right:56px;
}
.lp-grid .lp-tvl strong{
    display:block;
    color:white;
    font-size:1.5em;
    font-weight:400;
    letter-spacing:-1px;
    margin-bottom: 0px;
}
.lp-grid .lp-tvl span{
    color:
    rgba(180,210,255,.72);
    font-size:14px;
}
/* =========================================
MENU
========================================= */
.lp-grid .lp-menu-btn{
    position:absolute;
    right:0;
    top:0;
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:
    rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.lp-grid .lp-menu-btn svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:white;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
/* =========================================
STATS
========================================= */
.lp-grid .lp-stats{
    margin-top:34px;
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:18px;
}
.lp-grid .lp-stat span{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:10px;
}
.lp-grid .blue-dot{
    color:#3ba8ff;
}
.lp-grid .purple-dot{
    color:#b125ff;
}
.lp-grid .lp-stat strong{
    display:block;
    color:white;
    font-size:20px;
    font-weight:400;
    margin-bottom:8px;
}
.lp-grid .lp-stat small{
    color:
    rgba(180,210,255,.72);
    font-size:14px;
}
/* =========================================
APR
========================================= */
.lp-grid .lp-apr-grid{
    margin-top:34px;
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:18px;
}
.lp-grid .lp-apr-item span{
    display:block;
    color:
    rgba(180,210,255,.72);
    font-size:14px;
    margin-bottom:10px;
}
.lp-grid .lp-apr-item strong{
    color:white;
    font-size:16px;
    font-weight:700;
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:900px){
    .lp-grid{
        grid-template-columns:1fr;
    }
}
@media(max-width:520px){
    .lp-grid .lp-card{
        padding:18px;
    }
    .lp-grid .lp-top{
        flex-direction:column;
        gap:18px;
    }
    .lp-grid .lp-tvl{
        margin-right:0;
        text-align:left;
    }
    .lp-grid .lp-menu-btn{
        top:2px;
        right:2px;
    }
    .lp-grid .lp-stats,
    .lp-grid .lp-apr-grid{
        grid-template-columns:1fr;
    }
}
.loader {
  --color-one: #ffbf48;
  --color-two: #be4a1d;
  --color-three: #ffbf4780;
  --color-four: #bf4a1d80;
  --color-five: #ffbf4740;
  --time-animation: 2s;
  --size: 1; /* You can change the size */
  position: relative;
  border-radius: 50%;
  transform: scale(var(--size));
  box-shadow:
    0 0 25px 0 var(--color-three),
    0 20px 50px 0 var(--color-four);
  animation: colorize calc(var(--time-animation) * 3) ease-in-out infinite;
}
.loader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border-top: solid 1px var(--color-one);
  border-bottom: solid 1px var(--color-two);
  background: linear-gradient(180deg, var(--color-five), var(--color-four));
  box-shadow:
    inset 0 10px 10px 0 var(--color-three),
    inset 0 -10px 10px 0 var(--color-four);
}
.loader .box {
  width: 100px;
  height: 100px;
  background: linear-gradient(
    180deg,
    var(--color-one) 30%,
    var(--color-two) 70%
  );
  mask: url(#clipping);
  -webkit-mask: url(#clipping);
}
.loader svg {
  position: absolute;
}
.loader svg #clipping {
  filter: contrast(15);
  animation: roundness calc(var(--time-animation) / 2) linear infinite;
}
.loader svg #clipping polygon {
  filter: blur(7px);
}
.loader svg #clipping polygon:nth-child(1) {
  transform-origin: 75% 25%;
  transform: rotate(90deg);
}
.loader svg #clipping polygon:nth-child(2) {
  transform-origin: 50% 50%;
  animation: rotation var(--time-animation) linear infinite reverse;
}
.loader svg #clipping polygon:nth-child(3) {
  transform-origin: 50% 60%;
  animation: rotation var(--time-animation) linear infinite;
  animation-delay: calc(var(--time-animation) / -3);
}
.loader svg #clipping polygon:nth-child(4) {
  transform-origin: 40% 40%;
  animation: rotation var(--time-animation) linear infinite reverse;
}
.loader svg #clipping polygon:nth-child(5) {
  transform-origin: 40% 40%;
  animation: rotation var(--time-animation) linear infinite reverse;
  animation-delay: calc(var(--time-animation) / -2);
}
.loader svg #clipping polygon:nth-child(6) {
  transform-origin: 60% 40%;
  animation: rotation var(--time-animation) linear infinite;
}
.loader svg #clipping polygon:nth-child(7) {
  transform-origin: 60% 40%;
  animation: rotation var(--time-animation) linear infinite;
  animation-delay: calc(var(--time-animation) / -1.5);
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes roundness {
  0% {
    filter: contrast(15);
  }
  20% {
    filter: contrast(3);
  }
  40% {
    filter: contrast(3);
  }
  60% {
    filter: contrast(15);
  }
  100% {
    filter: contrast(15);
  }
}
@keyframes colorize {
  0% {
    filter: hue-rotate(0deg);
  }
  20% {
    filter: hue-rotate(-30deg);
  }
  40% {
    filter: hue-rotate(-60deg);
  }
  60% {
    filter: hue-rotate(-90deg);
  }
  80% {
    filter: hue-rotate(-45deg);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}
.wbscreen{
    width:100%;
    height:100%;
    position:fixed;
    inset:0;
    z-index:99999;
    background:
    linear-gradient(135deg, rgba(8,12,20,.72), rgba(4,8,16,.82));
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    transition:.3s ease;
    display: none;
}
.wbscreen::before{
    content:"";
    position:absolute;
    top:-20%;
    left:-10%;
    width:420px;
    height:420px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(46,168,255,.10), transparent 72%);
    pointer-events:none;
    filter:blur(20px);
}
.wbscreen::after{
    content:"";
    position:absolute;
    right:-10%;
    bottom:-20%;
    width:420px;
    height:420px;
    border-radius:50%;
    background: radial-gradient( circle, rgba(139,92,246,.10), transparent 72%);
    pointer-events:none;
    filter:blur(20px);
}
.wbscreen .wbloader{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-around; }
/* =========================================
LOADING TEXT BLOCK
========================================= */
.wbloadtxt{
    position:fixed;
    left:50%;
    bottom:26px;
    transform: translateX(-50%);
    z-index:999999;
    width:auto;
    max-width:300px;
    min-height:48px;
    padding:14px 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
    font-size:14px;
    font-weight:600;
    line-height:1.5;
    letter-spacing:-0.2px;
    white-space:normal;
    word-break:break-word;
    overflow:hidden;
    display: none;
}
.wbloadtxt.hidden{
    display: none;
}
@media(max-width:520px){
    .wbloadtxt{
        width: calc(100% - 28px);
        max-width:300px;
        bottom:18px;
        padding:13px 18px;
        font-size:13px;
    }
}
/* =========================================
TOAST WRAP
========================================= */
.wb-toast-wrap{
    position:fixed;
    right:24px;
    top:24px;
    z-index:999999;
    display:flex;
    flex-direction:column;
    gap:14px;
    pointer-events:none;
}
/* =========================================
TOAST
========================================= */
.wb-toast{
    position:relative;
    overflow:hidden;
    min-width:320px;
    max-width:420px;
    min-height:72px;
    padding:16px 18px;
    border-radius:22px;
    display:flex;
    align-items:center;
    gap:14px;
    pointer-events:auto;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    background:
    linear-gradient(
        135deg,
        rgba(18,24,38,.88),
        rgba(10,14,24,.92)
    );
    border:
    1px solid rgba(255,255,255,.08);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 20px 60px rgba(0,0,0,.34);
    animation:
    toastIn .45s cubic-bezier(.2,.8,.2,1);
}
/* =========================================
PREMIUM SHINE
========================================= */
.wb-toast::before{
    content:"";
    position:absolute;
    top:-180%;
    left:-60%;
    width:44%;
    height:320%;
    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        rgba(255,255,255,.02),
        transparent
    );
    transform:
    rotate(24deg);
    animation:
    toastShine 3.4s ease-in-out infinite;
}
/* =========================================
GLOW
========================================= */
.wb-toast::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    opacity:.7;
}
/* SUCCESS */
.wb-toast.success::after{
    background:
    radial-gradient(
        circle at top left,
        rgba(34,197,94,.16),
        transparent 58%
    );
}
/* ERROR */
.wb-toast.error::after{
    background:
    radial-gradient(
        circle at top left,
        rgba(255,77,77,.16),
        transparent 58%
    );
}
/* =========================================
ICON
========================================= */
.wb-toast-icon{
    width:42px;
    height:42px;
    border-radius:16px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2;
}
/* SUCCESS */
.wb-toast.success .wb-toast-icon{
    background:
    linear-gradient(
        180deg,
        rgba(34,197,94,.22),
        rgba(34,197,94,.12)
    );
    border:
    1px solid rgba(34,197,94,.16);
    box-shadow:
    0 0 30px rgba(34,197,94,.14);
}
/* ERROR */
.wb-toast.error .wb-toast-icon{
    background:
    linear-gradient(
        180deg,
        rgba(255,77,77,.22),
        rgba(255,77,77,.12)
    );
    border:
    1px solid rgba(255,77,77,.16);
    box-shadow:
    0 0 30px rgba(255,77,77,.14);
}
.wb-toast-icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:white;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
/* =========================================
CONTENT
========================================= */
.wb-toast-content{
    flex:1;
    min-width:0;
    position:relative;
    z-index:2;
}
.wb-toast-title{
    color:white;
    font-size:15px;
    font-weight:700;
    margin-bottom:6px;
}
.wb-toast-text{
    color:
    rgba(180,210,255,.72);
    font-size:13px;
    line-height:1.5;
}
/* =========================================
CLOSE
========================================= */
.wb-toast-close{
    width:32px;
    height:32px;
    border:none;
    border-radius:12px;
    background:
    rgba(255,255,255,.04);
    color:
    rgba(255,255,255,.65);
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s ease;
    position:relative;
    z-index:2;
}
.wb-toast-close:hover{
    background:
    rgba(255,255,255,.08);
    color:white;
}
/* =========================================
ANIMATIONS
========================================= */
@keyframes toastIn{
    from{
        opacity:0;
        transform:
        translateY(18px)
        scale(.96);
    }
    to{
        opacity:1;
        transform:
        translateY(0)
        scale(1);
    }
}
@keyframes toastOut{
    to{
        opacity:0;
        transform:
        translateY(14px)
        scale(.96);
    }
}
@keyframes toastShine{
    0%{
        transform:
        translateX(-240%)
        rotate(24deg);
    }
    45%{
        transform:
        translateX(280%)
        rotate(24deg);
    }
    100%{
        transform:
        translateX(280%)
        rotate(24deg);
    }
}
/* =========================================
DEMO BUTTONS
========================================= */
.toast-demo{
    position:fixed;
    top:24px;
    right:24px;
    display:flex;
    gap:10px;
}
.toast-demo button{
    height:42px;
    padding:0 18px;
    border:none;
    border-radius:999px;
    background:
    rgba(255,255,255,.06);
    color:white;
    cursor:pointer;
}
/* =========================================
MOBILE
========================================= */
@media(max-width:520px){
    .wb-toast-wrap{
        left:14px;
        right:14px;
        top:14px;
    }
    .wb-toast{
        min-width:100%;
        max-width:100%;
    }
}
/* =========================================
WALLET OVERLAY
========================================= */
.wb-wallet-overlay{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    overflow-y:auto;
    /* GLASS */
    background:
    rgba(2,8,23,.58);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}
/* ACTIVE */
.wb-wallet-overlay.active{
    opacity:1;
    visibility:visible;
}
/* =========================================
MODAL
========================================= */
.wb-wallet-modal{
    position:relative;
    width:100%;
    max-width:560px;
    overflow:hidden;
    border-radius:34px;
    background:
    linear-gradient(
        180deg,
        rgba(14,20,32,.98),
        rgba(9,14,24,.98)
    );
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 30px 90px rgba(0,0,0,.45);
    animation: walletModalIn .35s cubic-bezier(.2,.8,.2,1);
}
/* =========================================
GLOW
========================================= */
.wb-wallet-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    pointer-events:none;
}
.glow-blue{
    width:220px;
    height:220px;
    top:-80px;
    left:-80px;
    background:
    rgba(46,168,255,.16);
}
.glow-purple{
    width:220px;
    height:220px;
    bottom:-100px;
    right:-80px;
    background:
    rgba(139,92,246,.16);
}
/* =========================================
HEADER
========================================= */
.wb-wallet-header{
    position:relative;
    z-index:2;
    padding:26px 26px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.wb-wallet-title-wrap{
    display:flex;
    align-items:center;
    gap:16px;
}
.wb-wallet-logo{
    width:58px;
    height:58px;
    border-radius:18px;
    background:
    linear-gradient(
        180deg,
        rgba(46,168,255,.18),
        rgba(46,168,255,.08)
    );
    border:
    1px solid rgba(46,168,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
}
.wb-wallet-logo svg{
    width:28px;
    height:28px;
    fill:none;
    stroke:white;
    stroke-width:1.8;
}
.wb-wallet-title{
    padding-top: 20px;
}
.wb-wallet-title span{
    display:block;
    color:
    rgba(180,210,255,.62);
    font-size:13px;
    margin-bottom:6px;
}
.wb-wallet-title h2{
    color:white;
    font-size:28px;
    font-weight:700;
    letter-spacing:-0.8px;
    margin-top: 0;
}
/* =========================================
CLOSE
========================================= */
.wb-wallet-close{
    width:42px;
    height:42px;
    border:none;
    border-radius:14px;
    background:
    rgba(255,255,255,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s ease;
}
.wb-wallet-close:hover{
    background:
    rgba(255,255,255,.08);
}
.wb-wallet-close svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:
    rgba(255,255,255,.75);
    stroke-width:2.2;
    stroke-linecap:round;
}
/* =========================================
BODY
========================================= */
.wb-wallet-body{
    position:relative;
    z-index:2;
    padding:0 26px 26px;
    display:flex;
    flex-direction:column;
    gap:18px;
}
/* =========================================
CARD
========================================= */
.wb-wallet-card{
    padding:18px;
    border-radius:24px;
    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.02)
    );
    border:
    1px solid rgba(255,255,255,.05);
    backdrop-filter:blur(12px);
}
/* TOP */
.wb-wallet-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
}
.wb-wallet-card-top span{
    color:
    rgba(180,210,255,.72);
    font-size:14px;
}
/* BADGE */
.wb-wallet-badge{
    height:28px;
    padding:0 12px;
    border-radius:999px;
    background:
    rgba(34,197,94,.10);
    border:
    1px solid rgba(34,197,94,.12);
    display:flex;
    align-items:center;
    color:#4ade80;
    font-size:12px;
    font-weight:700;
}
/* =========================================
ADDRESS ROW
========================================= */
.wb-wallet-address-row{
    display:flex;
    align-items:center;
    gap:14px;
}
/* ICON */
.wb-wallet-icon,
.wb-ref-icon{
    width:48px;
    height:48px;
    border-radius:16px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.wb-wallet-icon{
    background:
    rgba(255,255,255,.05);
}
.wb-wallet-icon img{
    width:28px;
    height:28px;
    object-fit:contain;
}
.wb-ref-icon{
    background:
    linear-gradient(
        180deg,
        rgba(139,92,246,.18),
        rgba(139,92,246,.08)
    );
    color:white;
    font-size:18px;
    font-weight:700;
}
/* ADDRESS */
.wb-wallet-address{
    flex:1;
    min-width:0;
}
.wb-wallet-address strong{
    display:block;
    color:white;
    font-size:16px;
    font-weight:700;
    margin-bottom:6px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.wb-wallet-address small{
    color:
    rgba(180,210,255,.58);
    font-size:13px;
}
/* =========================================
COPY BTN
========================================= */
.wb-copy-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:14px;
    background:
    rgba(255,255,255,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s ease;
}
.wb-copy-btn:hover{
    background:
    rgba(255,255,255,.08);
}
.wb-copy-btn svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:
    rgba(255,255,255,.7);
    stroke-width:2;
}
/* =========================================
FOOTER
========================================= */
.wb-wallet-footer{
    position:relative;
    z-index:2;
    padding:0 26px 26px;
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:14px;
}
.wb-wallet-footer.single{
    grid-template-columns: repeat(1,1fr);
}
/* BUTTON */
.wb-wallet-btn{
    height:54px;
    border:none;
    border-radius:18px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
}
/* PRIMARY */
.primary-btn{
    background:
    linear-gradient(
        180deg,
        #2ea8ff,
        #1f8be2
    );
    color:white;
    box-shadow:
    0 12px 30px rgba(46,168,255,.24);
}
/* SECONDARY */
.secondary-btn{
    background:
    rgba(255,255,255,.04);
    border:
    1px solid rgba(255,255,255,.06);
    color:white;
}
.wb-wallet-btn:hover{
    transform:
    translateY(-1px);
}
/* =========================================
ANIMATION
========================================= */
@keyframes walletModalIn{
    from{
        opacity:0;
        transform:
        translateY(20px)
        scale(.96);
    }
    to{
        opacity:1;
        transform:
        translateY(0)
        scale(1);
    }
}
/* =========================================
MOBILE
========================================= */
@media(max-width:520px){
    .wb-wallet-overlay{
        padding:14px;
    }
    .wb-wallet-modal{
        border-radius:28px;
    }
    .wb-wallet-header{
        padding:20px 18px 18px;
    }
    .wb-wallet-body{
        padding:0 18px 20px;
    }
    .wb-wallet-footer{
        padding:0 18px 18px;
        grid-template-columns:1fr;
    }
    .wb-wallet-title h2{
        font-size:24px;
    }
    .wb-wallet-address-row{
        align-items:flex-start;
    }
}
.usd-before::before{ content: "$ "; }
.usd-after::after{ content: "$"; }
.euro-before::before{ content: "€ "; }
.euro-after::after{ content: "€"; }
.usdt-after::after{ content: " USD"; }
.coin-after::after{ content: " EURC"; }
.caretup-before::before{ content: "▲ "; }
.perc-after::after{ content: "%"; }
.wbloadtxt{
    position:fixed;
    left:50%;
    bottom:26px;
    transform:
    translateX(-50%);
    z-index:999999;
    width:auto;
    max-width:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
    font-size:14px;
    font-weight:600;
    line-height:1.5;
    letter-spacing:-0.2px;
    white-space:normal;
    word-break:break-word;
}
.wbloadtxt.hidden{
    display:none;
}
.bg{ width: 100%; height: 100%; display: block; float: left; }
/* =========================================
SWAP HISTORY GRID
========================================= */
.swap-history-grid{
    width:100%;
    max-width:1020px;
    margin:40px auto;
}
/* =========================================
CARD
========================================= */
.swap-history-grid .swap-history-card{
    position:relative;
    overflow:hidden;
    padding:18px;
    margin-bottom: 24px;
    border-radius:32px;
    background:
    linear-gradient(
        180deg,
        rgba(14,20,32,.96),
        rgba(9,14,24,.98)
    );
    border:
    1px solid rgba(255,255,255,.05);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 20px 70px rgba(0,0,0,.30);
}
/* =========================================
GLOW
========================================= */
.swap-history-grid .swap-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
    opacity:.7;
}
.swap-history-grid .glow-blue{
    width:240px;
    height:240px;
    top:-120px;
    left:-100px;
    background:
    rgba(46,168,255,.12);
}
.swap-history-grid .glow-purple{
    width:240px;
    height:240px;
    right:-100px;
    bottom:-120px;
    background:
    rgba(139,92,246,.14);
}
/* =========================================
TOP STATS
========================================= */
.swap-history-grid .swap-top-stats{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:
    repeat(4,1fr);
    gap:16px;
}
/* =========================================
STAT CARD
========================================= */
.swap-history-grid .swap-stat-card{
    min-height:78px;
    padding:14px 16px;
    border-radius:20px;
    background:
    rgba(0,0,0,.20);
    border:
    1px solid rgba(255,255,255,.03);
    display:flex;
    align-items:center;
    gap:14px;
}
.swap-history-grid .swap-stat-icon{
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:16px;
    font-weight:700;
    flex-shrink:0;
}
.swap-history-grid .green{
    background:rgba(34,197,94,.18);
    color:#22c55e;
}
.swap-history-grid .purple{
    background:rgba(139,92,246,.18);
    color:#c084fc;
}
.swap-history-grid .red{
    background:rgba(239,68,68,.18);
    color:#ff6666;
}
.swap-history-grid .orange{
    background:rgba(255,153,51,.18);
    color:#ffb15c;
}
.swap-history-grid .swap-stat-content span{
    display:block;
    color:
    rgba(180,210,255,.72);
    font-size:13px;
    margin-bottom:6px;
}
.swap-history-grid .swap-stat-content strong{
    color:white;
    font-size:16px;
    font-weight:700;
}
/* =========================================
PROGRESS
========================================= */
.swap-history-grid .swap-progress-wrap{
    position:relative;
    z-index:2;
    margin-top:26px;
}
.swap-history-grid .swap-progress-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}
.swap-history-grid .swap-progress-top span{
    color:white;
    font-size:15px;
    font-weight:600;
}
.swap-history-grid .swap-status-pill{
    height:34px;
    padding:0 18px;
    border-radius:999px;
    display:flex;
    align-items:center;
    font-size:13px;
    font-weight:700;
}
.swap-history-grid .success{
    background:
    rgba(34,197,94,.12);
    color:#4ade80;
}
.swap-history-grid .swap-progress-bar{
    width:100%;
    height:10px;
    border-radius:999px;
    overflow:hidden;
    background:
    rgba(255,255,255,.08);
}
.swap-history-grid .swap-progress-fill{
    width:0%;
    height:100%;
    border-radius:999px;
    background:
    linear-gradient(
        90deg,
        #2ea8ff,
        #8b5cf6
    );
    box-shadow:
    0 0 20px rgba(46,168,255,.35);
}
/* =========================================
MAIN GRID
========================================= */
.swap-history-grid .swap-main-grid{
    position:relative;
    z-index:2;
    margin-top:34px;
    display:grid;
    grid-template-columns:
    1fr .9fr 1fr;
    gap:18px;
}
/* =========================================
USER BLOCK
========================================= */
.swap-history-grid .swap-user-block{
    min-height:150px;
    padding:18px;
    border-radius:24px;
    background:
    rgba(255,255,255,.02);
    border:
    1px solid rgba(255,255,255,.04);
}
.swap-history-grid .swap-block-label{
    display:block;
    color:white;
    font-size:17px;
    font-weight:700;
    margin-bottom:20px;
}
.swap-history-grid .swap-user-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.swap-history-grid .swap-status-text{
    color:#4ade80;
    font-size:14px;
    font-weight:700;
}
/* =========================================
ROW
========================================= */
.swap-history-grid .swap-user-row{
    display:flex;
    align-items:center;
    gap:14px;
}
.swap-history-grid .swap-user-icon{
    width:54px;
    height:54px;
    border-radius:50%;
    background:
    linear-gradient(
        180deg,
        rgba(46,168,255,.22),
        rgba(46,168,255,.08)
    );
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:16px;
    font-weight:700;
    flex-shrink:0;
}
.swap-history-grid .purple-user{
    background:
    linear-gradient(
        180deg,
        rgba(139,92,246,.24),
        rgba(139,92,246,.10)
    );
}
/* =========================================
INFO
========================================= */
.swap-history-grid .swap-user-info{
    min-width:0;
}
.swap-history-grid .swap-user-info strong{
    display:block;
    color:white;
    font-size:18px;
    font-weight:700;
    margin-bottom:8px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.swap-history-grid .swap-user-info small{
    color:
    rgba(180,210,255,.72);
    font-size:14px;
}
/* =========================================
CENTER
========================================= */
.swap-history-grid .swap-center-info{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.swap-history-grid .swap-time-row{
    margin-bottom:18px;
}
.swap-history-grid .swap-time-row span{
    display:block;
    color:
    rgba(180,210,255,.68);
    font-size:14px;
    margin-bottom:8px;
}
.swap-history-grid .swap-time-row strong{
    color:white;
    font-size:16px;
    font-weight:700;
}
.swap-history-grid .swap-center-amount{
    color:#00e676;
    font-size:38px;
    font-weight:800;
    letter-spacing:-1px;
    margin-bottom:10px;
}
.swap-history-grid .swap-center-info small{
    color:
    rgba(180,210,255,.68);
    font-size:15px;
}
/* =========================================
BOTTOM
========================================= */
.swap-history-grid .swap-bottom-grid{
    position:relative;
    z-index:2;
    margin-top:26px;
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:18px;
}
.swap-history-grid .swap-bottom-item{
    padding:18px;
    border-radius:20px;
    background:
    rgba(255,255,255,.02);
    border:
    1px solid rgba(255,255,255,.04);
}
.swap-history-grid .swap-bottom-item span{
    display:block;
    color:
    rgba(180,210,255,.68);
    font-size:13px;
    margin-bottom:10px;
}
.swap-history-grid .swap-bottom-item strong{
    color:white;
    font-size:16px;
    font-weight:700;
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:920px){
    .swap-history-grid .swap-top-stats{
        grid-template-columns:
        repeat(2,1fr);
    }
    .swap-history-grid .swap-main-grid{
        grid-template-columns:1fr;
    }
    .swap-history-grid .swap-bottom-grid{
        grid-template-columns:1fr;
    }
}
@media(max-width:520px){
    .swap-history-grid{
        max-width: 92%;
    }
    .swap-history-grid .swap-history-card{
        padding:16px;
    }
    .swap-history-grid .swap-top-stats{
        grid-template-columns:1fr;
    }
    .swap-history-grid .swap-stat-card{
        min-height:72px;
    }
    .swap-history-grid .swap-user-block{
        padding:16px;
    }
    .swap-history-grid .swap-center-amount{
        font-size:32px;
    }
}
/* =========================================
SWAP HISTORY BUTTON
========================================= */
.swap-history-btn{
    position:relative;
    overflow:hidden;
    width:100%;
    height:58px;
    border:none;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    cursor:pointer;
    background:
    linear-gradient(
        180deg,
        #2ea8ff,
        #1f8be2
    );
    border:
    1px solid rgba(46,168,255,.22);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 40px rgba(46,168,255,.24);
    transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}
/* =========================================
PREMIUM GLOW
========================================= */
.swap-history-btn::before{
    content:"";
    position:absolute;
    top:-80px;
    left:-60px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.18),
        rgba(46,168,255,.22),
        transparent 72%
    );
    filter:blur(20px);
    pointer-events:none;
}
/* =========================================
SHINE
========================================= */
.swap-history-btn::after{
    content:"";
    position:absolute;
    top:-160%;
    left:-60%;
    width:40%;
    height:320%;
    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.10),
        rgba(255,255,255,.02),
        transparent
    );
    transform:
    rotate(24deg);
    animation:
    swapBtnShine 3.5s ease-in-out infinite;
    pointer-events:none;
}
/* =========================================
TEXT
========================================= */
.swap-history-btn span{
    position:relative;
    z-index:2;
    color:white;
    font-size:15px;
    font-weight:700;
    letter-spacing:-0.2px;
}
/* =========================================
ICON
========================================= */
.swap-history-btn svg{
    position:relative;
    z-index:2;
    width:18px;
    height:18px;
    fill:none;
    stroke:white;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:
    transform .25s ease;
}
/* =========================================
HOVER
========================================= */
.swap-history-btn:hover{
    transform:
    translateY(-2px);
    border-color:
    rgba(255,255,255,.18);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 24px 60px rgba(46,168,255,.34);
}
.swap-history-btn:hover svg{
    transform:
    translateX(2px);
}
/* =========================================
ACTIVE
========================================= */
.swap-history-btn:active{
    transform:
    scale(.99);
}
/* =========================================
ANIMATION
========================================= */
@keyframes swapBtnShine{
    0%{
        transform:
        translateX(-220%)
        rotate(24deg);
    }
    45%{
        transform:
        translateX(260%)
        rotate(24deg);
    }
    100%{
        transform:
        translateX(260%)
        rotate(24deg);
    }
}
/* =========================================
MOBILE BOTTOM NAV
========================================= */
.mobile-bottom-nav{
    position:fixed;
    left:50%;
    bottom:16px;
    transform:
    translateX(-50%);
    z-index:9999;
    width:
    calc(100% - 28px);
    max-width:460px;
    height:78px;
    padding:10px;
    border-radius:28px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    /* GLASS */
    background:
    linear-gradient(
        180deg,
        rgba(14,20,32,.92),
        rgba(9,14,24,.96)
    );
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:
    1px solid rgba(255,255,255,.06);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 20px 60px rgba(0,0,0,.35);
}
/* =========================================
GLOW
========================================= */
.mobile-bottom-nav .mobile-nav-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    pointer-events:none;
    opacity:.75;
}
.mobile-bottom-nav .glow-left{
    width:180px;
    height:180px;
    top:-90px;
    left:-70px;
    background:
    rgba(46,168,255,.12);
}
.mobile-bottom-nav .glow-right{
    width:180px;
    height:180px;
    right:-70px;
    bottom:-90px;
    background:
    rgba(139,92,246,.14);
}
/* =========================================
ITEM
========================================= */
.mobile-bottom-nav .mobile-nav-item{
    position:relative;
    z-index:2;
    flex:1;
    height:100%;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
    transition:.25s ease;
}
/* =========================================
ICON
========================================= */
.mobile-bottom-nav .mobile-nav-icon{
    width:38px;
    height:38px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
    rgba(255,255,255,.03);
    border:
    1px solid rgba(255,255,255,.04);
    transition:.25s ease;
}
.mobile-bottom-nav .mobile-nav-icon svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:
    rgba(255,255,255,.62);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:.25s ease;
}
/* =========================================
TEXT
========================================= */
.mobile-bottom-nav .mobile-nav-item span{
    color:
    rgba(180,210,255,.62);
    font-size:11px;
    font-weight:600;
    letter-spacing:.2px;
    transition:.25s ease;
}
/* =========================================
ACTIVE
========================================= */
.mobile-bottom-nav .mobile-nav-item.active{
    background:
    linear-gradient(
        135deg,
        rgba(46,168,255,.10),
        rgba(139,92,246,.08)
    );
}
.mobile-bottom-nav .mobile-nav-item.active .mobile-nav-icon{
    background:
    linear-gradient(
        180deg,
        rgba(46,168,255,.18),
        rgba(46,168,255,.08)
    );
    border:
    1px solid rgba(46,168,255,.12);
    box-shadow:
    0 10px 25px rgba(46,168,255,.16);
}
.mobile-bottom-nav .mobile-nav-item.active .mobile-nav-icon svg{
    stroke:white;
}
.mobile-bottom-nav .mobile-nav-item.active span{
    color:white;
}
/* =========================================
HOVER
========================================= */
.mobile-bottom-nav .mobile-nav-item:hover .mobile-nav-icon{
    transform:
    translateY(-1px);
    background:
    rgba(255,255,255,.06);
}
.mobile-bottom-nav .mobile-nav-item:hover span{
    color:white;
}
/* =========================================
ONLY MOBILE
========================================= */
@media(min-width:769px){
    .mobile-bottom-nav{
        display:none;
    }
}
/* =========================================
TEAM BUSINESS GRID
========================================= */
.team-business-grid{
    width:100%;
    max-width:1100px;
    margin:0px auto 40px;
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:20px;
}
/* =========================================
CARD
========================================= */
.team-business-grid .team-business-card{
    position:relative;
    overflow:hidden;
    padding:24px;
    border-radius:30px;
    background:
    linear-gradient(
        180deg,
        rgba(14,20,32,.96),
        rgba(9,14,24,.98)
    );
    border:
    1px solid rgba(255,255,255,.05);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 24px 70px rgba(0,0,0,.30);
    transition:.28s ease;
}
.team-business-grid .team-business-card:hover{
    transform:
    translateY(-3px);
}
/* =========================================
PREMIUM GLOW
========================================= */
.team-business-grid .team-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
    opacity:.7;
}
.team-business-grid .glow-blue{
    width:220px;
    height:220px;
    top:-100px;
    left:-100px;
    background:
    rgba(46,168,255,.12);
}
.team-business-grid .glow-purple{
    width:220px;
    height:220px;
    right:-100px;
    bottom:-100px;
    background:
    rgba(139,92,246,.14);
}
.team-business-grid .glow-orange{
    width:220px;
    height:220px;
    top:-100px;
    left:-100px;
    background:
    rgba(255,153,51,.14);
}
.team-business-grid .glow-red{
    width:220px;
    height:220px;
    right:-100px;
    bottom:-100px;
    background:
    rgba(255,77,77,.14);
}
/* =========================================
TOP
========================================= */
.team-business-grid .team-business-top{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:18px;
}
/* =========================================
ICON
========================================= */
.team-business-grid .team-business-icon{
    width:64px;
    height:64px;
    border-radius:22px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.team-business-grid .team-business-icon svg{
    width:28px;
    height:28px;
    fill:none;
    stroke:white;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
/* LENDING */
.team-business-grid .team-business-icon.lending{
    background:
    linear-gradient(
        180deg,
        rgba(46,168,255,.22),
        rgba(46,168,255,.08)
    );
    border:
    1px solid rgba(46,168,255,.12);
    box-shadow:
    0 14px 30px rgba(46,168,255,.12);
}
/* BORROWING */
.team-business-grid .team-business-icon.borrowing{
    background:
    linear-gradient(
        180deg,
        rgba(255,153,51,.22),
        rgba(255,153,51,.08)
    );
    border:
    1px solid rgba(255,153,51,.12);
    box-shadow:
    0 14px 30px rgba(255,153,51,.12);
}
/* =========================================
HEAD
========================================= */
.team-business-grid .team-business-head{
    min-width:0;
}
.team-business-grid .team-business-head span{
    display:block;
    color:
    rgba(180,210,255,.68);
    font-size:14px;
    margin-bottom:10px;
    line-height:1.4;
}
.team-business-grid .team-business-head h2{
    color:white;
    font-size: 1.5em;
    font-weight:800;
    letter-spacing:-1.5px;
    margin-top: 0px;
}
/* =========================================
STATS
========================================= */
.team-business-grid .team-business-stats{
    position:relative;
    z-index:2;
    margin-top:34px;
    display:flex;
    flex-direction:column;
    gap:16px;
}
/* ITEM */
.team-business-grid .team-stat-item{
    min-height:68px;
    padding:0 18px;
    border-radius:20px;
    background:
    rgba(255,255,255,.03);
    border:
    1px solid rgba(255,255,255,.04);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
/* LEFT */
.team-business-grid .team-stat-left{
    display:flex;
    align-items:center;
    gap:12px;
}
.team-business-grid .team-stat-left span{
    color:white;
    font-size:15px;
    font-weight:600;
}
/* DOT */
.team-business-grid .team-stat-dot{
    width:12px;
    height:12px;
    border-radius:50%;
}
.team-business-grid .strong-dot{
    background:#2ea8ff;
    box-shadow:
    0 0 14px rgba(46,168,255,.45);
}
.team-business-grid .other-dot{
    background:#8b5cf6;
    box-shadow:
    0 0 14px rgba(139,92,246,.45);
}
/* VALUE */
.team-business-grid .team-stat-item strong{
    color:white;
    font-size:1.2em;
    font-weight:700;
    letter-spacing:-0.4px;
}
/* =========================================
FOOTER
========================================= */
.team-business-grid .team-business-footer{
    position:relative;
    z-index:2;
    margin-top:26px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.team-business-grid .team-business-footer span{
    color:
    rgba(180,210,255,.58);
    font-size:13px;
}
/* BADGE */
.team-business-grid .team-badge{
    height:34px;
    padding:0 16px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
}
.team-business-grid .team-badge.positive{
    background:
    rgba(34,197,94,.12);
    color:#4ade80;
}
.team-business-grid .team-badge.warning{
    background:
    rgba(255,153,51,.12);
    color:#ffb15c;
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:900px){
    .team-business-grid{
        grid-template-columns:1fr;
    }
}
@media(max-width:520px){
    .team-business-grid{
        max-width: 92%;
    }
    .team-business-grid .team-business-card{
        padding:18px;
        border-radius:26px;
    }
    .team-business-grid .team-business-top{
        align-items:flex-start;
    }
    .team-business-grid .team-business-icon{
        width:58px;
        height:58px;
        border-radius:20px;
    }
    .team-business-grid .team-business-head h2{
        font-size: 1.4em;
    }
    .team-business-grid .team-stat-item{
        min-height:62px;
        padding:0 16px;
    }
    .team-business-grid .team-stat-left span{
        font-size:14px;
    }
    .team-business-grid .team-stat-item strong{
        font-size:17px;
    }
}