.passkeys-page{
  padding-bottom:3rem;
}

.passkey-setup-page{
  padding-bottom:3rem;
}

.passkey-setup-card{
  max-width:560px;
  margin:0 auto;
  display:grid;
  gap:.8rem;
  border-radius:16px;
  border-color:var(--line-muted);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.passkey-setup-hero{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:.5rem;
}

.passkey-setup-hero-icon{
  width:74px;
  height:74px;
  border-radius:20px;
  display:grid;
  place-items:center;
  color:var(--primary);
  border:1px solid var(--primary-200);
  background:linear-gradient(140deg, var(--primary-soft-10), rgba(255,255,255,.02));
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.passkey-setup-hero-icon svg{
  width:38px;
  height:38px;
}

.passkey-setup-card .page-title{
  margin:0;
  font-size:clamp(1.55rem, 4vw, 1.95rem);
}

.passkey-setup-card .page-subtitle{
  margin:0;
  color:var(--text-200);
  max-width:34ch;
}

.passkey-setup-platforms{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7rem;
}

.passkey-setup-platform{
  display:inline-flex;
  align-items:center;
  gap:.62rem;
  padding:.78rem 1.18rem;
  border-radius:999px;
  border:1px solid var(--line-muted);
  background:rgba(255,255,255,.02);
  font-size:1rem;
  color:var(--text-200);
  line-height:1;
  min-height:56px;
}

.passkey-setup-platform svg{
  width:25px;
  height:25px;
  color:var(--primary);
  flex:none;
}

.passkey-setup-platform__icon--touch{
  width:30px;
  height:30px;
}

.passkey-setup-field{
  display:grid;
  gap:.35rem;
  margin-top:.15rem;
}

.passkey-setup-field .input{
  width:100%;
}

.passkeys-skip-link{
  color:var(--link);
  font-weight:600;
  font-size:.9rem;
  justify-self:center;
  margin-top:.15rem;
}

.passkeys-skip-link:hover{
  text-decoration:underline;
}

.passkeys-hero{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:.8rem;
  margin-bottom:.55rem;
}

.passkeys-topbar{
  max-width:780px;
  margin:0 auto .55rem;
}

.passkeys-back-btn{
  display:flex;
  align-items:center;
  gap:.45rem;
}

.passkeys-hero__main{
  display:flex;
  align-items:center;
  gap:.8rem;
}

.passkeys-hero__icon{
  width:64px;
  height:64px;
  border-radius:18px;
  flex:none;
}

.passkeys-card .page-title{
  margin:0;
}

.passkeys-card .page-subtitle{
  margin:.2rem 0 0;
  color:var(--text-200);
}

.passkeys-hero-pills{
  justify-content:flex-start;
  margin-bottom:.45rem;
}

.passkeys-card{
  max-width:780px;
  margin:0 auto;
  border-radius:16px;
  border-color:var(--line-muted);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.passkeys-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.55rem;
}

.passkeys-header h2{
  margin:0;
}

.passkeys-header__meta{
  font-size:.75rem;
  color:var(--text-200);
  white-space:nowrap;
}

.passkeys-note{
  margin:0 0 .75rem;
  color:var(--text-200);
  font-size:.9rem;
}

.passkeys-prompt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  margin:0 0 .65rem;
  padding:.5rem .6rem;
  border:1px solid var(--line-muted);
  border-radius:10px;
  background:rgba(255,255,255,.03);
}

.passkeys-prompt__copy{
  color:var(--text);
  font-size:.82rem;
}

.passkeys-prompt__copy strong{
  color:var(--primary);
}

.passkeys-list-wrap{
  border:1px solid var(--line-muted);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}

.passkeys-list{
  margin:0;
  padding:0;
  list-style:none;
}

.passkey-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:.5rem;
  padding:.55rem .7rem;
  border-bottom:1px solid var(--line-muted);
}

.passkey-row:last-child{
  border-bottom:0;
}

.passkey-row__main{
  min-width:0;
  display:grid;
  gap:.12rem;
}

.passkey-row__name{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.88rem;
  font-weight:700;
  color:var(--text);
  line-height:1.2;
}

.passkey-row__name-icon{
  flex:none;
  width:20px;
  height:20px;
  color:var(--primary);
}

.passkey-row__meta{
  margin:0;
  font-size:.76rem;
  color:var(--text-200);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.passkey-row__remove{
  width:26px;
  height:26px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--text-200);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
}

.passkey-row__remove:hover{
  background:rgba(255,107,94,.15);
  color:#ff9f95;
}

.passkeys-empty{
  margin:0;
  padding:.75rem .8rem;
  color:var(--text-200);
  font-size:.86rem;
}

.passkeys-footer{
  margin-top:.7rem;
  display:grid;
  gap:.45rem;
}

.passkeys-footer__row{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  align-items:center;
}

.passkeys-footer__row .input{
  flex:1 1 220px;
  min-width:220px;
  padding:.55rem .7rem;
  border:1px solid var(--bg-300);
  border-radius:10px;
  background:var(--bg);
  color:var(--text);
}

.passkeys-footer__hint{
  margin:0;
  font-size:.78rem;
  color:var(--text-200);
}

.passkeys-add-btn{
  justify-content:center;
  width:100%;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}

.passkey-setup-add-icon{
  width:18px;
  height:18px;
  flex:none;
}

@media (max-width: 680px){
  .passkey-setup-card{
    max-width:100%;
  }

  .passkey-setup-hero-icon{
    width:64px;
    height:64px;
  }

  .passkey-setup-hero-icon svg{
    width:32px;
    height:32px;
  }

  .passkeys-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .passkeys-hero__icon{
    width:56px;
    height:56px;
    border-radius:16px;
  }

  .passkeys-topbar{
    margin-bottom:.5rem;
  }

  .passkeys-hero-pills{
    justify-content:center;
  }

  .passkeys-header{
    flex-direction:column;
  }

  .passkeys-prompt{
    flex-direction:column;
    align-items:flex-start;
  }

  .passkey-row{
    padding:.6rem;
  }

  .passkey-row__meta{
    white-space:normal;
  }
}