/* Recodet V88 — professional main-menu interface.
   This final cascade changes only the Hub presentation and its mobile menu. */
:root{
  --v88-sidebar:76px;
  --v88-radius:20px;
  --v88-gold:#e7ba43;
  --v88-gold-hi:#f4d36c;
  --v88-bg:#050504;
  --v88-card:#151617;
  --v88-card-deep:#0e0f10;
  --v88-grey:#a4a7ac;
  --v88-grey-muted:#797d83;
}

.mainMenuMobileNav{display:none}

/* Main-menu canvas: centred and wide instead of the former 760px cluster. */
body:has(#viewMain:not(.hidden)):not(.onboardingActive){
  background:
    radial-gradient(900px 560px at 50% 34%,rgba(231,186,67,.075),transparent 72%),
    linear-gradient(180deg,#070705 0%,var(--v88-bg) 100%)!important;
}
body:has(#viewMain:not(.hidden)):not(.onboardingActive) main.content{
  min-height:calc(100vh - 72px)!important;
  padding:30px clamp(22px,3.5vw,58px) 48px!important;
  background:transparent!important;
}
#viewMain{
  width:min(100%,1240px)!important;
  max-width:1240px!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:20px!important;
}
#viewMain.hidden{display:none!important}
#viewMain .hubModulesHead{
  min-height:42px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
}
#viewMain .hubModulesHead .sectionTitle{
  margin:0!important;
  color:#f4f1ea!important;
  font:800 clamp(26px,2.2vw,34px)/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:-.035em!important;
}

/* Both groups follow a four-track desktop system. The two primary cards span two tracks. */
#viewMain .hubPrimaryGrid,
#viewMain .hubSecondaryGrid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  margin:0!important;
  padding:0!important;
  align-items:stretch!important;
}
#viewMain .hubPrimaryCard{grid-column:span 2!important}

/* One smooth charcoal card, one radius, one icon language. */
#viewMain .hubModuleTile.menuModuleCard{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  min-width:0!important;
  min-height:136px!important;
  aspect-ratio:auto!important;
  margin:0!important;
  padding:20px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:13px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:var(--v88-radius)!important;
  color:var(--v88-grey)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.035),transparent 38%),
    linear-gradient(160deg,var(--v88-card),var(--v88-card-deep))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 12px 28px rgba(0,0,0,.24)!important;
  filter:none!important;
  opacity:1!important;
  transform:translateY(0) scale(1)!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:
    transform 180ms cubic-bezier(.2,.8,.2,1),
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    background 180ms ease!important;
}
#viewMain .hubModuleTile.menuModuleCard::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  display:block!important;
  pointer-events:none!important;
  opacity:0!important;
  background:radial-gradient(70% 85% at 50% 0%,rgba(239,197,84,.11),transparent 74%)!important;
  transition:opacity 180ms ease!important;
}
#viewMain .hubModuleTile.menuModuleCard:hover,
#viewMain .hubModuleTile.menuModuleCard:focus-visible{
  transform:translateY(-3px)!important;
  border-color:rgba(255,255,255,.16)!important;
  color:#c8cacf!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 36px rgba(0,0,0,.31)!important;
  outline:0!important;
}
#viewMain .hubModuleTile.menuModuleCard:hover::before,
#viewMain .hubModuleTile.menuModuleCard:focus-visible::before{opacity:1!important}
#viewMain .hubModuleTile.menuModuleCard:focus-visible{
  outline:2px solid rgba(244,211,108,.82)!important;
  outline-offset:3px!important;
}
#viewMain .hubModuleTile.menuModuleCard:active{
  transform:translateY(1px) scale(.975)!important;
  transition-duration:150ms!important;
}

#viewMain .menuModuleCard .hubModuleIcon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 54px!important;
  width:54px!important;
  height:54px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:inherit!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
#viewMain .menuModuleCard .hubModuleIcon svg{
  display:block!important;
  width:46px!important;
  height:46px!important;
  color:inherit!important;
  stroke:currentColor!important;
  filter:none!important;
}
#viewMain .menuModuleCard .hubModuleLabel{
  position:static!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  clip:auto!important;
  white-space:nowrap!important;
  color:inherit!important;
  font:750 16px/1.15 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:-.01em!important;
  text-shadow:none!important;
}

/* Shop and an eligible Jobs card are the only gold module surfaces. */
#viewMain .hubPrimaryCard{
  min-height:158px!important;
  color:var(--v88-gold-hi)!important;
  border-color:rgba(231,186,67,.29)!important;
  background:
    radial-gradient(72% 110% at 50% -25%,rgba(231,186,67,.105),transparent 64%),
    linear-gradient(160deg,#18150f,#0d0c09)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,234,164,.055),
    0 14px 32px rgba(0,0,0,.27),
    0 0 0 1px rgba(231,186,67,.025)!important;
}
#viewMain .hubPrimaryCard .hubModuleIcon{
  width:62px!important;
  height:62px!important;
  flex-basis:62px!important;
}
#viewMain .hubPrimaryCard .hubModuleIcon svg{width:54px!important;height:54px!important}
#viewMain .hubPrimaryCard .hubModuleLabel{font-size:18px!important}
#viewMain .hubPrimaryCard:not(.launchAccessLocked):hover,
#viewMain .hubPrimaryCard:not(.launchAccessLocked):focus-visible{
  border-color:rgba(244,211,108,.55)!important;
  color:#ffe398!important;
  box-shadow:
    inset 0 1px 0 rgba(255,240,184,.08),
    0 18px 38px rgba(0,0,0,.34),
    0 0 22px rgba(231,186,67,.09)!important;
}
#viewMain .hubPrimaryCard.is-selected:not(.launchAccessLocked){
  animation:v88SelectedPulse 3.8s ease-in-out infinite!important;
}
@keyframes v88SelectedPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,234,164,.055),0 14px 32px rgba(0,0,0,.27),0 0 0 1px rgba(231,186,67,.025)}
  50%{box-shadow:inset 0 1px 0 rgba(255,234,164,.075),0 14px 32px rgba(0,0,0,.27),0 0 20px rgba(231,186,67,.105)}
}

/* Locked modules remain fully readable but clearly grey and inert. */
#viewMain .hubModuleTile.menuModuleCard.launchAccessLocked,
#viewMain .hubPrimaryCard.launchAccessLocked{
  cursor:not-allowed!important;
  opacity:1!important;
  filter:none!important;
  color:var(--v88-grey-muted)!important;
  border-color:rgba(255,255,255,.065)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),transparent 40%),
    linear-gradient(160deg,#18191b,#101113)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 24px rgba(0,0,0,.2)!important;
  animation:none!important;
}
#viewMain .hubModuleTile.menuModuleCard.launchAccessLocked::after{
  content:attr(data-launch-lock-label)!important;
  position:absolute!important;
  inset:10px 10px auto auto!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:22px!important;
  padding:4px 7px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:999px!important;
  color:#b6b8bc!important;
  background:rgba(36,38,41,.94)!important;
  box-shadow:none!important;
  font:800 9px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
}
#viewMain .hubModuleTile.menuModuleCard.launchAccessLocked:hover,
#viewMain .hubModuleTile.menuModuleCard.launchAccessLocked:focus-visible{
  transform:none!important;
  color:#85898f!important;
  border-color:rgba(255,255,255,.1)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 24px rgba(0,0,0,.2)!important;
}

/* Main Hub header: no Back/Home duplicates; identity remains Team | Recodet | RC. */
.topbar.topbarTwoRow.v76Hub,
.topbar.topbarTwoRow.v73Hub{
  height:72px!important;
  min-height:72px!important;
  background:
    radial-gradient(58% 150% at 50% -115%,rgba(231,186,67,.13),transparent 66%),
    linear-gradient(180deg,#0b0a07,#060604)!important;
  border-bottom-color:rgba(231,186,67,.15)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.24)!important;
}
.topbar.topbarTwoRow.v76Hub .globalBackBtn,
.topbar.topbarTwoRow.v73Hub .globalBackBtn,
.topbar.topbarTwoRow.v76Hub .compactHomeBtn,
.topbar.topbarTwoRow.v73Hub .compactHomeBtn{display:none!important}
.topbar.topbarTwoRow.v76Hub #pageTitle,
.topbar.topbarTwoRow.v73Hub #pageTitle{width:132px!important;max-width:132px!important}
.topbar.topbarTwoRow.v76Hub .v76BrandLetters,
.topbar.topbarTwoRow.v73Hub .v76BrandLetters{font-size:18px!important}

/* Desktop: permanent slim rail with evenly centred icons and no hover expansion. */
@media(min-width:981px){
  :root{--shell-sidebar:var(--v88-sidebar)!important}
  .appSidebar{
    width:var(--v88-sidebar)!important;
    padding:14px 10px!important;
    background:linear-gradient(180deg,#090907,#050504)!important;
    border-right:1px solid rgba(231,186,67,.13)!important;
    box-shadow:none!important;
    transition:none!important;
  }
  .appSidebar:hover{width:var(--v88-sidebar)!important}
  .sidebarBrand{
    min-height:55px!important;
    margin:0 0 12px!important;
    padding:0 0 13px!important;
    justify-content:center!important;
    border-bottom-color:rgba(231,186,67,.12)!important;
  }
  .sidebarLogo{
    width:44px!important;height:44px!important;flex-basis:44px!important;
    border-radius:14px!important;
    color:#171106!important;
    background:linear-gradient(145deg,var(--v88-gold-hi),var(--v88-gold) 62%,#a36e13)!important;
    box-shadow:0 8px 20px rgba(0,0,0,.25)!important;
  }
  .sidebarBrandText,.shellLabel{display:none!important;opacity:0!important}
  .sidebarNav{gap:8px!important;align-items:center!important}
  .shellNavItem,
  .appSidebar:hover .shellNavItem{
    width:54px!important;
    min-width:54px!important;
    height:54px!important;
    min-height:54px!important;
    padding:0!important;
    justify-content:center!important;
    border:1px solid transparent!important;
    border-radius:16px!important;
    color:#8d9095!important;
    background:transparent!important;
    box-shadow:none!important;
    transition:transform 180ms ease,color 180ms ease,background 180ms ease,border-color 180ms ease!important;
  }
  .shellNavItem:hover,.shellNavItem:focus-visible{
    transform:translateY(-2px)!important;
    color:#d0d2d5!important;
    background:#141516!important;
    border-color:rgba(255,255,255,.075)!important;
    outline:0!important;
  }
  .shellNavItem.active{
    color:#171106!important;
    background:linear-gradient(145deg,var(--v88-gold-hi),var(--v88-gold) 64%,#ad7717)!important;
    border-color:rgba(255,232,158,.34)!important;
    box-shadow:0 8px 18px rgba(0,0,0,.25)!important;
  }
  .shellIcon{width:27px!important;height:27px!important;flex-basis:27px!important}
  .shellIcon svg{width:26px!important;height:26px!important}
  .sidebarFooter{display:flex!important;justify-content:center!important;padding-top:12px!important;border-top-color:rgba(231,186,67,.12)!important}
  .topbar.topbarTwoRow{margin-left:var(--v88-sidebar)!important;width:calc(100% - var(--v88-sidebar))!important}
  main.content{margin-left:var(--v88-sidebar)!important}
}

/* Phone and tablet Hub: exactly two columns and one four-action bottom bar. */
@media(max-width:980px){
  body:has(#viewMain:not(.hidden)):not(.onboardingActive) main.content{
    min-height:calc(100vh - 60px)!important;
    padding:22px 14px calc(106px + env(safe-area-inset-bottom))!important;
    margin-left:0!important;
  }
  #viewMain{gap:14px!important}
  #viewMain .hubModulesHead{min-height:36px!important}
  #viewMain .hubModulesHead .sectionTitle{font-size:27px!important}
  #viewMain .hubPrimaryGrid,
  #viewMain .hubSecondaryGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  #viewMain .hubPrimaryCard{grid-column:span 1!important}
  #viewMain .hubModuleTile.menuModuleCard,
  #viewMain .hubPrimaryCard{
    min-height:128px!important;
    padding:16px 10px!important;
    gap:10px!important;
    border-radius:var(--v88-radius)!important;
  }
  #viewMain .menuModuleCard .hubModuleIcon,
  #viewMain .hubPrimaryCard .hubModuleIcon{
    width:54px!important;height:54px!important;flex-basis:54px!important;
  }
  #viewMain .menuModuleCard .hubModuleIcon svg,
  #viewMain .hubPrimaryCard .hubModuleIcon svg{width:46px!important;height:46px!important}
  #viewMain .menuModuleCard .hubModuleLabel,
  #viewMain .hubPrimaryCard .hubModuleLabel{font-size:15px!important}

  body:has(#viewMain:not(.hidden)):not(.onboardingActive) .mainMenuMobileNav{
    position:fixed!important;
    z-index:12020!important;
    left:max(10px,env(safe-area-inset-left))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    min-height:72px!important;
    padding:6px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:var(--v88-radius)!important;
    background:rgba(13,13,12,.96)!important;
    box-shadow:0 18px 42px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.035)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }
  .mainMenuMobileNav button{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    padding:6px 3px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    border:1px solid transparent!important;
    border-radius:15px!important;
    color:#8f9297!important;
    background:transparent!important;
    box-shadow:none!important;
    font:750 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    transition:transform 180ms ease,color 180ms ease,background 180ms ease,border-color 180ms ease!important;
  }
  .mainMenuMobileNav button:hover,.mainMenuMobileNav button:focus-visible{
    color:#d2d3d6!important;
    background:#191a1b!important;
    border-color:rgba(255,255,255,.07)!important;
    outline:0!important;
  }
  .mainMenuMobileNav button:active{transform:scale(.955)!important}
  .mainMenuMobileNav button.active{
    color:#171106!important;
    background:linear-gradient(145deg,var(--v88-gold-hi),var(--v88-gold) 64%,#ad7717)!important;
    border-color:rgba(255,232,158,.3)!important;
    box-shadow:inset 0 1px 0 rgba(255,247,213,.45),0 7px 16px rgba(0,0,0,.22)!important;
  }
  .mainMenuMobileNav button.launchAccessLocked{
    opacity:.48!important;
    filter:grayscale(1)!important;
    cursor:not-allowed!important;
  }
  .mainMenuMobileNav button.launchAccessLocked::after{display:none!important}
  .mainMobileNavIcon{display:grid!important;place-items:center!important;width:27px!important;height:27px!important}
  .mainMobileNavIcon svg{display:block!important;width:25px!important;height:25px!important}
  body:has(#viewMain:not(.hidden)) .chatFab,
  body:has(#viewMain:not(.hidden)) .switchModeFab{display:none!important}
}

@media(max-width:360px){
  body:has(#viewMain:not(.hidden)):not(.onboardingActive) main.content{padding-inline:10px!important}
  #viewMain .hubPrimaryGrid,#viewMain .hubSecondaryGrid{gap:9px!important}
  #viewMain .hubModuleTile.menuModuleCard,#viewMain .hubPrimaryCard{min-height:116px!important;padding:13px 7px!important;border-radius:18px!important}
  #viewMain .menuModuleCard .hubModuleIcon,#viewMain .hubPrimaryCard .hubModuleIcon{width:48px!important;height:48px!important;flex-basis:48px!important}
  #viewMain .menuModuleCard .hubModuleIcon svg,#viewMain .hubPrimaryCard .hubModuleIcon svg{width:41px!important;height:41px!important}
  #viewMain .menuModuleCard .hubModuleLabel,#viewMain .hubPrimaryCard .hubModuleLabel{font-size:14px!important}
  .mainMenuMobileNav button{font-size:10px!important}
}

@media(prefers-reduced-motion:reduce){
  #viewMain .hubModuleTile.menuModuleCard,
  #viewMain .hubModuleTile.menuModuleCard::before,
  .mainMenuMobileNav button,
  .shellNavItem{transition:none!important;animation:none!important}
}