html, body.login-body{ height:100%; margin:0; }
body.login-body{ font-family:var(--font-sans); background:var(--md-color-grey-white); }

.login-page{ display:flex; min-height:100vh; }
.login-col{ flex:1 1 50%; min-width:0; display:flex; align-items:center; }
.login-col-left{ justify-content:center; padding:48px 64px; }
.login-left-inner{ width:100%; max-width:420px; }

.login-favicon{ width:48px; height:48px; display:block; margin-bottom:32px; }
.login-title{ margin:0 0 8px; font-family:var(--font-display); font-size:var(--text-6xl); line-height:1.2; color:var(--ui-text); text-align:left; }
.login-subtitle{ margin:0 0 28px; font-size:var(--text-xl); font-weight:var(--font-weight-light); color:var(--ui-muted); text-align:left; }

.login-form{ display:flex; flex-direction:column; gap:12px; }
.login-form[hidden]{ display:none; }
.login-field{ position:relative; display:block; }
.login-field input{
  width:100%; box-sizing:border-box; padding:14px 12px; border:1px solid var(--ui-border); border-radius:12px;
  font-family:var(--font-sans); font-size:var(--text-lg); color:var(--ui-text); background:var(--md-color-grey-white); outline:none;
}
.login-field input:focus{ border-color:var(--ui-accent); }
.login-field input::placeholder{ color:transparent; }
.login-field > span{
  position:absolute; left:12px; top:50%; transform:translateY(-50%); padding:0 3px; margin-left:-3px;
  font-size:var(--text-lg); line-height:1; color:var(--ui-muted); background:var(--md-color-grey-white);
  pointer-events:none; transition:top .15s ease, font-size .15s ease, color .15s ease;
}
.login-field:has(> input:focus) > span,
.login-field:has(> input:not(:placeholder-shown)) > span{ top:0; font-size:var(--text-xs); }
.login-field:has(> input:focus) > span{ color:var(--ui-accent); }
#loginCode{ letter-spacing:.3em; font-variant-numeric:tabular-nums; }
.login-submit-btn{ padding:12px 16px; font-size:var(--text-lg); }
.login-code-actions{ display:flex; justify-content:space-between; gap:8px; }
.login-error{ margin:12px 0 0; font-size:var(--text-md); color:var(--ui-danger); }

.login-separator{ display:flex; align-items:center; gap:12px; margin:20px 0; font-size:var(--text-md); color:var(--ui-muted); }
.login-separator[hidden]{ display:none; }
.login-separator::before, .login-separator::after{ content:''; flex:1; height:1px; background:var(--ui-border); }

.login-google-btn{ position:relative; display:flex; align-items:center; justify-content:center; padding:12px 16px; font-size:var(--text-lg); }
.login-google-icon{ position:absolute; left:16px; width:20px; height:20px; }

.login-no-account{ display:block; margin-top:12px; font-size:var(--text-md); color:var(--md-neutral-foreground-3-rest); text-align: center }

.login-col-right{ padding:16px; }
.login-right-panel{
  width:100%; height:100%; border-radius:24px; display:flex; align-items:center; justify-content:center;
  padding:48px; background:linear-gradient(160deg, var(--ui-surface-2) 0%, #CFE0FB 100%);
}
.login-illustration{ max-width:60%; max-height:60%; }

@media (max-width:900px){
  .login-page{ flex-direction:column; }
  .login-col-right{ display:none; }
  .login-col-left{ padding:32px 24px; }
  .login-left-inner{ max-width:350px; }
}