/* LOADING OVERLAY */
    .loading-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(240, 243, 248, 0.88);
      z-index: 8000;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 16px;
      backdrop-filter: blur(3px)
    }

    .loading-overlay.active {
      display: flex
    }

    .spinner {
      width: 40px;
      height: 40px;
      border: 3px solid var(--border);
      border-top-color: var(--cyan);
      border-radius: 50%;
      animation: spin 0.7s linear infinite
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .loading-text {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--text-dim);
      letter-spacing: 1px;
      font-weight: 600
    }

    /* TOAST */
    .toast-wrap {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-end;
      pointer-events: none
    }

    .toast {
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      animation: tin 0.3s ease;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid;
      max-width: 320px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
    }

    .tgreen {
      background: #fff;
      border-color: rgba(26, 115, 64, 0.3);
      color: var(--green)
    }

    .tred {
      background: #fff;
      border-color: rgba(192, 57, 43, 0.3);
      color: var(--red)
    }

    .tblue {
      background: #fff;
      border-color: rgba(30, 77, 140, 0.3);
      color: var(--cyan)
    }

    .tamber {
      background: #fff;
      border-color: rgba(183, 121, 31, 0.3);
      color: var(--amber)
    }

    @keyframes tin {
      from {
        opacity: 0;
        transform: translateX(20px)
      }

      to {
        opacity: 1;
        transform: translateX(0)
      }
    }