/* UtiliNexus 2.8.45.8 — clean city-map login + darker brand */
#authScreen.auth-screen{
  position:fixed !important;
  inset:0 !important;
  z-index:50 !important;
  min-height:100vh !important;
  overflow:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.34fr) minmax(390px,470px) !important;
  align-items:center !important;
  gap:clamp(30px,4vw,72px) !important;
  padding:clamp(30px,4vw,66px) !important;
  background:#020711 url('assets/utilinexus-city-map-bg.png?v=28458') center 58%/cover no-repeat !important;
  isolation:isolate !important;
}
#authScreen.auth-screen::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,rgba(1,7,16,.46) 0%,rgba(2,9,19,.38) 48%,rgba(1,7,16,.72) 100%),
    linear-gradient(180deg,rgba(1,6,14,.18),rgba(1,6,14,.44)) !important;
}
#authScreen .auth-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:radial-gradient(circle at 46% 8%,rgba(20,87,174,.18),transparent 36%) !important;
}
#authScreen .auth-platform-story{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  z-index:2 !important;
  width:min(760px,100%) !important;
  max-width:none !important;
  max-height:none !important;
  overflow:visible !important;
  margin:0 !important;
  padding:clamp(27px,3vw,43px) !important;
  border:1px solid rgba(43,92,139,.62) !important;
  border-radius:25px !important;
  background:linear-gradient(145deg,rgba(3,14,27,.94),rgba(2,10,21,.88)) !important;
  backdrop-filter:blur(9px) !important;
  box-shadow:0 30px 88px rgba(0,0,0,.46) !important;
  color:#F8F8F8 !important;
  text-shadow:none !important;
}
#authScreen .auth-story-brand{display:block !important;margin:0 0 24px !important}
#authScreen .auth-story-brand img{
  display:block !important;
  width:min(570px,94%) !important;
  height:auto !important;
  filter:drop-shadow(0 12px 26px rgba(10,62,142,.18)) !important;
}
#authScreen .auth-story-brand>div{display:none !important}
#authScreen .auth-platform-story .eyebrow{
  margin:0 0 12px !important;
  color:#0056FC !important;
  letter-spacing:.13em !important;
}
#authScreen .auth-platform-story h2{
  margin:0 0 16px !important;
  max-width:690px !important;
  font-size:clamp(38px,4vw,62px) !important;
  line-height:.99 !important;
  letter-spacing:-.045em !important;
  color:#F8F8F8 !important;
}
#authScreen .auth-platform-story h2 span{color:#0056FC !important}
#authScreen .auth-platform-story>p{
  max-width:690px !important;
  margin:0 0 24px !important;
  color:#b9c8d6 !important;
  font-size:15px !important;
  line-height:1.65 !important;
}
#authScreen .auth-story-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:0 !important;
}
#authScreen .auth-story-grid>div{
  min-width:0 !important;
  min-height:132px !important;
  padding:15px !important;
  border:1px solid rgba(48,92,132,.56) !important;
  border-radius:15px !important;
  background:rgba(4,19,34,.84) !important;
}
#authScreen .auth-story-grid strong{
  display:block !important;
  margin:0 0 8px !important;
  color:#F8F8F8 !important;
  font-size:11px !important;
  line-height:1.35 !important;
}
#authScreen .auth-story-grid span{
  display:block !important;
  color:#9fb3c6 !important;
  font-size:11.5px !important;
  line-height:1.52 !important;
}
#authScreen .auth-story-footer{
  display:grid !important;
  gap:4px !important;
  margin:12px 0 0 !important;
  padding:12px 14px !important;
  border:0 !important;
  border-left:3px solid #0056FC !important;
  background:rgba(4,22,39,.86) !important;
}
#authScreen .auth-story-footer b{color:#0056FC !important;font-size:11px !important;letter-spacing:.08em !important}
#authScreen .auth-story-footer span{color:#9eb2c4 !important;font-size:10.5px !important;line-height:1.45 !important}
#authScreen .auth-card{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  z-index:3 !important;
  width:100% !important;
  max-width:470px !important;
  margin:0 !important;
  padding:34px !important;
  border-radius:24px !important;
  background:linear-gradient(145deg,rgba(5,19,34,.985),rgba(3,13,25,.98)) !important;
  border:1px solid rgba(50,92,128,.70) !important;
  backdrop-filter:blur(18px) !important;
  box-shadow:0 26px 74px rgba(0,0,0,.50) !important;
}
#authScreen #signInBtn{
  background:linear-gradient(90deg,#0056FC,#0064FF) !important;
  border-color:#0056FC !important;
}
#authScreen #signInBtn:hover{filter:brightness(1.08)}
#authScreen #signInBtn:disabled{opacity:.68;cursor:wait}
#authScreen .link-btn{color:#4E8FFF !important}
@media(max-width:1120px){
  #authScreen.auth-screen{
    grid-template-columns:1fr minmax(360px,430px) !important;
    gap:26px !important;
    padding:26px !important;
  }
  #authScreen .auth-story-grid{grid-template-columns:1fr !important}
  #authScreen .auth-story-grid>div{min-height:auto !important}
}
@media(max-width:840px){
  #authScreen.auth-screen{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding:20px !important;
    background-position:center bottom !important;
  }
  #authScreen .auth-platform-story{display:none !important}
  #authScreen .auth-card{max-width:470px !important}
}

/* 2.8.45.9 CRITICAL AUTH VISIBILITY FIX
   The app correctly adds .hidden after authentication.
   This rule must override the login layout's display:grid/flex !important rules. */
#authScreen.auth-screen.hidden{
  display:none !important;
}

/* 2.8.45.10 REFERENCE BRAND MATCH
   Branding only. Auth visibility behavior is intentionally untouched. */
#authScreen .auth-story-brand img[src*="utilinexus-reference-main-logo"]{
  max-height:150px !important;
  object-fit:contain !important;
}