.login-body {
    background: radial-gradient(ellipse at top, #e7efe9 0%, transparent 65%), #f3f5f6;
    padding: 24px 16px;
}

.login-panel {
    border: 1px solid rgba(16, 24, 32, .1);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(16, 24, 32, .09);
    color: #18252f;
    min-width: 0;
    overflow-wrap: anywhere;
    max-width: 440px;
    overflow: hidden;
    padding: 0;
}

.login-header {
    background:
        radial-gradient(circle at 86% -25%, rgba(24, 169, 87, .42), transparent 58%),
        linear-gradient(125deg, #080b0d 0%, #101820 58%, #173226 100%);
    border-bottom: 2px solid var(--zicam-green);
    color: #fff;
    padding: 28px 32px;
}
.login-panel .brand-mark { font-size: 1.1rem; }
.login-title { font-size: 1.8rem; font-weight: 750; letter-spacing: -.035em; margin: 0; }
.login-content { padding: 28px 32px 32px; }
.login-panel .form-label { color: #4e5e6a; font-size: .85rem; font-weight: 650; }
.login-panel .form-control { min-height: 46px; border: 1px solid #ced9df; border-radius: 7px; background: #f9fbfc; }
.login-panel .form-control:focus { background: #fff; border-color: var(--zicam-green); box-shadow: 0 0 0 3px rgba(24, 169, 87, .13); }
.login-panel .btn { min-height: 46px; border-radius: 7px; font-weight: 700; }
.login-panel :is(input, button):focus-visible { outline: 3px solid #246c48; outline-offset: 3px; }

@media (max-width: 420px) {
    .login-header { padding: 24px; }
    .login-content { padding: 24px; }
}