.logout-modal {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  background: rgba(45, 43, 40, .38);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.logout-dialog {
  width: min(100%, 384px);
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(31, 31, 31, .22);
  animation: logout-dialog-in .18s ease-out;
}

.logout-dialog-heading {
  display: flex;
  gap: 12px;
  align-items: center;
}

.logout-dialog-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: #fff1f1;
  color: #ff3542;
  font-size: 18px;
}

.logout-dialog h2 {
  margin: 0;
  color: #172033;
  font-size: 15px;
  line-height: 1.3;
}

.logout-dialog p {
  margin: 13px 0 20px;
  color: #718096;
  font-size: 13px;
  line-height: 1.5;
}

.logout-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.logout-dialog-actions button {
  min-width: 64px;
  height: 41px;
  padding: 0 15px;
  border-radius: 11px;
  font: 700 13px inherit;
  cursor: pointer;
}

.logout-stay {
  border: 1px solid #e1e5ea;
  background: #fff;
  color: #56657a;
}

.logout-confirm {
  border: 1px solid #ff3542;
  background: #ff3542;
  color: #fff;
  box-shadow: 0 7px 14px rgba(255, 53, 66, .18);
}

.logout-dialog-actions button:hover {
  transform: translateY(-1px);
}

@keyframes logout-dialog-in {
  from { opacity: 0; transform: translateY(7px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 430px) {
  .logout-dialog {
    padding: 22px;
    border-radius: 16px;
  }
}