.fv-stage { background: #000; cursor: zoom-in; }
.fv-stage.is-full { cursor: default; }
.fv-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fv-screen { --bg: #0b0d12; --win: #151923; --ink: #e8ebf2; --muted: #8d95a8; --acc: #ff3b3b; --ok: #3ddc84; --line: #262c3a; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position: absolute; inset: 0; container-type: size; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font); }
.fv-screen[data-theme="clean"] { --bg: #e9eef5; --win: #ffffff; --ink: #1b2233; --muted: #6a7488; --acc: #e5484d; --ok: #1f9d55; --line: #dde3ec; }
.fv-screen[data-theme="retro"] { --bg: #000; --win: #000; --ink: #33ff66; --muted: #1f9e40; --acc: #ff4040; --ok: #33ff66; --line: #1f9e40;
  --font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fv-screen p { margin: 0; }
.fv-wait { position: absolute; inset: 0; background: #000; z-index: 9; display: none; }
.fv-screen[data-phase="wait"] .fv-wait { display: block; }

.fv-win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88cqw, 150cqh); background: var(--win); border: 1px solid var(--line);
  border-radius: 1.6cqmin; box-shadow: 0 2cqmin 6cqmin rgba(0, 0, 0, .45); overflow: hidden; font-size: clamp(9px, 2.6cqmin, 22px); }
.fv-screen[data-theme="retro"] .fv-win { border: 2px solid var(--ink); border-radius: 0; box-shadow: 0 0 4cqmin rgba(51, 255, 102, .25); }
.fv-bar { display: flex; align-items: center; gap: .6em; padding: .55em .9em; background: rgba(127, 127, 127, .12); border-bottom: 1px solid var(--line); font-weight: 600; }
.fv-bar svg { width: 1.2em; height: 1.2em; color: var(--ok); transition: color .4s; }
.fv-bar span { flex: 1; }
.fv-bar i { width: .8em; height: .8em; border-radius: 50%; background: rgba(127, 127, 127, .35); }
.fv-body { padding: 1.1em 1.3em 1.2em; display: grid; gap: .7em; }
.fv-status { font-size: 1.5em; font-weight: 700; }
.fv-prog { height: .7em; border-radius: 99px; background: rgba(127, 127, 127, .22); overflow: hidden; }
.fv-prog i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .3s linear, background .4s; }
.fv-file { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-stats { display: flex; flex-wrap: wrap; gap: .4em 1.6em; font-size: .9em; color: var(--muted); }
.fv-stats b { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: .3em; }
.fv-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-height: 34cqh; overflow: hidden; }
.fv-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 1em; align-items: center; padding: .4em 0; border-bottom: 1px solid var(--line); font-size: .9em; animation: fv-in .35s ease-out; }
.fv-list li b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-list li em { font-style: normal; font-size: .82em; font-weight: 700; padding: .15em .6em; border-radius: 99px; background: rgba(255, 59, 59, .16); color: var(--acc); }
.fv-list li small { color: var(--muted); font-size: .82em; }
@keyframes fv-in { from { opacity: 0; transform: translateY(-.6em); } }
.fv-screen.alarm .fv-bar svg, .fv-screen.alarm .fv-status { color: var(--acc); }
.fv-screen.alarm .fv-prog i { background: var(--acc); }

.fv-banner { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: none; align-items: center; justify-content: center; gap: 1em; padding: 1.2cqmin 2cqmin;
  background: var(--acc); color: #fff; font-weight: 700; font-size: clamp(10px, 2.8cqmin, 24px); text-align: center; }
.fv-banner strong { letter-spacing: .12em; }
.fv-screen.alarm .fv-banner { display: flex; }
.fv-toasts { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.fv-toast { position: absolute; width: min(46cqw, 380px); background: var(--win); border: 1px solid var(--line); border-left: .7cqmin solid var(--acc); border-radius: 1cqmin;
  box-shadow: 0 1.5cqmin 4cqmin rgba(0, 0, 0, .45); padding: .7em .9em; font-size: clamp(9px, 2.3cqmin, 18px); animation: fv-pop .3s ease-out; }
.fv-toast b { display: block; margin-bottom: .3em; }
.fv-toast .fv-mini { height: .45em; border-radius: 99px; background: rgba(127, 127, 127, .25); overflow: hidden; margin-top: .4em; }
.fv-toast .fv-mini i { display: block; height: 100%; background: var(--acc); width: 0; transition: width .5s linear; }
@keyframes fv-pop { from { transform: scale(.85); opacity: 0; } }
.fv-screen[data-theme="retro"] .fv-toast { border-radius: 0; border: 1px solid var(--acc); }

/* glitch: small jumps and a colour split, never a brightness flash */
.fv-screen.glitch .fv-win, .fv-screen.glitch .fv-toasts { animation: fv-glitch .45s steps(2) 1; }
@keyframes fv-glitch {
  0% { transform: translate(-50%, -50%); filter: none; }
  25% { transform: translate(calc(-50% + 1.2cqmin), -50%) skewX(-3deg); filter: drop-shadow(-.6cqmin 0 0 rgba(255, 0, 80, .7)) drop-shadow(.6cqmin 0 0 rgba(0, 220, 255, .7)); }
  50% { transform: translate(calc(-50% - .8cqmin), calc(-50% + .5cqmin)); clip-path: inset(10% 0 30% 0); }
  75% { transform: translate(-50%, calc(-50% - .6cqmin)) skewX(2deg); filter: drop-shadow(.5cqmin 0 0 rgba(255, 0, 80, .6)); }
  100% { transform: translate(-50%, -50%); filter: none; }
}
.fv-screen.glitch .fv-toasts { animation-name: fv-glitch2; }
@keyframes fv-glitch2 { 30% { transform: translateX(1cqmin); } 60% { transform: translateX(-1cqmin); } }
.fv-screen.shake { animation: fv-shake .5s ease-in-out 1; }
@keyframes fv-shake { 20% { transform: translate(-.8cqmin, .4cqmin); } 40% { transform: translate(.8cqmin, -.4cqmin); } 60% { transform: translate(-.5cqmin, 0); } 80% { transform: translate(.4cqmin, .3cqmin); } }
.fv-screen.alarm::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px); }

.fv-reveal { position: absolute; inset: 0; z-index: 8; display: none; place-items: center; align-content: center; gap: 2.5cqmin; padding: 6cqmin; text-align: center;
  background: radial-gradient(circle at 50% 40%, #2a1f6b, #0d0b24 70%); color: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.fv-screen[data-phase="reveal"] .fv-reveal { display: grid; animation: fv-pop .5s ease-out; }
.fv-big { font-size: clamp(26px, 13cqmin, 130px); font-weight: 900; line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ffd166, #ff6b9a, #7cc8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fv-msg { font-size: clamp(13px, 4.2cqmin, 40px); font-weight: 700; max-width: 30ch; }
.fv-esc { font-size: clamp(10px, 2.6cqmin, 20px); opacity: .75; }
.fv-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fv-confetti i { position: absolute; top: -4cqh; width: 1.2cqmin; height: 2cqmin; border-radius: 2px; animation: fv-fall linear infinite; }
@keyframes fv-fall { to { transform: translateY(112cqh) rotate(720deg); } }

.px-under { margin-top: 12px; }
.panel select, .panel input[type="text"] { width: 100%; margin-top: 6px; }
.px-exit { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; z-index: 12; display: none; align-items: center; gap: 4px;
  font: 600 13px/1 system-ui, sans-serif; padding: 8px 12px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, .45); color: #fff;
  opacity: .6; cursor: pointer; transition: opacity .3s; }
.px-exit span { font-size: 17px; line-height: 13px; }
.is-full .px-exit { display: inline-flex; }
.is-full.st-idle:not(.px-show) .px-exit { opacity: 0; pointer-events: none; }
.tool-stage.is-full .fs-btn { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fv-screen.glitch .fv-win, .fv-screen.glitch .fv-toasts, .fv-screen.shake, .fv-confetti i, .fv-list li, .fv-toast { animation: none !important; }
}