@import url(../vendor/sweetalert2.min.css);
:root {
  --swal2-backdrop: color-mix(in srgb, var(--ink) 42%, transparent);
  --swal2-backdrop-transition: background-color var(--dur) var(--ease-out);
  --swal2-container-padding: 16px;
}
.tp-swal {
  inline-size: min(440px, 100%);
  padding: 36px clamp(20px, 6vw, 36px) 28px;
  border: 1px solid var(--ink-line); border-radius: var(--radius-lg);
  background: var(--surface-warm); color: var(--ink); box-shadow: var(--shadow-lg);
  font-family: var(--font-body); font-size: var(--text-md);
}
.tp-swal__title {
  padding: 0; margin-block-start: 20px;
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl);
  letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; color: var(--ink);
}
.tp-swal__text {
  padding: 0; margin-block-start: 12px;
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; text-wrap: pretty; color: var(--ink-subtle);
}
.tp-swal__icon {
  box-sizing: border-box; inline-size: auto; block-size: auto; margin: 0 auto;
  border: 0; border-radius: 0; line-height: 1; zoom: 1; cursor: default;
}
.tp-swal__icon .swal2-icon-content { font-size: inherit; display: block }
.tp-swal__glyph {
  display: grid; place-items: center; inline-size: 92px; block-size: 92px; border-radius: 50%;
  background: var(--mint-bg); color: var(--ink); --icon-accent: var(--art-forest);
}
.tp-swal__glyph .icon { inline-size: 64px; block-size: 64px }
.tp-swal__glyph--err { background: var(--peach-bg); --icon-accent: var(--art-peach-deep) }
.tp-swal__glyph--wait { background: var(--butter-bg); --icon-accent: var(--art-mustard-deep) }
.tp-swal__actions { inline-size: 100%; margin: 28px 0 0; padding: 0; gap: 12px; justify-content: center }
.tp-swal__actions .btn { margin: 0; line-height: calc(var(--h) - 2px) }
.tp-swal--in { animation: tp-swal-in var(--dur) var(--ease-out) }
.tp-swal--out { animation: tp-swal-out var(--dur-fast) ease-in forwards }
@media (prefers-reduced-motion: no-preference) {
  .tp-swal__icon--in .tp-swal__glyph { animation: tp-swal-plate var(--dur) var(--ease-out) both }
  .tp-swal__icon--in .icon { animation: tp-swal-raise 640ms var(--ease-snap) 90ms both }
  .tp-swal__icon--in .tp-swal__glyph--err .icon { animation-name: tp-swal-turn }
}
@keyframes tp-swal-in { from { opacity: 0; transform: scale(.96) } }
@keyframes tp-swal-out { to { opacity: 0; transform: scale(.98) } }
@keyframes tp-swal-plate { from { opacity: 0; transform: scale(.8) } }
@keyframes tp-swal-raise { from { opacity: 0; transform: translateY(16px) scale(.7) } }
@keyframes tp-swal-turn { from { opacity: 0; transform: translateX(14px) } 60% { transform: translateX(-3px) } }
.form-status { font-size: var(--text-sm); font-weight: 500 }
.form-status:empty { display: none }
.form-status[data-tone="ok"] { color: var(--ok) }
.form-status[data-tone="err"] { color: var(--err) }