/* assets/css/login.css: page-specific rules for login.html only */

.lg-body { min-height: 100vh; }

.lg-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.lg-brand {
    display: flex; flex-direction: column; justify-content: center; gap: var(--eb-space-4);
    padding: var(--eb-space-12);
    background: var(--eb-primary);
    color: var(--eb-on-primary);
}
.lg-brand__mark { font-size: 56px; color: var(--eb-on-primary); line-height: 1; }
.lg-brand__line {
    max-width: 380px;
    font-family: var(--eb-font-display); font-size: 26px; line-height: 1.3;
    color: rgba(255, 255, 255, 0.86);
}

.lg-card {
    align-self: center; justify-self: center;
    width: min(420px, calc(100% - 32px));
    padding: var(--eb-space-8);
    display: flex; flex-direction: column; gap: var(--eb-space-5);
}
.lg-form { display: flex; flex-direction: column; gap: var(--eb-space-4); }
.lg-form[hidden] { display: none; }
.lg-head { display: flex; flex-direction: column; gap: 4px; }
.lg-title { font-family: var(--eb-font-display); font-weight: 500; font-size: var(--eb-text-2xl); }

.lg-error {
    padding: 10px 12px; border-radius: var(--eb-radius-md);
    background: var(--eb-negative-bg); color: var(--eb-negative-fg);
    font-size: var(--eb-text-md);
}
.lg-error[hidden] { display: none; }

.lg-code { font-size: 22px; letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; }
.lg-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.lg-foot { text-align: center; }

@media (max-width: 820px) {
    .lg-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .lg-brand { padding: var(--eb-space-6) var(--eb-space-5); }
    .lg-brand__mark { font-size: 36px; }
    .lg-brand__line { font-size: 18px; }
    .lg-card { margin: var(--eb-space-6) 0; }
}