/* Upload progress overlay styles (used by js/loader.js). */
    /* =====================================================================
       UPLOAD LOADER (additive). Same kinetic "LOADING" + pill bar in both
       themes; only the colour palette changes (driven by data-theme).
       ===================================================================== */
    html[data-theme="midnight"] #upLoader, :root:not([data-theme]) #upLoader {
      --ul-bg: #07090E;
      --ul-ink: #F4F7FB;
      --ul-accent: #22D3EE;
      --ul-accent-2: #10B981;
      --ul-dim: #8791A8;
      --ul-track: rgba(255, 255, 255, 0.06);
      --ul-line: #F4F7FB;
      --ul-bar-fill: linear-gradient(90deg, #6366F1, #22D3EE 55%, #10B981);
      --ul-bar-shadow: 0 0 26px -4px rgba(34, 211, 238, 0.55);
      --ul-word-glow: 0 0 34px rgba(34, 211, 238, 0.28);
      --ul-grid: rgba(34, 211, 238, 0.07);
    }
    html[data-theme="matinee"] #upLoader {
      --ul-bg: #F6F3EC;
      --ul-ink: #111315;
      --ul-accent: #E11D48;
      --ul-accent-2: #2563EB;
      --ul-dim: #5E646C;
      --ul-track: #FFFFFF;
      --ul-line: #111315;
      --ul-bar-fill: linear-gradient(90deg, #E11D48, #E11D48);
      --ul-bar-shadow: 4px 4px 0 #111315;
      --ul-word-glow: none;
      --ul-grid: rgba(17, 19, 21, 0.06);
    }
    #upLoader {
      position: fixed; inset: 0; z-index: 9990;
      display: flex; align-items: center; justify-content: center;
      background: var(--ul-bg);
      color: var(--ul-ink);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 320ms;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
    }
    #upLoader.ul-on { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
    #upLoader::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(var(--ul-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ul-grid) 1px, transparent 1px);
      background-size: 48px 48px;
      -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
      mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
    }
    html.ul-lock, html.ul-lock body { overflow: hidden; }

    /* HUD corners (from the FILE_08 reference) */
    #upLoader .ul-hud {
      position: absolute; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--ul-dim);
    }
    #upLoader .ul-tl { top: calc(22px + env(safe-area-inset-top, 0px)); left: 24px; }
    #upLoader .ul-tr { top: calc(22px + env(safe-area-inset-top, 0px)); right: 24px; }
    #upLoader .ul-bl { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); left: 24px; }
    #upLoader .ul-br { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); right: 24px; }
    #upLoader .ul-cross { position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5px; color: var(--ul-ink); opacity: .75; }
    #upLoader .ul-cross::before, #upLoader .ul-cross::after { content: ''; position: absolute; background: currentColor; }
    #upLoader .ul-cross::before { left: 5px; top: 0; width: 1px; height: 11px; }
    #upLoader .ul-cross::after { top: 5px; left: 0; height: 1px; width: 11px; }
    #upLoader .ul-cl { left: 24px; } #upLoader .ul-cr { right: 24px; }

    #upLoader .ul-stage {
      position: relative; z-index: 1; width: 100%; padding: 0 20px;
      display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 5vh, 40px);
    }

    /* Kinetic LOADING word */
    #upLoader .ul-word {
      display: flex; justify-content: center;
      font-family: 'Chakra Petch', 'Plus Jakarta Sans', system-ui, sans-serif;
      font-weight: 700; text-transform: uppercase; line-height: 1;
      font-size: clamp(46px, 13vw, 128px);
      letter-spacing: 0.015em;
      text-shadow: var(--ul-word-glow);
    }
    #upLoader .ul-l {
      position: relative; display: inline-block; color: transparent;
      -webkit-text-stroke: 2px var(--ul-ink);
    }
    #upLoader .ul-l::before, #upLoader .ul-l::after {
      content: attr(data-c); position: absolute; left: 0; top: 0;
      color: var(--ul-ink); -webkit-text-stroke: 0;
    }
    /* solid fill that sweeps through each letter, staggered */
    #upLoader .ul-l::after {
      clip-path: inset(0 100% 0 0);
      animation: ul-fill 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
      animation-delay: calc(var(--i) * 0.13s);
    }
    /* diagonal glitch slice (the cut look in the reference) */
    #upLoader .ul-l::before {
      color: var(--ul-accent);
      clip-path: polygon(-40% 0, -20% 0, -50% 100%, -70% 100%);
      animation: ul-slice 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
      animation-delay: calc(var(--i) * 0.13s + 0.18s);
      z-index: 1;
    }
    @keyframes ul-fill {
      0%   { clip-path: inset(0 100% 0 0); }
      38%  { clip-path: inset(0 0 0 0); }
      62%  { clip-path: inset(0 0 0 0); }
      100% { clip-path: inset(0 0 0 100%); }
    }
    @keyframes ul-slice {
      0%   { clip-path: polygon(-40% 0, -20% 0, -50% 100%, -70% 100%); }
      55%  { clip-path: polygon(120% 0, 140% 0, 110% 100%, 90% 100%); }
      100% { clip-path: polygon(120% 0, 140% 0, 110% 100%, 90% 100%); }
    }

    /* 0 to 100 pill bar (no text) */
    #upLoader .ul-bar {
      position: relative; width: min(440px, 76vw); height: 24px; padding: 3px;
      border: 3px solid var(--ul-line); border-radius: 999px;
      background: var(--ul-track);
      box-shadow: var(--ul-bar-shadow);
      overflow: hidden;
    }
    #upLoader .ul-bar-fill {
      position: relative; height: 100%; width: 100%; border-radius: 999px;
      background: var(--ul-bar-fill);
      transform-origin: left center; transform: scaleX(0);
      transition: transform 260ms linear;
      overflow: hidden;
    }
    #upLoader .ul-bar-fill::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
      transform: translateX(-100%);
      animation: ul-shine 1.4s linear infinite;
    }
    @keyframes ul-shine { to { transform: translateX(100%); } }

    /* Thank-you line (appears once the upload has finished) */
    #upLoader .ul-thanks {
      min-height: 1.4em; text-align: center; max-width: 92vw;
      font-family: 'Chakra Petch', system-ui, sans-serif; font-weight: 600;
      font-size: clamp(15px, 3.6vw, 22px); letter-spacing: 0.04em;
      color: var(--ul-ink);
      opacity: 0; transform: translateY(8px);
      transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    #upLoader .ul-thanks b { color: var(--ul-accent); font-weight: 700; }
    #upLoader.ul-done .ul-thanks { opacity: 1; transform: none; }
    /* on completion: every letter resolves to solid, slice stops */
    #upLoader.ul-done .ul-l { -webkit-text-stroke: 0; color: var(--ul-ink); }
    #upLoader.ul-done .ul-l::before, #upLoader.ul-done .ul-l::after { animation: none; clip-path: inset(0 0 0 0); color: var(--ul-ink); }
    #upLoader.ul-done .ul-l::before { clip-path: polygon(0 0, 0 0, 0 0); }
    #upLoader.ul-done .ul-bar-fill::after { animation: none; opacity: 0; }

    @media (prefers-reduced-motion: reduce) {
      #upLoader .ul-l::before { display: none; }
      #upLoader .ul-l::after { animation: none; clip-path: inset(0 0 0 0); opacity: .35; }
      #upLoader .ul-bar-fill::after { animation: none; }
    }