/* =========================
🌍 GLOBAL RESET
========================= */

*{

    box-sizing:border-box;
}

html,
body{

    margin:0;
    padding:0;

    overflow-x:hidden;
}

/* =========================
🎨 BODY
========================= */

body{

    background:#f5f7fb;

    color:#111827;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    line-height:1.6;
}

/* =========================
🔗 LINKS
========================= */

a{

    color:inherit;

    text-decoration:none;
}

/* =========================
🖼 IMAGES
========================= */

img{

    max-width:100%;

    display:block;
}

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

button{

    font-family:inherit;
}

/* =========================
🎯 UTILITIES
========================= */

.hidden{

    display:none !important;
}

.flex{

    display:flex;
}

.items-center{

    align-items:center;
}

.justify-between{

    justify-content:space-between;
}

.gap-10{

    gap:10px;
}

.gap-20{

    gap:20px;
}

/* =========================
🧠 TEXT
========================= */

.text-muted{

    color:#6b7280;
}

.text-success{

    color:#16a34a;
}

.text-danger{

    color:#dc2626;
}

.text-warning{

    color:#d97706;
}

/* =========================
📦 SPACING
========================= */

.mt-10{

    margin-top:10px;
}

.mt-20{

    margin-top:20px;
}

.mb-10{

    margin-bottom:10px;
}

.mb-20{

    margin-bottom:20px;
}

/* =========================
🎞 TRANSITIONS
========================= */

.transition{

    transition:.2s ease;
}

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

::-webkit-scrollbar{

    width:10px;
    height:10px;
}

::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:999px;
}

::-webkit-scrollbar-track{

    background:transparent;
}