/* Animations */
   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

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

   @keyframes slideIn {
       from {
           opacity: 0;
           transform: translateY(-50px) scale(0.9);
       }

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

   .animate-fade-in {
       animation: fadeIn 0.8s ease-out;
   }

   /* Login Card */
   .login-card {
       background: white;
       border-radius: 16px;
       overflow: hidden;
       transition: all 0.3s ease;
   }

   .login-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
   }

   .login-header {
       background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
       border-bottom: 1px solid rgba(99, 102, 241, 0.1);
   }

   /* Form Styles */
   .form-group {
       margin-bottom: 1.5rem;
   }

   .input-group {
       position: relative;
       width: 100%;
   }

   .input-group-icon {
       position: absolute;
       left: 15px;
       top: 50%;
       transform: translateY(-50%);
       color: #6366f1;
       z-index: 10;
       width: 20px;
       text-align: center;
   }

   .form-control {
       width: 100%;
       padding: 0.8rem 1rem 0.8rem 3rem;
       border: 2px solid #e9ecef;
       border-radius: 10px;
       font-size: 1rem;
       transition: all 0.3s ease;
       background: #f8f9fa;
       font-family: inherit;
   }

   .form-control:focus {
       border-color: #6366f1;
       box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
       background: white;
       outline: none;
   }

   .form-control.is-invalid {
       border-color: #dc3545;
   }

   .form-label {
       font-size: 0.95rem;
       margin-bottom: 0.5rem;
       display: block;
   }

   /* Buttons */
   .login-btn {
       background: linear-gradient(135deg, #6366f1, #4f46e5);
       border: none;
       border-radius: 10px;
       padding: 0.8rem 1.5rem;
       font-size: 1.1rem;
       font-weight: 600;
       transition: all 0.3s ease;
       color: white;
   }

   .login-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
       background: linear-gradient(135deg, #4f46e5, #4338ca);
   }

   .register-link {
       border-radius: 10px;
       padding: 0.6rem 1.5rem;
       font-weight: 500;
       transition: all 0.3s ease;
       border: 2px solid #6366f1;
       color: #6366f1;
       background: transparent;
   }

   .register-link:hover {
       transform: translateY(-2px);
       box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
       background: #6366f1;
       color: white;
   }

   /* Divider */
   .divider {
       display: flex;
       align-items: center;
       text-align: center;
   }

   .divider-line {
       flex: 1;
       height: 1px;
       background: linear-gradient(90deg, transparent, #ddd, transparent);
   }

   .divider-text {
       padding: 0 1rem;
       color: #6c757d;
       font-size: 0.9rem;
       font-weight: 500;
   }

   /* Form Check */
   .form-check-input:checked {
       background-color: #6366f1;
       border-color: #6366f1;
   }

   .form-check-input:focus {
       border-color: #6366f1;
       box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
   }

   /* Forgot Password */
   .forgot-password:hover {
       text-decoration: underline !important;
   }

   /* Modal Styles */
   .login-page-modal-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.7);
       display: none;
       justify-content: center;
       align-items: center;
       z-index: 9999;
       backdrop-filter: blur(5px);
   }

   .login-page-modal-content {
       background: white;
       border-radius: 16px;
       width: 90%;
       max-width: 500px;
       max-height: 90vh;
       overflow: hidden;
       animation: slideIn 0.3s ease-out;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   }

   .login-page-modal-header {
       padding: 1.5rem 2rem;
       border-bottom: 1px solid #e9ecef;
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
   }

   .login-page-modal-title {
       margin: 0;
       font-size: 1.5rem;
       font-weight: 700;
   }

   .login-page-modal-close {
       background: none;
       border: none;
       font-size: 2rem;
       color: #6c757d;
       cursor: pointer;
       transition: color 0.3s ease;
       line-height: 1;
   }

   .login-page-modal-close:hover {
       color: #6366f1;
   }

   .login-page-modal-body {
       padding: 2rem;
   }

   /* Register Options */
   .register-options {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }

   .register-options a {
       text-decoration: none;
   }

   .register-option-btn {
       display: flex;
       align-items: center;
       padding: 1.5rem;
       border: 2px solid #e9ecef;
       border-radius: 12px;
       background: white;
       transition: all 0.3s ease;
       cursor: pointer;
       width: 100%;
       text-align: left;
   }

   .register-option-btn:hover {
       transform: translateY(-3px);
       border-color: #6366f1;
       box-shadow: 0 5px 20px rgba(99, 102, 241, 0.15);
   }

   .option-icon {
       width: 50px;
       height: 50px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-right: 1rem;
       font-size: 1.5rem;
       flex-shrink: 0;
   }

   .student-option .option-icon {
       background: rgba(99, 102, 241, 0.1);
       color: #6366f1;
   }

   .studio-option .option-icon {
       background: rgba(16, 185, 129, 0.1);
       color: #10b981;
   }

   .maker-option .option-icon {
       background: rgba(245, 158, 11, 0.1);
       color: #f59e0b;
   }

   .option-content {
       flex-grow: 1;
   }

   .option-content h4 {
       margin: 0 0 0.25rem 0;
       color: #1f2937;
       font-weight: 600;
   }

   .option-content p {
       margin: 0;
       color: #6b7280;
       font-size: 0.9rem;
   }

   .option-arrow {
       color: #9ca3af;
       transition: transform 0.3s ease;
   }

   .register-option-btn:hover .option-arrow {
       transform: translateX(5px);
       color: #6366f1;
   }

   /* Responsive Design */
   @media (max-width: 768px) {
       .container-fluid.py-4 {
           padding: 1rem;
       }

       .login-title {
           font-size: 1.6rem !important;
       }

       .login-header {
           padding: 2rem 1rem !important;
       }

       .login-body {
           padding: 1.5rem !important;
       }

       .login-page-modal-content {
           width: 95%;
           margin: 1rem;
       }

       .login-page-modal-header {
           padding: 1.25rem 1.5rem;
       }

       .login-page-modal-body {
           padding: 1.5rem;
       }

       .register-option-btn {
           padding: 1.25rem;
       }

       .option-icon {
           width: 45px;
           height: 45px;
           font-size: 1.25rem;
       }
   }

   @media (max-width: 576px) {
       .login-title {
           font-size: 1.4rem !important;
       }

       .form-control {
           padding: 0.7rem 0.8rem 0.7rem 2.5rem;
       }

       .input-group-icon {
           left: 12px;
       }

       .d-flex.justify-content-between {
           flex-direction: column;
           gap: 1rem;
           text-align: center;
       }

       .register-option-btn {
           flex-direction: column;
           text-align: center;
           padding: 1rem;
       }

       .option-icon {
           margin-right: 0;
           margin-bottom: 0.75rem;
       }

       .option-arrow {
           display: none;
       }
   }

   .password-reset-complete-wrapper {
       min-height: 100vh;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 20px;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       overflow: hidden;
   }

   .password-reset-complete-container {
       width: 100%;
       max-width: 500px;
       margin: 0 auto;
   }

   .password-reset-complete-card {
       background: white;
       border-radius: 16px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
       padding: 2.5rem;
       position: relative;
       overflow: hidden;
       text-align: center;
   }

   .password-reset-complete-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, #10b981, #34d399, #10b981);
   }

   .password-reset-complete-success-icon {
       width: 80px;
       height: 80px;
       background: linear-gradient(135deg, #10b981, #34d399);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 1.5rem;
       color: white;
       font-size: 2rem;
       animation: password-reset-complete-bounce 1s ease-in-out;
   }

   @keyframes password-reset-complete-bounce {

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

       40% {
           transform: translateY(-10px);
       }

       60% {
           transform: translateY(-5px);
       }
   }

   .password-reset-complete-header h2 {
       color: #10b981;
       font-weight: 700;
       font-size: 1.8rem;
       margin-bottom: 1rem;
       line-height: 1.2;
   }

   .password-reset-complete-content {
       color: #6b7280;
       line-height: 1.6;
       margin-bottom: 2rem;
   }

   .password-reset-complete-btn {
       background: linear-gradient(135deg, #10b981, #34d399);
       border: none;
       color: white;
       padding: 0.75rem 2rem;
       border-radius: 10px;
       font-weight: 600;
       font-size: 1rem;
       text-decoration: none;
       display: inline-block;
       transition: all 0.3s ease;
       cursor: pointer;
       margin-bottom: 1.5rem;
   }

   .password-reset-complete-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
       color: white;
       text-decoration: none;
   }

   .password-reset-complete-security-tips {
       background: #f0f9ff;
       border-radius: 10px;
       padding: 1.25rem;
       margin-top: 1.5rem;
       text-align: left;
   }

   .password-reset-complete-security-tips h4 {
       color: #0369a1;
       font-size: 1rem;
       margin-bottom: 0.75rem;
       display: flex;
       align-items: center;
   }

   .password-reset-complete-security-tips h4 i {
       margin-right: 0.5rem;
   }

   .password-reset-complete-security-tips ul {
       color: #6b7280;
       font-size: 0.85rem;
       margin: 0;
       padding-left: 1.2rem;
   }

   .password-reset-complete-security-tips li {
       margin-bottom: 0.5rem;
   }

   /* Ensure no scroll on any screen size */
   .password-reset-complete-wrapper {
       height: 100%;
       overflow: hidden;
   }

   @media (max-width: 576px) {
       .password-reset-complete-wrapper {
           padding: 15px;
       }

       .password-reset-complete-card {
           padding: 2rem 1.5rem;
       }

       .password-reset-complete-header h2 {
           font-size: 1.5rem;
       }

       .password-reset-complete-success-icon {
           width: 60px;
           height: 60px;
           font-size: 1.5rem;
       }

       .password-reset-complete-security-tips {
           padding: 1rem;
           margin-top: 1rem;
       }
   }

   @media (max-width: 400px) {
       .password-reset-complete-card {
           padding: 1.5rem 1.25rem;
       }

       .password-reset-complete-header h2 {
           font-size: 1.3rem;
       }

       .password-reset-complete-content {
           font-size: 0.9rem;
       }

       .password-reset-complete-btn {
           padding: 0.65rem 1.5rem;
           font-size: 0.95rem;
       }

       .password-reset-complete-security-tips {
           padding: 0.75rem;
       }

       .password-reset-complete-security-tips ul {
           font-size: 0.8rem;
       }
   }

   .password-reset-confirm-wrapper {
       min-height: 100vh;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 20px;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       overflow: hidden;
   }

   .password-reset-confirm-container {
       width: 100%;
       max-width: 450px;
       margin: 0 auto;
   }

   .password-reset-confirm-card {
       background: white;
       border-radius: 16px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
       padding: 2.5rem;
       position: relative;
       overflow: hidden;
   }

   .password-reset-confirm-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1);
   }

   .password-reset-confirm-header {
       text-align: center;
       margin-bottom: 2rem;
   }

   .password-reset-confirm-header h2 {
       color: #6366f1;
       font-weight: 700;
       font-size: 1.8rem;
       margin-bottom: 0.5rem;
       line-height: 1.2;
   }

   .password-reset-confirm-header p {
       color: #6b7280;
       font-size: 0.95rem;
       line-height: 1.5;
   }

   .password-reset-confirm-form .password-reset-confirm-form-group {
       margin-bottom: 1.5rem;
   }

   .password-reset-confirm-form label {
       color: #374151;
       font-weight: 600;
       font-size: 0.9rem;
       margin-bottom: 0.5rem;
       display: block;
   }

   .password-reset-confirm-form input {
       width: 100%;
       padding: 0.75rem 1rem;
       border: 2px solid #e5e7eb;
       border-radius: 10px;
       font-size: 1rem;
       transition: all 0.3s ease;
       background: #f9fafb;
   }

   .password-reset-confirm-form input:focus {
       outline: none;
       border-color: #6366f1;
       background: white;
       box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
   }

   .password-reset-confirm-btn {
       background: linear-gradient(135deg, #6366f1, #8b5cf6);
       border: none;
       color: white;
       padding: 0.75rem 2rem;
       border-radius: 10px;
       font-weight: 600;
       font-size: 1rem;
       width: 100%;
       transition: all 0.3s ease;
       cursor: pointer;
       margin-bottom: 1.5rem;
   }

   .password-reset-confirm-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
       color: white;
       text-decoration: none;
   }

   .password-reset-confirm-alert {
       padding: 0.75rem 1rem;
       border-radius: 10px;
       margin-bottom: 1.5rem;
       font-size: 0.9rem;
   }

   .password-reset-confirm-alert-error {
       background: #fef2f2;
       border: 1px solid #fecaca;
       color: #dc2626;
   }

   .password-reset-confirm-alert-warning {
       background: #fffbeb;
       border: 1px solid #fed7aa;
       color: #ea580c;
   }

   .password-reset-confirm-form-errors {
       color: #dc2626;
       font-size: 0.85rem;
       margin-top: 0.25rem;
   }

   .password-reset-confirm-requirements {
       background: #f8f9fa;
       border-radius: 8px;
       padding: 1rem;
       margin-bottom: 1.5rem;
       font-size: 0.85rem;
       color: #6b7280;
   }

   .password-reset-confirm-requirements ul {
       margin: 0;
       padding-left: 1.2rem;
   }

   .password-reset-confirm-requirements li {
       margin-bottom: 0.25rem;
   }

   .password-reset-confirm-footer {
       text-align: center;
       padding-top: 1.5rem;
       border-top: 1px solid #e5e7eb;
   }

   .password-reset-confirm-footer a {
       color: #6366f1;
       text-decoration: none;
       font-weight: 600;
       transition: color 0.3s ease;
   }

   .password-reset-confirm-footer a:hover {
       color: #8b5cf6;
   }

   /* Ensure no scroll on any screen size */
   .password-reset-confirm-wrapper {
       height: 100%;
       overflow: hidden;
   }

   @media (max-width: 576px) {
       .password-reset-confirm-wrapper {
           padding: 15px;
       }

       .password-reset-confirm-card {
           padding: 2rem 1.5rem;
       }

       .password-reset-confirm-header h2 {
           font-size: 1.5rem;
       }

       .password-reset-confirm-requirements {
           padding: 0.75rem;
           font-size: 0.8rem;
       }
   }

   @media (max-width: 400px) {
       .password-reset-confirm-card {
           padding: 1.5rem 1.25rem;
       }

       .password-reset-confirm-header h2 {
           font-size: 1.3rem;
       }

       .password-reset-confirm-btn {
           padding: 0.65rem 1.5rem;
           font-size: 0.95rem;
       }
   }


   .password-reset-form-wrapper {
       min-height: 100vh;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 20px;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       overflow: hidden;
       margin: 0;
       box-sizing: border-box;
   }

   .password-reset-form-container {
       width: 100%;
       max-width: 450px;
       margin: 0 auto;
       box-sizing: border-box;
   }

   .password-reset-form-card {
       background: white;
       border-radius: 16px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
       padding: 2.5rem;
       position: relative;
       overflow: hidden;
       box-sizing: border-box;
   }

   .password-reset-form-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1);
       box-sizing: border-box;
   }

   .password-reset-form-header {
       text-align: center;
       margin-bottom: 2rem;
       box-sizing: border-box;
   }

   .password-reset-form-title {
       color: #6366f1;
       font-weight: 700;
       font-size: 1.8rem;
       margin-bottom: 0.5rem;
       line-height: 1.2;
       box-sizing: border-box;
   }

   .password-reset-form-subtitle {
       color: #6b7280;
       font-size: 0.95rem;
       line-height: 1.5;
       box-sizing: border-box;
       margin: 0;
   }

   .password-reset-form .password-reset-form-group {
       margin-bottom: 1.5rem;
       box-sizing: border-box;
   }

   .password-reset-form-label {
       color: #374151;
       font-weight: 600;
       font-size: 0.9rem;
       margin-bottom: 0.5rem;
       display: block;
       box-sizing: border-box;
   }

   .password-reset-form-input {
       width: 100%;
       padding: 0.75rem 1rem;
       border: 2px solid #e5e7eb;
       border-radius: 10px;
       font-size: 1rem;
       transition: all 0.3s ease;
       background: #f9fafb;
       box-sizing: border-box;
       font-family: inherit;
   }

   .password-reset-form-input:focus {
       outline: none;
       border-color: #6366f1;
       background: white;
       box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
   }

   .password-reset-form-btn {
       background: linear-gradient(135deg, #6366f1, #8b5cf6);
       border: none;
       color: white;
       padding: 0.75rem 2rem;
       border-radius: 10px;
       font-weight: 600;
       font-size: 1rem;
       width: 100%;
       transition: all 0.3s ease;
       cursor: pointer;
       margin-bottom: 1.5rem;
       box-sizing: border-box;
       font-family: inherit;
   }

   .password-reset-form-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
       color: white;
       text-decoration: none;
   }

   .password-reset-form-footer {
       text-align: center;
       padding-top: 1.5rem;
       border-top: 1px solid #e5e7eb;
       box-sizing: border-box;
   }

   .password-reset-form-footer-text {
       margin: 0;
       box-sizing: border-box;
       color: #6b7280;
   }

   .password-reset-form-footer-link {
       color: #6366f1;
       text-decoration: none;
       font-weight: 600;
       transition: color 0.3s ease;
       box-sizing: border-box;
   }

   .password-reset-form-footer-link:hover {
       color: #8b5cf6;
       text-decoration: none;
   }

   .password-reset-form-alert {
       padding: 0.75rem 1rem;
       border-radius: 10px;
       margin-bottom: 1.5rem;
       font-size: 0.9rem;
       box-sizing: border-box;
   }

   .password-reset-form-alert-error {
       background: #fef2f2;
       border: 1px solid #fecaca;
       color: #dc2626;
   }

   .password-reset-form-errors {
       color: #dc2626;
       font-size: 0.85rem;
       margin-top: 0.25rem;
       box-sizing: border-box;
   }

   .password-reset-form-error-item {
       box-sizing: border-box;
   }

   /* Ensure no scroll on any screen size */
   .password-reset-form-wrapper {
       height: 100%;
       overflow: hidden;
   }

   @media (max-width: 576px) {
       .password-reset-form-wrapper {
           padding: 15px;
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .password-reset-form-card {
           padding: 2rem 1.5rem;
           width: 100%;
       }

       .password-reset-form-title {
           font-size: 1.5rem;
       }

       .password-reset-form-subtitle {
           font-size: 0.9rem;
       }
   }

   @media (max-width: 400px) {
       .password-reset-form-card {
           padding: 1.5rem 1.25rem;
       }

       .password-reset-form-title {
           font-size: 1.3rem;
       }

       .password-reset-form-subtitle {
           font-size: 0.85rem;
       }

       .password-reset-form-btn {
           padding: 0.65rem 1.5rem;
           font-size: 0.95rem;
       }
   }

   /* Very small screens */
   @media (max-height: 600px) and (max-width: 400px) {
       .password-reset-form-wrapper {
           padding: 10px;
       }

       .password-reset-form-card {
           padding: 1.25rem 1rem;
       }

       .password-reset-form-header {
           margin-bottom: 1.5rem;
       }

       .password-reset-form-title {
           font-size: 1.2rem;
           margin-bottom: 0.25rem;
       }

       .password-reset-form-group {
           margin-bottom: 1rem;
       }
   }



   .password-reset-done-wrapper {
       min-height: 100vh;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 20px;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       overflow: hidden;
       margin: 0;
       box-sizing: border-box;
   }

   .password-reset-done-container {
       width: 100%;
       max-width: 500px;
       margin: 0 auto;
       box-sizing: border-box;
   }

   .password-reset-done-card {
       background: white;
       border-radius: 16px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
       padding: 2.5rem;
       position: relative;
       overflow: hidden;
       text-align: center;
       box-sizing: border-box;
   }

   .password-reset-done-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, #10b981, #34d399, #10b981);
       box-sizing: border-box;
   }

   .password-reset-done-success-icon {
       width: 80px;
       height: 80px;
       background: linear-gradient(135deg, #10b981, #34d399);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 1.5rem;
       color: white;
       font-size: 2rem;
       box-sizing: border-box;
   }

   .password-reset-done-title {
       color: #10b981;
       font-weight: 700;
       font-size: 1.8rem;
       margin-bottom: 1rem;
       line-height: 1.2;
       box-sizing: border-box;
   }

   .password-reset-done-content {
       color: #6b7280;
       line-height: 1.6;
       margin-bottom: 2rem;
       box-sizing: border-box;
   }

   .password-reset-done-message {
       margin: 0 0 0.5rem 0;
       box-sizing: border-box;
   }

   .password-reset-done-note {
       margin: 0;
       font-size: 0.9rem;
       color: #9ca3af;
       box-sizing: border-box;
   }

   .password-reset-done-btn {
       background: linear-gradient(135deg, #10b981, #34d399);
       border: none;
       color: white;
       padding: 0.75rem 2rem;
       border-radius: 10px;
       font-weight: 600;
       font-size: 1rem;
       text-decoration: none;
       display: inline-block;
       transition: all 0.3s ease;
       cursor: pointer;
       margin-bottom: 1.5rem;
       box-sizing: border-box;
       font-family: inherit;
   }

   .password-reset-done-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
       color: white;
       text-decoration: none;
   }

   .password-reset-done-footer {
       margin-top: 1.5rem;
       padding-top: 1.5rem;
       border-top: 1px solid #e5e7eb;
       box-sizing: border-box;
   }

   .password-reset-done-footer-text {
       margin: 0;
       color: #6b7280;
       box-sizing: border-box;
   }

   .password-reset-done-footer-link {
       color: #6366f1;
       text-decoration: none;
       font-weight: 600;
       transition: color 0.3s ease;
       box-sizing: border-box;
   }

   .password-reset-done-footer-link:hover {
       color: #8b5cf6;
       text-decoration: none;
   }

   /* Ensure no scroll on any screen size */
   .password-reset-done-wrapper {
       height: 100%;
       overflow: hidden;
   }

   @media (max-width: 576px) {
       .password-reset-done-wrapper {
           padding: 15px;
       }

       .password-reset-done-card {
           padding: 2rem 1.5rem;
       }

       .password-reset-done-title {
           font-size: 1.5rem;
       }

       .password-reset-done-success-icon {
           width: 60px;
           height: 60px;
           font-size: 1.5rem;
       }
   }

   @media (max-width: 400px) {
       .password-reset-done-card {
           padding: 1.5rem 1.25rem;
       }

       .password-reset-done-title {
           font-size: 1.3rem;
       }

       .password-reset-done-content {
           font-size: 0.9rem;
       }

       .password-reset-done-btn {
           padding: 0.65rem 1.5rem;
           font-size: 0.95rem;
       }
   }


   /* Unique Animations */
   @keyframes register-page-fadeIn {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

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

   .register-page-animate-fade-in {
       animation: register-page-fadeIn 0.8s ease-out;
   }

   /* Register Card */
   .register-page-card {
       background: white;
       border-radius: 16px;
       overflow: hidden;
       transition: all 0.3s ease;
   }

   .register-page-shadow-lg {
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
   }

   .register-page-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
   }

   .register-page-header {
       background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
       border-bottom: 1px solid rgba(99, 102, 241, 0.1);
   }

   /* User Type Badge */
   .register-page-user-type-badge-content {
       background: linear-gradient(135deg, #6366f1, #4f46e5);
       color: white;
       padding: 0.5rem 1rem;
       border-radius: 20px;
       font-size: 0.9rem;
       font-weight: 500;
   }

   /* Form Styles */
   .register-page-form-group {
       margin-bottom: 1.5rem;
   }

   .register-page-input-group {
       position: relative;
       width: 100%;
   }

   .register-page-input-group-icon {
       position: absolute;
       left: 15px;
       top: 50%;
       transform: translateY(-50%);
       color: #6366f1;
       z-index: 10;
       width: 20px;
       text-align: center;
   }

   .register-page-form-control {
       width: 100%;
       padding: 0.8rem 1rem 0.8rem 3rem;
       border: 2px solid #e9ecef;
       border-radius: 10px;
       font-size: 1rem;
       transition: all 0.3s ease;
       background: #f8f9fa;
       font-family: inherit;
       box-sizing: border-box;
   }

   .register-page-form-control:focus {
       border-color: #6366f1;
       box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
       background: white;
       outline: none;
   }

   .register-page-is-invalid {
       border-color: #dc3545 !important;
   }

   .register-page-form-label {
       font-size: 0.95rem;
       margin-bottom: 0.5rem;
       display: block;
   }

   /* Buttons */
   .register-page-btn {
       background: linear-gradient(135deg, #6366f1, #4f46e5);
       border: none;
       border-radius: 10px;
       padding: 0.8rem 1.5rem;
       font-size: 1.1rem;
       font-weight: 600;
       transition: all 0.3s ease;
       color: white;
   }

   .register-page-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
       background: linear-gradient(135deg, #4f46e5, #4338ca);
       color: white;
   }

   .register-page-login-link {
       border-radius: 10px;
       padding: 0.6rem 1.5rem;
       font-weight: 500;
       transition: all 0.3s ease;
       border: 2px solid #6366f1;
       color: #6366f1;
       background: transparent;
       text-decoration: none;
       display: inline-block;
   }

   .register-page-login-link:hover {
       transform: translateY(-2px);
       box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
       background: #6366f1;
       color: white;
       text-decoration: none;
   }

   /* Divider */
   .register-page-divider {
       display: flex;
       align-items: center;
       text-align: center;
   }

   .register-page-divider-line {
       flex: 1;
       height: 1px;
       background: linear-gradient(90deg, transparent, #ddd, transparent);
   }

   .register-page-divider-text {
       padding: 0 1rem;
       color: #6c757d;
       font-size: 0.9rem;
       font-weight: 500;
   }

   /* Form Check */
   .register-page-form-check-input:checked {
       background-color: #6366f1;
       border-color: #6366f1;
   }

   .register-page-form-check-input:focus {
       border-color: #6366f1;
       box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
   }

   /* Text Styles */
   .register-page-form-text {
       font-size: 0.875rem;
   }

   .register-page-text-danger {
       color: #dc3545 !important;
   }

   .register-page-invalid-feedback {
       display: block;
   }

   /* Responsive Design */
   @media (max-width: 768px) {
       .register-page-header {
           padding: 2rem 1rem !important;
       }

       .register-page-body {
           padding: 1.5rem !important;
       }

       .register-page-user-type-badge-content {
           font-size: 0.8rem;
           padding: 0.4rem 0.8rem;
       }
   }

   @media (max-width: 576px) {
       .register-page-title {
           font-size: 1.4rem !important;
       }

       .register-page-form-control {
           padding: 0.7rem 0.8rem 0.7rem 2.5rem;
       }

       .register-page-input-group-icon {
           left: 12px;
       }
   }

   .warning-card {
       border-left: 4px solid #ffc107;
       transition: all 0.3s ease;
   }

   .warning-card:hover {
       box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
       transform: translateY(-2px);
   }

   .warning-icon {
       color: #ffc107;
       font-size: 1.5rem;
   }


   ._login_page_body {
       background: linear-gradient(135deg, #a78bfa 0%, #f0abfc 50%, #c4b5fd 100%);
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 15px;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       position: relative;
       overflow-x: hidden;
   }

   ._login_page_body::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-size: cover;
       opacity: 0.1;
       z-index: -1;
   }

   ._login_page_container {
       width: 100%;
       max-width: 800px;
       margin: 0 auto;
   }

   ._login_page_card {
       display: flex;
       background: rgba(255, 255, 255, 0.25);
       backdrop-filter: blur(15px);
       -webkit-backdrop-filter: blur(15px);
       border-radius: 16px;
       border: 1px solid rgba(255, 255, 255, 0.3);
       box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
       overflow: hidden;
       animation: _login_page_scaleIn 0.6s ease-out;
       min-height: 380px;
   }

   @keyframes _login_page_scaleIn {
       from {
           opacity: 0;
           transform: scale(0.95);
       }

       to {
           opacity: 1;
           transform: scale(1);
       }
   }

   ._login_page_image_section {
       flex: 1.1;
       overflow: hidden;
       position: relative;
   }

   ._login_page_image {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.4s ease;
   }

   ._login_page_image:hover {
       transform: scale(1.02);
   }

   ._login_page_image_overlay {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
       color: white;
       padding: 12px;
       text-align: center;
   }

   ._login_page_image_text {
       font-size: 12px;
       font-weight: 500;
   }

   ._login_page_form_section {
       flex: 1;
       padding: 25px;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   ._login_page_header {
       text-align: center;
       margin-bottom: 20px;
   }

   ._login_page_title {
       font-size: 20px;
       font-weight: 700;
       background: linear-gradient(90deg, #7e22ce, #c026d3);
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
       margin-bottom: 6px;
   }

   ._login_page_subtitle {
       color: #6b7280;
       font-size: 12px;
   }

   ._login_page_form {
       width: 100%;
   }

   ._login_page_form_group {
       margin-bottom: 16px;
       position: relative;
   }

   ._login_page_form_label {
       display: block;
       margin-bottom: 6px;
       font-weight: 600;
       color: #4c1d95;
       font-size: 13px;
   }

   ._login_page_input_container {
       position: relative;
       display: flex;
       align-items: center;
   }

   ._login_page_input_icon {
       position: absolute;
       left: 12px;
       color: #7e22ce;
       z-index: 2;
       transition: all 0.2s ease;
       font-size: 14px;
   }

   ._login_page_form_input {
       width: 100%;
       padding: 10px 12px 10px 38px;
       border: 1px solid rgba(255, 255, 255, 0.5);
       border-radius: 10px;
       background: rgba(255, 255, 255, 0.2);
       backdrop-filter: blur(5px);
       color: #4c1d95;
       font-size: 13px;
       transition: all 0.2s ease;
       box-sizing: border-box;
   }

   ._login_page_form_input:focus {
       outline: none;
       border-color: #a855f7;
       background: rgba(255, 255, 255, 0.3);
       box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
   }

   ._login_page_form_input:focus+._login_page_input_icon {
       color: #c026d3;
       transform: scale(1.05);
   }

   ._login_page_form_input._login_page_input_error {
       border-color: #ef4444;
       box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
   }

   ._login_page_error_text {
       color: #ef4444;
       font-size: 11px;
       margin-top: 4px;
       display: block;
   }

   ._login_page_help_text {
       color: #6b7280;
       font-size: 11px;
       margin-top: 4px;
       display: block;
   }

   ._login_page_options {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 18px;
       font-size: 12px;
   }

   ._login_page_remember {
       display: flex;
       align-items: center;
       color: #6b7280;
   }

   ._login_page_checkbox {
       margin-right: 6px;
       accent-color: #7e22ce;
       transform: scale(0.9);
   }

   ._login_page_forgot {
       color: #7e22ce;
       text-decoration: none;
       transition: color 0.2s ease;
       font-size: 12px;
   }

   ._login_page_forgot:hover {
       color: #c026d3;
   }

   ._login_page_btn {
       width: 100%;
       padding: 10px;
       border: none;
       border-radius: 10px;
       background: linear-gradient(90deg, #7e22ce, #c026d3);
       color: white;
       font-weight: 600;
       font-size: 13px;
       cursor: pointer;
       transition: all 0.2s ease;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   ._login_page_btn:hover {
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(126, 34, 206, 0.3);
   }

   ._login_page_btn:active {
       transform: translateY(0);
   }

   ._login_page_btn:disabled {
       opacity: 0.7;
       cursor: not-allowed;
       transform: none;
   }

   ._login_page_btn_icon {
       margin-right: 6px;
       font-size: 12px;
   }

   ._login_page_divider {
       display: flex;
       align-items: center;
       margin: 18px 0;
       color: #6b7280;
       font-size: 12px;
   }

   ._login_page_divider::before,
   ._login_page_divider::after {
       content: '';
       flex: 1;
       height: 1px;
       background: rgba(255, 255, 255, 0.4);
   }

   ._login_page_divider_text {
       padding: 0 10px;
   }

   ._login_page_register {
       text-align: center;
   }

   ._login_page_register_text {
       color: #6b7280;
       margin-bottom: 12px;
       font-size: 12px;
   }

   ._login_page_register_btn {
       display: inline-flex;
       align-items: center;
       padding: 8px 14px;
       border: 1px solid #7e22ce;
       border-radius: 10px;
       background: rgba(255, 255, 255, 0.2);
       color: #7e22ce;
       font-weight: 600;
       text-decoration: none;
       transition: all 0.2s ease;
       font-size: 12px;
       cursor: pointer;
   }

   ._login_page_register_btn:hover {
       background: rgba(126, 34, 206, 0.1);
       transform: translateY(-1px);
       box-shadow: 0 3px 8px rgba(126, 34, 206, 0.15);
   }

   ._login_page_modal_overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.5);
       backdrop-filter: blur(4px);
       display: none;
       align-items: center;
       justify-content: center;
       z-index: 1000;
       padding: 15px;
       animation: _login_page_fadeIn 0.2s ease-out;
   }

   @keyframes _login_page_fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   ._login_page_modal_content {
       background: rgba(255, 255, 255, 0.9);
       backdrop-filter: blur(12px);
       border-radius: 16px;
       width: 100%;
       max-width: 420px;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
       animation: _login_page_scaleIn 0.3s ease-out;
       overflow: hidden;
   }

   ._login_page_modal_header {
       padding: 16px 20px;
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   ._login_page_modal_title {
       font-size: 18px;
       font-weight: 700;
       background: linear-gradient(90deg, #7e22ce, #c026d3);
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   ._login_page_modal_close {
       background: none;
       border: none;
       font-size: 20px;
       cursor: pointer;
       color: #6b7280;
       transition: color 0.2s ease;
   }

   ._login_page_modal_close:hover {
       color: #c026d3;
   }

   ._login_page_modal_body {
       padding: 20px;
   }

   ._login_page_register_options {
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   ._login_page_register_option {
       display: flex;
       align-items: center;
       padding: 12px;
       border-radius: 10px;
       background: rgba(255, 255, 255, 0.7);
       text-decoration: none;
       color: #4c1d95;
       transition: all 0.2s ease;
       border: 1px solid transparent;
   }

   ._login_page_register_option:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
       background: rgba(255, 255, 255, 0.9);
       border-color: #a855f7;
   }

   ._login_page_option_icon {
       width: 36px;
       height: 36px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-right: 12px;
       font-size: 16px;
       color: white;
   }

   ._login_page_student_icon {
       background: linear-gradient(135deg, #8b5cf6, #a855f7);
   }

   ._login_page_studio_icon {
       background: linear-gradient(135deg, #ec4899, #f97316);
   }

   ._login_page_maker_icon {
       background: linear-gradient(135deg, #10b981, #06b6d4);
   }

   ._login_page_option_content {
       flex: 1;
   }

   ._login_page_option_title {
       font-weight: 600;
       margin-bottom: 3px;
       font-size: 14px;
   }

   ._login_page_option_desc {
       font-size: 11px;
       color: #6b7280;
   }

   ._login_page_option_arrow {
       color: #9ca3af;
       transition: transform 0.2s ease;
       font-size: 12px;
   }

   ._login_page_register_option:hover ._login_page_option_arrow {
       transform: translateX(3px);
       color: #7e22ce;
   }

   /* Responsive adjustments */
   @media (max-width: 768px) {
       ._login_page_card {
           flex-direction: column;
           min-height: auto;
           max-width: 380px;
       }

       ._login_page_image_section {
           height: 160px;
       }

       ._login_page_form_section {
           padding: 22px 20px;
       }

       ._login_page_title {
           font-size: 18px;
       }

       ._login_page_modal_content {
           margin: 10px;
       }
   }

   @media (max-width: 480px) {
       ._login_page_body {
           padding: 10px;
       }

       ._login_page_image_section {
           height: 140px;
       }

       ._login_page_form_section {
           padding: 20px 18px;
       }

       ._login_page_form_input {
           padding: 9px 10px 9px 36px;
       }
   }