@font-face {
  font-family: Manrope;
  src: url("../fonts/Manrope-variable.946beb949095.ttf") format('truetype');
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url("../fonts/Vazirmatn-variable.f6d31671339d.woff2") format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

.app-loading {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: hidden;
  background: var(--bg-app);
  color: var(--text-primary);
  font: 400 1rem/1.6 Manrope, Vazirmatn, system-ui, sans-serif;
}

[lang="fa"] .app-loading { font-family: Vazirmatn, Manrope, Tahoma, sans-serif; }

.app-loading::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 16%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 85%),
    radial-gradient(ellipse 50% 42% at 90% 90%, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 85%);
}

.app-loading__panel {
  width: min(100%, 420px);
  padding: clamp(28px, 7vw, 44px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 28px);
  background: color-mix(in srgb, var(--bg-surface) 90%, var(--bg-app));
  box-shadow: 0 24px 64px color-mix(in srgb, var(--overlay) 8%, transparent);
  text-align: center;
}

.app-loading__mark {
  display: grid;
  place-items: center;
  inline-size: 86px;
  block-size: 86px;
  margin-inline: auto;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--border-default));
  border-radius: var(--radius-lg, 28px);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--bg-surface));
  box-shadow: 0 12px 36px color-mix(in srgb, var(--color-primary) 9%, transparent);
}

.app-loading__mark img { display: block; inline-size: 68px; block-size: 68px; object-fit: contain; }

.app-loading__brand {
  margin: 24px 0 2px;
  color: var(--text-primary);
  font-size: clamp(1.45rem, 5vw, 1.7rem);
  font-weight: 800;
  line-height: 1.45;
}

.app-loading__tagline {
  margin: 0;
  color: var(--text-secondary);
  font-size: .875rem;
  line-height: 1.7;
}

.app-loading__progress {
  inline-size: min(100%, 188px);
  block-size: 4px;
  margin: 32px auto 14px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 14%, var(--bg-elevated));
}

.app-loading__progress span {
  display: block;
  inline-size: 42%;
  block-size: 100%;
  margin-inline-end: auto;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  animation: app-loading-sweep 1.9s ease-in-out infinite;
}

[dir="rtl"] .app-loading__progress span { animation-name: app-loading-sweep-rtl; }

.app-loading__status {
  margin: 0;
  color: var(--text-secondary);
  font-size: .8125rem;
  line-height: 1.7;
}

.app-loading__noscript { margin: 16px 0 0; color: var(--text-primary); font-size: .875rem; }

@keyframes app-loading-sweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(250%); }
}

@keyframes app-loading-sweep-rtl {
  from { transform: translateX(110%); }
  to { transform: translateX(-250%); }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading__progress span,
  [dir="rtl"] .app-loading__progress span { animation: none; transform: none; }
}