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

body {
font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: #f8f9fa;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}

.login-card {
display: flex;
width: 100%;
max-width: 820px;
min-height: 460px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
overflow: hidden;
}

.login-left {
flex: 1;
background: #ffffff;
align-items: center;
display: flex;
justify-content: center;
padding: 48px 36px;
min-width: 260px;
border-radius: 12px 0 0 12px;
}

.logo-container {
text-align: center;
}

.login-image {
width: 350px;
height: 350px;
object-fit: contain;
}

.login-right {
flex: 1.4;
padding: 44px 40px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 300px;
background: #e2e6ea;
border-radius: 0 12px 12px 0;
}

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

.form-header h3 {
color: #2c3e50;
font-size: 22px;
font-weight: 700;
margin-bottom: 8px;
}

.form-header p {
color: #95a5a6;
font-size: 12px;
font-weight: 500;
}

.form-container {
max-width: 360px;
margin: 0 auto;
width: 100%;
}

.form-group {
margin-bottom: 16px;
}

.form-group label {
display: block;
color: #5d6d7e;
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
}

input[type='email'],
input[type='password'] {
width: 100%;
padding: 12px 16px;
font-size: 14px;
border: 1px solid #e8ecef;
border-radius: 6px;
background: #ffffff;
color: #2c3e50;
transition: all 0.3s ease;
}

input[type='email']:focus,
input[type='password']:focus {
outline: none;
border-color: #5d6d7e;
box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.22);
}

input::placeholder {
color: #95a5a6;
}

button[type='submit'] {
width: 100%;
padding: 12px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
background: #5d6d7e;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 8px;
}

button[type='submit']:hover {
background: #4a5a6a;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(93, 109, 126, 0.3);
}

.error {
background: rgba(192, 57, 43, 0.06);
color: #c0392b;
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 16px;
text-align: center;
font-size: 12px;
font-weight: 500;
border-left: 3px solid #c0392b;
}

@media (max-width: 768px) {
.login-card {
    flex-direction: column;
    max-width: 400px;
}

.login-left {
    min-height: 160px;
    padding: 30px;
    border-radius: 12px 12px 0 0;
}

.login-right {
    padding: 32px 24px;
    border-radius: 0 0 12px 12px;
}

.login-image {
    width: 180px;
    height: 180px;
}
}