/* ============================================================
   USTA NorCal Unified Background Theme
   Drop-in overlay — does not affect layout or existing styles.
   ============================================================ */

/* Aurora drift */
body::before{
  content:'';
  position:fixed; inset:-20%;
  background:
    radial-gradient(800px 420px at 20% 10%, rgba(109,94,252,.15), transparent 60%),
    radial-gradient(720px 380px at 85% 25%, rgba(54,211,153,.12), transparent 62%),
    radial-gradient(680px 360px at 40% 85%, rgba(245,158,11,.08), transparent 65%);
  filter: blur(18px);
  opacity:.50;
  animation: themAurora 22s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}

@keyframes themAurora{
  0%  { transform: translate3d(-3%, -2%, 0) scale(1.02) rotate(-1.8deg); }
  30% { transform: translate3d(2%, -1%, 0) scale(1.06) rotate(0.6deg); }
  65% { transform: translate3d(-1.2%, 2.8%, 0) scale(1.04) rotate(-1deg); }
  100%{ transform: translate3d(3%, 1.8%, 0) scale(1.08) rotate(2deg); }
}

/* Canvas layer */
.theme-bg{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.65;
}
.theme-bg canvas{
  position:absolute; inset:0; width:100%; height:100%;
}
#theme-fx{
  position:absolute; inset:0; width:100%; height:100%; opacity:.9;
}
.theme-grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(800px 520px at 35% 22%, rgba(0,0,0,1), transparent 68%);
  opacity:.22;
}

/* Lift all content above fixed background */
.app, header, main, .topbar, .wrap, aside {
  position: relative;
  z-index: 1;
}

/* ── Feature 4: Back to Hub pill ─────────────────────────────────── */
.hub-back-pill{
  position:fixed; bottom:20px; right:20px;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px;
  border-radius:999px;
  background: rgba(109,94,252,.18);
  border:1px solid rgba(109,94,252,.45);
  color:rgba(255,255,255,.88);
  font-size:12px; font-weight:700;
  text-decoration:none;
  backdrop-filter: blur(12px);
  z-index:9999;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  letter-spacing:.02em;
}
.hub-back-pill:hover{
  background: rgba(109,94,252,.32);
  border-color: rgba(109,94,252,.70);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(109,94,252,.25);
}