*{box-sizing:border-box}
:root{
    --navy:#071b3a;
    --blue:#0c5fd8;
    --light:#f3f7fc;
    --text:#172033;
    --muted:#667085;
    --border:#dce4ee;
}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:var(--light);
}
.login-page{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.05fr .95fr;
}
.brand-panel{
    background:linear-gradient(145deg,#06162f,#0a387a);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px;
}
.brand-content{max-width:520px}
.cloud-logo{font-size:72px;line-height:1}
.eyebrow{
    font-size:13px;
    font-weight:bold;
    letter-spacing:2px;
    opacity:.75;
}
h1{font-size:54px;line-height:1.05;margin:12px 0}
h1 span{color:#59a6ff}
.tagline{font-size:20px;line-height:1.6;color:#d9e8ff}
.features{
    margin-top:34px;
    display:grid;
    gap:14px;
    font-size:17px;
}
.form-panel{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:34px;
}
.login-card{
    width:min(470px,100%);
    background:white;
    padding:42px;
    border-radius:22px;
    box-shadow:0 22px 55px rgba(13,36,72,.12);
}
.welcome{
    margin:0 0 8px;
    color:var(--blue);
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
}
h2{font-size:30px;margin:0 0 10px}
.subtitle{color:var(--muted);margin:0 0 30px}
label{
    display:block;
    font-weight:bold;
    margin:18px 0 8px;
}
input[type=email],input[type=password],input[type=text]{
    width:100%;
    border:1px solid var(--border);
    border-radius:11px;
    padding:14px 15px;
    font-size:16px;
    outline:none;
}
input:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(12,95,216,.10);
}
.password-row{position:relative}
.password-row input{padding-right:90px}
.show-password{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    color:var(--blue);
    cursor:pointer;
    font-weight:bold;
}
.remember{
    display:flex;
    gap:9px;
    align-items:center;
    font-weight:normal;
    color:var(--muted);
}
.submit-button{
    width:100%;
    margin-top:8px;
    padding:15px;
    border:0;
    border-radius:11px;
    background:var(--blue);
    color:white;
    font-size:17px;
    font-weight:bold;
    cursor:pointer;
}
.submit-button:hover{filter:brightness(.94)}
.alert{
    padding:13px 15px;
    border-radius:10px;
    background:#fff0f0;
    color:#a12626;
    border:1px solid #ffd1d1;
}
.support{
    margin:24px 0 0;
    color:var(--muted);
    text-align:center;
    font-size:14px;
}
@media(max-width:850px){
    .login-page{grid-template-columns:1fr}
    .brand-panel{display:none}
    .form-panel{padding:20px}
    .login-card{padding:28px}
}
.login-submit-button {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 16px 20px;
    border: none;
    border-radius: 12px;
    background: #1767d9;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.login-submit-button:hover {
    background: #0f56bd;
}