:root {
  --toast-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --toast-radius: 18px;
  --toast-shadow: 0 4px 14px -2px rgba(0,0,0,0.18), 0 2px 6px -1px rgba(0,0,0,0.08);
  --toast-info-bg: #1e293b;
  --toast-info-border: #334155;
  --toast-success-bg: #065f46;
  --toast-success-border: #059669;
  --toast-error-bg: #7f1d1d;
  --toast-error-border: #dc2626;
  --toast-warning-bg: #92400e;
  --toast-warning-border: #d97706;
  --toast-duration: 5200ms;
}

#toast-container {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--toast-font);
  color: #fff;
  font-weight: 500;
  line-height: 1.35;
  padding: 16px 18px 16px 16px;
  border-radius: var(--toast-radius);
  box-shadow: var(--toast-shadow);
  border: 2px solid transparent;
  background: var(--toast-info-bg);
  overflow: hidden;
  animation: toast-in .35s cubic-bezier(.4,.0,.2,1);
  pointer-events: auto;
}

.toast.success { background: var(--toast-success-bg); border-color: var(--toast-success-border); }
.toast.error { background: var(--toast-error-bg); border-color: var(--toast-error-border); }
.toast.warning { background: var(--toast-warning-bg); border-color: var(--toast-warning-border); }
.toast.info { background: var(--toast-info-bg); border-color: var(--toast-info-border); }

.toast .toast-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; opacity: .95; }
.toast .toast-icon svg { width: 26px; height: 26px; stroke: #fff; stroke-width: 2; fill: none; }
.toast .toast-body { font-size: 15px; letter-spacing: .2px; }
.toast .toast-close { background: transparent; border: none; padding: 4px; margin: -4px -6px 0 0; cursor: pointer; display: flex; align-items: center; opacity: .85; transition: opacity .15s; }
.toast .toast-close:hover { opacity: 1; }
.toast .toast-close svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.2; }

.toast .life-bar { position: absolute; left: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.34); width: 100%; transform-origin: left; animation: life linear forwards; }
.toast.success .life-bar { background: linear-gradient(90deg,#6ee7b7,#10b981); }
.toast.error .life-bar { background: linear-gradient(90deg,#fda4af,#dc2626); }
.toast.warning .life-bar { background: linear-gradient(90deg,#fcd34d,#d97706); }
.toast.info .life-bar { background: linear-gradient(90deg,#93c5fd,#3b82f6); }

@keyframes life { from { transform: scaleX(1);} to { transform: scaleX(0);} }
@keyframes toast-in { from { transform: translateY(-12px) scale(.95); opacity:0;} to { transform: translateY(0) scale(1); opacity:1;} }
@keyframes toast-out { to { transform: translateY(-8px); opacity:0;} }

.toast.removing { animation: toast-out .28s ease forwards; }

/* Mobile adjustments */
@media (max-width: 520px) {
  #toast-container { top: auto; bottom: 14px; right: 50%; transform: translateX(50%); width: min(94%,420px); }
  .toast { border-radius: 22px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --toast-info-bg:#1f2937;
    --toast-info-border:#334155;
    --toast-success-bg:#065f46;
    --toast-success-border:#059669;
    --toast-error-bg:#7f1d1d;
    --toast-error-border:#dc2626;
    --toast-warning-bg:#92400e;
    --toast-warning-border:#d97706;
  }
  .toast { color:#f1f5f9; }
}
html[data-theme='dark'] {
  --toast-info-bg:#1f2937;
  --toast-info-border:#334155;
  --toast-success-bg:#065f46;
  --toast-success-border:#059669;
  --toast-error-bg:#7f1d1d;
  --toast-error-border:#dc2626;
  --toast-warning-bg:#92400e;
  --toast-warning-border:#d97706;
}
html[data-theme='light'] {
  --toast-info-bg:#1e293b;
  --toast-info-border:#334155;
  --toast-success-bg:#065f46;
  --toast-success-border:#059669;
  --toast-error-bg:#7f1d1d;
  --toast-error-border:#dc2626;
  --toast-warning-bg:#92400e;
  --toast-warning-border:#d97706;
}