body#kt_body {
    background: #0d2038;
}

.login-background {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%, #174c62 0%, transparent 65%), #0d2038;
}

.login-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#ffffff06 1px, transparent 1px),
        linear-gradient(90deg, #ffffff06 1px, transparent 1px);
    background-size: 64px 64px;
    animation: login-grid 8s linear infinite;
}

.login-background::before {
    content: '';
    position: absolute;
    width: 45vmax;
    height: 45vmax;
    top: 15%;
    left: -10%;
    border: 1px solid #62dded50;
    border-radius: 38% 62% 65% 35%;
    box-shadow: 0 0 70px #44d7db15, inset 0 0 70px #44d7db15;
    animation: login-ring 18s linear infinite;
}

.login-orb {
    position: absolute;
    width: 65vmax;
    height: 65vmax;
    border-radius: 50%;
    opacity: .85;
    animation: login-drift 8s ease-in-out infinite alternate;
}

.login-orb-one {
    top: -35vmax;
    left: -15vmax;
    background: radial-gradient(circle, #267d9a 0%, transparent 68%);
}

.login-orb-two {
    bottom: -35vmax;
    right: -20vmax;
    background: radial-gradient(circle, #26b5a4 0%, transparent 68%);
    animation-duration: 10s;
    animation-delay: -12s;
}

.login-orb-three {
    top: 10%;
    right: -30vmax;
    background: radial-gradient(circle, #4267aa 0%, transparent 68%);
    animation-duration: 12s;
    animation-delay: -8s;
}

#kt_app_root {
    position: relative;
}

.login-panel {
    max-width: 490px;
}

.login-card {
    background: linear-gradient(155deg, #fff 55%, #eef8fc);
    border: 1px solid #ffffff80;
    border-radius: 24px;
    box-shadow: 0 24px 80px #00000040;
}

.login-card .form-control {
    min-height: 54px;
    border-radius: 12px;
    border: 1px solid #dce5ee;
    background: #f4f7fb !important;
    padding: 14px 16px;
    color: #16304c;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.login-card label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #344c65;
}

.login-card .login-logo {
    width: 100%;
    max-width: 250px;
    height: auto;
}

.login-card .login-heading {
    margin-top: 28px;
    margin-bottom: 28px;
}

.login-card .login-heading h1 {
    font-size: 28px;
    letter-spacing: -.7px;
}

.login-card .login-heading p {
    color: #63788f;
    margin-bottom: 0;
}

.login-card .form-control:focus {
    border-color: #268d9e;
    box-shadow: 0 0 0 3px #268d9e20;
}

.login-card button[type='submit'] {
    min-height: 54px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(110deg, #0753b8, #087e9b) !important;
    box-shadow: 0 8px 20px #0753b825;
    font-weight: 600;
    transition: transform .2s, box-shadow .2s;
}

.login-card button[type='submit']:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px #0753b835;
}

@keyframes login-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(22vmax, 12vmax, 0) scale(1.3); }
}

@keyframes login-grid {
    to { background-position: 64px 64px; }
}

@keyframes login-ring {
    to { transform: translate(35vw, 10vh) rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
    .login-orb,
    .login-background::before,
    .login-background::after { animation: none; }
    .login-card button[type='submit'] { transition: none; transform: none; }
}

@media (max-width: 575.98px) {
    .login-card { border-radius: 18px; }
    .login-card > .card-body > .p-4 { padding: 8px !important; }
}