/* Shared supplied dragon artwork. Kept as one lightweight composited layer. */
html { background: #080202; }
body {
  position: relative;
  isolation: isolate;
  background: #080202 !important;
}
body::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2;
  pointer-events: none;
  opacity: 1 !important;
  background-image: url("/assets/dragon-background-v3.10.76.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  transform: translateZ(0);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,2,2,.54), rgba(5,2,2,.78));
}
.screen,
.app-shell,
.main,
.content { background-color: transparent !important; }
.sidebar,
.topbar { background-color: rgba(10,7,7,.91) !important; }
.panel,
.table-wrap,
.stat-card,
.modal-card,
.notification-panel { background-color: rgba(12,10,9,.90) !important; }

@media (max-width: 700px) {
  body::before { background-position: 32% center !important; }
  body::after { background: rgba(5,2,2,.72); }
}

@media (prefers-reduced-transparency: reduce) {
  body::after { background: rgba(5,2,2,.88); }
}