.login-page {
    padding: 70px 0;
    background: linear-gradient(145deg, #fffdfa 0%, #f3e7d4 100%);
}

.login-shell {
    width: min(1050px, 92%);
    min-height: 650px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(67, 35, 21, .15);
}

.login-visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 54px;
    color: #fff;
    background: linear-gradient(180deg, rgba(43, 20, 10, .08), rgba(43, 20, 10, .8)),
                url("https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&w=1100&q=85") center/cover;
}

.login-visual-copy span,
.login-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.login-visual-copy h1 {
    margin-bottom: 18px;
    font-size: clamp(2.5rem, 4vw, 4rem);
}

.login-visual-copy p {
    max-width: 410px;
    color: rgba(255, 255, 255, .84);
}

.login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(38px, 5vw, 70px);
}

.login-eyebrow { color: var(--rose); }
.login-heading { margin-bottom: 30px; }
.login-heading h2 { margin-bottom: 10px; font-size: clamp(2rem, 3vw, 2.8rem); }
.login-heading p { color: var(--muted); }

.login-method-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 22px; padding: 4px; border-radius: 9px; background: #f3ebe3; }
.login-method { min-height: 42px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: .18s; }
.login-method.active { background: #fff; color: var(--brown); box-shadow: 0 3px 12px rgba(67,35,21,.1); }
.login-identifier[hidden] { display: none !important; }
.phone-input-group { display: grid; grid-template-columns: 88px minmax(0,1fr); }
.country-code { height: 52px; padding: 0 8px; border: 1px solid #d9c9b9; border-right: 0; border-radius: 5px 0 0 5px; outline: 0; background: #f7efe7; color: var(--brown); font: inherit; font-size: .86rem; font-weight: 500; letter-spacing: 0; cursor: pointer; }
.phone-input-group .field-input { border-radius: 0 5px 5px 0; }
.country-code:focus { position: relative; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(122,67,40,.12); }

.field { margin-bottom: 20px; }
.field > label, .field-label-row label { display: block; margin-bottom: 8px; font-size: .88rem; font-weight: 700; }
.field-label-row { display: flex; justify-content: space-between; gap: 15px; }
.forgot-link { color: var(--rose); font-size: .8rem; font-weight: 700; }
.forgot-link:hover { text-decoration: underline; }

.field-input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #d9c9b9;
    border-radius: 5px;
    outline: 0;
    background: #fffdfa;
    color: var(--brown);
    font: inherit;
    transition: border-color .2s, box-shadow .2s;
}

.field-input:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(122, 67, 40, .12); }
.field-error { display: block; margin-top: 6px; color: #a12626; font-size: .78rem; }
.validation-summary, .login-message { margin-bottom: 20px; padding: 12px 15px; border-radius: 5px; font-size: .82rem; }
.validation-summary { border: 1px solid #ebc4c4; background: #fff1f1; color: #8b2020; }
.validation-summary ul { margin: 6px 0 0 18px; }
.login-message.is-info { display: block; border: 1px solid #dcc6a8; background: #fff8e9; color: #68451e; }
.login-message.is-error { display: block; border: 1px solid #ebc4c4; background: #fff1f1; color: #8b2020; }

.remember-row { display: flex; align-items: center; gap: 9px; margin: 0 0 24px; color: var(--muted); font-size: .85rem; cursor: pointer; }
.remember-row input { width: 17px; height: 17px; accent-color: var(--rose); }

.login-button {
    width: 100%;
    height: 53px;
    border: 0;
    border-radius: 5px;
    background: var(--brown);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.login-button:hover { background: var(--rose); transform: translateY(-1px); }
.register-row { margin-top: 24px; text-align: center; color: var(--muted); font-size: .88rem; }
.register-row a { color: var(--rose); font-weight: 700; }
.login-note { margin-top: 28px; color: #a18d83; text-align: center; font-size: .72rem; }

@media (max-width: 820px) {
    .login-page { padding: 40px 0; }
    .login-shell { grid-template-columns: 1fr; min-height: 0; }
    .login-visual { display: none; }
    .login-panel { padding: 45px 38px; }
}

@media (max-width: 560px) {
    .login-page { padding: 0; }
    .login-shell { width: 100%; border-radius: 0; box-shadow: none; }
    .login-panel { padding: 38px 24px 48px; }
    .phone-input-group { grid-template-columns: 86px minmax(0,1fr); }
}