.ps-loading-overlay,
.ps-loading-progress,
.ps-loading-progress * { box-sizing: border-box; }

.ps-app-boot {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 1rem;
  background: var(--ps-bg-base, #f3f5f1); overflow: hidden;
}
.ps-app-boot > [aria-hidden="true"] { position: absolute; inset: 0; overflow: hidden; }
.ps-app-boot::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: color-mix(in srgb, var(--ps-bg-base, #f3f5f1) 16%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ps-app-boot > .ps-loading-progress { position: relative; z-index: 2; border-radius: 1rem; background: var(--ps-bg-surface, #fff); box-shadow: 0 .75rem 2.5rem #0002; visibility: hidden; animation: ps-loading-boot-reveal 0s 400ms forwards; }
.ps-app-boot.is-managed > .ps-loading-progress { visibility: hidden; animation: none; }
@keyframes ps-loading-boot-reveal { to { visibility: visible; } }

.ps-loading-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
  background: transparent;
  overflow: hidden;
}
.ps-loading-overlay__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: color-mix(in srgb, var(--ps-bg-base, #f3f5f1) 16%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ps-loading-overlay__card {
  position: relative; z-index: 2;
  width: min(100%, 26rem); max-height: calc(100dvh - 2rem); overflow: auto;
  padding: .25rem;
  border: 1px solid var(--ps-border, #dce4de);
  border-radius: 1rem;
  background: var(--ps-bg-surface, #fff);
  box-shadow: 0 .75rem 2.5rem #0003;
}
.ps-loading-overlay .ps-loading-progress { width: 100%; }
.ps-loading-overlay[hidden] { display: none !important; }
.ps-loading-overlay[data-target-ready="true"] { pointer-events: none; }
.ps-loading-overlay[data-target-ready="true"] .ps-loading-overlay__scrim {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}

.ps-loading-target-preview {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none; user-select: none;
  background: var(--ps-bg-base, #f3f5f1);
  color: var(--ps-text-primary, #123c32);
  /* Paint the destination blur on the preview itself as well. Some WebKit
     compositors expose backdrop-filter but do not paint it above this layer. */
  -webkit-filter: blur(6px); filter: blur(6px);
  transform: scale(1.025); transform-origin: center;
}
.ps-loading-preview-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(env(safe-area-inset-top, 0px) + 1.2rem) max(1.25rem, calc((100vw - 60rem) / 2));
  color: #f8faf6; background: #153d31;
}
.ps-loading-preview-heading strong { font-size: 1rem; letter-spacing: .08em; }
.ps-loading-preview-heading > span { font-size: .85rem; font-weight: 600; }
.ps-loading-preview-content { width: min(100%, 66rem); margin-inline: auto; min-height: 100vh; }
.ps-loading-preview-content > :not(.ps-loading-preview-hero):not(.ps-loading-preview-section) { pointer-events: none; }
.ps-loading-preview-hero {
  min-height: 11rem; display: grid; align-content: end; padding: 1.5rem;
  color: #f7faf7; background: linear-gradient(145deg, #123c32, #426b55);
}
.ps-loading-preview-hero h1 { margin: 0; font-size: 1.8rem; }
.ps-loading-preview-section {
  display: grid; gap: .8rem; margin: 1.25rem; padding: 1.4rem;
  border: 1px solid var(--ps-border, #dce4de); border-radius: 1rem;
  background: var(--ps-bg-surface, #fff);
}
.ps-loading-preview-line, .ps-loading-preview-field {
  display: block; width: 100%; min-height: .8rem; border-radius: .4rem;
  background: color-mix(in srgb, var(--ps-text-secondary, #577064) 16%, transparent);
}
.ps-loading-preview-line:nth-child(2) { width: 70%; }
.ps-loading-preview-line:nth-child(3) { width: 85%; }
.ps-loading-preview-field { min-height: 2.5rem; }
.ps-loading-target-preview *, .ps-loading-target-preview *::before, .ps-loading-target-preview *::after {
  animation: none !important; transition: none !important;
}

.ps-loading-progress {
  box-sizing: border-box;
  display: grid;
  gap: .55rem;
  width: min(100%, 24rem);
  min-width: 0;
  margin-inline: auto;
  padding: 1rem;
  color: var(--ps-text-primary, #17392e);
  font-family: Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: .875rem;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}

.ps-loading-progress__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
}

.ps-loading-progress__label {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ps-loading-progress__percent {
  flex: 0 0 auto;
  color: var(--ps-text-secondary, #53665d);
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ps-loading-progress__track {
  display: block;
  width: 100%;
  height: .375rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ps-bg-hover, #e0e8e2);
}

.ps-loading-progress__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--ps-primary, #245a43);
  transform-origin: left center;
  transition: transform 180ms ease;
}

.ps-loading-progress__detail {
  min-width: 0;
  color: var(--ps-text-secondary, #53665d);
  font-size: .75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ps-loading-progress.is-indeterminate .ps-loading-progress__fill {
  width: 32%;
  animation: ps-loading-progress-wait 1.35s ease-in-out infinite;
}

.ps-loading-progress--compact {
  display: inline-grid;
  gap: .25rem;
  width: min(100%, 18rem);
  padding: .25rem 0;
  vertical-align: middle;
  font-size: .75rem;
}

.ps-loading-progress--compact .ps-loading-progress__percent,
.ps-loading-progress--compact .ps-loading-progress__detail {
  font-size: .6875rem;
}

.ps-loading-progress--compact .ps-loading-progress__track { height: .25rem; }
.ps-loading-progress [hidden] { display: none !important; }

@keyframes ps-loading-progress-wait {
  from { transform: translateX(-110%); }
  to { transform: translateX(325%); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-loading-progress__fill { transition: none; }
  .ps-loading-progress.is-indeterminate .ps-loading-progress__fill {
    animation: none;
    transform: translateX(100%);
    opacity: .65;
  }
}