/* Plan-activated popup shown after a Whop checkout. Same see-through dark glass as the signup
   card and the invite window (auth-page.css / invite-rewards.css): the page stays visible behind it.
   Every rule is scoped under .pc-backdrop so .account-site a/h2 styles cannot override it. */
.pc-backdrop {position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: #05060a73; animation: pc-fade .2s ease-out both;}
.pc-backdrop .pc-card {position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; width: min(440px, 100%); padding: 32px 30px 26px; border: 1px solid #ffffff16; border-radius: 28px; background: linear-gradient(180deg, #12131880, #0c0d1266); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px #ffffff12, 0 24px 60px #0007; color: #eee; font-family: var(--brand-font); text-align: center; animation: pc-pop .35s cubic-bezier(.2, 1.2, .4, 1) both;}
.pc-backdrop .pc-close {position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #ffffff14; border-radius: 50%; background: #ffffff0a; color: #bcbcbc; cursor: pointer;}
.pc-backdrop .pc-close:hover {background: #ffffff14; color: #fff;}

.pc-backdrop .pc-emblem {display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px;}
.pc-backdrop .pc-emblem img {grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain;}
/* The supplied v2 icons are RGB on black, and screen blending cannot remove black on see-through glass,
   so the popup uses the same artwork's transparent originals. */
.pc-backdrop .pc-card[data-plan='basic'] .pc-emblem img, .pc-backdrop .pc-card[data-plan='basic'] .pc-badge img {content: url('/library-design/icons-alpha/icon-plan-basic-192.webp');}
.pc-backdrop .pc-card[data-plan='plus'] .pc-emblem img, .pc-backdrop .pc-card[data-plan='plus'] .pc-badge img {content: url('/library-design/icons-alpha/icon-plan-plus-192.webp');}
.pc-backdrop .pc-card[data-plan='pro'] .pc-emblem img, .pc-backdrop .pc-card[data-plan='pro'] .pc-badge img {content: url('/library-design/icons-alpha/icon-plan-pro-192.webp');}
.pc-backdrop .pc-emblem-glow, .pc-backdrop .pc-sparkles {display: none;}
.pc-backdrop .pc-emblem-art {filter: drop-shadow(0 6px 10px #0006); animation: pc-drop .45s .08s cubic-bezier(.2, 1.3, .4, 1) both;}
.pc-backdrop .pc-spinner {width: 40px; height: 40px; border: 3px solid #ffffff1f; border-top-color: #35b4ff; border-radius: 50%; animation: pc-spin .9s linear infinite;}

.pc-backdrop .pc-title {display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; margin: 0 0 16px; color: #fff; font: 800 30px/38px var(--brand-font); letter-spacing: -.4px; text-transform: uppercase;}
.pc-backdrop .pc-gloss {color: #35b4ff;}

.pc-backdrop .pc-identity {display: flex; align-items: center; gap: 10px; max-width: 100%; box-sizing: border-box; padding: 5px 5px 5px 6px; border: 1px solid #ffffff14; border-radius: 999px; background: #ffffff0a;}
.pc-backdrop .pc-avatar {flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover;}
.pc-backdrop .pc-avatar-initial {display: grid; place-items: center; background: #0089ff; color: #fff; font-size: 13px; font-weight: 700;}
.pc-backdrop .pc-name {min-width: 0; overflow: hidden; color: #eee; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap;}
.pc-backdrop .pc-card:not([data-plan]) .pc-name {padding-right: 10px;}
.pc-backdrop .pc-badge {display: inline-flex; flex: none; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 8px; border: 1px solid #35b4ff4d; border-radius: 999px; background: #0089ff26; color: #8fd6ff; font-size: 12px; font-weight: 700;}
.pc-backdrop .pc-badge img {width: 15px; height: 15px; object-fit: contain;}

.pc-backdrop .pc-copy {max-width: 340px; margin: 16px 0 22px; color: #a6a6ad; font-size: 13px; line-height: 20px;}
.pc-backdrop .pc-primary {display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; box-sizing: border-box; border: 1px solid #6fd0ff59; border-radius: 14px; background: #0089ffd9; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px #ffffff59; color: #fff; font: 700 15px var(--brand-font); text-decoration: none; cursor: pointer; transition: background .12s, transform .12s;}
.pc-backdrop .pc-primary:hover {background: #1a94ff; text-decoration: none;}
.pc-backdrop .pc-primary:active {transform: translateY(1px);}
.pc-backdrop .pc-primary:disabled {border-color: #ffffff14; background: #ffffff0a; box-shadow: none; color: #929292; cursor: default; transform: none;}

/* Fade the dim colour, not opacity: an opacity animation makes the overlay a backdrop root,
   and the card could then blur only the overlay instead of the page behind it. */
@keyframes pc-fade {from {background-color: transparent;}}
@keyframes pc-pop {from {opacity: 0; transform: scale(.96) translateY(8px);}}
@keyframes pc-drop {from {opacity: 0; transform: translateY(-10px) scale(.8);}}
@keyframes pc-spin {to {transform: rotate(360deg);}}
@media (prefers-reduced-motion: reduce) {.pc-backdrop, .pc-backdrop .pc-card, .pc-backdrop .pc-emblem-art {animation: none;} .pc-backdrop .pc-spinner {animation-duration: 2.4s;}}
@media (max-width: 420px) {.pc-backdrop .pc-card {padding: 28px 20px 22px;} .pc-backdrop .pc-title {font-size: 25px; line-height: 32px;}}
/* Render-in-progress view, in the 17 October library design: #0f1014/#19191f surfaces,
   Poppins caps, glossy blue progress and chips. */
.library-page .export-card:has(.epv) {width: min(760px, 100%); padding: 22px; border: 1px solid #303034; border-radius: 24px; background: linear-gradient(180deg, #19191f, #0f1014); box-shadow: inset 0 1px #ffffff0d, 0 30px 80px #000000a6;}
.epv {display: flex; flex-direction: column; align-items: center; font-family: var(--brand-font);}
.epv-media {width: 100%; aspect-ratio: 16 / 9; max-height: 52vh; overflow: hidden; border: 1px solid #a99ab343; border-radius: 16px; background: #000; box-shadow: inset 0 1px 2px #ffffff18, 0 10px 24px #0005;}
.epv-media video {display: block; width: 100%; height: 100%; object-fit: cover;}
.epv-status {display: flex; align-items: center; gap: 12px; margin: 26px 0 16px;}
.epv-title {margin: 0; color: #fff; font: 800 24px/30px var(--brand-font); letter-spacing: -.2px; text-transform: uppercase;}
.epv-percent {display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid #6fd0ffb3; border-radius: 7px; background: linear-gradient(#6fd0ff, #35b4ff 12%, #0089ff 52%, #024069); box-shadow: inset 0 1px 2px #ffffffd9, inset 0 -2px 3px #0007; color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; transform: skewX(-8deg);}
.epv-bar {position: relative; width: min(600px, 100%); height: 10px; overflow: hidden; border-radius: 999px; background: #25252a; box-shadow: inset 0 1px 2px #0008;}
.epv-bar span {position: absolute; inset: 0 auto 0 0; width: var(--epv-progress, 0%); min-width: 10px; border-radius: inherit; background: linear-gradient(#6fd0ff, #35b4ff 30%, #0089ff); box-shadow: inset 0 1px #ffffffb3; transition: width .6s ease-out;}
.epv-bar.indeterminate span {width: 28%; animation: epv-slide 1.5s ease-in-out infinite;}
.epv-tip {min-height: 40px; max-width: 560px; margin: 18px 0 22px; color: #929292; font-size: 14px; line-height: 20px; text-align: center; animation: epv-tip .5s ease-out both;}
.epv-tip strong {color: #eee; font-weight: 600;}
.epv-footer {display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;}
.epv-settings {display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;}
.epv-settings li {padding: 5px 10px; border: 1px solid #292929; border-radius: 8px; background: #1b1b1b; color: #bcbcbc; font-size: 12px; font-weight: 600;}
.epv-exit {display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border: 1px solid #292929; border-radius: 999px; background: #1b1b1b; box-shadow: inset 0 1px #ffffff08, 0 4px 8px #0004; color: #eee; font: 600 13px var(--brand-font); cursor: pointer;}
.epv-exit:hover {background: #242428;}
@keyframes epv-slide {0% {left: -28%;} 100% {left: 100%;}}
@keyframes epv-tip {from {opacity: 0; transform: translateY(4px);}}
@media (prefers-reduced-motion: reduce) {.epv-bar.indeterminate span {animation-duration: 4s;} .epv-tip {animation: none;}}
@media (max-width: 560px) {.epv-status {margin: 20px 0 14px;} .epv-title {font-size: 20px;} .epv-tip {font-size: 13px;}}
/*$vite$:1*/