html, body.route-shell { height: 100%; }
body.route-shell { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
body.ds-ui.route-shell > header { flex: 0 0 auto; position: relative; }
body.ds-ui.route-shell > #route-stage {
  flex: 1 1 auto; position: relative; width: 100%; max-width: none;
  min-height: 0; margin: 0; padding: 0; overflow: hidden;
}
.route-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0b0b0d; }
.route-frame[hidden] { display: none; }
.route-frame--loading { z-index: 0; pointer-events: none; }
.route-frame--active { z-index: 1; }
body.route-shell:not([data-route="/"]) .motion-control { visibility: hidden; }
body.route-shell #route-status {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 40;
  max-width: min(90vw,480px); padding: 10px 16px; border-radius: 10px;
  background: #1c1c1f; color: #eee; font-size: 13px;
}
body.route-shell #route-status:empty { display: none; }
@media (max-width:1100px) {
  body.route-shell:not([data-route="/"]) .motion-control { display: none; }
}