*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    min-height:100vh;
    font-family:'Inter',sans-serif;
    background:#080915;
    overflow:hidden;
}

.bg{
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at 20% 30%,#c16cff55,transparent 35%),
    radial-gradient(circle at 80% 20%,#6f52ff55,transparent 30%),
    radial-gradient(circle at 70% 70%,#00d2ff33,transparent 30%),
    #080915;
}

.container{
    width:1400px;
    max-width:95%;
    margin:auto;
    min-height:100vh;
    display:flex;
    align-items:center;
    gap:40px;
}

.welcome-card{
    width:380px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(30px);
    border-radius:35px;
    padding:40px;
    color:white;
    border:1px solid rgba(255,255,255,.1);
    box-shadow:
    0 20px 60px rgba(0,0,0,.4);
}

.logo{
    display:flex;
    gap:10px;
    align-items:center;
    font-weight:700;
    margin-bottom:30px;
}

.welcome-card h1{
    font-size:52px;
    line-height:1.05;
    margin-bottom:20px;
}

.welcome-card p{
    color:#bcbcc7;
    line-height:1.7;
    margin-bottom:30px;
}

.login-text{
    text-align:center;
    margin-bottom:20px;
    color:#aaa;
}

.login-text a{
    color:#9b5cff;
    text-decoration:none;
}

.btn{
    width:100%;
    height:65px;
    border:none;
    border-radius:20px;
    color:white;
    font-size:17px;
    font-weight:700;
    cursor:pointer;

    background:
    linear-gradient(
    135deg,
    #b14cff,
    #6e6dff
    );

    transition:.4s;
}

.btn:hover{
    transform:translateY(-3px);
    box-shadow:
    0 0 40px #9b5cff;
}

.dashboard{
    flex:1;
    display:grid;
    grid-template-columns:2fr 1.2fr;
    gap:25px;
}

.card{
    border-radius:32px;
    background:
    rgba(18,20,35,.8);

    backdrop-filter:blur(25px);

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

    transition:.35s;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:
    0 0 60px rgba(155,92,255,.3);
}

/* PORTFOLIO LIỀN KHỐI */

.portfolio{
    padding:30px;

    background:
    linear-gradient(
    135deg,
    #a644ff,
    #6c4cff
    );

    min-height:330px;

    grid-row:span 2;

    position:relative;
    overflow:hidden;
}

.portfolio::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;

    background:
    radial-gradient(
    circle,
    rgba(255,255,255,.2),
    transparent 70%
    );

    top:-150px;
    right:-150px;
}

.card-header{
    color:white;
    margin-bottom:20px;
}

.portfolio-content{
    display:flex;
    align-items:center;
    justify-content:space-around;
    height:100%;
}

.circle-chart{
    width:220px;
    height:220px;
    border-radius:50%;

    background:
    conic-gradient(
    #2de2ff 0 43%,
    #22253b 43% 100%
    );

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

    box-shadow:
    0 0 40px rgba(45,226,255,.3);
}

.circle-inner{
    width:140px;
    height:140px;
    background:#9c4cff;
    border-radius:50%;

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

    color:white;
}

.circle-inner h2{
    font-size:42px;
}

.stats{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.stat-box{
    padding:20px 25px;
    border-radius:20px;

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

    color:white;
}

.weekly{
    padding:25px;
}

.weekly h3{
    color:white;
    margin-bottom:20px;
}

.bars{
    height:220px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
}

.bar{
    width:18px;
    border-radius:30px;

    background:
    linear-gradient(
    to top,
    #7c4dff,
    #c56cff
    );

    animation:grow 2s ease;
}

@keyframes grow{
    from{
        height:0;
    }
}

.apy,
.invested{
    padding:30px;
}

.apy h3,
.invested h3{
    color:#cfcfd8;
    margin-bottom:15px;
}

.apy h1,
.invested h1{
    color:white;
    font-size:52px;
}

.green{
    color:#00ff99;
}

.progress{
    height:12px;
    background:#2a3046;
    border-radius:30px;
    overflow:hidden;
    margin:25px 0;
}

.fill{
    width:70%;
    height:100%;
    background:
    linear-gradient(
    90deg,
    #a644ff,
    #00d2ff
    );
}

.plans{
    color:#bdbdd0;
    display:flex;
    flex-direction:column;
    gap:12px;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    min-height:100vh;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    color:white;
    background:#070816;
}

.page-bg{
    position:fixed;
    inset:0;
    background:
        linear-gradient(
            rgba(8,10,24,.15),
            rgba(8,10,24,.92)
        ),
        url("https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?auto=format&fit=crop&w=1800&q=80");
    background-size:cover;
    background-position:center;
    filter:saturate(.95);
    z-index:-2;
}

.page-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 25% 45%,rgba(168,85,247,.22),transparent 30%),
        radial-gradient(circle at 70% 60%,rgba(34,211,238,.12),transparent 35%),
        rgba(8,10,24,.38);
    backdrop-filter:blur(2px);
}

.landing-wrapper{
    width:100%;
    height:100vh;
    padding:55px 90px;

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

/* LEFT */

.welcome-card{
    width:500px;
    min-height:380px;

    padding:42px;

    border-radius:28px;

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

    color:#111827;

    box-shadow:
    0 35px 90px rgba(0,0,0,.22);

    backdrop-filter:blur(16px);
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:30px;

    font-weight:900;
    font-size:18px;
}

.brand-icon{
    width:28px;
    height:28px;

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

    border-radius:9px;

    color:white;

    background:
    linear-gradient(
        135deg,
        #a855f7,
        #6d5dfc
    );
}

.welcome-card h1{
    font-size:44px;
    line-height:1.08;
    font-weight:900;
    margin-bottom:18px;
}

.welcome-card p{
    color:#4b5563;
    line-height:1.55;
    font-size:16px;
    margin-bottom:30px;
}

.login-text{
    text-align:center;
    color:#6b7280;
    font-size:14px;
    margin-bottom:20px;
}

.login-text a{
    color:#0f766e;
    font-weight:800;
    text-decoration:none;
}

.main-btn{
    width:100%;
    height:62px;

    border:none;
    border-radius:16px;

    color:white;
    font-weight:900;
    font-size:16px;

    cursor:pointer;

    background:
    linear-gradient(
        135deg,
        #a855f7,
        #6d5dfc
    );

    box-shadow:
    0 18px 35px rgba(109,93,252,.35);

    transition:.25s;
}

.main-btn:hover{
    transform:translateY(-3px);
}

/* RIGHT DASHBOARD */

.showcase-board{
    width:980px;

    padding:24px;

    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:16px;

    border-radius:28px;

    background:#191927;

    box-shadow:
    0 35px 100px rgba(0,0,0,.38);

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

@keyframes floatBoard{
    0%{
        transform:translateY(0);
    }

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

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

.card{
    border-radius:20px;

    background:#20202f;

    padding:22px;

    position:relative;
    overflow:hidden;
}

.card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.card-top h3,
.card h3{
    font-size:16px;
    font-weight:900;
}

.card-top button{
    width:28px;
    height:28px;

    border:none;
    border-radius:8px;

    color:#cbd5e1;

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

    cursor:pointer;
}

/* Portfolio */

.portfolio-card{
    min-height:330px;

    background:
    linear-gradient(
        145deg,
        #a642f5,
        #983cea
    );
}

.portfolio-legend{
    display:flex;
    gap:18px;

    font-size:12px;
    color:#e9d5ff;
    font-weight:800;
}

.portfolio-legend span{
    display:flex;
    align-items:center;
    gap:7px;
}

.donut-wrap{
    height:240px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.donut-chart{
    width:170px;
    height:170px;

    border-radius:50%;

    background:
    conic-gradient(
        #22d3ee 0 43%,
        #151827 43% 100%
    );

    display:flex;
    align-items:center;
    justify-content:center;
}

.donut-inner{
    width:100px;
    height:100px;

    border-radius:50%;

    background:#9b3ff0;

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

.donut-inner h2{
    font-size:34px;
    line-height:1;
}

.donut-inner span{
    font-size:13px;
    color:#e9d5ff;
}

/* Weekly */

.weekly-card{
    min-height:330px;
}

.weekly-bars{
    height:230px;

    display:grid;
    grid-template-columns:repeat(7,1fr);
    align-items:end;
    gap:12px;
}

.weekly-bars div{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    height:100%;
}

.weekly-bars span{
    width:12px;
    border-radius:999px;

    background:
    linear-gradient(
        180deg,
        #c084fc,
        #7c3aed
    );

    box-shadow:
    0 0 18px rgba(192,132,252,.45);
}

.weekly-bars p{
    font-size:12px;
    color:#9ca3af;
}

/* APY */

.apy-card{
    min-height:148px;

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

.apy-card h2{
    font-size:36px;
    margin:18px 0 4px;
}

.apy-card p{
    color:#22c55e;
    font-size:13px;
    font-weight:900;
}

.green-line{
    width:70px;
    height:45px;

    border-bottom:
    3px solid #22c55e;

    border-radius:50%;

    transform:
    rotate(-22deg);
}

/* Invested */

.invested-card{
    grid-row:span 2;
}

.muted{
    color:#9ca3af;
    font-size:13px;
}

.invested-card h2{
    font-size:32px;
    margin:12px 0 20px;
}

.invest-progress{
    height:10px;
    border-radius:999px;
    background:#64748b;
    overflow:hidden;
    margin-bottom:20px;
}

.invest-progress div{
    width:70%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        #a855f7,
        #22d3ee
    );
}

.plan-list{
    display:grid;
    gap:14px;
}

.plan-list div{
    display:flex;
    justify-content:space-between;
    align-items:center;

    color:#d1d5db;
    font-size:14px;
}

.plan-list span{
    display:flex;
    align-items:center;
    gap:9px;
}

.dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
}

.dot.cyan{
    background:#22d3ee;
}

.dot.teal{
    background:#14b8a6;
}

.dot.purple{
    background:#8b5cf6;
}

.dot.gray{
    background:#64748b;
}

.dot.white{
    background:white;
}

/* History */

.history-card{
    min-height:190px;

    background:
    linear-gradient(
        145deg,
        #a642f5,
        #983cea
    );
}

.history-legend{
    display:flex;
    gap:18px;
    margin-bottom:14px;

    font-size:12px;
    font-weight:800;
    color:#e9d5ff;
}

.history-legend span{
    display:flex;
    gap:7px;
    align-items:center;
}

.history-chart{
    position:relative;

    height:95px;

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

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

    background:
    repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 23px,
        rgba(255,255,255,.08) 24px
    );
}

.history-chart span{
    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#22d3ee;
}

/* Activity */

.activity-list{
    grid-column:1 / -1;

    display:grid;
    gap:10px;
}

.activity-row{
    min-height:52px;

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

    padding:0 18px;

    border-radius:14px;

    background:#20202f;

    font-size:14px;
}

.activity-row span{
    color:#9ca3af;
}

.activity-row small{
    font-size:12px;
    color:#d1d5db;
}

.green{
    color:#22c55e;
}

.red{
    color:#fb7185;
}

.premium-dot::before,
.wallet-dot::before{
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    margin-right:6px;
}

.premium-dot::before{
    background:#22c55e;
}

.wallet-dot::before{
    background:#facc15;
}

/* Responsive */

@media(max-width:1200px){
    body{
        overflow:auto;
    }

    .landing-wrapper{
        height:auto;
        min-height:100vh;
        flex-direction:column;
        padding:40px 20px;
    }

    .showcase-board{
        width:100%;
        grid-template-columns:1fr;
    }

    .invested-card{
        grid-row:auto;
    }

    .activity-row{
        grid-template-columns:1fr;
        padding:16px;
    }
}
/* INDEX MOBILE FIX */

@media(max-width:768px){

    body{
        overflow-x:hidden !important;
        overflow-y:auto !important;
    }

    .landing-wrapper{
        width:100% !important;
        padding:18px !important;
        display:flex !important;
        flex-direction:column !important;
        gap:22px !important;
        box-sizing:border-box !important;
    }

    .welcome-card,
    .showcase-board{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
        box-sizing:border-box !important;
        border-radius:24px !important;
    }

    .welcome-card{
        padding:28px 22px !important;
    }

    .welcome-card h1{
        font-size:40px !important;
        line-height:1.05 !important;
    }

    .welcome-card p{
        font-size:15px !important;
        line-height:1.55 !important;
    }

    .welcome-card .primary-btn,
    .welcome-card button,
    .welcome-card a{
        width:100% !important;
        border-radius:16px !important;
    }

}