.demo-bar { position: fixed; right: 12px; bottom: 12px; z-index: 9999; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 8px 10px 8px 14px; border: 1px solid rgba(0, 209, 255, 0.45); border-radius: 999px; background: rgba(7, 11, 20, 0.88); color: #dbe6f3; font-size: 12px; line-height: 1.5; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.demo-bar b { color: #00d1ff; font-weight: 700; letter-spacing: 0.14em; font-size: 11px; }
.demo-bar button { flex: none; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.demo-bar button:hover { border-color: #00d1ff; color: #00d1ff; }
@media (max-width: 720px) { .demo-bar span { display: none; } }
.demo-bar { max-width: min(560px, calc(100% - 24px)); border-radius: 12px; }
.demo-bar__close { padding: 2px 9px !important; font-size: 14px !important; line-height: 1.2; }
.demo-bar-off .demo-bar { display: none; }