#app_page_content { display: block; min-width: 0; }
#app-loading-status {
  position: fixed;
  top: 4.5rem;
  right: 1rem;
  z-index: 100;
  padding: .75rem 1rem;
  border: 1px solid var(--edge-strong);
  border-radius: .5rem;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 4px 20px #0004;
  font-size: .875rem;
}
html[data-page-loading] main { opacity: .55; }
.turbo-progress-bar { background: var(--accent); height: 3px; }
.page-placeholder { min-height: 55vh; }
.page-loading-label { display: flex; align-items: center; gap: .75rem; color: var(--ink-muted); margin-bottom: 1.5rem; }
.loading-spinner { width: 1rem; height: 1rem; border: 2px solid var(--edge-strong); border-top-color: var(--accent); border-radius: 50%; animation: page-loading-spin .8s linear infinite; }
.page-placeholder-heading, .page-placeholder-controls, .page-placeholder-rows > div {
  border-radius: .375rem;
  background: var(--surface-2);
  animation: page-loading-pulse 1.2s ease-in-out infinite alternate;
}
.page-placeholder-heading { width: min(70%, 32rem); height: 2.5rem; margin-bottom: 1rem; }
.page-placeholder-controls { width: min(85%, 44rem); height: 1.25rem; margin-bottom: 2rem; }
.page-placeholder-rows { display: grid; gap: .75rem; }
.page-placeholder-rows > div { height: 3.5rem; }
.page-load-error { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px solid var(--edge-strong); border-radius: .5rem; }
.page-load-error p { flex-basis: 100%; }
turbo-frame[aria-busy="true"]:not(#app_page_content):not(#leaderboard_results)::before {
  content: "Loading…";
  display: block;
  padding: .5rem .75rem;
  color: var(--accent);
  font-size: .875rem;
}
@keyframes page-loading-spin { to { transform: rotate(360deg); } }
@keyframes page-loading-pulse { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .loading-spinner, .page-placeholder-heading, .page-placeholder-controls, .page-placeholder-rows > div { animation: none; }
}