.login-page {
min-height: 100vh;


display: flex;
align-items: center;
justify-content: center;

padding: 40px 20px;


}

.login-card {
width: 100%;
max-width: 440px;


padding: 40px;

background: var(--panel);

border: 1px solid var(--border);

border-radius: 18px;

box-shadow: var(--shadow);


}

.login-header {
text-align: center;


margin-bottom: 30px;


}

.logo-placeholder {
width: 60px;
height: 60px;


margin: 0 auto 18px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 14px;

background: var(--primary);

color: white;

font-size: 20px;
font-weight: 700;


}

.login-header h1 {
margin: 0 0 8px;


color: var(--text);

font-size: 26px;


}

.login-header p {
margin: 0;


color: var(--muted);

font-size: 14px;


}

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

.form-group label {
display: block;


margin-bottom: 8px;

color: var(--text);

font-size: 14px;
font-weight: 600;


}

.form-group input {
width: 100%;


box-sizing: border-box;

padding: 13px 14px;

border: 1px solid var(--border);

border-radius: 10px;

background: var(--panel);

color: var(--text);

font-size: 15px;

outline: none;

transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;


}

.form-group input:focus {
border-color: var(--primary);


box-shadow:
    0 0 0 3px var(--primary-soft);


}

#loginButton {
width: 100%;


padding: 14px;

border: none;

border-radius: 10px;

background: var(--primary);

color: white;

font-size: 15px;
font-weight: 600;

cursor: pointer;


}

#loginButton:hover {
background: var(--primary-deep);
}

#loginButton:disabled {
opacity: 0.6;


cursor: not-allowed;


}

.login-message {
display: none;


margin-bottom: 18px;

padding: 12px 14px;

border-radius: 10px;

font-size: 14px;

line-height: 1.5;


}

.login-message.error {
display: block;


background: #fee2e2;

color: #991b1b;


}

.login-message.success {
display: block;


background: #d1fae5;

color: #065f46;


}

.login-footer {
margin-top: 25px;


text-align: center;


}

.login-footer p {
margin: 0;


color: var(--muted);

font-size: 14px;


}

.login-footer a {
color: var(--primary);


font-weight: 600;

text-decoration: none;


}

.login-footer a:hover {
text-decoration: underline;
}

@media (max-width: 520px) {


.login-page {
    padding: 20px 15px;
}

.login-card {
    padding: 28px 22px;
}

.login-header h1 {
    font-size: 23px;
}


}