:root { --fx-strength: .55; color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.final-page { min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: grid; place-items: center; box-sizing: border-box; padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.final-page .gallery { width: 100%; padding: 0; }
.final-page .ticket-stage { min-height: 0; padding: 0; }
.workbench { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 360px); gap: 28px; max-width: 860px; margin: 0 auto; padding: 0 24px; align-items: start; }
.workbench .gallery { width: 100%; padding-inline: 0; }
#effects-panel { margin: 12px 0 24px; padding: 22px; background: #242424; border: 1px solid #393939; border-radius: 12px; }
#effects-panel h2 { margin: 0 0 18px; font-size: 20px; letter-spacing: -.5px; }
#effects-panel > label { display: block; color: #bcb9b4; font-size: 12px; }
#effect-preset { margin-top: 8px; }
#effects-panel fieldset { border: 0; margin: 24px 0 20px; padding: 0; min-width: 0; }
#effects-panel legend { color: #aaa7a3; font-size: 11px; margin-bottom: 14px; }
#effect-controls { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#effect-controls label { display: flex; align-items: start; gap: 7px; cursor: pointer; min-width: 0; }
#effect-controls input { margin: 2px 0 0; accent-color: #ead7b5; flex: 0 0 auto; width: 16px; height: 16px; }
#effect-controls strong { display: block; font-size: 12px; font-weight: 600; line-height: 1.4; }
#effect-controls small { display: block; color: #aaa7a3; font-size: 11px; line-height: 1.45; margin-top: 3px; }
#effect-strength { display: block; width: 100%; margin: 12px 0; accent-color: #ead7b5; }
#strength-value { float: right; color: #ead7b5; }
.effect-hint, .motion-hint { font-size: 11px; line-height: 1.6; color: #aaa7a3; margin: 18px 0 0; }
.motion-hint { display: none; color: #dac7a7; }
.settings-export { display: none; margin: 8px auto 0; max-width: 460px; }
.confirmed .settings-export { display: block; }
#copy-settings { font-size: 12px; }
#export-status { font-size: 12px; line-height: 1.5; color: #bcb9b4; }
#settings-output { display: block; width: 100%; height: 220px; padding: 12px; box-sizing: border-box; border: 1px solid #555; border-radius: 6px; color: #eae8e4; background: #242424; font: 12px/1.5 'Courier New', monospace; resize: vertical; }
.confirmed .workbench { display: block; width: 100%; padding: 0; box-sizing: border-box; }
.confirmed .workbench .gallery { padding-inline: 24px; }
.ticket-stage { perspective: 1000px; }
.ticket-motion { width: 100%; display: grid; place-items: center; transition: transform .22s ease-out; --pointer-x: 50%; --pointer-y: 35%; }
.fx-tilt .ticket-motion { transform: rotateX(calc(var(--tilt-x, 0deg) * var(--fx-strength))) rotateY(calc(var(--tilt-y, 0deg) * var(--fx-strength))); }
.fx-surface, .uv-pattern, .security-pattern, .material-pattern { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.fx-surface { background: radial-gradient(ellipse at var(--pointer-x) var(--pointer-y), #ffffffb0, #ffffff20 30%, transparent 65%); }
.fx-light .fx-surface { opacity: calc(var(--fx-strength) * .45); animation: foil-breathe 7s ease-in-out infinite; }
.fx-light .pointer-active .fx-surface { animation: none; }
@keyframes foil-breathe {
  0%, 100% { opacity: calc(var(--fx-strength) * .18); }
  50% { opacity: calc(var(--fx-strength) * .48); }
}
.fx-emboss .card .header, .fx-emboss .card .number, .fx-emboss .countdown-row strong { text-shadow: 0 calc(-1px * var(--fx-strength)) 0 rgb(0 0 0 / calc(.27 * var(--fx-strength))), 0 calc(1px * var(--fx-strength)) 0 rgb(255 255 255 / calc(.46 * var(--fx-strength))); }
.uv-pattern { padding: 95px 16px 30px; box-sizing: border-box; color: var(--ink); font: 700 18px/2.4 'Courier New', monospace; white-space: pre-wrap; mask-image: radial-gradient(circle 95px at var(--pointer-x) var(--pointer-y), #000 15%, transparent 100%); }
.fx-uv .pointer-active .uv-pattern { opacity: calc(var(--fx-strength) * .65); }
.countdown-row strong { position: relative; isolation: isolate; }
.fx-glitch .countdown-row strong::after { content: attr(data-echo); position: absolute; inset: 0; overflow: clip; text-indent: 3px; clip-path: inset(38% 0 42%); color: var(--ink); text-shadow: -2px 0 #39c3c4, 2px 0 #bb4276; pointer-events: none; opacity: 0; animation: signal-slip 7.7s steps(1, end) infinite; }
.fx-glitch .countdown-row:last-child strong::after { animation-delay: -2.4s; }
@keyframes signal-slip {
  0%, 95%, 99%, 100% { opacity: 0; }
  96%, 98% { opacity: var(--fx-strength); }
}
.fx-trail .countdown-row strong::before { content: attr(data-trail); position: absolute; inset: 0; color: transparent; text-shadow: 2px 1px 2px var(--ink); opacity: calc(var(--fx-strength) * .36); pointer-events: none; }
.barcode-wrap { position: relative; width: 204px; max-width: 100%; overflow: hidden; }
.barcode-wrap .barcode { width: 100%; }
.fx-scan .barcode-wrap::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #209b8e; box-shadow: 0 0 5px #28bcab; opacity: 0; animation: barcode-sweep 6.5s linear infinite; pointer-events: none; }
@keyframes barcode-sweep {
  0%, 65% { transform: translateY(0); opacity: 0; }
  68% { transform: translateY(0); opacity: var(--fx-strength); }
  88% { transform: translateY(30px); opacity: var(--fx-strength); }
  91%, 100% { transform: translateY(30px); opacity: 0; }
}
.security-pattern { background-image: repeating-radial-gradient(ellipse at 20% 55%, transparent 0 5px, var(--ink) 5px 5.5px, transparent 5.5px 9px), repeating-radial-gradient(ellipse at 80% 50%, transparent 0 6px, var(--ink) 6px 6.5px, transparent 6.5px 12px); }
.security-pattern span { position: absolute; inset: 90px -45px; font: 7px/3.6 'Courier New', monospace; letter-spacing: 2px; transform: rotate(-16deg); overflow: hidden; }
.fx-security .security-pattern { opacity: calc(var(--fx-strength) * .15); }
.material-pattern { background-image: repeating-linear-gradient(0deg, transparent 0 15px, var(--ink) 15px 15.5px, transparent 15.5px 31px), repeating-linear-gradient(112deg, transparent 0 48px, #ffffff88 48px 49px, transparent 49px 94px); }
.fx-material .material-pattern { opacity: calc(var(--fx-strength) * .22); }
.finish-matte .material-pattern, .paper .material-pattern { background-image: repeating-linear-gradient(35deg, transparent 0 6px, var(--ink) 6px 6.5px, transparent 6.5px 19px), repeating-linear-gradient(145deg, transparent 0 20px, var(--ink) 20px 20.5px, transparent 20.5px 33px); }
.finish-brushed .material-pattern { background-image: repeating-linear-gradient(0deg, transparent 0 2px, var(--ink) 2px 2.5px, transparent 2.5px 7px), linear-gradient(103deg, transparent 30%, #ffffff88 31%, transparent 32%); }
.fx-iridescence .card .bg { animation: foil-spectrum 9s ease-in-out infinite alternate; }
.fx-iridescence .pointer-active .card .bg { animation: none; filter: url(#bump) hue-rotate(calc(var(--pointer-hue, 0deg) * var(--fx-strength))); }
@keyframes foil-spectrum {
  from { filter: url(#bump) hue-rotate(calc(-18deg * var(--fx-strength))); }
  to { filter: url(#bump) hue-rotate(calc(18deg * var(--fx-strength))); }
}
@media (max-width: 740px) {
  .workbench { grid-template-columns: minmax(0, 1fr); max-width: 440px; gap: 0; padding-inline: 20px; }
  #effects-panel { margin-top: 0; }
  .confirmed .workbench { max-width: none; }
}
@media (max-width: 740px), (pointer: coarse) {
  .final-page .card { --width: min(82vw, 340px, calc((100svh - 88px) * .56)); --height: calc(var(--width) * 1.6923077); animation-name: mobile-float; filter: drop-shadow(0 5px 8px #00000030) drop-shadow(0 18px 22px #00000030); touch-action: pinch-zoom; }
  .final-page .countdown-row strong { font-size: clamp(28px, 8.2vw, 36px); }
  .fx-iridescence .card .bg { animation-timing-function: steps(18, end); }
}
@keyframes mobile-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.01); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .final-page .card { --width: min(72vw, 340px); --height: calc(100svh - 80px); --cutouts-adjust: 62px; gap: 6px; }
  .final-page .card .header { font-size: 26px; margin: 10px 8px 0; }
  .final-page .countdown-row { padding: 4px 0; }
  .final-page .countdown-row strong { font-size: 28px; line-height: 1.1; }
  .final-page .footer { gap: 6px; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .final-page .card { animation: none; }
  .ticket-motion, .fx-tilt .ticket-motion { transform: none; transition: none; }
  .fx-light .fx-surface, .fx-glitch .countdown-row strong::after, .fx-scan .barcode-wrap::after, .fx-iridescence .card .bg { animation: none; }
  .fx-iridescence .pointer-active .card .bg { filter: url(#bump); }
  .motion-hint { display: block; }
}