/* Split-screen sign-in pages (login.html, login_local.html) */

.auth-shell { display: flex; min-height: 100vh; }

.auth-left {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #0c3a20 0%, #1c6b34 45%, #a9c93c 100%);
}
.auth-left::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='111' viewBox='0 0 64 111'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.14)' stroke-width='1'%3E%3Cpath d='M32 0L64 18.5V55.5L32 74L0 55.5V18.5Z'/%3E%3Cpath d='M32 37L64 55.5V92.5L32 111L0 92.5V55.5Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 64px 111px;
}
.auth-left img.auth-mascot {
    position: relative;
    z-index: 1;
    max-width: 78%;
    height: auto;
}

.auth-right {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f6f7;
    padding: 40px 24px;
}
.auth-right-inner { width: 100%; max-width: 380px; text-align: center; }
.auth-right-inner img.auth-logo { height: 48px; margin-bottom: 28px; }

.auth-heading {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 22px;
}

.auth-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(15, 60, 30, 0.10);
    padding: 26px 24px;
    text-align: center;
}
.auth-card-title {
    color: var(--brand-primary, #1f8a3c);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 18px;
}

.btn-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    margin-bottom: 12px;
    border: none;
}
.btn-auth:last-of-type { margin-bottom: 0; }
.btn-auth-ms { background: #3f7c4c; color: #fff; }
.btn-auth-ms:hover { background: #336640; color: #fff; }
.btn-auth-local { background: #5c6b64; color: #fff; }
.btn-auth-local:hover { background: #4a564f; color: #fff; }

.auth-links { margin-top: 18px; font-size: 0.85rem; }
.auth-links a { color: #1a1a1a; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-links .sep { color: #9aa39e; margin: 0 8px; }

.auth-form { text-align: left; }

@media (max-width: 860px) {
    .auth-left { display: none; }
    .auth-right { flex: 1 1 100%; }
}