.topbar .navigation-playing {
  display: grid; align-content: center; gap: 3px; flex: 0 1 auto;
  margin-right: auto; min-width: 0; max-width: min(32vw, 520px);
  border-left: 1px solid rgba(255, 255, 255, .28); padding: 2px 0 2px 12px;
}
.topbar .navigation-playing[hidden], .topbar .navigation-playing-row[hidden] { display: none; }
.topbar:has(.navigation-playing:not([hidden])) .navigation-sensors { margin-right: 0; }
.topbar .navigation-playing-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 7px; align-items: baseline; font-size: 11px; line-height: 1.3; }
.topbar .navigation-playing-row span { color: #c8bcaa; font-size: inherit; }
.topbar .navigation-playing-row strong { color: #fff; font-size: inherit; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#navigationPlayingForm { margin-top: 24px; }
#navigationPlayingForm fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#navigationPlayingForm .navigation-playing-fields { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 16px 0; }
#navigationPlayingForm .navigation-playing-toggle { display: flex; gap: 8px; align-items: center; }
#navigationPlayingForm input[type="checkbox"] { width: auto; }
#navigationPlayingForm input[type="number"] { max-width: 150px; }
@media (max-width: 800px) {
  .topbar:has(.navigation-playing:not([hidden])) { flex-wrap: wrap; }
  .topbar .navigation-playing { max-width: 100%; }
}