*{

            margin:0;
            padding:0;
            box-sizing:border-box;

        }

        body{

            font-family:Inter,sans-serif;
            background:#F8FAFC;
            color:#0F172A;

        }

        html{

            scroll-behavior:smooth;

        }

        /* ==========================
                GLOBAL
        =========================== */

        .page-wrapper{

            display:flex;

            min-height:100vh;

        }

        .main-content{

            flex:1;

            margin-left:290px;

            transition:.3s;

        }

        .content{

            padding:32px;

        }

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

        .dashboard-card{

            background:#fff;

            border:1px solid #EEF2F7;

            border-radius:22px;

            box-shadow:

            0 2px 6px rgba(15,23,42,.03),

            0 12px 32px rgba(15,23,42,.04);

            transition:.25s;

        }

        .dashboard-card:hover{

            transform:translateY(-2px);

            box-shadow:

            0 12px 40px rgba(15,23,42,.08);

        }

        /* ==========================
            ICON BOX
        =========================== */

        .icon-box{

            width:56px;

            height:56px;

            border-radius:18px;

            display:flex;

            align-items:center;

            justify-content:center;

            background:#EFF6FF;

        }

        .icon-box svg{

            width:24px;

            height:24px;

            color:#2563EB;

        }

        /* ==========================
                TITLE
        =========================== */

        .section-title{

            font-size:30px;

            font-weight:700;

            color:#0F172A;

        }

        .section-subtitle{

            margin-top:5px;

            color:#64748B;

        }

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

        .btn-primary-custom{

            background:#2563EB;

            color:white;

            border:none;

            border-radius:14px;

            padding:12px 20px;

            font-weight:600;

            transition:.25s;

        }

        .btn-primary-custom:hover{

            background:#1D4ED8;

        }

        .btn-secondary-custom{

            background:white;

            border:1px solid #E5E7EB;

            border-radius:14px;

            padding:12px 20px;

            transition:.25s;

        }

        .btn-secondary-custom:hover{

            background:#F8FAFC;

        }

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

        .input-modern{

            height:48px;

            border-radius:999px;

            border:1px solid #E5E7EB;

            background:white;

            padding:0 20px;

            outline:none;

            transition:.25s;

        }

        .input-modern:focus{

            border-color:#2563EB;

            box-shadow:

            0 0 0 4px rgba(37,99,235,.08);

        }

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

        ::-webkit-scrollbar{

            width:7px;

        }

        ::-webkit-scrollbar-thumb{

            background:#CBD5E1;

            border-radius:50px;

        }

        ::-webkit-scrollbar-track{

            background:transparent;

        }

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

        @media(max-width:1024px){

            .main-content{

                margin-left:0;

            }

            .content{

                padding:20px;

            }

        }
.status{

    display:inline-flex;

    align-items:center;

    padding:6px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

.success{

    background:#DCFCE7;

    color:#15803D;

}

.warning{

    background:#FEF3C7;

    color:#B45309;

}

.danger{

    background:#FEE2E2;

    color:#B91C1C;

}

table{

    border-collapse:collapse;

}

tbody tr{

    transition:.25s;

}

tbody tr:hover{

    background:#F8FAFC;

}
.profile-item{

display:flex;

align-items:center;

gap:14px;

height:48px;

padding:0 14px;

border-radius:14px;

cursor:pointer;

transition:.2s;

font-weight:500;

}

.profile-item:hover{

background:#F8FAFC;

}

.modal-box{

border:1px solid #EEF2F7;

box-shadow:

0 20px 50px rgba(0,0,0,.08);

}

#toast{

animation:toast .35s;

}

@keyframes toast{

from{

opacity:0;

transform:translateY(-20px);

}

to{

opacity:1;

transform:none;

}

}
.command-item{

    display:flex;

    align-items:center;

    gap:14px;

    height:54px;

    padding:0 16px;

    border-radius:16px;

    transition:.2s;

    cursor:pointer;

}

.command-item:hover{

    background:#F8FAFC;

}

.command-item svg{

    width:20px;

    height:20px;

    color:#64748B;

}