/* Toasts */
.toast-container {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
  }
  
  .toast {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: start;
    gap: 10px;
    min-width: 280px;
    max-width: min(92vw, 420px);
    padding: 12px 12px 12px 10px;
    border-radius: 10px;
    background: #1f1f23;
    color: #f2f2f2;
    box-shadow: 0 10px 32px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.2);
    transform: translateY(8px);
    opacity: 0;
    animation: toast-in .18s ease-out forwards;
  }
  
  .toast.is-hide {
    animation: toast-out .16s ease-in forwards;
  }
  
  .toast__icon {
    width: 24px; height: 24px; border-radius: 6px;
    margin-top: 2px;
  }
  
  .toast__title {
    font-weight: 700;
    margin-bottom: 2px;
  }
  .toast__msg {
    opacity: .9;
  }
  
  .toast__close {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
    opacity: .7;
  }
  .toast__close:hover { opacity: 1; }
  
  .toast--info    { border-left: 4px solid #4f8cff; }
  .toast--success { border-left: 4px solid #2ecc71; }
  .toast--warning { border-left: 4px solid #f1c40f; }
  .toast--error   { border-left: 4px solid #e74c3c; }
  
  .toast--info    .toast__icon { background: #4f8cff; }
  .toast--success .toast__icon { background: #2ecc71; }
  .toast--warning .toast__icon { background: #f1c40f; }
  .toast--error   .toast__icon { background: #e74c3c; }
  
  @keyframes toast-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
  }
  @keyframes toast-out {
    from { transform: translateY(0);   opacity: 1; }
    to   { transform: translateY(8px); opacity: 0; }
  }