.app-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(rgba(122, 162, 255, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 162, 255, 0.075) 1px, transparent 1px),
    radial-gradient(780px 420px at 50% 50%, rgba(122, 162, 255, 0.08), transparent 68%),
    radial-gradient(620px 360px at 58% 43%, rgba(20, 184, 166, 0.055), transparent 70%),
    var(--color-bg, #0b0e17);
  background-size:
    44px 44px,
    44px 44px,
    auto,
    auto,
    auto;
  background-position:
    center,
    center,
    center,
    center,
    center;
  color: var(--color-text, #f8fafc);
  font-family: var(--font-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  overflow: hidden;
}

.app-loading-card {
  --ui-panel-bg: rgba(15, 18, 25, 0.12);
  --ui-panel-border: transparent;
  --ui-panel-blur: 5px;
  --ui-panel-shadow:
    0 22px 54px -22px rgba(0, 0, 0, 0.82),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.045),
    inset 8px 0 18px rgba(255, 255, 255, 0.018),
    inset -8px 0 18px rgba(122, 162, 255, 0.025);
  position: relative;
  z-index: 1;
  min-width: 210px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 17px;
  border: 0;
  border-radius: var(--ui-panel-radius, 12px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035) 38%, rgba(255, 255, 255, 0.055)),
    var(--ui-panel-bg);
  backdrop-filter: blur(var(--ui-panel-blur)) saturate(1.45);
  -webkit-backdrop-filter: blur(var(--ui-panel-blur)) saturate(1.45);
}

.app-loading-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--ui-panel-radius, 12px) - 1px);
  pointer-events: none;
  background:
    linear-gradient(rgba(122, 162, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 162, 255, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
  opacity: 0.34;
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
}

.app-loading-mark {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  animation: app-loading-breathe 2.2s ease-in-out infinite;
  color: #7aa2ff;
  filter:
    drop-shadow(0 0 5px rgba(122, 162, 255, 0.36))
    drop-shadow(0 0 12px rgba(73, 139, 255, 0.18));
}

.app-loading-mark svg {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  overflow: visible;
  fill: currentColor;
}

.app-loading-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.app-loading-label {
  color: var(--color-text, #f8fafc);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.app-loading-detail {
  margin-top: 3px;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
}

@keyframes app-loading-breathe {
  0%,
  100% {
    transform: scale(0.96);
  }

  50% {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading-mark {
    animation: none;
  }
}