.toasts{
      position:fixed;
      right:18px;
      bottom:18px;
      display:flex;
      flex-direction:column;
      gap:10px;
      z-index:50;
    }
    .toast{
      background: var(--warn);
      border:1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding:12px 12px;
      width: 320px;
      display:flex;
      align-items:flex-start;
      gap:10px;
      animation: pop .18s ease;
    }
    @keyframes pop{ from{ transform:translateY(6px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
    .toast .t-dot{
      width:10px; height:10px; border-radius:50%;
      margin-top:4px;
      background: var(--brand);
      box-shadow: 0 0 0 3px rgba(99,91,255,.18);
    }
    .toast.good .t-dot{ background: var(--good); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
    .toast.bad .t-dot{ background: var(--bad); box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
    .toast .t-title{ font-weight:600; font-size:13px; margin:0; }
    .toast .t-msg{ margin:3px 0 0; font-size:12px; color:var(--text); line-height:1.35; }
    .toast .t-x{
      margin-left:auto;
      border:0;
      background:transparent;
      color:var(--text);
      cursor:pointer;
      font-size:16px;
      line-height:1;
      padding:2px 6px;
    }