/* Final project workflow and billing polish. */
.topProjectStrip .stripPrice{gap:2px}
.stripPriceValueRow{display:flex;align-items:baseline;justify-content:flex-end;gap:.65rem;max-width:100%}
.stripPriceValueRow #topSuggestedCost{flex:0 0 auto}
.topEstimatedProfit{display:block;color:var(--accent,#59b8ff)!important;font-size:.78rem!important;font-weight:700;letter-spacing:.02em;margin:0;white-space:nowrap}
.projectsCardHeading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.55rem}
.projectsCardHeading h2{margin:0}
.projectsCardHeadingActions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}
.createNewProjectButton{min-height:42px;padding:.68rem 1.05rem;font-weight:600;white-space:nowrap}
#projectsViewAllHeadingButton{min-height:42px;padding:.68rem 1.05rem;font-weight:600;white-space:nowrap}
.calculatorProjectImage{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin:.82rem 0 .7rem;padding-left:.15rem}
.calculatorProjectImage[hidden]{display:none!important}
.calculatorProjectImageButton{appearance:none;border:0;background:transparent;padding:0;color:var(--accent,#59b8ff);font:inherit;font-size:.88rem;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
.calculatorProjectImageButton:hover{filter:brightness(1.15);text-decoration-thickness:2px}
.calculatorProjectImageButton:focus-visible{outline:2px solid var(--accent,#59b8ff);outline-offset:5px;border-radius:4px}
.calculatorProjectImageStatus{color:var(--muted,#aeb7c4);font-size:.78rem;line-height:1.35}
.calculatorProjectImage.imageStaged .calculatorProjectImageStatus{color:var(--accent,#59b8ff)}
.calculatorProjectImage.imageError .calculatorProjectImageStatus{color:var(--danger,#ff6b78)}
.calculatorProjectImage.working .calculatorProjectImageButton{opacity:.6}

.newProjectGuardBackdrop{position:fixed;inset:0;z-index:10080;display:grid;place-items:center;padding:clamp(14px,4vw,42px);background:rgb(3 8 15/.78);backdrop-filter:blur(13px)}
.newProjectGuardDialog{position:relative;width:min(610px,100%);overflow:hidden;border:1px solid color-mix(in srgb,var(--accent,#59b8ff) 78%,transparent);border-radius:26px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel,#1b222c) 96%,var(--accent,#59b8ff) 4%),var(--panel,#1b222c));box-shadow:0 28px 90px rgb(0 0 0/.48),0 0 38px color-mix(in srgb,var(--accent,#59b8ff) 16%,transparent);padding:clamp(25px,5vw,42px)}
.newProjectGuardDialog:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,transparent,var(--accent,#59b8ff),transparent)}
.newProjectGuardClose{position:absolute;top:18px;right:18px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border,#3b4654);background:var(--input,#10161e);color:var(--accent,#59b8ff);font:400 1.85rem/1 system-ui;cursor:pointer}
.newProjectGuardIcon{width:82px;height:82px;display:grid;place-items:center;border-radius:24px;border:1px solid color-mix(in srgb,var(--accent,#59b8ff) 70%,transparent);background:color-mix(in srgb,var(--accent,#59b8ff) 9%,transparent);margin-bottom:1.25rem}
.newProjectRefreshMask,.newProjectRefreshInline{display:inline-block;background:currentColor;-webkit-mask:url("images/refresh.svg") center/contain no-repeat;mask:url("images/refresh.svg") center/contain no-repeat}
.newProjectRefreshMask{width:49px;height:52px;color:var(--accent,#59b8ff)}
.newProjectRefreshInline{width:19px;height:20px;margin-right:.45rem;vertical-align:-.24em;color:currentColor}
.newProjectGuardDialog>span{display:block;color:var(--accent,#59b8ff);font-size:.77rem;font-weight:900;letter-spacing:.16em;margin-bottom:.45rem}
.newProjectGuardDialog h2{font-size:clamp(1.65rem,4vw,2.35rem);margin:0 0 .75rem}
.newProjectGuardDialog p{color:var(--muted,#aeb7c4);line-height:1.6;margin:0}
.newProjectGuardNotice{display:grid;gap:.18rem;margin:1.35rem 0;padding:1rem 1.1rem;border:1px solid color-mix(in srgb,var(--accent,#59b8ff) 38%,var(--border,#3b4654));border-radius:15px;background:color-mix(in srgb,var(--accent,#59b8ff) 6%,transparent)}
.newProjectGuardNotice small{color:var(--muted,#aeb7c4)}
.newProjectGuardActions{display:grid;grid-template-columns:.8fr 1.35fr;gap:.75rem}
.newProjectGuardActions .btn{min-height:54px}
.newProjectResetStatus{min-height:1.4em;margin:.85rem 0 0!important;text-align:center;color:var(--accent,#59b8ff)!important;font-weight:700}
.newProjectGuardBackdrop.resetting .newProjectGuardIcon{animation:projectResetSpin .7s cubic-bezier(.4,0,.2,1)}
.newProjectGuardBackdrop.resetComplete .newProjectGuardIcon{animation:projectResetDone .42s ease both}
@keyframes projectResetSpin{to{transform:rotate(-360deg) scale(.88)}}
@keyframes projectResetDone{50%{transform:scale(1.12)}to{transform:scale(1)}}

.checkoutSavedPayment{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;margin:1rem 0;padding:1rem 1.1rem;border:1px solid color-mix(in srgb,var(--accent,#59b8ff) 55%,var(--border,#3b4654));border-radius:17px;background:linear-gradient(110deg,color-mix(in srgb,var(--accent,#59b8ff) 10%,transparent),color-mix(in srgb,var(--panel2,#242c36) 92%,transparent));box-shadow:inset 4px 0 0 var(--accent,#59b8ff)}
.checkoutSavedPaymentIcon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--accent,#59b8ff) 13%,transparent);border:1px solid color-mix(in srgb,var(--accent,#59b8ff) 48%,transparent)}
.checkoutSavedPaymentIcon svg{width:28px;fill:none;stroke:var(--accent,#59b8ff);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.checkoutSavedPayment>div:nth-child(2){display:grid;gap:.15rem;min-width:0}
.checkoutSavedPayment span{color:var(--accent,#59b8ff);font-size:.7rem;font-weight:900;letter-spacing:.13em}
.checkoutSavedPayment strong{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.checkoutSavedPayment small{color:var(--muted,#aeb7c4);line-height:1.35}
.checkoutSavedPayment .btn{min-height:43px;padding:.55rem .9rem;font-weight:600;white-space:nowrap}

.projectLibraryToolbar{align-items:center}
.projectLibraryFilter{position:relative;flex:0 0 auto;align-self:stretch}
.projectLibraryFilterButton{height:100%;min-height:58px;display:flex;align-items:center;gap:.45rem;padding:.55rem .85rem;border:1px solid color-mix(in srgb,var(--accent,#59b8ff) 48%,var(--border,#3b4654));border-radius:15px;background:color-mix(in srgb,var(--accent,#59b8ff) 6%,var(--input,#10161e));color:var(--accent,#59b8ff);cursor:pointer;font:inherit;font-weight:700}
.projectLibraryFilterButton svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.projectLibraryFilterMenu{position:absolute;z-index:12;top:calc(100% + 8px);left:0;width:min(285px,80vw);padding:.65rem;border:1px solid color-mix(in srgb,var(--accent,#59b8ff) 58%,var(--border,#3b4654));border-radius:17px;background:var(--panel,#1b222c);box-shadow:0 18px 48px rgb(0 0 0/.42)}
.projectLibraryFilterMenu[hidden]{display:none}
.projectLibraryFilterMenu>strong{display:block;padding:.5rem .65rem;color:var(--accent,#59b8ff);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.projectLibraryFilterMenu button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;border:0;border-radius:10px;background:transparent;color:var(--text,#f4f6f8);padding:.62rem .7rem;text-align:left;cursor:pointer;font:inherit;font-size:.88rem}
.projectLibraryFilterMenu button:hover,.projectLibraryFilterMenu button.active{background:color-mix(in srgb,var(--accent,#59b8ff) 12%,transparent);color:var(--accent,#59b8ff)}
.projectLibraryFilterMenu button span{opacity:0}.projectLibraryFilterMenu button.active span{opacity:1}
.heroRenewDate.freePlanLimit{border-color:color-mix(in srgb,var(--accent,#59b8ff) 68%,transparent);background:color-mix(in srgb,var(--accent,#59b8ff) 10%,var(--panel,#1b222c));animation:freeLimitGlow 2.4s ease-in-out infinite}
.heroRenewDate.freePlanLimit strong{display:block;color:var(--text,#f4f6f8);font-size:.67rem;white-space:nowrap}
@keyframes freeLimitGlow{50%{box-shadow:0 0 20px color-mix(in srgb,var(--accent,#59b8ff) 28%,transparent)}}

@media (max-width:720px){
  .topProjectStrip .stripPrice{align-items:flex-end}
  .stripPriceValueRow{align-items:flex-end;flex-direction:column-reverse;gap:0}
  .topEstimatedProfit{font-size:.7rem!important}
  .projectsCardHeading{align-items:flex-start;flex-direction:column}
  .projectsCardHeadingActions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
  .createNewProjectButton,#projectsViewAllHeadingButton{width:100%}
  .calculatorProjectImage{align-items:flex-start;flex-direction:column;gap:.35rem}
  .newProjectGuardBackdrop{align-items:end;padding:0}
  .newProjectGuardDialog{width:100%;max-height:min(92dvh,760px);overflow:auto;border-radius:24px 24px 0 0;padding:27px 20px max(24px,env(safe-area-inset-bottom))}
  .newProjectGuardActions{grid-template-columns:1fr}
  .newProjectGuardClose{top:14px;right:14px;width:44px;height:44px}
  .checkoutSavedPayment{grid-template-columns:auto minmax(0,1fr);gap:.75rem}
  .checkoutSavedPayment .btn{grid-column:1/-1;width:100%}
  .checkoutSavedPayment strong{white-space:normal}
  .projectLibraryToolbar{align-items:stretch!important}
  .projectLibraryFilter{order:2;align-self:auto}
  .projectLibraryFilterButton{min-height:52px}
  .projectLibraryFilterButton span{display:none}
  .projectLibraryFilterMenu{left:auto;right:0}
}
@media (prefers-reduced-motion:reduce){.heroRenewDate.freePlanLimit{animation:none}.newProjectGuardBackdrop.resetting .newProjectGuardIcon,.newProjectGuardBackdrop.resetComplete .newProjectGuardIcon{animation:none}}