:root{
    --app-bg:#f4f7fb;
    --app-surface:#ffffff;
    --app-text:#14213d;
    --app-heading:#0f1f3d;
    --app-muted:#69758b;
    --app-primary:#4f5fd5;
    --app-primary-dark:#3f4daf;
    --app-info:#3f8edb;
    --app-mint:#35aa98;
    --app-success:#2f9b72;
    --app-warning:#d99832;
    --app-danger:#d8586b;
    --app-border:#e2e7f0;
    --app-shadow:0 22px 60px rgba(24,38,79,.14);
}

body.auth-page{
    min-height:100vh;
    color:var(--app-text);
    background:
        radial-gradient(circle at 8% 8%,rgba(79,95,213,.13),transparent 25rem),
        radial-gradient(circle at 92% 88%,rgba(53,170,152,.12),transparent 26rem),
        var(--app-bg) !important;
    font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
}

.auth-page .login-container,
.auth-page .shell,
.auth-page > .container > .card{
    overflow:hidden;
    background:rgba(255,255,255,.97) !important;
    border:1px solid var(--app-border) !important;
    border-radius:22px !important;
    box-shadow:var(--app-shadow) !important;
}

.auth-page .login-left,
.auth-page .side{
    position:relative;
    isolation:isolate;
    color:#fff;
    background:
        radial-gradient(circle at 78% 14%,rgba(102,201,187,.34),transparent 16rem),
        linear-gradient(135deg,#18264f 0%,#35469f 55%,#3f8edb 100%) !important;
}

.auth-page .login-left::after,
.auth-page .side::after{
    content:"";
    position:absolute;
    z-index:-1;
    right:-55px;
    bottom:-75px;
    width:210px;
    height:210px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    box-shadow:0 0 0 34px rgba(255,255,255,.045);
}

.auth-page h1,.auth-page h2,.auth-page h3,.auth-page h4{
    color:var(--app-heading);
    font-weight:800;
    letter-spacing:-.025em;
}

.auth-page .login-left h1,.auth-page .login-left h2,
.auth-page .side h1,.auth-page .side h2{color:#fff;}

.auth-page .login-right,
.auth-page .form-panel{background:#fff !important;}

.auth-page .form-label{color:#34425a;font-weight:700;}
.auth-page .text-muted,.auth-page .muted-note{color:var(--app-muted) !important;}
.auth-page .form-control,.auth-page .form-select{
    min-height:44px;
    color:var(--app-text);
    background:#fbfcff;
    border:1px solid #d9dfeb;
    border-radius:12px !important;
    box-shadow:none;
}
.auth-page .form-control:focus,.auth-page .form-select:focus{
    background:#fff;
    border-color:#99a4e7;
    box-shadow:0 0 0 .22rem rgba(79,95,213,.14);
}
.auth-page .btn{
    min-height:42px;
    border-radius:12px !important;
    font-weight:700;
}
.auth-page .btn-primary,.auth-page .btn-success{
    color:#fff;
    background:var(--app-primary) !important;
    border-color:var(--app-primary) !important;
}
.auth-page .btn-primary:hover,.auth-page .btn-success:hover{
    background:var(--app-primary-dark) !important;
    border-color:var(--app-primary-dark) !important;
}
.auth-page a{color:var(--app-primary-dark);}
.auth-page .card{border-color:var(--app-border) !important;}
.auth-page .alert{border-radius:12px;}

@media(max-width:768px){
    body.auth-page{padding:12px;}
    .auth-page .login-container,.auth-page .shell,.auth-page > .container > .card{border-radius:17px !important;}
    .auth-page .login-left,.auth-page .side{padding:26px !important;}
    .auth-page .login-right,.auth-page .form-panel{padding:26px !important;}
}