/* login-custom.css */
body {
    min-height: 100vh;
    background:
        radial-gradient(1200px 500px at 10% 10%, rgba(46, 134, 222, .25), transparent 55%),
        radial-gradient(900px 500px at 90% 20%, rgba(0, 210, 211, .18), transparent 55%),
        radial-gradient(900px 500px at 40% 90%, rgba(155, 89, 182, .12), transparent 55%),
        linear-gradient(180deg, #f6f9ff 0%, #eef3ff 45%, #f7f7ff 100%);
    overflow-x: hidden;
}

.wrapper-page.login-pg { margin: 3rem auto; float: none; }

.login-pg .account-card {
    border-radius: 18px;
    border: 0;
    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.15);
    overflow: hidden;
    position: relative;
    animation: popIn .35s ease-out;
}

@keyframes popIn {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.login-pg .bg-primary {
    background: linear-gradient(135deg, #1e63d0 0%, #00bcd4 55%, #1e63d0 100%) !important;
    position: relative;
    overflow: visible;
    padding-bottom: 2.5rem;
}

.login-pg .bg-primary:before {
    content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
    top: -220px; right: -220px; background: rgba(255,255,255,.18); filter: blur(1px);
    animation: float1 8s ease-in-out infinite; z-index: 1; pointer-events: none;
}

.login-pg .bg-primary:after {
    content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
    bottom: -180px; left: -180px; background: rgba(0,0,0,.10);
    animation: float2 10s ease-in-out infinite; z-index: 1; pointer-events: none;
}

@keyframes float1 { 0%,100% { transform: translate(0,0);} 50% { transform: translate(-18px, 14px);} }
@keyframes float2 { 0%,100% { transform: translate(0,0);} 50% { transform: translate(14px, -16px);} }

.login-title, .bg-primary p { position: relative; z-index: 2; }
.logo.logo-admin { position: relative; z-index: 3; display: inline-block; margin-top: .25rem; }

.account-card-content {
    padding: 1.25rem 1.4rem 1.5rem 1.4rem;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
}

.login-pg .form-control { height: 46px; border-radius: 12px; border: 1px solid rgba(15, 23, 42, .12); transition: all .18s ease; }
.login-pg .form-control:focus { box-shadow: 0 0 0 .18rem rgba(30, 99, 208, .18); border-color: rgba(30, 99, 208, .55); transform: translateY(-1px); }

.login-pg .btn-primary { height: 46px; border-radius: 12px; font-weight: 700; letter-spacing: .2px; box-shadow: 0 10px 22px rgba(30, 99, 208, .22); transition: transform .15s ease, box-shadow .15s ease; }
.login-pg .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 26px rgba(30, 99, 208, .28); }

.toggle-password { cursor: pointer; user-select: none; background: #f8fafc; border: 1px solid rgba(15, 23, 42, .12); border-left: 0; border-top-right-radius: 12px; border-bottom-right-radius: 12px; transition: all .18s ease; width: 48px; display: flex; align-items: center; justify-content: center; }
.input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.hint { font-size: 12px; color: rgba(15, 23, 42, .65); margin-top: 8px; }
.alert { border-radius: 12px; }
.caps-warning { display: none; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 193, 7, .18); color: #6b4b00; font-size: 13px; }

@keyframes spin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }