:root.dsl-dev-mode {
  --dsl-dev-border: #ff6b2c;
  --dsl-dev-border-soft: rgba(255, 107, 44, 0.65);
  --dsl-dev-glow: rgba(255, 107, 44, 0.35);
  --dsl-dev-banner-text: #1b0a00;
}

:root.dsl-dev-mode body::before {
  border: 2px solid var(--dsl-dev-border);
  box-shadow:
    0 0 0 2px var(--dsl-dev-border-soft),
    0 0 18px var(--dsl-dev-glow),
    inset 0 0 10px var(--dsl-dev-glow);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 2147483646;
}

:root.dsl-dev-mode body::after {
  background: linear-gradient(90deg, #ff6b2c 0%, #ff944d 100%);
  border-radius: 0 0 10px 10px;
  box-shadow:
    0 8px 18px rgba(27, 10, 0, 0.18),
    0 0 16px var(--dsl-dev-glow);
  color: var(--dsl-dev-banner-text);
  content: "Dev Mode";
  font-size: 12px;
  font-weight: 700;
  left: 50%;
  letter-spacing: 0.12em;
  padding: 8px 16px 10px;
  pointer-events: none;
  position: fixed;
  text-transform: uppercase;
  top: -6px;
  transform: translateX(-50%);
  z-index: 2147483647;
}

@media (max-width: 640px) {
  :root.dsl-dev-mode body::after {
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 7px 12px 9px;
    top: -8px;
  }
}