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

:root {

    --blue:
        #0d6efd;

    --blue-dark:
        #084298;

    --blue-light:
        #eaf3ff;

    --text:
        #1f2937;

    --muted:
        #718096;

    --white:
        #ffffff;

}

* {
    box-sizing: border-box;
}

body {

    margin: 0;

    font-family:
        'Inter',
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #f4f8ff,
            #eef5ff
        );

    color: var(--text);

}

.sidebar {

    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: 260px;

    padding: 25px 16px;

    background:
        linear-gradient(
            180deg,
            #0d6efd 0%,
            #084298 100%
        );

    box-shadow:
        10px 0 35px
        rgba(13,110,253,.15);

    z-index: 1000;

}

.brand {

    color: white;

    font-size: 21px;

    font-weight: 800;

    padding:
        10px 15px
        30px;

}

.brand i {

    margin-right: 8px;

}

.brand span {

    display: block;

    font-size: 11px;

    font-weight: 400;

    opacity: .7;

    margin-top: 5px;

}

.sidebar a {

    display: flex;

    align-items: center;

    gap: 13px;

    color: rgba(
        255,
        255,
        255,
        .82
    );

    text-decoration: none;

    padding: 13px 15px;

    margin: 5px 0;

    border-radius: 13px;

    transition:
        all .3s ease;

}

.sidebar a:hover,
.sidebar a.active {

    color: white;

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

    transform:
        translateX(5px);

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.08);

}

.content {

    margin-left: 260px;

    padding: 30px;

    min-height: 100vh;

}

.topbar {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

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

    backdrop-filter:
        blur(20px);

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

    padding: 20px 25px;

    border-radius: 20px;

    margin-bottom: 25px;

    animation:
        slideDown .6s ease;

}

.topbar h4 {

    font-weight: 800;

    margin: 0;

}

.topbar p {

    color: var(--muted);

    margin: 5px 0 0;

}

.plan-badge,
.admin-badge {

    background:
        var(--blue);

    color: white;

    padding:
        8px 15px;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;

}

.stat-card {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 25px;

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

    border-radius: 20px;

    box-shadow:
        0 15px 40px
        rgba(
            13,
            110,
            253,
            .08
        );

    transition:
        all .35s ease;

    animation:
        fadeUp .7s ease both;

}

.stat-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 50px
        rgba(
            13,
            110,
            253,
            .15
        );

}

.stat-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    color: var(--blue);

    background:
        var(--blue-light);

    font-size: 24px;

}

.stat-card span {

    color: var(--muted);

    font-size: 13px;

}

.stat-card h3 {

    margin: 5px 0 0;

    font-weight: 800;

}

.panel {

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

    border-radius: 22px;

    padding: 28px;

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

    animation:
        fadeUp .8s ease;

}

.membership-panel {

    color: white;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #084298
        );

}

.membership-panel i {

    font-size: 30px;

}

.quick-action {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 18px;

    text-decoration: none;

    color: var(--text);

    background:
        #f7faff;

    border-radius: 15px;

    transition: .3s;

}

.quick-action:hover {

    background:
        var(--blue);

    color: white;

    transform:
        scale(1.03);

}

.btn-primary {

    border: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #084298
        );

    box-shadow:
        0 8px 20px
        rgba(
            13,
            110,
            253,
            .2
        );

}

.btn-primary:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(
            13,
            110,
            253,
            .3
        );

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

@keyframes slideDown {

    from {

        opacity: 0;

        transform:
            translateY(-20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

@media(max-width:900px) {

    .sidebar {

        width: 75px;

    }

    .brand {

        font-size: 0;

        text-align: center;

    }

    .brand i {

        font-size: 23px;

        margin: 0;

    }

    .brand span {

        display: none;

    }

    .sidebar a span {

        display: none;

    }

    .sidebar a {

        justify-content: center;

    }

    .content {

        margin-left: 75px;

        padding: 18px;

    }

}

@media(max-width:600px) {

    .content {

        padding: 12px;

    }

    .topbar {

        padding: 17px;

    }

}