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

 body {
     font-family: 'Times New Roman', Times, serif !important;
     background: #0a0a0a;
     min-height: 100vh;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
     position: relative;
 }

 /* Advanced Animated Background */
 .animated-bg {
     position: fixed;
     inset: 0;
     z-index: 0;
     background:
         radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 75% 75%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
         radial-gradient(circle at 50% 50%, rgba(184, 134, 11, 0.05) 0%, transparent 50%);
 }

 .particles {
     position: absolute;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }

 .particle {
     position: absolute;
     background: rgba(212, 175, 55, 0.3);
     border-radius: 50%;
     pointer-events: none;
     animation: float-particle 20s infinite linear;
 }

 .particle:nth-child(1) {
     width: 4px;
     height: 4px;
     left: 10%;
     animation-delay: 0s;
 }

 .particle:nth-child(2) {
     width: 6px;
     height: 6px;
     left: 20%;
     animation-delay: 2s;
 }

 .particle:nth-child(3) {
     width: 3px;
     height: 3px;
     left: 30%;
     animation-delay: 4s;
 }

 .particle:nth-child(4) {
     width: 5px;
     height: 5px;
     left: 40%;
     animation-delay: 6s;
 }

 .particle:nth-child(5) {
     width: 2px;
     height: 2px;
     left: 50%;
     animation-delay: 8s;
 }

 .particle:nth-child(6) {
     width: 4px;
     height: 4px;
     left: 60%;
     animation-delay: 10s;
 }

 .particle:nth-child(7) {
     width: 3px;
     height: 3px;
     left: 70%;
     animation-delay: 12s;
 }

 .particle:nth-child(8) {
     width: 6px;
     height: 6px;
     left: 80%;
     animation-delay: 14s;
 }

 .particle:nth-child(9) {
     width: 2px;
     height: 2px;
     left: 90%;
     animation-delay: 16s;
 }

 @keyframes float-particle {
     0% {
         transform: translateY(100vh) rotate(0deg);
         opacity: 0;
     }

     10% {
         opacity: 1;
     }

     90% {
         opacity: 1;
     }

     100% {
         transform: translateY(-10vh) rotate(360deg);
         opacity: 0;
     }
 }

 /* Geometric shapes background */
 .geometric-bg {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0.03;
 }

 .geo-shape {
     position: absolute;
     border: 1px solid #d4af37;
     animation: rotate-geo 30s infinite linear;
 }

 .geo-shape:nth-child(1) {
     width: clamp(100px, 20vw, 200px);
     height: clamp(100px, 20vw, 200px);
     top: 10%;
     left: 80%;
     transform: rotate(45deg);
     animation-delay: 0s;
 }

 .geo-shape:nth-child(2) {
     width: clamp(80px, 15vw, 150px);
     height: clamp(80px, 15vw, 150px);
     top: 70%;
     left: 10%;
     border-radius: 50%;
     animation-delay: 5s;
 }

 .geo-shape:nth-child(3) {
     width: clamp(60px, 10vw, 100px);
     height: clamp(60px, 10vw, 100px);
     top: 20%;
     left: 20%;
     clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     animation-delay: 10s;
 }

 @keyframes rotate-geo {
     0% {
         transform: rotate(0deg) scale(1);
     }

     50% {
         transform: rotate(180deg) scale(1.1);
     }

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

 .login-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
     min-height: 100vh;
     width: 100%;
     position: relative;
     z-index: 10;
 }

 .login-left {
     background:
         linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(42, 42, 42, 0.9) 100%);
     backdrop-filter: blur(20px);
     border-right: 1px solid rgba(212, 175, 55, 0.2);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: clamp(30px, 6vw, 60px) clamp(20px, 5vw, 40px);
     position: relative;
     overflow: hidden;
     min-height: clamp(300px, 40vh, 100vh);
 }

 .login-left::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background:
         radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
     animation: rotate-gradient 20s linear infinite;
 }

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

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

 .brand-logo {
     position: relative;
     z-index: 3;
     text-align: center;
     animation: slideInFromLeft 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }

 @keyframes slideInFromLeft {
     0% {
         opacity: 0;
         transform: translateX(-200px) scale(0.5);
     }

     100% {
         opacity: 1;
         transform: translateX(0) scale(1);
     }
 }

 .logo-container {
     position: relative;
     margin-bottom: clamp(15px, 3vw, 30px);
 }

 .logo-icon {
     width: clamp(70px, 12vw, 120px);
     height: clamp(70px, 12vw, 120px);
     background:
         linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%);
     border-radius: clamp(15px, 3vw, 30px);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: clamp(28px, 6vw, 48px);
     margin: 0 auto;
     backdrop-filter: blur(10px);
     border: 2px solid rgba(212, 175, 55, 0.3);
     transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     color: #d4af37;
     position: relative;
     overflow: hidden;
 }

 .logo-icon::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(45deg, transparent, rgba(212, 175, 55, 0.1), transparent);
     transition: transform 0.6s;
     transform: translateX(-100%);
 }

 .logo-icon:hover::before {
     transform: translateX(100%);
 }

 .logo-icon:hover {
     transform: scale(1.1) rotate(5deg);
     background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(255, 215, 0, 0.2) 100%);
     box-shadow: 0 20px 40px rgba(212, 175, 55, 0.3);
 }

 .brand-title {
     font-size: clamp(22px, 4.5vw, 36px);
     font-weight: 800;
     margin-bottom: clamp(8px, 2vw, 16px);
     letter-spacing: -0.02em;
     background: linear-gradient(135deg, #d4af37 0%, #ffd700 50%, #b8860b 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: fadeInUp 1s ease-out 0.3s both;
     text-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
 }

 .brand-subtitle {
     font-size: clamp(14px, 2vw, 18px);
     opacity: 0.9;
     line-height: 1.6;
     max-width: min(90%, 320px);
     color: #e5e5e5;
     animation: fadeInUp 1s ease-out 0.6s both;
     text-align: center;
     margin: 0 auto;
     letter-spacing: 0.02em;
     padding: 0 clamp(10px, 2vw, 20px);
 }

 @keyframes fadeInUp {
     0% {
         opacity: 0;
         transform: translateY(50px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .login-right {
     padding: clamp(30px, 6vw, 60px) clamp(20px, 5vw, 50px);
     display: flex;
     flex-direction: column;
     justify-content: center;
     background:
         linear-gradient(135deg, rgba(42, 42, 42, 0.95) 0%, rgba(26, 26, 26, 0.9) 100%);
     backdrop-filter: blur(20px);
     position: relative;
     min-height: clamp(500px, 60vh, 100vh);
 }

 .login-right::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
         radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
     pointer-events: none;
 }

 .login-form {
     position: relative;
     z-index: 2;
     max-width: min(100%, 400px);
     margin: 0 auto;
     width: 100%;
 }

 .login-header {
     margin-bottom: clamp(30px, 6vw, 50px);
     text-align: center;
     animation: fadeInDown 1s ease-out;
 }

 @keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translateY(-30px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .login-header h2 {
     font-size: clamp(24px, 5vw, 36px);
     font-weight: 800;
     color: #ffffff;
     margin-bottom: clamp(8px, 2vw, 12px);
     letter-spacing: -0.02em;
     background: linear-gradient(135deg, #ffffff 0%, #e5e5e5 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .login-subtitle {
     color: #a3a3a3;
     font-size: clamp(14px, 2vw, 16px);
     font-weight: 400;
 }

 .form-group {
     margin-bottom: clamp(20px, 4vw, 30px);
     position: relative;
     animation: slideInRight 0.8s ease-out;
     animation-fill-mode: both;
 }

 .form-group:nth-child(1) {
     animation-delay: 0.2s;
 }

 .form-group:nth-child(2) {
     animation-delay: 0.4s;
 }

 @keyframes slideInRight {
     0% {
         opacity: 0;
         transform: translateX(50px);
     }

     100% {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .form-group label {
     display: block;
     font-size: clamp(12px, 2vw, 14px);
     font-weight: 600;
     color: #d4af37;
     margin-bottom: clamp(8px, 2vw, 12px);
     letter-spacing: 0.02em;
     text-transform: uppercase;
 }

 .input-container {
     position: relative;
     overflow: hidden;
     border-radius: clamp(12px, 2vw, 16px);
 }

 .input-container::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
     transition: left 0.6s;
     z-index: 1;
 }

 .form-group input:focus+.input-container::before {
     left: 100%;
 }

 .form-group input {
     width: 100%;
     padding: clamp(14px, 3vw, 20px) clamp(18px, 4vw, 24px);
     border: 2px solid #404040;
     border-radius: clamp(12px, 2vw, 16px);
     font-size: clamp(14px, 2vw, 16px);
     background: rgba(58, 58, 58, 0.8);
     backdrop-filter: blur(10px);
     transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     font-family: inherit;
     color: #ffffff;
     position: relative;
     z-index: 2;
 }

 .form-group input:focus {
     outline: none;
     border-color: #d4af37;
     box-shadow:
         0 0 0 4px rgba(212, 175, 55, 0.1),
         0 10px 30px rgba(212, 175, 55, 0.2);
     transform: translateY(-2px);
     background: rgba(68, 68, 68, 0.9);
 }

 .form-group input::placeholder {
     color: #888888;
     transition: color 0.3s;
 }

 .form-group input:focus::placeholder {
     color: #aaaaaa;
 }

 .password-group {
     position: relative;
 }

 .toggle-password {
     position: absolute;
     right: clamp(12px, 3vw, 20px);
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
     color: #888888;
     font-size: clamp(16px, 2.5vw, 18px);
     padding: clamp(6px, 1.5vw, 8px);
     transition: all 0.3s ease;
     z-index: 3;
 }

 .toggle-password:hover {
     color: #d4af37;
     transform: translateY(-50%) scale(1.1);
 }

 .forgot-password {
     text-align: right;
     margin-bottom: clamp(20px, 4vw, 30px);
     animation: fadeIn 0.8s ease-out 0.6s both;
 }

 .forgot-password a {
     color: #d4af37;
     text-decoration: none;
     font-size: clamp(12px, 2vw, 14px);
     font-weight: 500;
     transition: all 0.3s ease;
     position: relative;
 }

 .forgot-password a::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 2px;
     background: linear-gradient(90deg, #d4af37, #ffd700);
     transition: width 0.3s ease;
 }

 .forgot-password a:hover::after {
     width: 100%;
 }

 .forgot-password a:hover {
     color: #ffd700;
 }

 .terms-checkbox {
     display: flex;
     align-items: flex-start;
     margin-bottom: clamp(25px, 5vw, 40px);
     gap: clamp(10px, 2vw, 16px);
     animation: fadeIn 0.8s ease-out 0.8s both;
 }

 .terms-checkbox input[type="checkbox"] {
     min-width: clamp(18px, 3vw, 20px);
     min-height: clamp(18px, 3vw, 20px);
     accent-color: #d4af37;
     margin-top: clamp(2px, 0.5vw, 4px);
     cursor: pointer;
     transition: transform 0.2s ease;
 }

 .terms-checkbox input[type="checkbox"]:checked {
     transform: scale(1.1);
 }

 .terms-checkbox label {
     font-size: clamp(12px, 2vw, 14px);
     color: #a3a3a3;
     line-height: 1.6;
     margin: 0;
     cursor: pointer;
 }

 .terms-checkbox a {
     color: #d4af37;
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s ease;
 }

 .terms-checkbox a:hover {
     color: #ffd700;
 }

 .login-button {
     width: 100%;
     padding: clamp(16px, 3vw, 20px);
     background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
     color: #000000;
     border: none;
     border-radius: clamp(12px, 2vw, 16px);
     font-size: clamp(14px, 2vw, 16px);
     font-weight: 700;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     position: relative;
     overflow: hidden;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     animation: slideInUp 0.8s ease-out 1s both;
 }

 .login-button::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;
 }

 .login-button:hover::before {
     left: 100%;
 }

 .login-button:hover {
     transform: translateY(-4px);
     box-shadow:
         0 20px 40px rgba(212, 175, 55, 0.4),
         0 0 0 4px rgba(212, 175, 55, 0.2);
     background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);
 }

 .login-button:active {
     transform: translateY(-2px);
 }

 @keyframes slideInUp {
     0% {
         opacity: 0;
         transform: translateY(50px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .divider {
     text-align: center;
     margin: clamp(25px, 5vw, 40px) 0;
     position: relative;
     color: #666666;
     font-size: clamp(12px, 2vw, 14px);
     font-weight: 500;
     animation: fadeIn 0.8s ease-out 1.2s both;
 }

 .divider::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, #404040, transparent);
     z-index: 1;
 }

 .divider::after {
     content: 'or';
     background: #2a2a2a;
     padding: 0 clamp(10px, 3vw, 20px);
     position: relative;
     z-index: 2;
 }

 .signup-link {
     text-align: center;
     font-size: clamp(14px, 2vw, 16px);
     color: #a3a3a3;
     margin-bottom: clamp(20px, 4vw, 30px);
     animation: fadeIn 0.8s ease-out 1.4s both;
 }

 .signup-link a {
     color: #d4af37;
     text-decoration: none;
     font-weight: 600;
     transition: all 0.3s ease;
     position: relative;
 }

 .signup-link a::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 2px;
     background: linear-gradient(90deg, #d4af37, #ffd700);
     transition: width 0.3s ease;
 }

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

 .signup-link a:hover {
     color: #ffd700;
 }

 .terms-container {
     text-align: center;
     font-size: clamp(11px, 1.5vw, 12px);
     color: #666666;
     line-height: 1.6;
     animation: fadeIn 0.8s ease-out 1.6s both;
 }

 .terms-container a {
     color: #d4af37;
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .terms-container a:hover {
     color: #ffd700;
 }

 .error-message {
     color: #ff6b6b;
     font-size: clamp(12px, 2vw, 13px);
     font-weight: 500;
     margin-top: clamp(6px, 1.5vw, 8px);
     display: flex;
     align-items: center;
     gap: clamp(4px, 1vw, 6px);
     animation: shake 0.5s ease-in-out;
 }

 @keyframes shake {

     0%,
     20%,
     40%,
     60%,
     80%,
     100% {
         transform: translateX(0);
     }

     10%,
     30%,
     50%,
     70%,
     90% {
         transform: translateX(-5px);
     }
 }

 .error-message::before {
     content: '⚠';
     font-size: clamp(12px, 2vw, 14px);
 }

 /* Advanced Modal Styles */
 .modal {
     display: none;
     position: fixed;
     z-index: 2000;
     inset: 0;
     background: rgba(0, 0, 0, 0.9);
     backdrop-filter: blur(10px);
 }

 .modal.show {
     display: flex !important; 
     align-items: center;
     justify-content: center;
     animation: modalFadeIn 0.4s ease-out;
 }

 @keyframes modalFadeIn {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 .modal-content {
     background: linear-gradient(135deg, rgba(42, 42, 42, 0.95) 0%, rgba(26, 26, 26, 0.9) 100%);
     backdrop-filter: blur(20px);
     margin: clamp(5%, 8vw, 8%) auto;
     padding: clamp(30px, 8vw, 50px);
     border-radius: clamp(20px, 4vw, 30px);
     width: min(90%, 500px);
     max-height: 90vh;
     overflow-y: auto;
     position: relative;
     box-shadow:
         0 40px 80px rgba(0, 0, 0, 0.6),
         0 0 0 1px rgba(212, 175, 55, 0.2);
     animation: modalSlideUp 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }

 @keyframes modalSlideUp {
     0% {
         opacity: 0;
         transform: translateY(100px) scale(0.8);
     }

     100% {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 .close-modal {
     position: absolute;
     right: clamp(15px, 4vw, 25px);
     top: clamp(15px, 4vw, 25px);
     width: clamp(35px, 6vw, 40px);
     height: clamp(35px, 6vw, 40px);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: clamp(20px, 4vw, 24px);
     font-weight: bold;
     cursor: pointer;
     color: #666666;
     transition: all 0.3s ease;
     border-radius: 50%;
     background: rgba(68, 68, 68, 0.5);
 }

 .close-modal:hover {
     color: #d4af37;
     background: rgba(212, 175, 55, 0.1);
     transform: scale(1.1);
 }

 .modal-header h3 {
     font-size: clamp(20px, 4vw, 28px);
     font-weight: 700;
     color: #ffffff;
     margin-bottom: clamp(12px, 2vw, 16px);
     background: linear-gradient(135deg, #ffffff 0%, #d4af37 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .reset-description {
     color: #a3a3a3;
     margin-bottom: clamp(20px, 4vw, 30px);
     line-height: 1.6;
     font-size: clamp(14px, 2vw, 16px);
 }

 .success-message {
     background: rgba(34, 197, 94, 0.1);
     border: 1px solid rgba(34, 197, 94, 0.3);
     color: #22c55e;
     padding: clamp(16px, 3vw, 20px) clamp(18px, 4vw, 24px);
     border-radius: clamp(12px, 2vw, 16px);
     margin-bottom: clamp(20px, 4vw, 30px);
     display: none;
     align-items: center;
     gap: clamp(12px, 2vw, 16px);
     animation: successSlide 0.5s ease-out;
 }

 @keyframes successSlide {
     0% {
         opacity: 0;
         transform: translateX(-20px);
     }

     100% {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .success-message i {
     color: #22c55e;
     font-size: clamp(18px, 3vw, 20px);
 }

 @keyframes fadeIn {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }