:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }

.liquid-login-page {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    color: #101b2d;
    background: radial-gradient(circle at 50% -12%, rgba(70, 133, 211, .14), transparent 34rem), linear-gradient(145deg, #f9fbfe 0%, #f2f6fb 55%, #f8fafc 100%);
}

.liquid-login-page::before, .liquid-login-page::after {
    position: fixed;
    z-index: 0;
    width: 34rem;
    height: 34rem;
    border: 1px solid rgba(44, 103, 174, .09);
    border-radius: 48% 52% 60% 40%;
    content: "";
    pointer-events: none;
}
.liquid-login-page::before { top: -23rem; left: -14rem; transform: rotate(24deg); }
.liquid-login-page::after { right: -22rem; bottom: -24rem; transform: rotate(-18deg); }

.liquid-login-main {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: calc(100vh - 96px);
    min-height: calc(100dvh - 96px);
    padding: clamp(2rem, 6vh, 4.5rem) 1.25rem 2rem;
    place-items: center;
}
.liquid-login-shell { width: min(100%, 430px); }
.liquid-login-brand { margin-bottom: 1.65rem; text-align: center; }
.liquid-login-logo {
    display: block;
    width: clamp(84px, 20vw, 112px);
    height: auto;
    margin: 0 auto .85rem;
    filter: drop-shadow(0 8px 18px rgba(6, 18, 37, .08));
}
.liquid-login-name {
    margin: 0;
    color: #061225;
    font-size: clamp(1.9rem, 6vw, 2.35rem);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1;
}
.liquid-login-tagline { margin: .55rem 0 0; color: #596a80; font-size: .95rem; font-weight: 500; letter-spacing: .01em; }

.liquid-login-card {
    padding: clamp(1.5rem, 5vw, 2.25rem);
    border: 1px solid rgba(116, 139, 168, .2);
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 55px rgba(27, 53, 84, .1), 0 2px 8px rgba(27, 53, 84, .04);
    backdrop-filter: blur(10px);
}
.liquid-login-heading { margin-bottom: 1.65rem; text-align: center; }
.liquid-login-heading h1 { margin: 0; color: #0a172a; font-size: 1.42rem; font-weight: 700; letter-spacing: -.025em; }
.liquid-login-heading p { margin: .4rem 0 0; color: #6b7a90; font-size: .9rem; }
.liquid-login-status {
    margin: 0 0 1.15rem;
    padding: .75rem .9rem;
    border: 1px solid #b7e3cd;
    border-radius: 10px;
    color: #17623d;
    background: #f0fbf5;
    font-size: .875rem;
    font-weight: 600;
}

.liquid-login-form { display: grid; gap: 1.15rem; }
.liquid-login-field label { display: block; margin-bottom: .45rem; color: #26364c; font-size: .875rem; font-weight: 650; }
.liquid-login-field input[type="email"], .liquid-login-field input[type="password"], .liquid-login-field input[type="text"] {
    width: 100%;
    min-height: 48px;
    padding: .75rem .9rem;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    outline: 0;
    color: #0f1d31;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 29, 49, .03);
    font: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.liquid-login-field input:hover:not(:disabled) { border-color: #9baec4; }
.liquid-login-field input:focus-visible { border-color: #2469af; box-shadow: 0 0 0 4px rgba(36, 105, 175, .13); }
.liquid-login-field input[aria-invalid="true"] { border-color: #c34444; background: #fffafa; }
.liquid-login-field input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 4px rgba(195, 68, 68, .12); }
.liquid-login-field input:disabled { cursor: not-allowed; color: #8491a3; border-color: #dce3eb; background: #f2f5f8; }
.liquid-login-field input:-webkit-autofill, .liquid-login-field input:-webkit-autofill:hover, .liquid-login-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0f1d31;
    box-shadow: 0 0 0 1000px #f7fbff inset, 0 0 0 4px rgba(36, 105, 175, .08);
    transition: background-color 9999s ease-out;
}

.liquid-login-password-wrap { position: relative; }
.liquid-login-password-wrap input { padding-right: 5.1rem !important; }
.liquid-login-password-toggle {
    position: absolute;
    top: 50%;
    right: .55rem;
    min-width: 4.2rem;
    min-height: 34px;
    padding: .35rem .55rem;
    border: 0;
    border-radius: 8px;
    color: #28649f;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transform: translateY(-50%);
}
.liquid-login-password-toggle:hover { background: #eef5fc; }
.liquid-login-password-toggle:focus-visible, .liquid-login-options a:focus-visible, .liquid-login-remember input:focus-visible {
    outline: 3px solid rgba(36, 105, 175, .22);
    outline-offset: 2px;
}

.liquid-login-errors { margin-top: .45rem; color: #ae3434; font-size: .8rem; line-height: 1.4; }
.liquid-login-errors:empty { display: none; }
.liquid-login-errors ul { margin: 0; padding: 0; list-style: none; }
.liquid-login-options { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: -.1rem; }
.liquid-login-remember { display: inline-flex; align-items: center; gap: .5rem; color: #516177; font-size: .84rem; cursor: pointer; }
.liquid-login-remember input { width: 17px; height: 17px; margin: 0; border: 1px solid #aebdce; border-radius: 4px; accent-color: #1f64aa; }
.liquid-login-options a { color: #2164a6; border-radius: 4px; font-size: .84rem; font-weight: 650; text-decoration: none; }
.liquid-login-options a:hover { color: #123f72; text-decoration: underline; text-underline-offset: 3px; }

.liquid-login-submit {
    width: 100%;
    min-height: 49px;
    margin-top: .15rem;
    padding: .78rem 1rem;
    border: 1px solid #15528e;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #1f6bb3 0%, #164f89 100%);
    box-shadow: 0 8px 18px rgba(25, 89, 151, .2);
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.liquid-login-submit:hover:not(:disabled) { box-shadow: 0 10px 22px rgba(25, 89, 151, .25); filter: brightness(1.035); transform: translateY(-1px); }
.liquid-login-submit:active:not(:disabled) { box-shadow: 0 4px 10px rgba(25, 89, 151, .18); transform: translateY(0); }
.liquid-login-submit:focus-visible { outline: 3px solid rgba(36, 105, 175, .26); outline-offset: 3px; }
.liquid-login-submit:disabled { cursor: not-allowed; opacity: .58; box-shadow: none; }

.liquid-login-footer { position: relative; z-index: 1; min-height: 96px; padding: .9rem 1.25rem 1.5rem; color: #77869a; text-align: center; }
.liquid-login-footer p { margin: 0; font-size: .76rem; line-height: 1.65; }
.liquid-login-footer p:first-child { color: #5f7086; font-weight: 600; }

@media (max-width: 520px) {
    .liquid-login-main { min-height: auto; padding: 1.6rem 1rem 1.5rem; }
    .liquid-login-brand { margin-bottom: 1.25rem; }
    .liquid-login-card { border-radius: 17px; }
    .liquid-login-options { align-items: flex-start; flex-direction: column; }
    .liquid-login-footer { min-height: auto; padding-bottom: 1.4rem; }
}
@media (max-height: 740px) and (min-width: 521px) {
    .liquid-login-main { min-height: auto; padding-top: 1.5rem; }
    .liquid-login-logo { width: 78px; }
    .liquid-login-brand { margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}