/* Only InfinityDS form fields and metadata; the three Lumiline styles stay intact. */
.auth-page .auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: var(--auth-muted);
    font-size: 11px;
    line-height: 1.8;
}
.auth-page .auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    cursor: pointer;
}
.auth-page .auth-remember input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--slate-haze-primary-strong);
    flex: 0 0 auto;
}
.auth-page .auth-support-note { overflow-wrap: anywhere; }
.auth-page .auth-error { margin-bottom: 18px; overflow-wrap: anywhere; }
html[data-theme="light"] .auth-page .auth-error {
    color: #952626;
    background: #fff0f0;
    border-color: #e8b0b0;
}
.auth-page .auth-footer { flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.auth-page .auth-developer { font: inherit !important; letter-spacing: normal !important; }
.auth-page .auth-developer a { text-decoration: underline; text-underline-offset: 3px; }
.auth-page .auth-version-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--auth-muted);
}
.auth-page .auth-version-badge .app-version-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.auth-page .auth-version-badge .app-version-number { font: 600 10px/1.5 Arial, sans-serif; }
.auth-page .auth-version-badge span { font: inherit; letter-spacing: normal; }
.auth-page .auth-brand-mark { flex: 0 0 auto; }
.auth-page .auth-grain { pointer-events: none; }
.auth-page .auth-visual-content { pointer-events: none; }
html[dir="ltr"] .auth-page .auth-visual-content { direction: ltr; }
@media (hover: none) and (pointer: coarse) {
    .auth-page .auth-remember { min-height: 44px; }
}

/* InfinityDS login art: mirror the existing composition vertically so the
 * right-hand flow starts from the south-east/east and the left-hand flow
 * starts from the north-west/west, without changing the panel geometry. */
.auth-page .auth-visual {
    background: #141c1f;
}
.auth-page .auth-grain {
    transform: scaleY(-1);
    transform-origin: 50% 50%;
    background:
        radial-gradient(ellipse 90% 72% at 92% 4%, rgba(154, 217, 223, 0.76) 0%, rgba(154, 217, 223, 0.18) 24%, transparent 66%),
        radial-gradient(ellipse 75% 72% at 4% 90%, rgba(243, 247, 245, 0.20) 0%, rgba(154, 217, 223, 0.09) 34%, transparent 72%),
        #141c1f;
}
.auth-page .auth-visual::after {
    background: linear-gradient(180deg, rgba(20, 28, 31, 0.12), transparent 44%, rgba(20, 28, 31, 0.60));
}
.auth-page .auth-motion {
    background: rgba(20, 28, 31, 0.72);
    border-color: rgba(243, 247, 245, 0.22);
}