:root {
       --primary: #4361ee;
       --primary-light: #4895ef;
       --danger: #f72585;
       --success: #4cc9f0;
       --dark: #2b2d42;
       --light: #f8f9fa;
       --gray: #adb5bd;
       --border-radius: 12px;
       --shadow: 0 10px 20px rgba(0,0,0,0.1);
       --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   }
   
   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   body {
       font-family: 'Poppins', sans-serif;
       background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 20px;
       color: var(--dark);
       line-height: 1.6;
   }
   
   .container {
       max-width: 800px;
       width: 100%;
       background: white;
       border-radius: var(--border-radius);
       box-shadow: var(--shadow);
       overflow: hidden;
       display: flex;
   }
   
   .form-container {
       padding: 40px;
       flex: 1;
   }
   
   .illustration {
       flex: 1;
       background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 40px;
   }
   
   .illustration img {
       max-width: 100%;
       height: auto;
       filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
   }
   
   h1 {
       font-size: 2.2rem;
       margin-bottom: 10px;
       color: var(--primary);
       font-weight: 600;
   }
   
   .subtitle {
       color: var(--gray);
       margin-bottom: 30px;
       font-weight: 300;
   }
   
   .form-group {
       margin-bottom: 10px;
       position: relative;
   }
   
   label {
       display: block;
       margin-bottom: 8px;
       font-weight: 500;
       color: var(--dark);
       font-size: 0.9rem;
   }
   
   input {
       width: 100%;
       padding: 15px 20px;
       border: 2px solid #e9ecef;
       border-radius: var(--border-radius);
       font-size: 1rem;
       transition: var(--transition);
       background-color: #f8f9fa;
   }
   
   input:focus {
       outline: none;
       border-color: var(--primary);
       background-color: white;
       box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
   }
   
   button {
       width: 100%;
       padding: 15px;
       background: linear-gradient(to right, var(--primary) 0%, var(--primary-light) 100%);
       color: white;
       border: none;
       border-radius: var(--border-radius);
       font-size: 1rem;
       font-weight: 500;
       cursor: pointer;
       transition: var(--transition);
       margin-top: 10px;
       box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
   }
   
   button:hover {
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
   }
   
   .error-message {
       color: var(--danger);
       margin-top: 8px;
       font-size: 0.85rem;
       opacity: 0;
       height: 0;
       overflow: hidden;
       transition: var(--transition);
       display: flex;
       align-items: center;
   }
   
   .error-message::before {
       content: "!";
       display: inline-block;
       width: 18px;
       height: 18px;
       background-color: var(--danger);
       color: white;
       border-radius: 50%;
       text-align: center;
       line-height: 18px;
       font-size: 0.8rem;
       margin-right: 8px;
       flex-shrink: 0;
   }
   
   .error-message.show {
       opacity: 1;
       height: auto;
   }
   
   .error-input {
       border-color: var(--danger) !important;
       animation: pulse 0.5s;
       background-color: rgba(247, 37, 133, 0.05) !important;
   }
   
   @keyframes pulse {
       0%, 100% { transform: translateX(0); }
       20% { transform: translateX(-5px); }
       40% { transform: translateX(5px); }
       60% { transform: translateX(-5px); }
       80% { transform: translateX(5px); }
   }
   
   .toast-container {
       position: fixed;
       top: 30px;
       right: 30px;
       z-index: 1000;
       max-width: 350px;
       width: 100%;
   }
   
   .toast {
       background-color: white;
       color: var(--dark);
       padding: 18px 25px;
       margin-bottom: 15px;
       border-radius: var(--border-radius);
       box-shadow: var(--shadow);
       display: flex;
       align-items: center;
       transform: translateX(150%);
       transition: var(--transition);
       position: relative;
       overflow: hidden;
   }
   
   .toast::before {
       content: "";
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 5px;
   }
   
   .toast.error::before {
       background-color: var(--danger);
   }
   
   .toast.success::before {
       background-color: var(--success);
   }
   
   .toast.show {
       transform: translateX(0);
   }
   
   .toast-icon {
       margin-right: 15px;
       font-size: 1.5rem;
       flex-shrink: 0;
   }
   
   .toast.error .toast-icon {
       color: var(--danger);
   }
   
   .toast.success .toast-icon {
       color: var(--success);
   }
   
   .toast-content {
       flex: 1;
   }
   
   .toast-title {
       font-weight: 600;
       margin-bottom: 3px;
   }
   
   .toast-message {
       font-size: 0.9rem;
       opacity: 0.8;
   }
   
   .close-btn {
       margin-left: 15px;
       cursor: pointer;
       opacity: 0.6;
       transition: var(--transition);
       flex-shrink: 0;
   }
   
   .close-btn:hover {
       opacity: 1;
   }
   
   .password-strength {
       margin-top: 8px;
       height: 4px;
       background-color: #e9ecef;
       border-radius: 2px;
       overflow: hidden;
       position: relative;
   }
   
   .strength-meter {
       height: 100%;
       width: 0;
       transition: var(--transition);
   }
   
   .strength-weak {
       background-color: var(--danger);
       width: 30%;
   }
   
   .strength-medium {
       background-color: #ffbe0b;
       width: 60%;
   }
   
   .strength-strong {
       background-color: var(--success);
       width: 100%;
   }
   
   .strength-text {
       font-size: 0.75rem;
       margin-top: 4px;
       text-align: right;
       color: var(--gray);
   }
   
   @media (max-width: 768px) {
       .container {
           flex-direction: column;
       }
       
       .illustration {
           display: none;
       }
       
       .form-container {
           padding: 30px;
       }
       
       .toast-container {
           max-width: calc(100% - 40px);
           right: 20px;
           top: 20px;
       }
   }