/* ==========================================
   ULTRAKIT PAGE SCROLL PROGRESS BAR
   ========================================== */
.ultrakit-psp-note { padding: 14px 18px; border-radius: 12px; background: #f3f1ff; border: 1.5px dashed #6c5ce7; color: #4b3fc0; font-size: 13px; text-align: center; }

.ultrakit-psp-bar { --psp-a: #6c5ce7; --psp-b: #00cec9; --psp-t: 5px; --psp-track: rgba(108,92,231,0.12); --psp-z: 99999; position: fixed; z-index: var(--psp-z); background: var(--psp-track); box-sizing: border-box; opacity: 1; transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; }
.ultrakit-psp-bar.is-hidden { opacity: 0; }
.psp-pos-top { top: 0; left: 0; right: 0; height: var(--psp-t); }
.psp-pos-bottom { bottom: 0; left: 0; right: 0; height: var(--psp-t); }
.psp-pos-left { top: 0; bottom: 0; left: 0; width: var(--psp-t); }
.psp-pos-right { top: 0; bottom: 0; right: 0; width: var(--psp-t); }
.admin-bar .psp-pos-top.psp-admin { top: 32px; }
@media (max-width: 782px) { .admin-bar .psp-pos-top.psp-admin { top: 46px; } }

.ultrakit-psp-fill { position: absolute; left: 0; top: 0; display: block; background: var(--psp-a); transform-origin: left top; will-change: transform; }
.psp-pos-top .ultrakit-psp-fill, .psp-pos-bottom .ultrakit-psp-fill { width: 100%; height: 100%; transform: scaleX(var(--p, 0)); }
.psp-pos-left .ultrakit-psp-fill, .psp-pos-right .ultrakit-psp-fill { width: 100%; height: 100%; transform: scaleY(var(--p, 0)); }
.psp-round, .psp-round .ultrakit-psp-fill { border-radius: 10px; }

.psp-st-gradient .ultrakit-psp-fill { background: linear-gradient(90deg, var(--psp-a), var(--psp-b)); }
.psp-pos-left.psp-st-gradient .ultrakit-psp-fill, .psp-pos-right.psp-st-gradient .ultrakit-psp-fill { background: linear-gradient(180deg, var(--psp-a), var(--psp-b)); }
.psp-st-rainbow .ultrakit-psp-fill { background: linear-gradient(90deg, #ff5f6d, #ffc371, #f9f871, #4ade80, #38bdf8, #a78bfa, #f472b6); }
.psp-pos-left.psp-st-rainbow .ultrakit-psp-fill, .psp-pos-right.psp-st-rainbow .ultrakit-psp-fill { background: linear-gradient(180deg, #ff5f6d, #ffc371, #f9f871, #4ade80, #38bdf8, #a78bfa, #f472b6); }
.psp-st-striped .ultrakit-psp-fill { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.3) 0 8px, transparent 8px 16px), linear-gradient(90deg, var(--psp-a), var(--psp-b)); background-size: 22px 22px, 100% 100%; animation: ukPspStripe 0.8s linear infinite; }
@keyframes ukPspStripe { to { background-position: 22px 0, 0 0; } }
.psp-st-glow .ultrakit-psp-fill { background: linear-gradient(90deg, var(--psp-a), var(--psp-b)); box-shadow: 0 0 12px var(--psp-a), 0 0 22px var(--psp-b); }
.psp-st-glow { background: transparent; }
.psp-st-segments { background: transparent; --psp-seg: calc(100% / 10); }
.psp-st-segments .ultrakit-psp-fill { background: var(--psp-a); -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%); mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%); background: linear-gradient(90deg, var(--psp-a), var(--psp-b)); transform: none; clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.psp-pos-left.psp-st-segments .ultrakit-psp-fill, .psp-pos-right.psp-st-segments .ultrakit-psp-fill { -webkit-mask: repeating-linear-gradient(180deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%); mask: repeating-linear-gradient(180deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%); clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0); }
.psp-st-segments::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--psp-track) 0 calc(10% - 4px), transparent calc(10% - 4px) 10%); }
.psp-pos-left.psp-st-segments::before, .psp-pos-right.psp-st-segments::before { background: repeating-linear-gradient(180deg, var(--psp-track) 0 calc(10% - 4px), transparent calc(10% - 4px) 10%); }

.ultrakit-psp-pct { position: absolute; padding: 3px 9px; border-radius: 30px; background: #1a1a2e; color: #ffffff; font-size: 11px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,0.25); pointer-events: none; transform: translate(-50%, 0); }
.psp-pos-top .ultrakit-psp-pct { top: calc(100% + 8px); left: calc(var(--p, 0) * 100%); }
.psp-pos-bottom .ultrakit-psp-pct { bottom: calc(100% + 8px); left: calc(var(--p, 0) * 100%); }
.psp-pos-left .ultrakit-psp-pct { left: calc(100% + 8px); top: calc(var(--p, 0) * 100%); transform: translate(0, -50%); }
.psp-pos-right .ultrakit-psp-pct { right: calc(100% + 8px); top: calc(var(--p, 0) * 100%); transform: translate(0, -50%); }