/* ============ RESET & BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', Arial, sans-serif; background: transparent; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; }

/* ============ PAGE WRAPPER ============ */
.page-wrapper { max-width: 450px; width: 100%; }

/* ============ MODAL ============ */
.modal { background: white; border-radius: 25px; max-width: 450px; width: 100%; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); overflow: hidden; }
.modal-content { padding: 40px 35px; }

/* ============ LOGO ============ */
.logo-container { text-align: center; margin-bottom: 20px; }
.logo-container img { max-height: 100px; max-width: 400px; }

/* ============ SCREEN TRANSITIONS ============ */
.screen { display: none; animation: fadeIn 0.3s ease-out; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ============ PORTAL SELECTION ============ */
.portal-selection h2 { color: #004c8b; font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 8px; }
.portal-selection > p { text-align: center; color: #666; font-size: 14px; margin-bottom: 25px; }
.portal-buttons { display: flex; flex-direction: column; gap: 12px; }
.portal-btn { width: 100%; padding: 18px 20px; border: 2px solid #e0e0e0; background: white; border-radius: 12px; font-size: 16px; font-weight: 600; color: #2c3e50; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 15px; }
.portal-btn:hover { border-color: #004c8b; background: #f0f8ff; transform: translateX(5px); }
.portal-icon { font-size: 28px; }

/* ============ LOGIN FORM ============ */
.login-form-container h2 { color: #004c8b; font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 8px; }
#welcomeMessage, #registerMessage { text-align: center; color: #666; font-size: 13px; margin-bottom: 25px; }
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 14px; font-weight: 600; color: #2c3e50; margin-bottom: 8px; }

/* ============ INPUT WRAPPER ============ */
.input-wrapper { position: relative; display: flex; align-items: center; border: 2px solid #e0e0e0; border-radius: 10px; background: #f8f9fa; transition: all 0.3s; }
.input-wrapper:focus-within { border-color: #004c8b; background: white; }
.input-icon { padding: 12px 0 12px 15px; color: #2c3e50; font-size: 18px; }
.form-input { flex: 1; padding: 12px 15px 12px 8px; border: none; background: transparent; font-size: 14px; font-family: inherit; outline: none; }
.form-input::placeholder { color: #bdc3c7; }
.input-hint { color: #95a5a6; font-size: 11px; margin-top: 4px; display: block; }

/* ============ PASSWORD TOGGLE ============ */
.password-toggle { padding: 12px 15px 12px 8px; background: none; border: none; cursor: pointer; color: #7f8c8d; display: flex; align-items: center; }
.password-toggle:hover { color: #2c3e50; }
.eye-icon { width: 20px; height: 20px; }

/* ============ FORM OPTIONS ============ */
.form-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 13px; }
.remember-me { display: flex; align-items: center; gap: 8px; }
.remember-me input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.remember-me label { color: #2c3e50; cursor: pointer; }
.forgot-link a { color: #e74c3c; text-decoration: none; font-weight: 500; }
.forgot-link a:hover { text-decoration: underline; }

/* ============ BUTTONS ============ */
.submit-btn { width: 100%; padding: 14px; background: #004c8b; color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s; margin-bottom: 12px; position: relative; }
.submit-btn:hover { background: #003a6b; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 76, 139, 0.3); }
.submit-btn.loading { background: #95a5a6; pointer-events: none; }
.submit-btn.loading::after { content: ''; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid white; border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
.back-btn { width: 100%; padding: 12px; background: white; color: #004c8b; border: 2px solid #e0e0e0; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; margin-bottom: 15px; }
.back-btn:hover { border-color: #004c8b; background: #f8f9fa; }

/* ============ FORM FOOTER ============ */
.form-footer { text-align: center; font-size: 14px; color: #2c3e50; }
.form-footer a { color: #004c8b; font-weight: 600; text-decoration: none; }
.form-footer a:hover { text-decoration: underline; }

/* ============ COPYRIGHT ============ */
.copyright { text-align: center; color: white; margin-top: 20px; font-size: 13px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 480px) {
    .modal-content { padding: 30px 25px; }
    .portal-selection h2, .login-form-container h2 { font-size: 20px; }
    .portal-btn { padding: 15px 18px; font-size: 15px; }
}