/* Login-only controls; the shared café shell and field treatment live in AuthFlow.css. */
.login-remember { display: inline-flex; max-width: 100%; align-items: center; align-self: flex-start; gap: 12px; cursor: pointer; }
.login-remember-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.login-remember-track { position: relative; width: 42px; height: 24px; flex: 0 0 auto; border: 1px solid rgb(182 190 211 / 34%); border-radius: 999px; background: #353542; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.login-remember-track::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #e5e2ed; box-shadow: 0 1px 4px rgb(0 0 0 / 35%); content: ''; transition: transform .18s ease, background-color .18s ease; }
.login-remember-input:checked + .login-remember-track { border-color: #a77aff; background: #6e28ca; box-shadow: 0 0 14px rgb(113 28 255 / 24%); }
.login-remember-input:checked + .login-remember-track::after { transform: translateX(18px); background: #fff; }
.login-remember-input:focus-visible + .login-remember-track { outline: 2px solid #c9adff; outline-offset: 3px; }
.login-remember-label { color: #c3c0cf; font-size: 16px; line-height: 1.45; }
.login-reset-link { align-self: flex-end; font-size: 16px; }
.login-submit.mud-button-root,
.login-register.mud-button-root { width: 100%; min-height: 48px; border-radius: 11px; font-weight: 800; letter-spacing: .11em; }
.login-submit.mud-button-root { margin-top: 2px; }
.login-submit.mud-button-root:hover { box-shadow: 0 12px 34px rgb(143 57 255 / 43%); }
/* Separate card, content, and action gaps so wrapping buttons never collapse the vertical rhythm. */
.login-qr-panel.mud-paper { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding: 20px; border-color: rgb(182 190 211 / 19%); border-radius: 20px; color: #f3f1fb; background: linear-gradient(135deg, rgb(20 22 35 / 94%), rgb(11 13 22 / 94%)); }
.login-qr-panel .mud-typography-subtitle2 { margin: 0; color: #fff; font-weight: 800; }
.login-qr-panel .mud-typography-caption { color: #aaa7b9; }
.login-qr-panel .mud-button-root { min-height: 44px; border-radius: 12px; }
.login-qr-panel img { border-radius: 15px; }
.login-method-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.login-qr-content { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.login-qr-content-active { align-items: center; }
.login-or { display: flex; height: 34px; align-items: center; gap: 12px; color: #9995a7; font-size: 11px; letter-spacing: .1em; }
.login-or span { height: 1px; flex: 1; background: rgb(182 190 211 / 17%); }
.login-register.mud-button-root:hover { border-color: #bd9aff; background: rgb(113 28 255 / 12%); }

@media (max-width: 600px) {
    .login-remember { gap: 10px; }
    .login-remember-label { font-size: 16px; }
    .login-reset-link { min-height: 44px; display: flex; align-items: center; }
    .login-qr-panel.mud-paper { padding: 18px; border-radius: 18px; }
    /* Full-width actions avoid cramped, uneven wrapping on narrow login panels. */
    .login-method-actions { flex-direction: column; }
    .login-method-actions .mud-button-root { width: 100%; }
    .login-qr-content > .mud-button-root { width: 100%; }
    .login-qr-panel img { max-width: min(220px, 100%); height: auto; }
}