html { --demo-banner-height: 40px; }
body { padding-top: var(--demo-banner-height); }
.demo-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; background: #111827; color: #fff; padding: 8px 12px; font: 13px/1.35 system-ui; border-bottom: 1px solid #334155; }
.demo-banner strong { color: #67e8f9; }
.demo-banner span { opacity: .9; }
#root, #root .min-h-screen { min-height: calc(100dvh - var(--demo-banner-height)); }
#root .h-screen { height: calc(100dvh - var(--demo-banner-height)); }
#root .fixed.top-0, #root .fixed.inset-0, #root .sticky.top-0 { top: var(--demo-banner-height); }
#root button[aria-label="Abrir menu de navegação"] { top: calc(var(--demo-banner-height) + max(env(safe-area-inset-top), 0.75rem)) !important; }