/* Login-only composition; shared widgets retain their interaction and theme contracts. */
.login-page.auth-login-split { background: #fff; }
body.eye-protection .login-page.auth-login-split { background: #F5F1E8; }
.login-page.auth-login-split { align-items: center; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.auth-login-split .login-container { max-width: none; }
.auth-login-split .login-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: center;
    gap: 24px 0;
    padding: 24px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body.eye-protection .auth-login-split .login-card { background: transparent; box-shadow: none; }
.auth-login-split .auth-login-divider { margin: 0; }
.auth-login-split .auth-login-divider.ombox-divider-horizontal { display: none; }
.auth-login-split .auth-login-intro { margin: 0; min-width: 0; }
.auth-login-split .auth-login-intro .login-logo { width: min(100%, 280px); max-height: 220px; margin: 0; }
.auth-login-split .auth-login-intro .login-system-name { margin: 0; }
.auth-login-split .auth-login-main { min-width: 0; width: calc(100% - 48px); max-width: 440px; justify-self: center; }
.auth-login-split .auth-login-main > .login-header { margin-bottom: 24px; }
.auth-login-split .auth-login-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: safe center;
    gap: 8px;
    min-width: 0;
    padding: 6px 3px;
    margin-top: 20px;
}
.auth-login-split .auth-login-options > :is(button, a) {
    flex: 0 0 auto;
}
/* Login method controls show only their icons while retaining a 44px hit area. */
.auth-login-split .auth-login-options > .ombox-icon-button {
    border: 0;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    font-size: 20px;
}
.auth-login-split .auth-login-options > .ombox-icon-button:focus-visible {
    outline: 2px solid var(--color-primary, #0087f7);
    outline-offset: -4px;
}
.auth-login-split [data-login-method="password"], .auth-login-split [data-qr-close], .auth-login-split [data-login-method="email"] { --auth-login-icon-color: #2563eb; }
.auth-login-split [data-qr-open], .auth-login-split [data-login-method="qr"] { --auth-login-icon-color: #0891b2; }
.auth-login-split [data-login-method="mobile"] { --auth-login-icon-color: #d97706; }
.auth-login-split [data-login-method="wechat"] { --auth-login-icon-color: #07a63c; }
.auth-login-split [data-login-method="qq"] { --auth-login-icon-color: #1296db; }
.auth-login-split [data-login-method="alipay"] { --auth-login-icon-color: #1677ff; }
.auth-login-split .auth-login-options > :is(button, a) > i { color: var(--auth-login-icon-color, currentColor); }
.auth-login-split .auth-login-options > .ombox-icon-button:is(:active, [data-ombox-pressed="true"]) > i { color: var(--color-button-hover-bg, #008548); }
@media (hover: hover) and (pointer: fine) {
    .auth-login-split .auth-login-options > .ombox-icon-button:hover > i { color: var(--color-button-hover-bg, #008548); }
}
.auth-login-split [data-qr-status] { margin-bottom: 0; }
.auth-login-split .ombox-qrcode { padding: 0; }
/* The white badge covers at most 15% of the QR frame width; finder corners stay clear. */
.auth-login-split .auth-login-qr-logo {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15%;
    aspect-ratio: 1;
    padding: 3px;
    border-radius: 4px;
    background: #fff;
    pointer-events: none;
}
.auth-login-split [data-qrcode-state="ready"] .auth-login-qr-logo:not([hidden]) { display: grid; }
.auth-login-split .ombox-qrcode-frame .auth-login-qr-logo > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
}

@media (max-width: 767.98px) {
    .login-page.auth-login-split { padding-left: calc(18px + env(safe-area-inset-left, 0px)); padding-right: calc(18px + env(safe-area-inset-right, 0px)); }
    .auth-login-split .login-container { max-width: 440px; }
    .auth-login-split .auth-login-main { width: 100%; }
    .auth-login-split .auth-login-divider.ombox-divider-vertical { display: none; }
    .auth-login-split .auth-login-divider.ombox-divider-horizontal { display: block; }
    .auth-login-split .login-card { grid-template-columns: minmax(0, 1fr); padding: 12px 6px; gap: 20px; }
    .auth-login-split .auth-login-intro .login-logo { width: min(100%, 120px); max-height: 80px; }
}