/* FoxyAI brand: Forest #2b4240, Fox Orange #ff7d47 (never under white or orange text), ink #333, Poppins */
.fxsp { font-family: Poppins, sans-serif; color: #333333; max-width: 560px; margin: 32px auto; overflow-x: clip; box-sizing: border-box; }
.fxsp *, .fxsp *::before, .fxsp *::after { box-sizing: border-box; }
.fxsp-drop { display: block; position: relative; border: 2px dashed #477d77; border-radius: 16px; background: #f5f5f5; padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.fxsp-drop:hover, .fxsp-drop.fxsp-over { border-color: #ff7d47; background: #ffffff; }
.fxsp-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fxsp-drop-text { font-size: 16px; line-height: 26px; font-weight: 300; }
.fxsp-drop-text strong { font-weight: 600; color: #2b4240; }
.fxsp-has .fxsp-drop-text { display: none; }
.fxsp-stage { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.fxsp-preview { display: block; max-width: 100%; max-height: 320px; margin: 0 auto; border-radius: 8px; }
.fxsp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fxsp-btn { display: inline-block; margin-top: 16px; padding: 14px 28px; border: 0; border-radius: 8px; background: #2b4240; color: #ffffff; font: 600 16px/26px Poppins, sans-serif; text-decoration: none; cursor: pointer; }
.fxsp-btn:hover, .fxsp-btn:focus-visible { background: #477d77; color: #ffffff; }
.fxsp-btn:disabled { background: #dddddd; color: #333333; cursor: not-allowed; }
.fxsp-form { text-align: center; }
.fxsp-msg { min-height: 26px; margin: 12px 0 0; font-size: 15px; line-height: 25px; }
.fxsp-msg.fxsp-err { color: #a63d2b; font-weight: 500; }
.fxsp-result { text-align: center; }
.fxsp-out { display: block; width: 100%; max-width: 512px; margin: 0 auto; border-radius: 12px; border: 3px solid #ff7d47; }
.fxsp-actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.fxsp-again { margin-top: 16px; background: none; border: 0; color: #2b4240; font: 500 15px/25px Poppins, sans-serif; text-decoration: underline; cursor: pointer; }
.fxsp-note { font-size: 14px; line-height: 24px; font-weight: 300; margin-top: 8px; }
.fxsp-working .fxsp-preview { filter: saturate(.7) brightness(.55) contrast(1.15) hue-rotate(-12deg); transition: filter 4s ease-out; }

/* Progress: thin glowing bar, status in small caps, percent on the right */
.fxsp-progress { max-width: 420px; margin: 24px auto 0; text-align: left; }
.fxsp-pmeta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font: 500 11px/16px Poppins, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #333333; }
.fxsp-pct { font-variant-numeric: tabular-nums; color: #2b4240; font-weight: 600; }
.fxsp-track { position: relative; height: 3px; background: #dddddd; border-radius: 3px; overflow: hidden; }
.fxsp-bar { position: relative; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #ff7d47, #fad187); box-shadow: 0 0 10px rgba(255,125,71,.7); transition: width .2s linear; overflow: hidden; }
.fxsp-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform: translateX(-100%); animation: fxsp-sheen 1.4s ease-in-out infinite; }
@keyframes fxsp-sheen { to { transform: translateX(100%); } }

/* Night falls on their photo, in the style of the agent's results:
   purple storm grade, moon, bats, mist and lightning. Restarts each time the overlay is shown. */
.fxsp-scan { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; pointer-events: none; }
.fxsp-scan i { position: absolute; display: block; }
.fxsp-night { inset: 0; mix-blend-mode: multiply; opacity: 0; animation: fxsp-fade 4s ease-out forwards;
  background: linear-gradient(180deg, #2a1650 0%, #3b2a6e 38%, #5a4a8a 70%, #3a2f52 100%); }
.fxsp-moon { right: 9%; top: 7%; width: 13%; aspect-ratio: 1; border-radius: 50%; opacity: 0; animation: fxsp-fade 3s ease-out 1.5s forwards;
  background: radial-gradient(circle at 40% 40%, #fffdf2, #f3eccd 60%, #d9cfa8); box-shadow: 0 0 24px 8px rgba(255,248,220,.45), 0 0 70px 24px rgba(180,160,255,.25); }
.fxsp-bat { width: 10%; aspect-ratio: 2; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath fill='%23111' d='M12 4.5c-.6-.9-1.3-1-1.8-.5C9 2.6 6.2 1.8 2 2.8c1.8 1 2.4 2.8 2.2 4.6 1.4-.7 2.8-.5 4 .9.8-1 2-1.3 3.8-.2 1.8-1.1 3-.8 3.8.2 1.2-1.4 2.6-1.6 4-.9-.2-1.8.4-3.6 2.2-4.6-4.2-1-7 .2-8.2 1.2-.5-.5-1.2-.4-1.8.5z'/%3E%3C/svg%3E") center / contain no-repeat; animation: fxsp-flap .18s ease-in-out infinite alternate, fxsp-fly 6s linear infinite; }
.fxsp-b1 { top: 12%; animation-delay: 0s, 2s; }
.fxsp-b2 { top: 20%; width: 7%; animation-delay: .05s, 3.2s; }
.fxsp-b3 { top: 8%; width: 6%; animation-delay: .1s, 4.4s; }
.fxsp-fog { left: 0; right: 0; bottom: -6%; height: 38%; opacity: 0; filter: blur(12px); animation: fxsp-fade 4s ease-in 2.5s forwards, fxsp-drift 9s ease-in-out infinite alternate;
  background: radial-gradient(ellipse at 30% 70%, rgba(225,220,245,.55), transparent 60%), radial-gradient(ellipse at 75% 80%, rgba(210,230,220,.45), transparent 55%);
  background-size: 140% 100%; background-repeat: no-repeat; }
.fxsp-flash { inset: 0; background: #e9e4ff; opacity: 0; mix-blend-mode: screen; animation: fxsp-flash 7s linear 3.6s infinite; }
@keyframes fxsp-fade { to { opacity: 1; } }
@keyframes fxsp-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes fxsp-fly { 0% { left: -10%; opacity: 0; margin-top: 0; } 8% { opacity: .9; } 50% { margin-top: -3%; } 92% { opacity: .9; } 100% { left: 105%; opacity: 0; margin-top: 2%; } }
@keyframes fxsp-drift { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes fxsp-flash { 0%, 100% { opacity: 0; } 1% { opacity: .75; } 2% { opacity: .1; } 3.5% { opacity: .55; } 6% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fxsp-scan i { animation: fxsp-fade .01s forwards !important; } .fxsp-bat, .fxsp-flash { display: none !important; } }