body.auth-page.login-page {
    min-height:100vh;
    min-height:100dvh;
    color:#17243a;
    background:radial-gradient(ellipse at 50% 34%, #102b52 0%, #081a36 45%, #06122d 100%);
}
body.auth-page.login-page.theme-dark { color:#f5f7fb; background:radial-gradient(ellipse at 50% 34%, #10213d 0%, #09172d 46%, #040d20 100%); }
body.auth-page.login-page.theme-dark .box { color:#f5f7fb; background:#0f1e37; border-color:#263a56; box-shadow:0 24px 70px rgba(0,0,0,.42); }
body.auth-page.login-page.theme-dark .login-kicker { color:#72a6ff; }
body.auth-page.login-page.theme-dark .login-heading h1 { color:#f5f7fb; }
body.auth-page.login-page.theme-dark .login-heading p,
body.auth-page.login-page.theme-dark .box label,
body.auth-page.login-page.theme-dark .register { color:#aab5c5; }
body.auth-page.login-page.theme-dark .box input { color:#f5f7fb; background:#192a40; border-color:#30415a; }
body.auth-page.login-page.theme-dark .box input::placeholder { color:#9eacc0; }
body.auth-page.login-page.theme-dark .box input:focus { border-color:#4387f5; }
body.auth-page.login-page.theme-dark .box .eye { color:#aab5c5; }
body.auth-page.login-page.theme-dark .box .eye:hover { color:#72a6ff; background:#223b5d; }
body.auth-page.login-page.theme-dark .box .credential-mode-toggle { color:#72a6ff; background:#152c4a; border-color:#294568; }
body.auth-page.login-page.theme-dark .box .credential-mode-toggle:hover { background:#1a385d; }
body.auth-page.login-page.theme-dark .credential-mode-note { color:#aab5c5; }
body.auth-page.login-page.theme-dark .links a,
body.auth-page.login-page.theme-dark .register a { color:#72a6ff; }
body.auth-page.login-page.theme-dark .error { color:#ffb4bc; background:#331d2a; border-color:#65313d; }
body.auth-page.login-page.theme-dark .success { color:#a5e6b7; background:#173326; border-color:#28553b; }

body.auth-page.login-page .container {
    width:100%;
    max-width:none;
    min-height:100vh;
    min-height:100dvh;
    height:auto;
    display:grid;
    place-items:center;
    margin:0;
    padding:32px 18px;
}

body.auth-page.login-page .box {
    width:min(100%, 420px);
    padding:clamp(26px, 6vw, 40px);
    color:#17243a;
    background:#fff;
    border:1px solid rgba(255,255,255,.7);
    border-radius:24px;
    box-shadow:0 24px 70px rgba(0,0,0,.28);
}

body.auth-page.login-page .header {
    display:flex;
    min-height:0 !important;
    align-items:center;
    justify-content:center;
    margin:0 0 22px !important;
    padding:0 !important;
    background:transparent !important;
    border-radius:0 !important;
}

body.auth-page.login-page .login-logo-frame {
    width:64px;
    height:64px;
    flex-basis:64px;
    border-radius:18px;
}

body.auth-page.login-page .login-heading { margin-bottom:22px; text-align:center; }
body.auth-page.login-page .login-kicker { color:#1268ee; font-size:12px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
body.auth-page.login-page .login-heading h1 { margin:8px 0 6px; color:#14243c; font-size:clamp(25px, 6vw, 30px); line-height:1.2; letter-spacing:-.035em; }
body.auth-page.login-page .login-heading p { margin:0; color:#68768a; font-size:14px; line-height:1.5; }
body.auth-page.login-page .box form { width:100%; display:flex; flex-direction:column; align-items:stretch; }
body.auth-page.login-page .box label { margin:0 0 7px; color:#34445c; font-size:13px; font-weight:650; }
body.auth-page.login-page .box input {
    width:100%;
    min-height:50px;
    height:50px;
    margin:0 0 18px;
    padding:0 14px;
    color:#17243a;
    background:#f7f9fc;
    border:1px solid #d8e0eb;
    border-radius:12px;
    font-size:15px;
    outline:none;
}
body.auth-page.login-page .box input::placeholder { color:#8793a4; }
body.auth-page.login-page .box input:focus { border-color:#4387f5; box-shadow:0 0 0 3px rgba(18,104,238,.14); }
body.auth-page.login-page .input-group { display:flex; flex-direction:column; }
body.auth-page.login-page .password-field { position:relative; width:100%; }
body.auth-page.login-page .password-field input { padding-right:52px; }
body.auth-page.login-page .box .eye {
    position:absolute;
    top:50%;
    right:8px;
    width:36px;
    min-height:36px;
    height:36px;
    margin:0;
    padding:0;
    display:grid;
    place-items:center;
    color:#758298;
    background:transparent;
    border:0;
    border-radius:9px;
    transform:translateY(-50%);
}
body.auth-page.login-page .box .eye:hover { color:#1268ee; background:#edf3fd; }
body.auth-page.login-page .eye svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body.auth-page.login-page .eye .eye-hide,
body.auth-page.login-page .eye.is-visible .eye-show { display:none; }
body.auth-page.login-page .eye.is-visible .eye-hide { display:block; }
body.auth-page.login-page .box .credential-mode-toggle {
    width:100%;
    min-height:44px;
    height:auto;
    margin:0 0 12px;
    padding:10px 14px;
    color:#1268ee;
    background:#eef4ff;
    border:1px solid #dce8ff;
    border-radius:12px;
    font-size:14px;
    font-weight:650;
}
body.auth-page.login-page .box .credential-mode-toggle:hover { background:#e5edff; }
body.auth-page.login-page .credential-mode-note { margin:0 2px 12px; color:#68768a; }
body.auth-page.login-page .links { justify-content:center; margin:0 0 14px; font-size:13px; }
body.auth-page.login-page .links a,
body.auth-page.login-page .register a { color:#1268ee; font-weight:600; text-decoration:none; }
body.auth-page.login-page .links a:hover,
body.auth-page.login-page .register a:hover { text-decoration:underline; }
body.auth-page.login-page .box button[type="submit"] {
    width:100%;
    min-height:50px;
    height:50px;
    margin:0;
    color:#fff;
    background:#1268ee;
    border:0;
    border-radius:12px;
    font-size:15px;
    font-weight:700;
    transition:background .16s ease, transform .16s ease;
}
body.auth-page.login-page .box button[type="submit"]:hover { background:#0757d4; }
body.auth-page.login-page .box button[type="submit"]:active { transform:translateY(1px); }
body.auth-page.login-page .register { margin-top:18px; color:#68768a; font-size:13px; }
body.auth-page.login-page .error,
body.auth-page.login-page .success { margin:16px 0 0; padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.5; text-align:left; }
body.auth-page.login-page .error { color:#a32232; background:#fff0f1; border:1px solid #f6d1d5; }
body.auth-page.login-page .success { color:#176a37; background:#effaf2; border:1px solid #c9ecd2; }

@media (max-width:480px) {
    body.auth-page.login-page .container { padding:24px 16px; }
    body.auth-page.login-page .box { border-radius:20px; }
}