/* full‐screen translucent blur overlay */
    #loading-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(15, 23, 42, 0.5);     /* semi‐transparan */
      backdrop-filter: blur(8px);             /* blur modern */
      -webkit-backdrop-filter: blur(8px);     /* Safari */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    /* spinner container */
    .neon-spinner {
      position: relative;
      width: 120px;
      height: 120px;
    }

    /* common arc style */
    .neon-spinner .arc {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      border-radius: 50%;
      border: 8px solid transparent;
    }

    /* blue arc rotating clockwise */
    .neon-spinner .arc.blue {
      border-top-color: #00CFFF;
      box-shadow:
        0 0 8px #00CFFF,
        0 0 16px #00CFFF,
        0 0 24px #00CFFF;
      animation: spin 1s linear infinite;
    }

    /* purple arc rotating counter-clockwise */
    .neon-spinner .arc.purple {
      border-right-color: #C200FF;
      box-shadow:
        0 0 8px #C200FF,
        0 0 16px #C200FF,
        0 0 24px #C200FF;
      animation: spin-rev 1.5s linear infinite;
    }

    /* “LOADING” neon text */
    .loading-text {
      margin-top: 24px;
      font-family: "Inter", sans-serif;
      font-size: 1.25rem;
      color: #00CFFF;
      text-shadow:
        0 0 4px #00CFFF,
        0 0 8px #C200FF,
        0 0 12px #C200FF;
      letter-spacing: 0.1em;
    }

    /* keyframes */
    @keyframes spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @keyframes spin-rev {
      from { transform: rotate(360deg); }
      to   { transform: rotate(0deg); }
    }