/* Shared with src/OffGrid.Api/wwwroot/backgrounds.css. Keep both hosts in sync. */
html[data-og-background] { background: #040507; }
html[data-og-background] body { background: transparent !important; isolation: isolate; min-height: 100svh; }
html[data-og-background] body::before {
  content: ''; position: fixed; inset: -8%; z-index: -1; pointer-events: none;
  background-color: #06070b; background-repeat: no-repeat;
  animation: og-atmosphere 24s ease-in-out infinite alternate;
}
html[data-og-background='1'] body::before {
  background-image: radial-gradient(ellipse at 65% 20%, #8571bc28, transparent 56%),
    linear-gradient(#a48ad50c 1px, transparent 1px), linear-gradient(90deg, #a48ad50c 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
  background-repeat: no-repeat, repeat, repeat;
  mask-image: radial-gradient(ellipse at 60% 20%, #000 10%, transparent 80%);
}
html[data-og-background='2'] body::before {
  background-image: url('/background-ribbons.svg');
  background-size: cover; background-position: center;
}
html[data-og-background='3'] body::before {
  background-image: radial-gradient(ellipse at 70% 15%, #83739824, transparent 55%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.12' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  background-size: cover, 180px 180px; background-repeat: no-repeat, repeat;
}
.og-background-canvas { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.og-background-canvas[data-ready='true'] { opacity: 1; }
.og-background-toggle {
  position: fixed; top: 20px; right: max(14px, env(safe-area-inset-right)); z-index: 100;
  display: grid; place-items: center; width: 38px; height: 38px; min-height: 38px;
  padding: 0; border: 1px solid #c8bff52b; border-top-color: #e3ddff45; border-radius: 50%;
  background: linear-gradient(145deg, #d5c5ff16, #7b71920a 50%, #cdc3e810), #101017ba;
  color: #dfd7f3; cursor: pointer; backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 1px #ffffff12, inset 0 -1px 2px #0005, 0 4px 18px #0004;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.og-background-toggle:hover { border-color: #d1b9ff85; box-shadow: inset 0 1px 1px #ffffff25, 0 0 22px #ac8bff18; transform: translateY(-1px); }
.og-background-toggle:active { transform: scale(.94); }
.og-background-toggle:focus-visible { outline: 2px solid #c6b2ff; outline-offset: 4px; }
.og-background-toggle svg { width: 17px; height: 17px; }
.og-background-toggle::after { content: attr(data-background); position: absolute; right: 3px; bottom: 0; font: 8px/1.2 system-ui, sans-serif; color: #b8a0f5; background: #101017; border: 1px solid #c8bff530; width: 11px; height: 11px; border-radius: 50%; display: grid; place-items: center; }
.og-background-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html[data-og-background] .site-header, html[data-og-background] .bar { padding-right: max(70px, calc((100vw - 1240px) / 2)); }
html[data-og-background] .lang-fixed { right: 66px; top: 20px; }
html[data-og-background] .admin-nav { padding-right: 48px; }
@keyframes og-atmosphere { from { transform: translate3d(-1%,0,0) scale(1); } to { transform: translate3d(1%,2%,0) scale(1.04); } }
@media (max-width: 820px) { .og-background-toggle { top: 15px; } html[data-og-background] .lang-fixed { top: 15px; } }
@media (prefers-reduced-motion: reduce) { html[data-og-background] body::before { animation: none; } .og-background-canvas, .og-background-toggle { transition: none; } }