#toast {
  position: fixed;
  inset: 20px 20px auto auto;
  width: min(420px, calc(100% - 32px));
  max-width: none;
  padding: 0;
  display: grid;
  gap: .75rem;
  background: transparent;
  color: inherit;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  z-index: 1000;
  pointer-events: none;
}

.toast-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 34px;
  align-items: start;
  gap: .75rem;
  padding: 1rem;
  background: #1d140f;
  color: #fff5ec;
  border: 1px solid #75401f;
  border-left: 5px solid #ff741f;
  border-radius: 12px;
  box-shadow: 0 18px 55px #0009;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-12px) scale(.98);
  transition: opacity .2s, transform .2s;
}

.toast-card.visible { opacity: 1; transform: none; }
.toast-card.leaving { opacity: 0; transform: translateY(-8px) scale(.98); }
.toast-card.success { border-left-color: #55c98a; }
.toast-card.error { border-left-color: #ff6262; }
.toast-card.warning { border-left-color: #ffb14d; }

.toast-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ff741f;
  color: #170a03;
  font-weight: 900;
}

.toast-card.success .toast-icon { background: #55c98a; }
.toast-card.error .toast-icon { background: #ff6262; }
.toast-card.warning .toast-icon { background: #ffb14d; }
.toast-copy { display: grid; gap: .18rem; min-width: 0; }
.toast-copy strong { font-size: .92rem; letter-spacing: .01em; }
.toast-copy > span { font-size: .84rem; line-height: 1.4; color: #e8cfc0; overflow-wrap: anywhere; }

.toast-close {
  min-height: 32px;
  padding: .1rem;
  border: 0;
  background: transparent;
  color: #d7b9a7;
  font-size: 1.35rem;
  line-height: 1;
}

.toast-close:hover { background: #ffffff12; color: #fff; transform: none; }

[data-theme="light"] .toast-card {
  background: #fffaf5;
  color: #26150b;
  border-color: #d8a47d;
  box-shadow: 0 18px 45px #5823062b;
}

[data-theme="light"] .toast-copy > span { color: #69432d; }
[data-theme="light"] .toast-close { color: #74442c; }

@media (max-width: 720px) {
  #toast { inset: 10px 10px auto; width: auto; }
  .toast-card { grid-template-columns: 34px minmax(0, 1fr) 30px; padding: .85rem; gap: .6rem; }
  .toast-icon { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast-card { transition: none; }
}

@media print {
  #toast { display: none !important; }
}