/* ============================================================
   Login (/Account/Login) — uses _LoginLayout (indigo body).
   Scoped under .lg so it can't affect other pages.
   ============================================================ */

.lg {
    --lg-brand: #3f51b5;
    --lg-brand-d: #2c3a91;
    --lg-brand-l: #5c6bc0;
    --lg-accent: #ff7a59;
    --lg-red: #d23f4d;
    --lg-ink: #16225a;
    --lg-body: #4d5468;
    --lg-muted: #8a90a2;
    --lg-line: #e4e7f2;
    --lg-bg-soft: #f6f7fb;

    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 18px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--lg-brand-d), var(--lg-brand) 55%, var(--lg-brand-l));
    font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
}
.lg * { box-sizing: border-box; }
.lg::before, .lg::after { content: ""; position: absolute; border-radius: 50%; }
.lg::before { width: 460px; height: 460px; top: -200px; right: -140px; background: rgba(255, 255, 255, .07); }
.lg::after { width: 360px; height: 360px; bottom: -180px; left: -120px; background: rgba(255, 122, 89, .14); }

/* ---------- Card ---------- */
.lg-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 430px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 40px 80px -30px rgba(8, 11, 30, .7);
    padding: 40px 38px 34px;
    text-align: center;
}
.lg-card--wide { max-width: 470px; }
.lg-recaptcha { display: flex; justify-content: center; margin: 10px 0 18px; }
.lg-logo { display: inline-block; margin-bottom: 22px; }
.lg-logo img { height: 52px; width: auto; display: block; }
.lg-card h1 {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-size: 26px; font-weight: 800; color: var(--lg-ink);
    margin: 0 0 6px;
}
.lg-sub { color: var(--lg-muted); font-size: 15px; margin: 0 0 28px; }

/* ---------- Form ---------- */
.lg-form { text-align: left; }
.lg-field { margin-bottom: 18px; }
.lg-field label { display: block; font-size: 13px; font-weight: 600; color: var(--lg-ink); margin-bottom: 7px; }
.lg-input { position: relative; }
.lg-input > i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--lg-muted); font-size: 15px;
}
.lg-input input {
    width: 100%;
    height: 52px;
    border: 1.5px solid var(--lg-line);
    border-radius: 13px;
    padding: 0 16px 0 44px;
    font-size: 15px;
    color: var(--lg-ink);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.lg-input input:focus {
    outline: none;
    border-color: var(--lg-brand);
    box-shadow: 0 0 0 3px rgba(63, 81, 181, .14);
}
.lg-input input:focus + i, .lg-input:focus-within > i { color: var(--lg-brand); }

.lg-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    margin-top: 6px;
    padding: 15px 24px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.lg-btn:not(.lg-btn--ghost) {
    background: linear-gradient(135deg, var(--lg-brand-l), var(--lg-brand));
    color: #fff;
    box-shadow: 0 14px 26px -12px rgba(63, 81, 181, .8);
}
.lg-btn:not(.lg-btn--ghost):hover { transform: translateY(-2px); color: #fff; }
.lg-btn--ghost {
    background: #fff;
    border-color: var(--lg-line);
    color: var(--lg-ink);
}
.lg-btn--ghost:hover { border-color: var(--lg-brand); color: var(--lg-brand); transform: translateY(-2px); }

.lg-forgot { text-align: center; margin-top: 16px; }
.lg-forgot a { color: var(--lg-brand); font-size: 14px; text-decoration: none; font-weight: 500; }
.lg-forgot a:hover { text-decoration: underline; }

/* ---------- Divider + register ---------- */
.lg-divider {
    display: flex; align-items: center; gap: 14px;
    margin: 24px 0 18px;
    color: var(--lg-muted); font-size: 13px;
}
.lg-divider::before, .lg-divider::after { content: ""; flex: 1; height: 1px; background: var(--lg-line); }

/* ---------- Validation errors ---------- */
.lg .validation-summary-valid { display: none; }
.lg .validation-summary-errors {
    background: rgba(210, 63, 77, .08);
    border: 1px solid rgba(210, 63, 77, .3);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
}
.lg .validation-summary-errors ul { margin: 0; padding: 0; list-style: none; }
.lg .validation-summary-errors li { color: var(--lg-red); font-size: 13.5px; line-height: 1.5; }

@media (max-width: 420px) {
    .lg-card { padding: 32px 24px 28px; }
}