:root {
    --navy: #001f3f;
    --yellow: #ffdd21;
    --white: #ffffff;
    --muted: #c8d2dc;
    --danger: #ffaaa9;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    background: var(--navy);
    color: var(--white);
    font-family: Arial, Helvetica, sans-serif;
}

.login-page {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr);
    min-height: 100vh;
}

.login-visual { position: relative; min-height: 100vh; overflow: hidden; }
.login-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.login-visual__shade { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 70%, rgba(0,31,63,.18)); }

.login-panel { display: flex; justify-content: center; padding: 46px 44px 28px; }
.login-card { width: 100%; max-width: 430px; text-align: center; }
.login-logo { display: block; width: 104px; height: auto; margin: 4px auto 26px; }
.login-heading h1 { margin: 0 0 7px; font-size: 21px; line-height: 1.2; }
.login-heading p { margin: 0 0 27px; font-size: 19px; }

.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.form-control { width: 100%; height: 48px; border: 1px solid #d5dbe0; border-radius: 0; background: #fff; padding: 0 15px; color: #182838; font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s; }
.form-control:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,221,33,.2); }
.form-control.is-invalid { border-color: var(--danger); }
.password-field { position: relative; }
.password-field .form-control { padding-right: 52px; }
.password-toggle { position: absolute; inset: 1px 1px 1px auto; width: 48px; border: 0; border-left: 1px solid #d5dbe0; background: #eef1f4; color: #506070; cursor: pointer; }
.password-toggle svg { position: absolute; width: 21px; height: 21px; inset: 50% auto auto 50%; transform: translate(-50%,-50%); fill: currentColor; }
.password-toggle .eye-open, .password-toggle.is-visible .eye-closed { display: none; }
.password-toggle.is-visible .eye-open { display: block; }
.error-message { margin: 7px 0 0; color: var(--danger); font-size: 13px; }
.remember-row { display: flex; width: fit-content; align-items: center; gap: 8px; margin: -5px 0 18px; color: var(--muted); font-size: 13px; cursor: pointer; }
.remember-row input { accent-color: var(--yellow); }
.login-button { width: 100%; height: 48px; border: 0; border-radius: 0; background: var(--yellow); color: var(--navy); font-size: 15px; font-weight: 800; cursor: pointer; transition: filter .2s, transform .1s; }
.login-button:hover { filter: brightness(.94); }
.login-button:active { transform: translateY(1px); }
.login-button:disabled { cursor: wait; opacity: .75; }
.forgot-link { display: inline-block; margin-top: 22px; color: #fff; font-size: 14px; text-decoration: none; transition: color .2s; }
.forgot-link:hover { color: var(--yellow); }
.copyright { margin-top: 25px; color: #fff; font-size: 12px; font-style: italic; line-height: 1.5; }
.alert { margin-bottom: 20px; padding: 12px; text-align: left; font-size: 14px; }
.alert-success { background: #e4f8e9; color: #155d27; }
.alert-warning { background: #fff4d6; color: #725600; }

@media (max-width: 767px) {
    .login-page { display: block; }
    .login-visual { display: none; }
    .login-panel { min-height: 100vh; align-items: center; padding: 40px 32px; }
    .login-logo { margin-top: 0; }
}

@media (min-width: 768px) and (max-width: 1050px) {
    .login-page { grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr); }
    .login-panel { padding-inline: 25px; }
}