/* Первый кадр — без прошлой страницы, даже на медленной сети. */
html[data-boot] .page-content { opacity: 0; visibility: hidden; }
.page-content { opacity: 1; transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1); }
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: calc(var(--safe-top, 0px) + 18px) max(16px, calc((100vw - 560px) / 2));
  background: var(--bg, var(--paper, #f2f2f6));
  opacity: 1;
  transition: opacity 260ms cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  overflow: hidden;
}
html:not([data-boot]) .page-loader { opacity: 0; }
.page-loader[hidden] { display: none; }

/* Скелетон в форме будущего экрана: заголовок, переключатель, строки. */
.page-loader .sk { margin-bottom: 12px; }
.page-loader .sk-line { width: 38%; height: 16px; border-radius: 6px; margin-bottom: 10px; }
.page-loader .sk-title { width: 56%; height: 30px; border-radius: 8px; margin-bottom: 22px; }
.page-loader .sk-seg { height: 44px; border-radius: 12px; }
.page-loader .sk-row { height: 68px; }
.page-loader .sk-group { height: 152px; margin-top: 34px; }
.page-loader .sk-group.short { height: 120px; margin-top: 34px; }

/* Старые страницы (статистика, админка) — та же пульсация. */
.boot-placeholder {
  height: 44px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--fill, var(--soft, #e7e9ed));
  animation: boot-pulse 1.6s ease-in-out infinite;
}
.boot-placeholder.large { height: 280px; }
.boot-placeholder.small { height: 90px; }
@keyframes boot-pulse { 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  .page-content, .page-loader { transition: none; }
  .boot-placeholder { animation: none; }
}

.page-loader.boot-error {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  color: var(--text, var(--ink, #111114));
}
.boot-error p { margin: 0; line-height: 1.5; }
.boot-error p:first-child { font-size: 18px; font-weight: 600; }
.boot-error p + p { color: var(--hint, #8a8a92); }
.boot-error button {
  margin-top: 8px;
  padding: 12px 18px;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: var(--accent, #0b7d61);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.boot-error button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }