/* ==========================================================
   DISPLAY
========================================================== */

.d-none{display:none!important;}
.d-block{display:block!important;}
.d-inline{display:inline!important;}
.d-inline-block{display:inline-block!important;}

.flex{display:flex!important;}
.inline-flex{display:inline-flex!important;}

.grid{display:grid!important;}

/* ==========================================================
   FLEX
========================================================== */

.flex-column{flex-direction:column!important;}
.flex-wrap{flex-wrap:wrap!important;}

.items-start{align-items:flex-start!important;}
.items-center{align-items:center!important;}
.items-end{align-items:flex-end!important;}

.justify-start{justify-content:flex-start!important;}
.justify-center{justify-content:center!important;}
.justify-end{justify-content:flex-end!important;}
.justify-between{justify-content:space-between!important;}
.justify-around{justify-content:space-around!important;}

.gap-4{gap:4px!important;}
.gap-8{gap:8px!important;}
.gap-12{gap:12px!important;}
.gap-16{gap:16px!important;}
.gap-20{gap:20px!important;}
.gap-24{gap:24px!important;}
.gap-32{gap:32px!important;}

/* ==========================================================
   WIDTH
========================================================== */

.w-100{width:100%!important;}
.h-100{height:100%!important;}

.max-w-100{max-width:100%!important;}

/* ==========================================================
   MARGIN
========================================================== */

.m-0{margin:0!important;}

.mt-4{margin-top:4px!important;}
.mt-8{margin-top:8px!important;}
.mt-12{margin-top:12px!important;}
.mt-16{margin-top:16px!important;}
.mt-20{margin-top:20px!important;}
.mt-24{margin-top:24px!important;}
.mt-32{margin-top:32px!important;}

.mb-4{margin-bottom:4px!important;}
.mb-8{margin-bottom:8px!important;}
.mb-12{margin-bottom:12px!important;}
.mb-16{margin-bottom:16px!important;}
.mb-20{margin-bottom:20px!important;}
.mb-24{margin-bottom:24px!important;}
.mb-32{margin-bottom:32px!important;}

.ml-auto{margin-left:auto!important;}
.mr-auto{margin-right:auto!important;}

/* ==========================================================
   PADDING
========================================================== */

.p-0{padding:0!important;}
.p-8{padding:8px!important;}
.p-12{padding:12px!important;}
.p-16{padding:16px!important;}
.p-20{padding:20px!important;}
.p-24{padding:24px!important;}
.p-32{padding:32px!important;}

.pt-24{padding-top:24px!important;}
.pb-24{padding-bottom:24px!important;}

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

.text-left{text-align:left!important;}
.text-center{text-align:center!important;}
.text-right{text-align:right!important;}

.text-xs{
    font-size:12px!important;
}

.text-sm{
    font-size:13px!important;
}

.text-md{
    font-size:14px!important;
}

.text-lg{
    font-size:16px!important;
}

.text-xl{
    font-size:20px!important;
}

.font-normal{
    font-weight:400!important;
}

.font-medium{
    font-weight:500!important;
}

.font-semibold{
    font-weight:600!important;
}

.font-bold{
    font-weight:700!important;
}

/* ==========================================================
   COLORS
========================================================== */

.text-primary{
    color:#C9A227!important;
}

.text-success{
    color:#16A34A!important;
}

.text-danger{
    color:#DC2626!important;
}

.text-warning{
    color:#F59E0B!important;
}

.text-muted{
    color:var(--text-muted)!important;
}

.text-dark{
    color:var(--text-strong)!important;
}

/* ==========================================================
   BACKGROUND
========================================================== */

.bg-white{
    background:var(--card)!important;
}

.bg-light{
    background:var(--surface-alt)!important;
}

.bg-success{
    background:#DCFCE7!important;
}

.bg-danger{
    background:#FEE2E2!important;
}

.bg-warning{
    background:#FEF3C7!important;
}

/* ==========================================================
   BORDER
========================================================== */

.rounded{
    border-radius:10px!important;
}

.rounded-lg{
    border-radius:14px!important;
}

.rounded-xl{
    border-radius:18px!important;
}

.shadow-sm{
    box-shadow:0 2px 6px rgba(15,23,42,.05)!important;
}

.shadow{
    box-shadow:0 8px 24px rgba(15,23,42,.08)!important;
}

.border{
    border:1px solid var(--border-alt)!important;
}

/* ==========================================================
   CURSOR
========================================================== */

.pointer{
    cursor:pointer!important;
}

.no-select{
    user-select:none!important;
}

/* ==========================================================
   OVERFLOW
========================================================== */

.overflow-hidden{
    overflow:hidden!important;
}

.overflow-auto{
    overflow:auto!important;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

    .hide-mobile{
        display:none!important;
    }

    .w-mobile{
        width:100%!important;
    }

}

/* ==========================================================
   HELP
========================================================== */

.help-toc{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:20px;
}

.help-toc strong{
    display:block;
    margin-bottom:8px;
    color:var(--text-strong);
}

.help-toc ul{
    margin:0;
    padding-left:18px;
}

.help-toc li{
    margin-bottom:4px;
}

.help-toc a{
    color:var(--text);
    text-decoration:none;
}

.help-toc a:hover{
    color:#C9A227;
    text-decoration:underline;
}

.help-body p{
    margin:0 0 12px;
    line-height:1.6;
}

.help-body ul{
    margin:0;
    padding-left:20px;
}

.help-body li{
    margin-bottom:8px;
    line-height:1.6;
}