/* Demo ribbon + notice on top of the real dashboard styles. */
.demo-ribbon {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; background: #998eff; color: #0f0f10;
  font-size: 13px; line-height: 1.3; text-align: center;
}
.demo-ribbon b { font-weight: 600; }
.demo-ribbon a { color: #0f0f10; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.demo-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1000;
  max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 12px;
  background: #f6f7f4; color: #0f0f10; font-size: 14px; line-height: 1.35;
  box-shadow: rgba(0, 0, 0, 0.35) 0 8px 28px;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.demo-toast.show { opacity: 1; transform: translate(-50%, 0); }
.demo-exit { font-size: 13px; text-decoration: none; opacity: .8; }
.demo-exit:hover { opacity: 1; }