.demo-ribbon{position:fixed;z-index:10000;top:9px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);min-height:34px;padding:7px 12px;background:linear-gradient(90deg,rgba(109,40,217,.96),rgba(124,58,237,.96),rgba(37,99,235,.96));color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #ffffff42;border-radius:11px;font:700 12px/1.2 Inter,Arial,sans-serif;letter-spacing:.04em;box-shadow:0 8px 24px #11182738;transition:opacity .2s ease,transform .2s ease,background .2s ease}
.demo-ribbon button{border:1px solid #ffffff88;border-radius:7px;background:#fff;color:#5b21b6;padding:5px 10px;font-weight:800;cursor:pointer;white-space:nowrap}.demo-ribbon .demo-toggle{border:0;background:transparent;color:#fff;padding:4px 2px;letter-spacing:.04em}
.demo-ribbon small{font-weight:500;opacity:.92;white-space:nowrap}.demo-label-short{display:none}
.demo-ribbon.collapsed{top:auto;left:auto;right:16px;bottom:16px;transform:none;min-height:0;padding:3px 8px;border-radius:999px;background:rgba(76,29,149,.58);opacity:.62;box-shadow:0 4px 14px #11182724;backdrop-filter:blur(8px)}
.demo-ribbon.collapsed:hover,.demo-ribbon.collapsed:focus-within{opacity:1;background:rgba(76,29,149,.88)}.demo-ribbon.collapsed small,.demo-ribbon.collapsed #demo-reset,.demo-ribbon.collapsed .demo-label-full{display:none}.demo-ribbon.collapsed .demo-label-short{display:inline}.demo-ribbon.collapsed .demo-toggle{padding:5px 7px;font-size:11px}
.demo-login-note{margin:12px 0 0;padding:12px;border:1px solid #c4b5fd;border-radius:10px;background:#f5f3ff;color:#4c1d95;text-align:center;font-size:13px}
.demo-login-note b{display:block;margin-bottom:5px}.demo-login-note code{background:#ede9fe;padding:2px 6px;border-radius:5px;color:#4c1d95}
@media(max-width:700px){.demo-ribbon{justify-content:space-between;font-size:10px;top:6px;max-width:calc(100vw - 12px)}.demo-ribbon small{display:none}.demo-ribbon.collapsed{top:auto;right:10px;bottom:10px}}