.cms-demo-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 2147483647;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 14px; background: #07111f; color: #e8eef7;
  border-bottom: 1px solid #28425f; box-shadow: 0 4px 18px #0006;
  font: 12px/1.35 ui-sans-serif, system-ui, -apple-system, sans-serif;
}
body.cms-demo-active { padding-top: 48px !important; }
.cms-demo-bar .cms-demo-mark {
  color: #6ee7f5; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.cms-demo-bar .cms-demo-city { color: #b7c6d8; }
.cms-demo-bar label { color: #8ba3bb; margin-left: auto; }
.cms-demo-bar select {
  background: #10233a; color: #e8eef7; border: 1px solid #35506d;
  border-radius: 6px; padding: 4px 8px; font: inherit; color-scheme: dark;
}
.cms-demo-bar button {
  background: #173149; color: #b7c6d8; border: 1px solid #35506d;
  border-radius: 6px; padding: 4px 9px; font: inherit; cursor: pointer;
}
.cms-demo-bar button:hover { border-color: #6ee7f5; color: #e8eef7; }
.cms-demo-bar .cms-demo-error { color: #fca5a5; max-width: 34ch; }
@media (max-width: 680px) {
  .cms-demo-bar { font-size: 11px; padding: 5px 8px; gap: 6px; }
  body.cms-demo-active { padding-top: 62px !important; }
  .cms-demo-bar .cms-demo-city { display: none; }
}