:root{
  --auth-navy:#0f3d5e;
  --auth-blue:#eef7fb;
  --auth-line:#d7e1e7;
  --auth-muted:#647782;
  --auth-danger:#b42318;
  --auth-danger-bg:#fff1f0;
  --auth-success:#067647;
  --auth-success-bg:#ecfdf3;
  --auth-warning:#9a6700;
  --auth-warning-bg:#fff8df;
}
.auth-page{
  min-height:100vh;
  margin:0;
  display:grid;
  place-items:center;
  padding:28px;
  background:linear-gradient(145deg,#eef5f8,#f9fbfc 58%,#e7f1f5);
  color:#172b36;
  font-family:Inter,Segoe UI,Arial,sans-serif;
}
.auth-card{
  width:min(520px,100%);
  padding:30px;
  border:1px solid var(--auth-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 50px rgba(15,61,94,.13);
}
.auth-brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}
.auth-brand img{
  width:58px;
  height:58px;
  border-radius:12px;
  object-fit:contain;
}
.auth-brand h1{
  margin:0;
  color:var(--auth-navy);
  font-size:26px;
}
.auth-brand p{
  margin:3px 0 0;
  color:var(--auth-muted);
}
.auth-intro{
  margin:0 0 18px;
  color:var(--auth-muted);
  line-height:1.5;
}
.auth-alert{
  margin:0 0 16px;
  padding:11px 13px;
  border:1px solid #f0b4ae;
  border-radius:10px;
  background:var(--auth-danger-bg);
  color:var(--auth-danger);
  line-height:1.4;
}
.auth-alert[hidden]{display:none}
.auth-provider-list{
  display:grid;
  gap:11px;
}
.auth-provider-button{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  border:1px solid var(--auth-line);
  border-radius:10px;
  background:#fff;
  color:#172b36;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}
.auth-provider-button:hover{
  border-color:#7da9c1;
  background:#f8fbfd;
}
.auth-provider-button.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}
.auth-provider-mark{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:7px;
  font-size:17px;
  font-weight:800;
}
.auth-provider-mark.microsoft{
  color:#fff;
  background:#2563a8;
}
.auth-provider-mark.google{
  color:#b42318;
  background:#fff;
  border:1px solid #d8dfe3;
}
.auth-provider-note{
  margin:13px 0 0;
  color:var(--auth-muted);
  font-size:12px;
  text-align:center;
}
.auth-rules{
  margin:22px 0 0;
  padding:16px;
  border-radius:11px;
  background:var(--auth-blue);
}
.auth-rules strong{
  display:block;
  margin-bottom:7px;
  color:var(--auth-navy);
}
.auth-rules ul{
  margin:0;
  padding-left:19px;
  color:#425b68;
  line-height:1.55;
}
.auth-footer{
  margin-top:18px;
  display:flex;
  justify-content:center;
}
.auth-footer a{
  color:var(--auth-navy);
  font-size:13px;
}
.auth-setup-status{
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid var(--auth-line);
  border-radius:10px;
  background:#f8fbfc;
}
.auth-setup-status h4{
  margin:0 0 6px;
  color:var(--auth-navy);
}
.auth-status-list,
.auth-provider-summary{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.auth-status-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}
.auth-status-chip.is-linked,
.auth-status-chip.is-ready{
  color:var(--auth-success);
  background:var(--auth-success-bg);
}
.auth-status-chip.is-unlinked{
  color:#526570;
  background:#eef2f4;
}
.auth-status-chip.is-pending{
  color:var(--auth-warning);
  background:var(--auth-warning-bg);
}
.auth-user-detail{
  display:grid;
  gap:12px;
}
.auth-user-heading{
  padding:12px 14px;
  border-radius:10px;
  background:var(--auth-blue);
}
.auth-user-heading strong,
.auth-user-heading span{
  display:block;
}
.auth-user-heading span{
  margin-top:3px;
  color:var(--auth-muted);
}
.auth-identity-card{
  padding:13px;
  border:1px solid var(--auth-line);
  border-radius:10px;
}
.auth-identity-card header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.auth-identity-card dl{
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  gap:5px 10px;
  margin:0 0 10px;
  font-size:12px;
}
.auth-identity-card dt{color:var(--auth-muted)}
.auth-identity-card dd{margin:0;overflow-wrap:anywhere}
@media(max-width:560px){
  .auth-page{padding:14px}
  .auth-card{padding:22px}
  .auth-identity-card dl{grid-template-columns:1fr}
}