:root{
    --primary:#635bff;
    --primary-dark:#4f46e5;
    --secondary:#8b5cf6;
    --bg:#f6f7fb;
    --card:#ffffff;
    --text:#15182b;
    --muted:#7c8297;
    --border:#e9eaf1;
    --success:#16a579;
    --danger:#e0525d;
    --shadow:0 10px 35px rgba(32,35,65,.07);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    -webkit-font-smoothing:antialiased;
}

a{
    color:var(--primary);
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

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

.app{
    min-height:100vh;
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
}

/* =========================
   SIDEBAR
========================= */

.side{
    position:sticky;
    top:0;
    height:100vh;
    background:#fff;
    border-right:1px solid var(--border);
    padding:28px 16px;
    z-index:20;
}

.brand{
    font-size:29px;
    font-weight:900;
    letter-spacing:-1.5px;
    padding:0 14px 38px;
}

.brand span{
    color:var(--primary);
}

.mini{
    color:#a0a5b5;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    padding:0 14px 10px;
}

.nav{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.nav a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:13px;
    color:#72788b;
    font-size:14px;
    font-weight:650;
    transition:.2s;
}

.nav a:hover{
    background:#f4f2ff;
    color:var(--primary);
}

.nav a span{
    margin:0;
}

.nav a:first-child{
    background:linear-gradient(
        135deg,
        #eeeaff,
        #f5f1ff
    );
    color:var(--primary);
}

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

.main{
    min-width:0;
    width:100%;
    max-width:1500px;
    padding:28px 34px 70px;
}

/* =========================
   TOP BAR
========================= */

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

.hello{
    color:#9aa0b0;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.4px;
}

.top h1{
    margin:5px 0 0;
    font-size:27px;
    letter-spacing:-.7px;
}

.user-pill{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px 15px;
    font-size:13px;
    font-weight:700;
    box-shadow:var(--shadow);
}

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

.hero{
    position:relative;
    overflow:hidden;
    min-height:225px;
    padding:30px;
    border-radius:27px;
    color:#fff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,255,255,.20),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #5146e5 0%,
            #6d5df5 45%,
            #8b6ff7 100%
        );
    box-shadow:
        0 20px 45px rgba(99,91,255,.22);
}

.hero:before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border:55px solid rgba(255,255,255,.07);
    border-radius:50%;
    right:-80px;
    bottom:-150px;
}

.hero:after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    border:35px solid rgba(255,255,255,.05);
    border-radius:50%;
    right:100px;
    top:-90px;
}

.hero small{
    position:relative;
    z-index:2;
    opacity:.78;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
}

.balance{
    position:relative;
    z-index:2;
    margin:8px 0 5px;
    font-size:43px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-1.5px;
}

.hero > div:not(.balance):not(.hero-actions){
    position:relative;
    z-index:2;
    opacity:.82;
    font-size:13px;
}

.hero-actions{
    position:relative;
    z-index:5;
    display:flex;
    gap:10px;
    margin-top:25px;
}

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

.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:43px;
    padding:10px 18px;
    border:0;
    border-radius:12px;
    background:var(--primary);
    color:#fff;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:.2s;
    box-shadow:0 7px 18px rgba(99,91,255,.18);
}

.btn:hover{
    transform:translateY(-1px);
    background:var(--primary-dark);
}

.btn.white{
    background:#fff;
    color:#5146d8;
}

.btn.white:hover{
    background:#f7f7ff;
}

.btn.gray{
    background:#f0f1f6;
    color:#4f5567;
    box-shadow:none;
}

.btn.danger{
    background:#fff0f1;
    color:#d24b57;
    box-shadow:none;
}

/* =========================
   STAT CARDS
========================= */

.cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin:17px 0;
}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:19px;
    padding:20px;
    box-shadow:var(--shadow);
    transition:.2s;
}

.card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 35px rgba(32,35,65,.10);
}

.muted{
    color:var(--muted);
}

.small{
    color:#9aa0b0;
    font-size:11px;
}

.big{
    margin-top:9px;
    font-size:23px;
    font-weight:900;
    letter-spacing:-.5px;
}

.purple{
    color:var(--primary);
}

.green{
    color:var(--success);
}

/* =========================
   CONTENT BOXES
========================= */

.grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
    gap:17px;
}

.box{
    background:#fff;
    border:1px solid var(--border);
    border-radius:20px;
    padding:22px;
    box-shadow:var(--shadow);
}

.box h2,
.box h3{
    margin:0;
    letter-spacing:-.4px;
}

.boxhead{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:13px;
}

.row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:14px 0;
    border-bottom:1px solid #f0f1f5;
}

.row:last-child{
    border-bottom:0;
}

/* =========================
   FORMS
========================= */

.field{
    margin:15px 0;
}

.field label,
.form-grid label{
    display:block;
    color:#5f6678;
    font-size:12px;
    font-weight:700;
    margin-bottom:7px;
}

.input,
input,
select,
textarea{
    width:100%;
    min-height:46px;
    padding:11px 13px;
    border:1px solid #dfe2eb;
    border-radius:12px;
    background:#fff;
    color:var(--text);
    outline:none;
    transition:.2s;
}

.input:focus,
input:focus,
select:focus,
textarea:focus{
    border-color:#8178ff;
    box-shadow:0 0 0 4px rgba(99,91,255,.09);
}

/* =========================
   AUTH
========================= */

.auth-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:25px;
    background:
        radial-gradient(
            circle at 20% 10%,
            #ebe9ff,
            transparent 35%
        ),
        var(--bg);
}

.auth-card,
.authbox{
    width:min(440px,100%);
    background:#fff;
    border:1px solid var(--border);
    border-radius:25px;
    padding:34px;
    box-shadow:0 25px 70px rgba(35,37,70,.11);
}

.auth-card h1,
.auth-card h2,
.authbox h1,
.authbox h2{
    margin-top:0;
    letter-spacing:-.8px;
}

.auth-card .btn,
.authbox .btn{
    width:100%;
    margin-top:8px;
}

.center{
    text-align:center;
}

.notice{
    padding:13px 15px;
    border-radius:12px;
    background:#f5f4ff;
    color:#646b7e;
    font-size:12px;
    word-break:break-word;
}

.error{
    padding:12px 14px;
    margin:12px 0;
    border-radius:11px;
    background:#fff0f1;
    color:#c23f4a;
    border:1px solid #ffd8dc;
    font-size:13px;
}

.success{
    padding:12px 14px;
    margin:12px 0;
    border-radius:11px;
    background:#ebfaf5;
    color:#168365;
    border:1px solid #c9eee1;
    font-size:13px;
}

/* =========================
   MISSIONS
========================= */

.mission{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:16px 0;
    border-bottom:1px solid #edf0f4;
}

.mission:last-child{
    border-bottom:0;
}

/* =========================
   REFERRAL
========================= */

.refcode{
    margin-top:8px;
    font-size:24px;
    font-weight:900;
    color:var(--primary);
    word-break:break-all;
}

/* =========================
   PROFILE
========================= */

.profile-head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:15px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:20px;
    padding:20px;
    box-shadow:var(--shadow);
}

.avatar{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border-radius:19px;
    background:linear-gradient(135deg,#635bff,#957df7);
    color:#fff;
    font-size:25px;
    font-weight:900;
}

.profile-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px;
    margin-top:17px;
}

.badge{
    padding:6px 10px;
    border-radius:20px;
    background:#ebfaf5;
    color:#168365;
    font-size:11px;
    font-weight:800;
}

/* =========================
   TABLE
========================= */

.table{
    width:100%;
    border-collapse:collapse;
}

.table th,
.table td{
    padding:13px 10px;
    text-align:left;
    border-bottom:1px solid #edf0f4;
    font-size:12px;
}

.table th{
    color:#858b9b;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.5px;
}

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

.bottom-nav{
    display:none;
}

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

@media(max-width:850px){

    .app{
        display:block;
    }

    .side{
        display:none;
    }

    .main{
        padding:18px 14px 88px;
    }

    .top{
        margin-bottom:17px;
    }

    .top h1{
        font-size:22px;
    }

    .user-pill{
        padding:8px 10px;
        font-size:11px;
    }

    .hero{
        min-height:210px;
        padding:23px;
        border-radius:23px;
    }

    .balance{
        font-size:35px;
    }

    .cards{
        grid-template-columns:1fr 1fr;
        gap:11px;
    }

    .card{
        padding:15px;
        border-radius:16px;
    }

    .big{
        font-size:19px;
    }

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

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

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

    .profile-head > div:last-child{
        grid-column:1/-1;
    }

    .box{
        padding:18px;
        border-radius:17px;
    }

    .bottom-nav{
        position:fixed;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        left:0;
        right:0;
        bottom:0;
        height:70px;
        z-index:100;
        background:rgba(255,255,255,.97);
        backdrop-filter:blur(15px);
        border-top:1px solid var(--border);
        box-shadow:0 -10px 30px rgba(25,28,55,.08);
    }

    .bottom-nav a{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        color:#858b9b;
        font-size:20px;
        font-weight:700;
    }

    .bottom-nav span{
        font-size:9px;
        font-weight:700;
    }

    .bottom-nav a:first-child{
        color:var(--primary);
    }

    .auth-page{
        padding:16px;
    }

    .auth-card,
    .authbox{
        padding:25px 20px;
        border-radius:21px;
    }

    .hero-actions{
        margin-top:21px;
    }

    .hero-actions .btn{
        flex:1;
    }

    .mission{
        align-items:flex-start;
    }

    .mission .btn{
        white-space:nowrap;
    }

    .table{
        min-width:650px;
    }

}