/* Chế độ xem thử (js/components/demo.js): chưa có key → xem được, không bấm được */
.demo-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  border: 1.5px solid rgba(251,191,36,.55); border-radius: 12px;
  background: rgba(30,22,6,.92); color: #fcd34d; font-weight: 700; font-size: 13px;
  box-shadow: 0 0 18px rgba(251,191,36,.15);
}
.demo-bar[hidden] { display: none; }
.demo-bar__txt { flex: 1 1 260px; }
.demo-bar__btn {
  padding: 7px 14px; border-radius: 9px; cursor: pointer; font: inherit;
  border: 1.5px solid rgba(74,222,128,.6); background: rgba(74,222,128,.12); color: #4ade80;
}
.demo-bar__btn:hover { background: rgba(74,222,128,.22); }

/* trang bị khoá: mờ đi + không bấm được (trừ Account, Review) */
body.is-demo .main > .page:not(#page-account):not(#page-review),
body.is-demo .main > #rbx-head {
  pointer-events: none; user-select: none;
  opacity: .5; filter: saturate(.55);
  transition: opacity .2s;
}

.demo-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 9999;
  padding: 10px 16px; border-radius: 10px; border: 1.5px solid rgba(251,191,36,.6);
  background: #1e1606; color: #fcd34d; font-weight: 700; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.demo-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
html.low-ui .demo-bar, html.low-ui .demo-toast { box-shadow: none; }