:root{--cg-purple:#5c2a9d;--cg-dark:#161616;--cg-light:#f6f3fb;--cg-yellow:#ffd54a}
body{background:#faf9fc;color:#171717}.bg-purple{background:linear-gradient(135deg,#5c2a9d,#7c4dd7)!important}.footer-site{background:#fff;border-top:1px solid #ece8f4}.hero-section{background:radial-gradient(circle at top right,#8c66da 0,#5c2a9d 35%,#2c1848 100%);color:#fff}.hero-card{background:#fff}.metric-card{background:#f8f5ff;border:1px solid #eee5ff;padding:1rem;border-radius:1rem;height:100%}.table>:not(caption)>*>*{padding:.9rem .85rem}



.login-section {
    background: linear-gradient(180deg, #f7f1ff 0%, #ffffff 100%);
}

.login-card {
    border-top: 6px solid #5b2a86 !important;
}

.password-wrap {
    position: relative;
}

.password-wrap .form-control {
    padding-right: 3.2rem;
}

.btn-toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #5b2a86;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.btn-toggle-password:hover {
    color: #3f1c63;
}

.btn-login-main {
    background: #f6c945;
    border-color: #f6c945;
    color: #3a2a00;
    font-weight: 700;
}

.btn-login-main:hover {
    background: #e8bb32;
    border-color: #e8bb32;
    color: #3a2a00;
}

.btn-outline-purple {
    border: 1px solid #5b2a86;
    color: #5b2a86;
    font-weight: 600;
}

.btn-outline-purple:hover {
    background: #5b2a86;
    color: #fff;
}