:root {
   --background: #09090b;
   --foreground: #fafafa;
   --primary: #facc15;
   --primary-foreground: #000;
   --border: #27272a;
   --muted: #18181b;
   --card: #18181b;
   --text-gray: #a1a1aa;
   --golden: #FFA629;
   --success: #52c41a;
   --danger: #ff4d4f;
   --warning: #faad14;
 }

 .form-container {
   background-color: transparent;
 }

 .password-input-wrapper {
   position: relative;
 }

 .password-input-wrapper input {
   padding-right: 35px;
   width: 100%;
   padding: 12px 15px;
   border: 1px solid var(--border);
   border-radius: 8px;
   background-color: var(--card);
   color: var(--foreground);
   font-family: 'Montserrat', sans-serif;
   transition: all 0.3s ease;
   font-size: 0.95rem;
 }

 .password-input-wrapper input:focus {
   outline: none;
   border-color: var(--primary);
   box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.2);
 }

 .toggle-password {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   color: var(--primary);
 }

 .form-group p {
   font-size: 12px;
   color: var(--text-gray);
   margin-top: 5px;
   display: none;
 }

 .form-group.active p {
   display: block;
 }

 .password-info {
   background: var(--border);
   border-radius: 8px;
   padding: 15px;
   margin: 15px 0;
 }

 .password-info h1 {
   font-size: 16px;
   margin-bottom: 10px;
   color: var(--foreground);
 }

 .requirement-list {
   list-style: none;
   padding: 0;
   margin: 10px 0;
 }

 .requirement-list li {
   margin: 5px 0;
   font-size: 14px;
   color: var(--foreground);
 }

 .pass-icon {
   color: var(--success);
 }

 .fail-icon {
   color: var(--danger);
 }

 .strength-container {
   margin: 15px 0;
 }

 .strength-label {
   display: flex;
   justify-content: space-between;
   margin-bottom: 5px;
   font-size: 14px;
   color: var(--foreground);
 }

 .strength-text {
   font-weight: bold;
 }

 /* Strength text colors */
 .strength-weak {
   color: var(--danger);
 }

 .strength-medium {
   color: var(--warning);
 }

 .strength-strong {
   color: var(--success);
 }

 .strength-range {
   width: 100%;
   height: 6px;
   -webkit-appearance: none;
   appearance: none;
   background: var(--muted);
   border-radius: 3px;
   overflow: hidden;
 }

 /* For WebKit browsers */
 .strength-range::-webkit-progress-bar {
   background: var(--muted);
 }

 /* Remove default WebKit styling */
 .strength-range::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   height: 16px;
   width: 16px;
   border-radius: 50%;
   border: none;
   margin-top: -5px;
   /* Align with track */
   cursor: pointer;
 }

 /* For Firefox */
 .strength-range::-moz-progress-bar {
   background: var(--danger);
 }

 .strength-range.medium::-moz-progress-bar {
   background: var(--warning);
 }

 .strength-range.strong::-moz-progress-bar {
   background: var(--success);
 }

 /* Buttons */
 .button-group {
   display: flex;
   gap: 1rem;
   margin-top: 1.5rem;
 }

 .btn {
   flex: 1;
   padding: 0.75rem 1rem;
   font-size: 1rem;
   border: none;
   border-radius: 0.5rem;
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.2s ease;
 }

 .update-btn {
   background-color: var(--primary);
   color: var(--background);
 }

 .update-btn:hover {
   background-color: var(--golden);
   transform: scale(1.05);
 }

 .cancel-btn {
   background-color: var(--border);
   color: white;
 }

 .cancel-btn:hover {
   background-color: var(--card);
   transform: scale(1.05);
 }

 /* Footer text */
 .last {
   text-align: center;
   font-size: 0.8rem;
   margin-top: 2rem;
   color: var(--text-gray);
 }

 /* Responsive Styles */
 @media (max-width: 1024px) {
   .login-content {
     flex-direction: column;
     gap: 2rem;
   }

   .right-panel {
     border-radius: 12px;
     padding: 1.5rem;
   }

   .btn {
     font-size: 0.95rem;
   }
 }

 @media (max-width: 768px) {
   .login-text {
     order: 1;
   }

   .right-panel {
     order: 2;
     padding: 1.2rem;
   }

   .password-info h1 {
     font-size: 0.9rem;
   }

   .requirement-list li {
     font-size: 0.85rem;
   }

   .strength-label {
     font-size: 0.85rem;
   }

   .btn {
     font-size: 0.9rem;
     padding: 0.6rem 0.8rem;
   }

   .last {
     font-size: 0.75rem;
   }
 }