/* MARKETPRO_INTERNAL_UX_PRO_V2R10R31 */
body.mp-internal-ux-pro-v2r10r31{
  --mp31-accent:#63bcff;
  --mp31-cyan:#4ee1cf;
  --mp31-purple:#9d7cff;
  --mp31-focus:rgba(99,188,255,.42);
}

/* Active navigation */
body.mp-internal-ux-pro-v2r10r31 a[data-mp31-active="true"]{
  position:relative;
  color:#ffffff!important;
  background:
    linear-gradient(90deg,rgba(99,188,255,.18),rgba(157,124,255,.10))!important;
  box-shadow:
    inset 0 0 0 1px rgba(99,188,255,.16),
    0 8px 22px rgba(0,0,0,.13)!important;
}

body.mp-internal-ux-pro-v2r10r31 a[data-mp31-active="true"]::before{
  content:"";
  position:absolute;
  left:3px;
  top:22%;
  bottom:22%;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--mp31-accent),var(--mp31-cyan));
  box-shadow:0 0 14px rgba(78,225,207,.38);
}

/* Keyboard accessibility */
body.mp-internal-ux-pro-v2r10r31 :focus-visible{
  outline:2px solid var(--mp31-accent)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 5px rgba(99,188,255,.11)!important;
}

/* Better click/tap affordance */
body.mp-internal-ux-pro-v2r10r31 button,
body.mp-internal-ux-pro-v2r10r31 [role="button"],
body.mp-internal-ux-pro-v2r10r31 a[href]{
  -webkit-tap-highlight-color:transparent;
}

body.mp-internal-ux-pro-v2r10r31 button,
body.mp-internal-ux-pro-v2r10r31 [role="button"]{
  touch-action:manipulation;
}

/* Ripple */
.mp31-ripple-host{
  position:relative!important;
  overflow:hidden!important;
}

.mp31-ripple{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.34);
  transform:translate(-50%,-50%) scale(0);
  animation:mp31-ripple .55s ease-out forwards;
  z-index:999;
}

@keyframes mp31-ripple{
  to{
    transform:translate(-50%,-50%) scale(18);
    opacity:0;
  }
}

/* Route transition bar */
#mp31-route-progress{
  position:fixed;
  left:0;
  top:0;
  width:0;
  height:3px;
  z-index:2147483000;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,var(--mp31-accent),var(--mp31-purple),var(--mp31-cyan));
  box-shadow:0 0 18px rgba(99,188,255,.55);
  transition:width .28s ease,opacity .22s ease;
}

#mp31-route-progress[data-state="start"]{
  width:38%;
  opacity:1;
}
#mp31-route-progress[data-state="middle"]{
  width:78%;
  opacity:1;
}
#mp31-route-progress[data-state="done"]{
  width:100%;
  opacity:0;
}

/* Back to top */
#mp31-back-to-top{
  position:fixed;
  right:18px;
  bottom:58px;
  z-index:99990;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0!important;
  border:1px solid rgba(99,188,255,.22)!important;
  border-radius:13px!important;
  color:#eaf5ff!important;
  background:rgba(11,24,45,.88)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 30px rgba(0,0,0,.22)!important;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease!important;
}

#mp31-back-to-top[data-visible="true"]{
  opacity:1;
  visibility:visible;
  transform:none;
}

#mp31-back-to-top:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(78,225,207,.45)!important;
  box-shadow:0 16px 36px rgba(0,0,0,.28),0 0 20px rgba(78,225,207,.08)!important;
}

/* Soft page entrance after route changes */
body.mp-internal-ux-pro-v2r10r31 main.mp31-page-enter{
  animation:mp31-page-enter .28s ease-out both;
}

@keyframes mp31-page-enter{
  from{opacity:.82;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

/* Mobile ergonomics */
@media (max-width:760px){
  body.mp-internal-ux-pro-v2r10r31 button,
  body.mp-internal-ux-pro-v2r10r31 [role="button"],
  body.mp-internal-ux-pro-v2r10r31 nav a,
  body.mp-internal-ux-pro-v2r10r31 aside a{
    min-height:42px;
  }

  #mp31-back-to-top{
    right:10px;
    bottom:54px;
  }
}

@media (prefers-reduced-motion:reduce){
  .mp31-ripple{display:none!important}
  #mp31-route-progress{transition:none!important}
  body.mp-internal-ux-pro-v2r10r31 main.mp31-page-enter{animation:none!important}
}