:root {
     --primary-dark: #003366;
     --primary-medium: #336699;
     --accent-green: #4CAF50;
     --accent-yellow: #FFEB3B;
     --neutral-light: #F5F5F5;
     --white: #FFFFFF;
     --text-primary: #1a1a1a;
     --text-secondary: #666666;
     --border-color: #e1e5e9;
     --shadow-light: 0 2px 10px rgba(0, 51, 102, 0.08);
     --shadow-medium: 0 8px 32px rgba(0, 51, 102, 0.12);
     --border-radius: 12px;
     --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

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

 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     font-size: 16px;
     line-height: 1.6;
 }

 .signup-wrapper {
     width: 100%;
     max-width: 1200px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0;
     background: var(--white);
     border-radius: var(--border-radius);
     overflow: hidden;
     box-shadow: var(--shadow-medium);
     margin: 20px auto;
 }

 .info-section {
     background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
     padding: 40px 30px;
     color: var(--white);
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
 }

 .info-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
     opacity: 0.3;
 }

 .info-content {
     position: relative;
     z-index: 1;
 }

 .brand-logo {
     display: flex;
     align-items: center;
     margin-bottom: 40px;
 }

 .brand-logo i {
     font-size: 32px;
     margin-right: 12px;
     color: var(--accent-yellow);
 }

 .brand-logo h1 {
     font-size: 28px;
     font-weight: 700;
     color: var(--white);
 }

 .info-title {
     font-size: 36px;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 20px;
     color: var(--white);
 }

 .info-subtitle {
     font-size: 18px;
     opacity: 0.9;
     margin-bottom: 40px;
     color: var(--white);
 }

 .feature-list {
     list-style: none;
 }

 .feature-list li {
     display: flex;
     align-items: center;
     margin-bottom: 16px;
     font-size: 16px;
     color: var(--white);
 }

 .feature-list i {
     color: var(--accent-green);
     margin-right: 12px;
     width: 20px;
 }

 .form-section {
     padding: 40px 30px;
     background: var(--white);
 }

 .form-header {
     text-align: center;
     margin-bottom: 40px;
 }

 .form-title {
     font-size: 24px;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 8px;
 }

 .form-subtitle {
     color: var(--text-secondary);
     font-size: 16px;
 }

 .verification-badge {
     background: linear-gradient(135deg, var(--accent-yellow), #FFC107);
     color: var(--text-primary);
     padding: 16px;
     border-radius: var(--border-radius);
     margin-bottom: 32px;
     display: flex;
     align-items: center;
     font-size: 14px;
     font-weight: 500;
     border-left: 4px solid #FF9800;
 }

 .verification-badge i {
     font-size: 18px;
     margin-right: 12px;
     color: var(--primary-dark);
 }

 .form-grid {
     display: grid;
     gap: 20px;
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 .form-group {
     position: relative;
 }

 .form-group.full-width {
     grid-column: 1 / -1;
 }

 .form-label {
     display: block;
     color: var(--text-primary);
     font-weight: 500;
     margin-bottom: 8px;
     font-size: 14px;
 }

 .form-input,
 .form-select,
 select {
     width: 100%;
     padding: 16px 20px;
     border: 2px solid var(--border-color);
     border-radius: var(--border-radius);
     font-size: 16px;
     font-family: inherit;
     transition: var(--transition);
     background: var(--white);
     color: var(--text-primary);
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
 }

 .form-input:focus,
 .form-select:focus,
 select:focus {
     outline: none;
     border-color: var(--accent-green);
     box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.1);
 }

 .form-input::placeholder {
     color: #999;
 }

 /* Custom select arrow */
 .form-group select {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
     background-position: right 12px center;
     background-repeat: no-repeat;
     background-size: 16px;
     padding-right: 40px;
 }

 .password-field {
     position: relative;
 }

 .validation-message {
     margin-top: 8px;
     font-size: 14px;
     font-weight: 500;
 }

 .validation-message.available {
     color: var(--accent-green);
 }

 .validation-message.taken {
     color: #ff4444;
 }

 .password-toggle {
     position: absolute;
     right: 16px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: var(--text-secondary);
     cursor: pointer;
     font-size: 16px;
     transition: var(--transition);
     padding: 4px;
 }

 .password-toggle:hover {
     color: var(--primary-medium);
 }

 .password-strength {
     margin-top: 8px;
     font-size: 12px;
 }

/* Forgot Password Link Styling */
.forgot-password-link {
    text-align: right;
    margin-top: 8px;
}

.forgot-password-link a {
    color: var(--primary-medium);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

.forgot-password-link a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Alternative centered styling */
.forgot-password-link.centered {
    text-align: center;
}

/* Alternative with icon */
.forgot-password-link.with-icon a::before {
    content: "\f084"; /* FontAwesome key icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
}

 .strength-bar {
     height: 4px;
     background: var(--border-color);
     border-radius: 2px;
     margin-top: 4px;
     overflow: hidden;
 }

 .strength-fill {
     height: 100%;
     background: var(--accent-green);
     width: 0%;
     transition: var(--transition);
 }

 .strength-text {
     color: var(--text-secondary);
     margin-top: 4px;
 }

 .checkbox-wrapper {
     margin: 24px 0;
 }

 .custom-checkbox {
     position: relative;
     width: 20px;
     height: 20px;
     flex-shrink: 0;
     margin-top: 2px;
 }

 .custom-checkbox input {
     position: absolute;
     opacity: 0;
     width: 100%;
     height: 100%;
     cursor: pointer;
 }

 .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 20px;
     width: 20px;
     background-color: var(--white);
     border: 2px solid var(--border-color);
     border-radius: 4px;
     transition: var(--transition);
 }

 .custom-checkbox input:checked~.checkmark {
     background-color: var(--accent-green);
     border-color: var(--accent-green);
 }

 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }

 .custom-checkbox input:checked~.checkmark:after {
     display: block;
 }

 .custom-checkbox .checkmark:after {
     left: 6px;
     top: 2px;
     width: 4px;
     height: 8px;
     border: solid var(--white);
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }

 .checkbox-label {
     font-size: 14px;
     color: var(--text-secondary);
     line-height: 1.5;
     cursor: pointer;
     display: flex;
     align-items: flex-start;
     gap: 12px;
 }

 .checkbox-label a {
     color: var(--primary-medium);
     text-decoration: none;
     font-weight: 500;
 }

 .checkbox-label a:hover {
     text-decoration: underline;
 }

 .submit-btn {
     width: 100%;
     background: linear-gradient(135deg, var(--accent-green), #45a049);
     color: var(--white);
     border: none;
     padding: 18px;
     border-radius: var(--border-radius);
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     margin-top: 24px;
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 }

 .submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
 }

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

 .submit-btn:disabled {
     background: #ccc;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
 }

 .divider {
     text-align: center;
     margin: 32px 0;
     position: relative;
     color: var(--text-secondary);
 }

 .divider::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     height: 1px;
     background: var(--border-color);
 }

 .divider span {
     background: var(--white);
     padding: 0 20px;
     font-size: 14px;
 }

 .signin-link {
     text-align: center;
 }

 .signin-link p {
     color: var(--text-secondary);
 }

 .signin-link a {
     color: var(--primary-medium);
     text-decoration: none;
     font-weight: 600;
     font-size: 16px;
 }

 .signin-link a:hover {
     color: var(--primary-dark);
     text-decoration: underline;
 }

 /* Loading state */
 .loading-spinner {
     width: 16px;
     height: 16px;
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-top: 2px solid var(--white);
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-right: 8px;
 }

 .custom-year-select {
     position: relative;
 }

 .year-display {
     width: 100%;
     padding: 16px 20px;
     border: 2px solid var(--border-color);
     border-radius: var(--border-radius);
     background: var(--white);
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: var(--transition);
 }

 .year-display:hover {
     border-color: var(--accent-green);
 }

 .year-dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: var(--white);
     border: 2px solid var(--border-color);
     border-radius: var(--border-radius);
     max-height: 200px;
     overflow-y: auto;
     z-index: 100;
     display: none;
 }

 .year-option {
     padding: 12px 20px;
     cursor: pointer;
     transition: var(--transition);
 }

 .year-option:hover {
     background: var(--neutral-light);
 }

 .year-option.selected {
     background: var(--accent-green);
     color: var(--white);
 }





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

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

 /* Responsive Design - Mobile First */
 @media (max-width: 968px) {
     body {
         padding: 0;
         align-items: flex-start;
     }

     .signup-wrapper {
         grid-template-columns: 1fr;
         max-width: 100%;
         border-radius: 0;
         min-height: 100vh;
     }

     .info-section {
         order: 1;
         /* Keep at top for mobile */
         padding: 30px 20px;
         text-align: center;
     }

     .brand-logo {
         justify-content: center;
         margin-bottom: 20px;
     }

     .brand-logo h1 {
         font-size: 24px;
     }

     .info-title {
         font-size: 22px;
         margin-bottom: 12px;
     }

     .info-section {
         padding: 20px 15px;
     }

     .info-subtitle {
         font-size: 16px;
         margin-bottom: 20px;
     }

     .feature-list {
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         gap: 16px;
     }

     .feature-list li {
         font-size: 14px;
         margin-bottom: 8px;
         flex: 0 0 auto;
     }

     .feature-list li:nth-child(n+4) {
         display: none;
         /* Hide extra features on mobile */
     }

     .form-section {
         order: 2;
         padding: 20px 15px;
     }

     .form-title {
         font-size: 20px;
     }
 }

 @media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .info-section,
    .form-section {
        padding: 24px 16px;
    }

    .verification-badge {
        padding: 12px;
        font-size: 13px;
     }

    .form-input,
    .form-select,
    select,
    .submit-btn {
         padding: 14px 16px;
     }

    .forgot-password-link {
        text-align: center;
        margin-top: 12px;
    }
    
    .forgot-password-link a {
        font-size: 13px;
    }
 }

 @media (max-width: 480px) {
     .info-section {
         padding: 20px 16px;
     }

     .form-section {
         padding: 15px 12px;
     }

     .brand-logo i {
         font-size: 24px;
     }

     .brand-logo h1 {
         font-size: 20px;
     }

     .info-title {
         font-size: 18px;
     }

     .feature-list li {
         font-size: 12px;
     }
 }

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

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

 .signup-wrapper {
     animation: slideUp 0.6s ease-out;
 }

 /* Accessibility improvements */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         transition-duration: 0.01ms !important;
     }
 }

 /* High contrast mode */
 @media (prefers-contrast: high) {
     :root {
         --border-color: #000000;
         --text-secondary: #000000;
     }
 }