/* MapleFi AIONEX header layout stabilization — 2026-08-02
   Loaded after the legacy polish layers so the shell, navigation and actions
   share one predictable coordinate system at every viewport and browser zoom. */

:root {
  --mf-header-shell-max: 1600px;
  --mf-header-gutter: 32px;
  --mf98-header-h: 86px;
  --mf98-header-reserve: 106px;
}

#header,
#header .mf-shell-header,
#header .mf-shell-header__inner,
#header .mf-brand,
#header .mf-primary-nav,
#header .mf-header-actions {
  box-sizing: border-box !important;
}

/* The fixed header owns the outer spacing. The shell and its inner panel now
   use the same width, preventing the previous 20–35px right-side overflow. */
#header {
  width: 100% !important;
  height: var(--mf98-header-reserve) !important;
  min-height: var(--mf98-header-reserve) !important;
  padding: 10px 0 0 !important;
  overflow: visible !important;
}

#header .mf-shell-header {
  width: min(var(--mf-header-shell-max), calc(100% - (var(--mf-header-gutter) * 2))) !important;
  max-width: var(--mf-header-shell-max) !important;
  height: var(--mf98-header-h) !important;
  min-height: var(--mf98-header-h) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

#header .mf-shell-header__inner {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  display: grid !important;
  grid-template-columns: minmax(402px, 1fr) max-content minmax(402px, 1fr) !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Equal flexible side tracks keep the navigation centered on the viewport,
   rather than centered only in the leftover space between brand and wallet. */
#header .mf-brand {
  justify-self: start !important;
  align-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 230px !important;
}

#header .mf-primary-nav {
  justify-self: center !important;
  align-self: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 8px !important;
}

#header .mf-nav-link {
  flex: 0 0 auto !important;
}

#header .mf-header-actions {
  justify-self: end !important;
  align-self: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 8px !important;
}

#header .mf-chain-control {
  width: 210px !important;
  min-width: 210px !important;
}

#header .mf-wallet-control {
  width: 184px !important;
  min-width: 184px !important;
}

/* Compact desktop: preserve true center alignment while fitting common
   1341–1440px CSS viewports without squeezing or clipping the wallet. */
@media (max-width: 1440px) and (min-width: 1341px) {
  :root { --mf-header-gutter: 24px; }

  #header .mf-shell-header__inner {
    grid-template-columns: minmax(338px, 1fr) max-content minmax(338px, 1fr) !important;
    column-gap: 10px !important;
    padding-inline: 10px !important;
  }

  #header .mf-primary-nav { gap: 6px !important; }

  #header .mf-nav-link {
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    font-size: 13px !important;
  }

  #header .mf-nav-link > span:not(.mf-nav-icon):not(.mf-caret) {
    font-size: 13px !important;
  }

  #header .mf-nav-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
  }

  #header .mf-explore__trigger {
    min-width: 0 !important;
    max-width: none !important;
  }

  #header .mf-chain-control {
    width: 170px !important;
    min-width: 170px !important;
  }

  #header .mf-wallet-control {
    width: 160px !important;
    min-width: 160px !important;
  }

  #header .mf-control-button {
    padding-inline: 8px !important;
    gap: 7px !important;
  }

  #header .mf-chain-control .mf-control-button {
    grid-template-columns: 34px minmax(0, 1fr) 8px !important;
  }

  #header .mf-wallet-control .mf-control-button {
    grid-template-columns: 34px minmax(0, 1fr) 8px !important;
  }

  #header .mf-control-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
  }

  #header .mf-live-badge { display: none !important; }
}

/* Header drawer starts slightly earlier than the original 1180px rule. This
   avoids an awkward narrow desktop state where centered navigation and the
   two account controls cannot coexist without overlap. */
@media (max-width: 1340px) {
  :root {
    --mf-header-gutter: 12px;
    --mf98-header-h: 72px;
    --mf98-header-reserve: 94px;
  }

  #header {
    padding: 9px 12px 0 !important;
  }

  #header .mf-shell-header {
    width: 100% !important;
    max-width: var(--mf-header-shell-max) !important;
    height: var(--mf98-header-h) !important;
    min-height: var(--mf98-header-h) !important;
  }

  #header .mf-shell-header__inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    grid-template-columns: minmax(174px, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  #header .mf-brand { max-width: 220px !important; }

  #header .mf-primary-nav {
    position: fixed !important;
    inset: auto 12px auto 12px !important;
    top: var(--mf98-header-reserve) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--mf98-header-reserve) - 14px) !important;
    margin: 0 !important;
    padding: 12px !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-content: start !important;
    gap: 7px !important;
    overflow: auto !important;
    border: 1px solid var(--mf98-line-strong) !important;
    border-radius: 20px !important;
    background: rgba(6, 12, 21, .995) !important;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .52) !important;
    z-index: 57000 !important;
  }

  html[data-theme="light"] #header .mf-primary-nav,
  body.light-mode #header .mf-primary-nav {
    background: rgba(255, 255, 255, .995) !important;
  }

  #header .mf-primary-nav.active { display: grid !important; }

  #header .mf-nav-link {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 14px !important;
    justify-content: start !important;
    text-align: left !important;
    padding: 7px 12px !important;
  }

  #header .mf-nav-link > span:not(.mf-nav-icon):not(.mf-caret) {
    white-space: normal !important;
    text-align: left !important;
  }

  #header .mf-explore,
  #header .mf-explore__trigger {
    width: 100% !important;
    max-width: none !important;
  }

  #header .mf-mega-menu {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 8px 0 0 !important;
    transform: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #header .mf-mega-menu__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #header .mf-header-actions {
    justify-self: end !important;
    width: max-content !important;
    gap: 8px !important;
  }

  #header .mf-chain-control {
    width: 174px !important;
    min-width: 174px !important;
  }

  #header .mf-wallet-control {
    width: 148px !important;
    min-width: 148px !important;
  }

  #header .mf-menu-button {
    display: inline-flex !important;
  }
}

@media (max-width: 820px) {
  #header .mf-chain-control {
    width: 164px !important;
    min-width: 164px !important;
  }

  #header .mf-wallet-control {
    width: 144px !important;
    min-width: 144px !important;
  }

  #header .mf-live-badge { display: none !important; }

  #header .mf-chain-control .mf-control-button {
    grid-template-columns: 34px minmax(0, 1fr) 8px !important;
  }
}

@media (max-width: 640px) {
  :root {
    --mf-header-gutter: 8px;
    --mf98-header-h: 64px;
    --mf98-header-reserve: 80px;
  }

  #header { padding: 7px 8px 8px !important; }

  #header .mf-shell-header__inner {
    height: 64px !important;
    min-height: 64px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    border-radius: 18px !important;
    padding: 7px !important;
    gap: 6px !important;
  }

  #header .mf-brand {
    max-width: calc(100vw - 190px) !important;
  }

  #header .mf-chain-control { display: none !important; }

  #header .mf-wallet-control {
    width: 126px !important;
    min-width: 126px !important;
  }

  #header .mf-primary-nav {
    left: 8px !important;
    right: 8px !important;
    border-radius: 18px !important;
  }

  #header .mf-mega-menu__grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  #header .mf-brand__copy em,
  #header .mf-brand__copy small {
    display: none !important;
  }

  #header .mf-brand { gap: 7px !important; }

  #header .mf-wallet-control {
    width: 116px !important;
    min-width: 116px !important;
  }

  #header .mf-wallet-button strong {
    font-size: 9.5px !important;
  }
}


/* AIONEX shell fit pass — 2026-08-11 UI console fixed
   Desktop uses a content-first three-column shell; compact desktop removes
   non-essential labels before any control can clip outside the viewport. */
@media (min-width: 1341px) {
  :root { --mf-header-shell-max: 1760px; --mf-header-gutter: 14px; }
  #header .mf-shell-header {
    width: min(var(--mf-header-shell-max), calc(100% - 28px)) !important;
    max-width: var(--mf-header-shell-max) !important;
  }
  #header .mf-shell-header__inner {
    grid-template-columns: minmax(150px, 205px) minmax(0, 1fr) max-content !important;
    column-gap: 10px !important;
    padding: 9px 10px !important;
  }
  #header .mf-brand { max-width: 205px !important; min-width: 0 !important; }
  #header .mf-primary-nav {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  #header .mf-nav-link {
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 6px 9px !important;
    gap: 5px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }
  #header .mf-nav-link > span:not(.mf-nav-icon):not(.mf-caret) { font-size: 12.5px !important; white-space: nowrap !important; }
  #header .mf-nav-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; max-width: 24px !important; }
  #header .mf-header-actions { gap: 6px !important; min-width: 0 !important; }
  #header .mf-chain-control { width: 166px !important; min-width: 166px !important; }
  #header .mf-wallet-control { width: 154px !important; min-width: 154px !important; }
  #header .mf-control-button { padding-inline: 8px !important; gap: 6px !important; }
  #header .mf-control-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; max-width: 32px !important; }
}

@media (max-width: 1510px) and (min-width: 1341px) {
  #header .mf-shell-header__inner { grid-template-columns: 150px minmax(0, 1fr) max-content !important; gap: 7px !important; padding-inline: 8px !important; }
  #header .mf-brand { max-width: 150px !important; }
  #header .mf-brand__copy small { display: none !important; }
  #header .mf-primary-nav { gap: 3px !important; }
  #header .mf-nav-link { padding-inline: 7px !important; gap: 4px !important; font-size: 12px !important; }
  #header .mf-nav-link > span:not(.mf-nav-icon):not(.mf-caret) { font-size: 12px !important; }
  #header .mf-nav-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; max-width: 22px !important; }
  #header .mf-chain-control { width: 142px !important; min-width: 142px !important; }
  #header .mf-wallet-control { width: 136px !important; min-width: 136px !important; }
  #header .mf-live-badge { display: none !important; }
  #header .mf-control-copy small { display: none !important; }
}

@media (max-width: 1400px) and (min-width: 1341px) {
  #header .mf-nav-icon { display: none !important; }
  #header .mf-nav-link { padding-inline: 8px !important; }
  #header .mf-chain-control { width: 132px !important; min-width: 132px !important; }
  #header .mf-wallet-control { width: 126px !important; min-width: 126px !important; }
}

/* MapleFi AIONEX V5.12 header balance pass — 2026-08-21
   Purpose: make the production header look intentional on wide desktop,
   prevent menu/control drift at mid-widths, and keep mobile drawer behavior clean. */
:root{
  --mf-header-shell-max:1500px;
  --mf-header-gutter:20px;
  --mf98-header-h:78px;
  --mf98-header-reserve:94px;
}
html,body{max-width:100%;overflow-x:clip!important;}
#header{
  width:100%!important;
  min-height:var(--mf98-header-reserve)!important;
  height:var(--mf98-header-reserve)!important;
  padding:12px 0 0!important;
  overflow:visible!important;
}
#header .mf-shell-header{
  width:min(var(--mf-header-shell-max),calc(100vw - (var(--mf-header-gutter) * 2)))!important;
  max-width:var(--mf-header-shell-max)!important;
  height:var(--mf98-header-h)!important;
  min-height:var(--mf98-header-h)!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
}
#header .mf-shell-header__inner{
  width:100%!important;
  max-width:100%!important;
  min-height:100%!important;
  height:100%!important;
  display:grid!important;
  grid-template-columns:minmax(260px,1fr) max-content minmax(340px,1fr)!important;
  align-items:center!important;
  column-gap:14px!important;
  padding:9px 12px!important;
  border-radius:24px!important;
  overflow:visible!important;
}
#header .mf-brand{
  justify-self:start!important;
  display:inline-flex!important;
  align-items:center!important;
  max-width:250px!important;
  min-width:0!important;
  gap:12px!important;
}
#header .mf-brand__mark{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  border-radius:18px!important;
}
#header .mf-brand__mark img{width:30px!important;height:30px!important;}
#header .mf-brand__copy{min-width:0!important;}
#header .mf-brand__copy span{display:flex!important;align-items:baseline!important;gap:5px!important;min-width:0!important;}
#header .mf-brand__copy strong{font-size:17px!important;line-height:1!important;letter-spacing:-.03em!important;}
#header .mf-brand__copy em{font-size:9px!important;line-height:1!important;letter-spacing:.18em!important;}
#header .mf-brand__copy small{display:block!important;margin-top:3px!important;font-size:8px!important;line-height:1!important;letter-spacing:.16em!important;white-space:nowrap!important;}
#header .mf-primary-nav{
  justify-self:center!important;
  width:max-content!important;
  max-width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-width:0!important;
}
#header .mf-nav-link{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:44px!important;
  min-height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:6px 12px!important;
  border-radius:15px!important;
  font-size:13px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#header .mf-nav-link>span:not(.mf-nav-icon):not(.mf-caret){
  font-size:13px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:-.015em!important;
  white-space:nowrap!important;
}
#header .mf-nav-icon{
  display:grid!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  max-width:24px!important;
  border-radius:9px!important;
  font-size:11px!important;
}
#header .mf-explore{width:auto!important;min-width:0!important;}
#header .mf-explore__trigger{width:auto!important;min-width:0!important;}
#header .mf-header-actions{
  justify-self:end!important;
  width:max-content!important;
  max-width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  min-width:0!important;
}
#header .mf-chain-control{width:174px!important;min-width:174px!important;}
#header .mf-wallet-control{width:164px!important;min-width:164px!important;}
#header .mf-control-button{
  height:48px!important;
  min-height:48px!important;
  padding:7px 9px!important;
  gap:8px!important;
  border-radius:17px!important;
}
#header .mf-chain-control .mf-control-button{grid-template-columns:34px minmax(0,1fr) 8px!important;}
#header .mf-wallet-control .mf-control-button{grid-template-columns:34px minmax(0,1fr) 8px!important;}
#header .mf-control-icon{width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important;border-radius:12px!important;}
#header .mf-live-badge{display:none!important;}
#header .mf-control-copy small{font-size:7px!important;line-height:1!important;letter-spacing:.13em!important;}
#header .mf-control-copy strong{font-size:11px!important;line-height:1.12!important;}
#header .mf-caret{flex:0 0 auto!important;}
#header .mf-menu-button{display:none!important;}
#header .mf-mega-menu{z-index:58000!important;}

@media (max-width:1560px) and (min-width:1341px){
  :root{--mf-header-shell-max:calc(100vw - 28px);--mf-header-gutter:14px;}
  #header .mf-shell-header__inner{
    grid-template-columns:minmax(210px,1fr) max-content minmax(312px,1fr)!important;
    column-gap:9px!important;
    padding-inline:10px!important;
  }
  #header .mf-brand{max-width:218px!important;gap:10px!important;}
  #header .mf-brand__copy small{font-size:7px!important;letter-spacing:.13em!important;}
  #header .mf-nav-link{height:42px!important;min-height:42px!important;padding:6px 9px!important;gap:5px!important;font-size:12px!important;}
  #header .mf-nav-link>span:not(.mf-nav-icon):not(.mf-caret){font-size:12px!important;}
  #header .mf-nav-icon{width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;}
  #header .mf-chain-control{width:154px!important;min-width:154px!important;}
  #header .mf-wallet-control{width:148px!important;min-width:148px!important;}
  #header .mf-control-button{height:46px!important;min-height:46px!important;padding-inline:8px!important;gap:6px!important;}
  #header .mf-control-copy small{display:none!important;}
}

@media (max-width:1420px) and (min-width:1341px){
  #header .mf-shell-header__inner{grid-template-columns:minmax(170px,1fr) max-content minmax(284px,1fr)!important;column-gap:7px!important;}
  #header .mf-brand{max-width:182px!important;}
  #header .mf-brand__copy small{display:none!important;}
  #header .mf-nav-link{padding-inline:8px!important;gap:5px!important;}
  #header .mf-nav-icon{display:none!important;}
  #header .mf-chain-control{width:142px!important;min-width:142px!important;}
  #header .mf-wallet-control{width:136px!important;min-width:136px!important;}
}

@media (max-width:1340px){
  :root{--mf-header-gutter:12px;--mf98-header-h:70px;--mf98-header-reserve:88px;}
  #header{height:var(--mf98-header-reserve)!important;min-height:var(--mf98-header-reserve)!important;padding:9px 12px 0!important;}
  #header .mf-shell-header{width:100%!important;height:var(--mf98-header-h)!important;min-height:var(--mf98-header-h)!important;}
  #header .mf-shell-header__inner{
    grid-template-columns:minmax(150px,1fr) auto!important;
    column-gap:8px!important;
    padding:8px!important;
    border-radius:21px!important;
  }
  #header .mf-brand{max-width:230px!important;}
  #header .mf-brand__mark{width:42px!important;height:42px!important;min-width:42px!important;border-radius:16px!important;}
  #header .mf-brand__mark img{width:28px!important;height:28px!important;}
  #header .mf-primary-nav{
    position:fixed!important;
    top:calc(var(--mf98-header-reserve) + 4px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--mf98-header-reserve) - 18px)!important;
    display:none!important;
    grid-template-columns:1fr!important;
    align-items:stretch!important;
    justify-content:start!important;
    gap:8px!important;
    padding:12px!important;
    border-radius:20px!important;
    overflow:auto!important;
  }
  #header .mf-primary-nav.active{display:grid!important;}
  #header .mf-nav-link{
    width:100%!important;
    height:52px!important;
    min-height:52px!important;
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr) 12px!important;
    justify-content:start!important;
    text-align:left!important;
    padding:8px 12px!important;
    gap:9px!important;
  }
  #header .mf-nav-link>span:not(.mf-nav-icon):not(.mf-caret){font-size:13px!important;text-align:left!important;white-space:normal!important;}
  #header .mf-nav-icon{display:grid!important;width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;}
  #header .mf-explore,#header .mf-explore__trigger{width:100%!important;}
  #header .mf-mega-menu{position:relative!important;inset:auto!important;width:100%!important;margin:8px 0 0!important;transform:none!important;box-shadow:none!important;}
  #header .mf-mega-menu__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #header .mf-header-actions{gap:8px!important;}
  #header .mf-chain-control{width:164px!important;min-width:164px!important;}
  #header .mf-wallet-control{width:148px!important;min-width:148px!important;}
  #header .mf-menu-button{display:inline-flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;width:46px!important;height:46px!important;min-width:46px!important;border-radius:15px!important;}
}

@media (max-width:760px){
  :root{--mf-header-gutter:8px;--mf98-header-h:64px;--mf98-header-reserve:78px;}
  #header{padding:7px 8px 7px!important;}
  #header .mf-shell-header__inner{height:64px!important;min-height:64px!important;border-radius:18px!important;padding:7px!important;gap:6px!important;}
  #header .mf-brand{max-width:calc(100vw - 188px)!important;gap:8px!important;}
  #header .mf-brand__mark{width:40px!important;height:40px!important;min-width:40px!important;border-radius:15px!important;}
  #header .mf-brand__copy strong{font-size:14px!important;}
  #header .mf-brand__copy em{display:none!important;}
  #header .mf-brand__copy small{display:none!important;}
  #header .mf-chain-control{display:none!important;}
  #header .mf-wallet-control{width:126px!important;min-width:126px!important;}
  #header .mf-wallet-control .mf-control-button{height:46px!important;min-height:46px!important;grid-template-columns:30px minmax(0,1fr) 7px!important;padding-inline:7px!important;}
  #header .mf-control-icon{width:30px!important;height:30px!important;min-width:30px!important;max-width:30px!important;}
  #header .mf-wallet-button strong{font-size:9.5px!important;}
  #header .mf-menu-button{width:44px!important;height:44px!important;min-width:44px!important;}
  #header .mf-primary-nav{left:8px!important;right:8px!important;top:calc(var(--mf98-header-reserve) + 4px)!important;border-radius:18px!important;}
  #header .mf-mega-menu__grid{grid-template-columns:1fr!important;}
}

@media (max-width:420px){
  #header .mf-brand{max-width:calc(100vw - 176px)!important;}
  #header .mf-wallet-control{width:116px!important;min-width:116px!important;}
  #header .mf-wallet-button strong{font-size:9px!important;}
}