body.login-page,
body.login-page * {
    box-sizing: border-box;
}

body.login-page {
    --primary: #2563EB;
    --secondary: #1E3A8A;
    --detail: #60A5FA;
    --dark-text: #111827;
    --light-gray: #E5E7EB;
    --white: #FFFFFF;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background:
        linear-gradient(105deg, rgba(2, 6, 23, .98) 0%, rgba(5, 18, 47, .94) 34%, rgba(17, 48, 103, .72) 56%, rgba(2, 6, 23, .5) 100%),
        var(--login-bg) right center / cover no-repeat fixed,
        #020617;
    color: var(--dark-text);
    font-family: Inter, Poppins, "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
}

body.login-page::before,
body.login-page::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body.login-page::before {
    z-index: 0;
    background:
        radial-gradient(circle at 68% 49%, rgba(96, 165, 250, .34) 0 2px, transparent 3px),
        radial-gradient(circle at 64% 47%, rgba(96, 165, 250, .2), transparent 0 15%),
        linear-gradient(90deg, rgba(2, 6, 23, .84) 0%, rgba(15, 23, 42, .58) 38%, rgba(30, 58, 138, .16) 68%, rgba(2, 6, 23, .58) 100%);
}

body.login-page::after {
    z-index: 1;
    background:
        radial-gradient(circle at 18% 95%, rgba(37, 99, 235, .28), transparent 0 13%),
        linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 18%, rgba(0, 0, 0, .28));
    mix-blend-mode: screen;
    opacity: .78;
}

body.login-page .login-ambient {
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

body.login-page .glow {
    position: absolute;
    display: block;
    border-radius: 999px;
    filter: blur(12px);
}

body.login-page .glow-primary {
    right: 26%;
    top: 44%;
    width: 18px;
    height: 18px;
    background: #7dd3fc;
    box-shadow: 0 0 28px 14px rgba(96, 165, 250, .48), 0 0 90px 42px rgba(37, 99, 235, .3);
}

body.login-page .glow-secondary {
    left: 10%;
    bottom: 6%;
    width: 22px;
    height: 22px;
    background: rgba(96, 165, 250, .54);
    box-shadow: 0 0 84px 46px rgba(37, 99, 235, .32);
}

body.login-page .analytics {
    position: absolute;
    bottom: 0;
    width: clamp(64px, 6.5vw, 96px);
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, rgba(96, 165, 250, .17), rgba(37, 99, 235, .04));
    border: 1px solid rgba(96, 165, 250, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.login-page .analytics-one {
    right: 38%;
    height: 28%;
}

body.login-page .analytics-two {
    right: 30%;
    height: 40%;
}

body.login-page .analytics-three {
    right: 22%;
    height: 34%;
}

body.login-page .analytics-curve {
    position: absolute;
    left: 8%;
    bottom: 10%;
    width: 66%;
    height: 48%;
    border-top: 4px solid rgba(147, 197, 253, .3);
    border-radius: 50% 50% 0 0;
    transform: rotate(-10deg);
    filter: drop-shadow(0 0 10px rgba(96, 165, 250, .28));
}

body.login-page .center {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: 24px;
}

body.login-page .card {
    width: min(420px, 100%);
    padding: 30px 32px 28px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    background: #f3f4f6;
    box-shadow:
        0 26px 76px rgba(2, 6, 23, .38),
        0 0 0 1px rgba(255, 255, 255, .72) inset,
        0 16px 36px rgba(30, 58, 138, .12);
    animation: loginCardIn .55s ease-out both;
}

body.login-page .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 16px;
}

body.login-page .brand-logo {
    display: block;
    width: min(188px, 72%);
    height: auto;
    object-fit: contain;
}

body.login-page .card-rule {
    height: 1px;
    margin: 0 0 20px;
    background: linear-gradient(90deg, transparent, rgba(30, 58, 138, .24), transparent);
}

body.login-page h1 {
    margin: 0 0 14px;
    color: var(--dark-text);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
}

body.login-page .field {
    margin-bottom: 13px;
}

body.login-page label {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

body.login-page input[type="email"],
body.login-page input[type="password"] {
    width: 100%;
    height: 44px;
    padding: 10px 13px;
    border: 1px solid #cbd8ea;
    border-radius: 8px;
    background: #ffffff;
    color: var(--dark-text);
    font-size: 14px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.login-page input[type="email"]::placeholder,
body.login-page input[type="password"]::placeholder {
    color: #94a3b8;
}

body.login-page input[type="email"]:focus,
body.login-page input[type="password"]:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .13), 0 8px 20px rgba(37, 99, 235, .08);
}

body.login-page .remember-me {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 2px 0 16px;
    color: #475569;
    cursor: pointer;
    user-select: none;
}

body.login-page .remember-me input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

body.login-page .remember-me span {
    font-size: 13px;
    font-weight: 600;
}

body.login-page button {
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), #2f6ef2 52%, var(--secondary));
    color: var(--white);
    box-shadow: 0 12px 24px rgba(37, 99, 235, .25);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

body.login-page button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(37, 99, 235, .34);
    filter: saturate(1.08);
}

body.login-page button:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(30, 58, 138, .22);
}

body.login-page .error {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(220, 38, 38, .18);
    border-radius: 8px;
    background: #fff1f2;
    color: #9f1239;
    font-size: 13px;
    font-weight: 700;
}

body.login-page .muted {
    margin-top: 13px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

body.login-page .footer-rule {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    height: auto;
    margin: 20px 0 12px;
    color: #64748b;
    background: none;
    font-size: 12px;
    font-weight: 700;
}

body.login-page .footer-rule::before,
body.login-page .footer-rule::after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(30, 58, 138, .24));
}

body.login-page .footer-rule::after {
    background: linear-gradient(90deg, rgba(30, 58, 138, .24), transparent);
}

body.login-page .company-brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.login-page .company-logo {
    display: block;
    width: min(172px, 66%);
    height: auto;
    object-fit: contain;
}

body.login-page .muted-left {
    margin-top: 6px;
    text-align: left;
}

body.login-page .access-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    border: 1px solid #d9e1ef;
    border-radius: 8px;
    background: #f3f6fb;
}

body.login-page .access-mode-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.login-page .access-mode-label {
    margin: 0;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #334155;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: all .18s ease;
}

body.login-page .access-mode-input:checked + .access-mode-label {
    border-color: #c7d2fe;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
    font-weight: 700;
}

body.login-page .access-mode-input:focus-visible + .access-mode-label {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

@keyframes loginCardIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    body.login-page .remember-me {
        display: flex;
    }

    body.login-page {
        background:
            linear-gradient(180deg, rgba(2, 6, 23, .9), rgba(15, 23, 42, .84)),
            var(--login-bg) 68% center / cover no-repeat fixed,
            #020617;
    }

    body.login-page .center {
        padding: 18px;
    }

    body.login-page .card {
        width: min(392px, 100%);
        padding: 26px 22px 24px;
    }

    body.login-page .brand-logo {
        width: min(176px, 74%);
    }

    body.login-page .analytics,
    body.login-page .analytics-curve {
        opacity: .46;
    }
}

@media (max-width: 420px) {
    body.login-page .center {
        padding: 14px;
    }

    body.login-page .card {
        padding: 24px 18px 22px;
        border-radius: 16px;
    }

    body.login-page .brand-logo {
        width: min(164px, 78%);
    }

    body.login-page .company-logo {
        width: min(154px, 70%);
    }
}