:root {
     --primary-color: #facc15; 
     --secondary-color: #fde047; 
     --success-color: #22c55e;
     --error-color: #ef4444;
     --background-dark: #0b2e0e; 
 }



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

 body {
     font-family: 'Segoe UI', sans-serif;
     background: linear-gradient(45deg, var(--background-dark), #42ba56);
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow-x: hidden;
 }

 /* Animated background */
 .animated-background {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     overflow: hidden;
 }

 .animated-background span {
     position: absolute;
     display: block;
     width: 20px;
     height: 20px;
     background: rgba(255, 255, 255, 0.1);
     animation: move 3s linear infinite;
     border-radius: 50%;
 }

 @keyframes move {
     0% {
         transform: translateY(100vh) scale(0);
     }

     100% {
         transform: translateY(-100vh) scale(1);
     }
 }

 .container {
     width: 100%;
     max-width: 480px;
     padding: 2rem;
     perspective: 1000px;
 }

 .logo {
     text-align: center;
     margin-bottom: 2rem;
     animation: logoFloat 6s ease-in-out infinite;
 }

 @keyframes logoFloat {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-20px);
     }
 }

 .logo img {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 }

 .card {
     background: rgb(0 0 0);
     backdrop-filter: blur(12px);
     border-radius: 24px;
     padding: 1.5rem;
     box-shadow: 0 8px 32px rgba(135, 104, 31, 0.37);
     border: 1px solid rgba(255, 255, 255, 0.18);
     transform-style: preserve-3d;
     transition: transform 0.6s ease;
     animation: cardEntrance 1s ease-out;
 }

 @keyframes cardEntrance {
     from {
         opacity: 0;
         transform: rotateX(-10deg) translateY(100px);
     }

     to {
         opacity: 1;
         transform: rotateX(0) translateY(0);
     }
 }

 .form-title {
     color: white;
     /*font-size: 1.8rem;*/
     margin-bottom: 1rem;
     text-align: center;
     position: relative;
     animation: titleGlow 2s ease-in-out infinite;
 }

 @keyframes titleGlow {

     0%,
     100% {
         text-shadow: 0 0 10px rgba(79, 70, 229, 0.5);
     }

     50% {
         text-shadow: 0 0 20px rgba(79, 70, 229, 0.8);
     }
 }

 .form-group {
     position: relative;
     margin-bottom: 1.8rem;
     transform-style: preserve-3d;
 }

 .form-control {
     width: 100%;
     padding: 1rem 0rem 1rem 3rem;
     border: none;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.08);
     color: white;
     font-size: 1rem;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     transform: translateZ(0);
 }

 .form-control:focus {
     outline: none;
     background: rgba(255, 255, 255, 0.15);
     box-shadow: 0 0 0 2px var(--secondary-color);
     transform: translateZ(10px);
 }

 .form-group i {
     position: absolute;
     left: 1rem;
     top: 50%;
     transform: translateY(-50%);
     color: rgba(255, 255, 255, 0.7);
     transition: all 0.4s ease;
     pointer-events: none;
 }

 .form-control:focus+i {
     color: var(--secondary-color);
     transform: translateY(-50%) scale(1.2);
 }

 .btn-submit {
     width: 100%;
     padding: 1.2rem;
     border: none;
     border-radius: 12px;
     background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
     color: white;
     font-size: 1.1rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
 }

 .btn-submit:before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     transition: width 0.6s ease, height 0.6s ease;
 }

 .btn-submit:hover:before {
     width: 300px;
     height: 300px;
 }

 .login-link {
     text-align: center;
     margin-top: 2rem;
     color: white;
     font-size: 1rem;
     opacity: 0.9;
 }

 .login-link a {
     color: var(--secondary-color);
     text-decoration: none;
     font-weight: 600;
     margin-left: 0.5rem;
     position: relative;
     transition: all 0.3s ease;
 }

 .login-link a:after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -2px;
     left: 0;
     background: var(--secondary-color);
     transition: width 0.3s ease;
 }

 .login-link a:hover:after {
     width: 100%;
 }

 .support-btn {
     display: inline-flex;
     align-items: center;
     padding: 0.8rem 1.5rem;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     color: white;
     text-decoration: none;
     margin-top: 1.5rem;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .support-btn i {
     margin-right: 0.8rem;
     transition: transform 0.3s ease;
 }

 .support-btn:hover i {
     transform: rotate(360deg);
 }

 .support-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.6s ease;
 }

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

 /* Success/Error States */
 .form-group.success .form-control {
     border: 2px solid var(--success-color);
     background: rgba(34, 197, 94, 0.1);
 }

 .form-group.error .form-control {
     border: 2px solid var(--error-color);
     background: rgba(239, 68, 68, 0.1);
 }

 .error-message {
     color: var(--error-color);
     font-size: 0.85rem;
     margin-top: 0.5rem;
     display: none;
     animation: fadeIn 0.3s ease;
 }

 .form-group.error .error-message {
     display: block;
 }

 /* Loading Animation */
 .loading {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: none;
 }

 .loading.active {
     display: block;
 }

 .loading span {
     display: inline-block;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: white;
     margin: 0 3px;
     animation: dots 1s infinite ease-in-out;
 }

 .loading span:nth-child(2) {
     animation-delay: 0.2s;
 }

 .loading span:nth-child(3) {
     animation-delay: 0.4s;
 }

 @keyframes dots {

     0%,
     100% {
         transform: scale(0.3);
     }

     50% {
         transform: scale(1);
     }
 }

 /* Success Animation */
 .success-checkmark {
     display: none;
     animation: checkmark 0.8s cubic-bezier(0.65, 0, 0.45, 1) forwards;
 }

 @keyframes checkmark {
     0% {
         transform: scale(0);
     }

     100% {
         transform: scale(1);
     }
 }