/* ==========================================================================
   TwilightRun UN Engine — Structure Recovery 1.1.16
   Purpose: remove empty structural bands, restore offcanvas out-of-flow behavior,
   recover right-side account modules, and stabilize footer/module containment.
   ========================================================================== */

/* Empty layout rows created by unused positions must not draw giant bands. */
html body.un-template-twilightrun .un-position.is-empty,
html body.un-template-twilightrun .unx-position.is-empty,
html body.un-template-twilightrun .sp-module.is-empty,
html body.un-template-twilightrun .sp-module-content.is-empty,
html body.un-template-twilightrun .mod-custom.is-empty,
html body.un-template-twilightrun .unx-empty-row {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.un-template-twilightrun #sp-main-body.tru-no-main {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* The mobile/offcanvas container must never occupy page flow. */
html body.un-template-twilightrun #sp-offcanvas-modules,
html body.un-template-twilightrun .unx-offcanvas,
html body.un-template-twilightrun .offcanvas-menu {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: min(92vw, 360px) !important;
  max-width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  transform: translateX(105%) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: 10080 !important;
  display: block !important;
  margin: 0 !important;
  background: rgba(0,0,0,.96) !important;
  border-left: 1px solid rgba(0,234,255,.25) !important;
  transition: transform .25s ease, opacity .25s ease, visibility .25s ease !important;
}

html body.un-template-twilightrun.offcanvas-open #sp-offcanvas-modules,
html body.un-template-twilightrun.unx-offcanvas-open #sp-offcanvas-modules,
html.unx-offcanvas-open body.un-template-twilightrun #sp-offcanvas-modules {
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Main body must remain a real component/sidebar grid. */
html body.un-template-twilightrun #sp-main-body .unx-content-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 30px !important;
  width: 100% !important;
  --bs-gutter-x: 1.875rem !important;
}

html body.un-template-twilightrun #sp-component {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body.un-template-twilightrun #sp-right {
  flex: 0 0 320px !important;
  max-width: 360px !important;
  margin-left: auto !important;
}

html body.un-template-twilightrun #sp-right .sp-module,
html body.un-template-twilightrun .unx-recovered-account-menu {
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(0,234,255,.28) !important;
  border-radius: 8px !important;
  padding: 18px !important;
  box-shadow: 0 0 18px rgba(0,234,255,.10) !important;
}

html body.un-template-twilightrun #sp-right ul.menu,
html body.un-template-twilightrun #sp-right ul.mod-menu,
html body.un-template-twilightrun .unx-recovered-account-menu ul.menu,
html body.un-template-twilightrun .unx-recovered-account-menu ul.mod-menu {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.un-template-twilightrun #sp-right ul.menu > li,
html body.un-template-twilightrun #sp-right ul.mod-menu > li,
html body.un-template-twilightrun .unx-recovered-account-menu ul.menu > li,
html body.un-template-twilightrun .unx-recovered-account-menu ul.mod-menu > li {
  display: block !important;
  border-bottom: 1px solid rgba(255,255,255,.22) !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.un-template-twilightrun #sp-right ul.menu > li > a,
html body.un-template-twilightrun #sp-right ul.mod-menu > li > a,
html body.un-template-twilightrun .unx-recovered-account-menu ul.menu > li > a,
html body.un-template-twilightrun .unx-recovered-account-menu ul.mod-menu > li > a {
  display: block !important;
  padding: 8px 0 !important;
  color: var(--accent-cyan,#00eaff) !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

/* Footer containment and empty-bullet cleanup. */
html body.un-template-twilightrun #sp-footer,
html body.un-template-twilightrun #sp-bottom {
  clear: both !important;
  position: relative !important;
  z-index: 2 !important;
}

html body.un-template-twilightrun #sp-footer .row.sp-row,
html body.un-template-twilightrun #sp-bottom .row.sp-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 30px !important;
  width: 100% !important;
  margin: 0 !important;
}

html body.un-template-twilightrun #sp-footer ul > li:empty,
html body.un-template-twilightrun #sp-bottom ul > li:empty,
html body.un-template-twilightrun #sp-footer .menu > li:empty,
html body.un-template-twilightrun #sp-bottom .menu > li:empty {
  display: none !important;
}

/* Keep login status dot visible after final cleanup. */
html body.un-template-twilightrun #menu-right .sp-login-status-dot {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  border-radius: 999px !important;
  order: 99 !important;
  margin-left: 4px !important;
}

html body.un-template-twilightrun #menu-right .sp-login-status-dot-off {
  background: #ef4444 !important;
  box-shadow: 0 0 7px rgba(239,68,68,.75) !important;
}

html body.un-template-twilightrun #menu-right .sp-login-status-dot-on {
  background: #22c55e !important;
  box-shadow: 0 0 7px rgba(34,197,94,.75) !important;
}

@media (max-width: 991.98px) {
  html body.un-template-twilightrun #sp-main-body .unx-content-grid {
    flex-wrap: wrap !important;
  }
  html body.un-template-twilightrun #sp-right {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}