/* =========================================================
   CURATORLAB — ALL PAGES BACKGROUND
   Load this file LAST, after every page-specific stylesheet.

   Theme behavior:
   - Night: body without .light
   - Day:   body.light
   ========================================================= */

html {
  min-height: 100%;
  background-color: #050b17 !important;
}

html:has(body.light) {
  background-color: #f8faff !important;
}

body {
  min-height: 100vh !important;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 7% 14%, rgba(99,102,241,.13), transparent 29%),
    radial-gradient(circle at 91% 84%, rgba(139,92,246,.12), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(34,197,94,.06), transparent 24%),
    linear-gradient(145deg, #050b17 0%, #091324 46%, #07101d 100%) !important;
  background-color: #050b17 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body.light {
  background:
    radial-gradient(circle at 7% 16%, rgba(99,102,241,.13), transparent 31%),
    radial-gradient(circle at 92% 86%, rgba(168,85,247,.12), transparent 29%),
    radial-gradient(circle at 86% 8%, rgba(34,197,94,.08), transparent 22%),
    linear-gradient(145deg, #f8faff 0%, #edf3ff 48%, #f7f9ff 100%) !important;
  background-color: #f8faff !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  z-index: -1;
}

body::before {
  width: 620px !important;
  height: 620px !important;
  top: -260px !important;
  left: -250px !important;
  opacity: .18 !important;
  filter: blur(150px) !important;
  background: #5b5cf0 !important;
}

body::after {
  width: 560px !important;
  height: 560px !important;
  right: -220px !important;
  bottom: -260px !important;
  opacity: .15 !important;
  filter: blur(150px) !important;
  background: #8b5cf6 !important;
}

body.light::before {
  opacity: .12 !important;
}

body.light::after {
  opacity: .10 !important;
}

/* =========================================================
   MOBILE — SAME VALUES AS BUILDER MOBILE
   ========================================================= */

@media (max-width: 767px) {
  html {
    min-height: 100%;
    background-color: #050b17 !important;
  }

  html:has(body.light) {
    background-color: #f8faff !important;
  }

  body {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background:
      radial-gradient(circle at 7% 14%, rgba(99,102,241,.13), transparent 29%),
      radial-gradient(circle at 91% 84%, rgba(139,92,246,.12), transparent 30%),
      radial-gradient(circle at 88% 8%, rgba(34,197,94,.06), transparent 24%),
      linear-gradient(145deg, #050b17 0%, #091324 46%, #07101d 100%) !important;
    background-color: #050b17 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  body.light {
    background:
      radial-gradient(circle at 7% 16%, rgba(99,102,241,.13), transparent 31%),
      radial-gradient(circle at 92% 86%, rgba(168,85,247,.12), transparent 29%),
      radial-gradient(circle at 86% 8%, rgba(34,197,94,.08), transparent 22%),
      linear-gradient(145deg, #f8faff 0%, #edf3ff 48%, #f7f9ff 100%) !important;
    background-color: #f8faff !important;
  }

  body::before {
    width: 620px !important;
    height: 620px !important;
    top: -260px !important;
    left: -250px !important;
    opacity: .18 !important;
    filter: blur(150px) !important;
    background: #5b5cf0 !important;
  }

  body::after {
    width: 560px !important;
    height: 560px !important;
    right: -220px !important;
    bottom: -260px !important;
    opacity: .15 !important;
    filter: blur(150px) !important;
    background: #8b5cf6 !important;
  }

  body.light::before {
    opacity: .12 !important;
  }

  body.light::after {
    opacity: .10 !important;
  }
}
/* =========================================================
   GLOBAL — BUILDER HELP + TOOLTIP DESIGN
   Same visual design on Builder / Audio / History
========================================================= */

.builderHelp,
.inlineHelp,
.layoutModeToggle .builderHelp{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:19px !important;
  min-width:19px !important;
  height:19px !important;

  border:none !important;
  border-radius:50% !important;

  background:
    radial-gradient(
      circle at 35% 30%,
      #37e783,
      #108246
    ) !important;

  color:#ffffff !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;

  box-shadow:
    0 0 12px rgba(34,197,94,.45),
    0 0 24px rgba(34,197,94,.18),
    inset 0 1px 0 rgba(255,255,255,.22) !important;

  cursor:pointer !important;
}

.builderTooltip,
.layoutModeToggle .builderTooltip{
  padding:14px 16px !important;
  box-sizing:border-box !important;

  border:
    1px solid
    rgba(126,126,255,.46) !important;

  border-radius:14px !important;

  background:
    linear-gradient(
      145deg,
      rgb(27,34,76),
      rgb(15,22,53)
    ) !important;

  color:#ffffff !important;

  font-family:Inter,sans-serif !important;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  text-align:left !important;

  box-shadow:
    0 24px 65px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  pointer-events:none !important;
}

body.light .builderTooltip,
body.light .layoutModeToggle .builderTooltip{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(242,244,255,.95)
    ) !important;

  color:#20243b !important;

  border-color:
    rgba(99,102,241,.28) !important;

  box-shadow:
    0 24px 58px rgba(71,85,105,.20),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.builderHelp:hover .builderTooltip,
.inlineHelp:hover .builderTooltip,
.layoutModeToggle .builderHelp:hover .builderTooltip{
  display:block !important;
}