/* Shell único: cada herramienta conserva su panel y no cambia la URL. */
.spa-view { display: none; min-width: 0; }
.spa-view.active { display: block; animation: spa-enter .18s ease both; }
@keyframes spa-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

body[data-spa-view="performance"] .sidebar,
body[data-spa-view="performance"] .mobile-nav,
body[data-spa-view="performance"] .player-bar { display: none; }
body[data-spa-view="performance"] .workspace { margin-left: 0; padding-bottom: 0; }
body[data-spa-view="performance"] .stage-page { min-height: 100dvh; }
body[data-spa-view="performance"] .toast-region { bottom: 20px; }

.stage-lyrics-viewport {
  height: min(56dvh, 610px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 18px;
  background: rgb(0 0 0 / 18%);
}
.stage-lyrics-viewport [data-stage-lyrics] { min-height: 100%; padding: clamp(20px, 4vw, 48px); }
.stage-lyrics-viewport [data-stage-lyrics] p { margin: 0 0 14px; line-height: 1.55; }

@media (max-width: 700px) {
  .spa-view.active { animation: none; }
  body[data-spa-view="performance"] .stage-page { padding-bottom: env(safe-area-inset-bottom); }
  .stage-lyrics-viewport { height: min(53dvh, 490px); border-radius: 14px; }
  .stage-lyrics-viewport [data-stage-lyrics] { padding: 18px 15px 30px; }
}

@media (prefers-reduced-motion: reduce) { .spa-view.active { animation: none; } }

/* Barra persistente: sempre reflete a faixa e a posição do motor de áudio. */
.player-progress::after { left: var(--progress, 0%); }
.bar-track-index { min-width: 28px; color: var(--color-text); font-size: 1rem; text-align: center; }
.mini-cover, .hero-cover { position: relative; isolation: isolate; overflow: hidden; }
.hero-cover .track-art-fallback { pointer-events: none; }
.mini-cover .track-art-fallback { pointer-events: none; font-size: 24px; }
@media (min-width: 701px) {
  .player-bar { grid-template-columns: minmax(0, 1fr) 28px minmax(130px, 1fr) minmax(0, 1fr); }
}
@media (min-width: 701px) and (max-width: 980px) {
  .player-bar { grid-template-columns: minmax(0, 1fr) 28px minmax(130px, 1fr); }
}

@media (max-width: 700px) {
  .player-bar { grid-template-columns: minmax(0, 1fr) 30px 42px; gap: 8px; }
  .now-playing { grid-column: 1; grid-row: 1; }
  .bar-track-index { grid-column: 2; grid-row: 1; font-size: 1.1rem; }
  .bar-transport, .bar-buttons { display: contents; }
  .bar-buttons > button:not(.bar-play), .bar-time { display: none; }
  .bar-play { grid-column: 3; grid-row: 1; width: 40px !important; height: 40px !important; }
}