/* Wspólne elementy demo (pasek, przełącznik projektów, objaśnienia). Na stronie klienta ten plik się usuwa. */
.demo-bar{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;justify-content:center;background:#0B2530;color:#fff;padding:9px 16px;font:500 14px/1.3 'Onest',system-ui,sans-serif;text-align:center;position:relative;z-index:70}
.demo-bar b{background:#D7F36B;color:#0B2530;border-radius:6px;padding:2px 8px;margin-right:6px;font-weight:700}
.demo-bar__guide{font:600 14px 'Onest',system-ui,sans-serif;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);border-radius:999px;padding:6px 14px;cursor:pointer}
.demo-bar__guide[aria-pressed=true]{background:#D7F36B;border-color:#D7F36B;color:#0B2530}
.demo-bar__link{color:#D7F36B;font-weight:600}
.styles{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.1);border-radius:999px;padding:3px}
.styles span{padding:0 6px 0 10px;color:#B9CBD2;font-size:13px}
.styles a{font:600 13.5px 'Onest',system-ui,sans-serif;border-radius:999px;padding:6px 12px;color:#fff;text-decoration:none}
.styles a[aria-current=page]{background:#fff;color:#0B2530}
.demo-bar :focus-visible{outline:3px solid #D7F36B;outline-offset:2px}
.tip{display:none}
body.guide .tip{display:block;position:relative;margin:22px 0 0;background:#FFFBE6;border:1.5px dashed #C9A400;border-radius:14px;padding:14px 16px 14px 54px;font:400 15px/1.5 'Onest',system-ui,sans-serif;color:#3A3100;text-align:left;letter-spacing:0;text-transform:none;grid-column:1/-1;z-index:5;max-width:none}
body.guide .tip::before{content:attr(data-n);position:absolute;left:14px;top:12px;width:28px;height:28px;border-radius:50%;background:#8A6D00;color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
body.guide .tip b{display:block;color:#2A2300;font-weight:700}
@media (max-width:640px){
  .demo-bar{padding:7px 10px;gap:6px}
  .demo-bar p,.demo-bar__link,.styles span{display:none}
  .styles a{padding:6px 10px}
  .demo-bar__guide{padding:6px 12px;font-size:13px}
}