/* =========================================================
   MX12 unified page background
   Loaded after page CSS so body/page-shell backgrounds do not fight.
   ========================================================= */

:root{
  --mx-page-bg-dark:
    radial-gradient(1180px 520px at 0% -8%, rgba(59,130,246,.16), transparent 58%),
    radial-gradient(960px 460px at 100% 0%, rgba(45,212,191,.10), transparent 60%),
    radial-gradient(900px 520px at 50% 118%, rgba(124,92,255,.08), transparent 62%),
    linear-gradient(180deg, #07111f 0%, #050b17 52%, #07101f 100%);
  --mx-page-bg-light:
    radial-gradient(1180px 520px at 0% -8%, rgba(37,99,235,.13), transparent 58%),
    radial-gradient(960px 460px at 100% 0%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(900px 520px at 50% 118%, rgba(20,184,166,.07), transparent 62%),
    linear-gradient(180deg, #f6f9ff 0%, #eef4ff 52%, #e9f1ff 100%);
  --mx-page-bg-solid-dark: #07111f;
  --mx-page-bg-solid-light: #eef4ff;
  --mx-page-bg: var(--mx-page-bg-dark);
  --mx-page-bg-solid: var(--mx-page-bg-solid-dark);
}

html{
  min-height:100%;
  background:var(--mx-page-bg-solid) !important;
}

html[data-ui-theme="dark"]{
  --mx-page-bg: var(--mx-page-bg-dark);
  --mx-page-bg-solid: var(--mx-page-bg-solid-dark);
}

html[data-ui-theme="light"]{
  --mx-page-bg: var(--mx-page-bg-light);
  --mx-page-bg-solid: var(--mx-page-bg-solid-light);
}

body{
  min-height:100%;
  background:var(--mx-page-bg) !important;
  background-color:var(--mx-page-bg-solid) !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center top !important;
  color:var(--ink, #fff);
}

body[data-theme-lock="dark"],
body.theme-dark{
  --mx-page-bg: var(--mx-page-bg-dark);
  --mx-page-bg-solid: var(--mx-page-bg-solid-dark);
}

body.has-account-theme{
  --mx-page-bg: var(--mx-page-bg-dark);
  --mx-page-bg-solid: var(--mx-page-bg-solid-dark);
  --account-page-bg: var(--mx-page-bg);
  background:var(--mx-page-bg) !important;
  background-color:var(--mx-page-bg-solid) !important;
}

body.has-account-theme[data-ui-theme="light"]{
  --mx-page-bg: var(--mx-page-bg-light);
  --mx-page-bg-solid: var(--mx-page-bg-solid-light);
  --account-page-bg: var(--mx-page-bg);
  background:var(--mx-page-bg) !important;
  background-color:var(--mx-page-bg-solid) !important;
}

.page-main{
  background:transparent !important;
}

body:has(.auth-wrap){
  --mx-page-bg: var(--mx-page-bg-dark);
  --mx-page-bg-solid: var(--mx-page-bg-solid-dark);
  background:var(--mx-page-bg) !important;
}

body:has(.auth-wrap) .page-main,
body.has-account-theme .page-main{
  background:transparent !important;
}

body.has-account-theme .dash,
body.has-account-theme .dash.dash--light,
body.has-account-theme .owner-page,
body.has-account-theme .ps,
body.has-account-theme .bal-page,
body.has-account-theme .ref-page,
body.has-account-theme .sla-page,
body.has-account-theme .sop-wrap,
body.has-account-theme .ad-wrap,
body.has-account-theme .td-page,
body.has-account-theme .leadgen-page,
body.has-account-theme .leadgen-training-page,
body.has-account-theme .crm-app,
body.has-account-theme .crm-app__shell,
body.has-account-theme .crm-studio-page,
body.has-account-theme .crm-setup-page,
body.has-account-theme .crm-settings-page,
body.has-account-theme .crm-hub,
body.has-account-theme .crm-tariffs,
body.has-account-theme .crmx-page{
  background:transparent !important;
}

body.has-account-theme .dash,
body.has-account-theme .owner-page{
  border-color:transparent !important;
  box-shadow:none !important;
}

body.has-account-theme .binary-bg{
  opacity:.10;
}

body.has-account-theme[data-ui-theme="light"] .binary-bg{
  opacity:.045;
}

@media (max-width: 640px){
  :root{
    --mx-page-bg-dark:
      radial-gradient(720px 420px at 0% -6%, rgba(59,130,246,.15), transparent 62%),
      radial-gradient(620px 420px at 110% 2%, rgba(45,212,191,.09), transparent 64%),
      linear-gradient(180deg, #07111f 0%, #050b17 56%, #07101f 100%);
    --mx-page-bg-light:
      radial-gradient(720px 420px at 0% -6%, rgba(37,99,235,.12), transparent 62%),
      radial-gradient(620px 420px at 110% 2%, rgba(14,165,233,.08), transparent 64%),
      linear-gradient(180deg, #f6f9ff 0%, #eef4ff 56%, #e9f1ff 100%);
  }
}