/* Root positioner (created by JS) */
.toast-root{
    position: fixed;
    inset: 12px 12px auto auto;                /* top-right */
    display: grid;
    gap: 10px;
    width: min(420px, calc(100vw - 24px));
    z-index: 9999;
    pointer-events: none;                       /* clicks only on children */
  }
  
  /* Toast base */
  .toast{
    pointer-events: auto;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 12px 12px 12px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    box-shadow: 0 10px 30px rgba(2,6,23,.18);
    transform: translateX(24px);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease, height .22s ease, margin .22s ease;
    backdrop-filter: blur(4px);
  }
  
  /* States */
  .toast.is-in  { transform: none; opacity: 1; }
  .toast.is-out { transform: translateX(24px); opacity: 0; }
  
  /* Content */
  .toast__icon{
    width: 36px; height: 36px; border-radius: 10px;
    display:grid; place-items:center; background: #fff6; color:#111a;
  }
  .toast__icon svg{ width: 20px; height: 20px; fill: currentColor; }
  .toast__content{ min-width:0; }
  .toast__title{ font-weight: 800; margin-top:2px; font-size: 14px; }
  .toast__msg{ font-size: 13px; color: #0f172a; opacity: .8; }
  
  /* Close button */
  .toast__close{
    align-self: start;
    border: 0; background: transparent; cursor: pointer;
    color: inherit; font-size: 18px; line-height: 1;
    padding: 0 6px; border-radius: 8px;
  }
  .toast__close:hover{ background: #0000000d; }
  
  /* Variants (pale background + border + icon color) */
  .toast--success{ background: #ecfdf5; border-color: #a7f3d0; color:#065f46; }
  .toast--success .toast__icon{ background:#10b98122; color:#059669; }
  
  .toast--warning{ background: #fef3c7; border-color: #fde68a; color:#92400e; }
  .toast--warning .toast__icon{ background:#f59e0b22; color:#d97706; }
  
  .toast--error{ background: #fee2e2; border-color: #fca5a5; color:#991b1b; }
  .toast--error .toast__icon{ background:#ef444422; color:#dc2626; }
  
  .toast--info{ background: #dbeafe; border-color: #93c5fd; color:#1e3a8a; }
  .toast--info .toast__icon{ background:#3b82f622; color:#2563eb; }
  
  /* Respect safe areas (iOS) */
  @supports (padding: max(0px)) {
    .toast-root{ inset: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) auto auto; }
  }