/* UZYTAK Upscale page: additions on top of photopack.css (pp- classes). Prefix up-. */
.up-progress { height: 8px; border-radius: 999px; background: #e4e8f0; overflow: hidden; margin-top: 16px; }
.up-progress[hidden] { display: none; }
.up-progress div { height: 100%; width: 0; background: linear-gradient(90deg, var(--pp-blue), var(--pp-teal)); transition: width .2s; }

/* Before/after: both images fill the same box; the AI result is clipped by the slider. */
.up-compare { position: relative; margin-top: 16px; border-radius: 16px; overflow: hidden; background: #0b1533; aspect-ratio: var(--up-ratio, 3 / 2); max-height: 70vh; --up-pos: 50%; }
.up-compare[hidden] { display: none; }
.up-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.up-compare [data-up-after] { clip-path: inset(0 0 0 var(--up-pos)); }
.up-compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--up-pos); width: 2px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.5); pointer-events: none; }
.up-compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.up-label { position: absolute; top: 12px; z-index: 1; background: rgba(9, 19, 41, .72); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.up-label-before { left: 12px; }
.up-label-after { right: 12px; color: var(--pp-sky); }

.up-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 28px; }
.up-pack { background: linear-gradient(135deg, #eef3ff, #fff); }
.up-pack p { color: var(--pp-muted); line-height: 1.55; margin: 0; flex: 1; }
.up-credits { font-size: 13px; color: var(--pp-muted); margin-top: 22px; }