/* Sign-in / password screens - split panel, collapses to a single column on phones. */

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

.auth-brand {
    flex: 1 1 46%;
    background: var(--brand);
    color: #fff;
    padding: 48px 46px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
}
.auth-brand::after {
    content: ""; position: absolute; inset-inline-end: -120px; inset-block-end: -140px;
    width: 380px; height: 380px; border-radius: 50%;
    background: var(--accent); opacity: .16;
}
.auth-brand .ab-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.auth-brand .ab-top img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; }
.auth-brand .ab-name { font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.auth-brand .ab-mid { position: relative; z-index: 1; max-width: 30ch; }
.auth-brand .ab-mid h2 { font-size: 34px; line-height: 1.15; margin-bottom: 12px; }
.auth-brand .ab-mid p { color: rgba(255, 255, 255, .8); font-size: 15px; }
.auth-brand .ab-foot { font-size: 12.5px; color: rgba(255, 255, 255, .65); position: relative; z-index: 1; }

.auth-panel {
    flex: 1 1 54%;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 22px; background: var(--paper);
}
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { font-size: 25px; margin-bottom: 5px; }
.auth-card .sub { color: var(--ink-3); font-size: 14px; margin-bottom: 22px; }
.auth-card .btn.block { margin-top: 6px; padding: 11px; font-size: 15px; }
.auth-links { margin-top: 16px; font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auth-note {
    margin-top: 22px; padding: 11px 13px; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--line);
    font-size: 12.5px; color: var(--ink-2);
}

@media (max-width: 860px) {
    .auth-wrap { flex-direction: column; }
    .auth-brand { flex: 0 0 auto; padding: 26px 22px; }
    .auth-brand .ab-mid, .auth-brand .ab-foot { display: none; }
    .auth-panel { flex: 1; padding: 30px 20px 50px; align-items: flex-start; }
}

/* Passkey sign-in (fingerprint / Face ID) */
.passkey-box { margin-top: 18px; }
.passkey-box .or { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.passkey-box .or::before, .passkey-box .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.passkey-btn { display: flex; align-items: center; justify-content: center; gap: 9px; }
.passkey-box .hint { margin-top: 9px; font-size: 12.5px; color: var(--ink-3); text-align: center; min-height: 1.3em; }
.passkey-box .hint.bad { color: var(--bad); }