.system-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.system-modal.is-open {
  display: flex;
}

.system-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 24, 34, 0.28);
  backdrop-filter: blur(10px);
  animation: system-modal-backdrop-in 0.16s ease-out;
}

.system-modal__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: saturate(140%);
}

.system-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
  padding: 34px 28px 28px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 28px 70px rgba(34, 42, 58, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.38),
    0 0 36px rgba(255, 122, 202, 0.08);
  text-align: center;
  display: grid;
  justify-items: center;
  row-gap: 12px;
  animation: system-modal-bounce-in 0.16s cubic-bezier(0.18, 0.89, 0.22, 1.18);
}

.system-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 79, 163, 0.14), rgba(255, 138, 61, 0.18));
  color: #ff7a45;
  font-size: 2.6rem;
}

.system-modal__title {
  margin: 0;
  display: inline-flex;
  gap: 0.02em;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.system-modal__title span {
  display: inline-block;
  animation: system-modal-char-bounce 0.44s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
  animation-delay: calc(0.1s + var(--char-delay, 0s));
}

.system-modal__actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

@keyframes system-modal-bounce-in {
  0% {
    opacity: 0;
    transform: translateY(36px) scale(0.9);
  }
  22% {
    opacity: 1;
    transform: translateY(-18px) scale(1.02);
  }
  42% {
    transform: translateY(10px) scale(0.985);
  }
  60% {
    transform: translateY(-6px) scale(1.01);
  }
  76% {
    transform: translateY(4px) scale(0.995);
  }
  90% {
    transform: translateY(-2px) scale(1.002);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes system-modal-backdrop-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes system-modal-char-bounce {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.92) rotate(-4deg);
  }
  35% {
    opacity: 1;
    transform: translateY(-8px) scale(1.06) rotate(3deg);
  }
  62% {
    transform: translateY(4px) scale(0.98) rotate(-2deg);
  }
  82% {
    transform: translateY(-2px) scale(1.02) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}