* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   font-family: 'Roboto', sans-serif;
   background-color: #0F172A;
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
   position: relative;
   overflow: hidden;
 }

 body::before {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
     radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
     radial-gradient(circle at 50% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
   z-index: 0;
 }

 body::after {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-image: linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
     linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
   background-size: 60px 60px;
   z-index: 0;
 }

 #animationCanvas {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   pointer-events: none;
 }

 body>* {
   position: relative;
   z-index: 1;
 }

 .auth-container {
   background: #000000;
   border-radius: 16px;
   border: 1px solid rgba(59, 130, 246, 0.2);
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
     0 0 0 1px rgba(255, 255, 255, 0.05),
     0 0 40px rgba(59, 130, 246, 0.1);
   width: 100%;
   max-width: 450px;
   padding: 48px;
   position: relative;
   overflow: hidden;
 }

 .auth-container::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 16px;
   padding: 1px;
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3), rgba(16, 185, 129, 0.3));
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   mask-composite: exclude;
   pointer-events: none;
   animation: border-glow 3s infinite;
 }

 @keyframes border-glow {

   0%,
   100% {
     opacity: 0.5;
   }

   50% {
     opacity: 1;
   }
 }

 .auth-header {
   text-align: center;
   margin-bottom: 30px;
 }

 .logo {
   font-size: 32px;
   font-weight: 900;
   background: linear-gradient(135deg, #3B82F6, #8B5CF6);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 10px;
 }

 h1 {
   font-size: 28px;
   color: #FFFFFF;
   margin-bottom: 8px;
   font-weight: 700;
 }

 .auth-subtitle {
   color: #94A3B8;
   font-size: 15px;
 }

 .form-group {
   margin-bottom: 20px;
 }

 label {
   display: block;
   margin-bottom: 8px;
   color: #E0E0E0;
   font-weight: 500;
   font-size: 14px;
 }

 input[type="email"],
 input[type="password"] {
   width: 100%;
   padding: 14px 16px;
   background: #1E293B;
   border: 1px solid #334155;
   border-radius: 8px;
   font-size: 15px;
   color: #FFFFFF;
   transition: all 0.3s ease;
 }

 input[type="email"]::placeholder,
 input[type="password"]::placeholder {
   color: #64748B;
 }

 input[type="email"]:focus,
 input[type="password"]:focus {
   outline: none;
   border-color: #3B82F6;
   background: #0F172A;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1),
     0 0 20px rgba(59, 130, 246, 0.2);
 }

 .submit-btn {
   width: 100%;
   padding: 14px;
   background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
   color: white;
   border: none;
   border-radius: 8px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
   position: relative;
   overflow: hidden;
 }

 .submit-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s;
 }

 .submit-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
 }

 .submit-btn:hover::before {
   left: 100%;
 }

 .submit-btn:active {
   transform: translateY(0);
 }

 .error-message {
   color: #e74c3c;
   font-size: 14px;
   margin-top: 5px;
   display: none;
 }

 .success-message {
   color: #27ae60;
   font-size: 14px;
   margin-top: 5px;
   display: none;
 }

 .auth-footer {
   text-align: center;
   margin-top: 24px;
   color: #94A3B8;
   font-size: 14px;
 }

 .auth-footer a {
   color: #3B82F6;
   text-decoration: none;
   font-weight: 600;
   transition: all 0.3s;
   position: relative;
 }

 .auth-footer a:hover {
   color: #8B5CF6;
 }

 .loading {
   display: none;
   text-align: center;
   color: #3B82F6;
   margin-top: 10px;
 }

 .spinner {
   border: 3px solid rgba(59, 130, 246, 0.2);
   border-top: 3px solid #3B82F6;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   animation: spin 1s linear infinite;
   margin: 0 auto 10px;
 }

 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }