* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { background: #505050; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; }

.login-container { display: flex; width: 100%; max-width: 900px; height: auto; min-height: 450px; background: #fff; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); overflow: hidden; flex-direction: column; }
.login-form { width: 100%; padding: 50px; display: flex; flex-direction: column; justify-content: center; }
.login-image { width: 100%; height: 250px; background: #E0E0E0; background-size: cover; background-position: center; transition: background-image 0.5s ease; }

@media (min-width: 992px) {
  .login-container { flex-direction: row; height: 450px; }
  .login-form { width: 50%; padding: 55px; }
  .login-image { width: 50%; height: auto; }
}

.login-header { margin-bottom: 0px; }
.login-header h1 { font-size: 24px; font-weight: 600; color: #333; margin-bottom: 10px; }
.login-header p { color: #777; font-size: 14px; margin-top: -5px; }

.form-group { margin-bottom: 25px; position: relative; }
.form-group label { display: block; margin-bottom: 10px; font-weight: 500; color: #555; font-size: 14px; }
.form-control { width: 100%; padding: 12px 14px 12px 14px; border: 1px solid #C0C0C0; border-radius: 6px; font-size: 14px; transition: all 0.2s ease; }
.form-control:focus { border-color: #888; outline: none; box-shadow: 0 0 0 2px rgba(136, 136, 136, 0.1); }

.password-toggle { position: absolute; right: 15px; top: 45px; cursor: pointer; color: #999; user-select: none; font-size: 14px; }

.login-btn { width: 100%; padding: 14px; background: #333; border: none; border-radius: 6px; color: white; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.2s; margin-top: 20px; }
.login-btn:hover { background: #555; }

.info-message { margin-bottom: 25px; }
.info-message:has(.error-message) { margin-bottom: 0px; }

.error-message { background-color: #ffebee; color: #c62828; padding: 12px 20px; border-radius: 4px; border-left: 4px solid #c62828; margin: 15px 0; display: flex; align-items: center; animation: fadeIn 0.3s ease-in-out; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); }
}