/* KIVO shared account header — used on every authenticated account page,
   including deposit and withdraw. */
html body.has-crx-app-header .crx-header-container {
  overflow: visible !important;
}
html body #crxAppHeader,
html body #crxAppHeader * {
  box-sizing: border-box !important;
}

html body #crxAppHeader {
  --crx-neon: #37ff76;
  --crx-neon-soft: rgba(55, 255, 118, .34);
  --crx-panel: rgba(4, 20, 17, .88);
  --crx-tile: rgba(13, 31, 28, .82);
  position: relative !important;
  z-index: 1080 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 104px !important;
  margin: 0 0 24px !important;
  padding: 13px 20px 13px 18px !important;
  overflow: visible !important;
  border: 1.5px solid rgba(50, 255, 119, .68) !important;
  border-radius: 38px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(28, 255, 113, .08), transparent 31%),
    radial-gradient(circle at 86% 50%, rgba(28, 255, 113, .07), transparent 25%),
    linear-gradient(105deg, rgba(5, 25, 21, .96), rgba(3, 16, 15, .94) 58%, rgba(5, 24, 20, .96)) !important;
  box-shadow:
    0 0 0 1px rgba(27, 255, 112, .04) inset,
    0 0 26px rgba(25, 255, 107, .10),
    0 18px 40px rgba(0, 0, 0, .28) !important;
  color: #f7fff9 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html body #crxAppHeader::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(96, 255, 150, .12) 39%, transparent 64%);
  opacity: .55;
}

html body #crxAppHeader a,
html body #crxAppHeader button {
  -webkit-tap-highlight-color: transparent !important;
  text-decoration: none !important;
}

html body #crxAppHeader .crx-header-left,
html body #crxAppHeader .crx-header-right {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
}

html body #crxAppHeader .crx-header-left {
  gap: 28px !important;
}

html body #crxAppHeader .crx-header-right {
  gap: 14px !important;
  margin-left: auto !important;
}

html body #crxAppHeader .crx-header-home,
html body #crxAppHeader .crx-notifications,
html body #crxAppHeader .crx-language-toggle {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 70px !important;
  height: 70px !important;
  flex: 0 0 70px !important;
  padding: 0 !important;
  border: 1px solid rgba(47, 90, 79, .62) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(54, 255, 120, .07), transparent 52%),
    linear-gradient(180deg, rgba(19, 42, 36, .86), rgba(8, 25, 22, .88)) !important;
  color: #37ff76 !important;
  box-shadow:
    0 0 16px rgba(48, 255, 116, .08) inset,
    0 10px 25px rgba(0, 0, 0, .20) !important;
  cursor: pointer !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

html body #crxAppHeader .crx-header-home:hover,
html body #crxAppHeader .crx-notifications:hover,
html body #crxAppHeader .crx-language-toggle:hover,
html body #crxAppHeader .crx-avatar:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(55, 255, 118, .86) !important;
  box-shadow: 0 0 23px rgba(45, 255, 115, .15) !important;
}

html body #crxAppHeader .crx-header-home svg,
html body #crxAppHeader .crx-notifications svg {
  width: 32px !important;
  height: 32px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body #crxAppHeader .crx-header-home {
  color: #b8c9c3 !important;
}

html body #crxAppHeader .crx-brand {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 82px !important;
  height: 82px !important;
  flex: 0 0 82px !important;
  border: 0 !important;
  background: transparent !important;
}


html body #crxAppHeader .crx-brand::before {
  content: "" !important;
  position: absolute !important;
  left: -14px !important;
  top: 50% !important;
  width: 1px !important;
  height: 48px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, transparent, rgba(74, 255, 133, .28) 18%, rgba(74, 255, 133, .42) 50%, rgba(74, 255, 133, .28) 82%, transparent) !important;
  box-shadow: 0 0 8px rgba(55, 255, 118, .08) !important;
  pointer-events: none !important;
}

html body #crxAppHeader .crx-brand img {
  display: block !important;
  width: 78px !important;
  height: 78px !important;
  object-fit: contain !important;
  background: transparent !important;
  filter:
    drop-shadow(0 0 8px rgba(24, 255, 98, .72))
    drop-shadow(0 0 20px rgba(24, 255, 98, .24)) !important;
}

html body #crxAppHeader .crx-notifications {
  overflow: visible !important;
}

html body #crxAppHeader .crx-notification-badge {
  position: absolute !important;
  top: -9px !important;
  right: -8px !important;
  display: grid !important;
  place-items: center !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 8px !important;
  border: 2px solid rgba(3, 22, 16, .86) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #52ff79, #2fe95f) !important;
  color: #031108 !important;
  box-shadow: 0 0 18px rgba(56, 255, 112, .36) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body #crxAppHeader .crx-avatar {
  display: grid !important;
  place-items: center !important;
  width: 74px !important;
  height: 74px !important;
  flex: 0 0 74px !important;
  overflow: hidden !important;
  border: 2px solid rgba(54, 255, 117, .74) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 42% 32%, rgba(74, 255, 133, .16), transparent 45%),
    linear-gradient(150deg, #17372f, #061711) !important;
  color: #f7fff9 !important;
  box-shadow:
    0 0 0 5px rgba(37, 255, 107, .025),
    0 0 20px rgba(41, 255, 112, .12) !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html body #crxAppHeader .crx-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html body #crxAppHeader .crx-language-switcher {
  position: relative !important;
}

html body #crxAppHeader .crx-language-toggle {
  overflow: hidden !important;
}

html body #crxAppHeader .crx-language-flag {
  display: grid !important;
  place-items: center !important;
  width: 49px !important;
  height: 49px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, .28) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset !important;
  font-size: 35px !important;
  line-height: 1 !important;
}

html body #crxAppHeader .crx-language-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  z-index: 1200 !important;
  width: 224px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 130px) !important;
  overflow-y: auto !important;
  padding: 8px !important;
  border: 1px solid rgba(61, 255, 121, .28) !important;
  border-radius: 18px !important;
  background: rgba(4, 16, 14, .98) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.52), 0 0 28px rgba(44,255,111,.08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html body #crxAppHeader .crx-language-menu[hidden] {
  display: none !important;
}

html body #crxAppHeader .crx-language-option {
  display: grid !important;
  grid-template-columns: 34px 1fr 18px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 6px 9px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #dbe8e1 !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}

html body #crxAppHeader .crx-language-option:hover,
html body #crxAppHeader .crx-language-option[aria-checked="true"] {
  background: rgba(48, 255, 116, .09) !important;
  color: #f6fff9 !important;
}

html body #crxAppHeader .crx-language-option-flag {
  font-size: 24px !important;
  line-height: 1 !important;
}

html body #crxAppHeader .crx-language-option svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: #46ff7c !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0 !important;
}

html body #crxAppHeader .crx-language-option[aria-checked="true"] svg {
  opacity: 1 !important;
}

html body #crxAppHeader .crx-header-language-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body #crxAppHeader :is(a, button):focus-visible {
  outline: 2px solid #54ff8c !important;
  outline-offset: 3px !important;
}

@media (max-width: 720px) {
  html body #crxAppHeader {
    min-height: 76px !important;
    padding: 8px 10px !important;
    margin-bottom: 16px !important;
    border-radius: 26px !important;
  }

  html body #crxAppHeader .crx-header-left {
    gap: 16px !important;
  }

  html body #crxAppHeader .crx-brand::before {
    left: -8px !important;
    height: 34px !important;
  }

  html body #crxAppHeader .crx-header-right {
    gap: 7px !important;
  }

  html body #crxAppHeader .crx-header-home,
  html body #crxAppHeader .crx-notifications,
  html body #crxAppHeader .crx-language-toggle {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    border-radius: 15px !important;
  }

  html body #crxAppHeader .crx-header-home svg,
  html body #crxAppHeader .crx-notifications svg {
    width: 24px !important;
    height: 24px !important;
  }

  html body #crxAppHeader .crx-brand {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
  }

  html body #crxAppHeader .crx-brand img {
    width: 52px !important;
    height: 52px !important;
  }

  html body #crxAppHeader .crx-avatar {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
    font-size: 17px !important;
  }

  html body #crxAppHeader .crx-language-flag {
    width: 35px !important;
    height: 35px !important;
    font-size: 25px !important;
  }

  html body #crxAppHeader .crx-notification-badge {
    top: -7px !important;
    right: -6px !important;
    min-width: 26px !important;
    height: 26px !important;
    padding-inline: 6px !important;
    font-size: 12px !important;
  }

  html body #crxAppHeader .crx-language-menu {
    width: min(218px, calc(100vw - 24px)) !important;
    top: calc(100% + 9px) !important;
  }
}

@media (max-width: 410px) {
  html body #crxAppHeader {
    padding-inline: 8px !important;
  }

  html body #crxAppHeader .crx-header-left {
    gap: 13px !important;
  }

  html body #crxAppHeader .crx-brand::before {
    left: -7px !important;
    height: 30px !important;
  }

  html body #crxAppHeader .crx-header-right {
    gap: 5px !important;
  }

  html body #crxAppHeader .crx-header-home,
  html body #crxAppHeader .crx-notifications,
  html body #crxAppHeader .crx-language-toggle {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  html body #crxAppHeader .crx-brand {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }

  html body #crxAppHeader .crx-brand img {
    width: 47px !important;
    height: 47px !important;
  }

  html body #crxAppHeader .crx-avatar {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    font-size: 15px !important;
  }
}

/* The reference header replaces the floating mobile menu handle visually.
   On mobile the header's left tile opens the same sidebar; the K logo remains
   a direct Home link. */
@media (max-width: 991.98px) {
  body.has-crx-app-header .edge-handle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* Flag image fix: avoid emoji/mojibake and keep every flag consistent. */
html body #crxAppHeader .crx-language-flag {
  overflow: hidden !important;
}

html body #crxAppHeader .crx-language-flag img {
  display: block !important;
  width: 49px !important;
  height: 49px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

html body #crxAppHeader .crx-language-option-flag {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.04) !important;
}

html body #crxAppHeader .crx-language-option-flag img {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* =========================================================
   FLAG FIT FIX — show the complete rectangular flag
   ========================================================= */
html body #crxAppHeader .crx-language-flag {
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #crxAppHeader .crx-language-flag img {
  display: block !important;
  width: 44px !important;
  height: 30px !important;
  max-width: calc(100% - 4px) !important;
  max-height: calc(100% - 4px) !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 5px !important;
  clip-path: none !important;
}

html body #crxAppHeader .crx-language-option-flag {
  overflow: visible !important;
  background: transparent !important;
}

html body #crxAppHeader .crx-language-option-flag img {
  width: 30px !important;
  height: 20px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 4px !important;
  clip-path: none !important;
}

@media (max-width: 640px) {
  html body #crxAppHeader .crx-language-flag img {
    width: 30px !important;
    height: 20px !important;
    max-width: calc(100% - 4px) !important;
    max-height: calc(100% - 4px) !important;
  }
}

@media (max-width: 410px) {
  html body #crxAppHeader .crx-language-flag img {
    width: 28px !important;
    height: 19px !important;
  }
}

/* =========================================================
   DESKTOP NAVIGATION — added without changing mobile header
   ========================================================= */
html body #crxAppHeader .crx-brand-word,
html body #crxAppHeader .crx-desktop-nav {
  display: none !important;
}

@media (min-width: 1024px) {
  html body #crxAppHeader {
    min-height: 86px !important;
    padding: 11px 22px !important;
    margin-bottom: 26px !important;
    border-radius: 27px !important;
  }

  html body #crxAppHeader .crx-header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 0 !important;
  }

  /* On desktop the mobile home/menu tile is replaced by visible links. */
  html body #crxAppHeader .crx-header-home {
    display: none !important;
  }

  html body #crxAppHeader .crx-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    height: 60px !important;
    flex: 0 0 auto !important;
    padding-right: 22px !important;
  }

  html body #crxAppHeader .crx-brand::before {
    content: none !important;
    display: none !important;
  }

  html body #crxAppHeader .crx-brand img {
    width: 55px !important;
    height: 55px !important;
  }

  html body #crxAppHeader .crx-brand-word {
    display: inline-block !important;
    color: #f7fff9 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: -0.045em !important;
  }

  html body #crxAppHeader .crx-desktop-nav {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
    min-width: 0 !important;
    padding-left: 5px !important;
  }

  html body #crxAppHeader .crx-desktop-nav-link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 0 2px !important;
    color: #8f9f98 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    transition: color .18s ease, text-shadow .18s ease !important;
  }

  html body #crxAppHeader .crx-desktop-nav-link::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 2px !important;
    width: 0 !important;
    height: 2px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: #37ff76 !important;
    box-shadow: 0 0 10px rgba(55, 255, 118, .38) !important;
    transition: width .18s ease !important;
  }

  html body #crxAppHeader .crx-desktop-nav-link:hover,
  html body #crxAppHeader .crx-desktop-nav-link.is-active {
    color: #37ff76 !important;
    text-shadow: 0 0 14px rgba(55, 255, 118, .12) !important;
  }

  html body #crxAppHeader .crx-desktop-nav-link.is-active::after {
    width: 100% !important;
  }

  html body #crxAppHeader .crx-header-right {
    gap: 12px !important;
    flex: 0 0 auto !important;
  }

  html body #crxAppHeader .crx-notifications,
  html body #crxAppHeader .crx-language-toggle {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
    border-radius: 17px !important;
  }

  html body #crxAppHeader .crx-notifications svg {
    width: 25px !important;
    height: 25px !important;
  }

  html body #crxAppHeader .crx-avatar {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
    font-size: 18px !important;
  }

  html body #crxAppHeader .crx-language-flag {
    width: 42px !important;
    height: 32px !important;
  }

  html body #crxAppHeader .crx-language-flag img {
    width: 36px !important;
    height: 24px !important;
  }

  html body #crxAppHeader .crx-notification-badge {
    top: -8px !important;
    right: -7px !important;
    min-width: 27px !important;
    height: 27px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   DESKTOP SIDEBAR SHORTCUT
   Keeps the mobile home/menu behavior untouched.
   ========================================================= */
html body #crxAppHeader .crx-sidebar-menu {
  display: none !important;
}

@media (min-width: 1024px) {
  html body #crxAppHeader .crx-sidebar-menu {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    margin-right: 14px !important;
    padding: 0 !important;
    border: 1px solid rgba(47, 90, 79, .62) !important;
    border-radius: 17px !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(54, 255, 120, .07), transparent 52%),
      linear-gradient(180deg, rgba(19, 42, 36, .86), rgba(8, 25, 22, .88)) !important;
    color: #37ff76 !important;
    box-shadow:
      0 0 16px rgba(48, 255, 116, .08) inset,
      0 10px 25px rgba(0, 0, 0, .20) !important;
    cursor: pointer !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  }

  html body #crxAppHeader .crx-sidebar-menu:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(55, 255, 118, .86) !important;
    box-shadow: 0 0 23px rgba(45, 255, 115, .15) !important;
  }

  html body #crxAppHeader .crx-sidebar-menu svg {
    width: 25px !important;
    height: 25px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.1 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body.desktop-sidebar-open #crxAppHeader .crx-sidebar-menu {
    border-color: rgba(55, 255, 118, .92) !important;
    background: linear-gradient(180deg, rgba(20, 67, 43, .95), rgba(7, 37, 25, .96)) !important;
    box-shadow:
      0 0 0 1px rgba(55,255,118,.08) inset,
      0 0 24px rgba(55,255,118,.18) !important;
  }
}

/* Desktop drawer button must stay clickable above the drawer/backdrop. */
@media (min-width: 1024px) {
  html body.dashboard-home #crxAppHeader {
    z-index: 1605 !important;
  }

  html body.dashboard-home #crxAppHeader .crx-sidebar-menu {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* =========================================================
   GLOBAL DESKTOP SIDEBAR DRAWER
   Makes the header hamburger work on every page that uses the shared
   KIVO header (Home, Investir, Minhas ativações, Carteira, Afiliados...).
   The drawer overlays the page and NEVER changes dashboard/content width.
   The shared header owns the drawer on every account page, including
   deposit and withdrawal flows.
   ========================================================= */
@media (min-width: 1024px) {
  html body.has-crx-app-header #crxAppHeader {
    position: relative !important;
    z-index: 1705 !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-sidebar-menu {
    position: relative !important;
    z-index: 3 !important;
  }

  /* Closed state: keep the sidebar completely outside the viewport. */
  html body.has-crx-app-header #sidebar.sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1702 !important;
    transform: translate3d(calc(-100% - 20px), 0, 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      transform .26s cubic-bezier(.22,.75,.22,1),
      opacity .18s ease,
      visibility 0s linear .26s !important;
  }

  /* Open state controlled exclusively by the shared header button. */
  html body.has-crx-app-header.desktop-sidebar-open #sidebar.sidebar,
  html body.has-crx-app-header.desktop-sidebar-open #sidebar.sidebar.show {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      transform .26s cubic-bezier(.22,.75,.22,1),
      opacity .18s ease,
      visibility 0s linear 0s !important;
  }

  /* Backdrop makes the drawer look intentional and keeps the underlying
     page visually stable instead of competing with the menu. */
  html body.has-crx-app-header #sidebarBackdrop.sidebar-backdrop,
  html body.has-crx-app-header #sidebarBackdrop.sidebar-backdrop.show {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1698 !important;
    display: block !important;
    background: rgba(0, 0, 0, .72) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      opacity .20s ease,
      visibility 0s linear .20s !important;
  }

  html body.has-crx-app-header.desktop-sidebar-open #sidebarBackdrop.sidebar-backdrop,
  html body.has-crx-app-header.desktop-sidebar-open #sidebarBackdrop.sidebar-backdrop.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      opacity .20s ease,
      visibility 0s linear 0s !important;
  }

  /* Never let opening the drawer resize or move the page. */
  html body.has-crx-app-header.desktop-sidebar-open .dashboard-wrapper,
  html body.has-crx-app-header.sidebar-open .dashboard-wrapper {
    transform: none !important;
  }

  /* The old floating edge handle is unnecessary on desktop now. */
  html body.has-crx-app-header #edgeToggle.edge-handle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   DESKTOP SHELL HARDENING — 2026-09
   Desktop only. Existing mobile rules (<= 991.98px) are intentionally
   untouched. This block is the final source of truth for the shared drawer.
   ========================================================= */
@media (min-width: 992px) {
  html body.has-crx-app-header {
    overflow-x: hidden !important;
  }

  /* Flex/grid children must be allowed to shrink instead of widening viewport. */
  html body.has-crx-app-header .dashboard-wrapper,
  html body.has-crx-app-header .dashboard-wrapper > *,
  html body.has-crx-app-header .dashboard-wrapper main,
  html body.has-crx-app-header #crxAppHeader,
  html body.has-crx-app-header #crxAppHeader .crx-header-left,
  html body.has-crx-app-header #crxAppHeader .crx-header-right,
  html body.has-crx-app-header #crxAppHeader .crx-desktop-nav {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* The shared drawer button is a desktop control from 992px upward. */
  html body.has-crx-app-header #crxAppHeader .crx-sidebar-menu {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    margin-right: 14px !important;
    padding: 0 !important;
    border: 1px solid rgba(47, 90, 79, .62) !important;
    border-radius: 17px !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(54, 255, 120, .07), transparent 52%),
      linear-gradient(180deg, rgba(19, 42, 36, .86), rgba(8, 25, 22, .88)) !important;
    color: #37ff76 !important;
    box-shadow:
      0 0 16px rgba(48, 255, 116, .08) inset,
      0 10px 25px rgba(0, 0, 0, .20) !important;
    cursor: pointer !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-sidebar-menu svg {
    width: 25px !important;
    height: 25px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.1 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body.has-crx-app-header.desktop-sidebar-open #crxAppHeader .crx-sidebar-menu {
    border-color: rgba(55, 255, 118, .92) !important;
    background: linear-gradient(180deg, rgba(20, 67, 43, .95), rgba(7, 37, 25, .96)) !important;
    box-shadow:
      0 0 0 1px rgba(55,255,118,.08) inset,
      0 0 24px rgba(55,255,118,.18) !important;
  }

  /*
   * Canonical desktop drawer. It overlays the page; it never participates in
   * the page grid and therefore cannot change dashboard width/padding.
   */
  html body.has-crx-app-header #sidebar.sidebar,
  html body.affiliate-page-shell.has-crx-app-header #sidebar.sidebar {
    display: flex !important;
    position: fixed !important;
    top: 112px !important;
    right: auto !important;
    bottom: 18px !important;
    left: 18px !important;
    z-index: 1804 !important;
    width: 300px !important;
    max-width: calc(100vw - 36px) !important;
    height: auto !important;
    max-height: calc(100dvh - 130px) !important;
    margin: 0 !important;
    transform: translate3d(calc(-100% - 40px), 0, 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      transform .26s cubic-bezier(.22,.75,.22,1),
      opacity .18s ease,
      visibility 0s linear .26s !important;
  }

  html body.has-crx-app-header.desktop-sidebar-open #sidebar.sidebar,
  html body.has-crx-app-header.desktop-sidebar-open #sidebar.sidebar.show,
  html body.affiliate-page-shell.has-crx-app-header.desktop-sidebar-open #sidebar.sidebar {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      transform .26s cubic-bezier(.22,.75,.22,1),
      opacity .18s ease,
      visibility 0s linear 0s !important;
  }

  html body.has-crx-app-header #sidebarBackdrop.sidebar-backdrop,
  html body.has-crx-app-header #sidebarBackdrop.sidebar-backdrop.show,
  html body.affiliate-page-shell.has-crx-app-header #sidebarBackdrop.sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1800 !important;
    background: rgba(0, 0, 0, .72) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      opacity .20s ease,
      visibility 0s linear .20s !important;
  }

  html body.has-crx-app-header.desktop-sidebar-open #sidebarBackdrop.sidebar-backdrop,
  html body.has-crx-app-header.desktop-sidebar-open #sidebarBackdrop.sidebar-backdrop.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      opacity .20s ease,
      visibility 0s linear 0s !important;
  }

  html body.has-crx-app-header.desktop-sidebar-open {
    overflow-y: hidden !important;
  }

  /* Never expose the old desktop edge handle or page-shifting sidebar state. */
  html body.has-crx-app-header #edgeToggle.edge-handle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.has-crx-app-header.sidebar-open .dashboard-wrapper,
  html body.has-crx-app-header.sidebar-expanded .dashboard-wrapper,
  html body.has-crx-app-header.desktop-sidebar-open .dashboard-wrapper {
    transform: none !important;
  }

  /* Shared-page containment: oversized cards/grids can shrink inside viewport. */
  html body.has-crx-app-header :is(
    .page,
    .bots-shell,
    .bots-list,
    .bot-card,
    .account-page,
    .account-layout,
    .settings-grid,
    .aff-page,
    .affiliate-reference,
    .affiliate-copy-stack,
    .affiliate-reference-metrics,
    .affiliate-member-list,
    .affiliate-member,
    .affiliate-ranking,
    .position-live-block,
    .position-card
  ) {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html body.has-crx-app-header :is(
    .bots-list,
    .account-layout,
    .settings-grid,
    .affiliate-copy-stack,
    .affiliate-reference-metrics,
    .affiliate-member-list
  ) > * {
    min-width: 0 !important;
  }

  /*
   * Affiliate page had a mobile/reference shell applied globally, including
   * display:none on the desktop sidebar and a hard 520px dashboard width.
   * Keep its content selection intact, but restore a real desktop canvas.
   */
  html body.affiliate-page-shell.has-crx-app-header .dashboard-wrapper {
    width: calc(100% - 48px) !important;
    max-width: 1120px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 24px 0 72px !important;
  }

  html body.affiliate-page-shell.has-crx-app-header .affiliate-reference {
    width: 100% !important;
    max-width: none !important;
  }

  html body.affiliate-page-shell.has-crx-app-header .affiliate-reference-head p {
    max-width: 720px !important;
  }

  html body.affiliate-page-shell.has-crx-app-header .affiliate-copy-stack,
  html body.affiliate-page-shell.has-crx-app-header .affiliate-member-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.affiliate-page-shell.has-crx-app-header .affiliate-copy-field,
  html body.affiliate-page-shell.has-crx-app-header .affiliate-member {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   KIVO DESKTOP HEADER — CANONICAL GLOBAL BAR
   2026-09-18

   Desktop only. The mobile header and its breakpoints remain untouched.
   The bar no longer inherits the width of .page, .bots-shell,
   .account-page or any other page-specific container.
   ========================================================= */
html body #crxAppHeader .crx-settings {
  display: none !important;
}

@media (min-width: 992px) {
  html body.has-crx-app-header #crxAppHeader {
    /* Full-page visual consistency, even when the header lives inside a
       narrow page shell such as .bots-shell (900px). */
    position: relative !important;
    z-index: 1810 !important;
    left: 50% !important;
    width: min(1440px, calc(100vw - 96px)) !important;
    max-width: none !important;
    min-height: 86px !important;
    margin: 0 0 28px !important;
    padding: 10px 18px !important;
    transform: translateX(-50%) !important;
    border-radius: 27px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 0 !important;
  }

  /* 992px is already desktop for the shared controller, so make the visual
     header switch at the exact same breakpoint. */
  html body.has-crx-app-header #crxAppHeader .crx-header-home {
    display: none !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    height: 58px !important;
    padding-right: 16px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-brand img {
    width: 54px !important;
    height: 54px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-brand-word {
    display: inline-block !important;
    font-size: 20px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-desktop-nav {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    gap: clamp(10px, 1.35vw, 22px) !important;
    min-width: 0 !important;
    padding-left: 2px !important;
    white-space: nowrap !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-desktop-nav-link {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding-inline: 1px !important;
    font-size: clamp(12px, .92vw, 15px) !important;
    letter-spacing: -0.025em !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-header-right {
    flex: 0 0 auto !important;
    gap: 9px !important;
    margin-left: 14px !important;
  }

  /* Settings is a desktop-only shortcut. Profile and Activity already have
     dedicated shortcuts through the avatar and bell. */
  html body.has-crx-app-header #crxAppHeader .crx-settings {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    padding: 0 !important;
    border: 1px solid rgba(47, 90, 79, .62) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(54, 255, 120, .07), transparent 52%),
      linear-gradient(180deg, rgba(19, 42, 36, .86), rgba(8, 25, 22, .88)) !important;
    color: #37ff76 !important;
    box-shadow:
      0 0 16px rgba(48, 255, 116, .08) inset,
      0 10px 25px rgba(0, 0, 0, .20) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-settings:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(55, 255, 118, .86) !important;
    box-shadow: 0 0 23px rgba(45, 255, 115, .15) !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-settings svg {
    width: 23px !important;
    height: 23px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-notifications,
  html body.has-crx-app-header #crxAppHeader .crx-language-toggle {
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
    border-radius: 16px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-avatar {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
  }
}

/* Compact desktop: keep every requested shortcut visible without allowing
   the header to overflow. This still starts at the desktop breakpoint. */
@media (min-width: 992px) and (max-width: 1180px) {
  html body.has-crx-app-header #crxAppHeader {
    width: calc(100vw - 40px) !important;
    padding-inline: 12px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-sidebar-menu {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    margin-right: 8px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-brand {
    padding-right: 8px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-brand img {
    width: 48px !important;
    height: 48px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-brand-word {
    display: none !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-desktop-nav {
    gap: 9px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-desktop-nav-link {
    font-size: 11.5px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-header-right {
    gap: 6px !important;
    margin-left: 9px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-settings,
  html body.has-crx-app-header #crxAppHeader .crx-notifications,
  html body.has-crx-app-header #crxAppHeader .crx-language-toggle {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  html body.has-crx-app-header #crxAppHeader .crx-avatar {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }
}

/* =========================================================
   KIVO HEADER — FINAL CANONICAL GEOMETRY
   2026-09-23

   One visual source of truth for every authenticated page.
   The header keeps the exact same outer dimensions at a given viewport,
   regardless of the width/padding of .page, .bots-shell, .account-page,
   .dashboard-wrapper or any page-specific container.
   ========================================================= */
html body.has-crx-app-header #crxAppHeader {
  box-sizing: border-box !important;
}

/* Profile keeps the compact action set already approved for that page.
   Only visibility changes; outer header geometry remains global. */
@media (min-width: 992px) {
  html body.profile-page.has-crx-app-header #crxAppHeader .crx-desktop-nav,
  html body.profile-page.has-crx-app-header #crxAppHeader .crx-settings {
    display: none !important;
  }
}

/* Mobile/tablet: width and height no longer depend on the page container. */
@media (max-width: 991.98px) {
  html body.has-crx-app-header #crxAppHeader {
    position: relative !important;
    left: 50% !important;
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    margin: 0 0 16px !important;
    padding: 8px 10px !important;
    transform: translateX(-50%) !important;
    border-radius: 26px !important;
  }
}

@media (max-width: 410px) {
  html body.has-crx-app-header #crxAppHeader {
    padding-inline: 8px !important;
  }
}

/* Desktop: exact shared dimensions centered against the viewport. */
@media (min-width: 992px) {
  html body.has-crx-app-header #crxAppHeader {
    position: relative !important;
    left: 50% !important;
    width: min(1440px, calc(100vw - 96px)) !important;
    max-width: none !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    margin: 0 0 28px !important;
    padding: 10px 18px !important;
    transform: translateX(-50%) !important;
    border-radius: 27px !important;
  }
}

@media (min-width: 992px) and (max-width: 1180px) {
  html body.has-crx-app-header #crxAppHeader {
    width: calc(100vw - 40px) !important;
    padding-inline: 12px !important;
  }
}