.login-modes { display: grid; gap: 10px; min-width: 0; margin: 0 0 12px; padding: 0; border: 0; text-align: left; }
.login-modes legend { margin-bottom: 12px; font-size: 1rem; font-weight: 700; color: var(--text); }
.login-modes .login-mode-option { display: flex; align-items: flex-start; gap: 12px; min-height: 76px; margin: 0; padding: 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--text); cursor: pointer; }
.login-modes .login-mode-option.selected { border-color: var(--accent); background: var(--selection); }
.login-modes .login-mode-option:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.login-modes input[type="radio"] { display: block; flex: 0 0 22px; width: 22px; min-height: 22px; height: 22px; margin: 3px 0 0; padding: 0; accent-color: var(--accent); }
.login-mode-option span { min-width: 0; }
.login-mode-option strong { display: block; font-size: 1rem; line-height: 1.5; }
.login-modes .login-mode-option small { display: block; margin-top: 4px; color: var(--muted); font-size: .85rem; line-height: 1.6; }
[data-login-mode-hint] { font-size: .875rem; line-height: 1.6; text-align: left; }
form[data-login-modes] [data-login-readonly-option] { display: flex; align-items: center; gap: 10px; min-height: 44px; }
form[data-login-modes] [data-login-readonly] { width: 22px; height: 22px; min-height: 22px; flex-shrink: 0; margin: 0; padding: 0; accent-color: var(--accent); }
.login-screen { overflow-y: auto; align-items: safe center; }