:root {
  --atlas-header-height: 66px;
  --atlas-nav: #07332f;
  --atlas-nav-deep: #061d1b;
  --atlas-nav-bright: #0c544b;
  --atlas-mint: #5ad0b9;
  --atlas-ink: #183633;
  --atlas-muted: #617a76;
  --atlas-line: #d9e5e2;
  --atlas-bg: #f2f7f5;
}

html,
body {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  color: var(--atlas-ink) !important;
  background: var(--atlas-bg) !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
.atlasbar {
  position: relative !important;
  z-index: 2 !important;
  height: var(--atlas-header-height) !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  color: #fff !important;
  background: linear-gradient(120deg, var(--atlas-nav-deep), #0a3c37 60%, var(--atlas-nav-bright)) !important;
  border: 0 !important;
  box-shadow: 0 6px 24px rgba(3, 26, 24, .16) !important;
}
.atlasbrand {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.atlaslogo-wrap {
  position: relative !important;
  padding: 5px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 10px !important;
  font: inherit !important;
  appearance: none !important;
  cursor: default !important;
}
.atlaslogo-wrap { cursor: pointer !important; }
.module-pill.atlas-nav-trigger { pointer-events: none !important; cursor: default !important; }
.module-pill.atlas-nav-trigger::after { display: none !important; }
.module-pill.atlas-nav-trigger:hover { transform: none !important; }
.atlaslogo {
  width: 74px !important;
  height: auto !important;
  display: block !important;
}
.brandname {
  display: block !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.brandsub {
  display: block !important;
  margin-top: 3px !important;
  color: #a8cbc4 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  letter-spacing: .02em !important;
}
.switch {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.switch label {
  color: #a8cbc4 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.module-pill {
  position: relative !important;
  min-width: 0 !important;
  max-width: 310px !important;
  padding: 5px 12px 5px 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #eafffa !important;
  background: linear-gradient(135deg, rgba(16, 122, 108, .78), rgba(12, 84, 75, .92)) !important;
  border: 1px solid rgba(109, 222, 200, .44) !important;
  border-radius: 12px !important;
  box-shadow: 0 7px 18px rgba(1, 25, 22, .16) !important;
  font: inherit !important;
  text-align: left !important;
  appearance: none !important;
  cursor: default !important;
}
.atlas-nav-trigger {
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
.atlas-nav-trigger::after {
  content: "‹" !important;
  position: absolute !important;
  z-index: 2 !important;
  right: -6px !important;
  bottom: -5px !important;
  width: 17px !important;
  height: 17px !important;
  display: grid !important;
  place-items: center !important;
  color: #073b36 !important;
  background: #9cebd9 !important;
  border: 2px solid #0b514a !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.atlas-nav-trigger.is-collapsed::after { content: "›" !important; }
.atlas-nav-trigger:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(150, 240, 222, .72) !important;
  box-shadow: 0 9px 22px rgba(1, 25, 22, .22) !important;
}
.atlas-nav-trigger:focus-visible {
  outline: 3px solid rgba(119, 230, 208, .42) !important;
  outline-offset: 3px !important;
}
.module-pill-mark {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  display: grid !important;
  place-items: center !important;
  color: #073b36 !important;
  background: linear-gradient(145deg, #b3f4e5, #62d6bf) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 820 !important;
  letter-spacing: .035em !important;
  line-height: 1 !important;
}
.module-pill-copy {
  min-width: 0 !important;
  display: block !important;
  line-height: 1.15 !important;
}
.module-pill-copy b {
  display: block !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}
.module-pill-copy > span {
  display: block !important;
  margin-top: 3px !important;
  color: #b4ded5 !important;
  font-size: 8.5px !important;
  font-weight: 580 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}
.selectwrap {
  position: relative !important;
  min-width: 260px !important;
}
.selectwrap::after {
  content: "⌄" !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-56%) !important;
  color: #164a44 !important;
  pointer-events: none !important;
  font-size: 13px !important;
}
.selectwrap select,
#moduleSelect {
  width: 100% !important;
  min-width: 260px !important;
  padding: 9px 38px 9px 14px !important;
  appearance: none !important;
  color: #173b37 !important;
  background: #fff !important;
  border: 1px solid #c7d8d4 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}
.selectwrap select:focus,
#moduleSelect:focus {
  border-color: var(--atlas-mint) !important;
  outline: 3px solid rgba(90, 208, 185, .16) !important;
}
.stage {
  position: relative !important;
  width: 100% !important;
  height: calc(100vh - var(--atlas-header-height)) !important;
  overflow: hidden !important;
  background: #fff !important;
}
.moduleframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #fff !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .16s ease, visibility 0s linear .16s !important;
}
.moduleframe.active {
  opacity: 1 !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}
.loader {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(242, 247, 245, .84) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .12s ease !important;
}
.loader.show { opacity: 1 !important; visibility: visible !important; }
.loader span {
  padding: 10px 14px !important;
  color: #315d57 !important;
  background: #fff !important;
  border: 1px solid var(--atlas-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(6, 27, 25, .07) !important;
  font-size: 12px !important;
}

@media (max-width: 760px) {
  :root { --atlas-header-height: 62px; }
  .atlasbar { padding: 0 10px !important; gap: 9px !important; }
  .brandsub,
  .switch label { display: none !important; }
  .module-pill {
    max-width: none !important;
    padding: 4px !important;
    flex: none !important;
  }
  .module-pill-copy { display: none !important; }
  .module-pill-mark {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
  .atlaslogo { width: 60px !important; }
  .brandname { font-size: 11px !important; }
  .selectwrap { min-width: 0 !important; width: 50vw !important; }
  .selectwrap select,
  #moduleSelect { min-width: 0 !important; width: 100% !important; }
}