@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --navy:#062d51;
    --blue:#087fc4; 
    --cyan:#52d2ee; 
    --ink:#15354d; 
    --muted:#7890a2; 
    --line:#dbe8ef; 
    --white:#fff; 
}
* { 
    box-sizing:border-box; 
    overflow: hidden;
}
body { 
    margin:0; 
    min-width:320px; 
    color:var(--ink); 
    background:#f1f8fc; 
    font-family:'DM Sans',sans-serif; 
}
a { 
    color:var(--blue); 
    text-decoration:none; 
    font-weight:700; 
} 
a:hover { 
    text-decoration:underline; 
}
button,input { 
    font:inherit; 
} 
button { 
    -webkit-tap-highlight-color:transparent; 
}
.login-page { 
    position:relative; 
    z-index:1;
    height:100vh; 
    display:flex; 
    flex-direction:column; 
    padding:28px clamp(22px,5vw,78px) 22px; 
}
.page-art { 
    position:fixed; 
    border-radius:50%; 
    pointer-events:none; 
    filter:blur(0); 
}
.page-art--one { 
    width:620px; 
    height:620px; 
    top:-290px; 
    right:-150px; 
    background:linear-gradient(145deg,#9deafa,#138bc7); 
    opacity:.9; 
}
.page-art--two { 
    width:390px; 
    height:390px; 
    bottom:-180px; 
    left:-100px; 
    background:linear-gradient(145deg,#d9f8ff,#86d9f0); 
    opacity:.7; 
}
.page-art--one::after,.page-art--two::after { 
    content:""; 
    position:absolute; 
    inset:34px; 
    border:1px solid rgba(255,255,255,.7); 
    border-radius:50%; 
    box-shadow:0 0 0 24px rgba(255,255,255,.15),0 0 0 48px rgba(255,255,255,.1); 
}
.login-card { 
    position:relative; 
    width:min(100%,530px); 
    height: fit-content;
    margin:clamp(40px,4vh,82px) auto 30px; 
    padding: 40px;
    border:1px solid rgba(255,255,255,.85); 
    border-radius:24px; 
    background:rgba(255,255,255,.9); 
    box-shadow:0 28px 80px rgba(30,92,125,.15),0 3px 10px rgba(30,92,125,.04); 
    backdrop-filter:blur(15px); 
}
.card-accent { 
    position:absolute; 
    top:0; left:12%; 
    right:12%; height:4px; 
    border-radius:0 0 8px 8px; 
    background:linear-gradient(90deg,var(--cyan),var(--blue)); 
}
.card-logo { 
    display:grid; 
    place-items:center; 
    width:85px; 
    height:70px; 
    padding:4px; 
    margin:0 auto 27px; 
    border:1px solid #d6e7ef; 
    border-radius:13px; 
    background:#fff; 
    box-shadow:0 8px 20px rgba(9,93,136,.08); 
}
.card-logo img { 
    width:100%; 
    height:100%; 
    object-fit:contain; 
}
.card-heading { 
    text-align:center; 
    margin-bottom:10px;
    cursor: default; 
}
.eyebrow { 
    margin:0 0 10px; 
    color:var(--blue); 
    font-size:10px; 
    font-weight:700; 
    letter-spacing:.22em; 
}
.card-heading h1 { 
    margin:0 0 10px; 
    color:dodgerblue; 
    font-family:'Space Grotesk',sans-serif; 
    font-size:36px; 
    letter-spacing:-.06em; 
}
.card-heading h1 span { 
    color:var(--blue); 
}
.card-heading p:last-child { 
    margin:0; 
    color:var(--muted); 
    font-size:13px; 
}
.field-group { 
    margin-bottom:15px; 
}
 label,.label-row { 
    color:#35556b; 
    font-size:12px; 
    font-weight:700; 
}
.field-group>label { 
    display:block; 
    margin:0 0 8px; 
}
.label-row { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    margin-bottom:8px; 
}
.label-row a { 
    font-size:11px; 
}
.input-wrap { 
    display:flex; 
    align-items:center; 
    border:1px solid var(--line); 
    border-radius:9px; 
    background:#fbfdfe; 
    transition:.2s ease; 
}
.input-wrap:focus-within { 
    border-color:var(--blue); 
    background:#fff; 
    box-shadow:0 0 0 4px rgba(8,127,196,.1); 
}
.input-wrap>svg { 
    width:17px; 
    height:17px; 
    margin-left:14px; 
    fill:none; 
    stroke:#8ba7b8; 
    stroke-linecap:round; 
    stroke-linejoin:round; 
    stroke-width:1.7; 
}
 input[type=email],input[type=password] { 
    width:100%; 
    padding:13px 12px; 
    border:0; 
    outline:0; 
    color:var(--ink); 
    background:transparent; 
    font-size:13px; 
}
 input::placeholder { 
    color:#a6b8c4; 
}
.icon-button { 
    display:grid; 
    place-items:center; 
    width:43px; 
    height:43px; 
    border:0; 
    color:#7f9aaa; 
    background:transparent; 
    cursor:pointer; 
}
.icon-button svg { 
    width:18px; 
    fill:none; 
    stroke:currentColor; 
    stroke-linecap:round; 
    stroke-linejoin:round; 
    stroke-width:1.7; 
}
.field-error { 
    display:block; 
    min-height:15px; 
    margin-top:4px; 
    color:#cb4054; 
    font-size:10px; 
}

.submit-button { 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    gap:11px; 
    width:100%; 
    padding:14px 18px; 
    border:0; 
    border-radius:9px; 
    color:#fff; 
    background:linear-gradient(100deg,dodgerblue,#046092); 
    box-shadow:0 10px 18px rgba(7,128,193,.2); 
    font-size:13px; 
    font-weight:700; 
    cursor:pointer; 
    transition:.2s ease;
}
.submit-button:hover { 
    transform:translateY(-2px); 
    box-shadow:0 14px 25px rgba(7,128,193,.28); 
}
.submit-button svg { 
    width:17px; 
    fill:none; 
    stroke:currentColor; 
    stroke-linecap:round; 
    stroke-linejoin:round; 
    stroke-width:1.8; 
}
.submit-button.is-loading { 
    opacity:.7; 
    pointer-events:none; 
}
.status-message { 
    min-height:18px; 
    margin-top:9px; 
    text-align:center; 
    color:#238b67; font-size:11px; 
}
.or-divider { 
    display:flex; 
    align-items:center; 
    gap:12px; 
    margin:22px 0 15px; 
    color:#9aadb9; 
    font-size:10px; 
}
.or-divider:before,.or-divider:after { 
    content:""; 
    height:1px; 
    flex:1; 
    background:var(--line); 
}

/* 768px screen resolution */
@media (max-width:768px) { 
    .login-page { 
        padding:20px 15px 17px; 
    }
    .topbar__help { 
        display:none; 
    }
    .topbar { 
        justify-content:center; 
    }
    .login-card { 
        margin-top:34px; 
        padding:34px 23px 29px; 
        border-radius:19px; 
    }
    .card-heading h1 { 
        font-size:32px; 
    }
    .social-row { 
        grid-template-columns:1fr; 
    }
    .page-footer { 
        font-size:9px; 
    }
    .page-footer span:last-child { 
        gap:10px; 
    } 
}