/* Sub2API login: background and login panel only */
html,body,#app{min-height:100%;}
#app>div[class*="min-h-screen"]{position:relative;background:#07141f url("/manage-banner.jpg") center/cover fixed !important;}
#app>div[class*="min-h-screen"]>div[class*="bg-gradient-to-br"]{background:linear-gradient(180deg,rgba(3,15,27,.22),rgba(3,15,27,.58)) !important;}
#app .card-glass{background:transparent !important;}


/* Desktop login composition: branding left, form right. */
@media (min-width: 768px){
  #app>div[class*="min-h-screen"]>div[class*="relative z-10"]{
    max-width:64rem !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(360px,28rem) !important;
    grid-template-rows:auto auto auto !important;
    column-gap:5rem !important;
    align-items:center !important;
  }
  #app>div[class*="min-h-screen"]>div[class*="relative z-10"]>.mb-8.text-center{
    grid-column:1 !important;
    grid-row:1 / span 3 !important;
    align-self:center !important;
    text-align:left !important;
    margin-bottom:0 !important;
    transform:translateY(-56px) !important;
  }
  #app>div[class*="min-h-screen"]>div[class*="relative z-10"]>.mb-8.text-center>div[class*="inline-flex"]{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  #app>div[class*="min-h-screen"]>div[class*="relative z-10"]>.card-glass{
    grid-column:2 !important;
    grid-row:1 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:translateY(56px) !important;
  }
  #app>div[class*="min-h-screen"]>div[class*="relative z-10"]>.mt-6.text-center.text-sm{
    grid-column:2 !important;
    grid-row:2 !important;
  }
  #app>div[class*="min-h-screen"]>div[class*="relative z-10"]>.mt-8.text-center.text-xs{
    grid-column:2 !important;
    grid-row:3 !important;
  }
}
@media (max-width: 767px){
  #app>div[class*="min-h-screen"]>div[class*="relative z-10"]>.card-glass{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}


/* Improve contrast against the dark artwork without changing controls. */
#app>div[class*="min-h-screen"]>div[class*="relative z-10"]>.mb-8.text-center h1{
  color:#f5fffc !important;
  -webkit-text-fill-color:#f5fffc !important;
  text-shadow:0 2px 16px rgba(0,0,0,.45) !important;
}
#app>div[class*="min-h-screen"]>div[class*="relative z-10"]>.mb-8.text-center p{
  color:#e6f7f2 !important;
  text-shadow:0 1px 8px rgba(0,0,0,.55) !important;
}
#app .card-glass h2{color:#f7fffd !important;text-shadow:0 2px 10px rgba(0,0,0,.5) !important;}
#app .card-glass p{color:#e5f6f1 !important;text-shadow:0 1px 7px rgba(0,0,0,.5) !important;}
#app .card-glass label{color:#f1fbf8 !important;text-shadow:0 1px 5px rgba(0,0,0,.55) !important;}
#app>div[class*="min-h-screen"]>div[class*="relative z-10"]>.mt-6.text-center.text-sm,
#app>div[class*="min-h-screen"]>div[class*="relative z-10"]>.mt-6.text-center.text-sm p{
  color:#e8faf5 !important;text-shadow:0 1px 7px rgba(0,0,0,.55) !important;
}
#app>div[class*="min-h-screen"]>div[class*="relative z-10"]>.mt-6.text-center.text-sm a{
  color:#7ff2cf !important;text-shadow:0 1px 7px rgba(0,0,0,.55) !important;
}
#app>div[class*="min-h-screen"]>div[class*="relative z-10"]>.mt-8.text-center.text-xs{
  color:#d8eee8 !important;text-shadow:0 1px 7px rgba(0,0,0,.55) !important;
}