:root {
  --bg0: #05050b;
  --bg1: #090c1b;
  --bg2: #11102a;
  --panel: rgba(15, 17, 34, .76);
  --panel2: rgba(24, 25, 49, .84);
  --line: rgba(142, 150, 210, .16);
  --line2: rgba(171, 178, 230, .27);
  --ink: #f4f3ff;
  --soft: #bbbddd;
  --muted: #898dad;
  --acc: #9d86ff;
  --acc2: #6049d8;
  --acc-deep: #352476;
  --gold: #d9b869;
  --green: #51d6aa;
  --blue: #718dff;
  --shadow: 0 22px 65px rgba(0, 0, 0, .52), 0 1px 0 rgba(255, 255, 255, .035) inset;
}

html { background: #05050b !important; min-height: 100%; }

body,
.auth-login {
  background-color: #05050b !important;
  background-image:
    radial-gradient(900px 560px at 82% -8%, rgba(94, 72, 205, .25), transparent 62%),
    radial-gradient(760px 520px at -8% 82%, rgba(32, 73, 150, .18), transparent 64%),
    radial-gradient(520px 300px at 72% 108%, rgba(190, 146, 54, .07), transparent 70%),
    linear-gradient(145deg, #05050b 0%, #090b18 44%, #11102a 100%) !important;
  background-attachment: fixed !important;
}

.auth-login { background: transparent !important; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 46% 34% at 18% 30%, rgba(39, 91, 218, .58), transparent 72%),
    radial-gradient(ellipse 42% 38% at 78% 24%, rgba(118, 68, 224, .55), transparent 72%),
    radial-gradient(ellipse 50% 32% at 58% 82%, rgba(54, 44, 168, .48), transparent 74%);
  background-size: 175% 175%, 190% 190%, 180% 180%;
  filter: saturate(120%);
  opacity: .9;
  will-change: background-position;
  animation: momoFlowA 18s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    conic-gradient(from 205deg at 52% 48%, transparent 0deg, rgba(66, 101, 233, .25) 58deg, transparent 118deg, rgba(145, 82, 232, .29) 205deg, transparent 285deg),
    radial-gradient(ellipse 34% 24% at 70% 58%, rgba(191, 127, 255, .25), transparent 74%);
  background-size: 190% 190%, 170% 170%;
  filter: blur(10px);
  opacity: .82;
  mix-blend-mode: screen;
  will-change: background-position;
  animation: momoFlowB 24s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

body > #app,
body > .app,
body > .wrap,
body > main,
body > header,
body > nav,
body > section,
body > footer {
  position: relative;
  z-index: 1;
}

@keyframes momoFlowA {
  0% { background-position: 0% 12%, 100% 0%, 48% 100%; }
  45% { background-position: 28% 48%, 68% 24%, 30% 72%; }
  100% { background-position: 8% 86%, 94% 58%, 72% 38%; }
}

@keyframes momoFlowB {
  0% { background-position: 15% 10%, 88% 70%; }
  50% { background-position: 82% 52%, 34% 28%; }
  100% { background-position: 24% 88%, 72% 12%; }
}

.tb-side {
  background: linear-gradient(180deg, rgba(5, 6, 14, .97), rgba(10, 9, 24, .94)) !important;
  border-right-color: rgba(217, 184, 105, .14) !important;
  box-shadow: 12px 0 42px rgba(0, 0, 0, .24);
}

.tb-logo,
.auth-card .a-logo,
.mod-head .mh-ico {
  background: linear-gradient(145deg, #7059dc, #41318f 68%, #b28d42) !important;
  border: 1px solid rgba(224, 197, 128, .28);
  box-shadow: 0 12px 34px rgba(78, 55, 185, .32), 0 0 0 1px rgba(255, 255, 255, .04) inset !important;
}

.auth-card {
  background: linear-gradient(160deg, rgba(18, 19, 38, .94), rgba(10, 10, 21, .97)) !important;
  border: 1px solid rgba(217, 184, 105, .22) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .62), 0 0 0 1px rgba(130, 112, 225, .08) inset !important;
}

.auth-tabs,
.workspace-bar,
.panel,
.hcard,
.status-card,
.metric,
.acc,
.admin-panel,
.chat-wrap {
  background: linear-gradient(145deg, rgba(21, 22, 43, .86), rgba(10, 11, 23, .82)) !important;
  border-color: rgba(150, 151, 205, .17) !important;
  box-shadow: 0 15px 42px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .025) inset;
}

.hcard:hover,
.panel:hover {
  border-color: rgba(217, 184, 105, .28) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .34), 0 0 28px rgba(91, 67, 190, .09) !important;
}

.btn-primary,
.auth-btn,
.mode-tab.on {
  background: linear-gradient(135deg, #5743c7, #8e75ef) !important;
  box-shadow: 0 10px 28px rgba(78, 55, 185, .30) !important;
}

.hc-new,
.n-tag {
  background: rgba(217, 184, 105, .13) !important;
  color: #efd58f !important;
  border: 1px solid rgba(217, 184, 105, .44) !important;
}

.home-hero .hh-title {
  background: linear-gradient(105deg, #fff 0%, #d9d8fb 42%, #a99aff 68%, #d9b869 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.privacy-note {
  background: linear-gradient(135deg, rgba(38, 46, 83, .42), rgba(12, 15, 29, .72)) !important;
  border-color: rgba(217, 184, 105, .17) !important;
}

.quest-scope,
.fs-scope {
  background-color: #05050b !important;
  background-image:
    radial-gradient(900px 540px at 84% -8%, rgba(94, 72, 205, .22), transparent 62%),
    radial-gradient(760px 520px at -8% 90%, rgba(32, 73, 150, .17), transparent 64%),
    linear-gradient(145deg, #05050b, #090b18 48%, #11102a) !important;
  background-attachment: fixed !important;
}

@media (max-width: 860px) {
  .tb-side {
    box-shadow: 0 10px 32px rgba(0, 0, 0, .34);
    border-right: 0 !important;
    border-bottom: 1px solid rgba(217, 184, 105, .13) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none !important; }
}