body {
  --environment-banner-height: 0px;
}

.environment-banner {
  display: none;
}

body[data-environment="test"] {
  --environment-banner-height: 34px;
}

body[data-environment="test"] > .environment-banner {
  position: sticky;
  z-index: 1200;
  top: 0;
  display: flex;
  min-height: var(--environment-banner-height);
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 12px;
  background: #9f2747;
  color: #ffffff;
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 2px 10px rgba(65, 14, 35, 0.24);
}

.environment-banner strong {
  letter-spacing: 0.08em;
}

body[data-environment="test"] .app-layout,
body[data-environment="test"] .login-main,
body[data-environment="test"] .login-art,
body[data-environment="test"] .error-page {
  min-height: calc(100vh - var(--environment-banner-height));
  min-height: calc(100dvh - var(--environment-banner-height));
}

body[data-environment="test"] .app-boot-screen {
  top: var(--environment-banner-height);
}