/* The "sample account" bar above the portal (demo.js). Colours from the
   portal's own tokens (css/app.css), so it follows the light and dark themes. */
.demo-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem;
  padding: .5rem 16px; background: var(--accent-soft, #e3effa); color: var(--text, #1b1f24);
  border-bottom: 1px solid var(--border, #d0d7de); font-size: .9rem; line-height: 1.35;
}
.demo-bar-text { flex: 1 1 28rem; min-width: 0; }
.demo-bar-text strong { margin-right: .25rem; }
.demo-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.demo-bar a { color: inherit; }
.demo-bar a.demo-bar-trial {
  display: inline-block; padding: .35rem .8rem; border-radius: 6px; font-weight: 600; text-decoration: none;
  background: var(--accent, #1565c0); color: var(--on-accent, #fff);
}
.demo-bar a.demo-bar-trial:hover { filter: brightness(1.08); }
.demo-bar-lang { display: inline-flex; align-items: center; gap: .35rem; }
.demo-bar-lang select { min-height: 0; padding: .15rem .3rem; font-size: .85rem; }
.demo-bar-credit { font-size: .75rem; color: var(--muted, #57606a) !important; }
@media (max-width: 700px) {
  .demo-bar { font-size: .82rem; }
  .demo-bar-credit { flex-basis: 100%; }
}
@media print { .demo-bar { display: none; } }