/* Crux ID shared authentication shell — centered, sidebar-free, responsive. */
:root{
  --id-auth-bg:var(--crux-bg,#0f151a);
  --id-auth-surface:var(--crux-surface,#181e23);
  --id-auth-surface-2:var(--crux-surface-2,#20272d);
  --id-auth-text:var(--crux-text,#f7faff);
  --id-auth-muted:var(--crux-text-2,#c6d0e3);
  --id-auth-subtle:var(--crux-text-3,#8f9bad);
  --id-auth-border:var(--crux-border,rgba(255,255,255,.1));
  --id-auth-accent:var(--crux-blue-strong,#78b5ce);
}
html{ min-height:100%; background:var(--id-auth-bg); }
body.id-auth-page{
  min-height:100vh!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow-x:hidden!important;
  color:var(--id-auth-text)!important;
  background:
    radial-gradient(820px 440px at 10% -15%,rgba(120,181,206,.1),transparent 64%),
    var(--id-auth-bg)!important;
}
.id-auth-topbar{
  width:min(820px,calc(100% - 40px));
  min-height:64px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.id-auth-brand{ display:inline-flex; align-items:center; text-decoration:none; }
.id-auth-brand img{ display:block; width:120px; height:auto; }
.id-auth-help{
  display:inline-flex; align-items:center; justify-content:center; gap:.42rem;
  min-height:38px; padding:.45rem .65rem;
  color:var(--id-auth-muted)!important; text-decoration:none;
  font-size:.76rem; font-weight:650;
  border:1px solid var(--id-auth-border); border-radius:10px;
  background:rgba(255,255,255,.02);
}
.id-auth-help:hover{ color:var(--id-auth-text)!important; background:rgba(255,255,255,.05); }
.id-auth-stage{
  flex:1;
  width:100%;
  display:grid;
  place-items:center;
  padding:18px 20px;
}
.id-auth-frame{ width:min(620px,100%); min-width:0; }
.id-auth-frame.id-auth-wide{ width:min(760px,100%); }
.id-auth-frame.id-auth-compact{ width:min(480px,100%); }
.id-auth-card{
  width:100%;
  min-width:0;
  padding:clamp(24px,4.5vw,40px)!important;
  color:var(--id-auth-text)!important;
  background:var(--id-auth-surface)!important;
  border:1px solid var(--id-auth-border)!important;
  border-radius:22px!important;
  box-shadow:0 24px 70px rgba(0,0,0,.34)!important;
  overflow:hidden;
}
.id-auth-card::before{ display:none!important; }
.id-auth-card-header{ margin-bottom:1.2rem; }
.id-auth-card-header.id-auth-centered{ text-align:center; }
.id-auth-logo{ display:block; width:126px; height:auto; margin:0 auto .9rem; }
.id-auth-kicker{
  color:var(--id-auth-accent);
  font-size:.65rem; line-height:1.2; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase;
}
.id-auth-title{
  margin:.4rem 0 0!important;
  color:var(--id-auth-text)!important;
  font-size:clamp(1.35rem,4vw,1.75rem)!important;
  line-height:1.2!important;
  letter-spacing:-.025em;
  font-weight:750!important;
}
.id-auth-subtitle{ margin:.42rem 0 0; color:var(--id-auth-muted); font-size:.8rem; line-height:1.5; }
.id-auth-icon{
  width:48px; height:48px;
  display:inline-grid!important;
  place-items:center!important;
  margin:0 auto .85rem;
  padding:0!important;
  color:var(--id-auth-accent)!important;
  background:rgba(120,181,206,.085);
  border:1px solid rgba(120,181,206,.16);
  border-radius:14px;
  line-height:1!important;
}
.id-auth-icon > i,.id-auth-icon > svg{
  display:block!important;
  width:1em!important; height:1em!important;
  margin:0!important; padding:0!important;
  line-height:1!important; text-align:center!important;
  transform:none!important;
}
.id-auth-icon > svg{ width:22px!important; height:22px!important; }
.id-auth-notice{
  display:flex; align-items:flex-start; gap:.62rem;
  margin-bottom:1rem; padding:.7rem .76rem;
  color:var(--id-auth-muted);
  background:rgba(120,181,206,.055);
  border:1px solid rgba(120,181,206,.16);
  border-radius:11px;
  font-size:.72rem; line-height:1.45;
}
.id-auth-notice > i{ width:1rem; flex:0 0 1rem; margin-top:.1rem; color:var(--id-auth-accent); text-align:center; }
.id-auth-security-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.45rem;
  margin-top:1rem;
  padding-top:.85rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.id-auth-security-item{ min-width:0; display:flex; align-items:center; justify-content:center; gap:.38rem; color:var(--id-auth-subtle); font-size:.62rem; text-align:center; }
.id-auth-security-item i{ width:1rem; flex:0 0 1rem; color:var(--id-auth-accent); line-height:1; text-align:center; }
.id-auth-card .form-label{
  margin-bottom:.35rem;
  color:var(--id-auth-text)!important;
  font-size:.78rem;
  font-weight:700!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.id-auth-card .input-group{ flex-wrap:nowrap; }
.id-auth-card .input-group-text{
  width:44px;
  min-width:44px;
  flex:0 0 44px;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  color:var(--id-auth-subtle)!important;
  background:var(--id-auth-surface-2)!important;
  border-color:var(--id-auth-border)!important;
  border-radius:10px 0 0 10px!important;
  line-height:1!important;
}
.id-auth-card .input-group-text > i{
  display:block!important;
  width:1em!important;
  margin:0!important;
  line-height:1!important;
  text-align:center!important;
}
.id-auth-card .form-control,.id-auth-card .form-select{
  min-height:46px;
  padding:.72rem .82rem!important;
  color:var(--id-auth-text)!important;
  background:var(--id-auth-surface-2)!important;
  border-color:var(--id-auth-border)!important;
  border-radius:10px!important;
  box-shadow:none!important;
  transform:none!important;
}
.id-auth-card .input-group > .form-control,.id-auth-card .input-group > .form-select{ border-left:0!important; border-radius:0 10px 10px 0!important; }
.id-auth-card .input-group > .form-control:not(:last-child){ border-radius:0!important; }
.id-auth-card .input-group > .btn{
  min-width:44px;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border-left:0!important;
  border-radius:0 10px 10px 0!important;
}
.id-auth-card .input-group > .btn i{ display:block; width:1em; margin:0!important; line-height:1; text-align:center; }
.id-auth-card .form-control:focus,.id-auth-card .form-select:focus{ border-color:rgba(120,181,206,.45)!important; box-shadow:0 0 0 3px rgba(120,181,206,.12)!important; }
.id-auth-card .form-text,.id-auth-card .subtle,.id-auth-card .text-muted{ color:var(--id-auth-subtle)!important; font-size:.7rem; }
.id-auth-card .btn-primary{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; }
.id-auth-card .btn-primary i,.id-auth-card .btn-outline-light i,.id-auth-card .btn-link-soft i{ line-height:1; text-align:center; }
.id-auth-provider-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.id-auth-provider{
  min-height:44px;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.5rem!important;
  margin:0!important;
  padding:.65rem .72rem!important;
  color:var(--id-auth-text)!important;
  text-decoration:none!important;
  font-size:.76rem!important; font-weight:650!important;
  background:var(--id-auth-surface-2)!important;
  border:1px solid var(--id-auth-border)!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
.id-auth-provider:hover{ border-color:rgba(120,181,206,.28)!important; background:rgba(120,181,206,.06)!important; transform:none!important; }
.id-auth-provider:disabled{ cursor:not-allowed; opacity:.55; box-shadow:none!important; transform:none!important; }
.id-auth-provider i{ width:1rem; line-height:1; margin:0!important; text-align:center; }
.id-auth-divider{ display:flex; align-items:center; gap:.65rem; margin:1rem 0 .75rem; color:var(--id-auth-subtle); font-size:.65rem; text-align:center; }
.id-auth-divider::before,.id-auth-divider::after{ content:""; flex:1; height:1px; background:var(--id-auth-border); }
.id-auth-actions{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.55rem; margin-top:1rem; }
.id-auth-legal{ margin-top:1rem; color:var(--id-auth-subtle); font-size:.67rem; text-align:center; }
.id-auth-legal a{ color:var(--id-auth-muted)!important; text-decoration:none; }
.id-auth-legal a:hover{ color:var(--id-auth-text)!important; text-decoration:underline; }
.id-auth-footer{
  min-height:42px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.55rem;
  padding:8px 18px max(8px,env(safe-area-inset-bottom));
  color:var(--id-auth-subtle); font-size:.64rem;
}
.id-auth-footer a{ color:var(--id-auth-muted)!important; text-decoration:none; }
.id-auth-footer a:hover{ color:var(--id-auth-text)!important; text-decoration:underline; }
.id-auth-dot{ opacity:.45; }
.id-space-invite-summary{ margin:0 0 1rem; padding:.78rem .85rem; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:.72rem; color:var(--id-auth-text); background:rgba(120,181,206,.07); border:1px solid rgba(120,181,206,.2); border-radius:12px; text-align:left; }
.id-space-invite-icon{ width:42px; height:42px; display:grid; place-items:center; color:var(--id-auth-text); background:var(--id-auth-surface-2); border:1px solid var(--id-auth-border); border-radius:11px; font-size:1rem; }
.id-space-invite-summary div{ min-width:0; display:grid; gap:.2rem; }.id-space-invite-summary b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }.id-space-invite-summary small{ color:var(--id-auth-subtle)!important; font-size:.67rem!important; }
.id-space-join-steps{ margin:0 0 1.05rem; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; list-style:none; }
.id-space-join-steps li{ min-width:0; padding:.55rem .3rem; display:grid; justify-items:center; gap:.3rem; color:var(--id-auth-subtle); background:var(--id-auth-surface-2); border:1px solid var(--id-auth-border); border-radius:9px; font-size:.62rem; }
.id-space-join-steps span{ width:22px; height:22px; display:grid; place-items:center; color:var(--id-auth-text); background:rgba(120,181,206,.12); border-radius:50%; }.id-space-join-steps li.done,.id-space-join-steps li.active{ color:var(--id-auth-text); border-color:rgba(120,181,206,.38); }.id-space-join-steps li.done span{ color:#10202a; background:var(--id-auth-accent); }
.id-auth-invite-page .id-auth-title{ max-width:30ch; margin-left:auto; margin-right:auto; }
.id-auth-page a:focus-visible,.id-auth-page button:focus-visible,.id-auth-page input:focus-visible,.id-auth-page select:focus-visible{ outline:2px solid rgba(120,181,206,.75)!important; outline-offset:2px!important; }
@media(max-width:575.98px){
  .id-auth-topbar{ width:100%; min-height:60px; padding:0 16px; }
  .id-auth-brand img{ width:108px; }
  .id-auth-help{ width:38px; height:38px; min-height:38px; padding:0; }
  .id-auth-help span{ display:none; }
  .id-auth-stage{ place-items:start center; padding:0; }
  .id-auth-frame,.id-auth-frame.id-auth-wide,.id-auth-frame.id-auth-compact{ width:100%; }
  .id-auth-card{ padding:26px 18px 28px!important; border-left:0!important; border-right:0!important; border-radius:0!important; box-shadow:none!important; }
  .id-auth-frame > .id-auth-notice{ width:calc(100% - 32px); margin-left:16px; margin-right:16px; }
  .id-auth-title{ font-size:1.38rem!important; }
  .id-auth-subtitle{ font-size:.82rem; }
  .id-auth-card .form-label{ font-size:.84rem; }
  .id-auth-card .form-control,.id-auth-card .form-select{ min-height:48px; font-size:16px!important; }
  .id-auth-provider-grid{ grid-template-columns:1fr; }
  .id-auth-provider{ min-height:46px; font-size:.82rem!important; }
  .id-auth-security-strip{ grid-template-columns:1fr; gap:.5rem; }
  .id-auth-security-item{ justify-content:flex-start; text-align:left; font-size:.7rem; }
}
@media(prefers-reduced-motion:reduce){ *{ scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
