:root {
    --toast-border: rgba(0, 0, 0, 0.08);
    --toast-shadow: 0 8px 20px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
    --toast-progress: #8DABF8;
    --toast-close-hover: rgba(0,0,0,0.06);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --toast-border: rgba(255, 255, 255, 0.12);
      --toast-shadow: 0 12px 30px rgba(0,0,0,0.35);
      --toast-close-hover: rgba(255,255,255,0.08);
    }
  }

  @keyframes toastIn {
    from { opacity: 0; transform: translateX(40px) scale(0.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
  }

  @keyframes toastOut {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to { opacity: 0; transform: translateX(40px) scale(0.96); }
  }

  @keyframes progress {
    from { width: 100%; }
    to { width: 0%; }
  }

  .toast-in { animation: toastIn 0.28s ease forwards; }
  .toast-out { animation: toastOut 0.22s ease forwards; }

  .toast-card {
    border: 1px solid var(--toast-border);
    box-shadow: var(--toast-shadow);
    color: var(--toast-text);
    backdrop-filter: blur(14px);
  }

  .toast-text-main { color: var(--toast-text); }
  .toast-text-sub { color: var(--toast-subtext); }

  .toast-progress {
    animation: progress linear forwards;
    background: var(--toast-progress);
  }

  .toast-paused .toast-progress {
    animation-play-state: paused;
  }

  .toast-close:hover {
    background: var(--toast-close-hover);
  }