:root {
    --auth-primary: #7367f0;
    --auth-primary-dark: #5e50ee;
    --auth-accent: #28c76f;
    --auth-ink: #1f2937;
    --auth-muted: #6b7280;
    --auth-border: #e6e8ef;
    --auth-soft: #f6f7fb;
}

body {
    font-family: "Tajawal", Tahoma, "Segoe UI", Arial, sans-serif;
    background: var(--auth-soft);
}

.auth-shell {
    background: linear-gradient(135deg, #fbfbff, #f3f4fb) !important;
}

.auth-visual {
    background-image:
        linear-gradient(135deg, rgba(37, 30, 112, .82), rgba(115, 103, 240, .42)),
        url("../../assets/images/banner.jpg") !important;
}

.auth-visual-content {
    background: rgba(31, 28, 82, .58) !important;
    border-color: rgba(255, 255, 255, .2) !important;
}

.auth-visual-list i {
    color: #c7f48b !important;
}

.auth-card {
    border-color: var(--auth-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 22px 60px rgba(31, 41, 55, .12) !important;
}

.auth-input {
    border-color: var(--auth-border) !important;
}

.auth-input:focus {
    border-color: var(--auth-primary) !important;
    box-shadow: 0 0 0 4px rgba(115, 103, 240, .14) !important;
}

.auth-submit {
    background: linear-gradient(135deg, var(--auth-primary), var(--auth-primary-dark)) !important;
    box-shadow: 0 14px 30px rgba(115, 103, 240, .28) !important;
}

.auth-link,
.auth-switch a {
    color: var(--auth-primary-dark) !important;
}