/* Demó-sáv (publikus oldal és admin) – márkatokenekkel, mindkét témában */
.demo-banner { background: var(--surface-warm); border-bottom: 1px solid var(--line); color: var(--ink); font: 500 13px/1.4 var(--font-body); position: relative; z-index: 60; }
.demo-banner__inner { max-width: 1280px; margin: 0 auto; padding: 7px 16px; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.demo-banner__badge { background: var(--surface-inverse); color: var(--resin-300); font-weight: 600; letter-spacing: .14em; font-size: 11px; padding: 3px 9px; border-radius: var(--radius-pill); }
.demo-banner__text { flex: 1 1 280px; }
.demo-banner__links { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; }
.demo-banner__links a { color: var(--accent); font-weight: 600; text-underline-offset: 2px; }
.demo-banner__links button { font: 600 12.5px var(--font-body); background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); padding: 4px 12px; cursor: pointer; }
/* Nagyobb érintési felület a sáv magasságának növelése nélkül */
.demo-banner__links a, .demo-banner__links button { position: relative; }
.demo-banner__links a::after, .demo-banner__links button::after { content: ''; position: absolute; inset: -9px -4px; }
.demo-banner__links button:hover { border-color: var(--accent); color: var(--accent); }
.demo-banner__links button:focus-visible, .demo-banner__links a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.demo-banner__links button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 640px) { .demo-banner__inner { font-size: 12px; padding: 6px 12px; } }