:root{
    --bg:#070b16;
    --panel:#101827;
    --panel2:#0c1321;
    --line:#1d2a3d;
    --text:#edf4ff;
    --muted:#8fa1ba;
    --primary:#6d5dfc;
    --primary2:#20c8ff;
    --success:#22c55e;
    --danger:#fb7185;
    --warning:#fbbf24;
    --shadow:0 20px 60px #0006
}

*{
    box-sizing:border-box
}

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

a{
    color:#9aa9ff;
    text-decoration:none
}

button,
input,
select{
    font:inherit
}


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

.topbar{
    height:76px;
    padding:0 5%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #ffffff10;
    background:#070b16dd;
    backdrop-filter:blur(12px)
}

.brand,
.auth-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:20px
}

.brand-mark{
    width:38px;
    height:38px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary2)
    );
    font-weight:900;
    color:white;
    box-shadow:0 8px 25px #6d5dfc55
}


/* =========================================================
   LANDING PAGE
========================================================= */

.landing{
    min-height:100vh;
    background:
        radial-gradient(
            circle at 20% 10%,
            #18234a 0,
            #070b16 35%
        ),
        var(--bg);
    overflow:hidden
}

.orb{
    position:fixed;
    border-radius:50%;
    filter:blur(80px);
    opacity:.22
}

.orb1{
    width:300px;
    height:300px;
    background:#6d5dfc;
    top:10%;
    left:-100px
}

.orb2{
    width:350px;
    height:350px;
    background:#20c8ff;
    right:-100px;
    bottom:0
}

.hero{
    max-width:1150px;
    margin:0 auto;
    min-height:calc(100vh - 130px);
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:60px;
    align-items:center;
    padding:60px 25px
}

.eyebrow{
    font-size:12px;
    letter-spacing:2px;
    color:#8f9cff;
    font-weight:800
}

.hero h1{
    font-size:clamp(42px,6vw,76px);
    line-height:1.02;
    margin:18px 0
}

.hero h1 span{
    background:linear-gradient(
        90deg,
        #9a8cff,
        #3ed9ff
    );
    -webkit-background-clip:text;
    color:transparent
}

.hero p{
    font-size:18px;
    color:var(--muted);
    max-width:650px;
    line-height:1.7
}

.hero-actions{
    display:flex;
    gap:14px;
    margin-top:30px
}

.hero-card{
    background:linear-gradient(
        145deg,
        #141e32,
        #0c1321
    );
    border:1px solid #ffffff15;
    border-radius:28px;
    padding:28px;
    box-shadow:var(--shadow);
    transform:rotate(2deg)
}

.mini-top,
.mini-stats{
    display:flex;
    justify-content:space-between
}

.mini-top span,
small{
    color:var(--muted)
}

.mini-top b{
    color:#6ee7b7;
    font-size:12px
}

.hero-card>strong{
    display:block;
    font-size:38px;
    margin:24px 0
}

.fake-chart{
    height:120px;
    display:flex;
    align-items:end;
    gap:9px;
    border-bottom:1px solid var(--line)
}

.fake-chart i{
    display:block;
    width:12%;
    border-radius:8px 8px 0 0;
    background:linear-gradient(
        #7c6cff,
        #20c8ff
    )
}

.fake-chart i:nth-child(1){height:30%}
.fake-chart i:nth-child(2){height:48%}
.fake-chart i:nth-child(3){height:40%}
.fake-chart i:nth-child(4){height:70%}
.fake-chart i:nth-child(5){height:56%}
.fake-chart i:nth-child(6){height:85%}
.fake-chart i:nth-child(7){height:96%}

.mini-stats{
    padding-top:20px
}

.mini-stats b{
    display:block;
    margin-top:5px
}

footer{
    text-align:center;
    color:#64748b;
    padding:20px
}


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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:12px;
    padding:12px 18px;
    font-weight:800;
    cursor:pointer;
    transition:.2s
}

.btn:hover{
    transform:translateY(-1px)
}

.primary{
    background:linear-gradient(
        135deg,
        var(--primary),
        #8a7dff
    );
    color:#fff;
    box-shadow:0 10px 30px #6d5dfc33
}

.secondary{
    background:#172236;
    color:#dbe6ff;
    border:1px solid #ffffff10
}

.ghost{
    background:#ffffff08;
    color:#fff;
    border:1px solid #ffffff12
}

.full{
    width:100%
}


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

.auth-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:
        radial-gradient(
            circle at 15% 20%,
            #1a2450,
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 80%,
            #08354a,
            transparent 35%
        ),
        var(--bg);
    padding:30px
}

.auth-shell{
    width:min(470px,100%)
}

.auth-brand{
    justify-content:center;
    margin-bottom:22px
}

.auth-card{
    background:#0e1625ed;
    border:1px solid #ffffff12;
    border-radius:24px;
    padding:28px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px)
}

.auth-card h1{
    margin:22px 0 6px;
    font-size:30px
}

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

label{
    display:block;
    font-size:13px;
    color:#b8c6da;
    font-weight:700;
    margin:16px 0
}

input,
select{
    width:100%;
    margin-top:7px;
    background:#0a111e;
    border:1px solid #25344b;
    color:#fff;
    border-radius:11px;
    padding:12px 13px;
    outline:0
}

input:focus,
select:focus{
    border-color:#6d5dfc;
    box-shadow:0 0 0 3px #6d5dfc18
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}

.between{
    justify-content:space-between
}

.role-tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    background:#09101c;
    padding:5px;
    border-radius:12px
}

.role-tabs a{
    text-align:center;
    padding:9px;
    color:#71809a;
    border-radius:8px;
    font-size:13px;
    font-weight:800
}

.role-tabs a.active{
    background:#1b2740;
    color:#fff
}

.alert{
    border-radius:10px;
    padding:11px 13px;
    margin:15px 0;
    font-size:13px
}

.alert.error{
    background:#4c1724;
    color:#fecdd3
}

.alert.success{
    background:#123923;
    color:#bbf7d0
}

.dev-box{
    margin-top:16px;
    padding:13px;
    border:1px dashed #475569;
    border-radius:12px;
    background:#09101c
}

.dev-box a,
.dev-box small{
    display:block;
    margin-top:7px;
    word-break:break-all
}

.auth-bottom{
    text-align:center;
    color:var(--muted);
    font-size:14px;
    margin-bottom:0
}


/* =========================================================
   DASHBOARD
========================================================= */

.dashboard{
    min-height:100vh;
    background:#080d17
}


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

.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:250px;
    background:#0b1220;
    border-right:1px solid #ffffff0d;
    padding:22px 14px;
    z-index:10
}

.side-brand{
    display:flex;
    gap:10px;
    align-items:center;
    padding:0 10px 24px;
    font-weight:900
}

.side-nav a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 13px;
    border-radius:10px;
    color:#8292aa;
    margin:4px 0;
    font-size:14px;
    font-weight:700
}

.side-nav a.active,
.side-nav a:hover{
    background:#151f33;
    color:#fff
}


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

.main{
    margin-left:250px;
    min-height:100vh
}


/* =========================================================
   DASHBOARD HEADER
========================================================= */

.dash-top{
    height:78px;
    padding:0 30px;
    border-bottom:1px solid #ffffff0c;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#080d17ee;
    position:sticky;
    top:0;
    z-index:5
}


/* =========================================================
   HEADER RIGHT SIDE
========================================================= */

.header-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px
}


/* =========================================================
   HEADER WALLET
========================================================= */

.header-wallet-mini{
    display:flex;
    align-items:center;
    gap:9px;

    min-height:48px;

    padding:7px 12px;

    border-radius:13px;

    text-decoration:none;

    color:inherit;

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

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

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease
}

.header-wallet-mini:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.14);
    transform:translateY(-1px)
}


/* =========================================================
   WALLET ICON
========================================================= */

.wallet-mini-icon{
    width:35px;
    height:35px;

    flex:0 0 35px;

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

    border-radius:10px;

    font-size:17px;
    font-weight:800;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary2)
    );

    color:#fff;

    box-shadow:0 5px 18px #6d5dfc33
}


/* =========================================================
   WALLET TEXT
========================================================= */

.wallet-mini-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    line-height:1.15
}

.wallet-mini-text small{
    font-size:10px;
    opacity:.55;
    margin-bottom:3px
}

.wallet-mini-text strong{
    font-size:14px;
    font-weight:800;
    color:#fff
}


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

.user-pill{
    display:flex;
    align-items:center;
    gap:10px
}

.profile-link{
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:
        background .2s ease,
        transform .2s ease
}

.profile-link:hover{
    background:rgba(255,255,255,.08);
    transform:translateY(-1px)
}

.profile-user-info{
    display:flex;
    flex-direction:column;
    line-height:1.15
}

.profile-user-info b{
    font-size:13px
}

.profile-user-info small{
    font-size:10px;
    opacity:.55;
    margin-top:3px
}

.profile-edit-icon{
    margin-left:4px;
    font-size:14px;
    opacity:.55
}


/* =========================================================
   AVATAR
========================================================= */

.avatar{
    width:36px;
    height:36px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:linear-gradient(
        135deg,
        #202b44,
        #28385a
    );
    color:#9da7ff;
    font-weight:900
}


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

.content{
    padding:28px
}

.page-title{
    margin:0;
    font-size:26px
}

.sub{
    color:var(--muted);
    margin-top:6px
}


/* =========================================================
   DASHBOARD CARDS
========================================================= */

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

.card{
    background:#0e1726;
    border:1px solid #ffffff0d;
    border-radius:17px;
    padding:20px
}

.card .label{
    color:#8292aa;
    font-size:12px;
    font-weight:800
}

.card .value{
    font-size:28px;
    font-weight:900;
    margin-top:10px
}

.card .hint{
    color:#6ee7b7;
    font-size:12px;
    margin-top:6px
}


/* =========================================================
   GRID
========================================================= */

.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}


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

.table-wrap{
    overflow:auto
}

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

.table th,
.table td{
    padding:13px;
    border-bottom:1px solid #ffffff0b;
    text-align:left;
    font-size:13px;
    white-space:nowrap
}

.table th{
    color:#7e8da4;
    font-size:11px;
    text-transform:uppercase
}


/* =========================================================
   BADGES
========================================================= */

.badge{
    display:inline-block;
    padding:5px 9px;
    border-radius:20px;
    font-size:11px;
    font-weight:800
}

.badge.pending{
    background:#493a0a;
    color:#fde68a
}

.badge.approved{
    background:#103b25;
    color:#86efac
}

.badge.rejected,
.badge.blocked{
    background:#461a25;
    color:#fda4af
}


/* =========================================================
   OTHER
========================================================= */

.inline{
    display:inline
}

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

.actions{
    display:flex;
    gap:7px
}

.panel-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px
}

.panel-title h3{
    margin:0
}

.empty{
    padding:35px;
    text-align:center;
    color:#72829b
}

.mobile-menu{
    display:none
}


/* =========================================================
   RETAILER HEADER
========================================================= */

.retailer-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px
}

.retailer-header-actions{
    display:flex;
    align-items:center;
    gap:12px
}


/* =========================================================
   RESPONSIVE - 900
========================================================= */

@media(max-width:900px){

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

    .hero-card{
        display:none
    }

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

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

    .sidebar{
        width:72px
    }

    .sidebar .side-text{
        display:none
    }

    .side-brand{
        justify-content:center
    }

    .main{
        margin-left:72px
    }

    .side-nav a{
        justify-content:center
    }

    .content{
        padding:20px
    }

    .dash-top{
        padding:0 20px
    }

}


/* =========================================================
   RESPONSIVE - 700
========================================================= */

@media(max-width:700px){

    .header-right{
        gap:6px
    }

    .wallet-mini-text{
        display:none
    }

    .header-wallet-mini{
        padding:6px;
        min-height:auto
    }

    .wallet-mini-icon{
        width:36px;
        height:36px;
        flex-basis:36px
    }

    .profile-user-info{
        display:none
    }

    .profile-edit-icon{
        display:none
    }

}


/* =========================================================
   RESPONSIVE - 600
========================================================= */

@media(max-width:600px){

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

    .form-row{
        grid-template-columns:1fr
    }

    .hero{
        padding:40px 20px
    }

    .hero h1{
        font-size:44px
    }

    .hero-actions{
        flex-direction:column
    }

    .main{
        margin-left:0
    }

    .sidebar{
        display:none
    }

    .mobile-menu{
        display:block
    }

    .auth-card{
        padding:22px
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .dash-heading .muted{
        display:none
    }

    .dash-top{
        padding:0 14px
    }

    .content{
        padding:15px
    }

    .header-wallet-mini{
        border-radius:10px
    }

    .avatar{
        width:34px;
        height:34px
    }

}