/* Vouchler demo (970): the demo bar, the toast, the sheet — on top of the panel's own sheets. */
.demo-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;padding:8px 16px;background:#1c2230;color:#fff;font-size:13px;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.demo-bar .demo-tag{background:linear-gradient(120deg,#c99a2e,#e0b95a);color:#1b1608;font-weight:900;letter-spacing:.12em;font-size:11px;padding:3px 8px;border-radius:99px;flex:none}
.demo-bar .demo-txt{color:#aab3c8;flex:1 1 auto;min-width:0}
.demo-bar .demo-acts{display:flex;gap:8px;flex:none}
.demo-bar .btn{padding:6px 12px;font-size:12px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-weight:800;text-decoration:none}
.demo-bar .btn.p{background:linear-gradient(120deg,#2f6df6,#22c1a4);border-color:transparent}
.demo-bar .btn.g{background:linear-gradient(120deg,#c99a2e,#e0b95a);color:#1b1608;border-color:transparent;box-shadow:0 10px 24px rgba(201,154,46,.35);font-weight:700;position:relative;overflow:hidden}
.demo-bar .btn.g b{font-weight:900}
.demo-bar .btn.g::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-120%);animation:demo-shine 3.2s ease-in-out infinite}
@keyframes demo-shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.demo-bar .demo-txt b{color:#fff}
.demo-bar + .app .rail{top:38px;height:calc(100svh - 38px)}
@media (max-width:700px){.demo-bar{padding:8px 10px;gap:8px}.demo-bar .demo-txt{display:none}.demo-bar .demo-acts{flex:1;justify-content:flex-end}.demo-bar .btn{padding:6px 10px;font-size:12px}.demo-bar .btn.g span{display:none}}
#demo-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;background:#1c2230;color:#fff;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:700;box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:70;transition:opacity .25s ease,transform .25s ease;max-width:92vw;text-align:center;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
#demo-toast.on{opacity:1;transform:translate(-50%,0)}
tr.demo-new{animation:demo-in .6s ease}
@keyframes demo-in{from{background:#fbf3df}to{background:transparent}}
.demo-devs{display:grid;gap:8px;margin:0 0 12px}
.demo-dev{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line,#e3ded3);border-radius:12px;background:#fff;animation:demo-in .6s ease}
.demo-dev>div{flex:1;min-width:0}
.demo-dev b{display:block;font-size:14px}
.demo-dev small{color:#8a8f9b;font-size:12px}
/* the current door is painted by CSS: no moving indicator to get lost in another browser */
#rnav .ind{display:none!important}
#rnav .it[aria-current=page]{background:linear-gradient(135deg,#2f6df6,#6aa7ff 60%,#6aa7ff);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 30px rgba(47,109,246,.35)}
#rnav .it[aria-current=page] svg{stroke:#fff;color:#fff}
/* the floating buy card: appears after a minute of demo, once per visit */
.demo-buy{position:fixed;right:16px;bottom:16px;z-index:65;max-width:320px;padding:16px 18px;border-radius:18px;background:#fffdf9;border:1px solid #e6d9b6;box-shadow:0 24px 60px rgba(28,34,48,.28);font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;display:grid;gap:8px;animation:demo-up .5s cubic-bezier(.2,.9,.2,1)}
@keyframes demo-up{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.demo-buy b{font-size:16px;color:#1c2230}
.demo-buy p{margin:0;font-size:13px;color:#5a6070}
.demo-buy .acts{display:flex;gap:8px;align-items:center}
.demo-buy .acts a{padding:9px 14px;border-radius:12px;font-weight:800;font-size:13px;text-decoration:none;background:linear-gradient(120deg,#c99a2e,#e0b95a);color:#1b1608}
.demo-buy .acts button{border:0;background:transparent;color:#8a8f9b;font-size:13px;cursor:pointer;font-weight:700}
@media (max-width:700px){.demo-buy{left:16px;right:16px;max-width:none}}
/* the offer card, centred (537) */
.demo-veil{position:fixed;inset:0;z-index:70;background:rgba(15,21,36,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;animation:demo-fade .35s ease}
@keyframes demo-fade{from{opacity:0}to{opacity:1}}
.demo-buy.demo-buy-big{position:static;max-width:520px;width:100%;padding:30px 32px 26px;border-radius:26px;gap:12px;box-shadow:0 40px 100px rgba(15,21,36,.45);animation:demo-pop .4s cubic-bezier(.2,.9,.2,1)}
@keyframes demo-pop{from{transform:translateY(18px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.demo-buy-k{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#8a6414;background:#fbf3df;border-radius:999px;padding:4px 10px;width:max-content}
.demo-buy.demo-buy-big b{font-size:26px;line-height:1.15;letter-spacing:-.02em}
.demo-buy.demo-buy-big p{font-size:15.5px;line-height:1.5}
.demo-buy.demo-buy-big .acts{margin-top:6px;gap:12px;flex-wrap:wrap}
.demo-buy.demo-buy-big .acts a{flex:1;min-width:200px;text-align:center;font-size:16px;padding:14px 20px;border-radius:14px}
@media (max-width:560px){.demo-buy.demo-buy-big{padding:24px 20px 20px}.demo-buy.demo-buy-big b{font-size:22px}}

.lfi .dot.warn{background:#e0b95a}.lfi .dot.ok{background:#22c1a4}