:root {
       --primary-color: #e74c3c;
       --secondary-color: #f39c12;
       --accent-color: #c0392b;
       --dark-color: #2c3e50;
       --light-color: #f8f9fa;
       --text-color: #333333;
       --border-radius: 12px;
       --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
       --transition: all 0.3s ease;
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }

   body {
       background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 20px;
       color: var(--text-color);
   }

   .login-container {
       display: flex;
       width: 100%;
       max-width: 1000px;
       background-color: white;
       border-radius: var(--border-radius);
       overflow: hidden;
       box-shadow: var(--box-shadow);
   }

   .login-left {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: center;
       position: relative;
       overflow: hidden;
   }

   .image-container {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
   }

   .image-container img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center;
   }

   .login-right {
       flex: 1;
       padding: 60px 40px;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   .logo {
       font-size: 32px;
       font-weight: 700;
       margin-bottom: 10px;
       color: var(--dark-color);
       text-align: center;
   }

   h2 {
       font-size: 24px;
       margin-bottom: 30px;
       text-align: center;
       color: var(--dark-color);
       font-weight: 600;
   }

   .login-form {
       width: 100%;
   }

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

   label {
       display: block;
       margin-bottom: 8px;
       font-weight: 500;
       color: var(--dark-color);
   }

   input {
       width: 100%;
       padding: 15px;
       border: 1px solid #e1e5eb;
       border-radius: var(--border-radius);
       font-size: 16px;
       transition: var(--transition);
       background-color: #f8f9fa;
   }

   input:focus {
       outline: none;
       border-color: var(--primary-color);
       box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
       background-color: white;
   }

   .options {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 25px;
   }

   .remember {
       display: flex;
       align-items: center;
   }

   .remember input {
       width: auto;
       margin-right: 8px;
   }

   .forgot-password {
       color: var(--primary-color);
       text-decoration: none;
       font-weight: 500;
       transition: var(--transition);
   }

   .forgot-password:hover {
       color: var(--accent-color);
       text-decoration: underline;
   }

   .btn-login {
       width: 100%;
       padding: 15px;
       background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
       color: white;
       border: none;
       border-radius: var(--border-radius);
       font-size: 16px;
       font-weight: 600;
       cursor: pointer;
       transition: var(--transition);
       margin-bottom: 25px;
       position: relative;
       overflow: hidden;
   }

   .btn-login:hover {
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
       background: linear-gradient(to right, var(--accent-color), var(--primary-color));
   }

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

   .signup-link {
       text-align: center;
       margin-top: 30px;
       font-size: 14px;
       color: #6c757d;
   }

   .signup-link a {
       color: var(--primary-color);
       text-decoration: none;
       font-weight: 600;
       transition: var(--transition);
   }

   .signup-link a:hover {
       color: var(--accent-color);
       text-decoration: underline;
   }

   /* Modal Styles */
   .modal {
       display: none;
       position: fixed;
       z-index: 1000;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
       backdrop-filter: blur(5px);
   }

   .modal-content {
       background-color: white;
       margin: 10% auto;
       padding: 30px;
       border-radius: 15px;
       width: 90%;
       max-width: 400px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
       border-top: 5px solid var(--primary-color);
       position: relative;
   }

   .close {
       color: #aaa;
       float: right;
       font-size: 28px;
       font-weight: bold;
       cursor: pointer;
       position: absolute;
       right: 15px;
       top: 10px;
   }

   .close:hover {
       color: var(--primary-color);
   }

   .modal h3 {
       color: var(--primary-color);
       margin-bottom: 20px;
       text-align: center;
   }

   .password-match {
       border-color: #28a745 !important;
   }

   .password-error {
       border-color: #dc3545 !important;
   }

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

   .error {
       color: var(--primary-color);
       text-align: center;
       margin-bottom: 20px;
       padding: 12px;
       background: #ffebee;
       border: 1px solid #ffcdd2;
       border-radius: 8px;
       font-weight: 500;
   }

   .success {
       color: #28a745;
       text-align: center;
       margin-bottom: 20px;
       padding: 12px;
       background: #d4edda;
       border: 1px solid #c3e6cb;
       border-radius: 8px;
   }

   .password-toggle {
       position: relative;
   }

   .toggle-password {
       position: absolute;
       right: 15px;
       top: 50%;
       transform: translateY(-50%);
       background: none;
       border: none;
       color: #666;
       cursor: pointer;
       width: auto;
       padding: 0;
       font-size: 14px;
   }

   .toggle-password:hover {
       color: var(--primary-color);
       background: none;
       transform: translateY(-50%);
       box-shadow: none;
   }

   @media (max-width: 768px) {
       .login-container {
           flex-direction: column;
       }

       .login-left,
       .login-right {
           padding: 40px 30px;
       }

       .login-left {
           min-height: 250px;
       }
   }