*{box-sizing:border-box}
:root{
  --ink:#111;
  --muted:#6b6b6b;
  --line:#d9d9d9;
  --blue:#3f66ff;
  --danger:#b42318;
  --success:#2f6d43;
}
html,body{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  background:#fff;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,a,input{font:inherit}
button,a{touch-action:manipulation}
button,.brand{cursor:pointer}
.hidden{display:none!important}

.auth-shell{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:92px 24px 48px;
}
.brand{
  position:fixed;
  top:26px;
  left:30px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#171717;
  text-decoration:none;
  font-weight:650;
  font-size:16px;
  letter-spacing:-.015em;
}
.brand:hover{opacity:.72}
.brand-mark{
  font-family:Georgia,"Times New Roman",serif;
  color:#466653;
  letter-spacing:-.18em;
  transform:translateY(-1px);
}
.auth-panel{
  width:min(420px,100%);
  padding-top:18px;
}
.auth-view h1{
  margin:0 0 34px;
  text-align:center;
  font-size:34px;
  line-height:1.14;
  font-weight:650;
  letter-spacing:-.035em;
}
.lead{
  margin:-18px 0 32px;
  text-align:center;
  color:#333;
  font-size:16px;
  line-height:1.45;
}
.lead.compact{margin-top:-20px;margin-bottom:24px}

.social-btn,.outline-action,.primary,.recent-account{
  width:100%;
  min-height:54px;
  border-radius:16px;
  cursor:pointer;
  position:relative;
}
.social-btn{
  border:1px solid var(--line);
  background:#fff;
  color:#151515;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-weight:580;
}
.social-btn:hover,.outline-action:hover,.recent-account:hover{background:#f8f8f8}
.google-mark{width:20px;height:20px;display:grid;place-items:center}
.google-mark svg{width:20px;height:20px;display:block}

.or-line{
  display:flex;
  align-items:center;
  gap:14px;
  margin:22px 0;
  color:#747474;
  font-size:13px;
}
.or-line:before,.or-line:after{content:"";height:1px;background:#dedede;flex:1}
.or-line span{padding:0 3px}

.floating-field{
  display:block;
  position:relative;
  margin:0 0 18px;
}
.floating-field>span{
  position:absolute;
  z-index:1;
  top:-9px;
  left:14px;
  padding:0 7px;
  background:#fff;
  color:#656565;
  font-size:13px;
  line-height:18px;
}
.floating-field input{
  width:100%;
  height:56px;
  border:1px solid #cfcfcf;
  border-radius:16px;
  background:#fff;
  color:#111;
  padding:0 16px;
  outline:0;
  font-size:16px;
  transition:border-color .12s ease,box-shadow .12s ease;
}
.floating-field input:hover{border-color:#aaa}
.floating-field input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 1px var(--blue);
}
.password-field input{padding-right:54px}
.eye-btn{
  position:absolute;
  right:12px;
  top:10px;
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:#151515;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.eye-btn:hover{background:#f2f2f2}
.eye-btn svg{width:25px;height:25px}

.primary{
  border:0;
  background:#111;
  color:#fff;
  font-weight:600;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 18px;
}
.primary:hover{background:#292929}
.primary:active{transform:translateY(1px)}

.switch-copy{
  margin:22px 0 0;
  text-align:center;
  color:#565656;
  font-size:14px;
}
.inline-link,.text-link,.forget-account{
  border:0;
  background:transparent;
  color:var(--blue);
  cursor:pointer;
}
.inline-link{padding:0;font-weight:550}
.inline-link:hover,.text-link:hover,.forget-account:hover{text-decoration:underline}

.selected-email{
  min-height:58px;
  border:1px solid #d6d6d6;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px 9px 16px;
  margin-bottom:24px;
}
.selected-email span{min-width:0;display:grid;gap:3px}
.selected-email small{color:#6c6c6c;font-size:12px}
.selected-email strong{
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.selected-email button{
  border:0;
  background:transparent;
  color:#555;
  font-weight:600;
  cursor:pointer;
  padding:9px;
}
.selected-email button:hover{color:#111}

.text-link{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:2px 0;
  font-size:14px;
}
.left-link{margin:-6px 0 24px}

.recent-account{
  border:1px solid #d8d8d8;
  background:#fff;
  padding:14px 17px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  text-align:left;
}
.recent-avatar{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:#c9ced2;color:#fff;
  font-size:18px;font-weight:500;
  background-position:center;background-size:cover;
}
.recent-avatar.has-image{font-size:0}
.recent-copy{display:grid;gap:3px;min-width:0}
.recent-copy strong{font-size:17px;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-copy span{font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-arrow{font-size:28px;font-weight:300;color:#666}
.recent-account.is-loading .recent-arrow{display:none}

.outline-action{
  border:1px solid #d8d8d8;
  background:#fff;
  color:#111;
  font-size:16px;
  font-weight:550;
  margin-bottom:12px;
}
.forget-account{
  display:block;
  margin:9px auto 0;
  padding:8px;
  font-size:13px;
}

.msg{
  min-height:22px;
  margin-top:18px;
  text-align:center;
  font-size:13px;
  line-height:1.45;
  color:#666;
}
.msg.error{color:var(--danger)}
.msg.success{color:var(--success)}

.spinner{
  display:none;
  width:18px;height:18px;
  flex:0 0 18px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:spin .65s linear infinite;
}
.is-loading .spinner{display:inline-block}
.is-loading .google-mark{display:none}
.is-loading{cursor:wait!important;pointer-events:none}
button:disabled{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:600px){
  .auth-shell{padding:86px 20px 32px}
  .brand{top:22px;left:20px;font-size:15px}
  .auth-panel{padding-top:0}
  .auth-view h1{font-size:31px;margin-bottom:31px}
  .lead{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important}
  .spinner{animation-duration:1.2s}
}