.passkey-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 20px;
  overflow-y: auto;
  background: rgba(12, 33, 42, .62);
  backdrop-filter: blur(3px);
}

.passkey-modal[hidden] { display: none; }
.passkey-modal .passkey-card--popup {
  width: min(100%, 590px);
  margin: auto;
  box-shadow: 0 24px 70px rgba(8, 28, 39, .3);
}

.passkey-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 24px;
  padding: 22px;
  border: 1px solid #d7e3f5;
  border-radius: 16px;
  background: linear-gradient(135deg, #edf4ff 0%, #fff8e8 100%);
  box-shadow: 0 12px 34px rgba(35, 71, 120, .09);
  color: #17333d;
  text-align: left;
}

.passkey-card__content { min-width: 0; }
.passkey-card__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #fff;
  color: #28529f;
  box-shadow: 0 7px 18px rgba(40, 82, 159, .12);
}

.passkey-card__icon svg { width: 34px; height: 34px; }
.passkey-card__eyebrow { margin: 0 0 2px; color: #28529f; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.passkey-card h2 { margin: 0; padding: 0; color: inherit; font-family: 'Mukta', Arial, sans-serif; font-size: 25px; font-weight: 700; line-height: 1.2; text-align: left; text-transform: none; }
#profile .container .rigth_container .passkey-card h2 { margin: 0; padding: 0; font-family: 'Mukta', Arial, sans-serif; font-size: 25px; font-weight: 700; line-height: 1.2; text-align: left; text-transform: none; }
.passkey-card__body { max-width: 720px; margin: 6px 0 0; color: inherit; font-size: 16px; font-weight: 400; line-height: 1.45; }
.passkey-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 15px; }

.passkey-button,
.passkey-login__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid #244a8f;
  border-radius: 9px;
  background: #28529f;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.passkey-button:hover,
.passkey-login__button:hover { background: #1f437f; box-shadow: 0 7px 16px rgba(40, 82, 159, .2); transform: translateY(-1px); }
.passkey-button:disabled,
.passkey-login__button:disabled { opacity: .62; cursor: wait; transform: none; }
.passkey-button svg,
.passkey-login__button svg { width: 23px; height: 23px; flex: 0 0 auto; }
.passkey-later,
.passkey-remove { border: 0; background: transparent; color: #405b66; font-size: 14px; text-decoration: underline; cursor: pointer; }
.passkey-status { min-height: 0; margin: 9px 0 0; color: #315464; font-size: 14px; font-weight: 500; line-height: 1.35; }
.passkey-status:empty { display: none; }
.passkey-status[data-state="error"] { color: #a22f2f; }
.passkey-status[data-state="success"] { color: #276b3c; }
.passkey-unsupported,
.passkey-card__empty { margin: 10px 0 0; color: #617078; font-size: 14px; font-weight: 400; }

.passkey-list { display: grid; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }
.passkey-list li { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 13px; border: 1px solid rgba(40, 82, 159, .14); border-radius: 10px; background: rgba(255, 255, 255, .72); }
.passkey-list strong,
.passkey-list span { display: block; }
.passkey-list strong { color: #17333d; font-size: 15px; }
.passkey-list span { margin-top: 2px; color: #5d6d75; font-size: 12px; line-height: 1.3; }
.passkey-remove { color: #922f3c; white-space: nowrap; }

.passkey-login { width: 100%; }
.passkey-login__button { width: 100%; border-color: #17333d; background: #17333d; }
.passkey-login__button:hover { background: #0e252d; }
.passkey-login__help { margin: 7px 4px 0; color: #5f6d73; font-size: 12px; font-weight: 400; line-height: 1.35; text-align: center; }
.passkey-login__help + .passkey-login__divider { margin-top: 10px; }
.passkey-login__divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: #748088; font-size: 13px; }
.passkey-login__divider::before,
.passkey-login__divider::after { content: ""; height: 1px; flex: 1; background: #dfe4e7; }
.passkey-login__divider span { flex: 0 0 auto; }

#login .passkey-login { margin: 13px 0 2px; }
.fiabe-auth .passkey-login { max-width: 520px; margin: 18px auto 4px; }
.fiabe-auth .passkey-login__button { border-color: #ed8258; background: #ed8258; color: #fff; }
.fiabe-auth .passkey-login__button:hover { background: #d96b42; }

.passkey-quick-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(242, 189, 92, .26);
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
}
.passkey-quick-entry > div:first-child { min-width: 0; }
.passkey-quick-entry strong,
.passkey-quick-entry span { display: block; }
.passkey-quick-entry strong { color: #fff7e7; font-size: 17px; }
.passkey-quick-entry span { margin-top: 2px; color: #c8d6d3; font-size: 14px; line-height: 1.35; }
.passkey-quick-entry .passkey-login { width: min(100%, 270px); flex: 0 0 270px; }
.passkey-quick-entry .passkey-login__button { border-color: #ee794c; background: #ee794c; }
.passkey-quick-entry .passkey-login__button:hover { background: #d6633a; }
.passkey-quick-entry .passkey-status { text-align: center; }
.passkey-quick-entry .passkey-login__help { display: none; }

.fiabe-page .passkey-card {
  border-color: rgba(242, 189, 92, .28);
  background: linear-gradient(135deg, #10323d 0%, #173e43 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .2);
  color: #fff7e7;
}
.fiabe-page .passkey-card__icon { background: rgba(255, 255, 255, .09); color: #f2bd5c; box-shadow: none; }
.fiabe-page .passkey-card__eyebrow { color: #f2bd5c; }
.fiabe-page .passkey-card__body,
.fiabe-page .passkey-status,
.fiabe-page .passkey-unsupported,
.fiabe-page .passkey-card__empty { color: #c8d6d3; }
.fiabe-page .passkey-login__help { color: #b8cac7; }
.fiabe-page .passkey-button { border-color: #ee794c; background: #ee794c; }
.fiabe-page .passkey-button:hover { background: #d6633a; }
.fiabe-page .passkey-later { color: #d3dfdc; }
.fiabe-page .passkey-list li { border-color: rgba(242, 189, 92, .2); background: rgba(255, 255, 255, .055); }
.fiabe-page .passkey-list strong { color: #fff7e7; }
.fiabe-page .passkey-list span { color: #b8cac7; }

@media (max-width: 620px) {
  .passkey-card { grid-template-columns: 1fr; gap: 11px; padding: 17px; }
  .passkey-card__icon { width: 48px; height: 48px; border-radius: 13px; }
  .passkey-card__icon svg { width: 29px; height: 29px; }
  .passkey-card h2 { font-size: 21px; }
  #profile .container .rigth_container .passkey-card h2 { font-size: 21px; }
  .passkey-card__body { font-size: 15px; }
  .passkey-button { width: 100%; }
  .passkey-later { width: 100%; padding: 5px; }
  .passkey-list li { align-items: flex-start; }
  .passkey-quick-entry { display: block; }
  .passkey-quick-entry .passkey-login { width: 100%; margin-top: 12px; }
}