/* LOADER — transparent page, compact themed card */
    /* ================================================================ */
    .custom-loader {
      position: fixed;
      inset: 0;
      z-index: 2147483000;
      background: transparent;
      backdrop-filter: none;
      display: none;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .custom-loader.active {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: all !important;
    }
    .loader-container {
      width: min(310px, calc(100vw - 32px));
      min-height: 188px;
      padding: 22px 24px 18px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-radius: 18px;
      background: rgba(255,255,255,.50);
      border: 1px solid rgba(255,255,255,.68);
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      animation: loaderCardIn .18s ease-out;
    }
    body.night-mode .loader-container {
      background: rgba(255,255,255,.50);
      border-color: rgba(255,255,255,.62);
      box-shadow: none;
    }

    .loader-visual {
      width: 110px;
      height: 110px;
      display: grid;
      place-items: center;
      margin: 0 auto 13px;
      flex: 0 0 auto;
    }

    /* Model loader — liquid motion preserved, with a transparent goo filter. */
    .loader-model-art {
      width: 80px; aspect-ratio: 1; border: 10px solid transparent; padding: 5px; box-sizing: border-box;
      --loader-shape: #747982;
      background:
        radial-gradient(farthest-side,var(--loader-shape) 98%,transparent) 0 0/20px 20px no-repeat,
        conic-gradient(from 90deg at 10px 10px,transparent 90deg,var(--loader-shape) 0) content-box,
        conic-gradient(from -90deg at 40px 40px,transparent 90deg,var(--loader-shape) 0) content-box;
      filter: url(#mockupLoaderGoo); animation: l11 2s infinite linear; box-shadow:none;
    }
    body.night-mode .loader-model-art { --loader-shape:#747982; }

    /* Export loader — two fixed rectangles; circle moves center-to-center. */
    .loader-export-art { width:100px; height:60px; box-sizing:border-box; display:none; position:relative; filter:url(#mockupLoaderGoo); box-shadow:none; }
    .loader-export-art::before { content:""; position:absolute; width:20px; height:40px; left:10px; top:10px; border-radius:2px; background:#747982; box-shadow:60px 0 0 #747982; }
    .loader-export-art::after { content:""; position:absolute; width:20px; height:20px; left:10px; top:20px; border-radius:50%; background:#747982; animation:l10 1.15s infinite alternate cubic-bezier(.55,.05,.45,.95); }
    body.night-mode .loader-export-art::before,
    body.night-mode .loader-export-art::after { background:#747982; }
    body.night-mode .loader-export-art::before { box-shadow:60px 0 0 #747982; }
    .custom-loader.exporting .loader-model-art { display:none; }
    .custom-loader.exporting .loader-export-art { display:block; }
    .custom-loader:not(.exporting) .loader-model-art { display:block; }
    .custom-loader:not(.exporting) .loader-export-art { display:none; }

    .loader-text {
      color: #4c5159;
      font-size: 13px;
      font-weight: 750;
      margin-bottom: 11px;
      line-height: 1.65;
    }
    body.night-mode .loader-text { color:#4c5159; }

    .loader-progress {
      width: 100%;
      height: 4px;
      background: rgba(65,70,78,.12);
      border-radius: 999px;
      overflow: hidden;
    }
    body.night-mode .loader-progress { background:rgba(65,70,78,.12); }

    .loader-progress-bar {
      height: 100%;
      width: 0%;
      background: #747982;
      border-radius: 999px;
      transition: width .2s ease;
    }
    .loader-percent {
      color: #666b73;
      font-size: 10px;
      margin-top: 7px;
      font-weight: 650;
    }
    body.night-mode .loader-percent { color:#666b73; }


    @keyframes l11 {
      0%   {background-position:0 0}
      25%  {background-position:100% 0}
      50%  {background-position:100% 100%}
      75%  {background-position:0% 100%}
      100% {background-position:0% 0}
    }
    @keyframes l10 {
      0%,4%    { transform: translateX(0); }
      96%,100% { transform: translateX(60px); }
    }
    }
    @keyframes loaderCardIn {
      from { opacity:0; transform:translateY(5px) scale(.985); }
      to   { opacity:1; transform:none; }
    }