/* Productscan: nieuwe scan (leeg, video toegevoegd, scan bezig) volgens het goedgekeurde canvas.
   Links de titel met stappen, rechts een telefoon met draaiend randlicht en een ademende gloed.
   Geladen als laatste stylesheet. Elke regel begint met #beoordelaarCenter #scanPanelNew, zodat hij
   de oudere lagen in scan-studio.css en nieuwe-stijl.css wint. De uitslag (fase "done") blijft ongemoeid. */

#beoordelaarCenter #scanPanelNew {
  --ps-blue: #4f6fff;
  --ps-ice: #7c9bff;
  --ps-violet: #a98bff;
  --ps-ok: #2bb98a;
  --ps-pw: 244px;
  --ps-ph: 474px;
}

/* ---------- Indeling ---------- */
#beoordelaarCenter #scanPanelNew .scan-intro { display: none; }
#beoordelaarCenter #scanPanelNew[data-scan-phase="empty"] .eval-intake { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 40px 48px; padding: 24px 0 32px; }
#beoordelaarCenter #scanPanelNew[data-scan-phase="empty"] .eval-intake > * { grid-column: auto; }
#beoordelaarCenter #scanPanelNew[data-scan-phase="empty"] .studio-intro { flex: 999 1 440px; min-width: 0; padding: 0; align-self: center; }
#beoordelaarCenter #scanPanelNew .studio-form-card { display: none !important; }
#beoordelaarCenter #scanPanelNew:not([data-scan-phase="empty"]) .eval-intake > .ps-side { display: none !important; }
#beoordelaarCenter #scanPanelNew .ps-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* Stappen links: stap 1 krijgt een groen vinkje zodra er een video is. */
#beoordelaarCenter #scanPanelNew .studio-intro-steps { max-width: 620px; }
#beoordelaarCenter #scanPanelNew .studio-intro-step-n { display: inline-flex; align-items: center; justify-content: center; position: relative; flex: 0 0 30px; width: 30px; height: 30px; }
#beoordelaarCenter #scanPanelNew .studio-intro-step-n svg { width: 14px; height: 14px; }
#beoordelaarCenter #scanPanelNew .studio-intro-steps li.is-done .studio-intro-step-n { border: 0; background: var(--ps-ok); color: #ffffff; font-size: 0; }
#beoordelaarCenter #scanPanelNew .studio-intro-steps li.is-done .studio-intro-step-n::after { content: ""; width: 12px; height: 7px; margin-top: -3px; border: solid #ffffff; border-width: 0 0 3px 3px; transform: rotate(-45deg); }
#beoordelaarCenter #scanPanelNew .ps-run-steps li.is-done .studio-intro-step-n::after { content: none; }
#beoordelaarCenter #scanPanelNew .studio-intro-steps li.is-done + li .studio-intro-step-n { border: 2px solid var(--ice, #5b8bff); background: #16204a; color: #ffffff; }
#beoordelaarCenter #scanPanelNew .ps-run-steps li.is-active .studio-intro-step-n { border: 0; background: var(--ps-blue); }
#beoordelaarCenter #scanPanelNew .ps-run-steps li.is-active small { color: #a9bcff; }
#beoordelaarCenter #scanPanelNew .ps-run-steps li:last-child .studio-intro-step-n { border: 1px solid rgba(255, 255, 255, 0.12); background: #0e1226; color: var(--muted); }
#beoordelaarCenter #scanPanelNew .ps-step-ring { position: absolute; inset: -4px; border: 2px solid var(--ps-ice); border-radius: 50%; animation: ps-ring 2s ease-out infinite; }
#beoordelaarCenter #scanPanelNew .ps-step-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffffff; animation: ps-blink 1s ease-in-out infinite; }

/* ---------- Telefoon ---------- */
#beoordelaarCenter #scanPanelNew .ps-stage { position: relative; width: min(340px, 100%); height: calc(var(--ps-ph) + 16px); display: flex; align-items: center; justify-content: center; }
#beoordelaarCenter #scanPanelNew .ps-aurora { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; background: radial-gradient(circle, rgba(92, 110, 255, 0.55) 0%, rgba(140, 90, 255, 0.25) 45%, rgba(7, 11, 24, 0) 70%); filter: blur(24px); pointer-events: none; animation: ps-aurora 9s ease-in-out infinite; }
#beoordelaarCenter #scanPanelNew .ps-phone { position: relative; width: var(--ps-pw); height: var(--ps-ph); box-sizing: border-box; padding: 2px; border-radius: 46px; overflow: hidden; isolation: isolate; animation: ps-glow 6s ease-in-out infinite; }
#beoordelaarCenter #scanPanelNew .ps-spin { position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; margin: -350px 0 0 -350px; background: conic-gradient(from 0deg, #2a3a90 0deg, #2a3a90 200deg, #7c9bff 260deg, #ffffff 290deg, #a98bff 320deg, #2a3a90 360deg); animation: ps-spin 4s linear infinite; }
#beoordelaarCenter #scanPanelNew .ps-body { position: relative; width: 100%; height: 100%; box-sizing: border-box; padding: 10px; border-radius: 44px; background: #0b1230; }
#beoordelaarCenter #scanPanelNew .ps-screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #0b1230; }

/* Lege telefoon: zacht licht van boven en een vage TikTok-video (like-knoppen, tekstregels, voortgangsbalk) op 12%. */
#beoordelaarCenter #scanPanelNew .ps-light { position: absolute; inset: 0; background: linear-gradient(180deg, #1c2a6e 0%, #12195a 30%, #0b1230 70%, #0a0f28 100%); pointer-events: none; }
#beoordelaarCenter #scanPanelNew .ps-light::before { content: ""; position: absolute; left: 50%; top: -70px; width: 280px; height: 210px; margin-left: -140px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(140, 165, 255, 0.35) 0%, rgba(140, 165, 255, 0) 70%); }
#beoordelaarCenter #scanPanelNew .ps-ghost { position: absolute; inset: 0; pointer-events: none; }
#beoordelaarCenter #scanPanelNew .ps-ghost i { display: block; background: #a9bcff; }
#beoordelaarCenter #scanPanelNew .ps-ghost-likes { position: absolute; right: 10px; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0.12; }
#beoordelaarCenter #scanPanelNew .ps-ghost-likes i { width: 18px; height: 18px; border-radius: 50%; }
#beoordelaarCenter #scanPanelNew .ps-ghost-likes i:first-child { width: 22px; height: 22px; }
#beoordelaarCenter #scanPanelNew .ps-ghost-text { position: absolute; left: 16px; right: 44px; bottom: 30px; display: flex; flex-direction: column; gap: 7px; opacity: 0.12; }
#beoordelaarCenter #scanPanelNew .ps-ghost-text i { height: 6px; border-radius: 999px; }
#beoordelaarCenter #scanPanelNew .ps-ghost-text i:nth-child(1) { width: 70%; height: 8px; }
#beoordelaarCenter #scanPanelNew .ps-ghost-text i:nth-child(3) { width: 55%; }
#beoordelaarCenter #scanPanelNew .ps-ghost-bar { position: absolute; left: 0; right: 0; bottom: 14px; height: 3px; background: rgba(169, 188, 255, 0.12); }
#beoordelaarCenter #scanPanelNew .ps-ghost-bar i { width: 35%; height: 100%; opacity: 0.12; }

/* Lege telefoon: uploadvak. */
#beoordelaarCenter #scanPanelNew #dropzone { position: absolute; inset: 0; min-height: 0; margin: 0; padding: 18px; border: 0; border-radius: 34px; background: transparent; box-shadow: none; display: flex; align-items: center; justify-content: center; }
#beoordelaarCenter #scanPanelNew #dropzone[hidden] { display: none !important; }
#beoordelaarCenter #scanPanelNew #dropzone:hover, #beoordelaarCenter #scanPanelNew #dropzone.dragover { background: rgba(91, 139, 255, 0.07); }
#beoordelaarCenter #scanPanelNew #dropzone:focus-within { outline: 2px solid var(--ps-ice); outline-offset: -4px; }
#beoordelaarCenter #scanPanelNew #dropEmpty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; padding: 0; text-align: center; }
#beoordelaarCenter #scanPanelNew .ps-icon { position: relative; width: 76px; height: 76px; }
#beoordelaarCenter #scanPanelNew .ps-icon-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: #1a2660; color: #c9d6ff; animation: ps-float 2.4s ease-in-out infinite; }
#beoordelaarCenter #scanPanelNew .ps-icon-dot svg { width: 32px; height: 32px; }
#beoordelaarCenter #scanPanelNew .ps-ripple { position: absolute; inset: 0; border: 2px solid var(--ps-ice); border-radius: 50%; pointer-events: none; animation: ps-ripple 2.4s ease-out infinite; }
#beoordelaarCenter #scanPanelNew .ps-ripple-late { border-color: var(--ps-violet); animation-delay: 1.2s; }
#beoordelaarCenter #scanPanelNew #dropzone .drop-hint { margin: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: #f2f5ff; }
#beoordelaarCenter #scanPanelNew #dropzone .drop-title { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid #4d6cf0; border-radius: 12px; background: #0e1a4a; color: #ffffff; font-size: 15px; font-weight: 600; white-space: nowrap; }
#beoordelaarCenter #scanPanelNew #dropzone .drop-title, #beoordelaarCenter #scanPanelNew #dropzone .drop-formats { display: none; }

/* Telefoon met video. */
#beoordelaarCenter #scanPanelNew .studio-phone-filled { position: absolute; inset: 0; display: block; background: #1a2350; }
#beoordelaarCenter #scanPanelNew .studio-phone-filled[hidden] { display: none; }
#beoordelaarCenter #scanPanelNew .studio-phone-filled video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#beoordelaarCenter #scanPanelNew .ps-play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; padding: 0; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(7, 11, 24, 0.55); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#beoordelaarCenter #scanPanelNew .ps-play svg { position: relative; width: 22px; height: 22px; margin-left: 3px; }
#beoordelaarCenter #scanPanelNew .ps-play .ps-ripple { inset: -1px; border-color: #c9d6ff; }
#beoordelaarCenter #scanPanelNew .ps-play:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
#beoordelaarCenter #scanPanelNew .studio-phone-filled.is-playing .ps-play { opacity: 0; }
#beoordelaarCenter #scanPanelNew .studio-phone-filled.is-playing .ps-play:focus-visible { opacity: 1; }
#beoordelaarCenter #scanPanelNew .studio-phone-label { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(7, 11, 24, 0.72); display: flex; justify-content: space-between; gap: 8px; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0; color: #f2f5ff; text-align: left; }
#beoordelaarCenter #scanPanelNew .studio-phone-label::before { content: none; }
#beoordelaarCenter #scanPanelNew .ps-file { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#beoordelaarCenter #scanPanelNew .ps-meta { flex: 0 0 auto; color: #8892b0; }
#beoordelaarCenter #scanPanelNew .studio-phone-label.is-failed .ps-meta { color: #ff8f9c; }

/* Vakjes per video onder de telefoon. */
#beoordelaarCenter #scanPanelNew .ps-tray { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; max-width: 340px; }
#beoordelaarCenter #scanPanelNew .ps-tray[hidden], #beoordelaarCenter #scanPanelNew .ps-plus[hidden] { display: none; }
#beoordelaarCenter #scanPanelNew .ps-tiles { display: contents; }
#beoordelaarCenter #scanPanelNew .ps-tile { position: relative; width: 44px; height: 60px; }
#beoordelaarCenter #scanPanelNew .ps-tile-pick { position: relative; width: 100%; height: 100%; padding: 0; overflow: hidden; box-sizing: border-box; border: 2px solid #2a355e; border-radius: 10px; background: #1a2350; color: #c9d6ff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#beoordelaarCenter #scanPanelNew .ps-tile-pick video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
#beoordelaarCenter #scanPanelNew .ps-tile-pick svg { position: relative; width: 14px; height: 14px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
#beoordelaarCenter #scanPanelNew .ps-tile.is-on .ps-tile-pick { border-color: #5a78ff; }
#beoordelaarCenter #scanPanelNew .ps-tile.is-failed .ps-tile-pick { border-color: #ff8f9c; }
#beoordelaarCenter #scanPanelNew .ps-tile.is-busy .ps-tile-pick { animation: ps-plus 1.4s ease-in-out infinite; }
#beoordelaarCenter #scanPanelNew .ps-tile-pick:focus-visible, #beoordelaarCenter #scanPanelNew .ps-plus:focus-visible, #beoordelaarCenter #scanPanelNew .ps-tile-x:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
#beoordelaarCenter #scanPanelNew .ps-tile-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; padding: 0; border: 1px solid #34458f; border-radius: 50%; background: #0b1230; color: #c9d6ff; font: 600 14px/1 "IBM Plex Sans", sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#beoordelaarCenter #scanPanelNew .ps-tile-x::after { content: ""; position: absolute; inset: -11px; }
#beoordelaarCenter #scanPanelNew .ps-tile-x:hover { border-color: #ff8f9c; color: #ff8f9c; }
#beoordelaarCenter #scanPanelNew .ps-plus { width: 44px; height: 60px; padding: 0; box-sizing: border-box; border: 2px dashed #34458f; border-radius: 10px; background: transparent; color: #a9bcff; font: 600 20px "IBM Plex Sans", sans-serif; cursor: pointer; animation: ps-plus 2s ease-in-out infinite; }
#beoordelaarCenter #scanPanelNew .ps-plus:hover { border-color: var(--ps-ice); color: #ffffff; }
#beoordelaarCenter #scanPanelNew .ps-count { margin-left: 4px; font-size: 13px; color: var(--muted, #8892b0); white-space: nowrap; }
#beoordelaarCenter #scanPanelNew .ps-retry { margin: -6px 0 0; font-size: 13px; color: #ff8f9c; text-align: center; }
#beoordelaarCenter #scanPanelNew .ps-retry[hidden] { display: none; }
#beoordelaarCenter #scanPanelNew .ps-link { min-height: 32px; padding: 0 4px; border: 0; background: none; color: #c9d6ff; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Grote gloeiende knop. Pas zichtbaar als er een video is. */
#beoordelaarCenter #scanPanelNew #button.ps-go { display: none; width: min(280px, 100%); min-height: 60px; margin: 0; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ps-blue); color: #ffffff; font: 700 18px "Sora", "IBM Plex Sans", sans-serif; letter-spacing: 0.01em; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 10px 40px rgba(84, 120, 255, 0.45); }
#beoordelaarCenter #scanPanelNew[data-scan-phase="empty"].has-videos #button.ps-go { display: flex; }
#beoordelaarCenter #scanPanelNew #button.ps-go svg { width: 18px; height: 18px; }
#beoordelaarCenter #scanPanelNew #button.ps-go:not(:disabled) { animation: ps-btn 2s ease-in-out infinite; }
#beoordelaarCenter #scanPanelNew #button.ps-go:hover:not(:disabled) { background: #6080ff; }
#beoordelaarCenter #scanPanelNew #button.ps-go:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
#beoordelaarCenter #scanPanelNew #button.ps-go:disabled { background: #1c2650; color: #8892b0; box-shadow: none; cursor: not-allowed; }

/* Lege staat: grote gloeiende knop onder de telefoon, met de bestandsinfo eronder. Weg zodra er een video is. */
#beoordelaarCenter #scanPanelNew #psPick.ps-pick { display: flex; width: min(280px, 100%); min-height: 60px; margin: 0; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ps-blue); color: #ffffff; font: 700 18px "Sora", "IBM Plex Sans", sans-serif; letter-spacing: 0.01em; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 10px 40px rgba(84, 120, 255, 0.45); animation: ps-btn 2s ease-in-out infinite; }
#beoordelaarCenter #scanPanelNew #psPick.ps-pick svg { width: 18px; height: 18px; }
#beoordelaarCenter #scanPanelNew #psPick.ps-pick:hover { background: #6080ff; }
#beoordelaarCenter #scanPanelNew #psPick.ps-pick:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
#beoordelaarCenter #scanPanelNew .ps-formats { max-width: 340px; margin: -6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted, #8892b0); text-align: center; }
#beoordelaarCenter #scanPanelNew.has-videos #psPick.ps-pick, #beoordelaarCenter #scanPanelNew.has-videos .ps-formats { display: none; }
#beoordelaarCenter #scanPanelNew .ps-side #productScanBlockReason, #beoordelaarCenter #scanPanelNew .ps-side #evalBatchNotice { max-width: 300px; margin: -8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted, #8892b0); text-align: center; }
#beoordelaarCenter #scanPanelNew .ps-side #productScanBlockReason[hidden], #beoordelaarCenter #scanPanelNew .ps-side #evalBatchNotice[hidden] { display: none; }

/* ---------- Scan bezig ---------- */
#beoordelaarCenter #scanPanelNew #scanRun { display: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 48px; max-width: none; margin: 0; padding: 24px 0 32px; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; overflow: visible; }
#beoordelaarCenter #scanPanelNew[data-scan-phase="busy"] #scanRun { display: flex !important; }
#beoordelaarCenter #scanPanelNew #scanRun .scan-run-intro { flex: 999 1 440px; min-width: 0; }
#beoordelaarCenter #scanPanelNew #scanRun .scan-run-lead { margin-bottom: 8px; }
#beoordelaarCenter #scanPanelNew #scanRun .ps-side { flex: 1 1 300px; }
#beoordelaarCenter #scanPanelNew .ps-stage.is-busy .ps-aurora { width: 340px; height: 340px; margin: -170px 0 0 -170px; background: radial-gradient(circle, rgba(92, 110, 255, 0.7) 0%, rgba(140, 90, 255, 0.3) 45%, rgba(7, 11, 24, 0) 70%); filter: blur(22px); animation: ps-aurora-hard 4s ease-in-out infinite; }
#beoordelaarCenter #scanPanelNew .ps-stage.is-busy .ps-phone { animation: ps-glow-hard 4s ease-in-out infinite; }
#beoordelaarCenter #scanPanelNew .ps-stage.is-busy .ps-spin { background: conic-gradient(from 0deg, #2a3a90 0deg, #7c9bff 90deg, #ffffff 120deg, #2a3a90 180deg, #a98bff 270deg, #ffffff 300deg, #2a3a90 360deg); animation-duration: 6s; }
#beoordelaarCenter #scanPanelNew .ps-stage.is-busy .ps-screen { background: #1a2350; }
#beoordelaarCenter #scanPanelNew .ps-run-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#beoordelaarCenter #scanPanelNew .ps-run-video[hidden] { display: none; }
#beoordelaarCenter #scanPanelNew .ps-box { position: absolute; left: 50%; top: 32%; width: 54%; aspect-ratio: 1; transform: translateX(-50%); box-sizing: border-box; border: 2px solid var(--ps-ice); border-radius: 10px; animation: ps-box 1.4s ease-in-out infinite; }
#beoordelaarCenter #scanPanelNew .ps-box span { position: absolute; left: -2px; bottom: 100%; margin-bottom: 4px; padding: 2px 8px; border-radius: 6px; background: var(--ps-blue); color: #ffffff; font-size: 11px; font-weight: 600; }
#beoordelaarCenter #scanPanelNew .ps-chips { position: absolute; left: 12px; right: 12px; bottom: 14px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
#beoordelaarCenter #scanPanelNew .ps-chips li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(7, 11, 24, 0.82); color: #f2f5ff; font-size: 12px; line-height: 1.3; animation: ps-chip-in 0.45s ease-out both; }
#beoordelaarCenter #scanPanelNew .ps-chip-mark { flex: 0 0 auto; width: 7px; height: 7px; margin: 0 3px; border-radius: 50%; background: var(--ps-ice); animation: ps-blink 1s ease-in-out infinite; }
#beoordelaarCenter #scanPanelNew .ps-chips li.is-done .ps-chip-mark { width: 13px; height: 13px; margin: 0; border-radius: 0; background: none; animation: none; }
#beoordelaarCenter #scanPanelNew .ps-chips li.is-done .ps-chip-mark::before { content: "✓"; display: block; color: var(--ps-ok); font-size: 13px; font-weight: 700; line-height: 13px; }
#beoordelaarCenter #scanPanelNew .ps-run-tag { margin: 0; font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 12px; letter-spacing: 0.2em; color: #a9bcff; text-align: center; }

/* ---------- Laptop: alles past in één scherm ---------- */
/* De telefoon schaalt mee met de schermhoogte (--ps-s), zodat knop en bestandsinfo zonder scrollen zichtbaar zijn. */
@media (min-width: 721px) {
  #beoordelaarCenter #scanPanelNew { --ps-s: 1; --ps-k: 1; }
  #beoordelaarCenter #scanPanelNew.has-videos { --ps-k: 0.84; }
  #beoordelaarCenter #scanPanelNew[data-scan-phase="empty"] .eval-intake { padding: 8px 0 12px; }
  #beoordelaarCenter #scanPanelNew .eval-intake .ps-side { gap: 14px; }
  #beoordelaarCenter #scanPanelNew .ps-stage { height: calc((var(--ps-ph) + 16px) * var(--ps-s) * var(--ps-k)); }
  #beoordelaarCenter #scanPanelNew .ps-phone { flex: 0 0 auto; transform: scale(calc(var(--ps-s) * var(--ps-k))); }
  #beoordelaarCenter #scanPanelNew .ps-aurora { transform: scale(calc(var(--ps-s) * var(--ps-k))); }
}
@media (min-width: 721px) and (max-height: 920px) { #beoordelaarCenter #scanPanelNew { --ps-s: 0.88; } }
@media (min-width: 721px) and (max-height: 860px) { #beoordelaarCenter #scanPanelNew { --ps-s: 0.76; } }
@media (min-width: 721px) and (max-height: 800px) { #beoordelaarCenter #scanPanelNew { --ps-s: 0.64; } }
@media (min-width: 721px) and (max-height: 740px) { #beoordelaarCenter #scanPanelNew { --ps-s: 0.54; } }

/* ---------- Telefoonbreedte ---------- */
@media (max-width: 720px) {
  #beoordelaarCenter #scanPanelNew { --ps-pw: 214px; --ps-ph: 416px; }
  #beoordelaarCenter #scanPanelNew[data-scan-phase="empty"] .eval-intake, #beoordelaarCenter #scanPanelNew #scanRun { gap: 28px; padding: 8px 0 24px; }
  #beoordelaarCenter #scanPanelNew[data-scan-phase="empty"] .studio-intro, #beoordelaarCenter #scanPanelNew #scanRun .scan-run-intro, #beoordelaarCenter #scanPanelNew .ps-side { flex-basis: 100%; }
  #beoordelaarCenter #scanPanelNew .ps-stage { width: 100%; }
  #beoordelaarCenter #scanPanelNew .ps-aurora { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
  #beoordelaarCenter #scanPanelNew .ps-stage.is-busy .ps-aurora { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
  #beoordelaarCenter #scanPanelNew .ps-phone { border-radius: 40px; }
  #beoordelaarCenter #scanPanelNew .ps-body { border-radius: 38px; padding: 8px; }
  #beoordelaarCenter #scanPanelNew .ps-screen, #beoordelaarCenter #scanPanelNew #dropzone { border-radius: 30px; }
  #beoordelaarCenter #scanPanelNew #dropzone .drop-hint { font-size: 19px; }
  #beoordelaarCenter #scanPanelNew #dropEmpty { gap: 14px; }
  #beoordelaarCenter #scanPanelNew .ps-ghost-likes { right: 8px; bottom: 26px; gap: 8px; }
  #beoordelaarCenter #scanPanelNew .ps-ghost-likes i { width: 15px; height: 15px; }
  #beoordelaarCenter #scanPanelNew .ps-ghost-likes i:first-child { width: 18px; height: 18px; }
  #beoordelaarCenter #scanPanelNew .ps-ghost-text { left: 14px; right: 36px; bottom: 26px; gap: 6px; }
  #beoordelaarCenter #scanPanelNew .ps-ghost-bar { bottom: 12px; }
}

/* ---------- Animaties ---------- */
@keyframes ps-glow { 0%, 100% { box-shadow: 0 0 40px rgba(84, 120, 255, 0.35), 0 0 110px rgba(84, 120, 255, 0.16); } 50% { box-shadow: 0 0 55px rgba(84, 120, 255, 0.5), 0 0 140px rgba(84, 120, 255, 0.24); } }
@keyframes ps-glow-hard { 0%, 100% { box-shadow: 0 0 50px rgba(84, 120, 255, 0.5), 0 0 150px rgba(84, 120, 255, 0.25); } 50% { box-shadow: 0 0 75px rgba(110, 140, 255, 0.7), 0 0 210px rgba(84, 120, 255, 0.35); } }
@keyframes ps-spin { to { transform: rotate(360deg); } }
@keyframes ps-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ps-ripple { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ps-aurora { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.05); opacity: 0.55; } }
@keyframes ps-aurora-hard { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.08); opacity: 0.85; } }
@keyframes ps-plus { 0%, 100% { border-color: #34458f; } 50% { border-color: #7c9bff; } }
@keyframes ps-btn { 0%, 100% { box-shadow: 0 0 0 0 rgba(96, 128, 255, 0.55), 0 10px 40px rgba(84, 120, 255, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(96, 128, 255, 0), 0 10px 60px rgba(84, 120, 255, 0.7); } }
@keyframes ps-box { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes ps-ring { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes ps-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ps-chip-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* Minder beweging: alles staat stil, de golven verdwijnen. */
@media (prefers-reduced-motion: reduce) {
  #beoordelaarCenter #scanPanelNew .ps-aurora, #beoordelaarCenter #scanPanelNew .ps-phone, #beoordelaarCenter #scanPanelNew .ps-spin,
  #beoordelaarCenter #scanPanelNew .ps-icon-dot, #beoordelaarCenter #scanPanelNew .ps-plus,
  #beoordelaarCenter #scanPanelNew .ps-tile-pick, #beoordelaarCenter #scanPanelNew #button.ps-go, #beoordelaarCenter #scanPanelNew #psPick.ps-pick, #beoordelaarCenter #scanPanelNew .ps-box,
  #beoordelaarCenter #scanPanelNew .ps-chips li, #beoordelaarCenter #scanPanelNew .ps-chip-mark, #beoordelaarCenter #scanPanelNew .ps-step-dot,
  #beoordelaarCenter #scanPanelNew .ps-stage.is-busy .ps-aurora, #beoordelaarCenter #scanPanelNew .ps-stage.is-busy .ps-phone { animation: none !important; }
  #beoordelaarCenter #scanPanelNew .ps-phone { box-shadow: 0 0 50px rgba(84, 120, 255, 0.5), 0 0 140px rgba(84, 120, 255, 0.25); }
  #beoordelaarCenter #scanPanelNew .ps-ripple, #beoordelaarCenter #scanPanelNew .ps-step-ring { display: none; }
}

/* Zonder video geen melding onder de telefoon: de telefoon zegt al wat je moet doen. */
#beoordelaarCenter #scanPanelNew:not(.has-videos) .ps-side #productScanBlockReason { display: none; }

/* Telefoon: de hoofdknop staat zonder scrollen in beeld. De knoppen komen boven het telefoonplaatje,
   en Feedback geven staat naast Hulp en uitleg in plaats van op een eigen regel (de naam staat al in de bovenbalk). */
@media (max-width: 720px) {
  #beoordelaarCenter #scanPanelNew .ps-side > :is(#psPick, #button, .ps-formats, #productScanBlockReason, #evalBatchNotice) { order: -1; }
  #beoordelaarCenter #scanPanelNew .ps-side > .ps-formats { margin: -8px 0 4px; }
  body[data-agent="beoordelaar"] .center-head-beoordelaar > div:first-child { display: none; }
  body[data-agent="beoordelaar"] .center-head-beoordelaar { flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
  body[data-agent="beoordelaar"] .center-head-beoordelaar > .center-head-actions { margin: 0; }
}

/* Rustig onder de knop: de bestandsinfo staat als tooltip op Video kiezen en blijft voor schermlezers voorgelezen. */
#beoordelaarCenter #scanPanelNew .ps-side > .ps-formats { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }