* {box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif;}
body {height: 100vh; background-color: #f4f7fa; display: flex; justify-content: center; align-items: center;}
.container {display: flex; padding: 0 20px 0 0; width: 90%; max-width: 1000px; height: 535px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); overflow: hidden; background-color: #fff;}
.image-side {flex: 1; display: flex; align-items: center; justify-content: center; background-color: #f0f4f9;}
.image-side img {width: 100%; height: auto;}
.form-side {flex: 1; padding: 3rem 2.5rem; display: flex; flex-direction: column; justify-content: center; max-width: 47%; text-align: center;}
.form-side h2 {font-size: 2rem; margin-bottom: 1rem; color: #222; font-weight: 600; text-align: center;}
.form-side p {font-size: 1rem; margin-bottom: 2rem; color: #555; text-align: center;}
form {display: flex; flex-direction: column;}
label {font-size: 0.95rem; margin-bottom: 0.4rem; color: #333;}
input {padding: 0.75rem 1rem; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; transition: border-color 0.2s;}
input:focus {outline: none; border-color: #007bff;}

.login-button {padding: 0.75rem 1rem; background-color: #007bff; color: #fff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease;}
.login-button:hover {background-color: #0056b3;}
.footer-text {margin-top: 15px; font-size: 0.95rem; color: #555; text-align: center;}
.footer-text a {color: #007bff; text-decoration: none;}
.footer-text a:hover {text-decoration: underline;}
.password-wrapper {position: relative;margin: 20px 0;}
.password-wrapper input {width: 100%;padding-right: 40px;}
.toggle-password {position: absolute;top: 50%;right: 12px;transform: translateY(-50%);cursor: pointer;color: #c9c9c9;}
.error-message {display: flex;align-items: center;gap: 10px;background-color: #ffe9e7;color: #f90f0f;border: 1px solid #df7272;padding: 12px 16px;border-radius: 8px;font-size: 15px;font-weight: 500;margin-bottom: 20px;}
.error-message::before {font-size: 18px;}
@media (max-width: 950px) {
.container {flex-direction: column; padding: 0 15px 0; height: auto;}
.image-side {display: none;}
.form-side {max-width: 100%;padding: 30px 0;}
}