.auth-header{border-bottom:1px solid transparent}
.auth-header .nav{justify-content:flex-start;height:76px}

.auth-main{
  min-height:calc(100dvh - 76px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px 20px 48px;
}

.auth-card{
  width:100%;
  max-width:400px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:40px 32px;
  box-shadow:var(--shadow-lg);
  text-align:center;
}

.auth-icon{
  width:40px;height:40px;
  border-radius:12px;
  background:var(--blue);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
}
.auth-icon-invite{background:var(--violet)}
.auth-icon-error{background:var(--surface-3);color:var(--text)}

.auth-card h1{
  font-size:20px;
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 6px;
  line-height:1.3;
}

.auth-sub{
  font-size:14px;
  color:var(--muted);
  margin:0 0 28px;
  line-height:1.6;
}
.auth-sub strong{color:var(--text);font-weight:600}

/*
  .google-btn-official is the sign-in control everywhere on this page.
  It wraps Google's own pre-exported PNG asset (Light theme, Pill shape,
  "Continue with Google") — not a recreation — inside a plain button that
  triggers a full-page redirect (see login.js). It's scaled responsively
  while keeping the asset's fixed 180:40 aspect ratio so the "G" is never
  stretched or distorted.

  We use this instead of Google's Identity Services JS widget (g_id_signin)
  because that widget, like the classic OAuth redirect, doesn't work inside
  the embedded WebView Median uses to wrap this app for mobile.
*/
.google-btn-official{
  width:100%;
  max-width:336px;
  display:block;
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
  position:relative;
  border-radius:20px;
  line-height:0;
}
.google-btn-official img{
  width:100%;
  height:auto;
  display:block;
  border-radius:20px;
}
.google-btn-official:hover img{filter:brightness(.98)}
.google-btn-official:active img{filter:brightness(.95)}
.google-btn-official:focus-visible{outline:none;box-shadow:var(--focus)}
.google-btn-official:disabled{cursor:default}
.google-btn-official:disabled img{opacity:0}
.google-btn-official + .g_id_signin,
.g_id_signin + .google-btn-official{margin-top:10px}

.google-btn-spinner{
  display:none;
  width:18px;height:18px;
  border:2px solid var(--line-strong);
  border-top-color:var(--blue);
  border-radius:50%;
  position:absolute;
  top:50%;left:50%;
  margin:-9px 0 0 -9px;
  animation:auth-spin .7s linear infinite;
}
.google-btn-official.is-loading .google-btn-spinner{display:block}

@keyframes auth-spin{to{transform:rotate(360deg)}}

.auth-legal{
  font-size:12px;
  color:var(--muted-2);
  line-height:1.6;
  margin:18px 0 0;
}
.auth-legal a{color:var(--blue)}
.auth-legal a:hover{text-decoration:underline}

.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:26px 0 18px;
}
.auth-divider:before,.auth-divider:after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.auth-divider span{
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted-2);
  white-space:nowrap;
}

.auth-alt{
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
  margin:0;
}

.auth-state-error .auth-sub{margin-bottom:24px}

.auth-footer-note{
  margin:20px 0 0;
  font-size:12px;
  color:var(--muted-2);
  text-align:center;
}

@media (max-width:480px){
  .auth-card{
    padding:32px 22px;
    border-radius:20px;
  }
  .auth-main{padding:20px 16px 40px}
  .auth-card h1{font-size:18px}
}

@media (max-width:340px){
  .auth-card{padding:26px 18px}
}

.auth-card{
  animation:auth-card-in .5s ease both;
}
@keyframes auth-card-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .google-btn-official,.google-btn-spinner{animation-duration:.01ms!important;transition:none!important}
  .auth-card{animation:none}
}