/* QiHome online demo: the 「演示」 badge, its card, the calm demo note and the sign-in hint (demo-ui.js). */
#qidemo-badge { position: fixed; z-index: 2147483000; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom));
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; color: #f3ebe2; }
.qidemo-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border: 1px solid rgba(255, 196, 120, .35); border-radius: 999px;
  background: rgba(24, 20, 16, .78); color: #ffdcae; font: inherit; font-weight: 600; letter-spacing: .02em; cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), background-color .16s ease; }
.qidemo-pill:hover { background: rgba(36, 29, 22, .9); }
.qidemo-pill:active { transform: scale(.97); }
.qidemo-pill:focus-visible, .qidemo-btn:focus-visible { outline: 2px solid #ffb45a; outline-offset: 2px; }
.qidemo-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffb45a; box-shadow: 0 0 0 3px rgba(255, 180, 90, .22), 0 0 10px rgba(255, 180, 90, .8); }
.qidemo-pop { position: absolute; left: 0; bottom: 40px; width: min(330px, calc(100vw - 24px)); box-sizing: border-box; padding: 16px 16px 14px; border-radius: 16px;
  background: rgba(22, 18, 15, .94); border: 1px solid rgba(255, 220, 174, .14); box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); transform-origin: 0 100%; animation: qidemo-in .18s cubic-bezier(.2, .8, .2, 1); }
.qidemo-pop[hidden] { display: none; }
@keyframes qidemo-in { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
.qidemo-pop b { display: block; font-size: 15px; color: #fff3e3; margin-bottom: 6px; }
.qidemo-p, .qidemo-who { margin: 0 0 8px; color: rgba(243, 235, 226, .78); }
.qidemo-who { color: #ffdcae; font-size: 12.5px; }
.qidemo-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qidemo-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 220, 174, .18);
  background: rgba(255, 255, 255, .06); color: #f3ebe2; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.qidemo-btn:hover { background: rgba(255, 255, 255, .12); }
.qidemo-site { background: #ffb45a; border-color: #ffb45a; color: #1b130b; }
.qidemo-site:hover { background: #ffc37a; }
@media (max-width: 999px) {
  #qidemo-badge { left: auto; right: max(10px, env(safe-area-inset-right)); bottom: auto; top: calc(env(safe-area-inset-top) + 64px); }
  .qidemo-pill { height: 26px; padding: 0 10px 0 8px; font-size: 12px; }
  .qidemo-pop { left: auto; right: 0; bottom: auto; top: 34px; transform-origin: 100% 0; }
}
@media (prefers-reduced-motion: reduce) { .qidemo-pop { animation: none; } .qidemo-pill { transition: none; } }
.toast.qidemo-toast::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #ffb45a; vertical-align: 1px; }
.qidemo-hint { margin: 4px 0 10px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 180, 90, .14); color: inherit; font-size: 13px; line-height: 1.5; text-align: left; }