:root {
  --brand: #04376f;
  --brand-light: #087cf0;
  --accent: #087cf0;
  --bg: #f5f8fc;
  --border: #dfe6ef;
  --text: #071b3c;
  --text-muted: #526783;
}

body { background: linear-gradient(120deg, #00172f 0%, #043b7c 55%, #087cf0 100%); }
.auth-brand {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(8,145,255,.24), transparent 28%),
    radial-gradient(circle at 80% 80%, rgba(8,124,240,.18), transparent 30%);
}
.auth-brand::after {
  content: '';
  position: absolute;
  right: -70px;
  bottom: -80px;
  width: 360px;
  height: 360px;
  opacity: .16;
  border: 1px solid #25a1ff;
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(8,124,240,.08), 0 0 0 140px rgba(8,124,240,.05);
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand-lockup { position: relative; width: 330px; height: 70px; margin-bottom: 22px; overflow: hidden; }
.auth-logo-white, .auth-logo-color { position: absolute; inset: 0; display: block; overflow: hidden; }
.auth-logo-white img { width: 330px; height: auto; filter: brightness(0) invert(1); }
.auth-logo-color { width: 67px; }
.auth-logo-color img { width: 330px; height: auto; filter: saturate(1.5) brightness(1.35); }
.auth-brand > p { max-width: 390px; font-size: .98rem; }
.feature { border-color: rgba(54,164,255,.25); background: rgba(1,27,60,.28); }
.feature-icon { color: #39a9ff; background: rgba(8,124,240,.18); }
.auth-panel { width: 500px; box-shadow: -12px 0 38px rgba(0,17,39,.22); }
.auth-panel h2 { color: #071b3c; font-size: 1.65rem; }
.btn-primary { background: linear-gradient(90deg, #0758bd, #087cf0); box-shadow: 0 5px 13px rgba(8,92,190,.22); }
.btn-primary:hover { background: linear-gradient(90deg, #043f89, #086bd0); }
@media (max-width: 768px) { .auth-panel { width: 100%; } }