.brand-logo-official {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

.sidebar .brand-logo-official {
  max-width: 235px !important;
  margin: 0 auto 16px !important;
  border-radius: 18px !important;
  filter: drop-shadow(0 18px 32px rgba(0, 92, 255, .26)) !important;
}

.auth-shell {
  position: relative !important;
  min-height: 100vh !important;
  isolation: isolate !important;
  grid-template-columns: minmax(520px, 1.12fr) minmax(430px, .88fr) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(30, 110, 255, .22), transparent 26%),
    radial-gradient(circle at 88% 22%, rgba(16, 180, 174, .18), transparent 25%),
    radial-gradient(circle at 66% 88%, rgba(8, 24, 40, .12), transparent 28%),
    linear-gradient(135deg, #f8fbff 0%, #edf6fb 42%, #e7eef5 100%) !important;
}

.auth-shell::before,
.auth-shell::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.auth-shell::before {
  inset: -18% -12% auto auto !important;
  width: 54vw !important;
  height: 54vw !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle, rgba(31, 111, 255, .22), rgba(31, 111, 255, 0) 64%),
    conic-gradient(from 120deg, rgba(16, 180, 174, .24), rgba(31, 111, 255, .18), transparent 62%) !important;
  filter: blur(4px) !important;
  animation: sgm-aurora 16s ease-in-out infinite alternate !important;
}

.auth-shell::after {
  inset: 0 !important;
  background:
    linear-gradient(rgba(18, 43, 72, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 43, 72, .045) 1px, transparent 1px) !important;
  background-size: 54px 54px !important;
  mask-image: radial-gradient(circle at 48% 46%, rgba(0,0,0,.82), transparent 74%) !important;
}

.auth-visual {
  position: relative !important;
  min-height: 100vh !important;
  padding: clamp(32px, 4.4vw, 72px) !important;
  overflow: hidden !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(30px, 5vh, 70px) !important;
  background:
    radial-gradient(circle at 48% 25%, rgba(44, 113, 255, .36), transparent 24%),
    radial-gradient(circle at 14% 82%, rgba(16, 180, 174, .28), transparent 30%),
    linear-gradient(143deg, #071423 0%, #0c2544 48%, #050b14 100%) !important;
}

.auth-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.12), transparent 26%, rgba(255,255,255,.04) 50%, transparent 78%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 88px) !important;
  opacity: .86 !important;
}

.auth-visual::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 8% 5% 8% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(136, 210, 255, .62), transparent) !important;
  box-shadow: 0 0 34px rgba(36, 111, 255, .46) !important;
}

.auth-visual > * {
  position: relative !important;
  z-index: 2 !important;
}

.auth-neural-field {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: .72 !important;
}

.auth-neural-field span {
  position: absolute !important;
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #8bd8ff !important;
  box-shadow: 0 0 28px rgba(80, 158, 255, .9), 0 0 80px rgba(16, 180, 174, .34) !important;
  animation: sgm-node-pulse 3.8s ease-in-out infinite !important;
}

.auth-neural-field span:nth-child(1) { top: 18%; left: 16%; animation-delay: .2s !important; }
.auth-neural-field span:nth-child(2) { top: 28%; right: 18%; animation-delay: 1.1s !important; }
.auth-neural-field span:nth-child(3) { left: 12%; bottom: 22%; animation-delay: 1.9s !important; }
.auth-neural-field span:nth-child(4) { right: 24%; bottom: 16%; animation-delay: 2.6s !important; }

.auth-brand {
  width: min(100%, 760px) !important;
  padding: clamp(20px, 3vw, 36px) !important;
  border-radius: 34px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(244,248,252,.9)),
    radial-gradient(circle at 50% 14%, rgba(41, 108, 255, .16), transparent 48%) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.86) !important;
  backdrop-filter: blur(22px) !important;
  animation: sgm-card-rise .9s ease both !important;
}

.auth-brand-logo {
  max-width: min(680px, 100%) !important;
  margin: 0 auto 12px !important;
  border-radius: 28px !important;
  filter: drop-shadow(0 26px 42px rgba(14, 55, 120, .24)) drop-shadow(0 0 34px rgba(35, 106, 255, .16)) !important;
}

.auth-brand .brand-eyebrow,
.auth-brand h1,
.auth-brand .brand-copy {
  display: none !important;
}

.auth-story {
  width: min(100%, 790px) !important;
  margin-top: auto !important;
  display: grid !important;
  gap: 22px !important;
  animation: sgm-card-rise 1s ease .1s both !important;
}

.auth-story .eyebrow {
  color: #8bd8ff !important;
  opacity: 1 !important;
  letter-spacing: .22em !important;
}

.auth-story h2 {
  max-width: 820px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-family: "Bahnschrift", "Trebuchet MS", sans-serif !important;
  font-size: clamp(2.5rem, 5.3vw, 5.8rem) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance !important;
}

.auth-story p:not(.eyebrow) {
  max-width: 720px !important;
  margin: 0 !important;
  color: rgba(238, 247, 255, .82) !important;
  font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
  line-height: 1.72 !important;
}

.auth-ai-statement {
  width: min(100%, 720px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, rgba(16, 180, 174, .20), rgba(41, 108, 255, .20)), rgba(255, 255, 255, .075) !important;
  border: 1px solid rgba(157, 222, 255, .25) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .18) !important;
}

.auth-ai-statement span {
  width: 62px !important;
  height: 62px !important;
  border-radius: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  background: linear-gradient(135deg, #10b4ae, #246fff) !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  box-shadow: 0 18px 42px rgba(36, 111, 255, .34) !important;
}

.auth-ai-statement strong { color: #ffffff !important; line-height: 1.35 !important; }

.auth-highlights {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.auth-highlights div {
  min-height: 152px !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .085) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.auth-highlights span {
  width: 48px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #10b4ae, #246fff) !important;
  color: #ffffff !important;
  font-weight: 950 !important;
}

.auth-highlights strong { color: #ffffff !important; }
.auth-highlights small { color: rgba(238, 247, 255, .72) !important; line-height: 1.45 !important; }

.auth-signal-strip {
  width: min(100%, 760px) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.auth-signal-strip span {
  padding: 10px 14px !important;
  border-radius: 999px !important;
  color: #dcecff !important;
  font-size: .82rem !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
  background: rgba(255, 255, 255, .085) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
}

.auth-main {
  position: relative !important;
  padding: clamp(82px, 9vh, 116px) clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px) !important;
  justify-content: flex-start !important;
  background: radial-gradient(circle at 32% 14%, rgba(41, 108, 255, .12), transparent 28%), radial-gradient(circle at 86% 84%, rgba(16, 180, 174, .14), transparent 34%) !important;
}

.auth-main::before {
  content: "SGM AI CORE" !important;
  position: absolute !important;
  top: 28px !important;
  right: 34px !important;
  color: rgba(20, 38, 61, .30) !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  letter-spacing: .22em !important;
}

.auth-card.login-card {
  position: relative !important;
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  padding: clamp(28px, 3.2vw, 42px) !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,251,253,.88)), radial-gradient(circle at 22% 0%, rgba(36, 111, 255, .14), transparent 36%) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: 0 34px 90px rgba(8, 24, 40, .18), inset 0 1px 0 rgba(255,255,255,.9) !important;
  backdrop-filter: blur(24px) !important;
  animation: sgm-card-rise .9s ease .16s both !important;
}

.auth-card.login-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 5px !important;
  background: linear-gradient(90deg, #10b4ae, #246fff, #0b2542) !important;
}

.auth-card-head .eyebrow { color: #0c6c95 !important; opacity: 1 !important; letter-spacing: .18em !important; }
.auth-card-head h2 { color: #10233d !important; font-size: clamp(2.15rem, 4vw, 3.35rem) !important; letter-spacing: -.04em !important; }
.auth-card-head p:last-child { color: #5f728b !important; font-size: 1.02rem !important; }

.login-intelligence-panel {
  display: grid !important;
  gap: 5px !important;
  margin: 22px 0 !important;
  padding: 16px 18px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(16, 180, 174, .12), rgba(36, 111, 255, .11)), rgba(255,255,255,.64) !important;
  border: 1px solid rgba(16, 180, 174, .18) !important;
}

.login-intelligence-panel span { color: #008b93 !important; font-size: .72rem !important; font-weight: 950 !important; letter-spacing: .16em !important; text-transform: uppercase !important; }
.login-intelligence-panel strong { color: #10233d !important; font-size: 1.02rem !important; }
.login-intelligence-panel small { color: #60738a !important; line-height: 1.45 !important; }

.login-card .auth-form { gap: 16px !important; }
.login-card .auth-form label { color: #314760 !important; font-weight: 850 !important; }
.login-card .auth-form input {
  min-height: 56px !important;
  border-radius: 18px !important;
  background: rgba(244, 248, 252, .88) !important;
  border: 1px solid rgba(20, 38, 61, .13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.login-card .auth-form input:focus { border-color: rgba(36, 111, 255, .55) !important; box-shadow: 0 0 0 4px rgba(36, 111, 255, .12), inset 0 1px 0 rgba(255,255,255,.92) !important; }
.login-card .button-primary { min-height: 58px !important; border-radius: 20px !important; background: linear-gradient(135deg, #10b4ae, #174b82) !important; box-shadow: 0 22px 48px rgba(16, 180, 174, .25) !important; }
.login-card .button-ghost { justify-content: center !important; min-height: 48px !important; }

@keyframes sgm-aurora { from { transform: translate3d(0, 0, 0) scale(1); opacity: .78; } to { transform: translate3d(-5%, 4%, 0) scale(1.08); opacity: 1; } }
@keyframes sgm-node-pulse { 0%, 100% { transform: scale(.86); opacity: .52; } 50% { transform: scale(1.28); opacity: 1; } }
@keyframes sgm-card-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1180px) {
  .auth-shell { grid-template-columns: 1fr !important; }
  .auth-visual { min-height: auto !important; }
  .auth-main { padding: clamp(30px, 5vw, 52px) !important; }
  .auth-highlights { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
  .auth-visual,
  .auth-main { padding: 22px !important; }
  .auth-brand,
  .auth-card.login-card { border-radius: 26px !important; }
  .auth-story h2 { font-size: clamp(2.1rem, 12vw, 3.4rem) !important; }
  .auth-ai-statement { align-items: flex-start !important; }
  .auth-main::before { display: none !important; }
}