@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{

    background:
    radial-gradient(circle at top left,#2a2a2a 0%,#171717 30%,#0f0f0f 100%);

    color:#f5f5f5;

    min-height:100vh;

    display:flex;

    overflow-x:hidden;
}

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

.sidebar{

    width:270px;

    height:100vh;

    position:fixed;

    left:0;
    top:0;

    padding:30px 22px;

    background:
    rgba(20,20,20,0.85);

    backdrop-filter:blur(18px);

    border-right:
    1px solid rgba(255,255,255,0.05);

    box-shadow:
    0 0 40px rgba(0,0,0,0.5);

    z-index:999;
}

.sidebar h2{

    text-align:center;

    font-size:30px;

    margin-bottom:45px;

    font-weight:700;

    letter-spacing:1px;
}

.sidebar a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 18px;

    margin-bottom:14px;

    border-radius:18px;

    text-decoration:none;

    color:#b4b4b8;

    transition:0.35s;

    font-size:15px;

    position:relative;

    overflow:hidden;
}

.sidebar a::before{

    content:'';

    position:absolute;

    left:-100%;

    top:0;

    width:100%;
    height:100%;

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

    transition:0.5s;
}

.sidebar a:hover::before{

    left:100%;
}

.sidebar a:hover{

    background:#27272a;

    color:white;

    transform:translateX(7px);

    box-shadow:
    0 10px 25px rgba(0,0,0,0.3);
}

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

.main{

    margin-left:270px;

    width:100%;

    padding:40px;
}

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

.header{

    margin-bottom:35px;
}

.header h1{

    font-size:42px;

    font-weight:700;

    margin-bottom:10px;

    background:
    linear-gradient(to right,#ffffff,#8f8f8f);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.header p{

    color:#9f9fa9;

    font-size:15px;
}

/* ======================
   CARD
====================== */

.card{

    background:
    rgba(24,24,27,0.85);

    border:
    1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    padding:30px;

    backdrop-filter:blur(15px);

    box-shadow:
    0 15px 40px rgba(0,0,0,0.45);

    transition:0.4s;
}

.card:hover{

    transform:translateY(-3px);
}

/* ======================
   STATS
====================== */

.stats{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(230px,1fr));

    gap:22px;

    margin-bottom:35px;
}

.stat-card{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    145deg,
    rgba(35,35,35,0.95),
    rgba(20,20,20,0.95)
    );

    border:
    1px solid rgba(255,255,255,0.04);

    border-radius:28px;

    padding:28px;

    transition:0.4s;

    box-shadow:
    0 15px 35px rgba(0,0,0,0.35);
}

.stat-card::before{

    content:'';

    position:absolute;

    width:180px;
    height:180px;

    background:
    rgba(255,255,255,0.03);

    border-radius:50%;

    top:-70px;
    right:-70px;
}

.stat-card:hover{

    transform:
    translateY(-8px)
    scale(1.02);
}

.stat-card h2{

    font-size:38px;

    margin-bottom:18px;
}

.stat-card h1{

    font-size:34px;

    margin-bottom:6px;
}

.stat-card p{

    color:#9f9fa9;
}

/* ======================
   INPUT
====================== */

input,
select{

    width:100%;

    padding:16px;

    margin-top:15px;

    background:#202024;

    border:
    1px solid transparent;

    border-radius:18px;

    color:white;

    outline:none;

    transition:0.3s;

    font-size:14px;
}

input:focus,
select:focus{

    border:
    1px solid rgba(255,255,255,0.1);

    background:#26262b;

    box-shadow:
    0 0 0 4px rgba(255,255,255,0.03);
}

/* ======================
   BUTTON
====================== */

button,
.btn{

    display:inline-block;

    margin-top:18px;

    padding:14px 24px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #3f3f46,
    #52525b
    );

    color:white;

    text-decoration:none;

    font-size:14px;

    font-weight:500;

    cursor:pointer;

    transition:0.35s;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.35);
}

button:hover,
.btn:hover{

    transform:
    translateY(-3px)
    scale(1.02);

    background:
    linear-gradient(
    135deg,
    #52525b,
    #71717a
    );
}

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

table{

    width:100%;

    margin-top:25px;

    border-collapse:separate;

    border-spacing:0 12px;
}

table th{

    text-align:left;

    padding:16px;

    color:#a1a1aa;

    font-size:13px;

    font-weight:500;
}

table td{

    background:#1c1c1f;

    padding:18px;

    color:#f5f5f5;
}

table tr td:first-child{

    border-radius:18px 0 0 18px;
}

table tr td:last-child{

    border-radius:0 18px 18px 0;
}

table tr{

    transition:0.3s;
}

table tr:hover{

    transform:scale(1.01);
}

table img{

    border-radius:16px;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.35);
}

/* ======================
   LOGIN
====================== */

.login-box{

    width:430px;

    margin:auto;

    padding:45px;

    border-radius:35px;

    background:
    rgba(20,20,20,0.85);

    border:
    1px solid rgba(255,255,255,0.05);

    backdrop-filter:blur(20px);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.45);

    animation:fade 0.7s ease;
}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(20px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

/* ======================
   SCROLLBAR
====================== */

::-webkit-scrollbar{

    width:8px;
}

::-webkit-scrollbar-track{

    background:#111;
}

::-webkit-scrollbar-thumb{

    background:#3f3f46;

    border-radius:20px;
}

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

@media(max-width:900px){

    .sidebar{

        width:100%;

        height:auto;

        position:relative;
    }

    .main{

        margin-left:0;

        padding:25px;
    }

    body{

        display:block;
    }

    .stats{

        grid-template-columns:1fr;
    }

    .header h1{

        font-size:32px;
    }
}