.login-page {
    background: #10261a;
    color: #203a2b;
}

.screen.login-page .min-h-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100svh;
    padding: 0 20px 32px;
    background:
        radial-gradient(ellipse at 0 0, rgb(46 103 65 / 32%), transparent 38%),
        radial-gradient(ellipse at 100% 8%, rgb(46 103 65 / 25%), transparent 38%),
        radial-gradient(ellipse at 50% 100%, #234b32, transparent 65%),
        linear-gradient(#000 0%, #020604 30%, #10261a 100%);
}

.login-page .login-brand {
    width: min(100%, 580px);
    margin: 0 auto;
}

.login-page .login-video {
    display: block;
    width: 100%;
    height: auto;
    mask-image: radial-gradient(ellipse 50% 58% at 50% 44%, #000 68%, rgb(0 0 0 / 80%) 78%, transparent 100%);
}

.login-page .login-input {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    margin: -36px auto 0;
    padding: 30px;
    background: #f8faf6;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 24px;
    box-shadow: 0 24px 80px rgb(0 0 0 / 25%);
}

.login-page .login-intro { margin-bottom: 24px; }
.login-page .login-intro h1 { margin: 0 0 6px; font-size: 1.75rem; font-weight: 600; letter-spacing: -.8px; color: #203a2b; }
.login-page .login-intro p { margin: 0; font-size: 0.875rem; color: #68796d; }
.login-page .login-input label { color: #304a39; font-size: 0.875rem; }
.login-page .login-input form > div > label { display: block; }
.login-page .login-input form > div + div:not(.login-options) { margin-top: 16px; }
.login-page .login-input input[type="email"],
.login-page .login-input input[type="password"] {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #d7dfd4;
    border-radius: 10px;
    color: #203a2b;
    font-size: 1rem;
    box-shadow: none;
}
.login-page .login-input input:focus { border-color: #427d52; outline: 2px solid var(--focus-ring, #3d8054); outline-offset: 2px; box-shadow: none; }
.login-page .login-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 20px 0; }
.login-page .login-input .login-options label { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.login-page .login-options input { color: #2a6b43; accent-color: #2a6b43; }
.login-page .login-options span { color: #68796d; }
.login-page .login-options a { color: #28603e; font-size: 0.8125rem; text-decoration: none; padding-block: 6px; }
.login-page .login-submit { display: flex; justify-content: center; width: 100%; min-height: 48px; border-radius: 10px; background: #285e3d; color: #fff; font-size: 0.9375rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.login-page .login-submit:hover { background: #1d4a2f; }
.login-page .login-registration { margin-top: 24px; padding-top: 20px; border-top: 1px solid #dfe5db; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-page .login-registration p { margin: 0; color: #68796d; font-size: 0.8125rem; }
.login-page .login-register-link { color: #285e3d; font-size: 0.875rem; font-weight: 600; text-decoration: none; padding: 8px 0; }
.login-page .login-register-link span { margin-left: 6px; }
.login-page a:hover { text-decoration: underline; }
.login-page a:focus-visible, .login-page button:focus-visible { outline: 2px solid var(--focus-ring, #3d8054); outline-offset: 4px; }
.login-page .login-signoff { margin: 24px 0 0; color: #b0c6b4; font-size: 0.8125rem; }
.login-page .public-lang-switcher .btn { background: rgb(20 33 25 / 80%); color: #e6ede3; border: 1px solid #415345; border-radius: 10px; min-height: 36px; }

@media (max-width: 600px) {
    .screen.login-page .min-h-screen { padding: 32px 20px 24px; }
    .login-page .login-brand { width: calc(100% + 40px); margin-inline: -20px; }
    .login-page .login-input { margin-top: -8px; padding: 24px; border-radius: 20px; }
    .login-page .login-intro h1 { font-size: 1.625rem; }
}

@media (max-width: 350px) {
    .login-page .login-input { padding: 20px; }
    .login-page .login-registration { flex-wrap: wrap; gap: 0 12px; }
}