/* The demo banner above the dashboard (demo/demo.js). Uses the page's own tokens, so it follows light and dark. */
.demo-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  padding: 10px 20px; background: var(--sheet); border-bottom: 1px solid var(--line);
  box-shadow: inset 0 3px 0 var(--blue); font-size: .9rem;
}
.demo-bar p { margin: 0; max-width: 52rem; color: var(--muted); }
.demo-bar strong {
  color: var(--red); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin-right: 6px;
  border: 1.5px solid var(--red); border-radius: 2px; padding: 1px 5px;
}
.demo-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-acts .btn { padding: 6px 12px; font-size: .875rem; }
.demo-keys { margin: 0 0 10px; font-size: .8rem; color: var(--muted); }
@media (max-width: 820px) { .demo-bar { padding: 10px 16px; } }