/* ══════════════════════════════════════════════════════════════
   MarketingOS — Login Page
   ══════════════════════════════════════════════════════════════ */

.mos-login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--mos-space-4);
    background: var(--mos-bg);
}

.mos-login-card {
    width: 100%;
    max-width: 420px;
    background: var(--mos-surface);
    border-radius: var(--mos-radius-xl);
    box-shadow: var(--mos-shadow-lg);
    padding: var(--mos-space-10);
    border: 1px solid var(--mos-border);
}

@media (max-width: 480px) {
    .mos-login-card {
        padding: var(--mos-space-6);
        border-radius: var(--mos-radius-lg);
    }
}

/* ── Brand Area ── */
.mos-login-logo {
    text-align: center;
    margin-block-end: var(--mos-space-8);
}

.mos-login-logo h1 {
    font-size: var(--mos-text-2xl);
    font-weight: 700;
    color: var(--mos-primary);
    margin-block-end: var(--mos-space-2);
}

.mos-login-logo p {
    font-size: var(--mos-text-sm);
    color: var(--mos-muted);
}

/* ── Login Form ── */
.mos-login-card .mos-btn--full {
    margin-block-start: var(--mos-space-2);
    padding: var(--mos-space-3) var(--mos-space-5);
    font-size: var(--mos-text-base);
}

/* ── Language Toggle ── */
.mos-login-lang-toggle {
    display: flex;
    justify-content: flex-end;
    margin-block-end: var(--mos-space-4);
}

.mos-login-lang-toggle .mos-btn {
    font-weight: 600;
    letter-spacing: 0.05em;
}