/* ==========================================================================
   Toasts — what happened, said once, and gone.
   ========================================================================== */
.kd-toasts {
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}
.kd-toast {
  --t-bg: rgba(237, 247, 236, .82);
  --t-bd: var(--ds-green-200, #b9d6b4);
  --t-fg: var(--ds-green-900, #1f3a1b);
  --t-ac: var(--ds-green-600, #4f7949);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  overflow: hidden;
  border: 1px solid var(--t-bd);
  border-radius: 14px;
  background: var(--t-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(20, 30, 20, .14);
  color: var(--t-fg);
  pointer-events: auto;
  cursor: pointer;
  touch-action: pan-y;
  animation: kd-toast-in .38s cubic-bezier(.2, .9, .3, 1.2) both;
  transition: transform .26s ease, opacity .26s ease;
}
.kd-toast.is-leaving { opacity: 0 !important; transform: translateY(-14px) scale(.96) !important; }
.kd-toast--error   { --t-bg: rgba(253, 236, 236, .86); --t-bd: var(--ds-red-100, #f6c9c9);    --t-fg: var(--ds-red-900, #5c1414);    --t-ac: var(--ds-red-600, #d03a3a); }
.kd-toast--warning { --t-bg: rgba(255, 246, 219, .88); --t-bd: var(--ds-yellow-100, #f6e0a0); --t-fg: var(--ds-yellow-900, #5a4100); --t-ac: var(--ds-yellow-600, #e3a815); }
.kd-toast--info    { --t-bg: rgba(228, 243, 249, .86); --t-bd: var(--ds-blue-100, #b6dcea);    --t-fg: var(--ds-blue-900, #0f3a4d);    --t-ac: var(--ds-blue-600, #1f7fa3); }

.kd-toast__icon { flex: 0 0 auto; width: 34px; height: 34px; color: var(--t-ac); }
.kd-toast__icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.kd-toast__ring { stroke-width: 2.6; stroke-dasharray: 145; stroke-dashoffset: 145; animation: kd-toast-draw .55s .05s ease-out forwards; }
.kd-toast__mark { stroke-dasharray: 50; stroke-dashoffset: 50; animation: kd-toast-draw .4s .42s ease-out forwards; }
.kd-toast__dot  { fill: currentColor; stroke: none; opacity: 0; animation: kd-toast-pop .3s .6s ease-out forwards; }
.kd-toast--warning .kd-toast__icon, .kd-toast--error .kd-toast__icon { animation: kd-toast-nudge .5s .75s ease both; }

.kd-toast__body { flex: 1 1 auto; min-width: 0; }
.kd-toast__body p { margin: 0; font-size: 15.5px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.kd-toast__body p + p { margin-top: 2px; font-weight: 500; }

.kd-toast__bar {
  position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: var(--t-ac); opacity: .55;
  transform-origin: right center;
  animation: kd-toast-bar linear forwards;
}
html[dir="ltr"] .kd-toast__bar { transform-origin: left center; }

@keyframes kd-toast-in   { from { opacity: 0; transform: translateY(-18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes kd-toast-draw { to { stroke-dashoffset: 0; } }
@keyframes kd-toast-pop  { from { opacity: 0; transform: scale(.2); transform-origin: center; } to { opacity: 1; transform: scale(1); } }
@keyframes kd-toast-bar  { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes kd-toast-nudge { 0%, 100% { transform: none; } 25% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) {
  .kd-toast, .kd-toast__ring, .kd-toast__mark, .kd-toast__dot, .kd-toast__icon { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
}