body.metronic-auth-page,
.tabler-auth.login-body.metronic-auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    color: #181c32;
    background:
        radial-gradient(circle at 12% 12%, rgba(62, 151, 255, .32), transparent 31%),
        radial-gradient(circle at 48% 88%, rgba(114, 57, 234, .13), transparent 28%),
        linear-gradient(135deg, #111318 0%, #151c2d 52%, #15233c 100%) fixed !important;
    font-family: Inter, Helvetica, sans-serif;
}

.metronic-auth-page .login-page {
    box-sizing: border-box;
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(16px, 3vmin, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent;
}

.metronic-auth-page .login-page::before {
    content: none;
}

.metronic-auth-page .login-network-art {
    position: fixed;
    z-index: 1;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: .48;
}

.metronic-auth-page .login-network-art::before,
.metronic-auth-page .login-network-art::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
}

.metronic-auth-page .login-network-art::before {
    top: 9%;
    right: 8%;
    width: 240px;
    height: 240px;
    background: rgba(62, 151, 255, .08);
    animation: auth-orb-drift 8s ease-in-out infinite alternate;
}

.metronic-auth-page .login-network-art::after {
    bottom: 7%;
    left: 10%;
    width: 190px;
    height: 190px;
    background: rgba(114, 57, 234, .09);
    animation: auth-orb-drift 10s ease-in-out -3s infinite alternate-reverse;
}

.metronic-auth-page .login-network-art svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.metronic-auth-page .login-network-line {
    fill: none;
    stroke: rgba(112, 178, 255, .5);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 7 13;
    vector-effect: non-scaling-stroke;
    animation: auth-network-flow 14s linear infinite;
}

.metronic-auth-page .login-network-line-b { animation-duration: 18s; animation-direction: reverse; }
.metronic-auth-page .login-network-line-c { stroke: rgba(143, 112, 255, .38); animation-duration: 21s; }
.metronic-auth-page .login-network-node { fill: #6fb4ff; }
.metronic-auth-page .login-network-node .node-wave { fill: rgba(62, 151, 255, .13); transform-box: fill-box; transform-origin: center; animation: auth-node-pulse 2.8s ease-out infinite; }
.metronic-auth-page .login-network-node.node-b .node-wave,
.metronic-auth-page .login-network-node.node-e .node-wave { animation-delay: -.7s; }
.metronic-auth-page .login-network-node.node-c .node-wave,
.metronic-auth-page .login-network-node.node-f .node-wave { animation-delay: -1.4s; }
.metronic-auth-page .login-network-node.node-d .node-wave,
.metronic-auth-page .login-network-node.node-g .node-wave,
.metronic-auth-page .login-network-node.node-j .node-wave { animation-delay: -2.1s; }
.metronic-auth-page .login-network-node.node-h .node-wave { animation-delay: -.45s; }
.metronic-auth-page .login-network-node.node-i .node-wave { animation-delay: -1.15s; }

.metronic-auth-page .login-shell {
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    width: min(560px, 100%);
    min-height: min(760px, calc(100vh - 64px));
    min-height: min(760px, calc(100dvh - 64px));
    margin: 0;
    padding: clamp(30px, 5vh, 52px) clamp(28px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 16px;
    background: rgba(255, 255, 255, .985);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .65) inset;
    animation: auth-card-enter .65s cubic-bezier(.2, .8, .2, 1) both;
}

.metronic-auth-page .login-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: -45%;
    width: 42%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3e97ff, #7657e8, transparent);
    animation: auth-accent-sweep 5s ease-in-out 1s infinite;
}

.metronic-auth-page .login-brand {
    width: clamp(88px, 12vh, 118px);
    height: clamp(88px, 12vh, 118px);
    min-height: clamp(88px, 12vh, 118px);
    margin: 0 auto clamp(16px, 2.5vh, 22px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.metronic-auth-page .login-brand img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    object-fit: contain;
    transform: none;
    filter: drop-shadow(0 9px 14px rgba(28, 42, 120, .14));
    animation: auth-logo-float 4s ease-in-out infinite;
}

.metronic-auth-page .login-card { width: 100%; max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.metronic-auth-page .login-card-header { margin-bottom: clamp(20px, 3vh, 27px); text-align: center; }
.metronic-auth-page .login-card-header h1 { margin: 0; color: #181c32; font-size: clamp(23px, 2.1vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.metronic-auth-page .login-card-header::after { content: "Masuk untuk mengelola seluruh operasional dalam satu ruang kerja."; max-width: 390px; margin: 8px auto 0; display: block; color: #99a1b7; font-size: 14px; font-weight: 500; line-height: 1.55; }
.metronic-auth-page .login-form { gap: clamp(15px, 2.1vh, 18px); }
.metronic-auth-page .login-field { margin-bottom: 0; }
.metronic-auth-page .login-field label { margin-bottom: 8px; color: #252f4a; font-size: 13px; font-weight: 600; }
.metronic-auth-page .login-control { min-height: 48px; border: 1px solid #dbdfe9; border-radius: .475rem; background: #fff; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.metronic-auth-page .login-control:focus-within { border-color: #3e97ff; box-shadow: 0 0 0 3px rgba(62, 151, 255, .12); transform: translateY(-1px); }
.metronic-auth-page .login-control input { color: #252f4a; background: transparent; }
.metronic-auth-page .login-control svg { color: #99a1b7; }
.metronic-auth-page .login-password-toggle { color: #3e97ff; }
.metronic-auth-page .login-remember-option { margin: 0; color: #78829d; }
.metronic-auth-page .login-submit { min-height: 48px; border: 0; border-radius: .475rem; background: linear-gradient(100deg, #3e97ff, #287fec); box-shadow: 0 9px 22px rgba(62, 151, 255, .22); }
.metronic-auth-page .login-submit:hover { background: linear-gradient(100deg, #318cf4, #1e72dc); box-shadow: 0 12px 28px rgba(62, 151, 255, .3); transform: translateY(-1px); }
.metronic-auth-page .login-download-link { margin-top: clamp(16px, 2.4vh, 21px); color: #78829d; font-weight: 600; }
.metronic-auth-page .login-download-link:hover { color: #3e97ff; }
.metronic-auth-page .login-copyright { margin-top: clamp(20px, 3vh, 30px); color: #a1a5b7; }
.metronic-auth-page .login-version { margin-left: 8px; padding-left: 9px; border-left: 1px solid #dfe3eb; color: #78829d; font-weight: 650; }

@keyframes auth-card-enter {
    from { opacity: 0; transform: translateX(28px) scale(.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes auth-network-flow { to { stroke-dashoffset: -200; } }

@keyframes auth-node-pulse {
    0%, 100% { opacity: .25; transform: scale(.65); }
    50% { opacity: 1; transform: scale(1.35); }
}

@keyframes auth-logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes auth-orb-drift {
    from { transform: translate3d(-20px, 10px, 0) scale(.9); }
    to { transform: translate3d(34px, -26px, 0) scale(1.12); }
}

@keyframes auth-accent-sweep {
    0%, 15% { left: -45%; }
    55%, 100% { left: 110%; }
}

@media (max-width: 991.98px) {
    .metronic-auth-page .login-page { justify-content: center; padding: clamp(14px, 3vmin, 24px); }
    .metronic-auth-page .login-page::before,
    .metronic-auth-page .login-network-art { display: none; }
    .metronic-auth-page .login-shell {
        width: min(560px, 100%);
        min-height: min(720px, calc(100dvh - 40px));
        padding: clamp(28px, 5vh, 44px) clamp(24px, 6vw, 44px);
    }
}

@media (max-width: 575.98px) {
    .metronic-auth-page .login-page { padding: 0; align-items: stretch; }
    .metronic-auth-page .login-shell {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding: clamp(22px, 5vh, 32px) clamp(18px, 6vw, 24px);
        border-radius: 0;
    }
    .metronic-auth-page .login-brand { width: 88px; height: 88px; min-height: 88px; margin-bottom: 16px; }
    .metronic-auth-page .login-card-header h1 { font-size: clamp(22px, 7vw, 24px); }
    .metronic-auth-page .login-card-header::after { font-size: 13px; }
}

@media (max-height: 760px) and (min-width: 576px) {
    .metronic-auth-page .login-page { padding: 12px; }
    .metronic-auth-page .login-shell {
        width: min(520px, 100%);
        min-height: 0;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 22px 38px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .metronic-auth-page .login-brand { width: 76px; height: 76px; min-height: 76px; margin-bottom: 12px; }
    .metronic-auth-page .login-card-header { margin-bottom: 17px; }
    .metronic-auth-page .login-card-header h1 { font-size: 23px; }
    .metronic-auth-page .login-card-header::after { margin-top: 5px; font-size: 12px; line-height: 1.4; }
    .metronic-auth-page .login-form { gap: 13px; }
    .metronic-auth-page .login-field label { margin-bottom: 6px; }
    .metronic-auth-page .login-control,
    .metronic-auth-page .login-submit { min-height: 44px; }
    .metronic-auth-page .login-control input { height: 42px; }
    .metronic-auth-page .login-download-link { margin-top: 13px; }
    .metronic-auth-page .login-copyright { margin-top: 15px; }
}

@media (max-height: 620px) and (min-width: 576px) {
    .metronic-auth-page .login-shell { justify-content: flex-start; padding-top: 18px; padding-bottom: 18px; }
    .metronic-auth-page .login-brand { width: 58px; height: 58px; min-height: 58px; margin-bottom: 8px; }
    .metronic-auth-page .login-card-header { margin-bottom: 12px; }
    .metronic-auth-page .login-card-header::after { display: none; }
    .metronic-auth-page .login-form { gap: 10px; }
    .metronic-auth-page .login-download-link { margin-top: 10px; }
    .metronic-auth-page .login-copyright { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .metronic-auth-page .login-page::before,
    .metronic-auth-page .login-shell,
    .metronic-auth-page .login-shell::before,
    .metronic-auth-page .login-brand img,
    .metronic-auth-page .login-network-line,
    .metronic-auth-page .login-network-node .node-wave,
    .metronic-auth-page .login-network-art::before,
    .metronic-auth-page .login-network-art::after {
        animation: none !important;
    }
}